From 48cbca07ddcad81eaf8ca9942fc0dcbada8333fd Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Wed, 20 Jan 2021 17:58:53 +0100
Subject: [PATCH] docs: update content

---
 docs/src/components/Demo/index.vue            |   1 +
 docs/src/demos/Nodes/Mention/index.vue        |  14 +-
 docs/src/docPages/api/extensions.md           |   7 +
 docs/src/docPages/api/nodes/mention.md        |  21 +-
 docs/src/docPages/api/schema.md               |   9 +
 docs/src/docPages/guide/build-extensions.md   | 416 +-----------------
 docs/src/docPages/guide/extend-extensions.md  | 410 +++++++++++++++++
 docs/src/docPages/guide/extend.md             | 410 +++++++++++++++++
 .../docPages/guide/getting-started/react.md   |   7 +
 docs/src/links.yaml                           |  18 +-
 10 files changed, 874 insertions(+), 439 deletions(-)
 create mode 100644 docs/src/docPages/guide/extend-extensions.md
 create mode 100644 docs/src/docPages/guide/extend.md
 create mode 100644 docs/src/docPages/guide/getting-started/react.md

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index 30e33d15..0c58e9c8 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -4,6 +4,7 @@
     <react-renderer :component="mainFile" v-if="mode === 'react'" />
   </div>
   <div class="demo" v-else>
+    {{ mainFile }}
     <template v-if="mainFile">
       <div class="demo__preview">
         <component :is="mainFile" v-if="mode === 'vue'" />
diff --git a/docs/src/demos/Nodes/Mention/index.vue b/docs/src/demos/Nodes/Mention/index.vue
index 8c2bc2df..6829642f 100644
--- a/docs/src/demos/Nodes/Mention/index.vue
+++ b/docs/src/demos/Nodes/Mention/index.vue
@@ -38,7 +38,7 @@ export default {
             items: query => {
               return [
                 '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',
-              ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 5)
+              ].filter(item => item.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
             },
             render: () => {
               let component
@@ -81,7 +81,11 @@ export default {
         }),
       ],
       content: `
-        <p>Hi <span data-mention="Winona Ryder"></span> and <span data-mention="Axl Rose"></span>! Don’t forget the daily stand up at 8 AM.</p>
+        <p>Hi everyone! Don’t forget the daily stand up at 8 AM.</p>
+        <p><span data-mention="Jennifer Grey"></span> Would you mind to share what you’ve been working on lately? We fear not much happened since Dirty Dancing.
+        <p><span data-mention="Winona Ryder"></span> <span data-mention="Axl Rose"></span> Let’s go through your most important points quickly.</p>
+        <p>I have a meeting with <span data-mention="Christina Applegate"></span> and don’t want to come late.</p>
+        <p>– Thanks, your big boss</p>
       `,
     })
   },
@@ -93,6 +97,12 @@ export default {
 </script>
 
 <style lang="scss">
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
 .mention {
   color: #A975FF;
   background-color: rgba(#A975FF, 0.1);
diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md
index bc634a50..a2f66e85 100644
--- a/docs/src/docPages/api/extensions.md
+++ b/docs/src/docPages/api/extensions.md
@@ -20,6 +20,13 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
 
 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).
 
+## How extensions work
+Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
+
+Existing [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions) can give you a good impression on how to approach your own extensions. To make it easier to switch between the documentation and the source code, we linked to the file on GitHub from every single extension documentation page.
+
+We recommend to start with customizing existing extensions first, and create your own extensions with the gained knowledge later. That’s why all the below examples extend existing extensions, but all examples will work on newly created extensions aswell.
+
 ## Create a new extension
 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:
 
diff --git a/docs/src/docPages/api/nodes/mention.md b/docs/src/docPages/api/nodes/mention.md
index 3ebb62c8..b1ed4cb4 100644
--- a/docs/src/docPages/api/nodes/mention.md
+++ b/docs/src/docPages/api/nodes/mention.md
@@ -1,4 +1,5 @@
 # Mention
+Honestly, the mention node is amazing. It adds support for `@mentions`, for example to ping users, and provides full control over the rendering.
 
 ## Installation
 ```bash
@@ -10,22 +11,10 @@ yarn add @tiptap/extension-mention
 ```
 
 ## Settings
-| Option         | Type     | Default                    | Description                                                                  |
-| -------------- | -------- | -------------------------- | ---------------------------------------------------------------------------- |
-| HTMLAttributes | `Object` | `{}`                       | Custom HTML attributes that should be added to the rendered HTML tag.        |
-| suggestion     | `Object` | `{ char: '@', command: … ` | [Suggestion utility](/api/utilities/suggestion) |
-
-## Settings for suggestions
-| Option          | Type       | Default        | Description                                                 |
-| --------------- | ---------- | -------------- | ----------------------------------------------------------- |
-| char            | `String`   | `'@'`          | The character that triggers the autocomplete popup.         |
-| allowSpaces     | `Boolean`  | `false`        | Allows or disallows spaces in suggested items.              |
-| startOfLine     | `Boolean`  | `false`        | Trigger the autocomplete popup at the start of a line only. |
-| decorationTag   | `String`   | `'span'`       | The HTML tag that should be rendered for the suggestion.    |
-| decorationClass | `String`   | `'suggestion'` | A CSS class that should be added to the suggestion.         |
-| command         | `Function` | `() => {}'`    | Executed when a suggestion is selected.                     |
-| items           | `Function` | `() => {}`     | Pass an array of filtered suggestions, can be async.        |
-| render          | `Function` | `() => ({})`   | A render function for the autocomplete popup.               |
+| Option         | Type     | Default | Description                                                           |
+| -------------- | -------- | ------- | --------------------------------------------------------------------- |
+| HTMLAttributes | `Object` | `{}`    | Custom HTML attributes that should be added to the rendered HTML tag. |
+| suggestion     | `Object` | `{ … }` | [Read more](/api/utilities/suggestion)                                |
 
 ## Source code
 [packages/extension-mention/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-mention/)
diff --git a/docs/src/docPages/api/schema.md b/docs/src/docPages/api/schema.md
index abf216cc..ff974210 100644
--- a/docs/src/docPages/api/schema.md
+++ b/docs/src/docPages/api/schema.md
@@ -154,6 +154,15 @@ Node.create({
 })
 ```
 
+One example is the [`Mention`](/api/nodes/mention) extension, which somehow looks like text, but behaves more like a single unit. As this doesn’t have editable text content, it’s empty when you copy such node. Good news though, you can control that. Here is the example from the [`Mention`](/api/nodes/mention) extension:
+
+```js
+// Used to convert an atom node to plain text
+renderText({ node }) {
+  return `@${node.attrs.id}`
+},
+```
+
 #### Selectable
 Besides the already visible text selection, there is an invisible node selection. If you want to make your nodes selectable, you can configure it like this:
 
diff --git a/docs/src/docPages/guide/build-extensions.md b/docs/src/docPages/guide/build-extensions.md
index 119cd228..47bdb873 100644
--- a/docs/src/docPages/guide/build-extensions.md
+++ b/docs/src/docPages/guide/build-extensions.md
@@ -3,421 +3,7 @@
 ## toc
 
 ## Introduction
-One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch.
-
-## How extensions work
-Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
-
-Existing [nodes](/api/nodes), [marks](/api/marks) and [extensions](/api/extensions) can give you a good impression on how to approach your own extensions. To make it easier to switch between the documentation and the source code, we linked to the file on GitHub from every single extension documentation page.
-
-We recommend to start with customizing existing extensions first, and create your own extensions with the gained knowledge later. That’s why all the below examples extend existing extensions, but all examples will work on newly created extensions aswell.
-
-## Customize existing extensions
-Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the part you would like to change. In that case, the keyboard shortcut, and just that.
-
-Every extension has an `extend()` method, which takes an object with everything you want to change or add to it. For the bespoken example, your code could like that:
-
-```js
-// 1. Import the extension
-import BulletList from '@tiptap/extension-bullet-list'
-
-// 2. Overwrite the keyboard shortcuts
-const CustomBulletList = BulletList.extend({
-  addKeyboardShortcuts() {
-    return {
-      'Mod-l': () => this.editor.commands.toggleBulletList(),
-    }
-  },
-})
-
-// 3. Add the custom extension to your editor
-new Editor({
-  extensions: [
-    CustomBulletList(),
-    // …
-  ]
-})
-```
-
-The same applies to every aspect of an existing extension, except to the name. Let’s look at all the things that you can change through the extend method. We focus on one aspect in every example, but you can combine all those examples and change multiple aspects in one `extend()` call too.
-
-### Name
-The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, we would recommended to copy the whole extension and change the name in all occurrences.
-
-The extension name is also part of the JSON. If you [store your content as JSON](/guide/store-content#option-1-json), you need to change the name there too.
-
-### Settings
-All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of tiptap for other developers, you can do it like that:
-
-```js
-import Heading from '@tiptap/extension-heading'
-
-const CustomHeading = Heading.extend({
-  defaultOptions: {
-    levels: [1, 2, 3],
-  },
-})
-```
-
-### Schema
-tiptap works with a strict schema, which configures how the content can be structured, nested, how it behaves and many more things. You [can change all aspects of the schema](/api/schema) for existing extensions. Let’s walk through a few common use cases.
-
-The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
-
-```js
-// Blockquotes must only include paragraphs
-import Blockquote from '@tiptap/extension-blockquote'
-
-const CustomBlockquote = Blockquote.extend({
-  content: 'paragraph*',
-})
-```
-
-The schema even allows to make your nodes draggable, that’s what the `draggable` option is for, which defaults to `false`.
-
-```js
-// Draggable paragraphs
-import Paragraph from '@tiptap/extension-paragraph'
-
-const CustomParagraph = Paragraph.extend({
-  draggable: true,
-})
-```
-
-That’s just two tiny examples, but [the underlying ProseMirror schema](https://prosemirror.net/docs/ref/#model.SchemaSpec) is really powerful. You should definitely read the documentation to understand all the nifty details.
-
-### Attributes
-You can use attributes to store additional information in the content. Let’s say you want to extend the default paragraph extension to enable paragraphs to have different colors:
-
-```js
-const CustomParagraph = Paragraph.extend({
-  addAttributes() {
-    // Return an object with attribute configuration
-    return {
-      color: {
-        default: 'pink',
-      },
-    },
-  },
-})
-
-// Result:
-// <p color="pink">Example Text</p>
-```
-
-That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed as attributes from the content.
-
-Let’s stick with the color example and assume you’ll want to add an inline style to actually color the text. With the `renderHTML` function you can return HTML attributes which will be rendered in the output.
-
-This examples adds a style HTML attribute based on the value of color:
-
-```js
-const CustomParagraph = Paragraph.extend({
-  addAttributes() {
-    return {
-      color: {
-        default: null,
-        // Take the attribute values
-        renderHTML: attributes => {
-          // … and return an object with HTML attributes.
-          return {
-            style: `color: ${attributes.color}`,
-          }
-        },
-      },
-    }
-  },
-})
-
-// Result:
-// <p style="color: pink">Example Text</p>
-```
-
-You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-color`, here’s how you would do that:
-
-```js
-const CustomParagraph = Paragraph.extend({
-  addAttributes() {
-    return {
-      color: {
-        default: null,
-        // Customize the HTML parsing (for example, to load the initial content)
-        parseHTML: element => {
-          return {
-            color: element.getAttribute('data-color'),
-          }
-        },
-        // … and customize the HTML rendering.
-        renderHTML: attributes => {
-          return {
-            'data-color': atttributes.color,
-            style: `color: ${attributes.color}`,
-          }
-        },
-      },
-    }
-  },
-})
-
-// Result:
-// <p data-color="pink" style="color: pink">Example Text</p>
-```
-
-You can disable the rendering of attributes, if you pass `rendered: false`.
-
-### Global Attributes
-Attributes can be applied to multiple extensions at once. That’s useful for text alignment, line height, color, font family, and other styling related attributes.
-
-Take a closer look at [the full source code](https://github.com/ueberdosis/tiptap-next/tree/main/packages/extension-text-align) of the [`TextAlign`](/api/extensions/text-align) extension to see a more complex example. But here is how it works in a nutshell:
-
-```js
-import { Extension } from '@tiptap/core'
-
-const TextAlign = Extension.create({
-  addGlobalAttributes() {
-    return [
-      {
-        // Extend the following extensions
-        types: [
-          'heading',
-          'paragraph',
-        ],
-        // … with those attributes
-        attributes: {
-          textAlign: {
-            default: 'left',
-            renderHTML: attributes => ({
-              style: `text-align: ${attributes.textAlign}`,
-            }),
-            parseHTML: element => ({
-              textAlign: element.style.textAlign || 'left',
-            }),
-          },
-        },
-      },
-    ]
-  },
-})
-```
-
-### Render HTML
-With the `renderHTML` function you can control how an extension is rendered to HTML. We pass an attributes object to it, with all local attributes, global attributes, and configured CSS classes. Here is an example from the `Bold` extension:
-
-```js
-renderHTML({ HTMLAttributes }) {
-  return ['strong', HTMLAttributes, 0]
-},
-```
-
-The first value in the array should be the name of HTML tag. If the second element is an object, it’s interpreted as a set of attributes. Any elements after that are rendered as children.
-
-The number zero (representing a hole) is used to indicate where the content should be inserted. Let’s look at the rendering of the `CodeBlock` extension with two nested tags:
-
-```js
-renderHTML({ HTMLAttributes }) {
-  return ['pre', ['code', HTMLAttributes, 0]]
-},
-```
-
-If you want to add some specific attributes there, import the `mergeAttributes` helper from `@tiptap/core`:
-
-```js
-renderHTML({ HTMLAttributes }) {
-  return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0]
-},
-```
-
-### Parse HTML
-The `parseHTML()` function tries to load the editor document from HTML. The function gets the HTML DOM element passed as a parameter, and is expected to return an object with attributes and their values. Here is a simplified example from the [`Bold`](/api/marks/bold) mark:
-
-```js
-  parseHTML() {
-    return [
-      {
-        tag: 'strong',
-      },
-    ]
-  },
-```
-
-This defines a rule to convert all `<strong>` tags to `Bold` marks. But you can get more advanced with this, here is the full example from the extension:
-
-```js
-  parseHTML() {
-    return [
-      // <strong>
-      {
-        tag: 'strong',
-      },
-      // <b>
-      {
-        tag: 'b',
-        getAttrs: node => node.style.fontWeight !== 'normal' && null,
-      },
-      // <span style="font-weight: bold">
-      {
-        style: 'font-weight',
-        getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
-      },
-    ]
-  },
-```
-
-This looks for `<strong>` and `<b>` tags, and any HTML tag with an inline style setting the `font-weight` to bold.
-
-As you can see, you can optionally pass a `getAttrs` callback, to add more complex checks, for example for specific HTML attributes. The callback gets passed the HTML DOM node, except when checking for the `style` attribute, then it’s the value.
-
-### Commands
-```js
-import Paragraph from '@tiptap/extension-paragraph'
-
-const CustomParagraph = Paragraph.extend({
-  addCommands() {
-    return {
-      paragraph: () => ({ commands }) => {
-        return commands.toggleNode('paragraph', 'paragraph')
-      },
-    }
-  },
-})
-```
-
-:::warning Use the commands parameter inside of addCommands
-All commands are also available through ~~this.editor.commands~~, but inside of `addCommands` you must use the `commands` parameter that’s passed to it.
-:::
-
-### Keyboard shortcuts
-Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
-
-```js
-// Change the bullet list keyboard shortcut
-import BulletList from '@tiptap/extension-bullet-list'
-
-const CustomBulletList = BulletList.extend({
-  addKeyboardShortcuts() {
-    return {
-      'Mod-l': () => this.editor.commands.toggleBulletList(),
-    }
-  },
-})
-```
-
-### Input rules
-With input rules you can define regular expressions to listen for user inputs. They are used for markdown shortcuts, or for example to convert text like `(c)` to a `©` (and many more) with the [`Typography`](/api/extensions/typography) extension. Use the `markInputRule` helper function for marks, and the `nodeInputRule` for nodes.
-
-By default text between two tildes on both sides is transformed to ~~striked text~~. If you want to think one tilde on each side is enough, you can overwrite the input rule like this:
-
-```js
-// Use the ~single tilde~ markdown shortcut
-import Strike from '@tiptap/extension-strike'
-import { markInputRule } from '@tiptap/core'
-
-// Default:
-// const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
-
-// New:
-const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
-
-const CustomStrike = Strike.extend({
-  addInputRules() {
-    return [
-      markInputRule(inputRegex, this.type),
-    ]
-  },
-})
-```
-
-### Paste rules
-Paste rules work like input rules (see above) do. But instead of listening to what the user types, they are applied to pasted content.
-
-There is one tiny difference in the regular expression. Input rules typically end with a `$` dollar sign (which means “asserts position at the end of a line”), paste rules typically look through all the content and don’t have said `$` dollar sign.
-
-Taking the example from above and applying it to the paste rule would look like the following example.
-
-```js
-// Check pasted content for the ~single tilde~ markdown syntax
-import Strike from '@tiptap/extension-strike'
-import { markPasteRule } from '@tiptap/core'
-
-// Default:
-// const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
-
-// New:
-const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/gm
-
-const CustomStrike = Strike.extend({
-  addPasteRules() {
-    return [
-      markPasteRule(pasteRegex, this.type),
-    ]
-  },
-})
-```
-
-### Events
-You can even move your [event listeners](/api/events) to a separate extension. Here is an example with listeners for all events:
-
-```js
-import { Extension } from '@tiptap/core'
-
-const CustomExtension = Extension.create({
-  onCreate() {
-    // The editor is ready.
-  },
-  onUpdate() {
-    // The content has changed.
-  },
-  onSelection() {
-    // The selection has changed.
-  },
-  onTransaction({ transaction }) {
-    // The editor state has changed.
-  },
-  onFocus({ event }) {
-    // The editor is focused.
-  },
-  onBlur({ event }) {
-    // The editor isn’t focused anymore.
-  },
-  onDestroy() {
-    // The editor is being destroyed.
-  },
-})
-```
-
-### Node views (Advanced)
-For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views.
-
-They are really powerful, but also complex. In a nutshell, you need to return a parent DOM element, and a DOM element where the content should be rendered in. Look at the following, simplified example:
-
-```js
-import Link from '@tiptap/extension-link'
-
-const CustomLink = Link.extend({
-  addNodeView() {
-    return () => {
-      const container = document.createElement('div')
-
-      container.addEventListener('change', event => {
-        alert('clicked on the container')
-      })
-
-      const content = document.createElement('div')
-      container.append(content)
-
-      return {
-        dom: container,
-        contentDOM: content,
-      }
-    }
-  },
-})
-```
-
-There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
-
-## Start from scratch
-You can also build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.
+You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.
 
 And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
 
diff --git a/docs/src/docPages/guide/extend-extensions.md b/docs/src/docPages/guide/extend-extensions.md
new file mode 100644
index 00000000..ba2e76b4
--- /dev/null
+++ b/docs/src/docPages/guide/extend-extensions.md
@@ -0,0 +1,410 @@
+# Extend the functionality
+
+## toc
+
+## Introduction
+One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch.
+
+## Customize existing extensions
+Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the part you would like to change. In that case, the keyboard shortcut, and just that.
+
+Every extension has an `extend()` method, which takes an object with everything you want to change or add to it. For the bespoken example, your code could like that:
+
+```js
+// 1. Import the extension
+import BulletList from '@tiptap/extension-bullet-list'
+
+// 2. Overwrite the keyboard shortcuts
+const CustomBulletList = BulletList.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
+    }
+  },
+})
+
+// 3. Add the custom extension to your editor
+new Editor({
+  extensions: [
+    CustomBulletList(),
+    // …
+  ]
+})
+```
+
+The same applies to every aspect of an existing extension, except to the name. Let’s look at all the things that you can change through the extend method. We focus on one aspect in every example, but you can combine all those examples and change multiple aspects in one `extend()` call too.
+
+### Name
+The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, we would recommended to copy the whole extension and change the name in all occurrences.
+
+The extension name is also part of the JSON. If you [store your content as JSON](/guide/store-content#option-1-json), you need to change the name there too.
+
+### Settings
+All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of tiptap for other developers, you can do it like that:
+
+```js
+import Heading from '@tiptap/extension-heading'
+
+const CustomHeading = Heading.extend({
+  defaultOptions: {
+    levels: [1, 2, 3],
+  },
+})
+```
+
+### Schema
+tiptap works with a strict schema, which configures how the content can be structured, nested, how it behaves and many more things. You [can change all aspects of the schema](/api/schema) for existing extensions. Let’s walk through a few common use cases.
+
+The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
+
+```js
+// Blockquotes must only include paragraphs
+import Blockquote from '@tiptap/extension-blockquote'
+
+const CustomBlockquote = Blockquote.extend({
+  content: 'paragraph*',
+})
+```
+
+The schema even allows to make your nodes draggable, that’s what the `draggable` option is for, which defaults to `false`.
+
+```js
+// Draggable paragraphs
+import Paragraph from '@tiptap/extension-paragraph'
+
+const CustomParagraph = Paragraph.extend({
+  draggable: true,
+})
+```
+
+That’s just two tiny examples, but [the underlying ProseMirror schema](https://prosemirror.net/docs/ref/#model.SchemaSpec) is really powerful. You should definitely read the documentation to understand all the nifty details.
+
+### Attributes
+You can use attributes to store additional information in the content. Let’s say you want to extend the default paragraph extension to enable paragraphs to have different colors:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    // Return an object with attribute configuration
+    return {
+      color: {
+        default: 'pink',
+      },
+    },
+  },
+})
+
+// Result:
+// <p color="pink">Example Text</p>
+```
+
+That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed as attributes from the content.
+
+Let’s stick with the color example and assume you’ll want to add an inline style to actually color the text. With the `renderHTML` function you can return HTML attributes which will be rendered in the output.
+
+This examples adds a style HTML attribute based on the value of color:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        // Take the attribute values
+        renderHTML: attributes => {
+          // … and return an object with HTML attributes.
+          return {
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p style="color: pink">Example Text</p>
+```
+
+You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-color`, here’s how you would do that:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        // Customize the HTML parsing (for example, to load the initial content)
+        parseHTML: element => {
+          return {
+            color: element.getAttribute('data-color'),
+          }
+        },
+        // … and customize the HTML rendering.
+        renderHTML: attributes => {
+          return {
+            'data-color': atttributes.color,
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p data-color="pink" style="color: pink">Example Text</p>
+```
+
+You can disable the rendering of attributes, if you pass `rendered: false`.
+
+### Global Attributes
+Attributes can be applied to multiple extensions at once. That’s useful for text alignment, line height, color, font family, and other styling related attributes.
+
+Take a closer look at [the full source code](https://github.com/ueberdosis/tiptap-next/tree/main/packages/extension-text-align) of the [`TextAlign`](/api/extensions/text-align) extension to see a more complex example. But here is how it works in a nutshell:
+
+```js
+import { Extension } from '@tiptap/core'
+
+const TextAlign = Extension.create({
+  addGlobalAttributes() {
+    return [
+      {
+        // Extend the following extensions
+        types: [
+          'heading',
+          'paragraph',
+        ],
+        // … with those attributes
+        attributes: {
+          textAlign: {
+            default: 'left',
+            renderHTML: attributes => ({
+              style: `text-align: ${attributes.textAlign}`,
+            }),
+            parseHTML: element => ({
+              textAlign: element.style.textAlign || 'left',
+            }),
+          },
+        },
+      },
+    ]
+  },
+})
+```
+
+### Render HTML
+With the `renderHTML` function you can control how an extension is rendered to HTML. We pass an attributes object to it, with all local attributes, global attributes, and configured CSS classes. Here is an example from the `Bold` extension:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['strong', HTMLAttributes, 0]
+},
+```
+
+The first value in the array should be the name of HTML tag. If the second element is an object, it’s interpreted as a set of attributes. Any elements after that are rendered as children.
+
+The number zero (representing a hole) is used to indicate where the content should be inserted. Let’s look at the rendering of the `CodeBlock` extension with two nested tags:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['pre', ['code', HTMLAttributes, 0]]
+},
+```
+
+If you want to add some specific attributes there, import the `mergeAttributes` helper from `@tiptap/core`:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0]
+},
+```
+
+### Parse HTML
+The `parseHTML()` function tries to load the editor document from HTML. The function gets the HTML DOM element passed as a parameter, and is expected to return an object with attributes and their values. Here is a simplified example from the [`Bold`](/api/marks/bold) mark:
+
+```js
+  parseHTML() {
+    return [
+      {
+        tag: 'strong',
+      },
+    ]
+  },
+```
+
+This defines a rule to convert all `<strong>` tags to `Bold` marks. But you can get more advanced with this, here is the full example from the extension:
+
+```js
+  parseHTML() {
+    return [
+      // <strong>
+      {
+        tag: 'strong',
+      },
+      // <b>
+      {
+        tag: 'b',
+        getAttrs: node => node.style.fontWeight !== 'normal' && null,
+      },
+      // <span style="font-weight: bold">
+      {
+        style: 'font-weight',
+        getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
+      },
+    ]
+  },
+```
+
+This looks for `<strong>` and `<b>` tags, and any HTML tag with an inline style setting the `font-weight` to bold.
+
+As you can see, you can optionally pass a `getAttrs` callback, to add more complex checks, for example for specific HTML attributes. The callback gets passed the HTML DOM node, except when checking for the `style` attribute, then it’s the value.
+
+### Commands
+```js
+import Paragraph from '@tiptap/extension-paragraph'
+
+const CustomParagraph = Paragraph.extend({
+  addCommands() {
+    return {
+      paragraph: () => ({ commands }) => {
+        return commands.toggleNode('paragraph', 'paragraph')
+      },
+    }
+  },
+})
+```
+
+:::warning Use the commands parameter inside of addCommands
+All commands are also available through ~~this.editor.commands~~, but inside of `addCommands` you must use the `commands` parameter that’s passed to it.
+:::
+
+### Keyboard shortcuts
+Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
+
+```js
+// Change the bullet list keyboard shortcut
+import BulletList from '@tiptap/extension-bullet-list'
+
+const CustomBulletList = BulletList.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
+    }
+  },
+})
+```
+
+### Input rules
+With input rules you can define regular expressions to listen for user inputs. They are used for markdown shortcuts, or for example to convert text like `(c)` to a `©` (and many more) with the [`Typography`](/api/extensions/typography) extension. Use the `markInputRule` helper function for marks, and the `nodeInputRule` for nodes.
+
+By default text between two tildes on both sides is transformed to ~~striked text~~. If you want to think one tilde on each side is enough, you can overwrite the input rule like this:
+
+```js
+// Use the ~single tilde~ markdown shortcut
+import Strike from '@tiptap/extension-strike'
+import { markInputRule } from '@tiptap/core'
+
+// Default:
+// const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
+
+// New:
+const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
+
+const CustomStrike = Strike.extend({
+  addInputRules() {
+    return [
+      markInputRule(inputRegex, this.type),
+    ]
+  },
+})
+```
+
+### Paste rules
+Paste rules work like input rules (see above) do. But instead of listening to what the user types, they are applied to pasted content.
+
+There is one tiny difference in the regular expression. Input rules typically end with a `$` dollar sign (which means “asserts position at the end of a line”), paste rules typically look through all the content and don’t have said `$` dollar sign.
+
+Taking the example from above and applying it to the paste rule would look like the following example.
+
+```js
+// Check pasted content for the ~single tilde~ markdown syntax
+import Strike from '@tiptap/extension-strike'
+import { markPasteRule } from '@tiptap/core'
+
+// Default:
+// const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
+
+// New:
+const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/gm
+
+const CustomStrike = Strike.extend({
+  addPasteRules() {
+    return [
+      markPasteRule(pasteRegex, this.type),
+    ]
+  },
+})
+```
+
+### Events
+You can even move your [event listeners](/api/events) to a separate extension. Here is an example with listeners for all events:
+
+```js
+import { Extension } from '@tiptap/core'
+
+const CustomExtension = Extension.create({
+  onCreate() {
+    // The editor is ready.
+  },
+  onUpdate() {
+    // The content has changed.
+  },
+  onSelection() {
+    // The selection has changed.
+  },
+  onTransaction({ transaction }) {
+    // The editor state has changed.
+  },
+  onFocus({ event }) {
+    // The editor is focused.
+  },
+  onBlur({ event }) {
+    // The editor isn’t focused anymore.
+  },
+  onDestroy() {
+    // The editor is being destroyed.
+  },
+})
+```
+
+### Node views (Advanced)
+For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views.
+
+They are really powerful, but also complex. In a nutshell, you need to return a parent DOM element, and a DOM element where the content should be rendered in. Look at the following, simplified example:
+
+```js
+import Link from '@tiptap/extension-link'
+
+const CustomLink = Link.extend({
+  addNodeView() {
+    return () => {
+      const container = document.createElement('div')
+
+      container.addEventListener('change', event => {
+        alert('clicked on the container')
+      })
+
+      const content = document.createElement('div')
+      container.append(content)
+
+      return {
+        dom: container,
+        contentDOM: content,
+      }
+    }
+  },
+})
+```
+
+There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
diff --git a/docs/src/docPages/guide/extend.md b/docs/src/docPages/guide/extend.md
new file mode 100644
index 00000000..ba2e76b4
--- /dev/null
+++ b/docs/src/docPages/guide/extend.md
@@ -0,0 +1,410 @@
+# Extend the functionality
+
+## toc
+
+## Introduction
+One of the strength of tiptap is it’s extendability. You don’t depend on the provided extensions, it’s intended to extend the editor to your liking. With custom extensions you can add new content types and new functionalities, on top of what already exists or from scratch.
+
+## Customize existing extensions
+Let’s say you want to change the keyboard shortcuts for the bullet list. You should start by looking at [the source code of the `BulletList` extension](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bullet-list/index.ts) and find the part you would like to change. In that case, the keyboard shortcut, and just that.
+
+Every extension has an `extend()` method, which takes an object with everything you want to change or add to it. For the bespoken example, your code could like that:
+
+```js
+// 1. Import the extension
+import BulletList from '@tiptap/extension-bullet-list'
+
+// 2. Overwrite the keyboard shortcuts
+const CustomBulletList = BulletList.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
+    }
+  },
+})
+
+// 3. Add the custom extension to your editor
+new Editor({
+  extensions: [
+    CustomBulletList(),
+    // …
+  ]
+})
+```
+
+The same applies to every aspect of an existing extension, except to the name. Let’s look at all the things that you can change through the extend method. We focus on one aspect in every example, but you can combine all those examples and change multiple aspects in one `extend()` call too.
+
+### Name
+The extension name is used in a whole lot of places and changing it isn’t too easy. If you want to change the name of an existing extension, we would recommended to copy the whole extension and change the name in all occurrences.
+
+The extension name is also part of the JSON. If you [store your content as JSON](/guide/store-content#option-1-json), you need to change the name there too.
+
+### Settings
+All settings can be configured through the extension anyway, but if you want to change the default settings, for example to provide a library on top of tiptap for other developers, you can do it like that:
+
+```js
+import Heading from '@tiptap/extension-heading'
+
+const CustomHeading = Heading.extend({
+  defaultOptions: {
+    levels: [1, 2, 3],
+  },
+})
+```
+
+### Schema
+tiptap works with a strict schema, which configures how the content can be structured, nested, how it behaves and many more things. You [can change all aspects of the schema](/api/schema) for existing extensions. Let’s walk through a few common use cases.
+
+The default `Blockquote` extension can wrap other nodes, like headings. If you want to allow nothing but paragraphs in your blockquotes, this is how you could achieve it:
+
+```js
+// Blockquotes must only include paragraphs
+import Blockquote from '@tiptap/extension-blockquote'
+
+const CustomBlockquote = Blockquote.extend({
+  content: 'paragraph*',
+})
+```
+
+The schema even allows to make your nodes draggable, that’s what the `draggable` option is for, which defaults to `false`.
+
+```js
+// Draggable paragraphs
+import Paragraph from '@tiptap/extension-paragraph'
+
+const CustomParagraph = Paragraph.extend({
+  draggable: true,
+})
+```
+
+That’s just two tiny examples, but [the underlying ProseMirror schema](https://prosemirror.net/docs/ref/#model.SchemaSpec) is really powerful. You should definitely read the documentation to understand all the nifty details.
+
+### Attributes
+You can use attributes to store additional information in the content. Let’s say you want to extend the default paragraph extension to enable paragraphs to have different colors:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    // Return an object with attribute configuration
+    return {
+      color: {
+        default: 'pink',
+      },
+    },
+  },
+})
+
+// Result:
+// <p color="pink">Example Text</p>
+```
+
+That’s already enough to tell tiptap about the new attribute, and set `'pink'` as the default value. All attributes will be rendered as a HTML attribute by default, and parsed as attributes from the content.
+
+Let’s stick with the color example and assume you’ll want to add an inline style to actually color the text. With the `renderHTML` function you can return HTML attributes which will be rendered in the output.
+
+This examples adds a style HTML attribute based on the value of color:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        // Take the attribute values
+        renderHTML: attributes => {
+          // … and return an object with HTML attributes.
+          return {
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p style="color: pink">Example Text</p>
+```
+
+You can also control how the attribute is parsed from the HTML. Let’s say you want to store the color in an attribute called `data-color`, here’s how you would do that:
+
+```js
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      color: {
+        default: null,
+        // Customize the HTML parsing (for example, to load the initial content)
+        parseHTML: element => {
+          return {
+            color: element.getAttribute('data-color'),
+          }
+        },
+        // … and customize the HTML rendering.
+        renderHTML: attributes => {
+          return {
+            'data-color': atttributes.color,
+            style: `color: ${attributes.color}`,
+          }
+        },
+      },
+    }
+  },
+})
+
+// Result:
+// <p data-color="pink" style="color: pink">Example Text</p>
+```
+
+You can disable the rendering of attributes, if you pass `rendered: false`.
+
+### Global Attributes
+Attributes can be applied to multiple extensions at once. That’s useful for text alignment, line height, color, font family, and other styling related attributes.
+
+Take a closer look at [the full source code](https://github.com/ueberdosis/tiptap-next/tree/main/packages/extension-text-align) of the [`TextAlign`](/api/extensions/text-align) extension to see a more complex example. But here is how it works in a nutshell:
+
+```js
+import { Extension } from '@tiptap/core'
+
+const TextAlign = Extension.create({
+  addGlobalAttributes() {
+    return [
+      {
+        // Extend the following extensions
+        types: [
+          'heading',
+          'paragraph',
+        ],
+        // … with those attributes
+        attributes: {
+          textAlign: {
+            default: 'left',
+            renderHTML: attributes => ({
+              style: `text-align: ${attributes.textAlign}`,
+            }),
+            parseHTML: element => ({
+              textAlign: element.style.textAlign || 'left',
+            }),
+          },
+        },
+      },
+    ]
+  },
+})
+```
+
+### Render HTML
+With the `renderHTML` function you can control how an extension is rendered to HTML. We pass an attributes object to it, with all local attributes, global attributes, and configured CSS classes. Here is an example from the `Bold` extension:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['strong', HTMLAttributes, 0]
+},
+```
+
+The first value in the array should be the name of HTML tag. If the second element is an object, it’s interpreted as a set of attributes. Any elements after that are rendered as children.
+
+The number zero (representing a hole) is used to indicate where the content should be inserted. Let’s look at the rendering of the `CodeBlock` extension with two nested tags:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['pre', ['code', HTMLAttributes, 0]]
+},
+```
+
+If you want to add some specific attributes there, import the `mergeAttributes` helper from `@tiptap/core`:
+
+```js
+renderHTML({ HTMLAttributes }) {
+  return ['a', mergeAttributes(HTMLAttributes, { rel: this.options.rel }), 0]
+},
+```
+
+### Parse HTML
+The `parseHTML()` function tries to load the editor document from HTML. The function gets the HTML DOM element passed as a parameter, and is expected to return an object with attributes and their values. Here is a simplified example from the [`Bold`](/api/marks/bold) mark:
+
+```js
+  parseHTML() {
+    return [
+      {
+        tag: 'strong',
+      },
+    ]
+  },
+```
+
+This defines a rule to convert all `<strong>` tags to `Bold` marks. But you can get more advanced with this, here is the full example from the extension:
+
+```js
+  parseHTML() {
+    return [
+      // <strong>
+      {
+        tag: 'strong',
+      },
+      // <b>
+      {
+        tag: 'b',
+        getAttrs: node => node.style.fontWeight !== 'normal' && null,
+      },
+      // <span style="font-weight: bold">
+      {
+        style: 'font-weight',
+        getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value as string) && null,
+      },
+    ]
+  },
+```
+
+This looks for `<strong>` and `<b>` tags, and any HTML tag with an inline style setting the `font-weight` to bold.
+
+As you can see, you can optionally pass a `getAttrs` callback, to add more complex checks, for example for specific HTML attributes. The callback gets passed the HTML DOM node, except when checking for the `style` attribute, then it’s the value.
+
+### Commands
+```js
+import Paragraph from '@tiptap/extension-paragraph'
+
+const CustomParagraph = Paragraph.extend({
+  addCommands() {
+    return {
+      paragraph: () => ({ commands }) => {
+        return commands.toggleNode('paragraph', 'paragraph')
+      },
+    }
+  },
+})
+```
+
+:::warning Use the commands parameter inside of addCommands
+All commands are also available through ~~this.editor.commands~~, but inside of `addCommands` you must use the `commands` parameter that’s passed to it.
+:::
+
+### Keyboard shortcuts
+Most core extensions come with sensible keyboard shortcut defaults. Depending on what you want to build, you’ll likely want to change them though. With the `addKeyboardShortcuts()` method you can overwrite the predefined shortcut map:
+
+```js
+// Change the bullet list keyboard shortcut
+import BulletList from '@tiptap/extension-bullet-list'
+
+const CustomBulletList = BulletList.extend({
+  addKeyboardShortcuts() {
+    return {
+      'Mod-l': () => this.editor.commands.toggleBulletList(),
+    }
+  },
+})
+```
+
+### Input rules
+With input rules you can define regular expressions to listen for user inputs. They are used for markdown shortcuts, or for example to convert text like `(c)` to a `©` (and many more) with the [`Typography`](/api/extensions/typography) extension. Use the `markInputRule` helper function for marks, and the `nodeInputRule` for nodes.
+
+By default text between two tildes on both sides is transformed to ~~striked text~~. If you want to think one tilde on each side is enough, you can overwrite the input rule like this:
+
+```js
+// Use the ~single tilde~ markdown shortcut
+import Strike from '@tiptap/extension-strike'
+import { markInputRule } from '@tiptap/core'
+
+// Default:
+// const inputRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))$/gm
+
+// New:
+const inputRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))$/gm
+
+const CustomStrike = Strike.extend({
+  addInputRules() {
+    return [
+      markInputRule(inputRegex, this.type),
+    ]
+  },
+})
+```
+
+### Paste rules
+Paste rules work like input rules (see above) do. But instead of listening to what the user types, they are applied to pasted content.
+
+There is one tiny difference in the regular expression. Input rules typically end with a `$` dollar sign (which means “asserts position at the end of a line”), paste rules typically look through all the content and don’t have said `$` dollar sign.
+
+Taking the example from above and applying it to the paste rule would look like the following example.
+
+```js
+// Check pasted content for the ~single tilde~ markdown syntax
+import Strike from '@tiptap/extension-strike'
+import { markPasteRule } from '@tiptap/core'
+
+// Default:
+// const pasteRegex = /(?:^|\s)((?:~~)((?:[^~]+))(?:~~))/gm
+
+// New:
+const pasteRegex = /(?:^|\s)((?:~)((?:[^~]+))(?:~))/gm
+
+const CustomStrike = Strike.extend({
+  addPasteRules() {
+    return [
+      markPasteRule(pasteRegex, this.type),
+    ]
+  },
+})
+```
+
+### Events
+You can even move your [event listeners](/api/events) to a separate extension. Here is an example with listeners for all events:
+
+```js
+import { Extension } from '@tiptap/core'
+
+const CustomExtension = Extension.create({
+  onCreate() {
+    // The editor is ready.
+  },
+  onUpdate() {
+    // The content has changed.
+  },
+  onSelection() {
+    // The selection has changed.
+  },
+  onTransaction({ transaction }) {
+    // The editor state has changed.
+  },
+  onFocus({ event }) {
+    // The editor is focused.
+  },
+  onBlur({ event }) {
+    // The editor isn’t focused anymore.
+  },
+  onDestroy() {
+    // The editor is being destroyed.
+  },
+})
+```
+
+### Node views (Advanced)
+For advanced use cases, where you need to execute JavaScript inside your nodes, for example to render a sophisticated link preview, you need to learn about node views.
+
+They are really powerful, but also complex. In a nutshell, you need to return a parent DOM element, and a DOM element where the content should be rendered in. Look at the following, simplified example:
+
+```js
+import Link from '@tiptap/extension-link'
+
+const CustomLink = Link.extend({
+  addNodeView() {
+    return () => {
+      const container = document.createElement('div')
+
+      container.addEventListener('change', event => {
+        alert('clicked on the container')
+      })
+
+      const content = document.createElement('div')
+      container.append(content)
+
+      return {
+        dom: container,
+        contentDOM: content,
+      }
+    }
+  },
+})
+```
+
+There is a whole lot to learn about node views, so head over to the [dedicated section in our guide about node views](/guide/node-views) for more information. If you’re looking for a real-world example, look at the source code of the [`TaskItem`](/api/nodes/task-item) node. This is using a node view to render the checkboxes.
diff --git a/docs/src/docPages/guide/getting-started/react.md b/docs/src/docPages/guide/getting-started/react.md
new file mode 100644
index 00000000..ce78e8c6
--- /dev/null
+++ b/docs/src/docPages/guide/getting-started/react.md
@@ -0,0 +1,7 @@
+# React
+
+## toc
+
+TODO
+
+<demo name="React" />
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 3c89bcde..a88fc98c 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -48,6 +48,10 @@
         - title: Nuxt.js
           link: /guide/getting-started/nuxtjs
           skip: true
+        - title: React
+          link: /guide/getting-started/react
+          type: draft
+          skip: true
         - title: Alpine.js
           link: /guide/getting-started/alpinejs
           type: draft
@@ -62,19 +66,21 @@
       link: /guide/toolbar
     - title: Custom styling
       link: /guide/styling
+    - title: Accessibility
+      link: /guide/accessibility
+      type: draft
     - title: Store content
       link: /guide/store-content
+    - title: Collaborative editing
+      link: /guide/collaborative-editing
+      type: pro
+    - title: Extend the functionality
+      link: /guide/extend-extensions
     - title: Build extensions
       link: /guide/build-extensions
     - title: Complex node views
       link: /guide/node-views
       type: draft
-    - title: Collaborative editing
-      link: /guide/collaborative-editing
-      type: pro
-    - title: Accessibility
-      link: /guide/accessibility
-      type: draft
     - title: Working with TypeScript
       link: /guide/typescript