From 8a5a491d8eea3b87471e489b925cc7d0f68a5d4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 25 Aug 2021 18:32:54 +0200
Subject: [PATCH] add GuideNodeViews demos

---
 .../DragHandle/Vue/Component.vue              |  56 ++++++++
 .../DragHandle/Vue/DraggableItem.js           |  29 ++++
 .../GuideNodeViews/DragHandle/Vue/index.html  |  15 +++
 .../GuideNodeViews/DragHandle/Vue/index.vue   |  52 ++++++++
 .../JavaScript/Vue/Extension.js               |  77 +++++++++++
 .../GuideNodeViews/JavaScript/Vue/index.html  |  15 +++
 .../GuideNodeViews/JavaScript/Vue/index.vue   |  79 +++++++++++
 .../JavaScriptContent/Vue/Extension.js        |  52 ++++++++
 .../JavaScriptContent/Vue/index.html          |  15 +++
 .../JavaScriptContent/Vue/index.vue           |  83 ++++++++++++
 .../ReactComponent/React/Component.jsx        |  22 +++
 .../ReactComponent/React/Extension.js         |  35 +++++
 .../ReactComponent/React/index.html           |  15 +++
 .../ReactComponent/React/index.jsx            |  27 ++++
 .../ReactComponent/React/styles.scss          |  33 +++++
 .../ReactComponentContent/React/Component.jsx |  12 ++
 .../ReactComponentContent/React/Extension.js  |  27 ++++
 .../ReactComponentContent/React/index.html    |  15 +++
 .../ReactComponentContent/React/index.jsx     |  29 ++++
 .../ReactComponentContent/React/styles.scss   |  36 +++++
 .../TableOfContents/Vue/Component.vue         | 126 ++++++++++++++++++
 .../TableOfContents/Vue/TableOfContents.js    |  42 ++++++
 .../TableOfContents/Vue/index.html            |  15 +++
 .../TableOfContents/Vue/index.vue             |  49 +++++++
 .../VueComponent/Vue/Component.vue            |  60 +++++++++
 .../VueComponent/Vue/Extension.js             |  35 +++++
 .../VueComponent/Vue/index.html               |  15 +++
 .../GuideNodeViews/VueComponent/Vue/index.vue |  52 ++++++++
 .../VueComponentContent/Vue/Component.vue     |  50 +++++++
 .../VueComponentContent/Vue/Extension.js      |  27 ++++
 .../VueComponentContent/Vue/index.html        |  15 +++
 .../VueComponentContent/Vue/index.vue         |  54 ++++++++
 32 files changed, 1264 insertions(+)
 create mode 100644 demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
 create mode 100644 demos/src/GuideNodeViews/DragHandle/Vue/DraggableItem.js
 create mode 100644 demos/src/GuideNodeViews/DragHandle/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/DragHandle/Vue/index.vue
 create mode 100644 demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
 create mode 100644 demos/src/GuideNodeViews/JavaScript/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/JavaScript/Vue/index.vue
 create mode 100644 demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
 create mode 100644 demos/src/GuideNodeViews/JavaScriptContent/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
 create mode 100644 demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
 create mode 100644 demos/src/GuideNodeViews/ReactComponent/React/Extension.js
 create mode 100644 demos/src/GuideNodeViews/ReactComponent/React/index.html
 create mode 100644 demos/src/GuideNodeViews/ReactComponent/React/index.jsx
 create mode 100644 demos/src/GuideNodeViews/ReactComponent/React/styles.scss
 create mode 100644 demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
 create mode 100644 demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js
 create mode 100644 demos/src/GuideNodeViews/ReactComponentContent/React/index.html
 create mode 100644 demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx
 create mode 100644 demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
 create mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
 create mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
 create mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
 create mode 100644 demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
 create mode 100644 demos/src/GuideNodeViews/VueComponent/Vue/Extension.js
 create mode 100644 demos/src/GuideNodeViews/VueComponent/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/VueComponent/Vue/index.vue
 create mode 100644 demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
 create mode 100644 demos/src/GuideNodeViews/VueComponentContent/Vue/Extension.js
 create mode 100644 demos/src/GuideNodeViews/VueComponentContent/Vue/index.html
 create mode 100644 demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue

diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
new file mode 100644
index 00000000..111826c2
--- /dev/null
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
@@ -0,0 +1,56 @@
+<template>
+  <node-view-wrapper class="draggable-item">
+    <div
+      class="drag-handle"
+      contenteditable="false"
+      draggable="true"
+      data-drag-handle
+    />
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+export default {
+  props: nodeViewProps,
+
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+}
+</script>
+
+<style lang="scss">
+.draggable-item {
+  display: flex;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  background: white;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+
+  .drag-handle {
+    flex: 0 0 auto;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.3rem;
+    margin-right: 0.5rem;
+    cursor: grab;
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+</style>
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/DraggableItem.js b/demos/src/GuideNodeViews/DragHandle/Vue/DraggableItem.js
new file mode 100644
index 00000000..baf60b1b
--- /dev/null
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/DraggableItem.js
@@ -0,0 +1,29 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'draggableItem',
+
+  group: 'block',
+
+  content: 'block+',
+
+  draggable: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div[data-type="draggable-item"]',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-type': 'draggable-item' }), 0]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/index.html b/demos/src/GuideNodeViews/DragHandle/Vue/index.html
new file mode 100644
index 00000000..cbaee88c
--- /dev/null
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/DragHandle', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/index.vue b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue
new file mode 100644
index 00000000..91bac6b3
--- /dev/null
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import DraggableItem from './DraggableItem.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        DraggableItem,
+      ],
+      content: `
+        <p>This is a boring paragraph.</p>
+        <div data-type="draggable-item">
+          <p>Followed by a fancy draggable item.</p>
+        </div>
+        <div data-type="draggable-item">
+          <p>And another draggable item.</p>
+          <div data-type="draggable-item">
+            <p>And a nested one.</p>
+            <div data-type="draggable-item">
+              <p>But can we go deeper?</p>
+            </div>
+          </div>
+        </div>
+        <p>Let’s finish with a boring paragraph.</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
new file mode 100644
index 00000000..f665e256
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScript/Vue/Extension.js
@@ -0,0 +1,77 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export default Node.create({
+  name: 'nodeView',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'node-view',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['node-view', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ({ editor, node, getPos }) => {
+      const { view } = editor
+
+      // Markup
+      /*
+        <div class="node-view">
+          <span class="label">Node view</span>
+
+          <div class="content">
+            <button>
+              This button has been clicked ${node.attrs.count} times.
+            </button>
+          </div>
+        </div>
+      */
+
+      const dom = document.createElement('div')
+      dom.classList.add('node-view')
+
+      const label = document.createElement('span')
+      label.classList.add('label')
+      label.innerHTML = 'Node view'
+
+      const content = document.createElement('div')
+      content.classList.add('content')
+
+      const button = document.createElement('button')
+      button.innerHTML = `This button has been clicked ${node.attrs.count} times.`
+      button.addEventListener('click', () => {
+        if (typeof getPos === 'function') {
+          view.dispatch(view.state.tr.setNodeMarkup(getPos(), undefined, {
+            count: node.attrs.count + 1,
+          }))
+
+          editor.commands.focus()
+        }
+      })
+      content.append(button)
+
+      dom.append(label, content)
+
+      return {
+        dom,
+      }
+    }
+  },
+})
diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/index.html b/demos/src/GuideNodeViews/JavaScript/Vue/index.html
new file mode 100644
index 00000000..622c4528
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScript/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/JavaScript', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/JavaScript/Vue/index.vue b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue
new file mode 100644
index 00000000..db444add
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScript/Vue/index.vue
@@ -0,0 +1,79 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import NodeView from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        NodeView,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <node-view></node-view>
+        <p>
+          Did you see that? That’s a JavaScript node view. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.node-view {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #0D0D0D;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.content {
+  margin-top: 1.5rem;
+  padding: 1rem;
+}
+</style>
diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
new file mode 100644
index 00000000..0fc4e469
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/Extension.js
@@ -0,0 +1,52 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export default Node.create({
+  name: 'nodeView',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'node-view',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['node-view', mergeAttributes(HTMLAttributes), 0]
+  },
+
+  addNodeView() {
+    return () => {
+      // Markup
+      /*
+        <div class="node-view">
+          <span class="label">Node view</span>
+
+          <div class="content"></div>
+        </div>
+      */
+
+      const dom = document.createElement('div')
+      dom.classList.add('node-view')
+
+      const label = document.createElement('span')
+      label.classList.add('label')
+      label.innerHTML = 'Node view'
+      label.contentEditable = false
+
+      const content = document.createElement('div')
+      content.classList.add('content')
+
+      dom.append(label, content)
+
+      return {
+        dom,
+        contentDOM: content,
+      }
+    }
+  },
+})
diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.html b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.html
new file mode 100644
index 00000000..92e5c985
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/JavaScriptContent', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
new file mode 100644
index 00000000..49cf5a87
--- /dev/null
+++ b/demos/src/GuideNodeViews/JavaScriptContent/Vue/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import NodeView from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        NodeView,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <node-view>
+          <p>This is editable.</p>
+        </node-view>
+        <p>
+          Did you see that? That’s a JavaScript node view. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.node-view {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #0D0D0D;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.content {
+  margin: 2.5rem 1rem 1rem;
+  padding: 0.5rem;
+  border: 2px dashed #0D0D0D20;
+  border-radius: 0.5rem;
+}
+</style>
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
new file mode 100644
index 00000000..efe0d9b1
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponent/React/Component.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { NodeViewWrapper } from '@tiptap/react'
+
+export default props => {
+  const increase = () => {
+    props.updateAttributes({
+      count: props.node.attrs.count + 1,
+    })
+  }
+
+  return (
+    <NodeViewWrapper className="react-component">
+      <span className="label">React Component</span>
+
+      <div className="content">
+        <button onClick={increase}>
+          This button has been clicked {props.node.attrs.count} times.
+        </button>
+      </div>
+    </NodeViewWrapper>
+  )
+}
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/Extension.js b/demos/src/GuideNodeViews/ReactComponent/React/Extension.js
new file mode 100644
index 00000000..36d61318
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponent/React/Extension.js
@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import Component from './Component.jsx'
+
+export default Node.create({
+  name: 'reactComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/index.html b/demos/src/GuideNodeViews/ReactComponent/React/index.html
new file mode 100644
index 00000000..c5e11075
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponent/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('GuideNodeViews/ReactComponent', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/index.jsx b/demos/src/GuideNodeViews/ReactComponent/React/index.jsx
new file mode 100644
index 00000000..394c78fe
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponent/React/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import ReactComponent from './Extension.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      ReactComponent,
+    ],
+    content: `
+    <p>
+      This is still the text editor you’re used to, but enriched with node views.
+    </p>
+    <react-component count="0"></react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}
diff --git a/demos/src/GuideNodeViews/ReactComponent/React/styles.scss b/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
new file mode 100644
index 00000000..93c543c4
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponent/React/styles.scss
@@ -0,0 +1,33 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+
+  .label {
+    margin-left: 1rem;
+    background-color: #0D0D0D;
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .content {
+    margin-top: 1.5rem;
+    padding: 1rem;
+  }
+}
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx b/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
new file mode 100644
index 00000000..efcd93a1
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/Component.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+
+export default () => {
+  return (
+    <NodeViewWrapper className="react-component-with-content">
+      <span className="label" contentEditable={false}>React Component</span>
+
+      <NodeViewContent className="content" />
+    </NodeViewWrapper>
+  )
+}
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js b/demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js
new file mode 100644
index 00000000..90a92887
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/Extension.js
@@ -0,0 +1,27 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { ReactNodeViewRenderer } from '@tiptap/react'
+import Component from './Component.jsx'
+
+export default Node.create({
+  name: 'reactComponent',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'react-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['react-component', mergeAttributes(HTMLAttributes), 0]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/index.html b/demos/src/GuideNodeViews/ReactComponentContent/React/index.html
new file mode 100644
index 00000000..9bb3c9a1
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/react.tsx'
+      import source from '@source'
+      setup('GuideNodeViews/ReactComponentContent', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx b/demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx
new file mode 100644
index 00000000..ac2e67a2
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/index.jsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import ReactComponent from './Extension.js'
+import './styles.scss'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      ReactComponent,
+    ],
+    content: `
+    <p>
+      This is still the text editor you’re used to, but enriched with node views.
+    </p>
+    <react-component>
+      <p>This is editable.</p>
+    </react-component>
+    <p>
+      Did you see that? That’s a React component. We are really living in the future.
+    </p>
+    `,
+  })
+
+  return (
+    <EditorContent editor={editor} />
+  )
+}
diff --git a/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss b/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
new file mode 100644
index 00000000..c61ccbe7
--- /dev/null
+++ b/demos/src/GuideNodeViews/ReactComponentContent/React/styles.scss
@@ -0,0 +1,36 @@
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+.react-component-with-content {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+
+  .label {
+    margin-left: 1rem;
+    background-color: #0D0D0D;
+    font-size: 0.6rem;
+    letter-spacing: 1px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    padding: 0.25rem 0.75rem;
+    border-radius: 0 0 0.5rem 0.5rem;
+  }
+
+  .content {
+    margin: 2.5rem 1rem 1rem;
+    padding: 0.5rem;
+    border: 2px dashed #0D0D0D20;
+    border-radius: 0.5rem;
+  }
+}
+
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue b/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
new file mode 100644
index 00000000..a70ca703
--- /dev/null
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/Component.vue
@@ -0,0 +1,126 @@
+<template>
+  <node-view-wrapper class="toc">
+    <ul class="toc__list">
+      <li
+        class="toc__item"
+        :class="`toc__item--${heading.level}`"
+        v-for="(heading, index) in headings"
+        :key="index"
+      >
+        <a :href="`#${heading.id}`">
+          {{ heading.text }}
+        </a>
+      </li>
+    </ul>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+  },
+
+  props: nodeViewProps,
+
+  data() {
+    return {
+      headings: [],
+    }
+  },
+
+  methods: {
+    handleUpdate() {
+      const headings = []
+      const transaction = this.editor.state.tr
+
+      this.editor.state.doc.descendants((node, pos) => {
+        if (node.type.name === 'heading') {
+          const id = `heading-${headings.length + 1}`
+
+          if (node.attrs.id !== id) {
+            transaction.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              id,
+            })
+          }
+
+          headings.push({
+            level: node.attrs.level,
+            text: node.textContent,
+            id,
+          })
+        }
+      })
+
+      transaction.setMeta('preventUpdate', true)
+
+      this.editor.view.dispatch(transaction)
+
+      this.headings = headings
+    },
+  },
+
+  mounted() {
+    this.editor.on('update', this.handleUpdate)
+    this.$nextTick(this.handleUpdate)
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
+
+<style lang="scss">
+.toc {
+  opacity: 0.75;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: rgba(black, 0.1);
+
+  &__list {
+    list-style: none;
+    padding: 0;
+
+    &::before {
+      display: block;
+      content: "Table of Contents";
+      font-weight: 700;
+      letter-spacing: 0.025rem;
+      font-size: 0.75rem;
+      text-transform: uppercase;
+      opacity: 0.5;
+    }
+  }
+
+  &__item {
+    a:hover {
+      opacity: 0.5;
+    }
+
+    &--3 {
+      padding-left: 1rem;
+    }
+
+    &--4 {
+      padding-left: 2rem;
+    }
+
+    &--5 {
+      padding-left: 3rem;
+    }
+
+    &--6 {
+      padding-left: 4rem;
+    }
+  }
+}
+</style>
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js b/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
new file mode 100644
index 00000000..a499b599
--- /dev/null
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/TableOfContents.js
@@ -0,0 +1,42 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'tableOfContents',
+
+  group: 'block',
+
+  atom: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'toc',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['toc', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          'heading',
+        ],
+        attributes: {
+          id: {
+            default: null,
+          },
+        },
+      },
+    ]
+  },
+})
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/index.html b/demos/src/GuideNodeViews/TableOfContents/Vue/index.html
new file mode 100644
index 00000000..d286f8f5
--- /dev/null
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/TableOfContents', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue b/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
new file mode 100644
index 00000000..4ed24666
--- /dev/null
+++ b/demos/src/GuideNodeViews/TableOfContents/Vue/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <div v-if="editor">
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import TableOfContents from './TableOfContents.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        TableOfContents,
+      ],
+      content: `
+        <toc></toc>
+        <h2>1 heading</h2>
+        <p>paragraph</p>
+        <h3>1.1 heading</h3>
+        <p>paragraph</p>
+        <h3>1.2 heading</h3>
+        <p>paragraph</p>
+        <h2>2 heading</h2>
+        <p>paragraph</p>
+        <h3>2.1 heading</h3>
+        <p>paragraph</p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue b/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
new file mode 100644
index 00000000..1fe5d072
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/Component.vue
@@ -0,0 +1,60 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <span class="label">Vue Component</span>
+
+    <div class="content">
+      <button @click="increase">
+        This button has been clicked {{ node.attrs.count }} times.
+      </button>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+  },
+
+  props: nodeViewProps,
+
+  methods: {
+    increase() {
+      this.updateAttributes({
+        count: this.node.attrs.count + 1,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.vue-component {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #0D0D0D;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.content {
+  margin-top: 1.5rem;
+  padding: 1rem;
+}
+</style>
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/Extension.js b/demos/src/GuideNodeViews/VueComponent/Vue/Extension.js
new file mode 100644
index 00000000..a4f786d3
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/Extension.js
@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'vueComponent',
+
+  group: 'block',
+
+  atom: true,
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/index.html b/demos/src/GuideNodeViews/VueComponent/Vue/index.html
new file mode 100644
index 00000000..352c1532
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/VueComponent', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/VueComponent/Vue/index.vue b/demos/src/GuideNodeViews/VueComponent/Vue/index.vue
new file mode 100644
index 00000000..bb60686d
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponent/Vue/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import VueComponent from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        VueComponent,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <vue-component count="0"></vue-component>
+        <p>
+          Did you see that? That’s a Vue component. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue b/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
new file mode 100644
index 00000000..89c606ef
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/Component.vue
@@ -0,0 +1,50 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <span class="label" contenteditable="false">Vue Component</span>
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, NodeViewContent, nodeViewProps } from '@tiptap/vue-3'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+
+  props: nodeViewProps,
+}
+</script>
+
+<style lang="scss">
+.vue-component {
+  background: #FAF594;
+  border: 3px solid #0D0D0D;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #0D0D0D;
+  font-size: 0.6rem;
+  letter-spacing: 1px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #fff;
+  position: absolute;
+  top: 0;
+  padding: 0.25rem 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+}
+
+.content {
+  margin: 2.5rem 1rem 1rem;
+  padding: 0.5rem;
+  border: 2px dashed #0D0D0D20;
+  border-radius: 0.5rem;
+}
+</style>
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/Extension.js b/demos/src/GuideNodeViews/VueComponentContent/Vue/Extension.js
new file mode 100644
index 00000000..89a991ec
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/Extension.js
@@ -0,0 +1,27 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'vueComponent',
+
+  group: 'block',
+
+  content: 'inline*',
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes), 0]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.html b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.html
new file mode 100644
index 00000000..892a8746
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import setup from '../../../../setup/vue.ts'
+      import source from '@source'
+      setup('GuideNodeViews/VueComponentContent', source)
+    </script>
+  </body>
+</html>
diff --git a/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue
new file mode 100644
index 00000000..9fe7dd1b
--- /dev/null
+++ b/demos/src/GuideNodeViews/VueComponentContent/Vue/index.vue
@@ -0,0 +1,54 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-3'
+import StarterKit from '@tiptap/starter-kit'
+import VueComponent from './Extension.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        StarterKit,
+        VueComponent,
+      ],
+      content: `
+        <p>
+          This is still the text editor you’re used to, but enriched with node views.
+        </p>
+        <vue-component>
+          <p>This is editable.</p>
+        </vue-component>
+        <p>
+          Did you see that? That’s a Vue component. We are really living in the future.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>