@meta-1/editor 0.0.29 → 1.0.1

package/src/components/tiptap-ui/duplicate-button/use-duplicate.ts

@@ -0,0 +1,208 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { NodeSelection } from "@tiptap/pm/state";
+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";
+// --- Icons ---
+import { CopyIcon } from "../../tiptap-icons/copy-icon";
+
+export const DUPLICATE_SHORTCUT_KEY = "mod+d";
+
+/**
+ * Configuration for the duplicate functionality
+ */
+export interface UseDuplicateConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the button should hide when duplication is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful duplication.
+   */
+  onDuplicated?: () => void;
+}
+
+/**
+ * Checks if a node can be duplicated in the current editor state
+ */
+export function canDuplicateNode(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  try {
+    const { state } = editor;
+    const { selection } = state;
+
+    if (selection instanceof NodeSelection) {
+      return !!selection.node;
+    }
+
+    const $anchor = selection.$anchor.node(1);
+
+    return !!$anchor;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Duplicates a node in the editor
+ */
+export function duplicateNode(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  try {
+    const { state } = editor;
+    const { selection } = state;
+    const chain = editor.chain().focus();
+
+    if (selection instanceof NodeSelection) {
+      const selectedNode = selection.node;
+      const insertPos = selection.to;
+
+      chain.insertContentAt(insertPos, selectedNode.toJSON()).run();
+      return true;
+    }
+
+    // Handle text selection or cursor position
+    // Find the appropriate parent node to duplicate
+    const $anchor = selection.$anchor;
+
+    for (let depth = 1; depth <= $anchor.depth; depth++) {
+      const node = $anchor.node(depth);
+
+      if (node.type.name === "doc" || !node.type.spec.group) {
+        // Skip document and other non-duplicatable nodes
+        continue;
+      }
+
+      const nodeStart = $anchor.start(depth);
+      const insertPos = Math.min(nodeStart + node.nodeSize, state.doc.content.size);
+
+      chain.insertContentAt(insertPos, node.toJSON()).run();
+      return true;
+    }
+
+    return false;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Determines if the duplicate button should be shown
+ */
+export function shouldShowButton(props: { editor: Editor | null; hideWhenUnavailable: boolean }): boolean {
+  const { editor, hideWhenUnavailable } = props;
+
+  if (!editor || !editor.isEditable) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canDuplicateNode(editor);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides duplicate functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleDuplicateButton() {
+ *   const { isVisible, handleDuplicate } = useDuplicate()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return <button onClick={handleDuplicate}>Duplicate</button>
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedDuplicateButton() {
+ *   const { isVisible, handleDuplicate, label } = useDuplicate({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onDuplicated: () => console.log('Node duplicated!')
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleDuplicate}
+ *       aria-label={label}
+ *     >
+ *       Duplicate Node
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useDuplicate(config?: UseDuplicateConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onDuplicated } = config || {};
+
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canDuplicate = canDuplicateNode(editor);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+
+  const handleDuplicate = useCallback(() => {
+    if (!editor) return false;
+
+    const success = duplicateNode(editor);
+    if (success) {
+      onDuplicated?.();
+    }
+    return success;
+  }, [editor, onDuplicated]);
+
+  useHotkeys(
+    DUPLICATE_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault(); // prevent browser default bookmarking
+      handleDuplicate();
+    },
+    {
+      enabled: isVisible && canDuplicate,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    handleDuplicate,
+    canDuplicate,
+    label: t("复制"),
+    shortcutKeys: DUPLICATE_SHORTCUT_KEY,
+    Icon: CopyIcon,
+  };
+}

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

@@ -0,0 +1,103 @@
+"use client"
+
+import { useMemo } from "react"
+import type { Editor, Range } from "@tiptap/react"
+import type { EmojiItem } from "@tiptap/extension-emoji"
+
+// --- Tiptap UI ---
+import type {
+  SuggestionItem,
+  SuggestionMenuProps,
+  SuggestionMenuRenderProps,
+} from "../../tiptap-ui-utils/suggestion-menu"
+import { SuggestionMenu } from "../../tiptap-ui-utils/suggestion-menu"
+import {
+  EmojiMenuItem,
+  getFilteredEmojis,
+} from "../emoji-menu"
+import { Card, CardBody } from "../../tiptap-ui-primitive/card"
+import { ButtonGroup } from "../../tiptap-ui-primitive/button"
+
+export type EmojiDropdownMenuProps = Omit<
+  SuggestionMenuProps,
+  "items" | "children"
+>
+
+export const EmojiDropdownMenu = (props: EmojiDropdownMenuProps) => {
+  return (
+    <SuggestionMenu
+      char=":"
+      pluginKey="emojiDropdownMenu"
+      decorationClass="tiptap-emoji-decoration"
+      selector="tiptap-emoji-dropdown-menu"
+      items={getSuggestionItems}
+      {...props}
+    >
+      {(props) => <EmojiList {...props} />}
+    </SuggestionMenu>
+  )
+}
+
+const getSuggestionItems = async (props: { query: string; editor: Editor }) => {
+  const emojis: EmojiItem[] = props.editor.extensionStorage.emoji.emojis || []
+  const filteredEmojis = getFilteredEmojis({ query: props.query, emojis })
+
+  return filteredEmojis.map(
+    (emoji): SuggestionItem => ({
+      title: emoji.name,
+      subtext: emoji.shortcodes.join(", "),
+      context: emoji,
+      onSelect: (props: {
+        editor: Editor
+        range: Range
+        context?: EmojiItem
+      }) => {
+        if (!props.editor || !props.range || !props.context) return
+        props.editor.chain().focus().setEmoji(props.context.name).run()
+      },
+    })
+  )
+}
+
+const EmojiList = ({
+  items,
+  selectedIndex,
+  onSelect,
+}: SuggestionMenuRenderProps<EmojiItem>) => {
+  const renderedItems = useMemo(() => {
+    const rendered: React.ReactElement[] = []
+
+    items.forEach((item, index) => {
+      if (!item.context) return
+
+      rendered.push(
+        <EmojiMenuItem
+          key={item.title}
+          emoji={item.context}
+          index={index}
+          isSelected={index === selectedIndex}
+          onSelect={() => onSelect(item)}
+          selector="[data-selector='tiptap-emoji-dropdown-menu']"
+        />
+      )
+    })
+
+    return rendered
+  }, [items, selectedIndex, onSelect])
+
+  if (!renderedItems.length) {
+    return null
+  }
+
+  return (
+    <Card
+      style={{
+        maxHeight: "var(--suggestion-menu-max-height)",
+      }}
+    >
+      <CardBody>
+        <ButtonGroup>{renderedItems}</ButtonGroup>
+      </CardBody>
+    </Card>
+  )
+}

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

@@ -0,0 +1 @@
+export * from "./emoji-dropdown-menu"

package/src/components/tiptap-ui/emoji-menu/emoji-menu-utils.ts

@@ -0,0 +1,36 @@
+import type { EmojiItem } from "@tiptap/extension-emoji"
+
+const MAX_SUGGESTIONS = 100
+const SORT_EMOJIS = <T extends EmojiItem>(a: T, b: T) =>
+  a.name.localeCompare(b.name)
+
+export const searchEmojiData = <T extends EmojiItem>(
+  query: string,
+  emojiData: T
+): boolean => {
+  const lowercaseQuery = query.toLowerCase().trim()
+
+  return (
+    emojiData.name.toLowerCase().includes(lowercaseQuery) ||
+    emojiData.shortcodes.some((shortName) =>
+      shortName.toLowerCase().includes(lowercaseQuery)
+    ) ||
+    emojiData.tags.some((tag) => tag.toLowerCase().includes(lowercaseQuery))
+  )
+}
+
+export const getFilteredEmojis = <T extends EmojiItem>(props: {
+  query: string
+  emojis: T[]
+}) => {
+  const { query, emojis } = props
+  const trimmedQuery = query.trim()
+
+  const filteredEmojis = !trimmedQuery
+    ? emojis.slice(0, MAX_SUGGESTIONS)
+    : emojis
+        .filter((emoji) => searchEmojiData(trimmedQuery, emoji))
+        .slice(0, MAX_SUGGESTIONS)
+
+  return filteredEmojis.sort(SORT_EMOJIS)
+}

package/src/components/tiptap-ui/emoji-menu/emoji-menu.css

@@ -0,0 +1,30 @@
+@import "tailwindcss";
+
+:root {
+  --emoji-input-bg-color: var(--white);
+  --emoji-input-border-color: var(--tt-gray-light-a-100);
+  --emoji-input-focus: var(--tt-brand-color-500);
+}
+
+.dark {
+  --emoji-input-border-color: var(--tt-gray-dark-a-50);
+  --emoji-input-bg-color: var(--tt-gray-dark-50);
+  --emoji-input-focus: var(--tt-brand-color-500);
+}
+
+.tiptap-input.emoji-menu-search-input {
+  border: 1px solid var(--emoji-input-border-color);
+  border-radius: var(--tt-radius-lg);
+  background-color: var(--emoji-input-bg-color);
+
+  &:focus {
+    border-color: var(--emoji-input-focus);
+  }
+}
+
+.emoji-menu-list {
+  max-height: 14.063rem;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  width: 100%;
+}

package/src/components/tiptap-ui/emoji-menu/emoji-menu.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState } from "react"
+import type { EmojiItem } from "@tiptap/extension-emoji"
+
+// --- Hooks ---
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation"
+
+// --- Lib ---
+import { getElementOverflowPosition } from "../../../lib/tiptap-collab-utils"
+
+// --- UI Primitives ---
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button"
+import { Input } from "../../tiptap-ui-primitive/input"
+import { Card, CardBody, CardHeader } from "../../tiptap-ui-primitive/card"
+
+import { getFilteredEmojis } from "./emoji-menu-utils"
+
+// --- Styles ---
+import "./emoji-menu.css"
+
+export interface EmojiMenuItemProps<T extends EmojiItem> {
+  emoji: T
+  index: number
+  isSelected: boolean
+  onSelect: (emoji: T) => void
+  selector: string
+}
+
+export const EmojiMenuItem = <T extends EmojiItem>(
+  props: EmojiMenuItemProps<T>
+) => {
+  const { emoji, isSelected, onSelect, selector } = props
+  const itemRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    const menuElement = document.querySelector(selector) as HTMLElement
+    if (!itemRef.current || !isSelected || !menuElement) return
+
+    const overflow = getElementOverflowPosition(itemRef.current, menuElement)
+    if (overflow === "top") {
+      itemRef.current.scrollIntoView(true)
+    } else if (overflow === "bottom") {
+      itemRef.current.scrollIntoView(false)
+    }
+  }, [isSelected, selector])
+
+  if (!emoji) return null
+
+  return (
+    <Button
+      ref={itemRef}
+      data-style="ghost"
+      data-active-state={isSelected ? "on" : "off"}
+      onClick={() => onSelect(emoji)}
+    >
+      {emoji.fallbackImage ? (
+        <img
+          className="tiptap-button-emoji"
+          src={emoji.fallbackImage}
+          alt={emoji.name}
+        />
+      ) : (
+        <span className="tiptap-button-emoji">{emoji.emoji}</span>
+      )}
+      <span className="tiptap-button-text">:{emoji.name}:</span>
+    </Button>
+  )
+}
+
+export interface EmojiMenuProps<T extends EmojiItem> {
+  emojis: T[]
+  onSelect: (emoji: T) => void
+  onClose?: () => void
+  showSearch?: boolean
+  selector?: string
+}
+
+export const EmojiMenu = <T extends EmojiItem>(props: EmojiMenuProps<T>) => {
+  const {
+    emojis,
+    onSelect,
+    onClose,
+    showSearch = false,
+    selector = ".emoji-menu-list",
+  } = props
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  const [searchQuery, setSearchQuery] = useState<string>("")
+
+  const filteredEmojis = useMemo(() => {
+    const filtered = getFilteredEmojis({ query: searchQuery, emojis })
+    return filtered
+  }, [emojis, searchQuery])
+
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    query: searchQuery,
+    items: filteredEmojis,
+    onSelect,
+    onClose,
+  })
+
+  const renderedItems = useMemo(() => {
+    return filteredEmojis.map((emoji, index) => (
+      <EmojiMenuItem
+        key={emoji.name}
+        emoji={emoji}
+        index={index}
+        isSelected={index === selectedIndex}
+        onSelect={() => onSelect(emoji)}
+        selector={selector}
+      />
+    ))
+  }, [filteredEmojis, selectedIndex, onSelect, selector])
+
+  return (
+    <Card ref={containerRef}>
+      {showSearch && (
+        <CardHeader>
+          <Input
+            ref={searchRef}
+            type="text"
+            placeholder="Add a emoji reaction..."
+            value={searchQuery}
+            autoFocus
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="emoji-menu-search-input"
+          />
+        </CardHeader>
+      )}
+
+      {renderedItems.length && (
+        <CardBody className="emoji-menu-list">
+          <ButtonGroup>{renderedItems}</ButtonGroup>
+        </CardBody>
+      )}
+    </Card>
+  )
+}

package/src/components/tiptap-ui/emoji-menu/index.tsx

@@ -0,0 +1,2 @@
+export * from "./emoji-menu"
+export * from "./emoji-menu-utils"

package/src/components/tiptap-ui/emoji-trigger-button/emoji-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 { UseEmojiTriggerConfig } from "./"
+import {
+  EMOJI_TRIGGER_SHORTCUT_KEY,
+  useEmojiTrigger,
+} 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 EmojiTriggerButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseEmojiTriggerConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function EmojiTriggerShortcutBadge({
+  shortcutKeys = EMOJI_TRIGGER_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for adding emoji trigger in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useEmojiTrigger` hook instead.
+ */
+export const EmojiTriggerButton = forwardRef<
+  HTMLButtonElement,
+  EmojiTriggerButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      node,
+      nodePos,
+      text,
+      trigger = ":",
+      hideWhenUnavailable = false,
+      onTriggerApplied,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canAddTrigger,
+      handleAddTrigger,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useEmojiTrigger({
+      editor,
+      node,
+      nodePos,
+      trigger,
+      hideWhenUnavailable,
+      onTriggerApplied,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleAddTrigger()
+      },
+      [handleAddTrigger, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        disabled={!canAddTrigger}
+        data-disabled={!canAddTrigger}
+        aria-label={label}
+        tooltip="Add emoji"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <EmojiTriggerShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+EmojiTriggerButton.displayName = "EmojiTriggerButton"

package/src/components/tiptap-ui/emoji-trigger-button/index.tsx

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