Merge pull request #4146 from udecode/fix/stale-drag-item-element

Fix stale `dragItem.element` causing incorrect drag operations

Author: zbeyens

.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.

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,16 +48,17 @@ 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,
         };
       },
       ...options,
     }),
-    []
+    [editor, elementId]
   );
 };