supongamos que todo bien

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      previewRef.current.replaceChildren();
98      previewRef.current?.classList.add('hidden');
99    }
100  };
101
102  // clear up virtual multiple preview when drag end
103  React.useEffect(() => {
104    if (!isDragging) {
105      resetPreview();
106    }
107    // eslint-disable-next-line react-hooks/exhaustive-deps
108  }, [isDragging]);
109
110  React.useEffect(() => {
111    if (isAboutToDrag) {
112      previewRef.current?.classList.remove('opacity-0');
113    }
114    // eslint-disable-next-line react-hooks/exhaustive-deps
115  }, [isAboutToDrag]);
116
117  const [dragButtonTop, setDragButtonTop] = React.useState(0);
118
119  return (
120    <div
121      className={cn(
122        'relative',
123        isDragging && 'opacity-50',
124        getPluginByType(editor, element.type)?.node.isContainer
125          ? 'group/container'
126          : 'group'
127      )}
128      onMouseEnter={() => {
129        if (isDragging) return;
130        setDragButtonTop(calcDragButtonTop(editor, element));
131      }}
132    >
133      {!isInTable && (
134        <Gutter>
135          <div
136            className={cn(
137              'slate-blockToolbarWrapper',
138              'flex h-[1.5em]',
139              isInColumn && 'h-4'
140            )}
141          >
142            <div
143              className={cn(
144                'slate-blockToolbar relative w-4.5',
145                'pointer-events-auto mr-1 flex items-center',
146                isInColumn && 'mr-1.5'
147              )}
148            >
149              <Button
150                ref={handleRef}
151                variant="ghost"
152                className="-left-0 absolute h-6 w-full p-0"
153                style={{ top: `${dragButtonTop + 3}px` }}
154                data-plate-prevent-deselect
155              >
156                <DragHandle
157                  isDragging={isDragging}
158                  previewRef={previewRef}
159                  resetPreview={resetPreview}
160                  setPreviewTop={setPreviewTop}
161                />
162              </Button>
163            </div>
164          </div>
165        </Gutter>
166      )}
167
168      <div
169        ref={previewRef}
170        className={cn('-left-0 absolute hidden w-full')}
171        style={{ top: `${-previewTop}px` }}
172        contentEditable={false}
173      />
174
175      <div
176        ref={nodeRef}
177        className="slate-blockWrapper flow-root"
178        onContextMenu={(event) =>
179          editor
180            .getApi(BlockSelectionPlugin)
181            .blockSelection.addOnContextMenu({ element, event })
182        }
183      >
184        <MemoizedChildren>{children}</MemoizedChildren>
185        <DropLine />
186      </div>
187    </div>
188  );
189}
190
191function Gutter({
192  children,
193  className,
194  ...props
195}: React.ComponentProps<'div'>) {
196  const editor = useEditorRef();
197  const element = useElement();
198  const isSelectionAreaVisible = usePluginOption(
199    BlockSelectionPlugin,
200    'isSelectionAreaVisible'
201  );
202  const selected = useSelected();
203
204  return (
205    <div
206      {...props}
207      className={cn(
208        'slate-gutterLeft',
209        '-translate-x-full absolute top-0 z-50 flex h-full cursor-text hover:opacity-100 sm:opacity-0',
210        getPluginByType(editor, element.type)?.node.isContainer
211          ? 'group-hover/container:opacity-100'
212          : 'group-hover:opacity-100',
213        isSelectionAreaVisible && 'hidden',
214        !selected && 'opacity-0',
215        className
216      )}
217      contentEditable={false}
218    >
219      {children}
220    </div>
221  );
222}
223
224const DragHandle = React.memo(function DragHandle({
225  isDragging,
226  previewRef,
227  resetPreview,
228  setPreviewTop,
229}: {
230  isDragging: boolean;
231  previewRef: React.RefObject<HTMLDivElement | null>;
232  resetPreview: () => void;
233  setPreviewTop: (top: number) => void;
234}) {
235  const editor = useEditorRef();
236  const element = useElement();
237
238  return (
239    <Tooltip>
240      <TooltipTrigger asChild>
241        <div
242          className="flex size-full items-center justify-center"
243          onClick={(e) => {
244            e.preventDefault();
245            editor.getApi(BlockSelectionPlugin).blockSelection.focus();
246          }}
247          onMouseDown={(e) => {
248            resetPreview();
249
250            if ((e.button !== 0 && e.button !== 2) || e.shiftKey) return;
251
252            const blockSelection = editor
253              .getApi(BlockSelectionPlugin)
254              .blockSelection.getNodes({ sort: true });
255
256            let selectionNodes =
257              blockSelection.length > 0
258                ? blockSelection
259                : editor.api.blocks({ mode: 'highest' });
260
261            // If current block is not in selection, use it as the starting point
262            if (!selectionNodes.some(([node]) => node.id === element.id)) {
263              selectionNodes = [[element, editor.api.findPath(element)!]];
264            }
265
266            // Process selection nodes to include list children
267            const blocks = expandListItemsWithChildren(
268              editor,
269              selectionNodes
270            ).map(([node]) => node);
271
272            if (blockSelection.length === 0) {
273              editor.tf.blur();
274              editor.tf.collapse();
275            }
276
277            const elements = createDragPreviewElements(editor, blocks);
278            previewRef.current?.append(...elements);
279            previewRef.current?.classList.remove('hidden');
280            previewRef.current?.classList.add('opacity-0');
281            editor.setOption(DndPlugin, 'multiplePreviewRef', previewRef);
282
283            editor
284              .getApi(BlockSelectionPlugin)
285              .blockSelection.set(blocks.map((block) => block.id as string));
286          }}
287          onMouseEnter={() => {
288            if (isDragging) return;
289
290            const blockSelection = editor
291              .getApi(BlockSelectionPlugin)
292              .blockSelection.getNodes({ sort: true });
293
294            let selectedBlocks =
295              blockSelection.length > 0
296                ? blockSelection
297                : editor.api.blocks({ mode: 'highest' });
298
299            // If current block is not in selection, use it as the starting point
300            if (!selectedBlocks.some(([node]) => node.id === element.id)) {
301              selectedBlocks = [[element, editor.api.findPath(element)!]];
302            }
303
304            // Process selection to include list children
305            const processedBlocks = expandListItemsWithChildren(
306              editor,
307              selectedBlocks
308            );
309
310            const ids = processedBlocks.map((block) => block[0].id as string);
311
312            if (ids.length > 1 && ids.includes(element.id as string)) {
313              const previewTop = calculatePreviewTop(editor, {
314                blocks: processedBlocks.map((block) => block[0]),
315                element,
316              });
317              setPreviewTop(previewTop);
318            } else {
319              setPreviewTop(0);
320            }
321          }}
322          onMouseUp={() => {
323            resetPreview();
324          }}
325          data-plate-prevent-deselect
326          role="button"
327        >
328          <GripVertical className="text-muted-foreground" />
329        </div>
330      </TooltipTrigger>
331      <TooltipContent>Drag to move</TooltipContent>
332    </Tooltip>
333  );
334});
335
336const DropLine = React.memo(function DropLine({
337  className,
338  ...props
339}: React.ComponentProps<'div'>) {
340  const { dropLine } = useDropLine();
341
342  if (!dropLine) return null;
343
344  return (
345    <div
346      {...props}
347      className={cn(
348        'slate-dropLine',
349        'absolute inset-x-0 h-0.5 opacity-100 transition-opacity',
350        'bg-brand/50',
351        dropLine === 'top' && '-top-px',
352        dropLine === 'bottom' && '-bottom-px',
353        className
354      )}
355    />
356  );
357});
358
359const createDragPreviewElements = (
360  editor: PlateEditor,
361  blocks: TElement[]
362): HTMLElement[] => {
363  const elements: HTMLElement[] = [];
364  const ids: string[] = [];
365
366  /**
367   * Remove data attributes from the element to avoid recognized as slate
368   * elements incorrectly.
369   */
370  const removeDataAttributes = (element: HTMLElement) => {
371    Array.from(element.attributes).forEach((attr) => {
372      if (
373        attr.name.startsWith('data-slate') ||
374        attr.name.startsWith('data-block-id')
375      ) {
376        element.removeAttribute(attr.name);
377      }
378    });
379
380    Array.from(element.children).forEach((child) => {
381      removeDataAttributes(child as HTMLElement);
382    });
383  };
384
385  const resolveElement = (node: TElement, index: number) => {
386    const domNode = editor.api.toDOMNode(node)!;
387    const newDomNode = domNode.cloneNode(true) as HTMLElement;
388
389    // Apply visual compensation for horizontal scroll
390    const applyScrollCompensation = (
391      original: Element,
392      cloned: HTMLElement
393    ) => {
394      const scrollLeft = original.scrollLeft;
395
396      if (scrollLeft > 0) {
397        // Create a wrapper to handle the scroll offset
398        const scrollWrapper = document.createElement('div');
399        scrollWrapper.style.overflow = 'hidden';
400        scrollWrapper.style.width = `${original.clientWidth}px`;
401
402        // Create inner container with the full content
403        const innerContainer = document.createElement('div');
404        innerContainer.style.transform = `translateX(-${scrollLeft}px)`;
405        innerContainer.style.width = `${original.scrollWidth}px`;
406
407        // Move all children to the inner container
408        while (cloned.firstChild) {
409          innerContainer.append(cloned.firstChild);
410        }
411
412        // Apply the original element's styles to maintain appearance
413        const originalStyles = window.getComputedStyle(original);
414        cloned.style.padding = '0';
415        innerContainer.style.padding = originalStyles.padding;
416
417        scrollWrapper.append(innerContainer);
418        cloned.append(scrollWrapper);
419      }
420    };
421
422    applyScrollCompensation(domNode, newDomNode);
423
424    ids.push(node.id as string);
425    const wrapper = document.createElement('div');
426    wrapper.append(newDomNode);
427    wrapper.style.display = 'flow-root';
428
429    const lastDomNode = blocks[index - 1];
430
431    if (lastDomNode) {
432      const lastDomNodeRect = editor.api
433        .toDOMNode(lastDomNode)!
434        .parentElement!.getBoundingClientRect();
435
436      const domNodeRect = domNode.parentElement!.getBoundingClientRect();
437
438      const distance = domNodeRect.top - lastDomNodeRect.bottom;
439
440      // Check if the two elements are adjacent (touching each other)
441      if (distance > 15) {
442        wrapper.style.marginTop = `${distance}px`;
443      }
444    }
445
446    removeDataAttributes(newDomNode);
447    elements.push(wrapper);
448  };
449
450  blocks.forEach((node, index) => {
451    resolveElement(node, index);
452  });
453
454  editor.setOption(DndPlugin, 'draggingId', ids);
455
456  return elements;
457};
458
459const calculatePreviewTop = (
460  editor: PlateEditor,
461  {
462    blocks,
463    element,
464  }: {
465    blocks: TElement[];
466    element: TElement;
467  }
468): number => {
469  const child = editor.api.toDOMNode(element)!;
470  const editable = editor.api.toDOMNode(editor)!;
471  const firstSelectedChild = blocks[0];
472
473  const firstDomNode = editor.api.toDOMNode(firstSelectedChild)!;
474  // Get editor's top padding
475  const editorPaddingTop = Number(
476    window.getComputedStyle(editable).paddingTop.replace('px', '')
477  );
478
479  // Calculate distance from first selected node to editor top
480  const firstNodeToEditorDistance =
481    firstDomNode.getBoundingClientRect().top -
482    editable.getBoundingClientRect().top -
483    editorPaddingTop;
484
485  // Get margin top of first selected node
486  const firstMarginTopString = window.getComputedStyle(firstDomNode).marginTop;
487  const marginTop = Number(firstMarginTopString.replace('px', ''));
488
489  // Calculate distance from current node to editor top
490  const currentToEditorDistance =
491    child.getBoundingClientRect().top -
492    editable.getBoundingClientRect().top -
493    editorPaddingTop;
494
495  const currentMarginTopString = window.getComputedStyle(child).marginTop;
496  const currentMarginTop = Number(currentMarginTopString.replace('px', ''));
497
498  const previewElementsTopDistance =
499    currentToEditorDistance -
500    firstNodeToEditorDistance +
501    marginTop -
502    currentMarginTop;
503
504  return previewElementsTopDistance;
505};
506
507const calcDragButtonTop = (editor: PlateEditor, element: TElement): number => {
508  const child = editor.api.toDOMNode(element)!;
509
510  const currentMarginTopString = window.getComputedStyle(child).marginTop;
511  const currentMarginTop = Number(currentMarginTopString.replace('px', ''));
512
513  return currentMarginTop;
514};
515