@fuma-content/studio 0.1.0 → 1.0.1

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

@@ -1,86 +0,0 @@
-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

@@ -1,569 +0,0 @@
-"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 />;
-}