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.focus()
+      this.editor
+        .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.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>')
     })
   })

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

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

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

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

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

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

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

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

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

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.selectAll()
+      editor.commands.setContent('<p>Example Text</p>')
+      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.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')

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

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