docs: update content

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

@@ -0,0 +1,61 @@
+<template>
+  <node-view-wrapper class="vue-component">
+    <span class="label">Vue Component</span>
+
+    <div class="content">
+      <button @click="increase">
+        This button has been clicked {{ count }} times.
+      </button>
+    </div>
+  </node-view-wrapper>
+</template>
+
+<script>
+import { NodeViewWrapper } from '@tiptap/vue-2'
+
+export default {
+  components: {
+    NodeViewWrapper,
+  },
+
+  data() {
+    return {
+      count: 0,
+    }
+  },
+
+  methods: {
+    increase() {
+      this.count += 1
+    },
+  },
+}
+</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-top: 1.5rem;
+  padding: 1rem;
+}
+</style>

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

@@ -0,0 +1,27 @@
+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',
+
+  atom: true,
+
+  parseHTML() {
+    return [
+      {
+        tag: 'vue-component',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['vue-component', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(Component)
+  },
+})

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

@@ -0,0 +1,52 @@
+<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 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.
+        </p>
+        <vue-component></vue-component>
+        <p>
+          The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
+        </p>
+      `,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+</style>

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

@@ -3,7 +3,8 @@
 ## toc
 
 ## Introduction
-Node views are the best thing since sliced bread, at least if you’re a fan of customization (and bread). Node views enable you to add literally anything to a node. If you can write it in JavaScript, you can use it in your editor.
+Node views are the best thing since sliced bread, at least if you’re a fan of customization (and bread). With node views you can add interactive nodes to your editor content. That can literally be everything. If you can write it in JavaScript, you can use it in your editor.
+
 
 <!-- ```js
 import { Node } from '@tiptap/core'
@@ -24,7 +25,7 @@ export default Node.create({
   },
 })
 ``` -->
-
+<!--
 ## Different types of node views
 
 ### Simple
@@ -72,14 +73,25 @@ https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item
   </node-view>
   <p>text</p>
 </div>
-```
+``` -->
 
-#### Example: Drag handles
-<demo name="Guide/NodeViews/DragHandle" />
+<!-- #### Example: Drag handles
+<demo name="Guide/NodeViews/DragHandle" /> -->
 
-## Render Vue components
+## Node views with Vue.js
+TODO
 
-### Node
+### Render a Vue component
+<demo name="Guide/NodeViews/VueComponent" />
+
+### Access node attributes
+<demo name="Guide/NodeViews/VueComponentAccessAttributes" />
+
+### Update attributes
+<demo name="Guide/NodeViews/VueComponentUpdateAttributes" />
+
+
+<!-- ### Node
 
 ```js
 import { Node } from '@tiptap/core'
@@ -159,7 +171,7 @@ export default {
     NodeViewContent,
   },
 }
-```
+``` -->
 
 ## Reference