Merge pull request #4020 from udecode/fix/dnd-file

Fix dnd from file system
udecode · Jan 23, 2025 · 18d8271 · 18d8271
2 parents b169512 + ffd171c
commit 18d8271
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 16 deletions.
diff --git a/.changeset/wet-doors-perform.md b/.changeset/wet-doors-perform.md
@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Fix dnd from file system
diff --git a/packages/dnd/src/hooks/useDropNode.ts b/packages/dnd/src/hooks/useDropNode.ts
@@ -98,7 +98,7 @@ export const useDropNode = (
       if (!(dragItem as ElementDragItemNode).id) {
         const result = getDropPath(editor, {
           canDropNode,
-          dragItem: dragItem as any,
+          dragItem,
           element,
           monitor,
           nodeRef,

diff --git a/packages/dnd/src/transforms/onDropNode.ts b/packages/dnd/src/transforms/onDropNode.ts
@@ -9,7 +9,7 @@ import {
 } from '@udecode/plate';
 
 import type { UseDropNodeOptions } from '../hooks';
-import type { ElementDragItemNode } from '../types';
+import type { DragItemNode, ElementDragItemNode } from '../types';
 
 import { getHoverDirection } from '../utils';
 
@@ -24,7 +24,7 @@ export const getDropPath = (
     nodeRef,
     orientation = 'vertical',
   }: {
-    dragItem: ElementDragItemNode;
+    dragItem: DragItemNode;
     monitor: DropTargetMonitor;
   } & Pick<
     UseDropNodeOptions,
@@ -41,28 +41,38 @@ export const getDropPath = (
 
   if (!direction) return;
 
-  const dragPath = editor.api.findPath(dragItem.element);
-
-  if (!dragPath) return;
-
-  const dragEntry: NodeEntry<TElement> = [dragItem.element, dragPath];
+  let dragEntry: NodeEntry<TElement> | undefined;
+  let dropEntry: NodeEntry<TElement> | undefined;
 
-  const hoveredPath = editor.api.findPath(element);
+  if ('element' in dragItem) {
+    const dragPath = editor.api.findPath(dragItem.element);
+    const hoveredPath = editor.api.findPath(element);
 
-  if (!hoveredPath) return;
-
-  const dropEntry: NodeEntry<TElement> = [element, hoveredPath];
+    if (!dragPath || !hoveredPath) return;
 
+    dragEntry = [dragItem.element, dragPath];
+    dropEntry = [element, hoveredPath];
+  } else {
+    dropEntry = editor.api.node<TElement>({ id: element.id as string, at: [] });
+  }
   if (!dropEntry) return;
-  if (canDropNode && !canDropNode({ dragEntry, dragItem, dropEntry, editor })) {
+  if (
+    canDropNode &&
+    dragEntry &&
+    !canDropNode({ dragEntry, dragItem, dropEntry, editor })
+  ) {
     return;
   }
 
   let dropPath: Path | undefined;
 
+  // if drag from file system use [] as default path
+  const dragPath = dragEntry?.[1];
+  const hoveredPath = dropEntry[1];
+
   // Treat 'right' like 'bottom' (after hovered)
   // Treat 'left' like 'top' (before hovered)
-  if (direction === 'bottom' || direction === 'right') {
+  if (dragPath && (direction === 'bottom' || direction === 'right')) {
     // Insert after hovered node
     dropPath = hoveredPath;
 
@@ -74,11 +84,12 @@ export const getDropPath = (
     dropPath = [...hoveredPath.slice(0, -1), hoveredPath.at(-1)! - 1];
 
     // If the dragged node is already right before hovered node, no change
-    if (PathApi.equals(dragPath, dropPath)) return;
+    if (dragPath && PathApi.equals(dragPath, dropPath)) return;
   }
 
   const _dropPath = dropPath as Path;
   const before =
+    dragPath &&
     PathApi.isBefore(dragPath, _dropPath) &&
     PathApi.isSibling(dragPath, _dropPath);
   const to = before ? _dropPath : PathApi.next(_dropPath);

diff --git a/packages/dnd/src/transforms/onHoverNode.ts b/packages/dnd/src/transforms/onHoverNode.ts
@@ -32,7 +32,7 @@ export const onHoverNode = (
   // Check if the drop would actually move the node.
   const result = getDropPath(editor, {
     canDropNode,
-    dragItem: dragItem as any,
+    dragItem,
     element,
     monitor,
     nodeRef,