From 4e6d43bbfb488d2987f71ad15732af8d25b9897a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 20 Apr 2021 17:18:59 +0200
Subject: [PATCH] fix: fix a bug when dragging node views

---
 packages/core/src/NodeView.ts | 34 ++++++++++++++++++++++++----------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/core/src/NodeView.ts b/packages/core/src/NodeView.ts
index 875a3e54..f4bfe96f 100644
--- a/packages/core/src/NodeView.ts
+++ b/packages/core/src/NodeView.ts
@@ -56,25 +56,39 @@ export class NodeView<Component, Editor extends CoreEditor = CoreEditor> impleme
   }
 
   onDragStart(event: DragEvent) {
-    if (!this.dom) {
-      return
-    }
-
     const { view } = this.editor
     const target = (event.target as HTMLElement)
 
-    if (this.contentDOM?.contains(target)) {
+    // get the drag handle element
+    // `closest` is not available for text nodes so we may have to use its parent
+    const dragHandle = target.nodeType === 3
+      ? target.parentElement?.closest('[data-drag-handle]')
+      : target.closest('[data-drag-handle]')
+
+    if (
+      !this.dom
+      || this.contentDOM?.contains(target)
+      || !dragHandle
+    ) {
       return
     }
 
-    const domBox = this.dom.getBoundingClientRect()
-    const handleBox = target.getBoundingClientRect()
-    const x = handleBox.x - domBox.x + event.offsetX
-    const y = handleBox.y - domBox.y + event.offsetY
+    let x = 0
+    let y = 0
+
+    // calculate offset for drag element if we use a different drag handle element
+    if (this.dom !== dragHandle) {
+      const domBox = this.dom.getBoundingClientRect()
+      const handleBox = dragHandle.getBoundingClientRect()
+
+      x = handleBox.x - domBox.x + event.offsetX
+      y = handleBox.y - domBox.y + event.offsetY
+    }
 
-    // sometimes `event.target` is not the `dom` element
     event.dataTransfer?.setDragImage(this.dom, x, y)
 
+    // we need to tell ProseMirror that we want to move the whole node
+    // so we create a NodeSelection
     const selection = NodeSelection.create(view.state.doc, this.getPos())
     const transaction = view.state.tr.setSelection(selection)