docs: update content

docs/src/demos/Guide/NodeViews/VueComponent/Component.vue

@@ -4,7 +4,7 @@
 
     <div class="content">
       <button @click="increase">
-        This button has been clicked {{ count }} times.
+        This button has been clicked {{ node.attrs.count }} times.
       </button>
     </div>
   </node-view-wrapper>
@@ -18,15 +18,23 @@ export default {
     NodeViewWrapper,
   },
 
-  data() {
+  props: {
-    return {
+    updateAttributes: {
-      count: 0,
+      type: Function,
-    }
+      required: true,
+    },
+
+    node: {
+      type: Object,
+      required: true,
+    },
   },
 
   methods: {
     increase() {
-      this.count += 1
+      this.updateAttributes({
+        count: this.node.attrs.count + 1,
+      })
     },
   },
 }

docs/src/demos/Guide/NodeViews/VueComponent/index.js

@@ -9,6 +9,14 @@ export default Node.create({
 
   atom: true,
 
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
   parseHTML() {
     return [
       {

docs/src/demos/Guide/NodeViews/VueComponent/index.vue

@@ -26,11 +26,11 @@ export default {
       ],
       content: `
         <p>
-          This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
+          This is still the text editor you’re used to, but enriched with node views.
         </p>
-        <vue-component></vue-component>
+        <vue-component count="0"></vue-component>
         <p>
-          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
+          Did you see that? That’s a Vue component. We are really living in the future.
         </p>
       `,
     })
@@ -49,4 +49,15 @@ export default {
     margin-top: 0.75em;
   }
 }
+
+.output {
+  background-color: #0D0D0D;
+  color: #fff;
+  padding: 1rem;
+  font-family: monospace;
+  font-size: 1.1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
 </style>

docs/src/demos/Guide/NodeViews/VueComponentContent/Component.vue

@@ -0,0 +1,47 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <span class="label">Vue Component</span>
+
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+}
+</script>
+
+<style lang="scss">
+.vue-component {
+  border: 1px solid #adb5bd;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+
+.label {
+  margin-left: 1rem;
+  background-color: #adb5bd;
+  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: 1rem;
+  border: 1px dashed #adb5bd;
+}
+</style>

docs/src/demos/Guide/NodeViews/VueComponentContent/index.js

@@ -0,0 +1,35 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import Component from './Component.vue'
+
+export default Node.create({
+  name: 'vueComponent',
+
+  group: 'block',
+
+  content: 'block+',
+
+  addAttributes() {
+    return {
+      count: {
+        default: 0,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})

docs/src/demos/Guide/NodeViews/VueComponentContent/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2'
+import { defaultExtensions } from '@tiptap/starter-kit'
+import VueComponent from './index.js'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      extensions: [
+        ...defaultExtensions(),
+        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;
+  }
+}
+
+.output {
+  background-color: #0D0D0D;
+  color: #fff;
+  padding: 1rem;
+  font-family: monospace;
+  font-size: 1.1rem;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  position: relative;
+}
+</style>

docs/src/docPages/guide/node-views.md

@@ -82,14 +82,59 @@ https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item
 TODO
 
 ### Render a Vue component
+```js
+import { Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import Component from './Component.vue'
+
+export default Node.create({
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})
+```
+
 <demo name="Guide/NodeViews/VueComponent" />
 
 ### Access node attributes
-<demo name="Guide/NodeViews/VueComponentAccessAttributes" />
 
-### Update attributes
+```js
-<demo name="Guide/NodeViews/VueComponentUpdateAttributes" />
+props: {
+  node: {
+    type: Object,
+    required: true,
+  },
+},
+```
 
+```js
+this.node.attrs.count
+```
+
+### Update node attributes
+
+```js
+props: {
+  updateAttributes: {
+    type: Function,
+    required: true,
+  },
+},
+```
+
+```js
+this.updateAttributes({
+  count: this.node.attrs.count + 1,
+})
+```
+
+### Adding a content editable
+
+<demo name="Guide/NodeViews/VueComponentContent" />
+
+`content: 'block+'`
+
+`atom: true`
 
 <!-- ### Node