Block Draggable

1'use client';
2 
3import * as React from 'react';
4 
5import { DndPlugin, useDraggable, useDropLine } from '@platejs/dnd';
6import { expandListItemsWithChildren } from '@platejs/list';
7import { BlockSelectionPlugin } from '@platejs/selection/react';
8import { GripVertical } from 'lucide-react';
9import { type TElement, getPluginByType, isType, KEYS } from 'platejs';
10import {
11  type PlateEditor,
12  type PlateElementProps,
13  type RenderNodeWrapper,
14  MemoizedChildren,
15  useEditorRef,
16  useElement,
17  usePluginOption,
18} from 'platejs/react';
19import { useSelected } from 'platejs/react';
20 
21import { Button } from '@/components/ui/button';
22import {
23  Tooltip,
24  TooltipContent,
25  TooltipTrigger,
26} from '@/components/ui/tooltip';
27import { cn } from '@/lib/utils';
28 
29const UNDRAGGABLE_KEYS = [KEYS.column, KEYS.tr, KEYS.td];
30 
31export const BlockDraggable: RenderNodeWrapper = (props) => {
32  const { editor, element, path } = props;
33 
34  const enabled = React.useMemo(() => {
35    if (editor.dom.readOnly) return false;
36 
37    if (path.length === 1 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
38      return true;
39    }
40    if (path.length === 3 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
41      const block = editor.api.some({
42        at: path,
43        match: {
44          type: editor.getType(KEYS.column),
45        },
46      });
47 
48      if (block) {
49        return true;
50      }
51    }
52    if (path.length === 4 && !isType(editor, element, UNDRAGGABLE_KEYS)) {
53      const block = editor.api.some({
54        at: path,
55        match: {
56          type: editor.getType(KEYS.table),
57        },
58      });
59 
60      if (block) {
61        return true;
62      }
63    }
64 
65    return false;
66  }, [editor, element, path]);
67 
68  if (!enabled) return;
69 
70  return (props) => <Draggable {...props} />;
71};
72 
73function Draggable(props: PlateElementProps) {
74  const { children, editor, element, path } = props;
75  const blockSelectionApi = editor.getApi(BlockSelectionPlugin).blockSelection;
76 
77  const { isAboutToDrag, isDragging, nodeRef, previewRef, handleRef } =
78    useDraggable({
79      element,
80      onDropHandler: (_, { dragItem }) => {
81        const id = (dragItem as { id: string[] | string }).id;
82 
83        if (blockSelectionApi) {
84          blockSelectionApi.add(id);
85        }
86        resetPreview();
87      },
88    });
89 
90  const isInColumn = path.length === 3;
91  const isInTable = path.length === 4;
92 
93  const [previewTop, setPreviewTop] = React.useState(0);
94 
95  const resetPreview = () => {
96    if (previewRef.current) {
97// … truncated