@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui/color-highlight-button/use-color-highlight.ts

@@ -0,0 +1,296 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { type Editor } from "@tiptap/react";
+import { useHotkeys } from "react-hotkeys-hook";
+
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint";
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isExtensionAvailable, isMarkInSchema, isNodeTypeSelected } from "../../../lib/tiptap-utils";
+// --- Icons ---
+import { HighlighterIcon } from "../../tiptap-icons/highlighter-icon";
+
+export const COLOR_HIGHLIGHT_SHORTCUT_KEY = "mod+shift+h";
+export const HIGHLIGHT_COLORS = [
+  {
+    label: "Default background",
+    value: "var(--tt-bg-color)",
+    border: "var(--tt-bg-color-contrast)",
+  },
+  {
+    label: "Gray background",
+    value: "var(--tt-color-highlight-gray)",
+    border: "var(--tt-color-highlight-gray-contrast)",
+  },
+  {
+    label: "Brown background",
+    value: "var(--tt-color-highlight-brown)",
+    border: "var(--tt-color-highlight-brown-contrast)",
+  },
+  {
+    label: "Orange background",
+    value: "var(--tt-color-highlight-orange)",
+    border: "var(--tt-color-highlight-orange-contrast)",
+  },
+  {
+    label: "Yellow background",
+    value: "var(--tt-color-highlight-yellow)",
+    border: "var(--tt-color-highlight-yellow-contrast)",
+  },
+  {
+    label: "Green background",
+    value: "var(--tt-color-highlight-green)",
+    border: "var(--tt-color-highlight-green-contrast)",
+  },
+  {
+    label: "Blue background",
+    value: "var(--tt-color-highlight-blue)",
+    border: "var(--tt-color-highlight-blue-contrast)",
+  },
+  {
+    label: "Purple background",
+    value: "var(--tt-color-highlight-purple)",
+    border: "var(--tt-color-highlight-purple-contrast)",
+  },
+  {
+    label: "Pink background",
+    value: "var(--tt-color-highlight-pink)",
+    border: "var(--tt-color-highlight-pink-contrast)",
+  },
+  {
+    label: "Red background",
+    value: "var(--tt-color-highlight-red)",
+    border: "var(--tt-color-highlight-red-contrast)",
+  },
+];
+export type HighlightColor = (typeof HIGHLIGHT_COLORS)[number];
+
+export type HighlightMode = "mark" | "node";
+
+/**
+ * Configuration for the color highlight functionality
+ */
+export interface UseColorHighlightConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * The color to apply when toggling the highlight.
+   */
+  highlightColor?: string;
+  /**
+   * Optional label to display alongside the icon.
+   */
+  label?: string;
+  /**
+   * Whether the button should hide when the mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * The highlighting mode to use.
+   * - "mark": Uses the highlight mark extension (default)
+   * - "node": Uses the node background extension
+   * @default "mark"
+   */
+  mode?: HighlightMode;
+  /**
+   * Called when the highlight is applied.
+   */
+  onApplied?: ({ color, label, mode }: { color: string; label: string; mode: HighlightMode }) => void;
+}
+
+export function pickHighlightColorsByValue(values: string[]) {
+  const colorMap = new Map(HIGHLIGHT_COLORS.map((color) => [color.value, color]));
+  return values
+    .map((value) => colorMap.get(value))
+    .filter((color): color is (typeof HIGHLIGHT_COLORS)[number] => !!color);
+}
+
+/**
+ * Checks if highlight can be applied based on the mode and current editor state
+ */
+export function canColorHighlight(editor: Editor | null, mode: HighlightMode = "mark"): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  if (mode === "mark") {
+    if (!isMarkInSchema("highlight", editor) || isNodeTypeSelected(editor, ["image"])) return false;
+
+    return editor.can().setMark("highlight");
+  } else {
+    if (!isExtensionAvailable(editor, ["nodeBackground"])) return false;
+
+    try {
+      return editor.can().toggleNodeBackgroundColor("test");
+    } catch {
+      return false;
+    }
+  }
+}
+
+/**
+ * Checks if highlight is currently active
+ */
+export function isColorHighlightActive(editor: Editor | null, highlightColor?: string, mode: HighlightMode = "mark"): boolean {
+  if (!editor || !editor.isEditable) return false;
+
+  if (mode === "mark") {
+    return highlightColor ? editor.isActive("highlight", { color: highlightColor }) : editor.isActive("highlight");
+  } else {
+    if (!highlightColor) return false;
+
+    try {
+      const { state } = editor;
+      const { selection } = state;
+
+      const $pos = selection.$anchor;
+      for (let depth = $pos.depth; depth >= 0; depth--) {
+        const node = $pos.node(depth);
+        if (node && node.attrs?.backgroundColor === highlightColor) {
+          return true;
+        }
+      }
+      return false;
+    } catch {
+      return false;
+    }
+  }
+}
+
+/**
+ * Removes highlight based on the mode
+ */
+export function removeHighlight(editor: Editor | null, mode: HighlightMode = "mark"): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!canColorHighlight(editor, mode)) return false;
+
+  if (mode === "mark") {
+    return editor.chain().focus().unsetMark("highlight").run();
+  } else {
+    return editor.chain().focus().unsetNodeBackgroundColor().run();
+  }
+}
+
+/**
+ * Determines if the highlight button should be shown
+ */
+export function shouldShowButton(props: {
+  editor: Editor | null;
+  hideWhenUnavailable: boolean;
+  mode: HighlightMode;
+}): boolean {
+  const { editor, hideWhenUnavailable, mode } = props;
+
+  if (!editor || !editor.isEditable) return false;
+
+  if (mode === "mark") {
+    if (!isMarkInSchema("highlight", editor)) return false;
+  } else {
+    if (!isExtensionAvailable(editor, ["nodeBackground"])) return false;
+  }
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorHighlight(editor, mode);
+  }
+
+  return true;
+}
+
+export function useColorHighlight(config: UseColorHighlightConfig) {
+  const {
+    editor: providedEditor,
+    label,
+    highlightColor,
+    hideWhenUnavailable = false,
+    mode = "mark",
+    onApplied,
+  } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canColorHighlightState = canColorHighlight(editor, mode);
+  const isActive = isColorHighlightActive(editor, highlightColor, mode);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable, mode }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable, mode]);
+
+  const handleColorHighlight = useCallback(() => {
+    if (!editor || !canColorHighlightState || !highlightColor || !label) return false;
+
+    if (mode === "mark") {
+      if (editor.state.storedMarks) {
+        const highlightMarkType = editor.schema.marks.highlight;
+        if (highlightMarkType) {
+          editor.view.dispatch(editor.state.tr.removeStoredMark(highlightMarkType));
+        }
+      }
+
+      setTimeout(() => {
+        const success = editor.chain().focus().toggleMark("highlight", { color: highlightColor }).run();
+        if (success) {
+          onApplied?.({ color: highlightColor, label, mode });
+        }
+        return success;
+      }, 0);
+
+      return true;
+    } else {
+      const success = editor.chain().focus().toggleNodeBackgroundColor(highlightColor).run();
+
+      if (success) {
+        onApplied?.({ color: highlightColor, label, mode });
+      }
+      return success;
+    }
+  }, [canColorHighlightState, highlightColor, editor, label, onApplied, mode]);
+
+  const handleRemoveHighlight = useCallback(() => {
+    const success = removeHighlight(editor, mode);
+    if (success) {
+      onApplied?.({ color: "", label: "Remove highlight", mode });
+    }
+    return success;
+  }, [editor, onApplied, mode]);
+
+  useHotkeys(
+    COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorHighlight();
+    },
+    {
+      enabled: isVisible && canColorHighlightState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    isActive,
+    handleColorHighlight,
+    handleRemoveHighlight,
+    canColorHighlight: canColorHighlightState,
+    label: label || `Highlight`,
+    shortcutKeys: COLOR_HIGHLIGHT_SHORTCUT_KEY,
+    Icon: HighlighterIcon,
+    mode,
+  };
+}

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

@@ -0,0 +1,211 @@
+"use client"
+
+import { forwardRef, useMemo, useRef, useState } from "react"
+import { type Editor } from "@tiptap/react"
+
+// --- Hooks ---
+import { useMenuNavigation } from "../../../hooks/use-menu-navigation"
+import { useIsBreakpoint } from "../../../hooks/use-is-breakpoint"
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Icons ---
+import { BanIcon } from "../../tiptap-icons/ban-icon"
+import { HighlighterIcon } from "../../tiptap-icons/highlighter-icon"
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../tiptap-ui-primitive/button"
+import { Button, ButtonGroup } from "../../tiptap-ui-primitive/button"
+import {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+} from "../../tiptap-ui-primitive/popover"
+import { Separator } from "../../tiptap-ui-primitive/separator"
+import {
+  Card,
+  CardBody,
+  CardItemGroup,
+} from "../../tiptap-ui-primitive/card"
+
+// --- Tiptap UI ---
+import type {
+  HighlightColor,
+  UseColorHighlightConfig,
+} from "../color-highlight-button"
+import {
+  ColorHighlightButton,
+  pickHighlightColorsByValue,
+  useColorHighlight,
+} from "../color-highlight-button"
+
+export interface ColorHighlightPopoverContentProps {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+}
+
+export interface ColorHighlightPopoverProps
+  extends Omit<ButtonProps, "type">,
+    Pick<
+      UseColorHighlightConfig,
+      "editor" | "hideWhenUnavailable" | "onApplied"
+    > {
+  /**
+   * Optional colors to use in the highlight popover.
+   * If not provided, defaults to a predefined set of colors.
+   */
+  colors?: HighlightColor[]
+}
+
+export const ColorHighlightPopoverButton = forwardRef<
+  HTMLButtonElement,
+  ButtonProps
+>(({ className, children, ...props }, ref) => (
+  <Button
+    type="button"
+    className={className}
+    data-style="ghost"
+    data-appearance="default"
+    role="button"
+    tabIndex={-1}
+    aria-label="Highlight text"
+    tooltip="Highlight"
+    ref={ref}
+    {...props}
+  >
+    {children ?? <HighlighterIcon className="tiptap-button-icon" />}
+  </Button>
+))
+
+ColorHighlightPopoverButton.displayName = "ColorHighlightPopoverButton"
+
+export function ColorHighlightPopoverContent({
+  editor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)",
+  ]),
+}: ColorHighlightPopoverContentProps) {
+  const { handleRemoveHighlight } = useColorHighlight({ editor })
+  const isMobile = useIsBreakpoint()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const menuItems = useMemo(
+    () => [...colors, { label: "Remove highlight", value: "none" }],
+    [colors]
+  )
+
+  const { selectedIndex } = useMenuNavigation({
+    containerRef,
+    items: menuItems,
+    orientation: "both",
+    onSelect: (item) => {
+      if (!containerRef.current) return false
+      const highlightedElement = containerRef.current.querySelector(
+        '[data-highlighted="true"]'
+      ) as HTMLElement
+      if (highlightedElement) highlightedElement.click()
+      if (item.value === "none") handleRemoveHighlight()
+      return true
+    },
+    autoSelectFirstItem: false,
+  })
+
+  return (
+    <Card
+      ref={containerRef}
+      tabIndex={0}
+      style={isMobile ? { boxShadow: "none", border: 0 } : {}}
+    >
+      <CardBody style={isMobile ? { padding: 0 } : {}}>
+        <CardItemGroup orientation="horizontal">
+          <ButtonGroup orientation="horizontal">
+            {colors.map((color, index) => (
+              <ColorHighlightButton
+                key={color.value}
+                editor={editor}
+                highlightColor={color.value}
+                tooltip={color.label}
+                aria-label={`${color.label} highlight color`}
+                tabIndex={index === selectedIndex ? 0 : -1}
+                data-highlighted={selectedIndex === index}
+              />
+            ))}
+          </ButtonGroup>
+          <Separator />
+          <ButtonGroup orientation="horizontal">
+            <Button
+              onClick={handleRemoveHighlight}
+              aria-label="Remove highlight"
+              tooltip="Remove highlight"
+              tabIndex={selectedIndex === colors.length ? 0 : -1}
+              type="button"
+              role="menuitem"
+              data-style="ghost"
+              data-highlighted={selectedIndex === colors.length}
+            >
+              <BanIcon className="tiptap-button-icon" />
+            </Button>
+          </ButtonGroup>
+        </CardItemGroup>
+      </CardBody>
+    </Card>
+  )
+}
+
+export function ColorHighlightPopover({
+  editor: providedEditor,
+  colors = pickHighlightColorsByValue([
+    "var(--tt-color-highlight-green)",
+    "var(--tt-color-highlight-blue)",
+    "var(--tt-color-highlight-red)",
+    "var(--tt-color-highlight-purple)",
+    "var(--tt-color-highlight-yellow)",
+  ]),
+  hideWhenUnavailable = false,
+  onApplied,
+  ...props
+}: ColorHighlightPopoverProps) {
+  const { editor } = useTiptapEditor(providedEditor)
+  const [isOpen, setIsOpen] = useState(false)
+  const { isVisible, canColorHighlight, isActive, label, Icon } =
+    useColorHighlight({
+      editor,
+      hideWhenUnavailable,
+      onApplied,
+    })
+
+  if (!isVisible) return null
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <ColorHighlightPopoverButton
+          disabled={!canColorHighlight}
+          data-active-state={isActive ? "on" : "off"}
+          data-disabled={!canColorHighlight}
+          aria-pressed={isActive}
+          aria-label={label}
+          tooltip={label}
+          {...props}
+        >
+          <Icon className="tiptap-button-icon" />
+        </ColorHighlightPopoverButton>
+      </PopoverTrigger>
+      <PopoverContent aria-label="Highlight colors">
+        <ColorHighlightPopoverContent editor={editor} colors={colors} />
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export default ColorHighlightPopover

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

@@ -0,0 +1 @@
+export * from "./color-highlight-popover"

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

@@ -0,0 +1,178 @@
+"use client";
+
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor";
+import { ChevronRightIcon } from "../../tiptap-icons/chevron-right-icon";
+// Icons
+import { PaintBucketIcon } from "../../tiptap-icons/paint-bucket-icon";
+import { TextColorSmallIcon } from "../../tiptap-icons/text-color-small-icon";
+// Primitive UI Components
+import { Button } from "../../tiptap-ui-primitive/button";
+import { 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 { HIGHLIGHT_COLORS, useColorHighlight } from "../color-highlight-button";
+// Tiptap UI
+import { TEXT_COLORS, useColorText } from "../color-text-button";
+import type { RecentColor } from "../color-text-popover";
+import { getColorByValue, useRecentColors } from "../color-text-popover";
+
+interface ColorMenuItemProps {
+  color: { value: string; label: string };
+}
+
+const TextColorMenuItem: React.FC<ColorMenuItemProps> = ({ color }) => {
+  const { t } = useTranslation();
+  const { addRecentColor } = useRecentColors();
+  const { isActive, handleColorText, label } = useColorText({
+    label: color.label,
+    textColor: color.value,
+    onApplied: ({ color, label }) => addRecentColor({ type: "text", label, value: color }),
+  });
+
+  return (
+    <MenuItem
+      onClick={handleColorText}
+      render={<Button data-active-state={isActive ? "on" : "off"} data-style="ghost" />}
+    >
+      <span className="tiptap-button-color-text" style={{ color: color.value }}>
+        <TextColorSmallIcon className="tiptap-button-icon" style={{ color: color.value, flexGrow: 1 }} />
+      </span>
+      <span className="tiptap-button-text">{t(label)}</span>
+    </MenuItem>
+  );
+};
+
+const HighlightColorMenuItem: React.FC<ColorMenuItemProps> = ({ color }) => {
+  const { t } = useTranslation();
+  const { addRecentColor } = useRecentColors();
+  const { isActive, handleColorHighlight, label } = useColorHighlight({
+    label: color.label,
+    highlightColor: color.value,
+    mode: "node",
+    onApplied: ({ color, label }) => addRecentColor({ type: "highlight", label, value: color }),
+  });
+
+  return (
+    <MenuItem
+      onClick={handleColorHighlight}
+      render={<Button data-active-state={isActive ? "on" : "off"} data-style="ghost" />}
+    >
+      <span className="tiptap-button-highlight" style={{ "--highlight-color": color.value } as React.CSSProperties} />
+      <span className="tiptap-button-text">{t(label)}</span>
+    </MenuItem>
+  );
+};
+
+const RecentColorMenuItem: React.FC<{
+  colorObj: RecentColor;
+}> = ({ colorObj }) => {
+  const colorSet = colorObj.type === "text" ? TEXT_COLORS : HIGHLIGHT_COLORS;
+  const color = getColorByValue(colorObj.value, colorSet);
+
+  const ColorComponent = colorObj.type === "text" ? TextColorMenuItem : HighlightColorMenuItem;
+
+  return <ColorComponent color={color} />;
+};
+
+export interface ColorMenuProps {
+  editor?: Editor | null;
+  /**
+   * Custom trigger component. If not provided, uses default paint bucket button.
+   */
+  trigger?: React.ReactNode;
+  /**
+   * Label for the color menu trigger
+   * @default "Color"
+   */
+  label?: string;
+  /**
+   * Menu placement relative to trigger
+   * @default "right"
+   */
+  placement?: React.ComponentProps<typeof Menu>["placement"];
+}
+
+/**
+ * Reusable color menu component that provides text and highlight color options.
+ * Includes recent colors, text colors, and highlight colors sections.
+ */
+export const ColorMenu: React.FC<ColorMenuProps> = ({
+  editor: providedEditor,
+  trigger,
+  label = "Color",
+  placement = "right",
+}) => {
+  const { t } = useTranslation();
+  const { editor } = useTiptapEditor(providedEditor);
+  const { recentColors, isInitialized } = useRecentColors();
+
+  const hasColorActions: boolean =
+    !!editor?.can().setMark("textStyle") ||
+    !!editor?.can().setMark("highlight") ||
+    !!editor?.can().toggleNodeBackgroundColor("yellow") ||
+    false;
+
+  if (!editor || !hasColorActions) {
+    return null;
+  }
+
+  const defaultTrigger = (
+    <MenuItem
+      render={
+        <MenuButton
+          render={
+            <Button data-style="ghost">
+              <PaintBucketIcon className="tiptap-button-icon" />
+              <span className="tiptap-button-text">{t(label)}</span>
+              <Spacer />
+              <ChevronRightIcon className="tiptap-button-icon" />
+            </Button>
+          }
+        />
+      }
+    />
+  );
+
+  return (
+    <Menu placement={placement} trigger={trigger || defaultTrigger}>
+      <MenuContent portal>
+        <ComboboxList>
+          {/* Recent Colors */}
+          {isInitialized && recentColors.length > 0 && (
+            <MenuGroup>
+              <MenuGroupLabel>{t("最近使用")}</MenuGroupLabel>
+              {recentColors.map((colorObj) => (
+                <RecentColorMenuItem colorObj={colorObj} key={colorObj.value} />
+              ))}
+              <Separator orientation="horizontal" />
+            </MenuGroup>
+          )}
+
+          {/* Text Colors */}
+          <MenuGroup>
+            <MenuGroupLabel>{t("文本颜色")}</MenuGroupLabel>
+            {TEXT_COLORS.map((textColor) => (
+              <TextColorMenuItem color={textColor} key={textColor.value} />
+            ))}
+          </MenuGroup>
+
+          <Separator orientation="horizontal" />
+
+          {/* Background Colors */}
+          <MenuGroup>
+            <MenuGroupLabel>{t("高亮颜色")}</MenuGroupLabel>
+            {HIGHLIGHT_COLORS.map((highlightColor) => (
+              <HighlightColorMenuItem color={highlightColor} key={highlightColor.value} />
+            ))}
+          </MenuGroup>
+        </ComboboxList>
+      </MenuContent>
+    </Menu>
+  );
+};
+
+export { TextColorMenuItem, HighlightColorMenuItem, RecentColorMenuItem };

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

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