From 5dd7301e62c2f0cb933194059da306f3fcfa376c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Thu, 27 Jun 2019 22:32:20 +0200
Subject: [PATCH] add support for a custom drag handle for node views

---
 .../tiptap-extensions/src/nodes/TodoItem.js   |  2 +-
 packages/tiptap/src/Utils/ComponentView.js    | 24 ++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/tiptap-extensions/src/nodes/TodoItem.js b/packages/tiptap-extensions/src/nodes/TodoItem.js
index a4dff5a7..ed9b47a5 100644
--- a/packages/tiptap-extensions/src/nodes/TodoItem.js
+++ b/packages/tiptap-extensions/src/nodes/TodoItem.js
@@ -24,7 +24,7 @@ export default class TodoItem extends Node {
         },
       },
       template: `
-        <li :data-type="node.type.name" :data-done="node.attrs.done.toString()">
+        <li :data-type="node.type.name" :data-done="node.attrs.done.toString()" data-drag-handle>
           <span class="todo-checkbox" contenteditable="false" @click="onChange"></span>
           <div class="todo-content" ref="content" :contenteditable="view.editable.toString()"></div>
         </li>
diff --git a/packages/tiptap/src/Utils/ComponentView.js b/packages/tiptap/src/Utils/ComponentView.js
index e50ebc34..e22cc30e 100644
--- a/packages/tiptap/src/Utils/ComponentView.js
+++ b/packages/tiptap/src/Utils/ComponentView.js
@@ -23,6 +23,7 @@ export default class ComponentView {
     this.isNode = !!this.node.marks
     this.isMark = !this.isNode
     this.getPos = this.isMark ? this.getMarkPos : getPos
+    this.captureEvents = true
     this.dom = this.createDOM()
     this.contentDOM = this.vm.$refs.content
   }
@@ -123,14 +124,31 @@ export default class ComponentView {
       return this.extension.stopEvent(event)
     }
 
-    const isPaste = event.type === 'paste'
     const draggable = !!this.extension.schema.draggable
 
-    if (draggable || isPaste) {
+    // support a custom drag handle
+    if (draggable && event.type === 'mousedown') {
+      const dragHandle = event.target.closest
+        && event.target.closest('[data-drag-handle]')
+      const isValidDragHandle = dragHandle
+        && (this.dom === dragHandle || this.dom.contains(dragHandle))
+
+      if (isValidDragHandle) {
+        this.captureEvents = false
+        document.addEventListener('dragend', () => {
+          this.captureEvents = true
+        }, { once: true })
+      }
+    }
+
+    const isPaste = event.type === 'paste'
+    const isDrag = event.type.startsWith('drag') || event.type === 'drop'
+
+    if ((draggable && isDrag) || isPaste) {
       return false
     }
 
-    return true
+    return this.captureEvents
   }
 
   selectNode() {