Merge branch 'main' of https://github.com/ueberdosis/tiptap-next into feature/replace-classes

# Conflicts:
#	docs/src/demos/Examples/Focus/index.vue
#	docs/src/docPages/api/extensions/placeholder.md
#	docs/src/docPages/general/roadmap.md

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

@@ -1,4 +1,4 @@
-context('basic', () => {
+context('/examples/basic', () => {
   beforeEach(() => {
     cy.visit('/examples/basic')
 

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

@@ -1,4 +1,4 @@
-context('export-html-or-json', () => {
+context('/examples/export-html-or-json', () => {
   beforeEach(() => {
     cy.visit('/examples/export-html-or-json')
   })

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

@@ -1,4 +1,4 @@
-context('focus', () => {
+context('/examples/focus', () => {
   beforeEach(() => {
     cy.visit('/examples/focus')
   })

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

@@ -9,12 +9,7 @@ import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
-import History from '@tiptap/extension-history'
-import Bold from '@tiptap/extension-bold'
-import Italic from '@tiptap/extension-italic'
 import Code from '@tiptap/extension-code'
-import CodeBlock from '@tiptap/extension-codeblock'
-import Heading from '@tiptap/extension-heading'
 import Focus from '@tiptap/extension-focus'
 
 export default {
@@ -32,14 +27,9 @@ export default {
     this.editor = new Editor({
       extensions: [
         Document(),
-        History(),
         Paragraph(),
         Text(),
-        Bold(),
-        Italic(),
         Code(),
-        CodeBlock(),
-        Heading(),
         Focus({
           className: 'has-focus',
           nested: true,
@@ -48,16 +38,12 @@ export default {
       autoFocus: true,
       content: `
         <p>
-          With the focus extension you can add custom classes to focused nodes. Default options:
+          The focus extension adds custom classes to focused nodes. By default, it’ll add a <code>has-focus</code> class, even to nested nodes:
         </p>
-        <pre><code>{\n  className: 'has-focus',\n  nested: true,\n}</code></pre>
+        <pre><code>{ className: 'has-focus', nested: true }</code></pre>
         <ul>
-          <li>
+          <li>With <code>nested: true</code> nested elements like this list item will be focused.</li>
-            When set <code>nested</code> to <code>true</code> also nested elements like this list item will be captured.
+          <li>Otherwise the whole list will get the focus class, even if only a single list item is selected.</li>
-          </li>
-          <li>
-            Otherwise only the wrapping list will get this class.
-          </li>
         </ul>
       `,
     })

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

@@ -1,4 +1,4 @@
-context('history', () => {
+context('/examples/history', () => {
   beforeEach(() => {
     cy.visit('/examples/history')
   })

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

@@ -1,10 +1,10 @@
-context('markdown-shortcuts', () => {
+context('/examples/markdown-shortcuts', () => {
   beforeEach(() => {
     cy.visit('/examples/markdown-shortcuts')
 
     cy.get('.ProseMirror').window().then(window => {
       const { editor } = window
-      editor.setContent('<p></p>')
+      editor.clearContent()
     })
   })
 
@@ -69,7 +69,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('code block', () => {
-    it('should create a code block without language', () => {
+    it.skip('should create a code block without language', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('``` {enter}const foo = bar{enter}```', {force: true})
@@ -79,7 +79,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('bullet list', () => {
-    it('should create a bullet list from asteriks', () => {
+    it.skip('should create a bullet list from asteriks', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('* foobar', {force: true})
@@ -87,7 +87,7 @@ context('markdown-shortcuts', () => {
       })
     })
 
-    it('should create a bullet list from dashes', () => {
+    it.skip('should create a bullet list from dashes', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('- foobar', {force: true})
@@ -95,7 +95,7 @@ context('markdown-shortcuts', () => {
       })
     })
 
-    it('should create a bullet list from pluses', () => {
+    it.skip('should create a bullet list from pluses', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
           .type('+ foobar', {force: true})
@@ -105,7 +105,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('ordered list', () => {
-    it('should create a ordered list', () => {
+    it.skip('should create a ordered list', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
         .type('1. foobar', {force: true})
@@ -115,7 +115,7 @@ context('markdown-shortcuts', () => {
   })
 
   describe('blockquote', () => {
-    it('should create a blockquote', () => {
+    it.skip('should create a blockquote', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('.ProseMirror')
         .type('> foobar', {force: true})

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

@@ -1,10 +1,10 @@
-context('read-only', () => {
+context('/examples/read-only', () => {
   beforeEach(() => {
     cy.visit('/examples/read-only')
   })
 
   describe('editable', () => {
-    it('should be read-only', () => {
+    it.skip('should be read-only', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('#editable').uncheck()
 
@@ -15,7 +15,7 @@ context('read-only', () => {
       })
     })
 
-    it('should be editable', () => {
+    it.skip('should be editable', () => {
       cy.get('.ProseMirror').window().then(window => {
         cy.get('#editable').check()
 

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

@@ -1,4 +1,4 @@
-context('simple', () => {
+context('/examples/simple', () => {
   beforeEach(() => {
     cy.visit('/examples/simple')
   })

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

@@ -0,0 +1,5 @@
+context('/api/extensions/document', () => {
+  beforeEach(() => {
+    cy.visit('/api/extensions/document')
+  })
+})

docs/src/demos/Extensions/Document/index.vue

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

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

@@ -38,7 +38,7 @@ context('/api/extensions/history', () => {
       })
     })
 
-    it('the keyboard shortcut should apply the last undone change again', () => {
+    it.skip('the keyboard shortcut should apply the last undone change again', () => {
       const undoShortcut = Cypress.platform === 'darwin' ? '{meta}z' : '{ctrl}z'
       const redoShortcut = Cypress.platform === 'darwin' ? '{meta}{shift}z' : '{ctrl}{shift}z'
 

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

@@ -0,0 +1,5 @@
+context('/api/extensions/paragraph', () => {
+  beforeEach(() => {
+    cy.visit('/api/extensions/paragraph')
+  })
+})

docs/src/demos/Extensions/Paragraph/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        new Document(),
+        new Paragraph(),
+        new Text(),
+      ],
+      content: `
+        <p>The Paragraph extension is not required, but it’s very likely you want to use it. It’s needed to write paragraphs of text. 🤓</p>
+      `,
+    })
+
+    window.editor = this.editor
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>

docs/src/docPages/api/events.md

@@ -1 +1,34 @@
-# Events
+# Events
+
+:::warning Out of date
+This content is written for tiptap 1 and needs an update.
+:::
+
+There are some events you can listen for. A full list of events can be found [here](/api/classes.md#editor-options).
+
+```js
+const editor = new Editor({
+  onInit: () => {
+    // editor is initialized
+  },
+  onUpdate: ({ getHTML }) => {
+    // get new content on update
+    const newContent = getHTML()
+  },
+})
+```
+
+It's also possible to register event listeners afterwards.
+
+```js
+const editor = new Editor(…)
+
+editor.on('init', () => {
+  // editor is initialized
+})
+
+editor.on('update', ({ getHTML }) => {
+  // get new content on update
+  const newContent = getHTML()
+})
+```

docs/src/docPages/api/extensions.md

@@ -18,9 +18,6 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
 | [Bold](/api/extensions/bold) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
 | [BulletList](/api/extensions/bullet-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
 | [Code](/api/extensions/code) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
-| [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
-| [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/)
-| [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)
 | [Document](/api/extensions/document) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
 | [HardBreak](/api/extensions/hard-break) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
 | [Heading](/api/extensions/heading) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
@@ -28,20 +25,24 @@ You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which in
 | [HorizontalRule](/api/extensions/horizontal-rule) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
 | [Italic](/api/extensions/italic) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
 | [Link](/api/extensions/link) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
-| [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
-| [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)
 | [OrderedList](/api/extensions/ordered-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
 | [Paragraph](/api/extensions/paragraph) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
-| [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/)
 | [Strike](/api/extensions/strike) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
-| [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/)
-| [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/)
-| [TableTow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/)
 | [Text](/api/extensions/text) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)
-| [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/)
-| [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/)
 | [Underline](/api/extensions/underline) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
 
+<!-- | [CodeBlock](/api/extensions/code-block) | Yes | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/) -->
+<!-- | [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) -->
+<!-- | [Collaboration](/api/extensions/collaboration) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/) -->
+<!-- | [ListItem](/api/extensions/list-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/) -->
+<!-- | [Mention](/api/extensions/mention) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/) -->
+<!-- | [Placeholder](/api/extensions/placeholder) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-placeholder/) -->
+<!-- | [TableCell](/api/extensions/table-cell) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-cell/) -->
+<!-- | [TableHeader](/api/extensions/table-header) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-header/) -->
+<!-- | [TableRow](/api/extensions/table-row) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-table-row/) -->
+<!-- | [TodoItem](/api/extensions/todo-item) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-item/) -->
+<!-- | [TodoList](/api/extensions/todo-list) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-todo-list/) -->
+
 ## Community extensions
 
 :::warning Work in Progress

docs/src/docPages/api/extensions/blockquote.md

@@ -2,7 +2,9 @@
 The Blockquote extension enables you to use the `<blockquote>` HTML tag in the editor.
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/bold.md

@@ -6,7 +6,9 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 :::
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/bullet-list.md

@@ -6,7 +6,9 @@ It’s intended to be used with the `ListItem` extension.
 :::
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/code.md

@@ -2,7 +2,9 @@
 The Code extensions enables you to use the `<code>` HTML tag in the editor. If you paste in text with `<code>` tags it will rendered accordingly.
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/document.md

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

docs/src/docPages/api/extensions/heading.md

@@ -3,7 +3,8 @@ Enables you to use headline HTML tags in the editor.
 
 ## Options
 | Option | Type | Default | Description |
-| ------ | ---- | ---- | ----- |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 | levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are supported. |
 
 ## Commands

docs/src/docPages/api/extensions/horizontal-rule.md

@@ -2,7 +2,9 @@
 Enables you to use the `<hr>` HTML tag in the editor.
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/italic.md

@@ -6,7 +6,9 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
 :::
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/link.md

@@ -3,5 +3,6 @@ Enables you to use the `<a>` HTML tag in the editor.
 
 ## Options
 | Option | Type | Default | Description |
-| ------ | ---- | ---- | ----- |
+| ------ | ---- | ------- | ----------- |
-| openOnClick | Boolean | true | Specifies if links will be opened on click. |
+| class | string | – | Add a custom class to the rendered HTML tag. |
+| openOnClick | Boolean | true | Specifies if links will be opened on click. |

docs/src/docPages/api/extensions/list-item.md

@@ -3,4 +3,9 @@ Enables you to use the `<li>` HTML tag in the editor.
 
 ::: warning Restrictions
 This extensions is intended to be used with the `BulletList` or `OrderedList` extension.
-:::
+:::
+
+## Options
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |

docs/src/docPages/api/extensions/ordered-list.md

@@ -6,7 +6,9 @@ This extensions is intended to be used with the `ListItem` extension.
 :::
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/paragraph.md

@@ -1,2 +1,19 @@
 # Paragraph
-Enables you to use paragraphs in the editor.
+Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
+
+## Options
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
+
+## Commands
+*None*
+
+## Keybindings
+*None*
+
+## Source Code
+[packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
+
+## Usage
+<demo name="Extensions/Paragraph" highlight="11,29" />

docs/src/docPages/api/extensions/placeholder.md

@@ -1,83 +1,2 @@
 # Placeholder
 Enables you to show placeholders on empty paragraphs.
-
-## Table
-This enables support for tables in your editor.
-Tables can be nested and allow all blocks to be used inside.
-Each `<TableCell>` includes a single `<Paragraph>`.
-
-## Options
-| Option | Type | Default | Description |
-| ------ | ---- | ---- | ----- |
-| resizable | Boolean | false | Enables the resizing of columns |
-
-## Keybindings
-* `Tab` → Next Cell
-* `Shift` + `Tab` + ` → Previous Cell
-
-## Commands
-| Command | Options | Description |
-| ------ | ---- | ---------------- |
-| createTable | ```{ rowsCount, colsCount, withHeaderRow }``` | Returns a table node of a given size. `withHeaderRow` defines whether the first row of the table will be a header row. |
-| deleteTable | — | Deletes the complete table which is active |
-| addColumnBefore | — | Add a column before the selection. |
-| addColumnAfter | — | Add a column after the selection. |
-| deleteColumn | — | Removes the selected columns. |
-| addRowBefore | — | Add a table row before the selection. |
-| addRowAfter | — | Add a table row after the selection. |
-| toggleCellMerge | — | See mergeCells and splitCells |
-| mergeCells | — | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
-| splitCell | — | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
-| toggleHeaderColumn | — | Toggles whether the selected column contains header cells. |
-| toggleHeaderRow | — | Toggles whether the selected row contains header cells. |
-| toggleHeaderCell | — | Toggles whether the selected column contains header cells. |
-| setCellAttr | — | Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value. |
-| fixTables | — | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
-
-## Usage
-::: warning
-You have to include all table extensions (`TableHeader`, `TableCell` & `TableRow`)
-:::
-
-```markup
-  <template>
-    <div>
-      <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-        <button :class="{ 'is-active': isActive.bold() }" @click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: false })">
-          Create Table
-        </button>
-      </editor-menu-bar>
-
-      <editor-content :editor="editor" />
-    </div>
-  </template>
-
-  <script>
-  import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-  import { Table, TableCell, TableHeader, TableRow } from 'tiptap-extensions'
-
-
-  export default {
-    components: {
-        EditorMenuBar,
-        EditorContent,
-    },
-    data() {
-      return {
-        editor: new Editor({
-          extensions: [
-            Table(),
-            TableCell(),
-            TableHeader(),
-            TableRow(),
-          ],
-          content: ''
-        }),
-      }
-    },
-    beforeDestroy() {
-      this.editor.destroy()
-    }
-  }
-  </script>
-```

docs/src/docPages/api/extensions/strike.md

@@ -2,7 +2,9 @@
 Enables you to use the `<s>` HTML tag in the editor.
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/api/extensions/todo-item.md

@@ -7,7 +7,7 @@ This extensions is intended to be used with the `TodoList` extension.
 
 ## Options
 | Option | Type | Default | Description |
-| ------ | ---- | ---- | ----- |
+| ------ | ---- | ------- | ----------- |
 | nested | Boolean | false | Specifies if you can nest todo lists. |
 
 ## Commands

docs/src/docPages/api/extensions/underline.md

@@ -2,7 +2,9 @@
 Enables you to use the `<u>` HTML tag in the editor.
 
 ## Options
-*None*
+| Option | Type | Default | Description |
+| ------ | ---- | ------- | ----------- |
+| class | string | – | Add a custom class to the rendered HTML tag. |
 
 ## Commands
 | Command | Options | Description |

docs/src/docPages/examples/focus.md

@@ -1,3 +1,3 @@
 # Focus
 
-<demo name="Examples/Focus" highlight="18,43-46,48" />
+<demo name="Examples/Focus" highlight="13,33-36,38" />

docs/src/docPages/general/roadmap.md

@@ -1,73 +0,0 @@
-# Roadmap
-
-## New features
-
-* generate schema without initializing tiptap, to make SSR easier (e. g. `getSchema([Doc(), Paragraph()])`)
-
-## Requested features
-
-* Basic Styling
-    * https://github.com/ueberdosis/tiptap/issues/507
-* Support vor Vue.js 3
-* Easily add custom classes to everything
-    * https://github.com/ueberdosis/tiptap/discussions/817
-* Text snippets
-    * https://github.com/ueberdosis/tiptap/issues/737
-* Markdown Support
-
-## Requested extensions
-
-* Alignment
-    * https://github.com/ueberdosis/tiptap/pull/544
-* Font color
-* Font family
-* Font size
-* Created embed from pasted YouTube URL
-* Superscript/Subscript
-    * https://github.com/ueberdosis/tiptap/discussions/813
-* Math Support
-    * https://github.com/ueberdosis/tiptap/issues/179
-    * https://github.com/ueberdosis/tiptap/issues/698
-* Resizeable Images
-    * https://gist.github.com/zachjharris/a5442efbdff11948d085b6b1406dfbe6
-
-## Ideas
-
-* A `@tiptap/extensions` package would be helpful to make imports easier.
-* Add more shorcuts:
-    * Ctrl+I → Italic ✅
-    * Ctrl+B → Bold ✅
-    * Ctrl+K → Link (Medium, Tumblr, Slack, Google Docs, Word)
-    * Ctrl+Shift+K → Code (Slack)
-    * Shift+Enter → Line break
-    * Ctrl+Shift+X → Strikethrough (Slack)
-    * Alt+Shift+5 → Strikethrough (Google Docs)
-    * Ctrl+Shift+6 → Strikethrough (Tumblr)
-    * Ctrl+Alt+0 → Paragraph (Google Docs)
-    * Ctrl+Alt+1 to 6 → Heading (Google Docs, Word, ~Medium, ~Slack)
-    * Ctrl+Shift+2 → Heading (Tumblr)
-    * Ctrl+Shift+7 → Ordered list (Google Docs, Slack, Tumblr)
-    * Ctrl+Shift+8 → Unordered list (Google Docs, Slack, Tumblr)
-    * Tab, Shift+Tab → Increase / decrease nesting in lists
-    * Ctrl+], Ctrl+[ → Same as above (when Tab needs to be used)
-    * Ctrl+Shift+9 → Blockquote (Tumblr)
-    * Ctrl+Alt+K → Code block (Slack)
-    * Ctrl+R → Horizontal ruler (Stack Overflow)
-* Markdown shortcuts
-    * #+Space → Heading (the number of # determines the header level)
-    * *+Space, -+Space → Unordered list
-    * 1.+Space → Ordered list
-    * >+Space → Blockquote
-    * ```+Space → Code block
-    * ---- → Horizontal ruler
-    * ![] → Embedded resource (not part of Slack, but would it not be fancy?)
-    * :emoji: → Emoji (based on the name). A nice-to-have, most certainly.
-* General shortcuts
-    * Ctrl+C, Ctrl+X, Ctrl+V: copy, cut, paste
-    * Ctrl+Z, Ctrl+Shift+Z, Ctrl+Y: undo, redo
-    * Ctrl+Backspace: delete previous word
-    * Ctrl+Delete: delete next word
-    * Ctrl+Home, Ctrl+End: go to the start / end of the whole document
-    * Ctrl+F, Ctrl+G: find, find next occurrence
-    * Ctrl+S: if there is no auto-saving, this should save the document
-    * Ctrl+/: show shortcuts (Medium, Slack)

docs/src/docPages/general/upgrade-guide.md

@@ -1,3 +0,0 @@
-# Upgrade Guide
-
-## Upgrading from 1.x to 2.x

docs/src/docPages/overview/contributing.md

@@ -0,0 +1,11 @@
+# Contributing
+
+## What kind of contributions are welcome
+
+## What kind of contributions won’t be merged
+
+## How to send your first Pull Request
+
+## Code style
+
+## Testing

docs/src/docPages/overview/installation.md

@@ -2,15 +2,15 @@
 
 tiptap has a very modular package structure and is independent of any framework. Depending on what you want to do with tiptap there are a few different ways to install tiptap in your project. Choose the way that fits your project best.
 
-## Vanilla JavaScript
+## Plain JavaScript
 
 Use tiptap with vanilla JavaScript for a very lightweight and raw experience. If you feel like it, you can even use it to connect the tiptap core with other frameworks not mentioned here.
 
 ```bash
-# Use npm
+# With npm
 npm install @tiptap/core @tiptap/starter-kit
 
-# Or: Use Yarn
+# Or: With Yarn
 yarn add @tiptap/core @tiptap/starter-kit
 ```
 
@@ -18,11 +18,11 @@ Great, that should be enough to start. Here is the most essential code you need
 
 ```js
 import { Editor } from '@tiptap/core'
-import extensions from '@tiptap/starter-kit'
+import defaultExtensions from '@tiptap/starter-kit'
 
 new Editor({
   element: document.getElementsByClassName('element'),
-  extensions: extensions(),
+  extensions: defaultExtensions(),
   content: '<p>Your content.</p>',
 })
 ```
@@ -32,10 +32,10 @@ new Editor({
 To use tiptap with Vue.js (and tools that are based on Vue.js) install the Vue.js adapter in your project:
 
 ```bash
-# Using npm
+# With npm
 npm install @tiptap/vue @tiptap/vue-starter-kit
 
-# Using Yarn
+# Or: With Yarn
 yarn add @tiptap/vue @tiptap/vue-starter-kit
 ```
 

docs/src/docPages/overview/roadmap.md

@@ -0,0 +1,3 @@
+# Roadmap
+
+See https://github.com/ueberdosis/tiptap-next/projects/1

docs/src/docPages/overview/sponsoring.md

@@ -0,0 +1,3 @@
+# Sponsoring
+
+https://github.com/sponsors/ueberdosis

docs/src/docPages/overview/upgrade-guide.md

@@ -0,0 +1,35 @@
+# Upgrade Guide
+
+## Reasons to upgrade to tiptap 2.x
+
+* TypeScript: auto complete, less bugs, generated API documentation
+* Amazing documentation with 100+ pages
+* Active maintenance, no more updates to 1.x
+* Tons of new extensions planned
+* Less bugs, tested code based
+
+## Upgrading from 1.x to 2.x
+The new API will look pretty familiar too you, but there are a ton of changes though. To make the upgrade a little bit easier, here is everything you should do:
+
+### New document type
+**We renamed the default `Document` type from `doc` to `document`.** To keep it like that, use your own implementation of the `Document` node or migrate the stored JSON to use the new name.
+
+```js
+import Document from '@tiptap/extension-document'
+const CustomDocument = Document.name('doc').create()
+
+new Editor({
+  extensions: [
+      CustomDocument(),
+      …
+  ]
+})
+```
+
+### New extension API
+
+In case you’ve built some custom extensions for your project, you’ll need to rewrite them to fit the new API. No worries, though, you can keep a lot of your work though. The schema, commands, keys, inputRules, pasteRules all work like they did before. It’s just different how you register them.
+
+```js
+const CustomExtension = …
+```

docs/src/links.yaml

@@ -1,14 +1,20 @@
-- title: General
+- title: Overview
   items:
     - title: Introduction
       link: /
     - title: Installation
-      link: /general/installation
+      link: /overview/installation
     - title: Upgrade Guide
-      link: /general/upgrade-guide
+      link: /overview/upgrade-guide
+      draft: true
+    - title: Contributing
+      link: /overview/contributing
+      draft: true
+    - title: Sponsoring
+      link: /overview/sponsoring
       draft: true
     - title: Roadmap
-      link: /general/roadmap
+      link: /overview/roadmap
       draft: true
 
 - title: Guide
@@ -40,62 +46,62 @@
       link: /examples/basic
     - title: Simple
       link: /examples/simple
-    - title: Menu Bubble
+    # - title: Menu Bubble
-      link: /examples/menu-bubble
+    #   link: /examples/menu-bubble
-      draft: true
+    #   draft: true
-    - title: Floating Menu
+    # - title: Floating Menu
-      link: /examples/floating-menu
+    #   link: /examples/floating-menu
-      draft: true
+    #   draft: true
-    - title: Links
+    # - title: Links
-      link: /examples/links
+    #   link: /examples/links
-      draft: true
+    #   draft: true
-    - title: Images
+    # - title: Images
-      link: /examples/images
+    #   link: /examples/images
-      draft: true
+    #   draft: true
-    - title: Hiding Menu Bar
+    # - title: Hiding Menu Bar
-      link: /examples/hiding-menu-bar
+    #   link: /examples/hiding-menu-bar
-      draft: true
+    #   draft: true
-    - title: Todo List
+    # - title: Todo List
-      link: /examples/todo-list
+    #   link: /examples/todo-list
-      draft: true
+    #   draft: true
-    - title: Tables
+    # - title: Tables
-      link: /examples/tables
+    #   link: /examples/tables
-      draft: true
+    #   draft: true
-    - title: Search and Replace
+    # - title: Search and Replace
-      link: /examples/search-and-replace
+    #   link: /examples/search-and-replace
-      draft: true
+    #   draft: true
-    - title: Suggestions
+    # - title: Suggestions
-      link: /examples/suggestions
+    #   link: /examples/suggestions
-      draft: true
+    #   draft: true
     - title: Markdown Shortcuts
       link: /examples/markdown-shortcuts
-    - title: Code Highlighting
+    # - title: Code Highlighting
-      link: /examples/code-highlighting
+    #   link: /examples/code-highlighting
-      draft: true
+    #   draft: true
     - title: History
       link: /examples/history
     - title: Read-Only
       link: /examples/read-only
-    - title: Embeds
+    # - title: Embeds
-      link: /examples/embeds
+    #   link: /examples/embeds
-      draft: true
+    #   draft: true
-    - title: Placeholder
+    # - title: Placeholder
-      link: /examples/placeholder
+    #   link: /examples/placeholder
-      draft: true
+    #   draft: true
     - title: Focus
       link: /examples/focus
-    - title: Collaboration
+    # - title: Collaboration
-      link: /examples/collaboration
+    #   link: /examples/collaboration
-      draft: true
+    #   draft: true
-    - title: Title
+    # - title: Title
-      link: /examples/title
+    #   link: /examples/title
-      draft: true
+    #   draft: true
-    - title: Trailing Paragraph
+    # - title: Trailing Paragraph
-      link: /examples/trailing-paragraph
+    #   link: /examples/trailing-paragraph
-      draft: true
+    #   draft: true
-    - title: Drag Handle
+    # - title: Drag Handle
-      link: /examples/drag-handle
+    #   link: /examples/drag-handle
-      draft: true
+    #   draft: true
     - title: Export HTML or JSON
       link: /examples/export-html-or-json
 
@@ -117,18 +123,17 @@
           draft: true
         - title: Code
           link: /api/extensions/code
-        - title: CodeBlock
+        # - title: CodeBlock
-          link: /api/extensions/code-block
+        #   link: /api/extensions/code-block
-          draft: true
+        #   draft: true
-        - title: CodeBlockHighlight
+        # - title: CodeBlockHighlight
-          link: /api/extensions/code-block-highlight
+        #   link: /api/extensions/code-block-highlight
-          draft: true
+        #   draft: true
-        - title: Collaboration
+        # - title: Collaboration
-          link: /api/extensions/collaboration
+        #   link: /api/extensions/collaboration
-          draft: true
+        #   draft: true
         - title: Document
           link: /api/extensions/document
-          draft: true
         - title: Hardbreak
           link: /api/extensions/hard-break
           draft: true
@@ -148,39 +153,38 @@
         - title: ListItem
           link: /api/extensions/list-item
           draft: true
-        - title: Mention
+        # - title: Mention
-          link: /api/extensions/mention
+        #   link: /api/extensions/mention
-          draft: true
+        #   draft: true
         - title: OrderedList
           link: /api/extensions/ordered-list
           draft: true
         - title: Paragraph
           link: /api/extensions/paragraph
-          draft: true
+        # - title: Placeholder
-        - title: Placeholder
+        #   link: /api/extensions/placeholder
-          link: /api/extensions/placeholder
+        #   draft: true
-          draft: true
         - title: Strike
           link: /api/extensions/strike
           draft: true
+        # - title: TableCell
+        #   link: /api/extensions/table-cell
+        #   draft: true
+        # - title: TableHeader
+        #   link: /api/extensions/table-header
+        #   draft: true
+        # - title: TableRow
+        #   link: /api/extensions/table-row
+        #   draft: true
         - title: Text
           link: /api/extensions/text
           draft: true
-        - title: TableCell
+        # - title: TodoItem
-          link: /api/extensions/table-cell
+        #   link: /api/extensions/todo-item
-          draft: true
+        #   draft: true
-        - title: TableHeader
+        # - title: TodoList
-          link: /api/extensions/table-header
+        #   link: /api/extensions/todo-list
-          draft: true
+        #   draft: true
-        - title: TableRow
-          link: /api/extensions/table-row
-          draft: true
-        - title: TodoItem
-          link: /api/extensions/todo-item
-          draft: true
-        - title: TodoList
-          link: /api/extensions/todo-list
-          draft: true
         - title: Underline
           link: /api/extensions/underline
           draft: true

package.json

@@ -15,7 +15,8 @@
     "build:docs": "yarn --cwd ./docs build",
     "build:packages": "yarn clean:packages && lerna exec --parallel -- microbundle --compress",
     "clean:packages": "rm -rf ./packages/*/dist",
-    "test": "cypress open --project tests",
+    "test:open": "cypress open --project tests",
+    "test": "cypress run --project tests",
     "reset": "clean:packages && rm -rf ./**/.cache && rm -rf ./**/node_modules && rm -rf ./yarn.lock && yarn install"
   },
   "devDependencies": {