improve node views

docs/src/demos/Examples/NodeView/Component.vue

@@ -1,12 +1,38 @@
 <template>
-  <div>
+  <!-- <div style="white-space: normal;">
     node view
-  </div>
+    <button @click="editor.chain().focus().insertText('hey').run()">
+      button
+    </button>
+    <component :is="inner" />
+    <inner />
+  </div> -->
+  <inner />
 </template>
 
 <script>
 export default {
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
 
+    inner: {
+      type: [Object, Function],
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      foo: 'foo',
+    }
+  },
+
+  mounted() {
+    // console.log(this)
+  },
 }
 </script>
 

docs/src/demos/Examples/NodeView/Test.ts

@@ -7,6 +7,8 @@ export default Node.create({
 
   group: 'block',
 
+  content: 'inline*',
+
   draggable: true,
 
   selectable: false,
@@ -20,7 +22,7 @@ export default Node.create({
   },
 
   renderHTML() {
-    return ['div', { 'data-type': 'test' }]
+    return ['div', { 'data-type': 'test' }, 0]
   },
 
   addNodeView() {

docs/src/demos/Examples/NodeView/index.vue

@@ -34,10 +34,15 @@ export default {
         Test,
       ],
       content: `
-        <p>test</p>
-        <div data-type="test"></div>
-        <p>test</p>
+        <p>paragraph</p>
+        <div data-type="test">
+          text
+        </div>
+        <p>paragraph</p>
       `,
+      onUpdate: () => {
+        console.log(this.editor.getHTML())
+      },
     })
   },