diff --git a/.changeset/wet-doors-perform.md b/.changeset/wet-doors-perform.md new file mode 100644 index 0000000000..f734bef46a --- /dev/null +++ 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 index 7933acf686..db5d904f54 100644 --- 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 index e32af0e27b..bbcb009fe1 100644 --- 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 = [dragItem.element, dragPath]; + let dragEntry: NodeEntry | undefined; + let dropEntry: NodeEntry | 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 = [element, hoveredPath]; + if (!dragPath || !hoveredPath) return; + dragEntry = [dragItem.element, dragPath]; + dropEntry = [element, hoveredPath]; + } else { + dropEntry = editor.api.node({ 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 index d110a2d669..96634016a7 100644 --- 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,