@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-node/table-node/ui/table-alignment-menu/table-alignment-menu.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useTranslation } from "react-i18next";
+
+// --- Icons ---
+import { AlignmentIcon } from "../../../../tiptap-icons/alignment-icon";
+import { ChevronRightIcon } from "../../../../tiptap-icons/chevron-right-icon";
+import { Button } from "../../../../tiptap-ui-primitive/button";
+import { ComboboxList } from "../../../../tiptap-ui-primitive/combobox";
+// --- UI Primitives ---
+import {
+  Menu,
+  MenuButton,
+  MenuButtonArrow,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+} from "../../../../tiptap-ui-primitive/menu";
+import { Separator } from "../../../../tiptap-ui-primitive/separator";
+// --- Lib ---
+import type { Orientation } from "../../lib/tiptap-table-utils";
+// --- UI ---
+import { useTableAlignCell } from "../table-align-cell-button";
+
+export interface ActionItemProps {
+  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>;
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  isActive?: boolean;
+  shortcutBadge?: React.ReactNode;
+}
+
+export const TableAlignMenu = ({ index, orientation }: { index?: number; orientation?: Orientation }) => {
+  const { t } = useTranslation();
+  const textAlign = {
+    left: useTableAlignCell({
+      alignmentType: "text",
+      alignment: "left",
+      index,
+      orientation,
+    }),
+    center: useTableAlignCell({
+      alignmentType: "text",
+      alignment: "center",
+      index,
+      orientation,
+    }),
+    right: useTableAlignCell({
+      alignmentType: "text",
+      alignment: "right",
+      index,
+      orientation,
+    }),
+  };
+
+  const verticalAlign = {
+    top: useTableAlignCell({
+      alignmentType: "vertical",
+      alignment: "top",
+      index,
+      orientation,
+    }),
+    middle: useTableAlignCell({
+      alignmentType: "vertical",
+      alignment: "middle",
+      index,
+      orientation,
+    }),
+    bottom: useTableAlignCell({
+      alignmentType: "vertical",
+      alignment: "bottom",
+      index,
+      orientation,
+    }),
+  };
+
+  if (!textAlign.left.canAlignCell()) {
+    return null;
+  }
+
+  return (
+    <Menu
+      placement="right"
+      trigger={
+        <MenuButton
+          render={
+            <MenuItem
+              render={
+                <Button data-style="ghost">
+                  <AlignmentIcon className="tiptap-button-icon" />
+                  <span className="tiptap-button-text">{t("对齐")}</span>
+                  <MenuButtonArrow render={<ChevronRightIcon />} />
+                </Button>
+              }
+            />
+          }
+        />
+      }
+    >
+      <MenuContent>
+        <ComboboxList>
+          <MenuGroup>
+            {Object.values(textAlign).map((align, i) => (
+              <ActionItem
+                disabled={!align.canAlignCell}
+                icon={align.Icon}
+                isActive={align.isActive}
+                key={`text-${i}`}
+                label={align.label}
+                onClick={align.handleAlign}
+              />
+            ))}
+            <Separator orientation="horizontal" />
+            {Object.values(verticalAlign).map((align, i) => (
+              <ActionItem
+                disabled={!align.canAlignCell}
+                icon={align.Icon}
+                isActive={align.isActive}
+                key={`vertical-${i}`}
+                label={align.label}
+                onClick={align.handleAlign}
+              />
+            ))}
+          </MenuGroup>
+        </ComboboxList>
+      </MenuContent>
+    </Menu>
+  );
+};
+
+const ActionItem = ({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  isActive = false,
+  shortcutBadge,
+}: ActionItemProps) => {
+  const { t } = useTranslation();
+  return (
+    <MenuItem
+      disabled={disabled}
+      onClick={onClick}
+      render={<Button data-active-state={isActive ? "on" : "off"} data-style="ghost" />}
+    >
+      <Icon className="tiptap-button-icon" />
+      <span className="tiptap-button-text">{t(label)}</span>
+      {shortcutBadge}
+    </MenuItem>
+  );
+};
+
+ActionItem.displayName = "ActionItem";

package/src/components/tiptap-node/table-node/ui/table-cell-handle-menu/index.tsx

@@ -0,0 +1 @@
+export * from "./table-cell-handle-menu"

package/src/components/tiptap-node/table-node/ui/table-cell-handle-menu/table-cell-handle-menu.css

@@ -0,0 +1,62 @@
+@import "tailwindcss";
+
+.expandable-menu-button {
+  @apply absolute top-1/2 -translate-y-1/2 w-4 h-4 bg-transparent rounded-full cursor-pointer flex items-center justify-center pointer-events-auto;
+  right: -8px;
+}
+
+.expandable-menu-button::before {
+  @apply absolute top-1/2 -translate-y-1/2 w-2 h-2 bg-indigo-600 rounded-full transition-all duration-50 ease-in-out;
+  content: "";
+  right: 3px;
+}
+
+.expandable-menu-button svg {
+  @apply relative z-[1] w-4 h-4 text-white opacity-0 flex-shrink-0 pointer-events-none transition-all duration-50 ease-in-out;
+  transform: scale(0.9);
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .expandable-menu-button::before {
+    @apply w-4 h-4 right-0;
+  }
+
+  .expandable-menu-button svg {
+    @apply opacity-100;
+    transform: scale(1);
+  }
+}
+
+@media (hover: hover) {
+  .expandable-menu-button:hover::before,
+  .expandable-menu-button:focus-visible::before,
+  .expandable-menu-button.menu-opened::before {
+    @apply w-4 h-4 right-0;
+  }
+
+  .expandable-menu-button:hover svg,
+  .expandable-menu-button:focus-visible svg,
+  .expandable-menu-button.menu-opened svg {
+    @apply opacity-100;
+    transform: scale(1);
+  }
+}
+
+.expandable-menu-button:focus-visible {
+  @apply outline outline-2 outline-offset-2 outline-indigo-600;
+}
+
+.expandable-menu-button:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+.expandable-menu-button:disabled::before {
+  @apply bg-gray-400;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .expandable-menu-button::before,
+  .expandable-menu-button svg {
+    @apply transition-none;
+  }
+}

package/src/components/tiptap-node/table-node/ui/table-cell-handle-menu/table-cell-handle-menu.tsx

@@ -0,0 +1,212 @@
+"use client"
+
+import { forwardRef, useCallback, useEffect, useState } from "react"
+import type { Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Lib ---
+import { cn, SR_ONLY } from "../../../../../lib/tiptap-utils"
+
+// --- UI ---
+import { ColorMenu } from "../../../../tiptap-ui/color-menu"
+import { TableAlignMenu } from "../table-alignment-menu"
+import { useTableClearRowColumnContent } from "../table-clear-row-column-content-button"
+import { useTableMergeSplitCell } from "../table-merge-split-cell-button"
+
+// --- UI Primitives ---
+import { Button } from "../../../../tiptap-ui-primitive/button"
+import { Combobox, ComboboxList } from "../../../../tiptap-ui-primitive/combobox"
+import {
+  Menu,
+  MenuButton,
+  MenuContent,
+  MenuGroup,
+  MenuItem,
+} from "../../../../tiptap-ui-primitive/menu"
+import { Separator } from "../../../../tiptap-ui-primitive/separator"
+
+// --- Icons ---
+import { Grip4Icon } from "../../../../tiptap-icons/grip-4-icon"
+
+import "./table-cell-handle-menu.css"
+
+interface TableAction {
+  icon: React.ComponentType<{ className?: string; style?: React.CSSProperties }>
+  label: string
+  onClick: () => void
+  isAvailable: boolean
+  isActive?: boolean
+  shortcutBadge?: React.ReactNode
+}
+
+/**
+ * Hook to manage all table actions and their availability
+ */
+function useTableActions() {
+  const mergeCellAction = useTableMergeSplitCell({ action: "merge" })
+  const splitCellAction = useTableMergeSplitCell({ action: "split" })
+  const clearContentAction = useTableClearRowColumnContent({ resetAttrs: true })
+
+  const mergeAction: TableAction = {
+    icon: mergeCellAction.Icon,
+    label: mergeCellAction.label,
+    onClick: mergeCellAction.handleExecute,
+    isAvailable: mergeCellAction.canExecute,
+  }
+
+  const splitAction: TableAction = {
+    icon: splitCellAction.Icon,
+    label: splitCellAction.label,
+    onClick: splitCellAction.handleExecute,
+    isAvailable: splitCellAction.canExecute,
+  }
+
+  const clearAction: TableAction = {
+    icon: clearContentAction.Icon,
+    label: clearContentAction.label,
+    onClick: clearContentAction.handleClear,
+    isAvailable: clearContentAction.canClearRowColumnContent,
+  }
+
+  return {
+    mergeAction,
+    splitAction,
+    clearAction,
+  }
+}
+
+/**
+ * Hook to manage table handle menu state and interactions
+ */
+function useTableCellHandleMenu({ editor }: { editor: Editor | null }) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const closeMenu = useCallback(() => {
+    setIsMenuOpen(false)
+    editor?.commands.unfreezeHandles()
+  }, [editor])
+
+  const handleMenuToggle = useCallback(
+    (isOpen: boolean) => {
+      setIsMenuOpen(isOpen)
+
+      if (!editor) return
+
+      if (isOpen) {
+        editor.commands.freezeHandles()
+      } else {
+        editor.commands.unfreezeHandles()
+      }
+    },
+    [editor]
+  )
+
+  return {
+    isMenuOpen,
+    handleMenuToggle,
+    closeMenu,
+  }
+}
+
+const TableActionItem = ({ action }: { action: TableAction }) => {
+  const { icon: Icon, label, onClick, isActive = false, shortcutBadge } = action
+
+  return (
+    <MenuItem
+      render={
+        <Button
+          data-style="ghost"
+          data-active-state={isActive ? "on" : "off"}
+        />
+      }
+      onClick={onClick}
+    >
+      <Icon className="tiptap-button-icon" />
+      <span className="tiptap-button-text">{label}</span>
+      {shortcutBadge}
+    </MenuItem>
+  )
+}
+
+const TableActionMenu = ({ onClose }: { onClose: () => void }) => {
+  const { mergeAction, splitAction, clearAction } = useTableActions()
+
+  const hasMergeOrSplit = mergeAction.isAvailable || splitAction.isAvailable
+
+  return (
+    <MenuContent autoFocusOnShow modal onClose={onClose}>
+      <Combobox style={SR_ONLY} />
+      <ComboboxList style={{ minWidth: "15rem" }}>
+        {hasMergeOrSplit && (
+          <MenuGroup>
+            {mergeAction.isAvailable && (
+              <TableActionItem action={mergeAction} />
+            )}
+            {splitAction.isAvailable && (
+              <TableActionItem action={splitAction} />
+            )}
+            <Separator orientation="horizontal" />
+          </MenuGroup>
+        )}
+
+        <MenuGroup>
+          <ColorMenu />
+          <TableAlignMenu />
+          {clearAction.isAvailable && <TableActionItem action={clearAction} />}
+        </MenuGroup>
+      </ComboboxList>
+    </MenuContent>
+  )
+}
+
+interface TableCellHandleMenuProps
+  extends React.ComponentPropsWithoutRef<"button"> {
+  editor?: Editor | null
+  onOpenChange?: (isOpen: boolean) => void
+}
+
+export const TableCellHandleMenu = forwardRef<
+  HTMLButtonElement,
+  TableCellHandleMenuProps
+>(({ editor: providedEditor, onOpenChange, className, ...props }, ref) => {
+  const { editor } = useTiptapEditor(providedEditor)
+  const { isMenuOpen, handleMenuToggle, closeMenu } = useTableCellHandleMenu({
+    editor,
+  })
+
+  useEffect(() => {
+    onOpenChange?.(isMenuOpen)
+  }, [isMenuOpen, onOpenChange])
+
+  return (
+    <Menu
+      open={isMenuOpen}
+      onOpenChange={handleMenuToggle}
+      placement="bottom-start"
+      trigger={
+        <MenuButton
+          ref={ref}
+          className={cn(
+            "expandable-menu-button",
+            isMenuOpen && "menu-opened",
+            className
+          )}
+          aria-label="Table cells option"
+          aria-haspopup="menu"
+          aria-expanded={isMenuOpen}
+          {...props}
+        >
+          <Grip4Icon className="tiptap-button-icon" />
+        </MenuButton>
+      }
+    >
+      <TableActionMenu onClose={closeMenu} />
+    </Menu>
+  )
+})
+
+TableCellHandleMenu.displayName = "TableCellHandleMenu"
+
+export { TableActionMenu }

package/src/components/tiptap-node/table-node/ui/table-clear-row-column-content-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-clear-row-column-content-button"
+export * from "./use-table-clear-row-column-content"

package/src/components/tiptap-node/table-node/ui/table-clear-row-column-content-button/table-clear-row-column-content-button.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseTableClearRowColumnContentConfig } from "./"
+import { useTableClearRowColumnContent } from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button"
+import { Button } from "../../../../tiptap-ui-primitive/button"
+
+export interface TableClearRowColumnContentButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseTableClearRowColumnContentConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+}
+
+/**
+ * Button component for clearing table row/column content in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTableClearRowColumnContent` hook instead.
+ */
+export const TableClearRowColumnContentButton = forwardRef<
+  HTMLButtonElement,
+  TableClearRowColumnContentButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      index,
+      orientation,
+      hideWhenUnavailable = false,
+      resetAttrs = false,
+      onCleared,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleClear, label, canClearRowColumnContent, Icon } =
+      useTableClearRowColumnContent({
+        editor,
+        index,
+        orientation,
+        hideWhenUnavailable,
+        resetAttrs,
+        onCleared,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleClear()
+      },
+      [handleClear, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        disabled={!canClearRowColumnContent}
+        data-style="ghost"
+        data-active-state="off"
+        data-disabled={!canClearRowColumnContent}
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        aria-pressed={false}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+TableClearRowColumnContentButton.displayName =
+  "TableClearRowColumnContentButton"