From 983b56a5f2b066be17ee2fc2ab0d117fc710803c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 5 Mar 2021 10:18:44 +0100
Subject: [PATCH] add NodeViewWrapper and NodeViewContent to vue-2

---
 docs/src/demos/Examples/Drawing/Component.vue |   5 +
 .../Guide/NodeViews/DragHandle/Component.vue  |  11 ++
 .../NodeViews/TableOfContents/Component.vue   |   6 ++
 docs/src/docPages/guide/node-views.md         |  20 +++-
 packages/vue-2/src/NodeViewContent.ts         |  27 +++++
 packages/vue-2/src/NodeViewWrapper.ts         |  30 ++++++
 packages/vue-2/src/VueNodeViewRenderer.ts     | 100 +++++-------------
 packages/vue-2/src/index.ts                   |   2 +
 packages/vue-3/src/NodeViewContent.ts         |   4 +-
 packages/vue-3/src/VueNodeViewRenderer.ts     |   2 +-
 10 files changed, 127 insertions(+), 80 deletions(-)
 create mode 100644 packages/vue-2/src/NodeViewContent.ts
 create mode 100644 packages/vue-2/src/NodeViewWrapper.ts

diff --git a/docs/src/demos/Examples/Drawing/Component.vue b/docs/src/demos/Examples/Drawing/Component.vue
index 387e80ed3..47c3768ea 100644
--- a/docs/src/demos/Examples/Drawing/Component.vue
+++ b/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,
diff --git a/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue b/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
index 7abae61f9..a5ba27a2d 100644
--- a/docs/src/demos/Guide/NodeViews/DragHandle/Component.vue
+++ b/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;
diff --git a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue b/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
index f67c09fe2..00dcfb3f5 100644
--- a/docs/src/demos/Guide/NodeViews/TableOfContents/Component.vue
+++ b/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,
diff --git a/docs/src/docPages/guide/node-views.md b/docs/src/docPages/guide/node-views.md
index 9c287b120..076bce4e9 100644
--- a/docs/src/docPages/guide/node-views.md
+++ b/docs/src/docPages/guide/node-views.md
@@ -97,13 +97,17 @@ export default Node.create({
 
 ```html
 <template>
-  <node-view-wrapper>
-    <node-view-content />
-  </node-view-wrapper>
+  <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
diff --git a/packages/vue-2/src/NodeViewContent.ts b/packages/vue-2/src/NodeViewContent.ts
new file mode 100644
index 000000000..3405106f6
--- /dev/null
+++ b/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,
+        },
+      },
+    )
+  },
+})
diff --git a/packages/vue-2/src/NodeViewWrapper.ts b/packages/vue-2/src/NodeViewWrapper.ts
new file mode 100644
index 000000000..073c7614d
--- /dev/null
+++ b/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,
+    )
+  },
+})
diff --git a/packages/vue-2/src/VueNodeViewRenderer.ts b/packages/vue-2/src/VueNodeViewRenderer.ts
index 1311a4744..413bfbfc2 100644
--- a/packages/vue-2/src/VueNodeViewRenderer.ts
+++ b/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() {
-    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) {
+  onDragStart(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: {
-          NodeViewWrapper,
-          NodeViewContent,
+        provide() {
+          return {
+            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) {
-      return this.dom
+    const hasContent = !this.node.type.isAtom
+
+    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) {
diff --git a/packages/vue-2/src/index.ts b/packages/vue-2/src/index.ts
index 004adb35f..52ec60d66 100644
--- a/packages/vue-2/src/index.ts
+++ b/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'
diff --git a/packages/vue-3/src/NodeViewContent.ts b/packages/vue-3/src/NodeViewContent.ts
index eee3c8003..fe89f319e 100644
--- a/packages/vue-3/src/NodeViewContent.ts
+++ b/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,
       },
     )
   },
diff --git a/packages/vue-3/src/VueNodeViewRenderer.ts b/packages/vue-3/src/VueNodeViewRenderer.ts
index 027531a6b..0a806cfd4 100644
--- a/packages/vue-3/src/VueNodeViewRenderer.ts
+++ b/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?.()
       },