refactoring

packages/vue/src/VueRenderer.ts

@@ -30,8 +30,6 @@ class VueNodeView implements NodeView {
     this.getPos = props.getPos
     this.createUniqueId()
     this.mount(component)
-
-    document.addEventListener('dragend', this.onDragEnd)
   }
 
   createUniqueId() {
@@ -39,9 +37,8 @@ class VueNodeView implements NodeView {
   }
 
   createNodeViewWrapper() {
-    const nodeview = this
-    const { view } = this.editor
-    const { getPos } = this
+    const { handleDragStart } = this
+    const dragstart = handleDragStart.bind(this)
 
     return Vue.extend({
       props: {
@@ -56,29 +53,8 @@ class VueNodeView implements NodeView {
             style: {
               whiteSpace: 'normal',
             },
-            // attrs: {
-            //   // draggable: false,
-            //   contenteditable: false,
-            // },
             on: {
-              dragstart: (event: Event) => {
-                const target = (event.target as HTMLElement)
-
-                if (nodeview.contentDOM?.contains(target)) {
-                  return
-                }
-
-                view.dispatch(view.state.tr.setSelection(NodeSelection.create(view.state.doc, getPos())))
-              },
-              dragend: (event: Event) => {
-                const target = (event.target as HTMLElement)
-
-                if (nodeview.contentDOM?.contains(target)) {
-                  return
-                }
-
-                nodeview.isDragging = false
-              },
+              dragstart,
             },
           },
           this.$slots.default,
@@ -87,6 +63,20 @@ class VueNodeView implements NodeView {
     })
   }
 
+  handleDragStart(event: Event) {
+    const { view } = this.editor
+    const target = (event.target as HTMLElement)
+
+    if (this.contentDOM?.contains(target)) {
+      return
+    }
+
+    const selection = NodeSelection.create(view.state.doc, this.getPos())
+    const transaction = view.state.tr.setSelection(selection)
+
+    view.dispatch(transaction)
+  }
+
   createNodeViewContent() {
     const { id } = this
 
@@ -157,49 +147,38 @@ class VueNodeView implements NodeView {
   stopEvent(event: Event) {
     const target = (event.target as HTMLElement)
     const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
+
+    // ignore all events from child nodes
+    if (!isInElement) {
+      return false
+    }
+
     const isDraggable = this.node.type.spec.draggable
     const isCopyEvent = event.type === 'copy'
     const isPasteEvent = event.type === 'paste'
     const isCutEvent = event.type === 'cut'
     const isDragEvent = event.type.startsWith('drag') || event.type === 'drop'
 
-    if (!isInElement) {
-      return false
-    }
-
-    if (isDragEvent && !this.isDragging) {
+    if (isDraggable && isDragEvent && !this.isDragging) {
       event.preventDefault()
       return false
     }
 
+    // we have to store that dragging started
     if (isDraggable && !this.isDragging && event.type === 'mousedown') {
       const dragHandle = target.closest('[data-drag-handle]')
-      // const isValidDragHandle = dragHandle
-      //   && (this.dom === dragHandle || (this.dom.contains(dragHandle) && !this.contentDOM?.contains(dragHandle)))
       const isValidDragHandle = dragHandle
         && (this.dom === dragHandle || (this.dom.contains(dragHandle)))
 
       if (isValidDragHandle) {
         this.isDragging = true
-        // this.isDragging = true
-        // document.addEventListener('dragend', (e: Event) => {
-        //   console.log('DRAGEEEND')
-        //   // const t = (e.target as HTMLElement)
-        //   // if (t === this.dom) {
-        //   //   console.log('JEP')
-        //   // } else {
-        //   //   console.log('NOPE')
-        //   // }
-        //   // // if (t === this.dom) {
-        //   // //   this.isDragging = false
-        //   // // }
-        //   this.isDragging = false
-        // }, { once: true })
-        // console.log('BIND EVENT', this.dom)
-        // document.addEventListener('dragend', this.onDragEnd, { once: true })
+        document.addEventListener('dragend', () => {
+          this.isDragging = false
+        }, { once: true })
       }
     }
 
+    // these events are handled by prosemirror
     if (this.isDragging || isCopyEvent || isPasteEvent || isCutEvent) {
       return false
     }
@@ -207,18 +186,6 @@ class VueNodeView implements NodeView {
     return true
   }
 
-  onDragEnd(event: Event) {
-    // console.log('ONDRAGEND')
-    // const target = (event.target as HTMLElement)
-
-    // if (target === this.dom) {
-    //   console.log('JEP')
-    //   this.isDragging = false
-    // } else {
-    //   console.log('NOPE')
-    // }
-  }
-
   ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {
     if (mutation.type === 'selection') {
       return true
@@ -234,21 +201,8 @@ class VueNodeView implements NodeView {
     return contentDOMHasChanged
   }
 
-  selectNode() {
-    // this.updateComponentProps({
-    //   selected: true,
-    // })
-  }
-
-  deselectNode() {
-    // this.updateComponentProps({
-    //   selected: false,
-    // })
-  }
-
   destroy() {
     this.vm.$destroy()
-    document.removeEventListener('dragend', this.onDragEnd)
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {