mirror/tiptap
1
0
Fork 0
mirror of https://github.com/ueberdosis/tiptap.git synced 2025-01-18 06:03:22 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:ueberdosis/tiptap-next into main

Browse Source
This commit is contained in:
Hans Pagel 2020-11-13 15:08:40 +01:00
commit 1f30ea271b
52 changed files with 177 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js
View File

@ -5,7 +5,7 @@ context('/examples/export-html-or-json', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
})
})

11
docs/src/demos/Examples/ExportHtmlOrJson/index.vue
View File

@ -69,7 +69,7 @@ export default {
methods: {
setContent() {
// You can pass a JSON document …
this.editor.setContent({
this.editor.commands.setContent({
type: 'document',
content: [{
type: 'paragraph',
@ -86,12 +86,15 @@ export default {
// this.editor.setContent('<p>This is some inserted text. 👋</p>')
// It’s likely that you’d like to focus the Editor after most commands.
this.editor.focus()
this.editor.commands.focus()
},
clearContent() {
this.editor.clearContent(true)
this.editor.focus()
this.editor
.chain()
.clearContent(true)
.focus()
.run()
},
},

2
docs/src/demos/Examples/Links/index.vue
View File

@ -11,7 +11,7 @@
</template>
<script>
import { Editor, mergeAttributes } from '@tiptap/core'
import { Editor } from '@tiptap/core'
import { EditorContent } from '@tiptap/vue'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'

2
docs/src/demos/Examples/MarkdownShortcuts/index.spec.js
View File

@ -5,7 +5,7 @@ context('/examples/markdown-shortcuts', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
})

4
docs/src/demos/Examples/ReadOnly/index.spec.js
View File

@ -7,7 +7,7 @@ context('/examples/read-only', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
cy.get('#editable').uncheck()
editor.insertText('Edited: ')
editor.commands.insertText('Edited: ')
cy.get('.ProseMirror p:first').should('not.contain', 'Edited: ')
})
@ -17,7 +17,7 @@ context('/examples/read-only', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
cy.get('#editable').check()
editor.insertText('Edited: ')
editor.commands.insertText('Edited: ')
cy.get('.ProseMirror p:first').should('contain', 'Edited: ')
})

2
docs/src/demos/Extensions/History/index.spec.js
View File

@ -5,7 +5,7 @@ context('/api/extensions/history', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Mistake</p>')
editor.commands.setContent('<p>Mistake</p>')
})
})

10
docs/src/demos/Extensions/TextAlign/index.spec.js
View File

@ -5,34 +5,34 @@ context('/api/extensions/text-align', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should parse left align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: left">Example Text</p>')
editor.commands.setContent('<p style="text-align: left">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: left">Example Text</p>')
})
})
it('should parse center align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: center">Example Text</p>')
editor.commands.setContent('<p style="text-align: center">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: center">Example Text</p>')
})
})
it('should parse right align text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: right">Example Text</p>')
editor.commands.setContent('<p style="text-align: right">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: right">Example Text</p>')
})
})
it('should parse left justify text correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p style="text-align: justify">Example Text</p>')
editor.commands.setContent('<p style="text-align: justify">Example Text</p>')
expect(editor.getHTML()).to.eq('<p style="text-align: justify">Example Text</p>')
})
})

2
docs/src/demos/Extensions/Typography/index.spec.js
View File

@ -5,7 +5,7 @@ context('/api/extensions/typography', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
})

16
docs/src/demos/Marks/Bold/index.spec.js
View File

@ -5,37 +5,37 @@ context('/api/marks/bold', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should transform b tags to strong tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><b>Example Text</b></p>')
editor.commands.setContent('<p><b>Example Text</b></p>')
expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
})
})
it('sould omit b tags with normal font weight inline style', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><b style="font-weight: normal">Example Text</b></p>')
editor.commands.setContent('<p><b style="font-weight: normal">Example Text</b></p>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
})
})
it('should transform any tag with bold inline style to strong tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><span style="font-weight: bold">Example Text</span></p>')
editor.commands.setContent('<p><span style="font-weight: bold">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
editor.setContent('<p><span style="font-weight: bolder">Example Text</span></p>')
editor.commands.setContent('<p><span style="font-weight: bolder">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
editor.setContent('<p><span style="font-weight: 500">Example Text</span></p>')
editor.commands.setContent('<p><span style="font-weight: 500">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
editor.setContent('<p><span style="font-weight: 900">Example Text</span></p>')
editor.commands.setContent('<p><span style="font-weight: 900">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><strong>Example Text</strong></p>')
})
})

8
docs/src/demos/Marks/Code/index.spec.js
View File

@ -5,17 +5,17 @@ context('/api/marks/code', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse code tags correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><code>Example Text</code></p>')
editor.commands.setContent('<p><code>Example Text</code></p>')
expect(editor.getHTML()).to.eq('<p><code>Example Text</code></p>')
editor.setContent('<code>Example Text</code>')
editor.commands.setContent('<code>Example Text</code>')
expect(editor.getHTML()).to.eq('<p><code>Example Text</code></p>')
})
})

2
docs/src/demos/Marks/Highlight/index.spec.js
View File

@ -24,7 +24,7 @@ context('/api/marks/highlight', () => {
it('should highlight the text in a specific color', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.highlight({ color: 'red' })
editor.commands.highlight({ color: 'red' })
cy.get('.ProseMirror')
.find('mark')

10
docs/src/demos/Marks/Italic/index.spec.js
View File

@ -5,28 +5,28 @@ context('/api/marks/italic', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('i tags should be transformed to em tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><i>Example Text</i></p>')
editor.commands.setContent('<p><i>Example Text</i></p>')
expect(editor.getHTML()).to.eq('<p><em>Example Text</em></p>')
})
})
it('i tags with normal font style should be omitted', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><i style="font-style: normal">Example Text</i></p>')
editor.commands.setContent('<p><i style="font-style: normal">Example Text</i></p>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
})
})
it('generic tags with italic style should be transformed to strong tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><span style="font-style: italic">Example Text</span></p>')
editor.commands.setContent('<p><span style="font-style: italic">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><em>Example Text</em></p>')
})
})

10
docs/src/demos/Marks/Link/index.spec.js
View File

@ -5,28 +5,28 @@ context('/api/marks/link', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse a tags correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><a href="#">Example Text</a></p>')
editor.commands.setContent('<p><a href="#">Example Text</a></p>')
expect(editor.getHTML()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
})
})
it('should parse a tags with target attribute correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><a href="#" target="_self">Example Text</a></p>')
editor.commands.setContent('<p><a href="#" target="_self">Example Text</a></p>')
expect(editor.getHTML()).to.eq('<p><a href="#" target="_self" rel="noopener noreferrer nofollow">Example Text</a></p>')
})
})
it('should parse a tags with rel attribute correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><a href="#" rel="follow">Example Text</a></p>')
editor.commands.setContent('<p><a href="#" rel="follow">Example Text</a></p>')
expect(editor.getHTML()).to.eq('<p><a href="#" target="_blank" rel="noopener noreferrer nofollow">Example Text</a></p>')
})
})

12
docs/src/demos/Marks/Strike/index.spec.js
View File

@ -5,35 +5,35 @@ context('/api/marks/strike', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse s tags correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><s>Example Text</s></p>')
editor.commands.setContent('<p><s>Example Text</s></p>')
expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
})
})
it('should transform del tags to s tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><del>Example Text</del></p>')
editor.commands.setContent('<p><del>Example Text</del></p>')
expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
})
})
it('should transform strike tags to s tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><strike>Example Text</strike></p>')
editor.commands.setContent('<p><strike>Example Text</strike></p>')
expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
})
})
it('should transform any tag with text decoration line through to s tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><span style="text-decoration: line-through">Example Text</span></p>')
editor.commands.setContent('<p><span style="text-decoration: line-through">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><s>Example Text</s></p>')
})
})

8
docs/src/demos/Marks/Underline/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/marks/underline', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse u tags correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><u>Example Text</u></p>')
editor.commands.setContent('<p><u>Example Text</u></p>')
expect(editor.getHTML()).to.eq('<p><u>Example Text</u></p>')
})
})
it('should transform any tag with text decoration underline to u tags', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p><span style="text-decoration: underline">Example Text</span></p>')
editor.commands.setContent('<p><span style="text-decoration: underline">Example Text</span></p>')
expect(editor.getHTML()).to.eq('<p><u>Example Text</u></p>')
})
})

12
docs/src/demos/Nodes/Blockquote/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/nodes/blockquote', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse blockquote tags correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<blockquote><p>Example Text</p></blockquote>')
editor.commands.setContent('<blockquote><p>Example Text</p></blockquote>')
expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
})
})
it('should parse blockquote tags without paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<blockquote>Example Text</blockquote>')
editor.commands.setContent('<blockquote>Example Text</blockquote>')
expect(editor.getHTML()).to.eq('<blockquote><p>Example Text</p></blockquote>')
})
})
@ -38,8 +38,8 @@ context('/api/nodes/blockquote', () => {
it('the button should wrap all nodes in one blockquote', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p><p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p><p>Example Text</p>')
editor.commands.selectAll()
})
cy.get('.demo__preview button:first')

18
docs/src/demos/Nodes/BulletList/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/nodes/bullet-list', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse unordered lists correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul><li><p>Example Text</p></li></ul>')
editor.commands.setContent('<ul><li><p>Example Text</p></li></ul>')
expect(editor.getHTML()).to.eq('<ul><li><p>Example Text</p></li></ul>')
})
})
it('should parse unordered lists without paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul><li>Example Text</li></ul>')
editor.commands.setContent('<ul><li>Example Text</li></ul>')
expect(editor.getHTML()).to.eq('<ul><li><p>Example Text</p></li></ul>')
})
})
@ -63,7 +63,7 @@ context('/api/nodes/bullet-list', () => {
it('should leave the list with double enter', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -81,7 +81,7 @@ context('/api/nodes/bullet-list', () => {
it('should make a bullet list from an asterisk', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -98,7 +98,7 @@ context('/api/nodes/bullet-list', () => {
it('should make a bullet list from a dash', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -115,7 +115,7 @@ context('/api/nodes/bullet-list', () => {
it('should make a bullet list from a plus', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -132,7 +132,7 @@ context('/api/nodes/bullet-list', () => {
it('should remove the bullet list after pressing backspace', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')

18
docs/src/demos/Nodes/CodeBlock/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/nodes/code-block', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse code blocks correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<pre><code>Example Text</code></pre>')
editor.commands.setContent('<pre><code>Example Text</code></pre>')
expect(editor.getHTML()).to.eq('<pre><code>Example Text</code></pre>')
})
})
it('should parse code blocks with language correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<pre><code class="language-css">Example Text</code></pre>')
editor.commands.setContent('<pre><code class="language-css">Example Text</code></pre>')
expect(editor.getHTML()).to.eq('<pre><code class="language-css">Example Text</code></pre>')
})
})
@ -74,7 +74,7 @@ context('/api/nodes/code-block', () => {
it('should parse the language from a HTML code block', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<pre><code class="language-css">body { display: none; }</code></pre>')
editor.commands.setContent('<pre><code class="language-css">body { display: none; }</code></pre>')
cy.get('.ProseMirror')
.find('pre>code.language-css')
@ -84,7 +84,7 @@ context('/api/nodes/code-block', () => {
it('should make a code block from backtick markdown shortcuts', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror')
.type('``` Code')
@ -95,7 +95,7 @@ context('/api/nodes/code-block', () => {
it('should make a code block from tilde markdown shortcuts', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror')
.type('~~~ Code')
@ -106,7 +106,7 @@ context('/api/nodes/code-block', () => {
it('should make a code block for js with backticks', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror')
.type('```js Code')
@ -117,7 +117,7 @@ context('/api/nodes/code-block', () => {
it('should make a code block for js with tildes', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror')
.type('~~~js Code')

2
docs/src/demos/Nodes/Document/index.spec.js
View File

@ -5,7 +5,7 @@ context('/api/nodes/document', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p></p>')
editor.commands.setContent('<p></p>')
})
})

6
docs/src/demos/Nodes/HardBreak/index.spec.js
View File

@ -5,20 +5,20 @@ context('/api/nodes/hard-break', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should parse hard breaks correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example<br>Text</p>')
editor.commands.setContent('<p>Example<br>Text</p>')
expect(editor.getHTML()).to.eq('<p>Example<br>Text</p>')
})
})
it('should parse hard breaks with self-closing tag correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example<br />Text</p>')
editor.commands.setContent('<p>Example<br />Text</p>')
expect(editor.getHTML()).to.eq('<p>Example<br>Text</p>')
})
})

10
docs/src/demos/Nodes/Heading/index.spec.js
View File

@ -5,8 +5,8 @@ context('/api/nodes/heading', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
@ -19,7 +19,7 @@ context('/api/nodes/heading', () => {
headings.forEach(html => {
it(`should parse headings correctly (${html})`, () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent(html)
editor.commands.setContent(html)
expect(editor.getHTML()).to.eq(html)
})
})
@ -27,7 +27,7 @@ context('/api/nodes/heading', () => {
it('should omit disabled heading levels', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<h4>Example Text</h4>')
editor.commands.setContent('<h4>Example Text</h4>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
})
})
@ -88,7 +88,7 @@ context('/api/nodes/heading', () => {
it('should make a heading from the default markdown shortcut', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')

10
docs/src/demos/Nodes/HorizontalRule/index.spec.js
View File

@ -5,20 +5,20 @@ context('/api/nodes/horizontal-rule', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
})
})
it('should parse horizontal rules correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p><hr>')
editor.commands.setContent('<p>Example Text</p><hr>')
expect(editor.getHTML()).to.eq('<p>Example Text</p><hr>')
})
})
it('should parse horizontal rules with self-closing tag correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p><hr />')
editor.commands.setContent('<p>Example Text</p><hr />')
expect(editor.getHTML()).to.eq('<p>Example Text</p><hr>')
})
})
@ -36,7 +36,7 @@ context('/api/nodes/horizontal-rule', () => {
it('the default markdown shortcut should add a horizontal rule', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror hr')
.should('not.exist')
@ -51,7 +51,7 @@ context('/api/nodes/horizontal-rule', () => {
it('the alternative markdown shortcut should add a horizontal rule', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
cy.get('.ProseMirror hr')
.should('not.exist')

4
docs/src/demos/Nodes/Image/index.spec.js
View File

@ -5,8 +5,8 @@ context('/api/nodes/image', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})

14
docs/src/demos/Nodes/OrderedList/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/nodes/ordered-list', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse ordered lists correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ol><li><p>Example Text</p></li></ol>')
editor.commands.setContent('<ol><li><p>Example Text</p></li></ol>')
expect(editor.getHTML()).to.eq('<ol><li><p>Example Text</p></li></ol>')
})
})
it('should parse ordered lists without paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ol><li>Example Text</li></ol>')
editor.commands.setContent('<ol><li>Example Text</li></ol>')
expect(editor.getHTML()).to.eq('<ol><li><p>Example Text</p></li></ol>')
})
})
@ -63,7 +63,7 @@ context('/api/nodes/ordered-list', () => {
it('should leave the list with double enter', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -81,7 +81,7 @@ context('/api/nodes/ordered-list', () => {
it('should make a ordered list from a number', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -98,7 +98,7 @@ context('/api/nodes/ordered-list', () => {
it('should remove the ordered list after pressing backspace', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')

8
docs/src/demos/Nodes/Paragraph/index.spec.js
View File

@ -5,19 +5,19 @@ context('/api/nodes/paragraph', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
})
it('should parse paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.commands.setContent('<p>Example Text</p>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
editor.setContent('<p><x-unknown>Example Text</x-unknown></p>')
editor.commands.setContent('<p><x-unknown>Example Text</x-unknown></p>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
editor.setContent('<p style="display: block;">Example Text</p>')
editor.commands.setContent('<p style="display: block;">Example Text</p>')
expect(editor.getHTML()).to.eq('<p>Example Text</p>')
})
})

14
docs/src/demos/Nodes/TaskList/index.spec.js
View File

@ -5,21 +5,21 @@ context('/api/nodes/task-list', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<p>Example Text</p>')
editor.selectAll()
editor.commands.setContent('<p>Example Text</p>')
editor.commands.selectAll()
})
})
it('should parse unordered lists correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul data-type="task_list"><li data-checked="true" data-type="taskItem"><p>Example Text</p></li></ul>')
editor.commands.setContent('<ul data-type="task_list"><li data-checked="true" data-type="taskItem"><p>Example Text</p></li></ul>')
expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="true" data-type="taskItem"><p>Example Text</p></li></ul>')
})
})
it('should parse unordered lists without paragraphs correctly', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.setContent('<ul data-type="task_list"><li data-checked="false" data-type="taskItem">Example Text</li></ul>')
editor.commands.setContent('<ul data-type="task_list"><li data-checked="false" data-type="taskItem">Example Text</li></ul>')
expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="false" data-type="taskItem"><p>Example Text</p></li></ul>')
})
})
@ -63,7 +63,7 @@ context('/api/nodes/task-list', () => {
it('should leave the list with double enter', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -81,7 +81,7 @@ context('/api/nodes/task-list', () => {
it('should make a task list from square brackets', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')
@ -100,7 +100,7 @@ context('/api/nodes/task-list', () => {
it.only('should make a task list from checked square brackets', () => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
cy.get('.ProseMirror')

2
docs/src/demos/Nodes/Text/index.spec.js
View File

@ -5,7 +5,7 @@ context('/api/nodes/text', () => {
beforeEach(() => {
cy.get('.ProseMirror').then(([{ editor }]) => {
editor.clearContent()
editor.commands.clearContent()
})
})

2
docs/src/docPages/api/commands.md
View File

@ -9,7 +9,7 @@ The editor provides a ton of commands to programmtically add or change content o
All available commands are accessible through an editor instance. Let’s say you want to make text bold when a user clicks on a button. That’s how that would look like:
```js
editor.bold()
editor.commands.bold()
```
While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.

2
docs/src/docPages/api/keyboard-shortcuts.md
View File

@ -104,7 +104,7 @@ const CustomBulletList = BulletList.extend({
addKeyboardShortcuts() {
return {
// ↓ your new keyboard shortcut
'Mod-l': () => this.editor.bulletList(),
'Mod-l': () => this.editor.commands.bulletList(),
}
},
})

4
docs/src/docPages/guide/build-custom-extensions.md
View File

@ -25,7 +25,7 @@ import BulletList from '@tiptap/extension-bullet-list'
const CustomBulletList = BulletList.extend({
addKeyboardShortcuts() {
return {
'Mod-l': () => this.editor.bulletList(),
'Mod-l': () => this.editor.commands.bulletList(),
}
},
})
@ -296,7 +296,7 @@ import BulletList from '@tiptap/extension-bullet-list'
const CustomBulletList = BulletList.extend({
addKeyboardShortcuts() {
return {
'Mod-l': () => this.editor.bulletList(),
'Mod-l': () => this.editor.commands.bulletList(),
}
},
})

2
docs/src/docPages/guide/create-your-editor.md
View File

@ -10,7 +10,7 @@ Let’s start to add your first button to the editor. Once initiated the editor
<demo name="SimpleMenuBar" highlight="5-11" />
To mark selected text bold we can use `this.editor.bold`. There a ton of other commands and you can even chain them to do multiple things at once.
To mark selected text bold we can use `editor.commands.bold()`. There a ton of other commands and you can even chain them to do multiple things at once.
You might wonder what features tiptap supports out of the box. In the above example we added the `@tiptap/starter-kit`. That already includes support for paragraphs, text, bold, italic, inline code and code blocks. There are a lot more, but you have to explicitly import them. You will learn how that works in the next example.

2
docs/src/docPages/guide/store-content.md
View File

@ -73,7 +73,7 @@ new Editor({
Or if you want to restore the content later (e. g. after an API call has finished), you can do that too:
```js
editor.setContent(`<p>Example Text</p>`)
editor.commands.setContent(`<p>Example Text</p>`)
```
## Not an option: Markdown

46
packages/core/src/CommandManager.ts
View File

@ -1,6 +1,9 @@
import { EditorState, Transaction } from 'prosemirror-state'
import {
SingleCommands, ChainedCommands, Editor, CommandSpec,
SingleCommands,
ChainedCommands,
Editor,
CommandSpec,
} from './Editor'
import getAllMethodNames from './utils/getAllMethodNames'
@ -37,26 +40,25 @@ export default class CommandManager {
return this.editor
}
public runSingleCommand(name: string) {
public createCommands() {
const { commands, editor } = this
const { state, view } = editor
const command = commands[name]
if (!command) {
// TODO: prevent vue devtools to throw error
// throw new Error(`tiptap: command '${name}' not found.`)
return
}
return Object.fromEntries(Object
.entries(commands)
.map(([name, command]) => {
const method = (...args: any) => {
const { tr } = state
const props = this.buildProps(tr)
const callback = command(...args)(props)
return (...args: any) => {
const { tr } = state
const props = this.buildProps(tr)
const callback = command(...args)(props)
view.dispatch(tr)
view.dispatch(tr)
return callback
}
return callback
}
return [name, method]
})) as SingleCommands
}
public createChain(startTr?: Transaction, shouldDispatch = true) {
@ -64,11 +66,7 @@ export default class CommandManager {
const { state, view } = editor
const callbacks: boolean[] = []
const hasStartTransaction = !!startTr
const tr = hasStartTransaction ? startTr : state.tr
if (!tr) {
return
}
const tr = startTr || state.tr
return new Proxy({}, {
get: (_, name: string, proxy) => {
@ -101,13 +99,7 @@ export default class CommandManager {
const { commands, editor } = this
const { state } = editor
const dispatch = false
const hasStartTransaction = !!startTr
const tr = hasStartTransaction ? startTr : state.tr
if (!tr) {
return
}
const tr = startTr || state.tr
const props = this.buildProps(tr, dispatch)
const formattedCommands = Object.fromEntries(Object
.entries(commands)

15
packages/core/src/Editor.ts
View File

@ -68,10 +68,6 @@ interface EditorOptions {
editable: boolean,
}
declare module './Editor' {
interface Editor extends SingleCommands {}
}
@magicMethods
export class Editor extends EventEmitter {
@ -116,7 +112,7 @@ export class Editor extends EventEmitter {
this.createView()
this.injectCSS()
window.setTimeout(() => this.proxy.focus(this.options.autoFocus), 0)
window.setTimeout(() => this.commands.focus(this.options.autoFocus), 0)
}
/**
@ -126,7 +122,14 @@ export class Editor extends EventEmitter {
*/
// eslint-disable-next-line
private __get(name: string) {
return this.commandManager.runSingleCommand(name)
// TODO: maybe remove proxy
}
/**
* An object of all registered commands.
*/
public get commands() {
return this.commandManager.createCommands()
}
/**

6
packages/core/src/extensions/keymap.ts
View File

@ -14,21 +14,21 @@ import { createExtension } from '../Extension'
export const Keymap = createExtension({
addKeyboardShortcuts() {
const handleBackspace = () => this.editor.try(({ state, dispatch }) => [
const handleBackspace = () => this.editor.commands.try(({ state, dispatch }) => [
() => undoInputRule(state, dispatch),
() => deleteSelection(state, dispatch),
() => joinBackward(state, dispatch),
() => selectNodeBackward(state, dispatch),
])
const handleDelete = () => this.editor.try(({ state, dispatch }) => [
const handleDelete = () => this.editor.commands.try(({ state, dispatch }) => [
() => deleteSelection(state, dispatch),
() => joinForward(state, dispatch),
() => selectNodeForward(state, dispatch),
])
return {
Enter: () => this.editor.try(({ commands, state, dispatch }) => [
Enter: () => this.editor.commands.try(({ commands, state, dispatch }) => [
() => newlineInCode(state, dispatch),
() => createParagraphNear(state, dispatch),
() => liftEmptyBlock(state, dispatch),

2
packages/extension-blockquote/src/index.ts
View File

@ -35,7 +35,7 @@ const Blockquote = createNode({
addKeyboardShortcuts() {
return {
'Shift-Mod-9': () => this.editor.blockquote(),
'Shift-Mod-9': () => this.editor.commands.blockquote(),
}
},

2
packages/extension-bold/src/index.ts
View File

@ -43,7 +43,7 @@ const Bold = createMark({
addKeyboardShortcuts() {
return {
'Mod-b': () => this.editor.bold(),
'Mod-b': () => this.editor.commands.bold(),
}
},

2
packages/extension-bullet-list/src/index.ts
View File

@ -33,7 +33,7 @@ const BulletList = createNode({
addKeyboardShortcuts() {
return {
'Shift-Control-8': () => this.editor.bulletList(),
'Shift-Control-8': () => this.editor.commands.bulletList(),
}
},

2
packages/extension-code-block/src/index.ts
View File

@ -81,7 +81,7 @@ const CodeBlock = createNode({
addKeyboardShortcuts() {
return {
'Mod-Shift-c': () => this.editor.codeBlock(),
'Mod-Shift-c': () => this.editor.commands.codeBlock(),
}
},

2
packages/extension-code/src/index.ts
View File

@ -33,7 +33,7 @@ const Code = createMark({
addKeyboardShortcuts() {
return {
'Mod-`': () => this.editor.code(),
'Mod-`': () => this.editor.commands.code(),
}
},

4
packages/extension-hard-break/src/index.ts
View File

@ -42,8 +42,8 @@ const HardBreak = createNode({
addKeyboardShortcuts() {
return {
'Mod-Enter': () => this.editor.hardBreak(),
'Shift-Enter': () => this.editor.hardBreak(),
'Mod-Enter': () => this.editor.commands.hardBreak(),
'Shift-Enter': () => this.editor.commands.hardBreak(),
}
},
})

2
packages/extension-heading/src/index.ts
View File

@ -65,7 +65,7 @@ const Heading = createNode({
return this.options.levels.reduce((items, level) => ({
...items,
...{
[`Mod-Alt-${level}`]: () => this.editor.setBlockType('heading', { level }),
[`Mod-Alt-${level}`]: () => this.editor.commands.setBlockType('heading', { level }),
},
}), {})
},

2
packages/extension-highlight/src/index.ts
View File

@ -59,7 +59,7 @@ const Highlight = createMark({
addKeyboardShortcuts() {
return {
'Mod-e': () => this.editor.highlight(),
'Mod-e': () => this.editor.commands.highlight(),
}
},

6
packages/extension-history/src/index.ts
View File

@ -37,9 +37,9 @@ const History = createExtension({
addKeyboardShortcuts() {
return {
'Mod-z': () => this.editor.undo(),
'Mod-y': () => this.editor.redo(),
'Shift-Mod-z': () => this.editor.redo(),
'Mod-z': () => this.editor.commands.undo(),
'Mod-y': () => this.editor.commands.redo(),
'Shift-Mod-z': () => this.editor.commands.redo(),
}
},
})

2
packages/extension-italic/src/index.ts
View File

@ -42,7 +42,7 @@ const Italic = createMark({
addKeyboardShortcuts() {
return {
'Mod-i': () => this.editor.italic(),
'Mod-i': () => this.editor.commands.italic(),
}
},

6
packages/extension-list-item/src/index.ts
View File

@ -21,9 +21,9 @@ const ListItem = createNode({
addKeyboardShortcuts() {
return {
Enter: () => this.editor.splitListItem('listItem'),
Tab: () => this.editor.sinkListItem('listItem'),
'Shift-Tab': () => this.editor.liftListItem('listItem'),
Enter: () => this.editor.commands.splitListItem('listItem'),
Tab: () => this.editor.commands.sinkListItem('listItem'),
'Shift-Tab': () => this.editor.commands.liftListItem('listItem'),
}
},
})

2
packages/extension-ordered-list/src/index.ts
View File

@ -52,7 +52,7 @@ const OrderedList = createNode({
addKeyboardShortcuts() {
return {
'Shift-Control-9': () => this.editor.orderedList(),
'Shift-Control-9': () => this.editor.commands.orderedList(),
}
},

2
packages/extension-paragraph/src/index.ts
View File

@ -31,7 +31,7 @@ const Paragraph = createNode({
addKeyboardShortcuts() {
return {
'Mod-Alt-0': () => this.editor.paragraph(),
'Mod-Alt-0': () => this.editor.commands.paragraph(),
}
},
})

2
packages/extension-strike/src/index.ts
View File

@ -42,7 +42,7 @@ const Strike = createMark({
addKeyboardShortcuts() {
return {
'Mod-d': () => this.editor.strike(),
'Mod-d': () => this.editor.commands.strike(),
}
},

8
packages/extension-task-item/src/index.ts
View File

@ -49,8 +49,8 @@ const TaskItem = createNode({
addKeyboardShortcuts() {
const shortcuts = {
Enter: () => this.editor.splitListItem('taskItem'),
'Shift-Tab': () => this.editor.liftListItem('taskItem'),
Enter: () => this.editor.commands.splitListItem('taskItem'),
'Shift-Tab': () => this.editor.commands.liftListItem('taskItem'),
}
if (!this.options.nested) {
@ -59,7 +59,7 @@ const TaskItem = createNode({
return {
...shortcuts,
Tab: () => this.editor.sinkListItem('taskItem'),
Tab: () => this.editor.commands.sinkListItem('taskItem'),
}
},
@ -78,7 +78,7 @@ const TaskItem = createNode({
view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
checked,
}))
editor.focus()
editor.commands.focus()
}
})

10
packages/extension-text-align/src/index.ts
View File

@ -52,13 +52,13 @@ const TextAlign = createExtension({
// TODO: re-use only 'textAlign' attribute
// TODO: use custom splitBlock only for `this.options.types`
// TODO: use complete default enter handler (chainCommand) with custom splitBlock
Enter: () => this.editor.splitBlock({
Enter: () => this.editor.commands.splitBlock({
withAttributes: true,
}),
'Ctrl-Shift-l': () => this.editor.textAlign('left'),
'Ctrl-Shift-e': () => this.editor.textAlign('center'),
'Ctrl-Shift-r': () => this.editor.textAlign('right'),
'Ctrl-Shift-j': () => this.editor.textAlign('justify'),
'Ctrl-Shift-l': () => this.editor.commands.textAlign('left'),
'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'),
'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'),
'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'),
}
},
})

2
packages/extension-underline/src/index.ts
View File

@ -28,7 +28,7 @@ const Underline = createMark({
addKeyboardShortcuts() {
return {
'Mod-u': () => this.editor.underline(),
'Mod-u': () => this.editor.commands.underline(),
}
},
})