| 1 | /** biome-ignore-all lint/suspicious/noExplicitAny: This is a valid use case */ |
| 2 | import { DRAG_ITEM_BLOCK } from "@platejs/dnd"; |
| 3 | import { useEditorRef } from "platejs/react"; |
| 4 | import React from "react"; |
| 5 | |
| 6 | import { useDndNode, type UseDndNodeOptions } from "./useDndNode"; |
| 7 | |
| 8 | export type DraggableState<TNode extends HTMLElement = HTMLDivElement> = { |
| 9 | /** |
| 10 | * True when the element is ready to be dragged (e.g., on mouse down but |
| 11 | * before drag starts) |
| 12 | */ |
| 13 | isAboutToDrag: boolean; |
| 14 | isDragging: boolean; |
| 15 | /** The ref of the draggable element */ |
| 16 | nodeRef: React.RefObject<TNode | null>; |
| 17 | /** The ref of the multiple preview element */ |
| 18 | previewRef: React.RefObject<TNode | null>; |
| 19 | /** The ref of the draggable handle */ |
| 20 | handleRef: ( |
| 21 | elementOrNode: |
| 22 | | Element |
| 23 | | React.ReactElement<any> |
| 24 | | React.RefObject<any> |
| 25 | | null, |
| 26 | ) => void; |
| 27 | }; |
| 28 | |
| 29 | export const useDraggable = <TNode extends HTMLElement = HTMLDivElement>( |
| 30 | props: UseDndNodeOptions, |
| 31 | ): DraggableState<TNode> => { |
| 32 | const { type = DRAG_ITEM_BLOCK, canCreateColumns, onDropHandler } = props; |
| 33 | |
| 34 | const editor = useEditorRef(); |
| 35 | |
| 36 | const nodeRef = React.useRef<TNode>(null); |
| 37 | |
| 38 | const multiplePreviewRef = React.useRef<TNode>(null); |
| 39 | |
| 40 | if (!editor.plugins.dnd) return {} as any; |
| 41 | |
| 42 | // biome-ignore lint/correctness/useHookAtTopLevel: We don't need to calculate anything when props are not available |
| 43 | const { dragRef, isAboutToDrag, isDragging } = useDndNode({ |
| 44 | multiplePreviewRef, |
| 45 | nodeRef, |
| 46 | type, |
| 47 | onDropHandler, |
| 48 | canCreateColumns, |
| 49 | ...props, |
| 50 | }); |
| 51 | |
| 52 | return { |
| 53 | isAboutToDrag, |
| 54 | isDragging, |
| 55 | nodeRef, |
| 56 | previewRef: multiplePreviewRef, |
| 57 | handleRef: dragRef, |
| 58 | }; |
| 59 | }; |
| 60 |