@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-ui/color-text-popover/color-text-popover.tsx

@@ -0,0 +1,360 @@
+"use client";
+
+import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
+
+// --- Hooks ---
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation";
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Utils ---
+import { chunkArray } from "../../../lib/tiptap-advanced-utils";
+// --- Icons ---
+import { ChevronDownIcon } from "../../tiptap-icons/chevron-down-icon";
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button";
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button";
+import { Card, CardBody, CardGroupLabel, CardItemGroup } from "../../tiptap-ui-primitive/card";
+import { Popover, PopoverContent, PopoverTrigger } from "../../tiptap-ui-primitive/popover";
+import { ColorHighlightButton, HIGHLIGHT_COLORS } from "../color-highlight-button";
+import { ColorTextButton, TEXT_COLORS } from "../color-text-button";
+// --- Tiptap UI ---
+import type { ColorItem, ColorType, RecentColor, UseColorTextPopoverConfig } from "./";
+import { getColorByValue, useColorTextPopover, useRecentColors } from "./";
+
+// --- Styles ---
+import "./color-text-popover.css";
+import { useTranslation } from "react-i18next";
+
+export interface RenderColorButtonProps extends ButtonProps {
+  colorObj: RecentColor;
+  withLabel?: boolean;
+  onColorChanged?: ({ type, label, value }: { type: ColorType; label: string; value: string }) => void;
+}
+
+export const RecentColorButton: React.FC<RenderColorButtonProps> = ({
+  colorObj,
+  withLabel = false,
+  onColorChanged,
+  ...props
+}) => {
+  const colorSet = colorObj.type === "text" ? TEXT_COLORS : HIGHLIGHT_COLORS;
+  const color = getColorByValue(colorObj.value, colorSet);
+
+  const commonProps = {
+    tooltip: color.label,
+    text: withLabel ? color.label : undefined,
+    onApplied: () =>
+      onColorChanged?.({
+        type: colorObj.type,
+        label: color.label,
+        value: color.value,
+      }),
+    ...props,
+  };
+
+  return colorObj.type === "text" ? (
+    <ColorTextButton label={color.label} textColor={color.value} {...commonProps} />
+  ) : (
+    <ColorHighlightButton highlightColor={color.value} {...commonProps} />
+  );
+};
+
+export interface ColorGroupProps {
+  type: ColorType;
+  colors: ColorItem[][];
+  onColorSelected: ({ type, label, value }: { type: ColorType; label: string; value: string }) => void;
+  selectedIndex?: number;
+  startIndexOffset: number;
+}
+
+export const ColorGroup: React.FC<ColorGroupProps> = ({
+  type,
+  colors,
+  onColorSelected,
+  selectedIndex,
+  startIndexOffset,
+}) => {
+  const { t } = useTranslation();
+  return colors.map((group, groupIndex) => (
+    <ButtonGroup key={`${type}-group-${groupIndex}`} orientation="horizontal">
+      {group.map((color, colorIndex) => {
+        const itemIndex =
+          startIndexOffset + colors.slice(0, groupIndex).reduce((acc, g) => acc + g.length, 0) + colorIndex;
+
+        const isHighlighted = selectedIndex === itemIndex;
+
+        const commonProps = {
+          tooltip: t(color.label),
+          onApplied: () => onColorSelected({ type, label: color.label, value: color.value }),
+          tabIndex: isHighlighted ? 0 : -1,
+          "data-highlighted": isHighlighted,
+          "aria-label": `${color.label} ${type === "text" ? "text" : "highlight"} color`,
+        };
+
+        return type === "text" ? (
+          <ColorTextButton
+            key={`${type}-${color.value}-${colorIndex}`}
+            label={color.label}
+            textColor={color.value}
+            {...commonProps}
+          />
+        ) : (
+          <ColorHighlightButton
+            highlightColor={color.value}
+            key={`${type}-${color.value}-${colorIndex}`}
+            {...commonProps}
+          />
+        );
+      })}
+    </ButtonGroup>
+  ));
+};
+
+interface RecentColorsSectionProps {
+  recentColors: RecentColor[];
+  onColorSelected: ({ type, label, value }: { type: ColorType; label: string; value: string }) => void;
+  selectedIndex?: number;
+}
+
+const RecentColorsSection: React.FC<RecentColorsSectionProps> = ({ recentColors, onColorSelected, selectedIndex }) => {
+  const { t } = useTranslation();
+  if (recentColors.length === 0) return null;
+
+  return (
+    <CardItemGroup>
+      <CardGroupLabel>{t("最近使用")}</CardGroupLabel>
+      <ButtonGroup orientation="horizontal">
+        {recentColors.map((colorObj, index) => (
+          <RecentColorButton
+            colorObj={colorObj}
+            data-highlighted={selectedIndex === index}
+            key={`recent-${colorObj.type}-${colorObj.value}`}
+            onColorChanged={onColorSelected}
+            tabIndex={selectedIndex === index ? 0 : -1}
+          />
+        ))}
+      </ButtonGroup>
+    </CardItemGroup>
+  );
+};
+
+export interface TextStyleColorPanelProps {
+  maxColorsPerGroup?: number;
+  maxRecentColors?: number;
+  onColorChanged?: ({ type, label, value }: { type: ColorType; label: string; value: string }) => void;
+}
+
+export const TextStyleColorPanel: React.FC<TextStyleColorPanelProps> = ({
+  maxColorsPerGroup = 5,
+  maxRecentColors = 3,
+  onColorChanged,
+}) => {
+  const { t } = useTranslation();
+  const { recentColors, addRecentColor, isInitialized } = useRecentColors(maxRecentColors);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const textColorGroups = useMemo(() => chunkArray(TEXT_COLORS, maxColorsPerGroup), [maxColorsPerGroup]);
+
+  const highlightColorGroups = useMemo(() => chunkArray(HIGHLIGHT_COLORS, maxColorsPerGroup), [maxColorsPerGroup]);
+
+  const allTextColors = useMemo(() => textColorGroups.flat(), [textColorGroups]);
+
+  const allHighlightColors = useMemo(() => highlightColorGroups.flat(), [highlightColorGroups]);
+
+  const textColorStartIndex = useMemo(
+    () => (isInitialized ? recentColors.length : 0),
+    [isInitialized, recentColors.length],
+  );
+
+  const highlightColorStartIndex = useMemo(
+    () => textColorStartIndex + allTextColors.length,
+    [textColorStartIndex, allTextColors.length],
+  );
+
+  const menuItems = useMemo(() => {
+    const items: Array<{ type: ColorType; value: string; label: string; group: string }> = [];
+
+    if (isInitialized && recentColors.length > 0) {
+      items.push(
+        ...recentColors.map((color) => ({
+          type: color.type,
+          value: color.value,
+          label: `Recent ${color.type === "text" ? "text" : "highlight"} color`,
+          group: "recent",
+        })),
+      );
+    }
+
+    items.push(
+      ...allTextColors.map((color) => ({
+        type: "text" as ColorType,
+        value: color.value,
+        label: color.label,
+        group: "text",
+      })),
+    );
+
+    items.push(
+      ...allHighlightColors.map((color) => ({
+        type: "highlight" as ColorType,
+        value: color.value,
+        label: color.label,
+        group: "highlight",
+      })),
+    );
+
+    return items;
+  }, [isInitialized, recentColors, allTextColors, allHighlightColors]);
+
+  const handleColorSelected = useCallback(
+    ({ type, label, value }: { type: ColorType; label: string; value: string }) => {
+      if (!containerRef.current) return false;
+
+      const highlightedElement = containerRef.current.querySelector('[data-highlighted="true"]') as HTMLElement;
+
+      if (highlightedElement) {
+        highlightedElement.click();
+      }
+
+      addRecentColor({ type, label, value });
+      onColorChanged?.({ type, label, value });
+    },
+    [addRecentColor, onColorChanged],
+  );
+
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    onSelect: (item) => {
+      if (item) {
+        handleColorSelected({
+          type: item.type,
+          label: item.label,
+          value: item.value,
+        });
+      }
+    },
+    orientation: "both",
+    autoSelectFirstItem: false,
+  });
+
+  return (
+    <Card ref={containerRef} role="menu" tabIndex={0}>
+      <CardBody>
+        {isInitialized && (
+          <RecentColorsSection
+            onColorSelected={handleColorSelected}
+            recentColors={recentColors}
+            selectedIndex={selectedIndex}
+          />
+        )}
+
+        <CardItemGroup>
+          <CardGroupLabel>{t("文本颜色")}</CardGroupLabel>
+          <ColorGroup
+            colors={textColorGroups}
+            onColorSelected={handleColorSelected}
+            selectedIndex={selectedIndex}
+            startIndexOffset={textColorStartIndex}
+            type="text"
+          />
+        </CardItemGroup>
+
+        <CardItemGroup>
+          <CardGroupLabel>{t("高亮颜色")}</CardGroupLabel>
+          <ColorGroup
+            colors={highlightColorGroups}
+            onColorSelected={handleColorSelected}
+            selectedIndex={selectedIndex}
+            startIndexOffset={highlightColorStartIndex}
+            type="highlight"
+          />
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  );
+};
+
+export interface ColorTextPopoverProps extends Omit<ButtonProps, "type">, UseColorTextPopoverConfig {}
+
+/**
+ * Color text popover component for Tiptap editors.
+ *
+ * For custom popover implementations, use the `useColorTextPopover` hook instead.
+ */
+export const ColorTextPopover = forwardRef<HTMLButtonElement, ColorTextPopoverProps>(
+  ({ editor: providedEditor, hideWhenUnavailable = false, onColorChanged, onClick, children, ...buttonProps }, ref) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const [isOpen, setIsOpen] = useState(false);
+    const { isVisible, canToggle, activeTextStyle, activeHighlight, handleColorChanged, label, Icon } =
+      useColorTextPopover({
+        editor,
+        hideWhenUnavailable,
+        onColorChanged,
+      });
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        setIsOpen(!isOpen);
+      },
+      [onClick, isOpen, setIsOpen],
+    );
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <Popover onOpenChange={setIsOpen} open={isOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            aria-label={label}
+            data-appearance="default"
+            data-disabled={!canToggle}
+            data-style="ghost"
+            disabled={!canToggle}
+            onClick={handleClick}
+            role="button"
+            tooltip={label}
+            type="button"
+            {...buttonProps}
+            ref={ref}
+          >
+            {children ?? (
+              <>
+                <span
+                  className="tiptap-button-color-text-popover"
+                  style={
+                    activeHighlight.color
+                      ? ({
+                          "--active-highlight-color": activeHighlight.color,
+                        } as React.CSSProperties)
+                      : ({} as React.CSSProperties)
+                  }
+                >
+                  <Icon
+                    className="tiptap-button-icon"
+                    style={{
+                      color: activeTextStyle.color || undefined,
+                    }}
+                  />
+                </span>
+                <ChevronDownIcon className="tiptap-button-dropdown-small" />
+              </>
+            )}
+          </Button>
+        </PopoverTrigger>
+
+        <PopoverContent align="start" aria-label="Text color options" side="bottom">
+          <TextStyleColorPanel onColorChanged={handleColorChanged} />
+        </PopoverContent>
+      </Popover>
+    );
+  },
+);
+
+ColorTextPopover.displayName = "ColorTextPopover";
+
+export default ColorTextPopover;

package/src/components/tiptap-ui/color-text-popover/index.tsx

@@ -0,0 +1,2 @@
+export * from "./color-text-popover"
+export * from "./use-color-text-popover"

package/src/components/tiptap-ui/color-text-popover/use-color-text-popover.ts

@@ -0,0 +1,229 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+import { getActiveMarkAttrs } from "../../../lib/tiptap-advanced-utils";
+// --- Lib ---
+import { isMarkInSchema } from "../../../lib/tiptap-utils";
+// --- Icons ---
+import { TextColorSmallIcon } from "../../tiptap-icons/text-color-small-icon";
+import { canColorHighlight } from "../color-highlight-button";
+// --- Tiptap UI ---
+import { canColorText } from "../color-text-button";
+
+export type ColorType = "text" | "highlight";
+
+export interface ColorItem {
+  value: string;
+  label: string;
+}
+
+export interface RecentColor {
+  type: ColorType;
+  label: string;
+  value: string;
+}
+
+/**
+ * Configuration for the color text popover functionality
+ */
+export interface UseColorTextPopoverConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * Whether the popover should hide when color text is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a color is applied.
+   */
+  onColorChanged?: ({ type, label, value }: { type: ColorType; label: string; value: string }) => void;
+}
+
+/**
+ * Get a color object by its value
+ */
+export function getColorByValue(value: string, colorArray: ColorItem[]): ColorItem {
+  return (
+    colorArray.find((color) => color.value === value) ?? {
+      value,
+      label: value,
+    }
+  );
+}
+
+/**
+ * Checks if color text popover should be shown
+ */
+export function shouldShowColorTextPopover(params: { editor: Editor | null; hideWhenUnavailable: boolean }): boolean {
+  const { editor, hideWhenUnavailable } = params;
+
+  if (!editor || !editor.isEditable) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorText(editor) || canColorHighlight(editor);
+  }
+
+  return true;
+}
+
+/**
+ * Hook to manage recently used colors
+ */
+export function useRecentColors(maxColors: number = 3) {
+  const [recentColors, setRecentColors] = useState<RecentColor[]>([]);
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    try {
+      const storedColors = localStorage.getItem("tiptapRecentlyUsedColors");
+      if (storedColors) {
+        const colors = JSON.parse(storedColors) as RecentColor[];
+        setRecentColors(colors.slice(0, maxColors));
+      }
+    } catch (e) {
+      console.error("Failed to load stored colors:", e);
+    } finally {
+      setIsInitialized(true);
+    }
+  }, [maxColors]);
+
+  const addRecentColor = useCallback(
+    ({ type, label, value }: { type: ColorType; label: string; value: string }) => {
+      setRecentColors((prevColors) => {
+        const filtered = prevColors.filter((c) => !(c.type === type && c.value === value));
+        const updated = [{ type, label, value }, ...filtered].slice(0, maxColors);
+
+        try {
+          localStorage.setItem("tiptapRecentlyUsedColors", JSON.stringify(updated));
+        } catch (e) {
+          console.error("Failed to store colors:", e);
+        }
+
+        return updated;
+      });
+    },
+    [maxColors],
+  );
+
+  return { recentColors, addRecentColor, isInitialized };
+}
+
+/**
+ * Custom hook that provides color text popover functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage - no params needed
+ * function MySimpleColorTextPopover() {
+ *   const { isVisible, handleColorChanged } = useColorTextPopover()
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <Popover>
+ *       <PopoverTrigger asChild>
+ *         <button>Color Text</button>
+ *       </PopoverTrigger>
+ *       <PopoverContent>
+ *         <TextStyleColorPanel onColorChanged={handleColorChanged} />
+ *       </PopoverContent>
+ *     </Popover>
+ *   )
+ * }
+ *
+ * // Advanced usage with configuration
+ * function MyAdvancedColorTextPopover() {
+ *   const {
+ *     isVisible,
+ *     activeTextStyle,
+ *     activeHighlight,
+ *     handleColorChanged,
+ *     label,
+ *     Icon,
+ *   } = useColorTextPopover({
+ *     editor: myEditor,
+ *     hideWhenUnavailable: true,
+ *     onColorChanged: ({ type, label, value }) => console.log('Color changed!', { type, label, value })
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <Popover>
+ *       <PopoverTrigger asChild>
+ *         <Button
+ *           disabled={isDisabled}
+ *           aria-label={label}
+ *         >
+ *           <Icon style={{ color: activeTextStyle.color }} />
+ *         </Button>
+ *       </PopoverTrigger>
+ *       <PopoverContent>
+ *         <TextStyleColorPanel onColorChanged={handleColorChanged} />
+ *       </PopoverContent>
+ *     </Popover>
+ *   )
+ * }
+ * ```
+ */
+export function useColorTextPopover(config?: UseColorTextPopoverConfig) {
+  const { editor: providedEditor, hideWhenUnavailable = false, onColorChanged } = config || {};
+
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const [isVisible, setIsVisible] = useState(true);
+
+  const textStyleInSchema = isMarkInSchema("textStyle", editor);
+  const highlightInSchema = isMarkInSchema("highlight", editor);
+
+  const activeTextStyle = getActiveMarkAttrs(editor, "textStyle") || {};
+  const activeHighlight = getActiveMarkAttrs(editor, "highlight") || {};
+
+  const canToggle = canColorText(editor) || canColorHighlight(editor);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateVisibility = () => {
+      setIsVisible(
+        shouldShowColorTextPopover({
+          editor,
+          hideWhenUnavailable,
+        }),
+      );
+    };
+
+    updateVisibility();
+
+    editor.on("selectionUpdate", updateVisibility);
+
+    return () => {
+      editor.off("selectionUpdate", updateVisibility);
+    };
+  }, [editor, hideWhenUnavailable, highlightInSchema, textStyleInSchema]);
+
+  const handleColorChanged = useCallback(
+    ({ type, label, value }: { type: ColorType; label: string; value: string }) => {
+      onColorChanged?.({ type, label, value });
+    },
+    [onColorChanged],
+  );
+
+  return {
+    isVisible,
+    canToggle,
+    activeTextStyle,
+    activeHighlight,
+    handleColorChanged,
+    label: t("文本颜色"),
+    Icon: TextColorSmallIcon,
+  };
+}

package/src/components/tiptap-ui/copy-anchor-link-button/copy-anchor-link-button.tsx

@@ -0,0 +1,118 @@
+"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 { UseCopyAnchorLinkConfig } from "./"
+import {
+  COPY_ANCHOR_LINK_SHORTCUT_KEY,
+  useCopyAnchorLink,
+} 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 CopyAnchorLinkButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseCopyAnchorLinkConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function CopyAnchorLinkShortcutBadge({
+  shortcutKeys = COPY_ANCHOR_LINK_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for copying anchor links in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useCopyAnchorLink` hook instead.
+ */
+export const CopyAnchorLinkButton = forwardRef<
+  HTMLButtonElement,
+  CopyAnchorLinkButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      text,
+      hideWhenUnavailable = false,
+      onNodeIdNotFound,
+      onExtractedNodeId,
+      onCopied,
+      showShortcut = false,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const { isVisible, handleCopyAnchorLink, label, shortcutKeys, Icon } =
+      useCopyAnchorLink({
+        editor,
+        hideWhenUnavailable,
+        onNodeIdNotFound,
+        onExtractedNodeId,
+        onCopied,
+      })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleCopyAnchorLink()
+      },
+      [handleCopyAnchorLink, onClick]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        role="button"
+        tabIndex={-1}
+        aria-label={label}
+        tooltip="Copy anchor link"
+        onClick={handleClick}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <CopyAnchorLinkShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+CopyAnchorLinkButton.displayName = "CopyAnchorLinkButton"

package/src/components/tiptap-ui/copy-anchor-link-button/index.tsx

@@ -0,0 +1,3 @@
+export * from "./copy-anchor-link-button"
+export * from "./use-copy-anchor-link"
+export * from "./use-scroll-to-hash"