From a5d8ebf2a6faec1266343a6fc0ca1af394ce065a Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Thu, 6 Mar 2025 13:23:28 +0000
Subject: [PATCH] Fix stale `dragItem.element` causing incorrect drag
 operations

---
 .changeset/weak-ravens-impress.md     | 5 +++++
 packages/dnd/src/hooks/useDragNode.ts | 8 +++++---
 2 files changed, 10 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/weak-ravens-impress.md

diff --git a/.changeset/weak-ravens-impress.md b/.changeset/weak-ravens-impress.md
new file mode 100644
index 0000000000..aee218da51
--- /dev/null
+++ b/.changeset/weak-ravens-impress.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Fix: `onDropNode` uses a stale `element` object for the dragged node, resulting in incorrect drag operations.
diff --git a/packages/dnd/src/hooks/useDragNode.ts b/packages/dnd/src/hooks/useDragNode.ts
index 0dacb2e38e..cbb90c5de7 100644
--- a/packages/dnd/src/hooks/useDragNode.ts
+++ b/packages/dnd/src/hooks/useDragNode.ts
@@ -31,8 +31,9 @@ export interface UseDragNodeOptions
  */
 export const useDragNode = (
   editor: PlateEditor,
-  { element, item, ...options }: UseDragNodeOptions
+  { element: staleElement, item, ...options }: UseDragNodeOptions
 ) => {
+  const elementId = staleElement.id as string;
   return useDrag<DragItemNode, unknown, { isDragging: boolean }>(
     () => ({
       collect: (monitor) => ({
@@ -47,9 +48,10 @@ export const useDragNode = (
         document.body.classList.add('dragging');
 
         const _item = typeof item === 'function' ? item(monitor) : item;
+        const [element] = editor.api.node<TElement>({ id: elementId, at: [] })!;
 
         return {
-          id: element.id as string,
+          id: elementId,
           editorId: editor.id,
           element,
           ..._item,
@@ -57,6 +59,6 @@ export const useDragNode = (
       },
       ...options,
     }),
-    []
+    [editor, elementId]
   );
 };