add NodeViewWrapper and NodeViewContent to vue-2

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

@@ -26,6 +26,7 @@
 </template>
 
 <script>
+import { NodeViewWrapper } from '@tiptap/vue-2'
 import { v4 as uuid } from 'uuid'
 import * as d3 from 'd3'
 import simplify from 'simplify-js'
@@ -37,6 +38,10 @@ const getRandomElement = list => {
 export default {
   name: 'Paper',
 
+  components: {
+    NodeViewWrapper,
+  },
+
   props: {
     updateAttributes: {
       type: Function,

docs/src/demos/Guide/NodeViews/DragHandle/Component.vue

@@ -10,6 +10,17 @@
   </node-view-wrapper>
 </template>
 
+<script>
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+}
+</script>
+
 <style lang="scss" scoped>
 .draggable-item {
   display: flex;

docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue

@@ -14,7 +14,13 @@
 </template>
 
 <script>
+import { NodeViewWrapper } from '@tiptap/vue-2'
+
 export default {
+  components: {
+    NodeViewWrapper,
+  },
+
   props: {
     editor: {
       type: Object,

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

@@ -97,13 +97,17 @@ export default Node.create({
 
 ```html
 <template>
-  <node-view-wrapper>
+  <node-view-wrapper />
-    <node-view-content />
-  </node-view-wrapper>
 </template>
 
 <script>
+import { NodeViewWrapper } from '@tiptap/vue-2'
+
 export default {
+  components: {
+    NodeViewWrapper,
+  },
+
   props: {
     editor: {
       type: Object,
@@ -145,6 +149,16 @@ export default {
     <node-view-content class="content-dom" />
   </node-view-wrapper>
 </template>
+
+<script>
+import { NodeViewWrapper, NodeViewContent } from '@tiptap/vue-2'
+
+export default {
+  components: {
+    NodeViewWrapper,
+    NodeViewContent,
+  },
+}
 ```
 
 ## Reference

packages/vue-2/src/NodeViewContent.ts

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+
+export const NodeViewContent = Vue.extend({
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  inject: ['isEditable'],
+
+  render(createElement) {
+    return createElement(
+      this.as, {
+        style: {
+          whiteSpace: 'pre-wrap',
+        },
+        attrs: {
+          'data-node-view-content': '',
+          // @ts-ignore
+          contenteditable: this.isEditable.value,
+        },
+      },
+    )
+  },
+})

packages/vue-2/src/NodeViewWrapper.ts

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+
+export const NodeViewWrapper = Vue.extend({
+  props: {
+    as: {
+      type: String,
+      default: 'div',
+    },
+  },
+
+  inject: ['onDragStart'],
+
+  render(createElement) {
+    return createElement(
+      this.as, {
+        style: {
+          whiteSpace: 'normal',
+        },
+        attrs: {
+          'data-node-view-wrapper': '',
+        },
+        on: {
+          // @ts-ignore
+          dragstart: this.onDragStart,
+        },
+      },
+      this.$slots.default,
+    )
+  },
+})

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -34,8 +34,6 @@ class VueNodeView implements NodeView {
 
   decorations!: Decoration[]
 
-  id!: string
-
   getPos!: any
 
   isDragging = false
@@ -51,42 +49,10 @@ class VueNodeView implements NodeView {
     this.extension = props.extension
     this.node = props.node
     this.getPos = props.getPos
-    this.createUniqueId()
     this.mount(component)
   }
 
-  createUniqueId() {
+  onDragStart(event: DragEvent) {
-    this.id = `id_${Math.floor(Math.random() * 0xFFFFFFFF)}`
-  }
-
-  createNodeViewWrapper() {
-    const { handleDragStart } = this
-    const dragstart = handleDragStart.bind(this)
-
-    return Vue.extend({
-      props: {
-        as: {
-          type: String,
-          default: 'div',
-        },
-      },
-      render(createElement) {
-        return createElement(
-          this.as, {
-            style: {
-              whiteSpace: 'normal',
-            },
-            on: {
-              dragstart,
-            },
-          },
-          this.$slots.default,
-        )
-      },
-    })
-  }
-
-  handleDragStart(event: DragEvent) {
     const { view } = this.editor
     const target = (event.target as HTMLElement)
 
@@ -103,41 +69,8 @@ class VueNodeView implements NodeView {
     view.dispatch(transaction)
   }
 
-  createNodeViewContent() {
-    const { id } = this
-    const { isEditable } = this.editor
-
-    return Vue.extend({
-      inheritAttrs: false,
-      props: {
-        as: {
-          type: String,
-          default: 'div',
-        },
-      },
-      render(createElement) {
-        return createElement(
-          this.as, {
-            style: {
-              whiteSpace: 'pre-wrap',
-            },
-            domProps: {
-              id,
-              contenteditable: isEditable,
-            },
-          },
-        )
-      },
-    })
-  }
-
   mount(component: Vue | VueConstructor) {
-    const NodeViewWrapper = this.createNodeViewWrapper()
-    const NodeViewContent = this.createNodeViewContent()
-
     const props = {
-      NodeViewWrapper,
-      NodeViewContent,
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,
@@ -147,13 +80,24 @@ class VueNodeView implements NodeView {
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
     }
 
+    const onDragStart = this.onDragStart.bind(this)
+    const isEditable = Vue.observable({
+      value: this.editor.isEditable,
+    })
+
+    this.editor.on('viewUpdate', () => {
+      isEditable.value = this.editor.isEditable
+    })
+
     const Component = Vue
       .extend(component)
       .extend({
         props: Object.keys(props),
-        components: {
+        provide() {
-          NodeViewWrapper,
+          return {
-          NodeViewContent,
+            onDragStart,
+            isEditable,
+          }
         },
       })
 
@@ -168,15 +112,23 @@ class VueNodeView implements NodeView {
   }
 
   get dom() {
+    if (!this.renderer.element.hasAttribute('data-node-view-wrapper')) {
+      throw Error('Please use the NodeViewWrapper component for your node view.')
+    }
+
     return this.renderer.element
   }
 
   get contentDOM() {
-    if (this.dom.id === this.id) {
+    const hasContent = !this.node.type.isAtom
-      return this.dom
+
+    if (!hasContent) {
+      return null
     }
 
-    return this.dom.querySelector(`#${this.id}`)
+    const contentElement = this.dom.querySelector('[data-node-view-content]')
+
+    return contentElement || this.dom
   }
 
   stopEvent(event: Event) {

packages/vue-2/src/index.ts

@@ -2,3 +2,5 @@ export * from '@tiptap/core'
 export * from './VueRenderer'
 export * from './VueNodeViewRenderer'
 export * from './EditorContent'
+export * from './NodeViewWrapper'
+export * from './NodeViewContent'

packages/vue-3/src/NodeViewContent.ts

@@ -8,7 +8,7 @@ export const NodeViewContent = defineComponent({
     },
   },
 
-  inject: ['editable'],
+  inject: ['isEditable'],
 
   render() {
     return h(
@@ -18,7 +18,7 @@ export const NodeViewContent = defineComponent({
         },
         'data-node-view-content': '',
         // @ts-ignore (https://github.com/vuejs/vue-next/issues/3031)
-        contenteditable: this.editable.value,
+        contenteditable: this.isEditable.value,
       },
     )
   },

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -86,7 +86,7 @@ class VueNodeView implements NodeView {
       props: Object.keys(props),
       setup() {
         provide('onDragStart', onDragStart)
-        provide('editable', isEditable)
+        provide('isEditable', isEditable)
 
         return (component as any).setup?.()
       },