ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

write about the Document extension

Browse Source
This commit is contained in:
Hans Pagel
2020-09-09 15:58:06 +02:00
parent bc36e377b3
commit cc7a448474
4 changed files with 95 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
docs/src/demos/Extensions/Document/index.spec.js Normal file
View File

@@ -0,0 +1,37 @@
context('/api/extensions/bold', () => {
beforeEach(() => {
cy.visit('/api/extensions/bold')
cy.get('.ProseMirror').window().then(window => {
const { editor } = window
editor.setContent('<p>Example Text</p>')
editor.focus().selectAll()
})
})
describe('bold', () => {
it('the button should make the selected text bold', () => {
cy.get('.demo__preview button:first').click({ force: true })
cy.get('.ProseMirror').contains('strong', 'Example Text')
})
it('the button should toggle the selected text bold', () => {
cy.get('.demo__preview button:first').dblclick({ force: true })
cy.get('.ProseMirror strong').should('not.exist')
})
it('the keyboard shortcut should make the selected text bold', () => {
const shortcut = Cypress.platform === 'darwin' ? '{meta}b' : '{ctrl}b'
cy.get('.ProseMirror').type(shortcut, {force: true})
cy.get('.ProseMirror').contains('strong', 'Example Text')
})
it('the keyboard shortcut should toggle the selected text bold', () => {
const shortcut = Cypress.platform === 'darwin' ? '{meta}b' : '{ctrl}b'
cy.get('.ProseMirror').type(shortcut, {force: true}).type(shortcut, {force: true})
cy.get('.ProseMirror strong').should('not.exist')
})
})
})

44
docs/src/demos/Extensions/Document/index.vue Normal file
View File

@@ -0,0 +1,44 @@
<template>
<div v-if="editor">
<editor-content :editor="editor" />
</div>
</template>
<script>
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
export default {
components: {
EditorContent,
},
data() {
return {
editor: null,
}
},
mounted() {
this.editor = new Editor({
extensions: [
new Document(),
new Paragraph(),
new Text(),
],
content: `
<p>The Document extension is required. Though, you can write your own implementation, e. g. to give it custom name.</p>
`,
})
window.editor = this.editor
},
beforeDestroy() {
this.editor.destroy()
}
}
</script>

15
docs/src/docPages/api/extensions/document.md
View File

@@ -1 +1,14 @@
# Document # Document
**The `Document` extension is required**, no matter what you build with tiptap. It’s a so called “topNode”, a node that’s the home to all other nodes. Think of it like the `<body>` tag for your document.
The node is very tiny though. It defines a name of the node (`document`), is configured to be a top node (`topNode: true`) and that it can contain multiple other nodes (`block`). That’s all. But have a look yourself:
:::warning Breaking Change from 1.x → 2.x
Tiptap 1 tried to hide that node from you, but it has always been there. A tiny, but important change though: **We renamed the default type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
:::
## Source Code
[packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
## Usage
<demo name="Extensions/Document" highlight="10,28" />

1
docs/src/links.yaml
View File

@@ -128,7 +128,6 @@
# draft: true # draft: true
- title: Document - title: Document
link: /api/extensions/document link: /api/extensions/document
draft: true
- title: Hardbreak - title: Hardbreak
link: /api/extensions/hard-break link: /api/extensions/hard-break
draft: true draft: true