@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/slash-command-trigger-button/slash-command-trigger-button.tsx

@@ -0,0 +1,128 @@
+"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 { UseSlashCommandTriggerConfig } from "./"
+import {
+  SLASH_COMMAND_TRIGGER_SHORTCUT_KEY,
+  useSlashCommandTrigger,
+} 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 SlashCommandTriggerButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseSlashCommandTriggerConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function SlashCommandShortcutBadge({
+  shortcutKeys = SLASH_COMMAND_TRIGGER_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for inserting slash commands in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useSlashCommand` hook instead.
+ */
+export const SlashCommandTriggerButton = forwardRef<
+  HTMLButtonElement,
+  SlashCommandTriggerButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      node,
+      nodePos,
+      text,
+      trigger = "/",
+      hideWhenUnavailable = false,
+      onTriggered,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canInsert,
+      handleSlashCommand,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useSlashCommandTrigger({
+      editor,
+      node,
+      nodePos,
+      trigger,
+      hideWhenUnavailable,
+      onTriggered,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleSlashCommand()
+      },
+      [handleSlashCommand, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        disabled={!canInsert}
+        data-disabled={!canInsert}
+        aria-label={label}
+        tooltip={label}
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <SlashCommandShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+SlashCommandTriggerButton.displayName = "SlashCommandTriggerButton"

package/src/components/tiptap-ui/slash-command-trigger-button/use-slash-command-trigger.ts

@@ -0,0 +1,255 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Node } from "@tiptap/pm/model";
+import { type Editor } from "@tiptap/react";
+import { useHotkeys } from "react-hotkeys-hook";
+import { useTranslation } from "react-i18next";
+
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint";
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { findNodePosition, isNodeTypeSelected, isValidPosition } from "../../../lib/tiptap-utils";
+// --- Icons ---
+import { PlusIcon } from "../../tiptap-icons/plus-icon";
+
+export const SLASH_COMMAND_TRIGGER_SHORTCUT_KEY = "mod+/";
+
+/**
+ * Configuration for the slash command functionality
+ */
+export interface UseSlashCommandTriggerConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * The node to apply trigger to
+   */
+  node?: Node | null;
+  /**
+   * The position of the node in the document
+   */
+  nodePos?: number | null;
+  /**
+   * The trigger text to insert
+   * @default "/"
+   */
+  trigger?: string;
+  /**
+   * Whether the button should hide when insertion is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful trigger insertion.
+   */
+  onTriggered?: (trigger: string) => void;
+}
+
+/**
+ * Checks if a slash command can be inserted in the current editor state
+ */
+export function canInsertSlashCommand(editor: Editor | null, node?: Node | null, nodePos?: number | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (isNodeTypeSelected(editor, ["image"])) return false;
+
+  if (node || isValidPosition(nodePos)) {
+    if (isValidPosition(nodePos) && nodePos! >= 0) return true;
+
+    if (node) {
+      const foundPos = findNodePosition({ editor, node });
+      return foundPos !== null;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Inserts a slash command at a specified node position or after the current selection
+ */
+export function insertSlashCommand(
+  editor: Editor | null,
+  trigger: string = "/",
+  node?: Node | null,
+  nodePos?: number | null,
+): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!canInsertSlashCommand(editor, node, nodePos)) return false;
+
+  try {
+    if ((node !== undefined && node !== null) || isValidPosition(nodePos)) {
+      const foundPos = findNodePosition({
+        editor,
+        node: node || undefined,
+        nodePos: nodePos || undefined,
+      });
+
+      if (!foundPos) {
+        return false;
+      }
+
+      const isEmpty = foundPos.node.type.name === "paragraph" && foundPos.node.content.size === 0;
+      const insertPos = isEmpty ? foundPos.pos : foundPos.pos + foundPos.node.nodeSize;
+
+      editor.view.dispatch(editor.view.state.tr.scrollIntoView().insertText(trigger, insertPos, insertPos));
+
+      const triggerLength = trigger.length + 1; // +1 for the space after the trigger
+      const focusPos = isEmpty ? foundPos.pos + triggerLength : foundPos.pos + foundPos.node.nodeSize + triggerLength;
+      editor.commands.focus(focusPos);
+
+      return true;
+    }
+
+    const { $from } = editor.state.selection;
+    const currentNode = $from.node();
+    const isEmpty = currentNode.textContent.length === 0;
+    const isStartOfBlock = $from.parentOffset === 0;
+
+    // Check if we're at the document node level
+    // This is important if we dont have focus on the editor
+    // and we want to insert the slash at the end of the document
+    const isTopLevel = $from.depth === 0;
+
+    if (!isEmpty || !isStartOfBlock) {
+      const insertPosition = isTopLevel ? editor.state.doc.content.size : $from.after();
+
+      return editor
+        .chain()
+        .insertContentAt(insertPosition, {
+          type: "paragraph",
+          content: [{ type: "text", text: trigger }],
+        })
+        .focus()
+        .run();
+    }
+
+    return editor.chain().insertContent({ type: "text", text: trigger }).focus().run();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Determines if the slash command button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null;
+  hideWhenUnavailable: boolean;
+  node?: Node | null;
+  nodePos?: number | null;
+}): boolean {
+  const { editor, hideWhenUnavailable, node, nodePos } = props;
+
+  if (!editor || !editor.isEditable) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canInsertSlashCommand(editor, node, nodePos);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides slash command functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleSlashButton() {
+ *   const { isVisible, handleSlashCommand } = useSlashCommandTrigger()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleSlashCommand}>Insert Block</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedSlashButton() {
+ *   const { isVisible, handleSlashCommand, label } = useSlashCommandTrigger({
+ *     editor: myEditor,
+ *     trigger: "/",
+ *     hideWhenUnavailable: true,
+ *     onTriggered: (trigger) => console.log('Inserted:', trigger)
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleSlashCommand}
+ *       aria-label={label}
+ *     >
+ *       Insert Block
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useSlashCommandTrigger(config?: UseSlashCommandTriggerConfig) {
+  const {
+    editor: providedEditor,
+    node,
+    nodePos,
+    trigger = "/",
+    hideWhenUnavailable = false,
+    onTriggered,
+  } = config || {};
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canInsert = canInsertSlashCommand(editor, node, nodePos);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, node, nodePos }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable, node, nodePos]);
+
+  const handleSlashCommand = useCallback(() => {
+    if (!editor) return false;
+
+    const success = insertSlashCommand(editor, trigger, node, nodePos);
+    if (success) {
+      onTriggered?.(trigger);
+    }
+    return success;
+  }, [editor, trigger, node, nodePos, onTriggered]);
+
+  useHotkeys(
+    SLASH_COMMAND_TRIGGER_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleSlashCommand();
+    },
+    {
+      enabled: isVisible && canInsert,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+    [isVisible, canInsert, handleSlashCommand],
+  );
+
+  return {
+    isVisible,
+    handleSlashCommand,
+    canInsert,
+    label: t("插入块"),
+    shortcutKeys: SLASH_COMMAND_TRIGGER_SHORTCUT_KEY,
+    trigger,
+    Icon: PlusIcon,
+  };
+}

package/src/components/tiptap-ui/slash-dropdown-menu/index.tsx

@@ -0,0 +1,2 @@
+export * from "./slash-dropdown-menu"
+export * from "./use-slash-dropdown-menu"

package/src/components/tiptap-ui/slash-dropdown-menu/slash-dropdown-menu.css

@@ -0,0 +1,33 @@
+@import "tailwindcss";
+
+span.tiptap-slash-decoration {
+  @apply bg-gray-100 rounded-sm;
+  outline: 5.5px solid theme("colors.gray.100");
+}
+
+.dark span.tiptap-slash-decoration {
+  @apply bg-gray-800;
+  outline-color: theme("colors.gray.800");
+}
+
+span.tiptap-slash-decoration::after {
+  @apply text-gray-400;
+}
+
+.dark span.tiptap-slash-decoration::after {
+  @apply text-gray-600;
+}
+
+span.tiptap-slash-decoration.is-empty::after {
+  content: attr(data-decoration-content);
+}
+
+.tiptap-slash-card-body {
+  @apply w-full;
+}
+
+@media screen and (min-width: 480px) {
+  .tiptap-slash-card {
+    @apply min-w-60;
+  }
+}

package/src/components/tiptap-ui/slash-dropdown-menu/slash-dropdown-menu.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+
+// --- Lib ---
+import { getElementOverflowPosition } from "../../../lib/tiptap-collab-utils";
+// --- UI Primitives ---
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button";
+import { Card, CardBody, CardGroupLabel, CardItemGroup } from "../../tiptap-ui-primitive/card";
+import { Separator } from "../../tiptap-ui-primitive/separator";
+// --- Tiptap UI ---
+import type {
+  SuggestionItem,
+  SuggestionMenuProps,
+  SuggestionMenuRenderProps,
+} from "../../tiptap-ui-utils/suggestion-menu";
+// import { filterSuggestionItems, SuggestionMenu } from "../../tiptap-ui-utils/suggestion-menu";
+import { SuggestionMenu } from "../../tiptap-ui-utils/suggestion-menu";
+// --- Hooks ---
+import type { SlashMenuConfig } from "./use-slash-dropdown-menu";
+import { useSlashDropdownMenu } from "./use-slash-dropdown-menu";
+
+import "./slash-dropdown-menu.css";
+// import { useTranslation } from "react-i18next";
+
+type SlashDropdownMenuProps = Omit<SuggestionMenuProps, "items" | "children"> & {
+  config?: SlashMenuConfig;
+};
+
+export const SlashDropdownMenu = (props: SlashDropdownMenuProps) => {
+  const { config, ...restProps } = props;
+  const { getSlashMenuItems } = useSlashDropdownMenu(config);
+  // const { t } = useTranslation();
+
+  return (
+    <SuggestionMenu
+      char="/"
+      decorationClass="tiptap-slash-decoration"
+      // decorationContent={t("过滤...")} // 暂时注释掉筛选提示
+      items={({ editor }) => {
+        // 暂时注释掉筛选功能，避免中文输入时位置错乱
+        // return filterSuggestionItems(getSlashMenuItems(editor), query);
+        return getSlashMenuItems(editor);
+      }}
+      pluginKey="slashDropdownMenu"
+      selector="tiptap-slash-dropdown-menu"
+      {...restProps}
+    >
+      {(props) => <List {...props} config={config} />}
+    </SuggestionMenu>
+  );
+};
+
+const Item = (props: { item: SuggestionItem; isSelected: boolean; onSelect: () => void }) => {
+  const { item, isSelected, onSelect } = props;
+  const itemRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const selector = document.querySelector('[data-selector="tiptap-slash-dropdown-menu"]') as HTMLElement;
+    if (!itemRef.current || !isSelected || !selector) return;
+
+    const overflow = getElementOverflowPosition(itemRef.current, selector);
+
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true);
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false);
+    }
+  }, [isSelected]);
+
+  const BadgeIcon = item.badge;
+
+  return (
+    <Button data-active-state={isSelected ? "on" : "off"} data-style="ghost" onClick={onSelect} ref={itemRef}>
+      {BadgeIcon && <BadgeIcon className="tiptap-button-icon" />}
+      <div className="tiptap-button-text">{item.title}</div>
+    </Button>
+  );
+};
+
+const List = ({ items, selectedIndex, onSelect, config }: SuggestionMenuRenderProps & { config?: SlashMenuConfig }) => {
+  const renderedItems = useMemo(() => {
+    const rendered: React.ReactElement[] = [];
+    const showGroups = config?.showGroups !== false;
+
+    if (!showGroups) {
+      items.forEach((item, index) => {
+        rendered.push(
+          <Item
+            isSelected={index === selectedIndex}
+            item={item}
+            key={`item-${index}-${item.title}`}
+            onSelect={() => onSelect(item)}
+          />,
+        );
+      });
+      return rendered;
+    }
+
+    const groups: {
+      [groupLabel: string]: { items: SuggestionItem[]; indices: number[] };
+    } = {};
+
+    items.forEach((item, index) => {
+      const groupLabel = item.group || "";
+      if (!groups[groupLabel]) {
+        groups[groupLabel] = { items: [], indices: [] };
+      }
+      groups[groupLabel].items.push(item);
+      groups[groupLabel].indices.push(index);
+    });
+
+    Object.entries(groups).forEach(([groupLabel, groupData], groupIndex) => {
+      if (groupIndex > 0) {
+        rendered.push(<Separator key={`separator-${groupIndex}`} orientation="horizontal" />);
+      }
+
+      const groupItems = groupData.items.map((item, itemIndex) => {
+        const originalIndex = groupData.indices[itemIndex];
+        return (
+          <Item
+            isSelected={originalIndex === selectedIndex}
+            item={item}
+            key={`item-${originalIndex}-${item.title}`}
+            onSelect={() => onSelect(item)}
+          />
+        );
+      });
+
+      if (groupLabel) {
+        rendered.push(
+          <CardItemGroup key={`group-${groupIndex}-${groupLabel}`}>
+            <CardGroupLabel>{groupLabel}</CardGroupLabel>
+            <ButtonGroup>{groupItems}</ButtonGroup>
+          </CardItemGroup>,
+        );
+      } else {
+        rendered.push(...groupItems);
+      }
+    });
+
+    return rendered;
+  }, [items, selectedIndex, onSelect, config?.showGroups]);
+
+  if (!renderedItems.length) {
+    return null;
+  }
+
+  return (
+    <Card
+      className="tiptap-slash-card"
+      style={{
+        maxHeight: "var(--suggestion-menu-max-height)",
+      }}
+    >
+      <CardBody className="tiptap-slash-card-body">{renderedItems}</CardBody>
+    </Card>
+  );
+};