Column Nodes

1'use client';
2 
3import * as React from 'react';
4 
5import type { TColumnElement } from 'platejs';
6import type { PlateElementProps } from 'platejs/react';
7 
8import { useDraggable, useDropLine } from '@platejs/dnd';
9import { setColumns } from '@platejs/layout';
10import { ResizableProvider } from '@platejs/resizable';
11import { BlockSelectionPlugin } from '@platejs/selection/react';
12import { useComposedRef } from '@udecode/cn';
13import { type LucideProps, Trash2Icon } from 'lucide-react';
14import { GripHorizontal } from 'lucide-react';
15import { PathApi } from 'platejs';
16import {
17  PlateElement,
18  useEditorRef,
19  useEditorSelector,
20  useElement,
21  useFocusedLast,
22  usePluginOption,
23  useReadOnly,
24  useRemoveNodeButton,
25  useSelected,
26  withHOC,
27} from 'platejs/react';
28 
29import { Button } from '@/components/ui/button';
30import {
31  Popover,
32  PopoverAnchor,
33  PopoverContent,
34} from '@/components/ui/popover';
35import { Separator } from '@/components/ui/separator';
36import {
37  Tooltip,
38  TooltipContent,
39  TooltipProvider,
40  TooltipTrigger,
41} from '@/components/ui/tooltip';
42import { cn } from '@/lib/utils';
43 
44export const ColumnElement = withHOC(
45  ResizableProvider,
46  function ColumnElement(props: PlateElementProps<TColumnElement>) {
47    const { width } = props.element;
48    const readOnly = useReadOnly();
49    const isSelectionAreaVisible = usePluginOption(
50      BlockSelectionPlugin,
51      'isSelectionAreaVisible'
52    );
53 
54    const { isDragging, nodeRef, previewRef, handleRef } = useDraggable({
55      element: props.element,
56      orientation: 'horizontal',
57      type: 'column',
58      canDropNode: ({ dragEntry, dropEntry }) =>
59        PathApi.equals(
60          PathApi.parent(dragEntry[1]),
61          PathApi.parent(dropEntry[1])
62        ),
63    });
64 
65    return (
66      <div className="group/column relative" style={{ width: width ?? '100%' }}>
67        {!readOnly && !isSelectionAreaVisible && (
68          <div
69            ref={handleRef}
70            className={cn(
71              '-translate-x-1/2 -translate-y-1/2 absolute top-2 left-1/2 z-50',
72              'pointer-events-auto flex items-center',
73              'opacity-0 transition-opacity group-hover/column:opacity-100'
74            )}
75          >
76            <ColumnDragHandle />
77          </div>
78        )}
79 
80        <PlateElement
81          {...props}
82          ref={useComposedRef(props.ref, previewRef, nodeRef)}
83          className="h-full px-2 pt-2 group-first/column:pl-0 group-last/column:pr-0"
84        >
85          <div
86// … truncated