diff --git a/docs/src/docPages/extensions.md b/docs/src/docPages/extensions.md
index 3dd290d4e..ed4d9847d 100644
--- a/docs/src/docPages/extensions.md
+++ b/docs/src/docPages/extensions.md
@@ -1 +1,917 @@
-# Extensions
\ No newline at end of file
+# Extensions
+
+> ⚠️ TODO: This is old content.
+
+By default, the editor will only support paragraphs. Other nodes and marks are available as **extensions**. You must
+install `tiptap-extensions` package separately so that you can use basic Nodes, Marks, or Plugins. An extension is
+usually tied to a [Command](../commands/basics.md). 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
+`Ctrl->`
+
+#### Example
+```vue
+<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
+`Ctrl-b` (on Windows/Linux)
+`Cmd-b` (on macOS)
+
+#### Example
+
+```vue
+<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
+`Shift-Ctrl-8`
+
+#### Example
+
+```vue
+<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
+`Mod-``
+
+#### Example
+```vue
+<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
+`Mod-Enter`, `Shift-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
+`Shift-Ctrl-1` → H1
+`Shift-Ctrl-2` → H2
+`Shift-Ctrl-3` → H3
+`Shift-Ctrl-4` → H4
+`Shift-Ctrl-5` → H5
+`Shift-Ctrl-6` → H6
+
+#### Example
+```vue
+<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
+`Mod-z` → Undo
+`Shift-Mod-z` → Redo
+
+#### Example
+```vue
+<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
+```vue
+<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
+`Ctrl-i` (on Windows/Linux)
+`Cmd-i` (on macOS)
+
+#### Example
+```vue
+<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
+`Shift-Ctrl-9`
+
+#### Example
+```vue
+<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 <Badge text="1.19.3"/>
+| 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`)
+:::
+
+```vue
+  <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
+```vue
+<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
+`Ctrl-d` (on Windows/Linux)
+`Cmd-d` (on macOS)
+
+#### Example
+
+```vue
+<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
+`Ctrl-u` (on Windows/Linux)
+`Cmd-u` (on macOS)
+
+#### Example
+
+```vue
+<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>
+```
+
+[@tiptap-contrib]: https://github.com/ueberdosis/tiptap/blob/master/CONTRIBUTING.md
+[@npmjs-tiptap-commands]: https://npmjs.org/package/tiptap-commands