@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/drag-context-menu/drag-context-menu.tsx

@@ -0,0 +1,413 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { offset } from "@floating-ui/react";
+import { DragHandle } from "@tiptap/extension-drag-handle-react";
+import type { Node as TiptapNode } from "@tiptap/pm/model";
+
+import { selectNodeAndHideFloating } from "../../../hooks/use-floating-toolbar-visibility";
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint";
+// Hooks
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+import { useUiEditorState } from "../../../hooks/use-ui-editor-state";
+// Utils
+import { getNodeDisplayName, isTextSelectionValid } from "../../../lib/tiptap-collab-utils";
+import { SR_ONLY } from "../../../lib/tiptap-utils";
+import { ChevronRightIcon } from "../../tiptap-icons/chevron-right-icon";
+// Icons
+import { GripVerticalIcon } from "../../tiptap-icons/grip-vertical-icon";
+import { Repeat2Icon } from "../../tiptap-icons/repeat-2-icon";
+import { TableAlignMenu } from "../../tiptap-node/table-node/ui/table-alignment-menu";
+import { useTableClearRowColumnContent } from "../../tiptap-node/table-node/ui/table-clear-row-column-content-button";
+import { useTableFitToWidth } from "../../tiptap-node/table-node/ui/table-fit-to-width-button";
+// Primitive UI Components
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button";
+import { Combobox, ComboboxList } from "../../tiptap-ui-primitive/combobox";
+import { Menu, MenuButton, MenuContent, MenuGroup, MenuGroupLabel, MenuItem } from "../../tiptap-ui-primitive/menu";
+import { Separator } from "../../tiptap-ui-primitive/separator";
+import { Spacer } from "../../tiptap-ui-primitive/spacer";
+import { useBlockquote } from "../blockquote-button";
+import { useCodeBlock } from "../code-block-button";
+import { ColorMenu } from "../color-menu";
+import { CopyAnchorLinkShortcutBadge, useCopyAnchorLink } from "../copy-anchor-link-button";
+import { CopyToClipboardShortcutBadge, useCopyToClipboard } from "../copy-to-clipboard-button";
+import { DeleteNodeShortcutBadge, useDeleteNode } from "../delete-node-button";
+import { DuplicateShortcutBadge, useDuplicate } from "../duplicate-button";
+import { useHeading } from "../heading-button";
+// Tiptap UI
+import { useImageDownload } from "../image-download-button";
+import { useList } from "../list-button";
+import { useResetAllFormatting } from "../reset-all-formatting-button";
+import { SlashCommandTriggerButton } from "../slash-command-trigger-button";
+import { useText } from "../text-button";
+import type { DragContextMenuProps, MenuItemProps, NodeChangeData } from "./drag-context-menu-types";
+import "./drag-context-menu.css";
+import { useTranslation } from "react-i18next";
+
+const useNodeTransformActions = () => {
+  const text = useText();
+  const heading1 = useHeading({ level: 1 });
+  const heading2 = useHeading({ level: 2 });
+  const heading3 = useHeading({ level: 3 });
+  const bulletList = useList({ type: "bulletList" });
+  const orderedList = useList({ type: "orderedList" });
+  const taskList = useList({ type: "taskList" });
+  const blockquote = useBlockquote();
+  const codeBlock = useCodeBlock();
+
+  const mapper = (
+    action: ReturnType<
+      typeof useText | typeof useHeading | typeof useList | typeof useBlockquote | typeof useCodeBlock
+    >,
+  ) => ({
+    icon: action.Icon,
+    label: action.label,
+    onClick: action.handleToggle,
+    disabled: !action.canToggle,
+    isActive: action.isActive,
+  });
+
+  const actions = [
+    mapper(text),
+    ...[heading1, heading2, heading3].map(mapper),
+    mapper(bulletList),
+    mapper(orderedList),
+    mapper(taskList),
+    mapper(blockquote),
+    mapper(codeBlock),
+  ];
+
+  const allDisabled = actions.every((a) => a.disabled);
+
+  return allDisabled ? null : actions;
+};
+
+const BaseMenuItem: React.FC<MenuItemProps> = ({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  isActive = false,
+  shortcutBadge,
+}) => {
+  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>
+  );
+};
+
+const SubMenuTrigger: React.FC<{
+  icon: React.ComponentType<{ className?: string }>;
+  label: string;
+  children: React.ReactNode;
+}> = ({ icon: Icon, label, children }) => (
+  <Menu
+    placement="right"
+    trigger={
+      <MenuItem
+        render={
+          <MenuButton
+            render={
+              <Button data-style="ghost">
+                <Icon className="tiptap-button-icon" />
+                <span className="tiptap-button-text">{label}</span>
+                <Spacer />
+                <ChevronRightIcon className="tiptap-button-icon" />
+              </Button>
+            }
+          />
+        }
+      />
+    }
+  >
+    <MenuContent portal>
+      <ComboboxList>{children}</ComboboxList>
+    </MenuContent>
+  </Menu>
+);
+
+const TransformActionGroup: React.FC = () => {
+  const actions = useNodeTransformActions();
+  const { canReset, handleResetFormatting, label, Icon } = useResetAllFormatting({
+    hideWhenUnavailable: true,
+    preserveMarks: ["inlineThread"],
+  });
+  const { t } = useTranslation();
+
+  if (!actions && !canReset) return null;
+
+  return (
+    <>
+      {actions && (
+        <SubMenuTrigger icon={Repeat2Icon} label={t("转换为")}>
+          <MenuGroup>
+            <MenuGroupLabel>{t("转换为")}</MenuGroupLabel>
+            {actions.map((action) => (
+              <BaseMenuItem key={action.label} {...action} />
+            ))}
+          </MenuGroup>
+        </SubMenuTrigger>
+      )}
+
+      {canReset && <BaseMenuItem disabled={!canReset} icon={Icon} label={label} onClick={handleResetFormatting} />}
+
+      <Separator orientation="horizontal" />
+    </>
+  );
+};
+
+const TableFitToWidth: React.FC = () => {
+  const { t } = useTranslation();
+  const { canFitToWidth, handleFitToWidth, label, Icon } = useTableFitToWidth({
+    hideWhenUnavailable: true,
+  });
+  const clearAllContents = useTableClearRowColumnContent({ resetAttrs: true });
+
+  return (
+    <>
+      {canFitToWidth && <BaseMenuItem disabled={!canFitToWidth} icon={Icon} label={label} onClick={handleFitToWidth} />}
+
+      {clearAllContents.canClearRowColumnContent && (
+        <BaseMenuItem
+          disabled={!clearAllContents.canClearRowColumnContent}
+          icon={clearAllContents.Icon}
+          label={t("清空所有内容")}
+          onClick={clearAllContents.handleClear}
+        />
+      )}
+    </>
+  );
+};
+
+const ImageActionGroup: React.FC = () => {
+  const { canDownload, handleDownload, label, Icon } = useImageDownload({
+    hideWhenUnavailable: true,
+  });
+
+  if (!canDownload) return null;
+
+  return (
+    <>
+      <BaseMenuItem disabled={!canDownload} icon={Icon} label={label} onClick={handleDownload} />
+
+      <Separator orientation="horizontal" />
+    </>
+  );
+};
+
+const CoreActionGroup: React.FC = () => {
+  const { handleDuplicate, canDuplicate, label, Icon: DuplicateIcon } = useDuplicate();
+  const { handleCopyToClipboard, canCopyToClipboard, label: copyLabel, Icon: CopyIcon } = useCopyToClipboard();
+  const {
+    handleCopyAnchorLink,
+    canCopyAnchorLink,
+    label: copyAnchorLinkLabel,
+    Icon: CopyAnchorLinkIcon,
+  } = useCopyAnchorLink();
+
+  return (
+    <>
+      <MenuGroup>
+        <BaseMenuItem
+          disabled={!canDuplicate}
+          icon={DuplicateIcon}
+          label={label}
+          onClick={handleDuplicate}
+          shortcutBadge={<DuplicateShortcutBadge />}
+        />
+        <BaseMenuItem
+          disabled={!canCopyToClipboard}
+          icon={CopyIcon}
+          label={copyLabel}
+          onClick={handleCopyToClipboard}
+          shortcutBadge={<CopyToClipboardShortcutBadge />}
+        />
+        <BaseMenuItem
+          disabled={!canCopyAnchorLink}
+          icon={CopyAnchorLinkIcon}
+          label={copyAnchorLinkLabel}
+          onClick={handleCopyAnchorLink}
+          shortcutBadge={<CopyAnchorLinkShortcutBadge />}
+        />
+      </MenuGroup>
+
+      <Separator orientation="horizontal" />
+    </>
+  );
+};
+
+const DeleteActionGroup: React.FC = () => {
+  const { handleDeleteNode, canDeleteNode, label, Icon } = useDeleteNode();
+
+  return (
+    <MenuGroup>
+      <BaseMenuItem
+        disabled={!canDeleteNode}
+        icon={Icon}
+        label={label}
+        onClick={handleDeleteNode}
+        shortcutBadge={<DeleteNodeShortcutBadge />}
+      />
+    </MenuGroup>
+  );
+};
+
+export const DragContextMenu: React.FC<DragContextMenuProps> = ({
+  editor: providedEditor,
+  withSlashCommandTrigger = true,
+  mobileBreakpoint = 768,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const { aiGenerationActive, isDragging } = useUiEditorState(editor);
+  const isMobile = useIsBreakpoint("max", mobileBreakpoint);
+  const [open, setOpen] = useState(false);
+  const [node, setNode] = useState<TiptapNode | null>(null);
+  const [nodePos, setNodePos] = useState<number>(-1);
+
+  const handleNodeChange = useCallback((data: NodeChangeData) => {
+    if (data.node) setNode(data.node);
+    setNodePos(data.pos);
+  }, []);
+
+  useEffect(() => {
+    if (!editor) return;
+    editor.commands.setLockDragHandle(open);
+    editor.commands.setMeta("lockDragHandle", open);
+  }, [editor, open]);
+
+  const mainAxisOffset = 16;
+
+  const dynamicPositions = useMemo(() => {
+    return {
+      middleware: [
+        offset((props) => {
+          const { rects } = props;
+          const nodeHeight = rects.reference.height;
+          const dragHandleHeight = rects.floating.height;
+
+          const crossAxis = nodeHeight / 2 - dragHandleHeight / 2;
+
+          return {
+            mainAxis: mainAxisOffset,
+            // if height is more than 40px, then it's likely a block node
+            crossAxis: nodeHeight > 40 ? 0 : crossAxis,
+          };
+        }),
+      ],
+    };
+  }, []);
+
+  const handleOnMenuClose = useCallback(() => {
+    if (editor) {
+      editor.commands.setMeta("hideDragHandle", true);
+    }
+  }, [editor]);
+
+  const onElementDragStart = useCallback(() => {
+    if (!editor) return;
+    editor.commands.setIsDragging(true);
+  }, [editor]);
+
+  const onElementDragEnd = useCallback(() => {
+    if (!editor) return;
+    editor.commands.setIsDragging(false);
+
+    setTimeout(() => {
+      editor.view.dom.blur();
+      editor.view.focus();
+    }, 0);
+  }, [editor]);
+
+  if (!editor) return null;
+
+  const nodeName = getNodeDisplayName(editor);
+
+  return (
+    <div
+      style={
+        {
+          "--drag-handle-main-axis-offset": `${mainAxisOffset}px`,
+        } as React.CSSProperties
+      }
+    >
+      <DragHandle
+        computePositionConfig={dynamicPositions}
+        editor={editor}
+        onElementDragEnd={onElementDragEnd}
+        onElementDragStart={onElementDragStart}
+        onNodeChange={handleNodeChange}
+        {...props}
+      >
+        <ButtonGroup
+          orientation="horizontal"
+          style={{
+            ...(aiGenerationActive || isMobile || isTextSelectionValid(editor)
+              ? { opacity: 0, pointerEvents: "none" }
+              : {}),
+            ...(isDragging ? { opacity: 0 } : {}),
+          }}
+        >
+          {withSlashCommandTrigger && <SlashCommandTriggerButton data-weight="small" node={node} nodePos={nodePos} />}
+
+          <Menu
+            onOpenChange={setOpen}
+            open={open}
+            placement="left"
+            trigger={
+              <MenuButton
+                render={
+                  <Button
+                    data-style="ghost"
+                    data-weight="small"
+                    onMouseDown={() => selectNodeAndHideFloating(editor, nodePos)}
+                    style={{
+                      cursor: "grab",
+                      ...(open ? { pointerEvents: "none" } : {}),
+                    }}
+                    tabIndex={-1}
+                    tooltip={
+                      <>
+                        <div>{t("点击查看选项")}</div>
+                        <div>{t("按住拖动")}</div>
+                      </>
+                    }
+                  >
+                    <GripVerticalIcon className="tiptap-button-icon" />
+                  </Button>
+                }
+              />
+            }
+          >
+            <MenuContent autoFocusOnHide={false} onClose={handleOnMenuClose} portal preventBodyScroll={true}>
+              <Combobox style={SR_ONLY} />
+              <ComboboxList style={{ minWidth: "15rem" }}>
+                <MenuGroup>
+                  <MenuGroupLabel>{t(nodeName)}</MenuGroupLabel>
+                  <ColorMenu />
+                  <TableAlignMenu />
+                  <TableFitToWidth />
+                  <TransformActionGroup />
+                  <ImageActionGroup />
+                </MenuGroup>
+
+                <CoreActionGroup />
+
+                <DeleteActionGroup />
+              </ComboboxList>
+            </MenuContent>
+          </Menu>
+        </ButtonGroup>
+      </DragHandle>
+    </div>
+  );
+};

package/src/components/tiptap-ui/drag-context-menu/index.tsx

@@ -0,0 +1,2 @@
+export * from "./drag-context-menu"
+export * from "./drag-context-menu-types"

package/src/components/tiptap-ui/duplicate-button/duplicate-button.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { forwardRef, useCallback } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseDuplicateConfig } from "./"
+import {
+  DUPLICATE_SHORTCUT_KEY,
+  useDuplicate,
+} from "./"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button } from "../../tiptap-ui-primitive/button"
+import { Badge } from "../../tiptap-ui-primitive/badge"
+
+export interface DuplicateButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseDuplicateConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function DuplicateShortcutBadge({
+  shortcutKeys = DUPLICATE_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for duplicating a node in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useDuplicate` hook instead.
+ */
+export const DuplicateButton = forwardRef<
+  HTMLButtonElement,
+  DuplicateButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onDuplicated,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleDuplicate, label, shortcutKeys, Icon } =
+      useDuplicate({
+        editor,
+        hideWhenUnavailable,
+        onDuplicated,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleDuplicate()
+      },
+      [handleDuplicate, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip="Duplicate"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <DuplicateShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+DuplicateButton.displayName = "DuplicateButton"

package/src/components/tiptap-ui/duplicate-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./duplicate-button"
+export * from "./use-duplicate"