move examples around

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

@@ -0,0 +1,51 @@
+# Advanced node views
+
+## toc
+
+## Introduction
+
+TODO
+
+## Different types of node views
+
+### Simple
+
+```html
+<div class="Prosemirror" contenteditable="true">
+  <p>text</p>
+  <node-view>text</node-view>
+  <p>text</p>
+</div>
+```
+
+### Without content
+
+```html
+<div class="Prosemirror" contenteditable="true">
+  <p>text</p>
+  <node-view contenteditable="false">text</node-view>
+  <p>text</p>
+</div>
+```
+
+### Advanced node views with content
+
+```html
+<div class="Prosemirror" contenteditable="true">
+  <p>text</p>
+  <node-view>
+    <div>
+      non-editable text
+    </div>
+    <div>
+      editable text
+    </div>
+  </node-view>
+  <p>text</p>
+</div>
+```
+
+<demo name="Guide/NodeViews/DragHandle" />
+
+## Render Vue components
+