From c1828426813dd7f24418c08812bce4bc28a092d3 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 18 Aug 2020 21:39:41 +0200
Subject: [PATCH] move all extensions to separate pages

---
 .../src/docPages/api/extensions/blockquote.md |  58 ++
 docs/src/docPages/api/extensions/bold.md      |  66 ++
 .../src/docPages/api/extensions/bulletlist.md |  63 ++
 docs/src/docPages/api/extensions/code.md      |  55 ++
 docs/src/docPages/api/extensions/codeblock.md |  18 +
 docs/src/docPages/api/extensions/heading.md   |  71 ++
 docs/src/docPages/api/extensions/history.md   |  58 ++
 .../docPages/api/extensions/horizontalrule.md |  57 ++
 docs/src/docPages/api/extensions/italic.md    |  58 ++
 docs/src/docPages/api/extensions/link.md      |   7 +
 docs/src/docPages/api/extensions/listitem.md  |   6 +
 docs/src/docPages/api/extensions/mention.md   |   2 +
 .../docPages/api/extensions/orderedlist.md    |  65 ++
 .../docPages/api/extensions/placeholder.md    |  83 ++
 docs/src/docPages/api/extensions/strike.md    |  60 ++
 docs/src/docPages/api/extensions/tablecell.md |   6 +
 .../docPages/api/extensions/tableheader.md    |   6 +
 docs/src/docPages/api/extensions/tablerow.md  |   6 +
 docs/src/docPages/api/extensions/todoitem.md  |  17 +
 docs/src/docPages/api/extensions/todolist.md  |  69 ++
 docs/src/docPages/api/extensions/underline.md |  58 ++
 docs/src/docPages/extensions.md               | 909 ------------------
 docs/src/layouts/App/index.vue                |   8 +
 docs/src/links.yaml                           |  43 +
 24 files changed, 940 insertions(+), 909 deletions(-)
 create mode 100644 docs/src/docPages/api/extensions/blockquote.md
 create mode 100644 docs/src/docPages/api/extensions/bold.md
 create mode 100644 docs/src/docPages/api/extensions/bulletlist.md
 create mode 100644 docs/src/docPages/api/extensions/code.md
 create mode 100644 docs/src/docPages/api/extensions/codeblock.md
 create mode 100644 docs/src/docPages/api/extensions/heading.md
 create mode 100644 docs/src/docPages/api/extensions/history.md
 create mode 100644 docs/src/docPages/api/extensions/horizontalrule.md
 create mode 100644 docs/src/docPages/api/extensions/italic.md
 create mode 100644 docs/src/docPages/api/extensions/link.md
 create mode 100644 docs/src/docPages/api/extensions/listitem.md
 create mode 100644 docs/src/docPages/api/extensions/mention.md
 create mode 100644 docs/src/docPages/api/extensions/orderedlist.md
 create mode 100644 docs/src/docPages/api/extensions/placeholder.md
 create mode 100644 docs/src/docPages/api/extensions/strike.md
 create mode 100644 docs/src/docPages/api/extensions/tablecell.md
 create mode 100644 docs/src/docPages/api/extensions/tableheader.md
 create mode 100644 docs/src/docPages/api/extensions/tablerow.md
 create mode 100644 docs/src/docPages/api/extensions/todoitem.md
 create mode 100644 docs/src/docPages/api/extensions/todolist.md
 create mode 100644 docs/src/docPages/api/extensions/underline.md

diff --git a/docs/src/docPages/api/extensions/blockquote.md b/docs/src/docPages/api/extensions/blockquote.md
new file mode 100644
index 00000000..f759b145
--- /dev/null
+++ b/docs/src/docPages/api/extensions/blockquote.md
@@ -0,0 +1,58 @@
+# Blockquote
+Allows you to use the `<blockquote>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| blockquote | none | Wrap content in a blockquote. |
+
+#### Keybindings
+* `Control` + `→`
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.blockquote() }" @click="commands.blockquote">
+        Blockquote
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Blockquote } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Blockquote(),
+        ],
+        content: `
+          <blockquote>
+            Life is like riding a bycicle. To keep your balance, you must keep moving.
+          </blockquote>
+          <p>Albert Einstein</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/bold.md b/docs/src/docPages/api/extensions/bold.md
new file mode 100644
index 00000000..c70f9ee4
--- /dev/null
+++ b/docs/src/docPages/api/extensions/bold.md
@@ -0,0 +1,66 @@
+# Bold
+Renders text in **bold** text weight. If you pass `<strong>`, or `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor's initial content, they will be rendered accordingly.
+
+::: warning Restrictions
+The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked as bold, regardless of method will be normalized to `<strong>` HTML tags.
+:::
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| bold | none | Mark text as bold. |
+
+#### Keybindings
+* Windows & Linux: `Control` + `B`
+* macOS: `Command` + `B`
+
+#### Example
+
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
+        Bold
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Bold } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Bold(),
+        ],
+        content: `
+          <p><strong>This is strong</strong></p>
+          <p><b>And this</b></p>
+          <p style="font-weight: bold">This as well</p>
+          <p style="font-weight: bolder">Oh! and this</p>
+          <p style="font-weight: 500">Cool! Right!?</p>
+          <p style="font-weight: 999">Up to 999!!!</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/bulletlist.md b/docs/src/docPages/api/extensions/bulletlist.md
new file mode 100644
index 00000000..e7223f44
--- /dev/null
+++ b/docs/src/docPages/api/extensions/bulletlist.md
@@ -0,0 +1,63 @@
+# BulletList
+Allows you to use the `<ul>` HTML tag in the editor.
+
+::: warning Restrictions
+This extensions is intended to be used with the `ListItem` extension.
+:::
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| bullet_list | none | Toggle a bullet list. |
+
+#### Keybindings
+* `Control` + `Shift` + `8`
+
+#### Example
+
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list">
+        Bullet List
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { BulletList } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new BulletList(),
+        ],
+        content: `
+          <ul>
+            <li>A list item</li>
+            <li>And another one</li>
+          </ul>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/code.md b/docs/src/docPages/api/extensions/code.md
new file mode 100644
index 00000000..20f555df
--- /dev/null
+++ b/docs/src/docPages/api/extensions/code.md
@@ -0,0 +1,55 @@
+# Code
+Allows you to use the `<code>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| code | none | Mark text as code. |
+
+#### Keybindings
+* `Alt` + `
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.code() }" @click="commands.code">
+        Code
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Code } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Code(),
+        ],
+        content: `
+          <p>This is some <code>inline code.</code></p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/codeblock.md b/docs/src/docPages/api/extensions/codeblock.md
new file mode 100644
index 00000000..2f00e808
--- /dev/null
+++ b/docs/src/docPages/api/extensions/codeblock.md
@@ -0,0 +1,18 @@
+# CodeBlock
+Allows you to use the `<pre>` HTML tag in the editor.
+
+## CodeBlockHighlight
+Allows you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
+
+## Collaboration
+Allows you to collaborate with others on one document.
+
+## HardBreak
+Allows you to use the `<br>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Keybindings
+* New CodeBlock: `Shift` + `Enter` + `
+* Leave CodeBlock: `Command` + `Enter`
diff --git a/docs/src/docPages/api/extensions/heading.md b/docs/src/docPages/api/extensions/heading.md
new file mode 100644
index 00000000..e643bb08
--- /dev/null
+++ b/docs/src/docPages/api/extensions/heading.md
@@ -0,0 +1,71 @@
+# Heading
+Allows you to use the headline HTML tags in the editor.
+
+#### Options
+| option | type | default | description |
+| ------ | ---- | ---- | ----- |
+| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are to be supported. |
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| heading | level | Creates a heading node. |
+
+#### Keybindings
+* `Control` + `Shift` + `1` → H1
+* `Control` + `Shift` + `2` → H2
+* `Control` + `Shift` + `3` → H3
+* `Control` + `Shift` + `4` → H4
+* `Control` + `Shift` + `5` → H5
+* `Control` + `Shift` + `6` → H6
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div>
+        <button type="button" :class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1})">
+          H1
+        </button>
+        <button type="button" :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
+          H2
+        </button>
+      </div>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Heading } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Heading({
+            levels: [1, 2],
+          }),
+        ],
+        content: `
+          <h1>This is a headline level 1</h1>
+          <h2>This is a headline level 2</h2>
+          <h3>This headline will be converted to a paragraph, because it's not defined in the levels option.</h3>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/history.md b/docs/src/docPages/api/extensions/history.md
new file mode 100644
index 00000000..58e3f866
--- /dev/null
+++ b/docs/src/docPages/api/extensions/history.md
@@ -0,0 +1,58 @@
+# History
+Enables history support.
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| undo | none | Undo the latest change. |
+| redo | none | Redo the latest change. |
+
+#### Keybindings
+* Windows & Linux: `Control` + `Z` → Undo
+* Windows & Linux: `Shift` + `Control` + `Z` → Redo
+* macOS: `Command` + `Z` → Undo
+* macOS: `Shift` + `Command` + `Z` → Redo
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <div>
+        <button type="button" @click="commands.undo">
+          Undo
+        </button>
+        <button type="button" @click="commands.redo">
+          Redo
+        </button>
+      </div>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { History } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new History(),
+        ],
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/horizontalrule.md b/docs/src/docPages/api/extensions/horizontalrule.md
new file mode 100644
index 00000000..eb009086
--- /dev/null
+++ b/docs/src/docPages/api/extensions/horizontalrule.md
@@ -0,0 +1,57 @@
+# HorizontalRule
+Allows you to use the `<hr>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| horizontal_rule | none | Create a horizontal rule. |
+
+#### Keybindings
+*None*
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" @click="commands.horizontal_rule">
+        Horizontal Rule
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { HorizontalRule } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new HorizontalRule(),
+        ],
+        content: `
+          <p>Some text.</p>
+          <hr />
+          <p>Text again.</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/italic.md b/docs/src/docPages/api/extensions/italic.md
new file mode 100644
index 00000000..5265ef00
--- /dev/null
+++ b/docs/src/docPages/api/extensions/italic.md
@@ -0,0 +1,58 @@
+# Italic
+Allows you to use the `<em>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| italic | none | Mark text as italic. |
+
+#### Keybindings
+* Windows & Linux: `Control` + `I`
+* macOS: `Command` + `I`
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.italic() }" @click="commands.italic">
+        Italic
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Italic } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Italic(),
+        ],
+        content: `
+          <p><em>This is italic</em></p>
+          <p><i>And this</i></p>
+          <p style="font-style: italic">This as well</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/link.md b/docs/src/docPages/api/extensions/link.md
new file mode 100644
index 00000000..9f8e9bfc
--- /dev/null
+++ b/docs/src/docPages/api/extensions/link.md
@@ -0,0 +1,7 @@
+# Link
+Allows 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. |
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/listitem.md b/docs/src/docPages/api/extensions/listitem.md
new file mode 100644
index 00000000..2535087d
--- /dev/null
+++ b/docs/src/docPages/api/extensions/listitem.md
@@ -0,0 +1,6 @@
+# ListItem
+Allows 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.
+:::
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/mention.md b/docs/src/docPages/api/extensions/mention.md
new file mode 100644
index 00000000..2a0c7935
--- /dev/null
+++ b/docs/src/docPages/api/extensions/mention.md
@@ -0,0 +1,2 @@
+## Mention
+Allows you to use mentions in the editor.
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/orderedlist.md b/docs/src/docPages/api/extensions/orderedlist.md
new file mode 100644
index 00000000..a8fb9131
--- /dev/null
+++ b/docs/src/docPages/api/extensions/orderedlist.md
@@ -0,0 +1,65 @@
+# OrderedList
+Allows you to use the `<ol>` HTML tag in the editor.
+
+::: warning Restrictions
+This extensions is intended to be used with the `ListItem` extension.
+:::
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| ordered_list | none | Toggle an ordered list. |
+
+#### Keybindings
+* `Control` + `Shift` + `9`
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list">
+        Ordered List
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { OrderedList } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new OrderedList(),
+        ],
+        content: `
+          <ol>
+            <li>A list item</li>
+            <li>And another one</li>
+          </ol>
+          <ol start="3">
+            <li>This list begins with 3.</li>
+          </ol>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/placeholder.md b/docs/src/docPages/api/extensions/placeholder.md
new file mode 100644
index 00000000..53a05b96
--- /dev/null
+++ b/docs/src/docPages/api/extensions/placeholder.md
@@ -0,0 +1,83 @@
+# Placeholder
+Allows 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 | none | Deletes the complete table which is active |
+| addColumnBefore | none | Add a column before the selection. |
+| addColumnAfter | none | Add a column after the selection. |
+| deleteColumn | none | Removes the selected columns. |
+| addRowBefore | none | Add a table row before the selection. |
+| addRowAfter | none | Add a table row after the selection. |
+| toggleCellMerge | none | See mergeCells and splitCells |
+| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
+| splitCell | none | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
+| toggleHeaderColumn | none | Toggles whether the selected column contains header cells. |
+| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
+| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
+| setCellAttr | none | 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 | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
+
+#### Example
+::: 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: [
+            new Table(),
+            new TableCell(),
+            new TableHeader(),
+            new TableRow(),
+          ],
+          content: ''
+        }),
+      }
+    },
+    beforeDestroy() {
+      this.editor.destroy()
+    }
+  }
+  </script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/strike.md b/docs/src/docPages/api/extensions/strike.md
new file mode 100644
index 00000000..535d7fbd
--- /dev/null
+++ b/docs/src/docPages/api/extensions/strike.md
@@ -0,0 +1,60 @@
+# Strike
+Allows you to use the `<s>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| strike | none | Mark text as strikethrough. |
+
+#### Keybindings
+* Windows & Linux: `Control` + `D`
+* macOS: `Command` + `D`
+
+#### Example
+
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.strike() }" @click="commands.strike">
+        Strike
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Strike } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Strike(),
+        ],
+        content: `
+          <p><s>That's strikethrough.</s></p>
+          <p><del>This too.</del></p>
+          <p><strike>And this.</strike></p>
+          <p style="text-decoration: line-through">This as well.</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/tablecell.md b/docs/src/docPages/api/extensions/tablecell.md
new file mode 100644
index 00000000..bb6fa262
--- /dev/null
+++ b/docs/src/docPages/api/extensions/tablecell.md
@@ -0,0 +1,6 @@
+# TableCell
+Allows you to use the `<td>` HTML tag in the editor.
+
+::: warning Restrictions
+This extensions is intended to be used with the `Table` extension.
+:::
diff --git a/docs/src/docPages/api/extensions/tableheader.md b/docs/src/docPages/api/extensions/tableheader.md
new file mode 100644
index 00000000..fed33494
--- /dev/null
+++ b/docs/src/docPages/api/extensions/tableheader.md
@@ -0,0 +1,6 @@
+# TableHeader
+Allows you to use the `<th>` HTML tag in the editor.
+
+::: warning Restrictions
+This extensions is intended to be used with the `Table` extension.
+:::
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/tablerow.md b/docs/src/docPages/api/extensions/tablerow.md
new file mode 100644
index 00000000..d40381f2
--- /dev/null
+++ b/docs/src/docPages/api/extensions/tablerow.md
@@ -0,0 +1,6 @@
+# TableRow
+Allows you to use the `<tr>` HTML tag in the editor.
+
+::: warning Restrictions
+This extensions is intended to be used with the `Table` extension.
+:::
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/todoitem.md b/docs/src/docPages/api/extensions/todoitem.md
new file mode 100644
index 00000000..42fdb33f
--- /dev/null
+++ b/docs/src/docPages/api/extensions/todoitem.md
@@ -0,0 +1,17 @@
+# TodoItem
+It renders a single toggleable item of a list.
+
+::: warning Restrictions
+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
+*None*
+
+#### Keybindings
+*None*
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/todolist.md b/docs/src/docPages/api/extensions/todolist.md
new file mode 100644
index 00000000..dd7a57d1
--- /dev/null
+++ b/docs/src/docPages/api/extensions/todolist.md
@@ -0,0 +1,69 @@
+# TodoList
+Renders a toggleable list of items.
+
+::: warning Restrictions
+This extensions is intended to be used with the `TodoItem` extension.
+:::
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| todo_list | none | Toggle todo list. |
+
+#### Keybindings
+*None*
+
+#### Example
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
+        Todo List
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { TodoItem, TodoList } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new TodoItem({
+            nested: true,
+          }),
+          new TodoList(),
+        ],
+        content: `
+          <ul data-type="todo_list">
+            <li data-type="todo_item" data-done="true">
+              Checked item
+            </li>
+            <li data-type="todo_item" data-done="false">
+              Unchecked item
+            </li>
+          </ul>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/api/extensions/underline.md b/docs/src/docPages/api/extensions/underline.md
new file mode 100644
index 00000000..ebfeb336
--- /dev/null
+++ b/docs/src/docPages/api/extensions/underline.md
@@ -0,0 +1,58 @@
+# Underline
+Allows you to use the `<u>` HTML tag in the editor.
+
+#### Options
+*None*
+
+#### Commands
+| command | options | description |
+| ------ | ---- | ---------------- |
+| underline | none | Mark text as underlined. |
+
+#### Keybindings
+* Windows & Linux: `Control` + `U`
+* macOS: `Command` + `U`
+
+#### Example
+
+```markup
+<template>
+  <div>
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+      <button type="button" :class="{ 'is-active': isActive.underline() }" @click="commands.underline">
+        Underline
+      </button>
+    </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
+import { Underline } from 'tiptap-extensions'
+
+export default {
+  components: {
+    EditorMenuBar,
+    EditorContent,
+  },
+  data() {
+    return {
+      editor: new Editor({
+        extensions: [
+          new Underline(),
+        ],
+        content: `
+          <p><u>This is underlined.</u></p>
+          <p style="text-decoration: underline">This as well.</p>
+        `,
+      }),
+    }
+  },
+  beforeDestroy() {
+    this.editor.destroy()
+  }
+}
+</script>
+```
\ No newline at end of file
diff --git a/docs/src/docPages/extensions.md b/docs/src/docPages/extensions.md
index f830e254..af5d2a96 100644
--- a/docs/src/docPages/extensions.md
+++ b/docs/src/docPages/extensions.md
@@ -7,913 +7,4 @@ install `tiptap-extensions` package separately so that you can use basic Nodes,
 usually tied to a Command. The official set of commands are part of the
 [`tiptap-commands`][@npmjs-tiptap-commands] package.
 
-## Blockquote
-Allows you to use the `<blockquote>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| blockquote | none | Wrap content in a blockquote. |
-
-#### Keybindings
-* `Control` + `→`
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.blockquote() }" @click="commands.blockquote">
-        Blockquote
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Blockquote } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Blockquote(),
-        ],
-        content: `
-          <blockquote>
-            Life is like riding a bycicle. To keep your balance, you must keep moving.
-          </blockquote>
-          <p>Albert Einstein</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Bold
-Renders text in **bold** text weight. If you pass `<strong>`, or `<b>` tags, or text with inline `style` attributes setting the `font-weight` CSS rule in the editor's initial content, they will be rendered accordingly.
-
-::: warning Restrictions
-The extension will generate the corresponding `<strong>` HTML tags when reading contents of the `Editor` instance. All text marked as bold, regardless of method will be normalized to `<strong>` HTML tags.
-:::
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| bold | none | Mark text as bold. |
-
-#### Keybindings
-* Windows & Linux: `Control` + `B`
-* macOS: `Command` + `B`
-
-#### Example
-
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.bold() }" @click="commands.bold">
-        Bold
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Bold } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Bold(),
-        ],
-        content: `
-          <p><strong>This is strong</strong></p>
-          <p><b>And this</b></p>
-          <p style="font-weight: bold">This as well</p>
-          <p style="font-weight: bolder">Oh! and this</p>
-          <p style="font-weight: 500">Cool! Right!?</p>
-          <p style="font-weight: 999">Up to 999!!!</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## BulletList
-Allows you to use the `<ul>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `ListItem` extension.
-:::
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| bullet_list | none | Toggle a bullet list. |
-
-#### Keybindings
-* `Control` + `Shift` + `8`
-
-#### Example
-
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.bullet_list() }" @click="commands.bullet_list">
-        Bullet List
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { BulletList } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new BulletList(),
-        ],
-        content: `
-          <ul>
-            <li>A list item</li>
-            <li>And another one</li>
-          </ul>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Code
-Allows you to use the `<code>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| code | none | Mark text as code. |
-
-#### Keybindings
-* `Alt` + `
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.code() }" @click="commands.code">
-        Code
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Code } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Code(),
-        ],
-        content: `
-          <p>This is some <code>inline code.</code></p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## CodeBlock
-Allows you to use the `<pre>` HTML tag in the editor.
-
-## CodeBlockHighlight
-Allows you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
-
-## Collaboration
-Allows you to collaborate with others on one document.
-
-## HardBreak
-Allows you to use the `<br>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Keybindings
-* New CodeBlock: `Shift` + `Enter` + `
-* Leave CodeBlock: `Command` + `Enter`
-
-## Heading
-Allows you to use the headline HTML tags in the editor.
-
-#### Options
-| option | type | default | description |
-| ------ | ---- | ---- | ----- |
-| levels | Array | [1, 2, 3, 4, 5, 6] | Specifies which headlines are to be supported. |
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| heading | level | Creates a heading node. |
-
-#### Keybindings
-* `Control` + `Shift` + `1` → H1
-* `Control` + `Shift` + `2` → H2
-* `Control` + `Shift` + `3` → H3
-* `Control` + `Shift` + `4` → H4
-* `Control` + `Shift` + `5` → H5
-* `Control` + `Shift` + `6` → H6
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div>
-        <button type="button" :class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1})">
-          H1
-        </button>
-        <button type="button" :class="{ 'is-active': isActive.heading({ level: 2 }) }" @click="commands.heading({ level: 2 })">
-          H2
-        </button>
-      </div>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Heading } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Heading({
-            levels: [1, 2],
-          }),
-        ],
-        content: `
-          <h1>This is a headline level 1</h1>
-          <h2>This is a headline level 2</h2>
-          <h3>This headline will be converted to a paragraph, because it's not defined in the levels option.</h3>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## History
-Enables history support.
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| undo | none | Undo the latest change. |
-| redo | none | Redo the latest change. |
-
-#### Keybindings
-* Windows & Linux: `Control` + `Z` → Undo
-* Windows & Linux: `Shift` + `Control` + `Z` → Redo
-* macOS: `Command` + `Z` → Undo
-* macOS: `Shift` + `Command` + `Z` → Redo
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <div>
-        <button type="button" @click="commands.undo">
-          Undo
-        </button>
-        <button type="button" @click="commands.redo">
-          Redo
-        </button>
-      </div>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { History } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new History(),
-        ],
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## HorizontalRule
-Allows you to use the `<hr>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| horizontal_rule | none | Create a horizontal rule. |
-
-#### Keybindings
-*None*
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" @click="commands.horizontal_rule">
-        Horizontal Rule
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { HorizontalRule } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new HorizontalRule(),
-        ],
-        content: `
-          <p>Some text.</p>
-          <hr />
-          <p>Text again.</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Italic
-Allows you to use the `<em>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| italic | none | Mark text as italic. |
-
-#### Keybindings
-* Windows & Linux: `Control` + `I`
-* macOS: `Command` + `I`
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.italic() }" @click="commands.italic">
-        Italic
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Italic } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Italic(),
-        ],
-        content: `
-          <p><em>This is italic</em></p>
-          <p><i>And this</i></p>
-          <p style="font-style: italic">This as well</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Link
-Allows 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. |
-
-## ListItem
-Allows 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.
-:::
-
-## Mention
-Allows you to use mentions in the editor.
-
-## OrderedList
-Allows you to use the `<ol>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `ListItem` extension.
-:::
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| ordered_list | none | Toggle an ordered list. |
-
-#### Keybindings
-* `Control` + `Shift` + `9`
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.ordered_list() }" @click="commands.ordered_list">
-        Ordered List
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { OrderedList } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new OrderedList(),
-        ],
-        content: `
-          <ol>
-            <li>A list item</li>
-            <li>And another one</li>
-          </ol>
-          <ol start="3">
-            <li>This list begins with 3.</li>
-          </ol>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Placeholder
-Allows 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 | none | Deletes the complete table which is active |
-| addColumnBefore | none | Add a column before the selection. |
-| addColumnAfter | none | Add a column after the selection. |
-| deleteColumn | none | Removes the selected columns. |
-| addRowBefore | none | Add a table row before the selection. |
-| addRowAfter | none | Add a table row after the selection. |
-| toggleCellMerge | none | See mergeCells and splitCells |
-| mergeCells | none | Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle. |
-| splitCell | none | Split a selected cell, whose rowspan or colspan is greater than one into smaller cells. |
-| toggleHeaderColumn | none | Toggles whether the selected column contains header cells. |
-| toggleHeaderRow | none | Toggles whether the selected row contains header cells. |
-| toggleHeaderCell | none | Toggles whether the selected column contains header cells. |
-| setCellAttr | none | 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 | none | Inspect all tables in the given state's document and return a transaction that fixes them, if necessary. |
-
-#### Example
-::: 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: [
-            new Table(),
-            new TableCell(),
-            new TableHeader(),
-            new TableRow(),
-          ],
-          content: ''
-        }),
-      }
-    },
-    beforeDestroy() {
-      this.editor.destroy()
-    }
-  }
-  </script>
-```
-
-## TableHeader
-Allows you to use the `<th>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::
-
-## TableCell
-Allows you to use the `<td>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::
-
-## TableRow
-Allows you to use the `<tr>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::
-
-## TodoItem
-It renders a single toggleable item of a list.
-
-::: warning Restrictions
-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
-*None*
-
-#### Keybindings
-*None*
-
-## TodoList
-Renders a toggleable list of items.
-
-::: warning Restrictions
-This extensions is intended to be used with the `TodoItem` extension.
-:::
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| todo_list | none | Toggle todo list. |
-
-#### Keybindings
-*None*
-
-#### Example
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.todo_list() }" @click="commands.todo_list">
-        Todo List
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { TodoItem, TodoList } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new TodoItem({
-            nested: true,
-          }),
-          new TodoList(),
-        ],
-        content: `
-          <ul data-type="todo_list">
-            <li data-type="todo_item" data-done="true">
-              Checked item
-            </li>
-            <li data-type="todo_item" data-done="false">
-              Unchecked item
-            </li>
-          </ul>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Strike
-Allows you to use the `<s>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| strike | none | Mark text as strikethrough. |
-
-#### Keybindings
-* Windows & Linux: `Control` + `D`
-* macOS: `Command` + `D`
-
-#### Example
-
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.strike() }" @click="commands.strike">
-        Strike
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Strike } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Strike(),
-        ],
-        content: `
-          <p><s>That's strikethrough.</s></p>
-          <p><del>This too.</del></p>
-          <p><strike>And this.</strike></p>
-          <p style="text-decoration: line-through">This as well.</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
-## Underline
-Allows you to use the `<u>` HTML tag in the editor.
-
-#### Options
-*None*
-
-#### Commands
-| command | options | description |
-| ------ | ---- | ---------------- |
-| underline | none | Mark text as underlined. |
-
-#### Keybindings
-* Windows & Linux: `Control` + `U`
-* macOS: `Command` + `U`
-
-#### Example
-
-```markup
-<template>
-  <div>
-    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
-      <button type="button" :class="{ 'is-active': isActive.underline() }" @click="commands.underline">
-        Underline
-      </button>
-    </editor-menu-bar>
-
-    <editor-content :editor="editor" />
-  </div>
-</template>
-
-<script>
-import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-import { Underline } from 'tiptap-extensions'
-
-export default {
-  components: {
-    EditorMenuBar,
-    EditorContent,
-  },
-  data() {
-    return {
-      editor: new Editor({
-        extensions: [
-          new Underline(),
-        ],
-        content: `
-          <p><u>This is underlined.</u></p>
-          <p style="text-decoration: underline">This as well.</p>
-        `,
-      }),
-    }
-  },
-  beforeDestroy() {
-    this.editor.destroy()
-  }
-}
-</script>
-```
-
 [@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands
diff --git a/docs/src/layouts/App/index.vue b/docs/src/layouts/App/index.vue
index 6e6bc3f4..69077e3c 100644
--- a/docs/src/layouts/App/index.vue
+++ b/docs/src/layouts/App/index.vue
@@ -48,6 +48,14 @@
                 <g-link class="app__link" :to="item.link">
                   {{ item.title }}
                 </g-link>
+
+                <ul v-if="item.items">
+                  <li v-for="(item, k) in item.items" :key="k">
+                    <g-link class="app__link" :to="item.link">
+                      ‒ {{ item.title }}
+                    </g-link>
+                  </li>
+                </ul>
               </li>
             </ul>
           </div>
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 2596dbb9..ad82dddf 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -93,6 +93,49 @@
       link: /editor/
     - title: Extensions 🚧
       link: /extensions/
+      items:
+        - title: Blockquote
+          link: /api/extensions/blockquote
+        - title: Bold
+          link: /api/extensions/bold
+        - title: BulletList
+          link: /api/extensions/bulletlist
+        - title: Code
+          link: /api/extensions/code
+        - title: CodeBlock
+          link: /api/extensions/codeblock
+        - title: Heading
+          link: /api/extensions/heading
+        - title: History
+          link: /api/extensions/history
+        - title: HorizontalRule
+          link: /api/extensions/horizontalrule
+        - title: Italic
+          link: /api/extensions/italic
+        - title: Link
+          link: /api/extensions/link
+        - title: ListItem
+          link: /api/extensions/listitem
+        - title: Mention
+          link: /api/extensions/mention
+        - title: OrderedList
+          link: /api/extensions/orderedlist
+        - title: Placeholder
+          link: /api/extensions/placeholder
+        - title: Strike
+          link: /api/extensions/strike
+        - title: TableCell
+          link: /api/extensions/tablecell
+        - title: TableHeader
+          link: /api/extensions/tableheader
+        - title: TableRow
+          link: /api/extensions/tablerow
+        - title: TodoItem
+          link: /api/extensions/todoitem
+        - title: TodoList
+          link: /api/extensions/todolist
+        - title: Underline
+          link: /api/extensions/underline
     - title: Commands
       link: /commands/
     - title: Events