@fuma-content/studio 0.1.0

package/src/components/editor/ui/table-node-static.tsx

@@ -0,0 +1,86 @@
+import type * as React from "react";
+
+import type { TTableCellElement, TTableElement } from "platejs";
+import type { SlateElementProps } from "platejs/static";
+
+import { BaseTablePlugin } from "@platejs/table";
+import { SlateElement } from "platejs/static";
+
+import { cn } from "@/lib/utils";
+
+export function TableElementStatic({ children, ...props }: SlateElementProps<TTableElement>) {
+  const { disableMarginLeft } = props.editor.getOptions(BaseTablePlugin);
+  const marginLeft = disableMarginLeft ? 0 : props.element.marginLeft;
+
+  return (
+    <SlateElement {...props} className="overflow-x-auto py-5" style={{ paddingLeft: marginLeft }}>
+      <div className="group/table relative w-fit">
+        <table className="mr-0 ml-px table h-px table-fixed border-collapse">
+          <tbody className="min-w-full">{children}</tbody>
+        </table>
+      </div>
+    </SlateElement>
+  );
+}
+
+export function TableRowElementStatic(props: SlateElementProps) {
+  return (
+    <SlateElement {...props} as="tr" className="h-full">
+      {props.children}
+    </SlateElement>
+  );
+}
+
+export function TableCellElementStatic({
+  isHeader,
+  ...props
+}: SlateElementProps<TTableCellElement> & {
+  isHeader?: boolean;
+}) {
+  const { editor, element } = props;
+  const { api } = editor.getPlugin(BaseTablePlugin);
+
+  const { minHeight, width } = api.table.getCellSize({ element });
+  const borders = api.table.getCellBorders({ element });
+
+  return (
+    <SlateElement
+      {...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 font-normal *:m-0",
+        "before:size-full",
+        "before:absolute before:box-border before:select-none before:content-['']",
+        borders &&
+          cn(
+            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-4 py-2" style={{ minHeight }}>
+        {props.children}
+      </div>
+    </SlateElement>
+  );
+}
+
+export function TableCellHeaderElementStatic(props: SlateElementProps<TTableCellElement>) {
+  return <TableCellElementStatic {...props} isHeader />;
+}

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

@@ -0,0 +1,569 @@
+"use client";
+
+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 {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
+  CombineIcon,
+  EraserIcon,
+  Grid2X2Icon,
+  GripVertical,
+  PaintBucketIcon,
+  SquareSplitHorizontalIcon,
+  Trash2Icon,
+  XIcon,
+} from "lucide-react";
+import {
+  KEYS,
+  PathApi,
+  type TElement,
+  type TTableCellElement,
+  type TTableElement,
+  type TTableRowElement,
+} from "platejs";
+import {
+  PlateElement,
+  type PlateElementProps,
+  useComposedRef,
+  useEditorPlugin,
+  useEditorRef,
+  useEditorSelector,
+  useElement,
+  useElementSelector,
+  useFocusedLast,
+  usePluginOption,
+  useReadOnly,
+  useRemoveNodeButton,
+  useSelected,
+  withHOC,
+} from "platejs/react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+import * as React from "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 { Toolbar, ToolbarButton, ToolbarGroup, ToolbarMenuGroup } from "../../ui/toolbar";
+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";
+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}>
+      <PopoverPrimitive.Anchor asChild>{children}</PopoverPrimitive.Anchor>
+      <PopoverContent
+        asChild
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        contentEditable={false}
+        {...props}
+      >
+        <Toolbar
+          className="flex w-auto max-w-[80vw] flex-row overflow-x-auto rounded-md border bg-popover p-1 shadow-md print:hidden [scrollbar-width:none]"
+          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 DropdownMenuContent>) {
+  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, nodeRef, 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, nodeRef)}
+      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 hover:bg-ring/50 data-[resizing=true]:bg-ring/50"
+              />
+              <ResizeHandle {...bottomProps} className="-bottom-1 h-2" />
+              {!hiddenLeft && (
+                <ResizeHandle
+                  {...leftProps}
+                  className="-left-1 top-0 w-2"
+                  data-resizer-left={colIndex === 0 ? "true" : undefined}
+                />
+              )}
+
+              {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 />;
+}