From d49af82a851b6e1e454b4d221be69d8c733f2346 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Mon, 8 Mar 2021 18:33:50 +0100
Subject: [PATCH] docs: update content

---
 .../NodeViews/VueComponent/Component.vue      | 61 +++++++++++++++++++
 .../Guide/NodeViews/VueComponent/index.js     | 27 ++++++++
 .../Guide/NodeViews/VueComponent/index.vue    | 52 ++++++++++++++++
 docs/src/docPages/guide/node-views.md         | 28 ++++++---
 4 files changed, 160 insertions(+), 8 deletions(-)
 create mode 100644 docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
 create mode 100644 docs/src/demos/Guide/NodeViews/VueComponent/index.js
 create mode 100644 docs/src/demos/Guide/NodeViews/VueComponent/index.vue

diff --git a/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue b/docs/src/demos/Guide/NodeViews/VueComponent/Component.vue
new file mode 100644
index 00000000..d956dc04
--- /dev/null
+++ b/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>
diff --git a/docs/src/demos/Guide/NodeViews/VueComponent/index.js b/docs/src/demos/Guide/NodeViews/VueComponent/index.js
new file mode 100644
index 00000000..4e32f2bd
--- /dev/null
+++ b/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)
+  },
+})
diff --git a/docs/src/demos/Guide/NodeViews/VueComponent/index.vue b/docs/src/demos/Guide/NodeViews/VueComponent/index.vue
new file mode 100644
index 00000000..7b7e67c5
--- /dev/null
+++ b/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>
diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md
index 076bce4e..fcf1a36c 100644
--- a/docs/src/docPages/guide/node-views.md
+++ b/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