From 0b19e7d32758dbd2429d4a52d7c063a3f27059ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Wed, 25 Nov 2020 14:49:36 +0100
Subject: [PATCH] improve drag

---
 packages/vue/src/VueRenderer.ts | 35 ++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index e2a2116a..039f14b9 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -70,6 +70,15 @@ class VueNodeView implements NodeView {
 
                 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
+              },
             },
           },
           this.$slots.default,
@@ -147,23 +156,20 @@ class VueNodeView implements NodeView {
 
   stopEvent(event: Event) {
     const target = (event.target as HTMLElement)
+    const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
     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'
 
-    const isInElement = this.dom.contains(target) && !this.contentDOM?.contains(target)
-
-    // console.log({ isInElement })
     if (!isInElement) {
       return false
     }
 
-    // console.log(this.isDragging, event.type)
-
     if (isDragEvent && !this.isDragging) {
       event.preventDefault()
+      return false
     }
 
     if (isDraggable && !this.isDragging && event.type === 'mousedown') {
@@ -175,6 +181,7 @@ class VueNodeView implements NodeView {
 
       if (isValidDragHandle) {
         this.isDragging = true
+        // this.isDragging = true
         // document.addEventListener('dragend', (e: Event) => {
         //   console.log('DRAGEEEND')
         //   // const t = (e.target as HTMLElement)
@@ -188,7 +195,7 @@ class VueNodeView implements NodeView {
         //   // // }
         //   this.isDragging = false
         // }, { once: true })
-        console.log('BIND EVENT', this.dom)
+        // console.log('BIND EVENT', this.dom)
         // document.addEventListener('dragend', this.onDragEnd, { once: true })
       }
     }
@@ -201,15 +208,15 @@ class VueNodeView implements NodeView {
   }
 
   onDragEnd(event: Event) {
-    console.log('ONDRAGEND')
-    const target = (event.target as HTMLElement)
+    // console.log('ONDRAGEND')
+    // const target = (event.target as HTMLElement)
 
-    if (target === this.dom) {
-      console.log('JEP')
-      this.isDragging = false
-    } else {
-      console.log('NOPE')
-    }
+    // if (target === this.dom) {
+    //   console.log('JEP')
+    //   this.isDragging = false
+    // } else {
+    //   console.log('NOPE')
+    // }
   }
 
   ignoreMutation(mutation: MutationRecord | { type: 'selection'; target: Element }) {