From 280ed0369b1a9617a57aceaca2c762a0938a7c21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 14 Dec 2020 12:18:05 +0100
Subject: [PATCH] add basic node view examples to docs

---
 docs/src/docPages/guide/node-views.md | 77 +++++++++++++++++++++++++++
 1 file changed, 77 insertions(+)

diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md
index f4d864a6..130cd64d 100644
--- a/docs/src/docPages/guide/node-views.md
+++ b/docs/src/docPages/guide/node-views.md
@@ -6,6 +6,26 @@
 
 TODO
 
+```js
+import { Node } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  addNodeView() {
+    return ({ editor, node, getPos, HTMLAttributes, decorations, extension }) => {
+      const dom = document.createElement('div')
+
+      dom.innerHTML = 'I’m a node view'
+
+      return {
+        dom,
+      }
+    })
+  },
+})
+```
+
 ## Different types of node views
 
 ### Simple
@@ -53,3 +73,60 @@ TODO
 
 ## Render Vue components
 
+### Node
+
+```js
+import { Node } from '@tiptap/core'
+import { VueRenderer } from '@tiptap/vue'
+import Component from './Component.vue'
+
+export default Node.create({
+  addNodeView() {
+    return VueRenderer(Component)
+  },
+})
+```
+
+### Component
+
+```html
+<template>
+  <node-view-wrapper>
+    <node-view-content />
+  </node-view-wrapper>
+</template>
+
+<script>
+export default {
+  props: {
+    editor: {
+      type: Object,
+    },
+
+    node: {
+      type: Object,
+    },
+
+    decorations: {
+      type: Array,
+    },
+
+    selected: {
+      type: Boolean,
+    },
+
+    extension: {
+      type: Object,
+    },
+
+    getPos: {
+      type: Function,
+    },
+
+    updateAttributes: {
+      type: Function,
+    },
+  },
+}
+</script>
+```