doclific 0.1.0

package/frontend/src/components/ui/table-node.tsx

@@ -0,0 +1,656 @@
+import React from 'react';
+
+import type * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { useDraggable, useDropLine } from '@platejs/dnd';
+import {
+  BlockSelectionPlugin,
+  useBlockSelected,
+} from '@platejs/selection/react';
+import { setCellBackground } from '@platejs/table';
+import {
+  TablePlugin,
+  TableProvider,
+  useTableBordersDropdownMenuContentState,
+  useTableCellElement,
+  useTableCellElementResizable,
+  useTableElement,
+  useTableMergeState,
+} from '@platejs/table/react';
+import { PopoverAnchor } from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  CombineIcon,
+  EraserIcon,
+  Grid2X2Icon,
+  GripVertical,
+  PaintBucketIcon,
+  SquareSplitHorizontalIcon,
+  Trash2Icon,
+  XIcon,
+} from 'lucide-react';
+import {
+  type TElement,
+  type TTableCellElement,
+  type TTableElement,
+  type TTableRowElement,
+  KEYS,
+  PathApi,
+} from 'platejs';
+import {
+  type PlateElementProps,
+  PlateElement,
+  useComposedRef,
+  useEditorPlugin,
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useFocusedLast,
+  usePluginOption,
+  useReadOnly,
+  useRemoveNodeButton,
+  useSelected,
+  withHOC,
+} from 'platejs/react';
+import { useElementSelector } from 'platejs/react';
+
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Popover, PopoverContent } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+import { blockSelectionVariants } from './block-selection';
+import {
+  ColorDropdownMenuItems,
+  DEFAULT_COLORS,
+} from './font-color-toolbar-button';
+import { ResizeHandle } from './resize-handle';
+import {
+  BorderAllIcon,
+  BorderBottomIcon,
+  BorderLeftIcon,
+  BorderNoneIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+} from './table-icons';
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarMenuGroup,
+} from './toolbar';
+export const TableElement = withHOC(
+  TableProvider,
+  function TableElement({
+    children,
+    ...props
+  }: PlateElementProps<TTableElement>) {
+    const readOnly = useReadOnly();
+    const isSelectionAreaVisible = usePluginOption(
+      BlockSelectionPlugin,
+      'isSelectionAreaVisible'
+    );
+    const hasControls = !readOnly && !isSelectionAreaVisible;
+    const {
+      isSelectingCell,
+      marginLeft,
+      props: tableProps,
+    } = useTableElement();
+
+    const isSelectingTable = useBlockSelected(props.element.id as string);
+
+    const content = (
+      <PlateElement
+        {...props}
+        className={cn(
+          'overflow-x-auto py-5',
+          hasControls && '-ml-2 *:data-[slot=block-selection]:left-2'
+        )}
+        style={{ paddingLeft: marginLeft }}
+      >
+        <div className="group/table relative w-fit">
+          <table
+            className={cn(
+              'mr-0 ml-px table h-px table-fixed border-collapse',
+              isSelectingCell && 'selection:bg-transparent'
+            )}
+            {...tableProps}
+          >
+            <tbody className="min-w-full">{children}</tbody>
+          </table>
+
+          {isSelectingTable && (
+            <div className={blockSelectionVariants()} contentEditable={false} />
+          )}
+        </div>
+      </PlateElement>
+    );
+
+    if (readOnly) {
+      return content;
+    }
+
+    return <TableFloatingToolbar>{content}</TableFloatingToolbar>;
+  }
+);
+
+function TableFloatingToolbar({
+  children,
+  ...props
+}: React.ComponentProps<typeof PopoverContent>) {
+  const { tf } = useEditorPlugin(TablePlugin);
+  const selected = useSelected();
+  const element = useElement<TTableElement>();
+  const { props: buttonProps } = useRemoveNodeButton({ element });
+  const collapsedInside = useEditorSelector(
+    (editor) => selected && editor.api.isCollapsed(),
+    [selected]
+  );
+  const isFocusedLast = useFocusedLast();
+
+  const { canMerge, canSplit } = useTableMergeState();
+
+  return (
+    <Popover
+      open={isFocusedLast && (canMerge || canSplit || collapsedInside)}
+      modal={false}
+    >
+      <PopoverAnchor asChild>{children}</PopoverAnchor>
+      <PopoverContent
+        asChild
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        contentEditable={false}
+        {...props}
+      >
+        <Toolbar
+          className="scrollbar-hide flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden"
+          contentEditable={false}
+        >
+          <ToolbarGroup>
+            <ColorDropdownMenu tooltip="Background color">
+              <PaintBucketIcon />
+            </ColorDropdownMenu>
+            {canMerge && (
+              <ToolbarButton
+                onClick={() => tf.table.merge()}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Merge cells"
+              >
+                <CombineIcon />
+              </ToolbarButton>
+            )}
+            {canSplit && (
+              <ToolbarButton
+                onClick={() => tf.table.split()}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Split cell"
+              >
+                <SquareSplitHorizontalIcon />
+              </ToolbarButton>
+            )}
+
+            <DropdownMenu modal={false}>
+              <DropdownMenuTrigger asChild>
+                <ToolbarButton tooltip="Cell borders">
+                  <Grid2X2Icon />
+                </ToolbarButton>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuPortal>
+                <TableBordersDropdownMenuContent />
+              </DropdownMenuPortal>
+            </DropdownMenu>
+
+            {collapsedInside && (
+              <ToolbarGroup>
+                <ToolbarButton tooltip="Delete table" {...buttonProps}>
+                  <Trash2Icon />
+                </ToolbarButton>
+              </ToolbarGroup>
+            )}
+          </ToolbarGroup>
+
+          {collapsedInside && (
+            <ToolbarGroup>
+              <ToolbarButton
+                onClick={() => {
+                  tf.insert.tableRow({ before: true });
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Insert row before"
+              >
+                <ArrowUp />
+              </ToolbarButton>
+              <ToolbarButton
+                onClick={() => {
+                  tf.insert.tableRow();
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Insert row after"
+              >
+                <ArrowDown />
+              </ToolbarButton>
+              <ToolbarButton
+                onClick={() => {
+                  tf.remove.tableRow();
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Delete row"
+              >
+                <XIcon />
+              </ToolbarButton>
+            </ToolbarGroup>
+          )}
+
+          {collapsedInside && (
+            <ToolbarGroup>
+              <ToolbarButton
+                onClick={() => {
+                  tf.insert.tableColumn({ before: true });
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Insert column before"
+              >
+                <ArrowLeft />
+              </ToolbarButton>
+              <ToolbarButton
+                onClick={() => {
+                  tf.insert.tableColumn();
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Insert column after"
+              >
+                <ArrowRight />
+              </ToolbarButton>
+              <ToolbarButton
+                onClick={() => {
+                  tf.remove.tableColumn();
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                tooltip="Delete column"
+              >
+                <XIcon />
+              </ToolbarButton>
+            </ToolbarGroup>
+          )}
+        </Toolbar>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function TableBordersDropdownMenuContent(
+  props: React.ComponentProps<typeof DropdownMenuPrimitive.Content>
+) {
+  const editor = useEditorRef();
+  const {
+    getOnSelectTableBorder,
+    hasBottomBorder,
+    hasLeftBorder,
+    hasNoBorders,
+    hasOuterBorders,
+    hasRightBorder,
+    hasTopBorder,
+  } = useTableBordersDropdownMenuContentState();
+
+  return (
+    <DropdownMenuContent
+      className="min-w-[220px]"
+      onCloseAutoFocus={(e) => {
+        e.preventDefault();
+        editor.tf.focus();
+      }}
+      align="start"
+      side="right"
+      sideOffset={0}
+      {...props}
+    >
+      <DropdownMenuGroup>
+        <DropdownMenuCheckboxItem
+          checked={hasTopBorder}
+          onCheckedChange={getOnSelectTableBorder('top')}
+        >
+          <BorderTopIcon />
+          <div>Top Border</div>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={hasRightBorder}
+          onCheckedChange={getOnSelectTableBorder('right')}
+        >
+          <BorderRightIcon />
+          <div>Right Border</div>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={hasBottomBorder}
+          onCheckedChange={getOnSelectTableBorder('bottom')}
+        >
+          <BorderBottomIcon />
+          <div>Bottom Border</div>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={hasLeftBorder}
+          onCheckedChange={getOnSelectTableBorder('left')}
+        >
+          <BorderLeftIcon />
+          <div>Left Border</div>
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuGroup>
+        <DropdownMenuCheckboxItem
+          checked={hasNoBorders}
+          onCheckedChange={getOnSelectTableBorder('none')}
+        >
+          <BorderNoneIcon />
+          <div>No Border</div>
+        </DropdownMenuCheckboxItem>
+        <DropdownMenuCheckboxItem
+          checked={hasOuterBorders}
+          onCheckedChange={getOnSelectTableBorder('outer')}
+        >
+          <BorderAllIcon />
+          <div>Outside Borders</div>
+        </DropdownMenuCheckboxItem>
+      </DropdownMenuGroup>
+    </DropdownMenuContent>
+  );
+}
+
+function ColorDropdownMenu({
+  children,
+  tooltip,
+}: {
+  children: React.ReactNode;
+  tooltip: string;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  const editor = useEditorRef();
+  const selectedCells = usePluginOption(TablePlugin, 'selectedCells');
+
+  const onUpdateColor = React.useCallback(
+    (color: string) => {
+      setOpen(false);
+      setCellBackground(editor, { color, selectedCells: selectedCells ?? [] });
+    },
+    [selectedCells, editor]
+  );
+
+  const onClearColor = React.useCallback(() => {
+    setOpen(false);
+    setCellBackground(editor, {
+      color: null,
+      selectedCells: selectedCells ?? [],
+    });
+  }, [selectedCells, editor]);
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+      <DropdownMenuTrigger asChild>
+        <ToolbarButton tooltip={tooltip}>{children}</ToolbarButton>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="start">
+        <ToolbarMenuGroup label="Colors">
+          <ColorDropdownMenuItems
+            className="px-2"
+            colors={DEFAULT_COLORS}
+            updateColor={onUpdateColor}
+          />
+        </ToolbarMenuGroup>
+        <DropdownMenuGroup>
+          <DropdownMenuItem className="p-2" onClick={onClearColor}>
+            <EraserIcon />
+            <span>Clear</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function TableRowElement({
+  children,
+  ...props
+}: PlateElementProps<TTableRowElement>) {
+  const { element } = props;
+  const readOnly = useReadOnly();
+  const selected = useSelected();
+  const editor = useEditorRef();
+  const isSelectionAreaVisible = usePluginOption(
+    BlockSelectionPlugin,
+    'isSelectionAreaVisible'
+  );
+  const hasControls = !readOnly && !isSelectionAreaVisible;
+
+  const { isDragging, previewRef, handleRef } = useDraggable({
+    element,
+    type: element.type,
+    canDropNode: ({ dragEntry, dropEntry }) =>
+      PathApi.equals(
+        PathApi.parent(dragEntry[1]),
+        PathApi.parent(dropEntry[1])
+      ),
+    onDropHandler: (_, { dragItem }) => {
+      const dragElement = (dragItem as { element: TElement }).element;
+
+      if (dragElement) {
+        editor.tf.select(dragElement);
+      }
+    },
+  });
+
+  return (
+    <PlateElement
+      {...props}
+      ref={useComposedRef(props.ref, previewRef)}
+      as="tr"
+      className={cn('group/row', isDragging && 'opacity-50')}
+      attributes={{
+        ...props.attributes,
+        'data-selected': selected ? 'true' : undefined,
+      }}
+    >
+      {hasControls && (
+        <td className="w-2 select-none" contentEditable={false}>
+          <RowDragHandle dragRef={handleRef} />
+          <RowDropLine />
+        </td>
+      )}
+
+      {children}
+    </PlateElement>
+  );
+}
+
+function RowDragHandle({ dragRef }: { dragRef: React.Ref<any> }) {
+  const editor = useEditorRef();
+  const element = useElement();
+
+  return (
+    <Button
+      ref={dragRef}
+      variant="outline"
+      className={cn(
+        '-translate-y-1/2 absolute top-1/2 left-0 z-51 h-6 w-4 p-0 focus-visible:ring-0 focus-visible:ring-offset-0',
+        'cursor-grab active:cursor-grabbing',
+        'opacity-0 transition-opacity duration-100 group-hover/row:opacity-100 group-has-data-[resizing="true"]/row:opacity-0'
+      )}
+      onClick={() => {
+        editor.tf.select(element);
+      }}
+    >
+      <GripVertical className="text-muted-foreground" />
+    </Button>
+  );
+}
+
+function RowDropLine() {
+  const { dropLine } = useDropLine();
+
+  if (!dropLine) return null;
+
+  return (
+    <div
+      className={cn(
+        'absolute inset-x-0 left-2 z-50 h-0.5 bg-brand/50',
+        dropLine === 'top' ? '-top-px' : '-bottom-px'
+      )}
+    />
+  );
+}
+
+export function TableCellElement({
+  isHeader,
+  ...props
+}: PlateElementProps<TTableCellElement> & {
+  isHeader?: boolean;
+}) {
+  const { api } = useEditorPlugin(TablePlugin);
+  const readOnly = useReadOnly();
+  const element = props.element;
+
+  const tableId = useElementSelector(([node]) => node.id as string, [], {
+    key: KEYS.table,
+  });
+  const rowId = useElementSelector(([node]) => node.id as string, [], {
+    key: KEYS.tr,
+  });
+  const isSelectingTable = useBlockSelected(tableId);
+  const isSelectingRow = useBlockSelected(rowId) || isSelectingTable;
+  const isSelectionAreaVisible = usePluginOption(
+    BlockSelectionPlugin,
+    'isSelectionAreaVisible'
+  );
+
+  const { borders, colIndex, colSpan, minHeight, rowIndex, selected, width } =
+    useTableCellElement();
+
+  const { bottomProps, hiddenLeft, leftProps, rightProps } =
+    useTableCellElementResizable({
+      colIndex,
+      colSpan,
+      rowIndex,
+    });
+
+  return (
+    <PlateElement
+      {...props}
+      as={isHeader ? 'th' : 'td'}
+      className={cn(
+        'h-full overflow-visible border-none bg-background p-0',
+        element.background ? 'bg-(--cellBackground)' : 'bg-background',
+        isHeader && 'text-left *:m-0',
+        'before:size-full',
+        selected && 'before:z-10 before:bg-brand/5',
+        "before:absolute before:box-border before:select-none before:content-['']",
+        borders.bottom?.size && 'before:border-b before:border-b-border',
+        borders.right?.size && 'before:border-r before:border-r-border',
+        borders.left?.size && 'before:border-l before:border-l-border',
+        borders.top?.size && 'before:border-t before:border-t-border'
+      )}
+      style={
+        {
+          '--cellBackground': element.background,
+          maxWidth: width || 240,
+          minWidth: width || 120,
+        } as React.CSSProperties
+      }
+      attributes={{
+        ...props.attributes,
+        colSpan: api.table.getColSpan(element),
+        rowSpan: api.table.getRowSpan(element),
+      }}
+    >
+      <div
+        className="relative z-20 box-border h-full px-3 py-2"
+        style={{ minHeight }}
+      >
+        {props.children}
+      </div>
+
+      {!isSelectionAreaVisible && (
+        <div
+          className="group absolute top-0 size-full select-none"
+          contentEditable={false}
+          suppressContentEditableWarning={true}
+        >
+          {!readOnly && (
+            <>
+              <ResizeHandle
+                {...rightProps}
+                className="-top-2 -right-1 h-[calc(100%_+_8px)] w-2"
+                data-col={colIndex}
+              />
+              <ResizeHandle {...bottomProps} className="-bottom-1 h-2" />
+              {!hiddenLeft && (
+                <ResizeHandle
+                  {...leftProps}
+                  className="-left-1 top-0 w-2"
+                  data-resizer-left={colIndex === 0 ? 'true' : undefined}
+                />
+              )}
+
+              <div
+                className={cn(
+                  'absolute top-0 z-30 hidden h-full w-1 bg-ring',
+                  'right-[-1.5px]',
+                  columnResizeVariants({ colIndex: colIndex as any })
+                )}
+              />
+              {colIndex === 0 && (
+                <div
+                  className={cn(
+                    'absolute top-0 z-30 h-full w-1 bg-ring',
+                    'left-[-1.5px]',
+                    'fade-in hidden animate-in group-has-[[data-resizer-left]:hover]/table:block group-has-[[data-resizer-left][data-resizing="true"]]/table:block'
+                  )}
+                />
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {isSelectingRow && (
+        <div className={blockSelectionVariants()} contentEditable={false} />
+      )}
+    </PlateElement>
+  );
+}
+
+export function TableCellHeaderElement(
+  props: React.ComponentProps<typeof TableCellElement>
+) {
+  return <TableCellElement {...props} isHeader />;
+}
+
+const columnResizeVariants = cva('fade-in hidden animate-in', {
+  variants: {
+    colIndex: {
+      0: 'group-has-[[data-col="0"]:hover]/table:block group-has-[[data-col="0"][data-resizing="true"]]/table:block',
+      1: 'group-has-[[data-col="1"]:hover]/table:block group-has-[[data-col="1"][data-resizing="true"]]/table:block',
+      2: 'group-has-[[data-col="2"]:hover]/table:block group-has-[[data-col="2"][data-resizing="true"]]/table:block',
+      3: 'group-has-[[data-col="3"]:hover]/table:block group-has-[[data-col="3"][data-resizing="true"]]/table:block',
+      4: 'group-has-[[data-col="4"]:hover]/table:block group-has-[[data-col="4"][data-resizing="true"]]/table:block',
+      5: 'group-has-[[data-col="5"]:hover]/table:block group-has-[[data-col="5"][data-resizing="true"]]/table:block',
+      6: 'group-has-[[data-col="6"]:hover]/table:block group-has-[[data-col="6"][data-resizing="true"]]/table:block',
+      7: 'group-has-[[data-col="7"]:hover]/table:block group-has-[[data-col="7"][data-resizing="true"]]/table:block',
+      8: 'group-has-[[data-col="8"]:hover]/table:block group-has-[[data-col="8"][data-resizing="true"]]/table:block',
+      9: 'group-has-[[data-col="9"]:hover]/table:block group-has-[[data-col="9"][data-resizing="true"]]/table:block',
+      10: 'group-has-[[data-col="10"]:hover]/table:block group-has-[[data-col="10"][data-resizing="true"]]/table:block',
+    },
+  },
+});