Merge branch 'main' into feature/new-highlight-extension

# Conflicts:
#	docs/src/docPages/api/extensions.md
#	docs/src/links.yaml
#	packages/core/src/extensions/toggleMark.ts

.github/workflows/main.yml

@@ -54,7 +54,7 @@ jobs:
       with:
         status: ${{ job.status }}
         steps: ${{ toJson(steps) }}
-        channel: '#tiptap-next'
+        channel: '#tiptap-notifications'
       if: failure()
 
   test:
@@ -107,52 +107,52 @@ jobs:
       with:
         status: ${{ job.status }}
         steps: ${{ toJson(steps) }}
-        channel: '#tiptap-next'
+        channel: '#tiptap-notifications'
       if: failure()
 
-  build:
+  # build:
-    runs-on: ubuntu-latest
+  #   runs-on: ubuntu-latest
 
-    needs: lint
+  #   needs: lint
 
-    env:
+  #   env:
-      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+  #     SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
 
-    strategy:
+  #   strategy:
-      matrix:
+  #     matrix:
-        node-version: [14]
+  #       node-version: [14]
 
-    steps:
+  #   steps:
 
-    - uses: actions/checkout@v2.3.3
+  #   - uses: actions/checkout@v2.3.3
 
-    - name: Use Node.js ${{ matrix.node-version }}
+  #   - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2.1.2
+  #     uses: actions/setup-node@v2.1.2
-      with:
+  #     with:
-        node-version: ${{ matrix.node-version }}
+  #       node-version: ${{ matrix.node-version }}
 
-    - name: Load cached dependencies
+  #   - name: Load cached dependencies
-      uses: actions/cache@v2
+  #     uses: actions/cache@v2
-      id: cache
+  #     id: cache
-      with:
+  #     with:
-        path: |
+  #       path: |
-          **/node_modules
+  #         **/node_modules
-          /home/runner/.cache/Cypress
+  #         /home/runner/.cache/Cypress
-        key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
+  #       key: ${{ runner.os }}-node-${{ matrix.node-version }}-${{ hashFiles('**/yarn.lock') }}
 
-    - name: Install dependencies
+  #   - name: Install dependencies
-      id: install-dependencies
+  #     id: install-dependencies
-      if: steps.cache.outputs.cache-hit != 'true'
+  #     if: steps.cache.outputs.cache-hit != 'true'
-      run: yarn install
+  #     run: yarn install
 
-    - name: Build packages dependencies
+  #   - name: Build packages dependencies
-      id: build-packages
+  #     id: build-packages
-      run: yarn build:packages
+  #     run: yarn build:packages
 
-    - name: Send Slack notifications
+  #   - name: Send Slack notifications
-      uses: act10ns/slack@v1
+  #     uses: act10ns/slack@v1
-      with:
+  #     with:
-        status: ${{ job.status }}
+  #       status: ${{ job.status }}
-        steps: ${{ toJson(steps) }}
+  #       steps: ${{ toJson(steps) }}
-        channel: '#tiptap-next'
+  #       channel: '#tiptap-notifications'
-      if: failure()
+  #     if: failure()

docs/gridsome.client.js

@@ -1,5 +1,13 @@
 export default function (Vue, options, context) {
 
+  Vue.mixin({
+    data() {
+      return {
+        cwd: options.cwd,
+      }
+    },
+  })
+
   context.router.afterEach(to => {
     if (to.hash) {
       setTimeout(() => {

docs/gridsome.server.js

@@ -52,6 +52,10 @@ const globby = require('globby')
 
 module.exports = function (api) {
 
+  api.setClientOptions({
+    cwd: process.cwd(),
+  })
+
   api.loadSource(({ addCollection }) => {
     const appCollection = addCollection({ typeName: 'Package' })
 

docs/src/demos/Api/Schema/GenerateHTML/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <pre>{{ html }}</pre>
+  <pre><code>{{ html }}</code></pre>
 </template>
 
 <script>
-import { generateHtml } from '@tiptap/core'
+import { generateHTML } from '@tiptap/html'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -26,7 +26,7 @@ export default {
   },
 
   mounted() {
-    this.html = generateHtml(this.json, [
+    this.html = generateHTML(this.json, [
       Document(),
       Paragraph(),
       Text(),

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

@@ -14,7 +14,10 @@
         code
       </button>
       <button @click="editor.chain().focus().removeMarks().run()">
-        clear format
+        clear marks
+      </button>
+      <button @click="editor.chain().focus().clearNodes().run()">
+        clear nodes
       </button>
       <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
         paragraph
@@ -37,10 +40,10 @@
       <button @click="editor.chain().focus().heading({ level: 6 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 6 }) }">
         h6
       </button>
-      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+      <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
         bullet list
       </button>
-      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+      <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
         ordered list
       </button>
       <button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">

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

@@ -1,10 +1,13 @@
 <template>
   <div>
     <button @click="setName">
-      set username
+      Set Name
+    </button>
+    <button @click="changeName">
+      Random Name
     </button>
     <button @click="changeColor">
-      change color
+      Random Color
     </button>
 
     <div class="collaboration-status">
@@ -89,7 +92,16 @@ export default {
 
   methods: {
     setName() {
-      this.name = window.prompt('Name')
+      const name = window.prompt('Name')
+
+      if (name) {
+        this.name = name
+        return this.updateUser()
+      }
+    },
+
+    changeName() {
+      this.name = this.getRandomName()
       this.updateUser()
     },
 
@@ -108,28 +120,26 @@ export default {
     },
 
     getRandomColor() {
-      const colors = [
+      return this.getRandomElement([
-        '#f03e3e',
+        '#616161',
-        '#d6336c',
+        '#A975FF',
-        '#ae3ec9',
+        '#FB5151',
-        '#7048e8',
+        '#fd9170',
-        '#4263eb',
+        '#FFCB6B',
-        '#1c7ed6',
+        '#68CEF8',
-        '#1098ad',
+        '#80cbc4',
-        '#0ca678',
+        '#9DEF8F',
-        '#37b24d',
+      ])
-        '#74b816',
-        '#f59f00',
-        '#f76707',
-      ]
-
-      return colors[Math.floor(Math.random() * colors.length)]
     },
 
     getRandomName() {
-      const names = ['🙈', '🙉', '🙊', '💥', '💫', '💦', '💨', '🐵', '🐒', '🦍', '🦧', '🐶', '🐕', '🦮', '🐕‍🦺', '🐩', '🐺', '🦊', '🦝', '🐱', '🐈', '🦁', '🐯', '🐅', '🐆', '🐴', '🐎', '🦄', '🦓', '🦌', '🐮', '🐂', '🐃', '🐄', '🐷', '🐖', '🐗', '🐽', '🐏', '🐑', '🐐', '🐪', '🐫', '🦙', '🦒', '🐘', '🦏', '🦛', '🐭', '🐁', '🐀', '🐹', '🐰', '🐇', '🐿', '🦔', '🦇', '🐻', '🐨', '🐼', '🦥', '🦦', '🦨', '🦘', '🦡', '🐾', '🦃', '🐔', '🐓', '🐣', '🐤', '🐥', '🐦', '🐧', '🕊', '🦅', '🦆', '🦢', '🦉', '🦩', '🦚', '🦜', '🐸', '🐊', '🐢', '🦎', '🐍', '🐲', '🐉', '🦕', '🦖', '🐳', '🐋', '🐬', '🐟', '🐠', '🐡', '🦈', '🐙', '🐚', '🐌', '🦋', '🐛', '🐜', '🐝', '🐞', '🦗', '🕷', '🕸', '🦂', '🦟', '🦠']
+      return this.getRandomElement([
+        'Lea Thompson', 'Cyndi Lauper', 'Tom Cruise', 'Madonna', 'Jerry Hall', 'Joan Collins', 'Winona Ryder', 'Christina Applegate', 'Alyssa Milano', 'Molly Ringwald', 'Ally Sheedy', 'Debbie Harry', 'Olivia Newton-John', 'Elton John', 'Michael J. Fox', 'Axl Rose', 'Emilio Estevez', 'Ralph Macchio', 'Rob Lowe', 'Jennifer Grey', 'Mickey Rourke', 'John Cusack', 'Matthew Broderick', 'Justine Bateman', 'Lisa Bonet',
+      ])
+    },
 
-      return names[Math.floor(Math.random() * names.length)]
+    getRandomElement(list) {
+      return list[Math.floor(Math.random() * list.length)]
     },
 
     updateState() {
@@ -152,6 +162,7 @@ export default {
 </script>
 
 <style lang="scss">
+/* A list of all available users */
 .collaboration-users {
   margin-top: 0.5rem;
 
@@ -165,6 +176,7 @@ export default {
   }
 }
 
+/* Some information about the status */
 .collaboration-status {
   background: #eee;
   color: #666;
@@ -183,7 +195,7 @@ export default {
   }
 }
 
-/* This gives the remote user caret */
+/* Give a remote user a caret */
 .collaboration-cursor__caret {
   position: relative;
   margin-left: -1px;
@@ -194,10 +206,10 @@ export default {
   pointer-events: none;
 }
 
-/* This renders the username above the caret */
+/* Render the username above the caret */
 .collaboration-cursor__label {
   position: absolute;
-  top: -1.6em;
+  top: -1.4em;
   left: -1px;
   font-size: 13px;
   font-style: normal;

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

@@ -1,12 +1,18 @@
 <template>
   <div>
-    <div class="actions">
+    <div class="actions" v-if="editor">
       <button class="button" @click="setContent">
         Set Content
       </button>
       <button class="button" @click="clearContent">
         Clear Content
       </button>
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        Bold
+      </button>
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        Italic
+      </button>
     </div>
 
     <editor-content :editor="editor" />
@@ -70,7 +76,7 @@ export default {
           content: [
             {
               type: 'text',
-              text: 'This is some inserted text. 👋',
+              text: 'It’s 19871. You can’t turn on a radio, or go to a mall without hearing Olivia Newton-John’s hit song, Physical.',
             },
           ],
         }],
@@ -97,9 +103,12 @@ export default {
 
 <style lang="scss">
 .export {
+  padding: 1rem 0 0;
+
   h3 {
-    margin: 0.5rem 0;
+    margin: 1rem 0 0.5rem;
   }
+
   pre {
     border-radius: 5px;
     color: #333;
@@ -109,7 +118,9 @@ export default {
     display: block;
     white-space: pre-wrap;
     font-size: 0.8rem;
-    padding: 1rem;
+    padding: 0.75rem 1rem;
+    background-color:#e9ecef;
+    color: #495057;
   }
 }
 </style>

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

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div v-if="editor">
+      <button @click="editor.chain().focus().bold().run()" :class="{ 'is-active': editor.isActive('bold') }">
+        bold
+      </button>
+      <button @click="editor.chain().focus().italic().run()" :class="{ 'is-active': editor.isActive('italic') }">
+        italic
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
+        h1
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }">
+        h2
+      </button>
+      <button @click="editor.chain().focus().heading({ level: 3 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 3 }) }">
+        h3
+      </button>
+      <button @click="editor.chain().focus().paragraph().run()" :class="{ 'is-active': editor.isActive('paragraph') }">
+        paragraph
+      </button>
+      <button @click="editor.chain().focus().textAlign('left').run()">
+        left
+      </button>
+      <button @click="editor.chain().focus().textAlign('center').run()">
+        center
+      </button>
+      <button @click="editor.chain().focus().textAlign('right').run()">
+        right
+      </button>
+      <button @click="editor.chain().focus().textAlign('justify').run()">
+        justify
+      </button>
+    </div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Heading from '@tiptap/extension-heading'
+import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
+import TextAlign from '@tiptap/extension-text-align'
+import HardBreak from '@tiptap/extension-hard-break'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Heading({
+          level: [1, 2, 3],
+        }),
+        Bold(),
+        Italic(),
+        TextAlign(),
+        HardBreak(),
+      ],
+      content: `
+        <h3>Girls Just Want to Have Fun (Cyndi Lauper)</h2>
+        <p>I come home in the morning light<br>
+        My mother says, “When you gonna live your life right?”<br>
+        Oh mother dear we’re not the fortunate ones<br>
+        And girls, they wanna have fun<br>
+        Oh girls just want to have fun</p>
+        <p style="text-align: center">The phone rings in the middle of the night<br>
+        My father yells, "What you gonna do with your life?"<br>
+        Oh daddy dear, you know you’re still number one<br>
+        But girls, they wanna have fun<br>
+        Oh girls just want to have</p>
+        <p style="text-align:right">That’s all they really want<br>
+        Some fun<br>
+        When the working day is done<br>
+        Oh girls, they wanna have fun<br>
+        Oh girls just wanna have fun<br>
+        (girls, they wanna, wanna have fun, girls wanna have)</p>
+        <p style="text-align:justify">Some boys take a beautiful girl
+        And hide her away from the rest of the world
+        I want to be the one to walk in the sun
+        Oh girls, they wanna have fun
+        Oh girls just wanna have</p>
+        <p style="text-align:justify">That's all they really want
+        Some fun
+        When the working day is done
+        Oh girls, they wanna have fun
+        Oh girls just want to have fun (girls, they wanna, wanna have fun, girls wanna have)
+        They just wanna, they just wanna (girls)
+        They just wanna, they just wanna, oh girl (girls just wanna have fun)
+        Girls just wanna have fun
+        They just wanna, they just wanna
+        They just wanna, they just wanna (girls)
+        They just wanna, they just wanna, oh girl (girls just wanna have fun)
+        Girls just want to have fun</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>

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

@@ -11,13 +11,19 @@
 </template>
 
 <script>
-import { Editor } from '@tiptap/core'
+import { Editor, mergeAttributes } from '@tiptap/core'
 import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Link from '@tiptap/extension-link'
 
+const CustomLink = Link.extend({
+  renderHTML({ attributes }) {
+    return ['strong', mergeAttributes(attributes, { rel: this.options.rel }), 0]
+  },
+})
+
 export default {
   components: {
     EditorContent,
@@ -35,7 +41,7 @@ export default {
         Document(),
         Paragraph(),
         Text(),
-        Link(),
+        CustomLink(),
       ],
       content: `
         <p>

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

@@ -22,13 +22,13 @@ export default {
     this.editor = new Editor({
       content: `
         <p>
-          Start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
+          Markdown shortcuts make it easy to format the text while typing.
         </p>
         <p>
-          Those conventions are called <strong>input rules</strong> in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code.
+          To test that, start a new line and type <code>#</code> followed by a space to get a heading. Try <code>#</code>, <code>##</code>, <code>###</code>, <code>####</code>, <code>#####</code>, <code>######</code> for different levels.
         </p>
         <p>
-          You can add your own input rules to your Nodes and Marks or even to the default ones.
+          Those conventions are called input rules in tiptap. Some of them are enabled by default. Try <code>></code> for blockquotes, <code>*</code>, <code>-</code> or <code>+</code> for bullet lists, or <code>\`foobar\`</code> to highlight code. You can add your own input rules to existing extensions, and to your custom nodes and marks.
         </p>
       `,
       extensions: defaultExtensions(),

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

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

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

@@ -0,0 +1,91 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Collaboration from '@tiptap/extension-collaboration'
+import CollaborationCursor from '@tiptap/extension-collaboration-cursor'
+import * as Y from 'yjs'
+import { WebrtcProvider } from 'y-webrtc'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      documentName: 'tiptap-collaboration-cursor-extension',
+      ydoc: null,
+      provider: null,
+      type: null,
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.ydoc = new Y.Doc()
+    this.provider = new WebrtcProvider(this.documentName, this.ydoc)
+    this.type = this.ydoc.getXmlFragment('prosemirror')
+
+    this.editor = new Editor({
+      // TODO: This is added by every new user.
+      // content: `
+      //   <p>Example Text</p>
+      // `,
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Collaboration({
+          provider: this.provider,
+          type: this.type,
+        }),
+        CollaborationCursor({
+          provider: this.provider,
+          name: 'Cyndi Lauper',
+          color: '#f783ac',
+        }),
+      ],
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+    this.provider.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Give a remote user a caret */
+.collaboration-cursor__caret {
+  position: relative;
+  margin-left: -1px;
+  margin-right: -1px;
+  border-left: 1px solid black;
+  border-right: 1px solid black;
+  word-break: normal;
+  pointer-events: none;
+}
+
+/* Render the username above the caret */
+.collaboration-cursor__label {
+  position: absolute;
+  top: -1.4em;
+  left: -1px;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  user-select: none;
+  color: white;
+  padding: 0.1rem 0.3rem;
+  border-radius: 3px;
+  white-space: nowrap;
+}
+</style>

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

@@ -0,0 +1,9 @@
+context('/examples/focus', () => {
+  before(() => {
+    cy.visit('/examples/focus')
+  })
+
+  it('should have class', () => {
+    cy.get('.ProseMirror p:first').should('have.class', 'has-focus')
+  })
+})

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

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Focus from '@tiptap/extension-focus'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Focus({
+          className: 'has-focus',
+          nested: true,
+        }),
+      ],
+      autoFocus: true,
+      content: `
+        <p>
+          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
+        </p>
+        <p>
+          Nested elements will be focused with the default setting nested: true. Otherwise the whole item will get the focus class, even when just a single nested item is selected.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+.has-focus {
+  border-radius: 3px;
+  box-shadow: 0 0 0 3px #68CEF8;
+}
+</style>

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

@@ -0,0 +1,5 @@
+context('/examples/gapcursor', () => {
+  before(() => {
+    cy.visit('/examples/gapcursor')
+  })
+})

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

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-starter-kit'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import Gapcursor from '@tiptap/extension-gapcursor'
+import Image from '@tiptap/extension-image'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        Image(),
+        Gapcursor(),
+      ],
+      content: `
+        <p>Try to set the cursor behind the image with your arrow keys! You should see big blinking cursor right from the image. This is the gapcursor.</p>
+        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Copied from the original prosemirror-gapcursor plugin by Marijn Haverbeke */
+/* https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/style/gapcursor.css */
+
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+  border: 10px solid red;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}
+</style>

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

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

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

@@ -1,6 +1,6 @@
-context('/api/extensions/text', () => {
+context('/api/nodes/text', () => {
   before(() => {
-    cy.visit('/api/extensions/text')
+    cy.visit('/api/nodes/text')
   })
 
   beforeEach(() => {

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

@@ -9,6 +9,9 @@
     <button @click="editor.chain().focus().textAlign('right').run()">
       right
     </button>
+    <button @click="editor.chain().focus().resetNodeAttributes(['textAlign']).run()">
+      set default
+    </button>
     <editor-content :editor="editor" />
   </div>
 </template>

docs/src/demos/Marks/Bold/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/bold', () => {
+context('/api/marks/bold', () => {
   before(() => {
-    cy.visit('/api/extensions/bold')
+    cy.visit('/api/marks/bold')
   })
 
   beforeEach(() => {

docs/src/demos/Marks/Code/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/code', () => {
+context('/api/marks/code', () => {
   before(() => {
-    cy.visit('/api/extensions/code')
+    cy.visit('/api/marks/code')
   })
 
   beforeEach(() => {

docs/src/demos/Marks/Italic/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/italic', () => {
+context('/api/marks/italic', () => {
   before(() => {
-    cy.visit('/api/extensions/italic')
+    cy.visit('/api/marks/italic')
   })
 
   beforeEach(() => {

docs/src/demos/Marks/Link/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/link', () => {
+context('/api/marks/link', () => {
   before(() => {
-    cy.visit('/api/extensions/link')
+    cy.visit('/api/marks/link')
   })
 
   beforeEach(() => {

docs/src/demos/Marks/Strike/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/strike', () => {
+context('/api/marks/strike', () => {
   before(() => {
-    cy.visit('/api/extensions/strike')
+    cy.visit('/api/marks/strike')
   })
 
   beforeEach(() => {

docs/src/demos/Marks/Underline/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/underline', () => {
+context('/api/marks/underline', () => {
   before(() => {
-    cy.visit('/api/extensions/underline')
+    cy.visit('/api/marks/underline')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/Blockquote/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/blockquote', () => {
+context('/api/nodes/blockquote', () => {
   before(() => {
-    cy.visit('/api/extensions/blockquote')
+    cy.visit('/api/nodes/blockquote')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/BulletList/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/bullet-list', () => {
+context('/api/nodes/bullet-list', () => {
   before(() => {
-    cy.visit('/api/extensions/bullet-list')
+    cy.visit('/api/nodes/bullet-list')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/BulletList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
       bullet list
     </button>
 

docs/src/demos/Nodes/CodeBlock/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/code-block', () => {
+context('/api/nodes/code-block', () => {
   before(() => {
-    cy.visit('/api/extensions/code-block')
+    cy.visit('/api/nodes/code-block')
   })
 
   beforeEach(() => {

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

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

docs/src/demos/Nodes/HardBreak/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/hard-break', () => {
+context('/api/nodes/hard-break', () => {
   before(() => {
-    cy.visit('/api/extensions/hard-break')
+    cy.visit('/api/nodes/hard-break')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/Heading/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/heading', () => {
+context('/api/nodes/heading', () => {
   before(() => {
-    cy.visit('/api/extensions/heading')
+    cy.visit('/api/nodes/heading')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/HorizontalRule/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/horizontal-rule', () => {
+context('/api/nodes/horizontal-rule', () => {
   before(() => {
-    cy.visit('/api/extensions/horizontal-rule')
+    cy.visit('/api/nodes/horizontal-rule')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/Image/index.spec.js

@@ -0,0 +1,27 @@
+context('/api/nodes/image', () => {
+  before(() => {
+    cy.visit('/api/nodes/image')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+    })
+  })
+
+  it('should add an img tag with the correct URL', () => {
+    cy.window().then(win => {
+      cy.stub(win, 'prompt').returns('foobar.png')
+
+      cy.get('.demo__preview button:first')
+        .click()
+
+      cy.window().its('prompt').should('be.called')
+
+      cy.get('.ProseMirror')
+        .find('img')
+        .should('have.attr', 'src', 'foobar.png')
+    })
+  })
+})

docs/src/demos/Nodes/Image/index.vue

@@ -1,5 +1,8 @@
 <template>
   <div v-if="editor">
+    <button @click="addImage">
+      image
+    </button>
     <editor-content :editor="editor" />
   </div>
 </template>
@@ -11,6 +14,7 @@ import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
 import Image from '@tiptap/extension-image'
+import Dropcursor from '@tiptap/extension-dropcursor'
 
 export default {
   components: {
@@ -23,6 +27,14 @@ export default {
     }
   },
 
+  methods: {
+    addImage() {
+      const url = window.prompt('URL')
+
+      this.editor.chain().focus().image({ src: url }).run()
+    },
+  },
+
   mounted() {
     this.editor = new Editor({
       extensions: [
@@ -30,10 +42,12 @@ export default {
         Paragraph(),
         Text(),
         Image(),
+        Dropcursor(),
       ],
       content: `
-        <p>This is basic example of implementing images. Try to drop new images here. Reordering also works.</p>
+        <p>This is a basic example of implementing images. Drag to re-order.</p>
-        <img src="https://66.media.tumblr.com/dcd3d24b79d78a3ee0f9192246e727f1/tumblr_o00xgqMhPM1qak053o1_400.gif" />
+        <img src="https://source.unsplash.com/8xznAGy4HcY/800x400" />
+        <img src="https://source.unsplash.com/K9QHL52rE2k/800x400" />
       `,
     })
   },

docs/src/demos/Nodes/ListItem/index.spec.js

@@ -0,0 +1,5 @@
+context('/api/nodes/list-item', () => {
+  before(() => {
+    cy.visit('/api/nodes/list-item')
+  })
+})

docs/src/demos/Nodes/ListItem/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bullet_list') }">
+    <button @click="editor.chain().focus().bulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }">
       bullet list
     </button>
-    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
       ordered list
     </button>
 

docs/src/demos/Nodes/OrderedList/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/ordered-list', () => {
+context('/api/nodes/ordered-list', () => {
   before(() => {
-    cy.visit('/api/extensions/ordered-list')
+    cy.visit('/api/nodes/ordered-list')
   })
 
   beforeEach(() => {

docs/src/demos/Nodes/OrderedList/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="editor">
-    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('ordered_list') }">
+    <button @click="editor.chain().focus().orderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
       ordered list
     </button>
 

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

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

docs/src/demos/Nodes/TaskList/index.spec.js

@@ -0,0 +1,119 @@
+context('/api/nodes/task-list', () => {
+  before(() => {
+    cy.visit('/api/nodes/task-list')
+  })
+
+  beforeEach(() => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<p>Example Text</p>')
+      editor.selectAll()
+    })
+  })
+
+  it('should parse unordered lists correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<ul data-type="task_list"><li data-checked="true" data-type="taskItem"><p>Example Text</p></li></ul>')
+      expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="true" data-type="taskItem"><p>Example Text</p></li></ul>')
+    })
+  })
+
+  it('should parse unordered lists without paragraphs correctly', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.setContent('<ul data-type="task_list"><li data-checked="false" data-type="taskItem">Example Text</li></ul>')
+      expect(editor.getHTML()).to.eq('<ul data-type="task_list"><li data-checked="false" data-type="taskItem"><p>Example Text</p></li></ul>')
+    })
+  })
+
+  it('the button should make the selected line a task list item', () => {
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+
+    cy.get('.ProseMirror ul li')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"]')
+      .should('contain', 'Example Text')
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"] li')
+      .should('contain', 'Example Text')
+  })
+
+  it('the button should toggle the task list', () => {
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror')
+      .find('ul[data-type="task_list"]')
+      .should('contain', 'Example Text')
+
+    cy.get('.demo__preview button:nth-child(1)')
+      .click()
+
+    cy.get('.ProseMirror ul')
+      .should('not.exist')
+  })
+
+  it('should leave the list with double enter', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[ ] List Item 1{enter}{enter}Paragraph')
+
+    cy.get('.ProseMirror')
+      .find('li')
+      .its('length')
+      .should('eq', 1)
+
+    cy.get('.ProseMirror')
+      .find('p')
+      .should('contain', 'Paragraph')
+  })
+
+  it('should make a task list from square brackets', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[ ] List Item 1{enter}List Item 2')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
+      .should('have.attr', 'data-checked', 'false')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
+      .should('have.attr', 'data-checked', 'false')
+  })
+
+  it.only('should make a task list from checked square brackets', () => {
+    cy.get('.ProseMirror').then(([{ editor }]) => {
+      editor.clearContent()
+    })
+
+    cy.get('.ProseMirror')
+      .type('[x] List Item 1{enter}List Item 2')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(1)')
+      .should('contain', 'List Item 1')
+      .should('have.attr', 'data-checked', 'true')
+
+    cy.get('.ProseMirror')
+      .find('li:nth-child(2)')
+      .should('contain', 'List Item 2')
+      .should('have.attr', 'data-checked', 'true')
+  })
+})

docs/src/demos/Nodes/TaskList/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <div v-if="editor">
+    <button @click="editor.chain().focus().taskList().run()" :class="{ 'is-active': editor.isActive('task_list') }">
+      task list
+    </button>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent } from '@tiptap/vue'
+import Document from '@tiptap/extension-document'
+import Paragraph from '@tiptap/extension-paragraph'
+import Text from '@tiptap/extension-text'
+import TaskList from '@tiptap/extension-task-list'
+import TaskItem from '@tiptap/extension-task-item'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        Document(),
+        Paragraph(),
+        Text(),
+        TaskList(),
+        TaskItem(),
+      ],
+      content: `
+        <ul data-type="task_list">
+          <li data-type="taskItem" data-checked="true">A list item</li>
+          <li data-type="taskItem" data-checked="false">And another one</li>
+        </ul>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+ul[data-type="taskList"] {
+  list-style: none;
+  padding: 0;
+
+  li {
+    display: flex;
+    align-items: center;
+
+    > input {
+      flex: 0 0 auto;
+      margin-right: 0.5rem;
+    }
+  }
+}
+</style>

docs/src/demos/Nodes/Text/index.spec.js

@@ -1,6 +1,6 @@
-context('/api/extensions/text', () => {
+context('/api/nodes/text', () => {
   before(() => {
-    cy.visit('/api/extensions/text')
+    cy.visit('/api/nodes/text')
   })
 
   beforeEach(() => {

docs/src/demos/Overview/Installation/index.vue

@@ -18,7 +18,7 @@ export default {
 
   mounted() {
     this.editor = new Editor({
-      content: '<p>Hello, I’m tiptap running in Vue.js! 👋</p>',
+      content: '<p>Hello, here is tiptap! 👋</p>',
       extensions: defaultExtensions(),
     })
   },

docs/src/docPages/api/commands.md

@@ -1,6 +1,6 @@
 # Commands
 
-## Table of Contents
+## toc
 
 ## Introduction
 The editor provides a ton of commands to programmtically add or change content or alter the selection. If you want to build your own editor you definitely want to learn more about them.
@@ -14,7 +14,7 @@ editor.bold()
 
 While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.
 
-## Chain commands
+### Chain commands
 Most commands can be executed combined to one call. First of all, that’s shorter than separate function call in most cases. Here is an example to make the selected text bold:
 
 ```js
@@ -27,35 +27,84 @@ When a user clicks on a button outside of the content, the editor isn’t in foc
 
 All chained commands are kind of queued up. They are combined to one single transaction. That means, the content is only updated once, also the `update` event is only triggered once.
 
+### Dry run for commands
+Sometimes, you don’t want to actually run the commands, but only know if it would be possible to run commands, for example to show or hide buttons in a menu. That’s what we added `.can()` for. Everything coming after this method will be executed, without applying the changes to the document:
+
+```js
+editor.can().bold()
+```
+
+And you can use it together with `.chain()`, too. Here is an example which checks if it’s possible to apply all the commands:
+
+```js
+editor.can().chain().bold().italic().run()
+```
+
+Both calls would return `true` if it’s possible to apply the commands, and `false` in case it’s not.
+
+### Try commands
+If you want to run a list of commands, but want only the first successful command to be applied, you can do this with the `.try()` method. This method runs one command after the other and stops at the first which returns `true`.
+
+For example, the backspace key tries to undo an input rule first. If that was successful, it stops there. If no input rule has been applied and thus can’t be reverted, it runs the next command and deletes the selection, if there is one. Here is the simplified example:
+
+```js
+editor.try(({ commands }) => [
+  () => commands.undoInputRule(),
+  () => commands.deleteSelection(),
+  // …
+])
+```
+
+Inside of commands you can do the same thing like that:
+
+```js
+commands.try([
+  () => commands.undoInputRule(),
+  () => commands.deleteSelection(),
+  // …
+])
+```
+
 ## List of commands
 Have a look at all of the core commands listed below. They should give you a good first impression of what’s possible.
 
 ### Content
-| Command         | Description                                                 |
+| Command          | Description                                                 |
-| --------------- | ----------------------------------------------------------- |
+| ---------------- | ----------------------------------------------------------- |
-| .clearContent() | Clear the whole document.                                   |
+| .clearContent()  | Clear the whole document.                                   |
-| .insertgetHTML()   | Insert a string of HTML at the currently selected position. |
+| .insertgetHTML() | Insert a string of HTML at the currently selected position. |
-| .insertText()   | Insert a string of text at the currently selected position. |
+| .insertText()    | Insert a string of text at the currently selected position. |
-| .setContent()   | Replace the whole document with new content.                |
+| .insertHTML()    |                                                             |
+| .setContent()    | Replace the whole document with new content.                |
 
 ### Nodes & Marks
-| Command             | Description                                            |
+| Command                | Description                                |
-| ------------------- | ------------------------------------------------------ |
+| ---------------------- | ------------------------------------------ |
-| .removeMark()       | Remove a mark in the current selection.                |
+| .clearNodes()          |                                            |
-| .removeMarks()      | Remove all marks in the current selection.             |
+| .removeMark()          |                                            |
-| .selectParentNode() | Select the parent node.                                |
+| .removeMark()          | Remove a mark in the current selection.    |
-| .toggleMark()       | Toggle a mark on and off.                              |
+| .removeMarks()         |                                            |
-| .toggleBlockType()  | Toggle a node with another node.                       |
+| .removeMarks()         | Remove all marks in the current selection. |
-| .setBlockType()     | Replace a given range with a node.                     |
+| .resetNodeAttributes() |                                            |
-| .updateMark()       | Update a mark with new attributes.                     |
+| .selectParentNode()    | Select the parent node.                    |
+| .setBlockType()        | Replace a given range with a node.         |
+| .setNodeAttributes()   |                                            |
+| .splitBlock()          | Forks a new node from an existing node.    |
+| .toggleBlockType()     | Toggle a node with another node.           |
+| .toggleMark()          |                                            |
+| .toggleMark()          | Toggle a mark on and off.                  |
+| .toggleWrap()          |                                            |
+| .updateMark()          |                                            |
+| .updateMark()          | Update a mark with new attributes.         |
 
 ### Lists
-| Command             | Description                                            |
+| Command          | Description                                            |
-| ------------------- | ------------------------------------------------------ |
+| ---------------- | ------------------------------------------------------ |
-| .liftListItem()     | Lift the list item into a wrapping list.               |
+| .liftListItem()  | Lift the list item into a wrapping list.               |
-| .sinkListItem()     | Sink the list item down into an inner list.            |
+| .sinkListItem()  | Sink the list item down into an inner list.            |
-| .splitListItem()    | Splits a textblock of a list item into two list items. |
+| .splitListItem() | Splits a textblock of a list item into two list items. |
-| .toggleList()       | Toggle between different list styles.                  |
+| .toggleList()    | Toggle between different list styles.                  |
+| .wrapInList()    |                                                        |
 
 ### Selection
 | Command            | Description                             |
@@ -66,5 +115,7 @@ Have a look at all of the core commands listed below. They should give you a goo
 | .scrollIntoView()  | Scroll the selection into view.         |
 | .selectAll()       | Select the whole document.              |
 
-### Extensions
+## Add your own commands
-All extension can add additional commands (and most do), check out the specific [documentation for the provided extensions](/api/extensions) to learn more about that. Of course, you can [add your custom extensions](/guide/custom-extensions) with custom commands aswell.
+All extensions can add additional commands (and most do), check out the specific [documentation for the provided nodes](/api/nodes), [marks](/api/marks), and [extensions](/api/extensions) to learn more about those.
+
+Of course, you can [add your custom extensions](/guide/build-custom-extensions) with custom commands aswell.

docs/src/docPages/api/editor.md

@@ -1,6 +1,6 @@
 # Editor
 
-## Table of Contents
+## toc
 
 ## Introduction
 This class is a central building block of tiptap. It does most of the heavy lifting of creating a working  [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
@@ -10,25 +10,23 @@ This class is a central building block of tiptap. It does most of the heavy lift
 | ------------------ | --------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `autoFocus`        | `Boolean`       | `false`     | Focus the editor on init.                                                                                                                                                           |
 | `content`          | `Object|String` | `null`      | The editor state object used by Prosemirror. You can also pass HTML to the `content` slot. When used both, the `content` slot will be ignored.                                      |
-| `dropCursor`       | `Object`        | `{}`        | Config for `prosemirror-dropcursor`.                                                                                                                                                |
 | `editable`         | `Boolean`       | `true`      | When set to `false` the editor is read-only.                                                                                                                                        |
 | `editorProps`      | `Object`        | `{}`        | A list of [Prosemirror editorProps](https://prosemirror.net/docs/ref/#view.EditorProps).                                                                                            |
-| `enableDropCursor` | `Boolean`       | `true`      | Enable/disable showing a cursor at the drop position when something is dragged over the editor.                                                                                     |
-| `enableGapCursor`  | `Boolean`       | `true`      | Enable/disable a cursor at places that don’t allow regular selection (such as positions that have a leaf block node, table, or the end of the document both before and after them). |
 | `extensions`       | `Array`         | `[]`        | A list of extensions used, by the editor. This can be `Nodes`, `Marks` or `Plugins`.                                                                                                |
 | `parseOptions`     | `Object`        | `{}`        | A list of [Prosemirror parseOptions](https://prosemirror.net/docs/ref/#model.ParseOptions).                                                                                         |
 | `onBlur`           | `Function`      | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on blur.                                                                                           |
 | `onFocus`          | `Function`      | `undefined` | Returns an object with the `event` and current `state` and `view` of Prosemirror on focus.                                                                                          |
 | `onInit`           | `Function`      | `undefined` | Returns an object with the current `state` and `view` of Prosemirror on init.                                                                                                       |
-| `onUpdate`         | `Function`      | `undefined` | Returns an object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function and the `transaction` on every change.                                                  |
+| `onUpdate`         | `Function`      | `undefined` | Returns an object with the current `state` of Prosemirror, a `getJSON()` and `getHTML()` function and the `transaction` on every change.                                            |
 
 ## Methods
 | Method               | Parameters                                                                                                  | Description                                               |
 | -------------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| `getHTML()`             | –                                                                                                           | Returns the current content as HTML.                      |
+| `getHTML()`          | –                                                                                                           | Returns the current content as HTML.                      |
-| `getJSON()`             | –                                                                                                           | Returns the current content as JSON.                      |
+| `getJSON()`          | –                                                                                                           | Returns the current content as JSON.                      |
 | `destroy()`          | –                                                                                                           | Stops the editor instance and unbinds all events.         |
 | `chain()`            | -                                                                                                           | Create a command chain to call multiple commands at once. |
+| `can()`              | -                                                                                                           | Check if a command or a command chain can be executed. Without executing it. |
 | `setOptions()`       | `options` A list of options                                                                                 | Update editor options.                                    |
 | `isEditable()`       | -                                                                                                           | Returns whether the editor is editable.                   |
 | `state()`            | -                                                                                                           | Returns the editor state.                                 |
@@ -40,3 +38,4 @@ This class is a central building block of tiptap. It does most of the heavy lift
 | `getNodeAttrs()`     | `name` Name of the node                                                                                     | Get attributes of the currently selected node.            |
 | `getMarkAttrs()`     | `name` Name of the mark                                                                                     | Get attributes of the currently selected mark.            |
 | `isActive()`         | `name` Name of the node or mark<br>`attrs` Attributes of the node or mark                                   | Returns if the currently selected node or mark is active. |
+| `isEmpty()`          | -                                                                                                           | Check if there is no content.                             |

docs/src/docPages/api/events.md

@@ -1,6 +1,6 @@
 # Events
 
-## Table of Contents
+## toc
 
 ## Introduction
 The editor fires a few different events that you can hook into. There are two ways to register event listeners:
@@ -31,6 +31,7 @@ const editor = new Editor({
 ## Option 2: Later
 Or you can register your event listeners on a running editor instance:
 
+### Bind event listeners
 ```js
 editor.on('init', () => {
   // The editor is ready.
@@ -54,7 +55,6 @@ editor.on('transaction', ({ transaction }) => {
 ```
 
 ### Unbind event listeners
-
 If you need to unbind those event listeners at some point, you should register your event listeners with `.on()` and unbind them with `.off()` then.
 
 ```js

docs/src/docPages/api/extensions.md

@@ -1,54 +1,60 @@
 # Extensions
 
-## Table of Contents
+## toc
 
 ## Introduction
 Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
 
-## A minimalist set of extensions
+## List of provided extensions
-You’ll need at least three extensions: `Document`, `Paragraph` and `Text`. See [an example of a tiptap version for minimalists](/examples/minimalist).
-
-## Default extensions
-You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. See [how you can use the `defaultExtensions()`](/examples/basic).
-
-## List of supported extensions
 | Title                                                       | Default Extension | Source Code                                                                                            |
 | ----------------------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| [Blockquote](/api/extensions/blockquote)                    | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)           |
-| [Bold](/api/extensions/bold)                                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)                 |
-| [BulletList](/api/extensions/bullet-list)                   | Yes               | [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/)           |
 | [Collaboration](/api/extensions/collaboration)              | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration/)        |
 | [CollaborationCursor](/api/extensions/collaboration-cursor) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/) |
-| [Document](/api/extensions/document)                        | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)             |
+| [Dropcursor](/api/extensions/dropcursor)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)           |
-| [HardBreak](/api/extensions/hard-break)                     | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)           |
+| [Focus](/api/extensions/focus)                              | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)                |
-| [Heading](/api/extensions/heading)                          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)              |
+| [Gapcursor](/api/extensions/gapcursor)                      | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)            |
-| [Highlight](/api/extensions/highlight)                      | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-highlight/)            |
+| [History](/api/extensions/history)                          | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)              |
-| [History](/api/extensions/history)                          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-history/)              |
+| [TextAlign](/api/extensions/text-align)                     | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)           |
-| [HorizontalRule](/api/extensions/horizontal-rule)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)      |
+| [Typography](/api/extensions/typography)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/)           |
-| [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)                       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)            |
-| [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/)            |
-| [Strike](/api/extensions/strike)                            | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)               |
-| [Text](/api/extensions/text)                                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)                 |
-| [Underline](/api/extensions/underline)                      | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)            |
 
-<!-- | [CodeBlockHighlight](/api/extensions/code-block-highlight) | – | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packagescode-block-highlight/extension-/) -->
+You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/basic).
-<!-- | [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
+## Create a new extension
-:::warning Work in Progress
+You’re free to create your own extensions for tiptap. Here is the boilerplate code that’s need to create and register your own extension:
-This section is not ready yet. Meanwhile, [search through GitHub issues](https://github.com/ueberdosis/tiptap/issues) to find code snippets.
-:::
 
-## Your custom extensions
+```js
-Didn’t find what you’re looking for? No worries, [you can build your own extensions](/guide/custom-extensions).
+import { createExtension } from '@tiptap/core'
+
+const CustomExtension = createExtension({
+  // Your code here
+})
+
+const editor = new Editor({
+  extensions: [
+    // Register your custom extension with the editor.
+    CustomExtension(),
+    // … and don’t forget all other extensions.
+    Document(),
+    Paragraph(),
+    Text(),
+    // …
+  ],
+```
+
+Learn [more about custom extensions in our guide](/guide/build-custom-extensions).
+
+### ProseMirror plugins
+ProseMirror has a fantastic eco system with many amazing plugins. If you want to use one of them, you can register them with tiptap like that:
+
+```js
+import { history } from 'prosemirror-history'
+
+const History = createExtension({
+  addProseMirrorPlugins() {
+    return [
+      history(),
+      // …
+    ]
+  },
+})
+```

docs/src/docPages/api/extensions/code-block-highlight.md

@@ -1,11 +0,0 @@
-# CodeBlockHighlight
-Enables you to use the `<pre>` HTML tag with auto-detected syntax highlighting in the editor.
-
-## Settings
-*None*
-
-## Commands
-*None*
-
-## Keyboard shortcuts
-*None*

docs/src/docPages/api/extensions/collaboration-cursor.md

@@ -1,2 +1,34 @@
 # Collaboration Cursor
 
+:::premium Premium Extension
+Using this in production requires a **tiptap pro** license. [Read more](/sponsor)
+:::
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-collaboration-cursor
+
+# with Yarn
+yarn add @tiptap/extension-collaboration-cursor
+```
+
+## Settings
+| Option   | Type | Default | Description |
+| -------- | ---- | ------- | ----------- |
+| provider |      |         |             |
+| type     |      |         |             |
+
+## Commands
+| Command | Parameters    | Description                                                              |
+| ------- | ------------- | ------------------------------------------------------------------------ |
+| user    | name<br>color | The name of the current user.<br>The color of the current user’s cursor. |
+
+## Source code
+[packages/extension-collaboration-cursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-collaboration-cursor/)
+
+## Usage
+:::warning Public
+The content of this editor is shared with other users.
+:::
+<demo name="Extensions/CollaborationCursor" highlight="" />

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

@@ -1,12 +1,16 @@
 # Collaboration
-Enables you to collaborate with others on one document.
+The Collaboration extension enables you to collaborate with others on one document. The implementation is based on [Y.js by Kevin Jahns](https://github.com/yjs/yjs), which is the coolest thing to [integrate collaborative editing](/guide/collaborative-editing) in your project.
+
+:::premium Premium Extension
+Using this in production requires a **tiptap pro** license. [Read more](/sponsor)
+:::
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-collaboration yjs y-webrtc
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-collaboration yjs y-webrtc
 ```
 

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

@@ -0,0 +1,25 @@
+# Dropcursor
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-dropcursor
+
+# with Yarn
+yarn add @tiptap/extension-dropcursor
+```
+
+## Settings
+*None*
+
+## Commands
+*None*
+
+## Keyboard shortcuts
+*None*
+
+## Source code
+[packages/extension-dropcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-dropcursor/)
+
+## Usage
+<demo name="Extensions/Dropcursor" highlight="" />

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

@@ -0,0 +1,22 @@
+# Focus
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-focus
+
+# with Yarn
+yarn add @tiptap/extension-focus
+```
+
+## Settings
+| Option    | Type    | Default   | Description                                            |
+| --------- | ------- | --------- | ------------------------------------------------------ |
+| className | string  | has-focus | The class that is applied to the focused element.      |
+| nested    | boolean | true      | When enabled nested elements get the focus class, too. |
+
+## Source code
+[packages/extension-focus/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-focus/)
+
+## Usage
+<demo name="Extensions/Focus" highlight="31-34,12" />

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

@@ -0,0 +1,19 @@
+# Gapcursor
+This extension loads the [ProseMirror Gapcursor plugin](https://github.com/ProseMirror/prosemirror-gapcursor) by Marijn Haverbeke, which adds a gap for the cursor in places that don’t allow regular selection. For example, after a table at the end of a document.
+
+Note that tiptap is renderless, but the dropcursor needs CSS for its appearance. The default CSS is added to the usage example below.
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-gapcursor
+
+# with Yarn
+yarn add @tiptap/extension-gapcursor
+```
+
+## Source code
+[packages/extension-gapcursor/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-gapcursor/)
+
+## Usage
+<demo name="Extensions/Gapcursor" highlight="12,33" />

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

@@ -3,10 +3,10 @@ This extension provides history support. All changes to the document will be tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-history
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-history
 ```
 
@@ -17,7 +17,7 @@ yarn add @tiptap/extension-history
 | newGroupDelay | number | 500     | The delay between changes after which a new group should be started (in milliseconds). When changes aren’t adjacent, a new group is always started. |
 
 ## Commands
-| Command | Options | Description           |
+| Command | Parameters | Description           |
 | ------- | ------- | --------------------- |
 | undo    | —       | Undo the last change. |
 | redo    | —       | Redo the last change. |

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

@@ -1,16 +0,0 @@
-# Image
-
-## Installation
-```bash
-# With npm
-npm install @tiptap/extension-image
-
-# Or: With Yarn
-yarn add @tiptap/extension-image
-```
-
-## Source code
-[packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)
-
-## Usage
-<demo name="Extensions/Image" highlight="12,30" />

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

@@ -1,2 +0,0 @@
-# Mention
-Enables you to use mentions in the editor.

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

@@ -1,2 +0,0 @@
-# Placeholder
-Enables you to show placeholders on empty paragraphs.

docs/src/docPages/api/extensions/table-cell.md

@@ -1,6 +0,0 @@
-# TableCell
-Enables you to use the `<td>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::

docs/src/docPages/api/extensions/table-header.md

@@ -1,6 +0,0 @@
-# TableHeader
-Enables you to use the `<th>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::

docs/src/docPages/api/extensions/table-row.md

@@ -1,6 +0,0 @@
-# TableRow
-Enables you to use the `<tr>` HTML tag in the editor.
-
-::: warning Restrictions
-This extensions is intended to be used with the `Table` extension.
-:::

docs/src/docPages/api/extensions/text-align.md

@@ -1,14 +1,23 @@
-# Text Align
+# TextAlign
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-text-align
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-text-align
 ```
 
+## Settings
+*None*
+
+## Commands
+*None*
+
+## Keyboard shortcuts
+*None*
+
 ## Source code
 [packages/extension-text-align/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)
 

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

@@ -1,17 +0,0 @@
-# TodoItem
-It renders a single toggleable item of a list.
-
-::: warning Restrictions
-This extensions is intended to be used with the `TodoList` extension.
-:::
-
-## Settings
-| Option | Type    | Default | Description                           |
-| ------ | ------- | ------- | ------------------------------------- |
-| nested | Boolean | false   | Specifies if you can nest todo lists. |
-
-## Commands
-*None*
-
-## Keyboard shortcuts
-*None*

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

@@ -1,69 +0,0 @@
-# TodoList
-Renders a toggleable list of items.
-
-::: warning Restrictions
-This extensions is intended to be used with the `TodoItem` extension.
-:::
-
-## Settings
-*None*
-
-## Commands
-| Command   | Options | Description       |
-| --------- | ------- | ----------------- |
-| todo_list | —       | Toggle todo list. |
-
-## Keyboard shortcuts
-*None*
-
-## Usage
-```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: [
-          TodoItem({
-            nested: true,
-          }),
-          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>
-```

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

@@ -0,0 +1,17 @@
+# Typography
+
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/typography
+
+# with Yarn
+yarn add @tiptap/typography
+```
+
+## Source code
+[packages/typography/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/typography/)
+
+## Usage
+<demo name="Extensions/Typography" highlight="" />

docs/src/docPages/api/keyboard-shortcuts.md

@@ -1,8 +1,85 @@
 # Keyboard Shortcuts
 
-## Table of Contents
+## toc
 
 ## Introduction
+tiptap comes with sensible keyboard shortcut defaults. Depending on what you want to use it for, you’ll probably want to change those keyboard shortcuts to your liking. Let’s have a look at what we defined for you, and show you how to change it then!
+
+Funfact: A while ago, we built a [keyboard shortcut learning app](https://mouseless.app), to which we manually added exercises for thousands of keyboard shortcuts for a bunch of tools.
+
+## Predefined keyboard shortcuts
+Most of the core extensions register their own keyboard shortcuts. Depending on what set of extension you use, not all of the below listed keyboard shortcuts work for your editor.
+
+### Essentials
+❌ = untested
+
+| Action                   | Windows/Linux                   | macOS                       |
+| ------------------------ | ------------------------------- | --------------------------- |
+| Copy                     | `Control` `C`              | `Cmd` `C`              |
+| Cut                      | `Control` `X`              | `Cmd` `X`              |
+| Paste                    | `Control` `V`              | `Cmd` `V`              |
+| Paste without formatting | `Control` `Shift` `V` | `Cmd` `Shift` `V` |
+| Undo                     | `Control` `Z`              | `Cmd` `Z`              |
+| Redo                     | `Control` `Shift` `Z` | `Cmd` `Shift` `Z` |
+| ❌ Insert or edit link    | `Control` `K`              | `Cmd` `K`              |
+| ❌ Open link              | `Alt` `Enter`              | `Alt` `Enter`          |
+| ❌ Find                   | `Control` `F`              | `Cmd` `F`              |
+| ❌ Find and replace       | `Control` `H`              | `Cmd` `Shift` `H` |
+| ❌ Find again             | `Control` `G`              | `Cmd` `G`              |
+| ❌ Find previous          | `Control` `Shift` `G` | `Cmd` `Shift` `G` |
+| ❌ Repeat last action     | `Control` `Y`              | `Cmd` `Y`              |
+| Add a line break         | `Shift` `Enter`            | `Shift` `Enter`        |
+
+### Text Formatting
+| Action                  | Windows/Linux                                | macOS                       |
+| ----------------------- | -------------------------------------------- | --------------------------- |
+| Bold                    | `Control` `B`                           | `Cmd` `B`              |
+| Italicize               | `Control` `I`                           | `Cmd` `I`              |
+| Underline               | `Control` `U`                           | `Cmd` `U`              |
+| ❌ Strikethrough         | `Alt` `Shift` `5`                  | `Cmd` `Shift` `X` |
+| ❌ Superscript           | `Control` `.`                           | `Cmd` `.`              |
+| ❌ Subscript             | `Control` `,`                           | `Cmd` `,`              |
+| ❌ Copy text formatting  | `Control` `Alt` `C`                | `Cmd` `Alt` `C`   |
+| ❌ Paste text formatting | `Control` `Alt` `V`                | `Cmd` `Alt` `V`   |
+| ❌ Clear text formatting | `Control`&nbsp;`\`<br>`Control`&nbsp;`Space` | `Cmd`&nbsp;`\`              |
+| ❌ Increase font size    | `Control`&nbsp;`Shift`&nbsp;`>`              | `Cmd`&nbsp;`Shift`&nbsp;`>` |
+| ❌ Decrease font size    | `Control`&nbsp;`Shift`&nbsp;`<`              | `Cmd`&nbsp;`Shift`&nbsp;`<` |
+
+### Paragraph Formatting
+| Action                           | Windows/Linux                   | macOS                           |
+| -------------------------------- | ------------------------------- | ------------------------------- |
+| ❌ Increase paragraph indentation | `Control`&nbsp;`]`              | `Cmd`&nbsp;`]`                  |
+| ❌ Decrease paragraph indentation | `Control`&nbsp;`[`              | `Cmd`&nbsp;`[`                  |
+| Apply normal text style          | `Control`&nbsp;`Alt`&nbsp;`0`   | `Cmd`&nbsp;`Alt`&nbsp;`0`       |
+| Apply heading style 1            | `Control`&nbsp;`Alt`&nbsp;`1`   | `Cmd`&nbsp;`Alt`&nbsp;`1`       |
+| Apply heading style 2            | `Control`&nbsp;`Alt`&nbsp;`2`   | `Cmd`&nbsp;`Alt`&nbsp;`2`       |
+| Apply heading style 3            | `Control`&nbsp;`Alt`&nbsp;`3`   | `Cmd`&nbsp;`Alt`&nbsp;`3`       |
+| Apply heading style 4            | `Control`&nbsp;`Alt`&nbsp;`4`   | `Cmd`&nbsp;`Alt`&nbsp;`4`       |
+| Apply heading style 5            | `Control`&nbsp;`Alt`&nbsp;`5`   | `Cmd`&nbsp;`Alt`&nbsp;`5`       |
+| Apply heading style 6            | `Control`&nbsp;`Alt`&nbsp;`6`   | `Cmd`&nbsp;`Alt`&nbsp;`6`       |
+| Left align                       | `Control`&nbsp;`Shift`&nbsp;`L` | `Cmd`&nbsp;`Shift`&nbsp;`L`     |
+| Center align                     | `Control`&nbsp;`Shift`&nbsp;`E` | `Cmd`&nbsp;`Shift`&nbsp;`E`     |
+| Right align                      | `Control`&nbsp;`Shift`&nbsp;`R` | `Cmd`&nbsp;`Shift`&nbsp;`R`     |
+| Justify                          | `Control`&nbsp;`Shift`&nbsp;`J` | `Cmd`&nbsp;`Shift`&nbsp;`J`     |
+| ❌ Numbered list                  | `Control`&nbsp;`Shift`&nbsp;`7` | `Cmd`&nbsp;`Shift`&nbsp;`7`     |
+| ❌ Bulleted list                  | `Control`&nbsp;`Shift`&nbsp;`8` | `Cmd`&nbsp;`Shift`&nbsp;`8`     |
+| ❌ Move paragraph up              | `Control`&nbsp;`Shift`&nbsp;`↑` | `Control`&nbsp;`Shift`&nbsp;`↑` |
+| ❌ Move paragraph down            | `Control`&nbsp;`Shift`&nbsp;`↓` | `Control`&nbsp;`Shift`&nbsp;`↓` |
+
+### Text Selection
+| Action                                            | Windows/Linux                   | macOS                       |
+| ------------------------------------------------- | ------------------------------- | --------------------------- |
+| Select all                                        | `Control`&nbsp;`A`              | `Cmd`&nbsp;`A`              |
+| Extend selection one character to left            | `Shift`&nbsp;`←`                | `Shift`&nbsp;`←`            |
+| Extend selection one character to right           | `Shift`&nbsp;`→`                | `Shift`&nbsp;`→`            |
+| Extend selection one line up                      | `Shift`&nbsp;`↑`                | `Shift`&nbsp;`↑`            |
+| Extend selection one line down                    | `Shift`&nbsp;`↓`                | `Shift`&nbsp;`↓`            |
+| ❌ Extend selection one paragraph up               | `Alt`&nbsp;`Shift`&nbsp;`↑`     | `Alt`&nbsp;`Shift`&nbsp;`↑` |
+| ❌ Extend selection one paragraph down             | `Alt`&nbsp;`Shift`&nbsp;`↓`     | `Alt`&nbsp;`Shift`&nbsp;`↓` |
+| Extend selection to the beginning of the document | `Control`&nbsp;`Shift`&nbsp;`↑` | `Cmd`&nbsp;`Shift`&nbsp;`↑` |
+| ❌ Extend selection to the end of the document     | `Control`&nbsp;`Shift`&nbsp;`↓` | `Cmd`&nbsp;`Shift`&nbsp;`↓` |
+
+## Overwrite keyboard shortcuts
 Keyboard shortcuts may be strings like `'Shift-Control-Enter'`. Keys are based on the strings that can appear in `event.key`, concatenated with a `-`. There is a little tool called [keycode.info](https://keycode.info/), which shows the `event.key` interactively.
 
 Use lowercase letters to refer to letter keys (or uppercase letters if you want shift to be held). You may use `Space` as an alias for the <code>&nbsp;</code>.
@@ -11,94 +88,27 @@ Modifiers can be given in any order. `Shift`, `Alt`, `Control` and `Cmd` are rec
 
 You can use `Mod` as a shorthand for `Cmd` on Mac and `Control` on other platforms.
 
-## Overwrite keyboard shortcuts
+Here is an example how you can overwrite the keyboard shortcuts for an existing extension:
 
 ```js
 // 1. Import the extension
 import BulletList from '@tiptap/extension-bullet-list'
 
 // 2. Overwrite the keyboard shortcuts
-const CustomBulletList = BulletList()
+const CustomBulletList = BulletList.extend({
-  .keys(({ editor }) => ({
+  addKeyboardShortcuts() {
-    // ↓ your new keyboard shortcut
+    return {
-    'Mod-l': () => editor.bulletList(),
+      // ↓ your new keyboard shortcut
-  }))
+      'Mod-l': () => this.editor.bulletList(),
-  .create() // Don’t forget that!
+    }
+  },
+})
 
 // 3. Add the custom extension to your editor
 new Editor({
   extensions: [
-      CustomBulletList(),
+    CustomBulletList(),
-      // …
+    // …
   ]
 })
 ```
-
-## Predefined keyboard shortcuts
-
-### Essentials
-| Action                   | Windows/Linux         | macOS             |
-| ------------------------ | --------------------- | ----------------- |
-| Copy                     | `Control`&nbsp;`C`         | `Cmd`&nbsp;`C`         |
-| Cut                      | `Control`&nbsp;`X`         | `Cmd`&nbsp;`X`         |
-| Paste                    | `Control`&nbsp;`V`         | `Cmd`&nbsp;`V`         |
-| Paste without formatting | `Control`&nbsp;`Shift`&nbsp;`V` | `Cmd`&nbsp;`Shift`&nbsp;`V` |
-| Undo                     | `Control`&nbsp;`Z`         | `Cmd`&nbsp;`Z`         |
-| Redo                     | `Control`&nbsp;`Shift`&nbsp;`Z` | `Cmd`&nbsp;`Shift`&nbsp;`Z` |
-| Insert or edit link      | `Control`&nbsp;`K`         | `Cmd`&nbsp;`K`         |
-| Open link                | `Alt`&nbsp;`Enter`         | `Alt`&nbsp;`Enter`     |
-| Find                     | `Control`&nbsp;`F`         | `Cmd`&nbsp;`F`         |
-| Find and replace         | `Control`&nbsp;`H`         | `Cmd`&nbsp;`Shift`&nbsp;`H` |
-| Find again               | `Control`&nbsp;`G`         | `Cmd`&nbsp;`G`         |
-| Find previous            | `Control`&nbsp;`Shift`&nbsp;`G` | `Cmd`&nbsp;`Shift`&nbsp;`G` |
-| Repeat last action       | `Control`&nbsp;`Y`         | `Cmd`&nbsp;`Y`         |
-| Add a line break         | `Shift`&nbsp;`Enter`       | `Shift`&nbsp;`Enter`   |
-
-### Text Formatting
-| Action                | Windows/Linux                                 | macOS             |
-| --------------------- | --------------------------------------------- | ----------------- |
-| Bold                  | `Control`&nbsp;`B`                                 | `Cmd`&nbsp;`B`         |
-| Italicize             | `Control`&nbsp;`I`                                 | `Cmd`&nbsp;`I`         |
-| Underline             | `Control`&nbsp;`U`                                 | `Cmd`&nbsp;`U`         |
-| Strikethrough         | `Alt`&nbsp;`Shift`&nbsp;`5`                             | `Cmd`&nbsp;`Shift`&nbsp;`X` |
-| Superscript           | `Control`&nbsp;`.`                                 | `Cmd`&nbsp;`.`         |
-| Subscript             | `Control`&nbsp;`,`                                 | `Cmd`&nbsp;`,`         |
-| Copy text formatting  | `Control`&nbsp;`Alt`&nbsp;`C`                           | `Cmd`&nbsp;`Alt`&nbsp;`C`   |
-| Paste text formatting | `Control`&nbsp;`Alt`&nbsp;`V`                           | `Cmd`&nbsp;`Alt`&nbsp;`V`   |
-| Clear text formatting | `Control`&nbsp;<code>\</code><br>`Control`&nbsp;`Space` | `Cmd`&nbsp;`\`         |
-| Increase font size    | `Control`&nbsp;`Shift`&nbsp;`>`                         | `Cmd`&nbsp;`Shift`&nbsp;`>` |
-| Decrease font size    | `Control`&nbsp;`Shift`&nbsp;`<`                         | `Cmd`&nbsp;`Shift`&nbsp;`<` |
-
-### Paragraph Formatting
-| Action                         | Windows/Linux         | macOS                 |
-| ------------------------------ | --------------------- | --------------------- |
-| Increase paragraph indentation | `Control`&nbsp;`]`         | `Cmd`&nbsp;`]`             |
-| Decrease paragraph indentation | `Control`&nbsp;`[`         | `Cmd`&nbsp;`[`             |
-| Apply normal text style        | `Control`&nbsp;`Alt`&nbsp;`0`   | `Cmd`&nbsp;`Alt`&nbsp;`0`       |
-| Apply heading style 1          | `Control`&nbsp;`Alt`&nbsp;`1`   | `Cmd`&nbsp;`Alt`&nbsp;`1`       |
-| Apply heading style 2          | `Control`&nbsp;`Alt`&nbsp;`2`   | `Cmd`&nbsp;`Alt`&nbsp;`2`       |
-| Apply heading style 3          | `Control`&nbsp;`Alt`&nbsp;`3`   | `Cmd`&nbsp;`Alt`&nbsp;`3`       |
-| Apply heading style 4          | `Control`&nbsp;`Alt`&nbsp;`4`   | `Cmd`&nbsp;`Alt`&nbsp;`4`       |
-| Apply heading style 5          | `Control`&nbsp;`Alt`&nbsp;`5`   | `Cmd`&nbsp;`Alt`&nbsp;`5`       |
-| Apply heading style 6          | `Control`&nbsp;`Alt`&nbsp;`6`   | `Cmd`&nbsp;`Alt`&nbsp;`6`       |
-| Left align                     | `Control`&nbsp;`Shift`&nbsp;`L` | `Cmd`&nbsp;`Shift`&nbsp;`L`     |
-| Center align                   | `Control`&nbsp;`Shift`&nbsp;`E` | `Cmd`&nbsp;`Shift`&nbsp;`E`     |
-| Right align                    | `Control`&nbsp;`Shift`&nbsp;`R` | `Cmd`&nbsp;`Shift`&nbsp;`R`     |
-| Justify                        | `Control`&nbsp;`Shift`&nbsp;`J` | `Cmd`&nbsp;`Shift`&nbsp;`J`     |
-| Numbered list                  | `Control`&nbsp;`Shift`&nbsp;`7` | `Cmd`&nbsp;`Shift`&nbsp;`7`     |
-| Bulleted list                  | `Control`&nbsp;`Shift`&nbsp;`8` | `Cmd`&nbsp;`Shift`&nbsp;`8`     |
-| Move paragraph up              | `Control`&nbsp;`Shift`&nbsp;`↑` | `Control`&nbsp;`Shift`&nbsp;`↑` |
-| Move paragraph down            | `Control`&nbsp;`Shift`&nbsp;`↓` | `Control`&nbsp;`Shift`&nbsp;`↓` |
-
-### Text Selection
-| Action                                            | Windows/Linux         | macOS             |
-| ------------------------------------------------- | --------------------- | ----------------- |
-| Select all                                        | `Control`&nbsp;`A`         | `Cmd`&nbsp;`A`         |
-| Extend selection one character to left            | `Shift`&nbsp;`←`           | `Shift`&nbsp;`←`       |
-| Extend selection one character to right           | `Shift`&nbsp;`→`           | `Shift`&nbsp;`→`       |
-| Extend selection one line up                      | `Shift`&nbsp;`↑`           | `Shift`&nbsp;`↑`       |
-| Extend selection one line down                    | `Shift`&nbsp;`↓`           | `Shift`&nbsp;`↓`       |
-| Extend selection one paragraph up                 | `Alt`&nbsp;`Shift`&nbsp;`↑`     | `Alt`&nbsp;`Shift`&nbsp;`↑` |
-| Extend selection one paragraph down               | `Alt`&nbsp;`Shift`&nbsp;`↓`     | `Alt`&nbsp;`Shift`&nbsp;`↓` |
-| Extend selection to the beginning of the document | `Control`&nbsp;`Shift`&nbsp;`↑` | `Cmd`&nbsp;`Shift`&nbsp;`↑` |
-| Extend selection to the end of the document       | `Control`&nbsp;`Shift`&nbsp;`↓` | `Cmd`&nbsp;`Shift`&nbsp;`↓` |

docs/src/docPages/api/marks.md

@@ -0,0 +1,15 @@
+# Marks
+
+## toc
+
+## Introduction
+
+## List of supported marks
+| Title                             | Default Extension | Source Code                                                                                 |
+| --------------------------------- | ----------------- | ------------------------------------------------------------------------------------------- |
+| [Bold](/api/marks/bold)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)      |
+| [Code](/api/marks/code)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)      |
+| [Italic](/api/marks/italic)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)    |
+| [Link](/api/marks/link)           | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)      |
+| [Strike](/api/marks/strike)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)    |
+| [Underline](/api/marks/underline) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/) |

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bold
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bold
 ```
 
@@ -22,7 +22,7 @@ yarn add @tiptap/extension-bold
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description     |
+| Command | Parameters | Description     |
 | ------- | ------- | --------------- |
 | bold    | —       | Mark text bold. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-bold
 [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
 
 ## Usage
-<demo name="Extensions/Bold" highlight="3-5,17,36" />
+<demo name="Marks/Bold" highlight="3-5,17,36" />

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

@@ -5,10 +5,10 @@ Type something with <code>\`back-ticks around\`</code> and it will magically tra
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code
 ```
 
@@ -18,7 +18,7 @@ yarn add @tiptap/extension-code
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description               |
+| Command | Parameters | Description               |
 | ------- | ------- | ------------------------- |
 | code    | —       | Mark text as inline code. |
 
@@ -29,4 +29,4 @@ yarn add @tiptap/extension-code
 [packages/extension-code/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code/)
 
 ## Usage
-<demo name="Extensions/Code" highlight="3-5,17,36" />
+<demo name="Marks/Code" highlight="3-5,17,36" />

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-italic
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-italic
 ```
 
@@ -22,7 +22,7 @@ yarn add @tiptap/extension-italic
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description       |
+| Command | Parameters | Description       |
 | ------- | ------- | ----------------- |
 | italic  | —       | Mark text italic. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-italic
 [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
 
 ## Usage
-<demo name="Extensions/Italic" highlight="3-5,17,36" />
+<demo name="Marks/Italic" highlight="3-5,17,36" />

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

@@ -7,10 +7,10 @@ Pasted URLs will be linked automatically.
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-link
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-link
 ```
 
@@ -23,17 +23,17 @@ yarn add @tiptap/extension-link
 | target      | string  | _blank                       | Set the default `target` of links.           |
 
 ## Commands
-| Command | Options        | Description                                                 |
+| Command | Parameters     | Description                                                 |
 | ------- | -------------- | ----------------------------------------------------------- |
 | link    | href<br>target | Link the selected text. Removes a link, if `href` is empty. |
 
 ## Keyboard shortcuts
 :::warning Doesn’t have a keyboard shortcut
-This extension doesn’t bind a specific keyboard shortcut. You would probably open your UI on `Mod-k` though.
+This extension doesn’t bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though.
 :::
 
 ## Source code
 [packages/extension-link/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-link/)
 
 ## Usage
-<demo name="Extensions/Link" highlight="3-8,19,38,55" />
+<demo name="Marks/Link" highlight="3-8,19,38,55" />

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<s>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-strike
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-strike
 ```
 
@@ -22,7 +22,7 @@ yarn add @tiptap/extension-strike
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command | Options | Description                 |
+| Command | Parameters | Description                 |
 | ------- | ------- | --------------------------- |
 | strike  | —       | Mark text as strikethrough. |
 
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-strike
 [packages/extension-strike/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-strike/)
 
 ## Usage
-<demo name="Extensions/Strike" highlight="3-5,17,36" />
+<demo name="Marks/Strike" highlight="3-5,17,36" />

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

@@ -9,10 +9,10 @@ The extension will generate the corresponding `<u>` HTML tags when reading conte
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-underline
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-underline
 ```
 
@@ -22,9 +22,9 @@ yarn add @tiptap/extension-underline
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command   | Options | Description              |
+| Command   | Parameters | Description              |
-| --------- | ------- | ------------------------ |
+| --------- | ---------- | ------------------------ |
-| underline | —       | Mark text as underlined. |
+| underline | —          | Mark text as underlined. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control`&nbsp;`U`
@@ -34,4 +34,4 @@ yarn add @tiptap/extension-underline
 [packages/extension-underline/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-underline/)
 
 ## Usage
-<demo name="Extensions/Underline" highlight="3-5,17,36" />
+<demo name="Marks/Underline" highlight="3-5,17,36" />

docs/src/docPages/api/nodes.md

@@ -0,0 +1,23 @@
+# Nodes
+
+## toc
+
+## Introduction
+
+## List of supported nodes
+| Title                                        | Default Extension | Source Code                                                                                       |
+| -------------------------------------------- | ----------------- | ------------------------------------------------------------------------------------------------- |
+| [Blockquote](/api/nodes/blockquote)          | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)      |
+| [BulletList](/api/nodes/bullet-list)         | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)     |
+| [CodeBlock](/api/nodes/code-block)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)      |
+| [Document](/api/nodes/document)              | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)        |
+| [HardBreak](/api/nodes/hard-break)           | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)      |
+| [Heading](/api/nodes/heading)                | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)         |
+| [HorizontalRule](/api/nodes/horizontal-rule) | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/) |
+| [Image](/api/nodes/image)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)           |
+| [ListItem](/api/nodes/list-item)             | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)       |
+| [OrderedList](/api/nodes/ordered-list)       | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)    |
+| [Paragraph](/api/nodes/paragraph)            | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)       |
+| [TaskItem](/api/nodes/task-item)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)       |
+| [TaskList](/api/nodes/task-list)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)       |
+| [Text](/api/nodes/text)                      | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)            |

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

@@ -6,10 +6,10 @@ Type <code>>&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-blockquote
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-blockquote
 ```
 
@@ -19,9 +19,9 @@ yarn add @tiptap/extension-blockquote
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command    | Options | Description                   |
+| Command    | Parameters | Description                   |
-| ---------- | ------- | ----------------------------- |
+| ---------- | ---------- | ----------------------------- |
-| blockquote | —       | Wrap content in a blockquote. |
+| blockquote | —          | Wrap content in a blockquote. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control`&nbsp;`Shift`&nbsp;`9`
@@ -31,4 +31,4 @@ yarn add @tiptap/extension-blockquote
 [packages/extension-blockquote/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-blockquote/)
 
 ## Usage
-<demo name="Extensions/Blockquote" highlight="3-5,17,36" />
+<demo name="Nodes/Blockquote" highlight="3-5,17,36" />

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

@@ -1,18 +1,18 @@
 # BulletList
-This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags,
+This extension enables you to use bullet lists in the editor. They are rendered as `<ul>` HTML tags.
 
 Type <code>*&nbsp;</code>, <code>-&nbsp;</code> or <code>+&nbsp;</code> at the beginning of a new line and it will magically transform to a bullet list.
 
 ## Installation
 ::: warning Use with ListItem
-The `BulletList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+This extension requires the [`ListItem`](/api/nodes/list-item) extension.
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-bullet-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 ```
 
@@ -22,9 +22,9 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command     | Options | Description           |
+| Command     | Parameters | Description           |
-| ----------- | ------- | --------------------- |
+| ----------- | ---------- | --------------------- |
-| bullet_list | —       | Toggle a bullet list. |
+| bulletList | —          | Toggle a bullet list. |
 
 ## Keyboard shortcuts
 * `Control`&nbsp;`Shift`&nbsp;`8`
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-bullet-list @tiptap/extension-list-item
 [packages/extension-bullet-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/)
 
 ## Usage
-<demo name="Extensions/BulletList" highlight="3-5,17-18,37-38" />
+<demo name="Nodes/BulletList" highlight="3-5,17-18,37-38" />

docs/src/docPages/api/nodes/code-block.md

@@ -9,10 +9,10 @@ The CodeBlock extension doesn’t come with styling and has no syntax highlighti
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-code-block
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-code-block
 ```
 
@@ -23,9 +23,9 @@ yarn add @tiptap/extension-code-block
 | languageClassPrefix | string | language- | Adds a prefix to language classes that are applied to code tags. |
 
 ## Commands
-| Command   | Options | Description                   |
+| Command   | Parameters | Description                   |
-| --------- | ------- | ----------------------------- |
+| --------- | ---------- | ----------------------------- |
-| codeBlock | —       | Wrap content in a code block. |
+| codeBlock | —          | Wrap content in a code block. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control` `Shift` `C`
@@ -35,4 +35,4 @@ yarn add @tiptap/extension-code-block
 [packages/extension-code-block/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-code-block/)
 
 ## Usage
-<demo name="Extensions/CodeBlock" highlight="3-5,17,36" />
+<demo name="Nodes/CodeBlock" highlight="3-5,17,36" />

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

@@ -4,15 +4,15 @@
 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.
+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.
 :::
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-document
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-document
 ```
 
@@ -20,4 +20,4 @@ yarn add @tiptap/extension-document
 [packages/extension-document/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-document/)
 
 ## Usage
-<demo name="Extensions/Document" highlight="10,28" />
+<demo name="Nodes/Document" highlight="10,28" />

docs/src/docPages/api/nodes/hard-break.md

@@ -3,20 +3,17 @@ The HardBreak extensions adds support for the `<br>` HTML tag, which forces a li
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-hard-break
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-hard-break
 ```
 
-## Settings
-*None*
-
 ## Commands
-| Command   | Options | Description       |
+| Command   | Parameters | Description       |
-| --------- | ------- | ----------------- |
+| --------- | ---------- | ----------------- |
-| hardBreak | —       | Add a line break. |
+| hardBreak | —          | Add a line break. |
 
 ## Keyboard shortcuts
 * `Shift`&nbsp;`Enter`
@@ -27,4 +24,4 @@ yarn add @tiptap/extension-hard-break
 [packages/extension-hard-break/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-hard-break/)
 
 ## Usage
-<demo name="Extensions/HardBreak" highlight="3-5,17,36" />
+<demo name="Nodes/HardBreak" highlight="3-5,17,36" />

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

@@ -5,10 +5,10 @@ Type <code>#&nbsp;</code> at the beginning of a new line and it will magically t
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-heading
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-heading
 ```
 
@@ -19,9 +19,9 @@ yarn add @tiptap/extension-heading
 | levels | Array  | [1, 2, 3, 4, 5, 6] | Specifies which heading levels are supported. |
 
 ## Commands
-| Command | Options | Description             |
+| Command | Parameters | Description                                      |
-| ------- | ------- | ----------------------- |
+| ------- | ---------- | ------------------------------------------------ |
-| heading | level   | Creates a heading node. |
+| heading | level      | Creates a heading node with the specified level. |
 
 ## Keyboard shortcuts
 * Windows/Linux: `Control`&nbsp;`Alt`&nbsp;`1-6`
@@ -31,4 +31,4 @@ yarn add @tiptap/extension-heading
 [packages/extension-heading/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-heading/)
 
 ## Usage
-<demo name="Extensions/Heading" highlight="3-11,23,42-44" />
+<demo name="Nodes/Heading" highlight="3-11,23,42-44" />

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

@@ -5,10 +5,10 @@ Type three dashes (<code>---</code>) or three underscores and a space (<code>___
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-horizontal-rule
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-horizontal-rule
 ```
 
@@ -18,9 +18,9 @@ yarn add @tiptap/extension-horizontal-rule
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command         | Options | Description               |
+| Command        | Parameters | Description               |
-| --------------- | ------- | ------------------------- |
+| -------------- | ---------- | ------------------------- |
-| horizontalRule | —       | Create a horizontal rule. |
+| horizontalRule | —          | Create a horizontal rule. |
 
 ## Keyboard shortcuts
 *None*
@@ -29,4 +29,4 @@ yarn add @tiptap/extension-horizontal-rule
 [packages/extension-horizontal-rule/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-horizontal-rule/)
 
 ## Usage
-<demo name="Extensions/HorizontalRule" highlight="3-5,17,36" />
+<demo name="Nodes/HorizontalRule" highlight="3-5,17,36" />

docs/src/docPages/api/nodes/image.md

@@ -0,0 +1,26 @@
+# Image
+Use this extension to render `<img>` HTML tags. By default, those images are blocks. If you want to render images in line with text  set the `inline` option to `true`.
+
+:::warning Restrictions
+This extension does only the rendering of images. It doesn’t upload images to your server, that’s a whole different story.
+:::
+
+## Installation
+```bash
+# with npm
+npm install @tiptap/extension-image
+
+# with Yarn
+yarn add @tiptap/extension-image
+```
+
+## Settings
+| Option | Type    | Default | Description                    |
+| ------ | ------- | ------- | ------------------------------ |
+| inline | boolean | false   | Renders the image node inline. |
+
+## Source code
+[packages/extension-image/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-image/)
+
+## Usage
+<demo name="Nodes/Image" />

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

@@ -2,15 +2,15 @@
 The ListItem extension adds support for the `<li>` HTML tag. It’s used for bullet lists and ordered lists and can’t really be used without them.
 
 ## Installation
-::: warning Restrictions
+::: warning Use with BulletList and/or OrderedList
-This extensions is intended to be used with the [`BulletList`](/api/extensions/bullet-list) or [`OrderedList`](/api/extensions/ordered-list) extension. It doesn’t work without at least using one of them.
+This extension requires the [`BulletList`](/api/nodes/bullet-list) or [`OrderedList`](/api/nodes/ordered-list) extension.
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-list-item
 ```
 
@@ -19,9 +19,6 @@ yarn add @tiptap/extension-list-item
 | ------ | ------ | ------- | -------------------------------------------- |
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
-## Commands
-*None*
-
 ## Keyboard shortcuts
 * New list item: `Enter`
 * Sink a list item: `Tab`
@@ -31,4 +28,4 @@ yarn add @tiptap/extension-list-item
 [packages/extension-list-item/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-list-item/)
 
 ## Usage
-<demo name="Extensions/ListItem" highlight="3-8,20-22,41-43" />
+<demo name="Nodes/ListItem" highlight="3-8,20-22,41-43" />

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

@@ -1,18 +1,18 @@
 # OrderedList
-This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags,
+This extension enables you to use ordered lists in the editor. They are rendered as `<ol>` HTML tags.
 
 Type <code>1.&nbsp;</code> (or any other number followed by a dot) at the beginning of a new line and it will magically transform to a ordered list.
 
 ## Installation
 ::: warning Use with ListItem
-The `OrderedList` extension is intended to be used with the [`ListItem`](/api/extensions/list-item) extension. Make sure to import that one too, otherwise you’ll get a SyntaxError.
+This extension requires the [`ListItem`](/api/nodes/list-item) extension.
 :::
 
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-ordered-list @tiptap/extension-list-item
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 ```
 
@@ -22,9 +22,9 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command      | Options | Description            |
+| Command     | Parameters | Description             |
-| ------------ | ------- | ---------------------- |
+| ----------- | ---------- | ----------------------- |
-| ordered_list | —       | Toggle a ordered list. |
+| orderedList | —          | Toggle an ordered list. |
 
 ## Keyboard shortcuts
 * `Control`&nbsp;`Shift`&nbsp;`9`
@@ -33,4 +33,4 @@ yarn add @tiptap/extension-ordered-list @tiptap/extension-list-item
 [packages/extension-ordered-list/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-ordered-list/)
 
 ## Usage
-<demo name="Extensions/OrderedList" highlight="3-5,17-18,37-38" />
+<demo name="Nodes/OrderedList" highlight="3-5,17-18,37-38" />

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

@@ -2,15 +2,15 @@
 Yes, the schema is very strict. Without this extension you won’t even be able to use paragraphs in the editor.
 
 :::warning Breaking Change from 1.x → 2.x
-Tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
+tiptap 1 tried to hide that node from you, but it has always been there. You have to explicitly import it from now on (or use `defaultExtensions()`).
 :::
 
 ## Installation
 ```bash
-# With npm
+# with npm
 npm install @tiptap/extension-paragraph
 
-# Or: With Yarn
+# with Yarn
 yarn add @tiptap/extension-paragraph
 ```
 
@@ -20,9 +20,9 @@ yarn add @tiptap/extension-paragraph
 | class  | string | –       | Add a custom class to the rendered HTML tag. |
 
 ## Commands
-| Command   | Options | Description                                  |
+| Command   | Parameters | Description                                  |
-| --------- | ------- | -------------------------------------------- |
+| --------- | ---------- | -------------------------------------------- |
-| paragraph | —       | Transforms all selected nodes to paragraphs. |
+| paragraph | —          | Transforms all selected nodes to paragraphs. |
 
 ## Keyboard shortcuts
 * Windows & Linux: `Control` `Alt` `0`
@@ -32,4 +32,4 @@ yarn add @tiptap/extension-paragraph
 [packages/extension-paragraph/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-paragraph/)
 
 ## Usage
-<demo name="Extensions/Paragraph" highlight="11,29" />
+<demo name="Nodes/Paragraph" highlight="11,29" />