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())
+      },
     })
   },
 

packages/vue/src/VueRenderer.ts

@@ -1,4 +1,4 @@
-import { Node, NodeViewRendererProps } from '@tiptap/core'
+import { Editor, Node, NodeViewRendererProps } from '@tiptap/core'
 import { NodeView } from 'prosemirror-view'
 
 import {
@@ -6,21 +6,29 @@ import {
 } from 'prosemirror-model'
 import Vue from 'vue'
 import { VueConstructor } from 'vue/types/umd'
+// import Inner from './components/Inner.vue'
+
+// const Inner = Vue.extend()
 
 class VueNodeView implements NodeView {
 
   vm!: Vue
 
+  editor: Editor
+
   extension!: Node
 
   node!: ProseMirrorNode
 
+  id!: string
+
   constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
     // eslint-disable-next-line
     const { node, editor, getPos } = props
     // eslint-disable-next-line
     const { view } = editor
 
+    this.editor = props.editor
     this.extension = props.extension
     this.node = props.node
 
@@ -28,11 +36,40 @@ class VueNodeView implements NodeView {
   }
 
   mount(component: Vue | VueConstructor) {
-    const Component = Vue.extend(component)
+    this.id = `id_${Math.random().toString(36).replace('0.', '')}`
+
+    const Inner = Vue.extend({
+      functional: true,
+      render: createElement => {
+        return createElement(
+          'div', {
+            style: {
+              whiteSpace: 'pre-wrap',
+            },
+            attrs: {
+              id: this.id,
+            },
+          },
+        )
+      },
+    })
+
+    const Component = Vue
+      .extend(component)
+      .extend({
+        components: {
+          Inner,
+        },
+      })
+
+    const props = {
+      editor: this.editor,
+      inner: Inner,
+    }
 
     this.vm = new Component({
       // parent: this.parent,
-      // propsData: props,
+      propsData: props,
     }).$mount()
   }
 
@@ -41,7 +78,11 @@ class VueNodeView implements NodeView {
   }
 
   get contentDOM() {
-    return this.vm.$refs.content as Element
+    if (this.vm.$el.id === this.id) {
+      return this.vm.$el
+    }
+
+    return this.vm.$el.querySelector(`#${this.id}`)
   }
 
   stopEvent(event: Event): boolean {