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

docs/src/demos/Examples/ExportHtmlOrJson/index.spec.js

@@ -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>')
     })
   })
 

docs/src/demos/Examples/ExportHtmlOrJson/index.vue

@@ -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
-      this.editor.focus()
+        .chain()
+        .clearContent(true)
+        .focus()
+        .run()
     },
   },
 

docs/src/demos/Examples/Links/index.vue

@@ -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'

docs/src/demos/Examples/MarkdownShortcuts/index.spec.js

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

docs/src/demos/Examples/ReadOnly/index.spec.js

@@ -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: ')
     })

docs/src/demos/Extensions/History/index.spec.js

@@ -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>')
     })
   })
 

docs/src/demos/Extensions/TextAlign/index.spec.js

@@ -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>')
     })
   })

docs/src/demos/Extensions/Typography/index.spec.js

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

docs/src/demos/Marks/Bold/index.spec.js

@@ -5,37 +5,37 @@ context('/api/marks/bold', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Marks/Code/index.spec.js

@@ -5,17 +5,17 @@ context('/api/marks/code', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Marks/Highlight/index.spec.js

@@ -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')

docs/src/demos/Marks/Italic/index.spec.js

@@ -5,28 +5,28 @@ context('/api/marks/italic', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Marks/Link/index.spec.js

@@ -5,28 +5,28 @@ context('/api/marks/link', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Marks/Strike/index.spec.js

@@ -5,35 +5,35 @@ context('/api/marks/strike', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Marks/Underline/index.spec.js

@@ -5,21 +5,21 @@ context('/api/marks/underline', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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>')
     })
   })

docs/src/demos/Nodes/Blockquote/index.spec.js

@@ -5,21 +5,21 @@ context('/api/nodes/blockquote', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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.commands.setContent('<p>Example Text</p><p>Example Text</p>')
-      editor.selectAll()
+      editor.commands.selectAll()
     })
 
     cy.get('.demo__preview button:first')

docs/src/demos/Nodes/BulletList/index.spec.js

@@ -5,21 +5,21 @@ context('/api/nodes/bullet-list', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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')

docs/src/demos/Nodes/CodeBlock/index.spec.js

@@ -5,21 +5,21 @@ context('/api/nodes/code-block', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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')

docs/src/demos/Nodes/Document/index.spec.js

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

docs/src/demos/Nodes/HardBreak/index.spec.js

@@ -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>')
     })
   })

docs/src/demos/Nodes/Heading/index.spec.js

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

docs/src/demos/Nodes/HorizontalRule/index.spec.js

@@ -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')

docs/src/demos/Nodes/Image/index.spec.js

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

docs/src/demos/Nodes/OrderedList/index.spec.js

@@ -5,21 +5,21 @@ context('/api/nodes/ordered-list', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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')

docs/src/demos/Nodes/Paragraph/index.spec.js

@@ -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>')
     })
   })

docs/src/demos/Nodes/TaskList/index.spec.js

@@ -5,21 +5,21 @@ context('/api/nodes/task-list', () => {
 
   beforeEach(() => {
     cy.get('.ProseMirror').then(([{ editor }]) => {
-      editor.setContent('<p>Example Text</p>')
+      editor.commands.setContent('<p>Example Text</p>')
-      editor.selectAll()
+      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')

docs/src/demos/Nodes/Text/index.spec.js

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

docs/src/docPages/api/commands.md

@@ -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.

docs/src/docPages/api/keyboard-shortcuts.md

@@ -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(),
     }
   },
 })

docs/src/docPages/guide/build-custom-extensions.md

@@ -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(),
     }
   },
 })

docs/src/docPages/guide/create-your-editor.md

@@ -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.
 

docs/src/docPages/guide/store-content.md

@@ -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

packages/core/src/CommandManager.ts

@@ -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,18 +40,14 @@ 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) {
+    return Object.fromEntries(Object
-      // TODO: prevent vue devtools to throw error
+      .entries(commands)
-      // throw new Error(`tiptap: command '${name}' not found.`)
+      .map(([name, command]) => {
-      return
+        const method = (...args: any) => {
-    }
-
-    return (...args: any) => {
           const { tr } = state
           const props = this.buildProps(tr)
           const callback = command(...args)(props)
@@ -57,6 +56,9 @@ export default class CommandManager {
 
           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
+    const tr = startTr || state.tr
-
-    if (!tr) {
-      return
-    }
 
     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 = startTr || state.tr
-    const tr = hasStartTransaction ? startTr : state.tr
-
-    if (!tr) {
-      return
-    }
-
     const props = this.buildProps(tr, dispatch)
     const formattedCommands = Object.fromEntries(Object
       .entries(commands)

packages/core/src/Editor.ts

@@ -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()
   }
 
   /**

packages/core/src/extensions/keymap.ts

@@ -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),

packages/extension-blockquote/src/index.ts

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

packages/extension-bold/src/index.ts

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

packages/extension-bullet-list/src/index.ts

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

packages/extension-code-block/src/index.ts

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

packages/extension-code/src/index.ts

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

packages/extension-hard-break/src/index.ts

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

packages/extension-heading/src/index.ts

@@ -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 }),
       },
     }), {})
   },

packages/extension-highlight/src/index.ts

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

packages/extension-history/src/index.ts

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

packages/extension-italic/src/index.ts

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

packages/extension-list-item/src/index.ts

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

packages/extension-ordered-list/src/index.ts

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

packages/extension-paragraph/src/index.ts

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

packages/extension-strike/src/index.ts

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

packages/extension-task-item/src/index.ts

@@ -49,8 +49,8 @@ const TaskItem = createNode({
 
   addKeyboardShortcuts() {
     const shortcuts = {
-      Enter: () => this.editor.splitListItem('taskItem'),
+      Enter: () => this.editor.commands.splitListItem('taskItem'),
-      'Shift-Tab': () => this.editor.liftListItem('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()
         }
       })
 

packages/extension-text-align/src/index.ts

@@ -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-l': () => this.editor.commands.textAlign('left'),
-      'Ctrl-Shift-e': () => this.editor.textAlign('center'),
+      'Ctrl-Shift-e': () => this.editor.commands.textAlign('center'),
-      'Ctrl-Shift-r': () => this.editor.textAlign('right'),
+      'Ctrl-Shift-r': () => this.editor.commands.textAlign('right'),
-      'Ctrl-Shift-j': () => this.editor.textAlign('justify'),
+      'Ctrl-Shift-j': () => this.editor.commands.textAlign('justify'),
     }
   },
 })

packages/extension-underline/src/index.ts

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