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
2020-09-09 18:16:51 +02:00
parent 2ff134274e 9819e44fe6
commit 0361da1b71
41 changed files with 386 additions and 313 deletions
--- a/docs/src/docPages/api/events.md
+++ b/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()
+})
+```
--- a/docs/src/docPages/api/extensions.md
+++ b/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
--- a/docs/src/docPages/api/extensions/blockquote.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/bold.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/bullet-list.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/code.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/document.md
+++ b/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" />
--- a/docs/src/docPages/api/extensions/heading.md
+++ b/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
--- a/docs/src/docPages/api/extensions/horizontal-rule.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/italic.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/link.md
+++ b/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. |
--- a/docs/src/docPages/api/extensions/list-item.md
+++ b/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. |
--- a/docs/src/docPages/api/extensions/ordered-list.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/paragraph.md
+++ b/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" />
--- a/docs/src/docPages/api/extensions/placeholder.md
+++ b/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>
-```
--- a/docs/src/docPages/api/extensions/strike.md
+++ b/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 |
--- a/docs/src/docPages/api/extensions/todo-item.md
+++ b/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
--- a/docs/src/docPages/api/extensions/underline.md
+++ b/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 |