Merge pull request udecode#4595 from DND-IT/enable-dnd-between-editors

Author: zbeyens

.changeset/swift-moons-fetch.md

@@ -0,0 +1,5 @@
+---
+'@platejs/dnd': patch
+---
+
+Enable dnd between editors

packages/dnd/src/transforms/onDropNode.spec.ts

@@ -19,7 +19,11 @@ describe('onDropNode', () => {
   const monitor = { canDrop: () => true } as DropTargetMonitor;
   const nodeRef = {};
   const dragElement = { id: 'drag' } as unknown as TElement;
-  const dragItem: DragItemNode = { id: 'drag', element: dragElement };
+  const dragItem: DragItemNode = {
+    id: 'drag',
+    editorId: editor.id,
+    element: dragElement,
+  };
 
   const hoverElement = { id: 'hover' } as unknown as TElement;
 

packages/dnd/src/transforms/onDropNode.ts

@@ -123,30 +123,34 @@ export const onDropNode = (
 
   const { dragPath, to } = result;
 
-  // Check if we're dragging multiple nodes
-  const draggedIds = Array.isArray(dragItem.id) ? dragItem.id : [dragItem.id];
-
-  if (draggedIds.length > 1) {
-    // Handle multi-node drop - get elements by their IDs and sort them
-    const elements: TElement[] = [];
-
-    draggedIds.forEach((id) => {
-      const entry = editor.api.node<TElement>({ id, at: [] });
-      if (entry) {
-        elements.push(entry[0]);
-      }
-    });
-
-    editor.tf.moveNodes({
-      at: [],
-      to,
-      match: (n) => elements.some((element) => element.id === n.id),
-    });
+  if (dragItem.editorId === editor.id) {
+    // Check if we're dragging multiple nodes
+    const draggedIds = Array.isArray(dragItem.id) ? dragItem.id : [dragItem.id];
+
+    if (draggedIds.length > 1) {
+      // Handle multi-node drop - get elements by their IDs and sort them
+      const elements: TElement[] = [];
+
+      draggedIds.forEach((id) => {
+        const entry = editor.api.node<TElement>({ id, at: [] });
+        if (entry) {
+          elements.push(entry[0]);
+        }
+      });
+
+      editor.tf.moveNodes({
+        at: [],
+        to,
+        match: (n) => elements.some((element) => element.id === n.id),
+      });
+    } else {
+      // Single node drop
+      editor.tf.moveNodes({
+        at: dragPath,
+        to,
+      });
+    }
   } else {
-    // Single node drop
-    editor.tf.moveNodes({
-      at: dragPath,
-      to,
-    });
+    editor.tf.insertNodes(dragItem.element, { at: to });
   }
 };

packages/dnd/src/transforms/onHoverNode.spec.ts

@@ -40,7 +40,11 @@ describe('onHoverNode', () => {
   const monitor = {} as DropTargetMonitor;
   const nodeRef = {};
   const dragElement = { id: 'drag' } as unknown as TElement;
-  const dragItem: DragItemNode = { id: 'drag', element: dragElement };
+  const dragItem: DragItemNode = {
+    id: 'drag',
+    editorId: editor.id,
+    element: dragElement,
+  };
 
   const hoverElement = { id: 'hover' } as unknown as TElement;
 

packages/dnd/src/types.ts

@@ -10,6 +10,7 @@ export interface ElementDragItemNode {
   /** Required to identify the node(s). */
   id: string[] | string;
   [key: string]: unknown;
+  editorId: string;
   element: TElement;
 }
 

packages/dnd/src/utils/getHoverDirection.spec.ts

@@ -17,7 +17,11 @@ describe('getHoverDirection', () => {
   } as unknown as DropTargetMonitor;
 
   const dragElement = { id: 'drag' } as unknown as TElement;
-  const dragItem: DragItemNode = { id: 'drag', element: dragElement };
+  const dragItem: DragItemNode = {
+    id: 'drag',
+    editorId: 'editor',
+    element: dragElement,
+  };
 
   const hoverElement = { id: 'hover' } as unknown as TElement;