From f4368f902156c82fffb28990f328767b4494525b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 24 Nov 2020 11:40:09 +0100
Subject: [PATCH] improve support for drag and drop

---
 .../src/demos/Examples/NodeView/Component.vue |  1 +
 packages/vue/src/VueRenderer.ts               | 33 +++++++++++++++----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/docs/src/demos/Examples/NodeView/Component.vue b/docs/src/demos/Examples/NodeView/Component.vue
index e03e04903..386c68a6e 100644
--- a/docs/src/demos/Examples/NodeView/Component.vue
+++ b/docs/src/demos/Examples/NodeView/Component.vue
@@ -6,6 +6,7 @@
     <div contenteditable="false">
       checked: {{ node.attrs.checked }}
     </div>
+    <div contenteditable="false" style="width: 20px; height: 20px; background: red" data-drag-handle />
     <node-view-content />
   </node-view-wrapper>
 </template>
diff --git a/packages/vue/src/VueRenderer.ts b/packages/vue/src/VueRenderer.ts
index 2d132f5ca..5cdb96e2c 100644
--- a/packages/vue/src/VueRenderer.ts
+++ b/packages/vue/src/VueRenderer.ts
@@ -23,6 +23,8 @@ class VueNodeView implements NodeView {
 
   getPos!: any
 
+  isDragging = false
+
   constructor(component: Vue | VueConstructor, props: NodeViewRendererProps) {
     this.editor = props.editor
     this.extension = props.extension
@@ -38,7 +40,6 @@ class VueNodeView implements NodeView {
 
   createNodeViewWrapper() {
     return Vue.extend({
-      inheritAttrs: false,
       props: {
         as: {
           type: String,
@@ -125,14 +126,32 @@ class VueNodeView implements NodeView {
     return this.vm.$el.querySelector(`#${this.id}`)
   }
 
-  stopEvent(event: Event): boolean {
+  stopEvent(event: Event) {
     const isDraggable = this.node.type.spec.draggable
-    const isCopy = event.type === 'copy'
-    const isPaste = event.type === 'paste'
-    const isCut = event.type === 'cut'
-    const isDrag = event.type.startsWith('drag') || event.type === 'drop'
+    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 ((isDraggable && isDrag) || isCopy || isPaste || isCut) {
+    if (isDragEvent && !this.isDragging) {
+      event.preventDefault()
+    }
+
+    if (isDraggable && !this.isDragging && event.type === 'mousedown') {
+      const target = (event.target as HTMLElement)
+      const dragHandle = target.closest('[data-drag-handle]')
+      const isValidDragHandle = dragHandle
+        && (this.dom === dragHandle || this.dom.contains(dragHandle))
+
+      if (isValidDragHandle) {
+        this.isDragging = true
+        document.addEventListener('dragend', () => {
+          this.isDragging = false
+        }, { once: true })
+      }
+    }
+
+    if (this.isDragging || isCopyEvent || isPasteEvent || isCutEvent) {
       return false
     }