@meta-1/editor 0.0.29 → 1.0.0

package/src/components/tiptap-ui/color-text-button/color-text-button.css

@@ -0,0 +1,31 @@
+@import "tailwindcss";
+
+.tiptap-button-color-text {
+  @apply flex items-center justify-center relative rounded-full;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  transition: transform 0.2s ease;
+}
+
+.tiptap-button-color-text::after {
+  @apply absolute inset-0 rounded-full opacity-50;
+  content: "";
+  box-sizing: border-box;
+  border: 1px solid var(--color-text-button-color);
+  filter: brightness(150%);
+  mix-blend-mode: multiply;
+}
+
+.dark .tiptap-button-color-text::after {
+  filter: brightness(140%);
+  mix-blend-mode: lighten;
+}
+
+.tiptap-button[data-active-state="on"] .tiptap-button-color-text::after {
+  filter: brightness(80%);
+}
+
+.dark .tiptap-button[data-active-state="on"] .tiptap-button-color-text::after {
+  filter: brightness(180%);
+}

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

@@ -0,0 +1,150 @@
+"use client"
+
+import { forwardRef, useCallback, useMemo } from "react"
+
+// --- Lib ---
+import { parseShortcutKeys } from "../../../lib/tiptap-utils"
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../hooks/use-tiptap-editor"
+
+// --- Tiptap UI ---
+import type { UseColorTextConfig } from "./"
+import {
+  COLOR_TEXT_SHORTCUT_KEY,
+  useColorText,
+} 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"
+
+// --- Styles ---
+import "./color-text-button.css"
+
+export interface ColorTextButtonProps
+  extends Omit<ButtonProps, "type">,
+    UseColorTextConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string
+  /**
+   * Optional show shortcut keys in the button.
+   * @default false
+   */
+  showShortcut?: boolean
+}
+
+export function ColorTextShortcutBadge({
+  shortcutKeys = COLOR_TEXT_SHORTCUT_KEY,
+}: {
+  shortcutKeys?: string
+}) {
+  return <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>
+}
+
+/**
+ * Button component for applying text colors in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useColorText` hook instead.
+ */
+export const ColorTextButton = forwardRef<
+  HTMLButtonElement,
+  ColorTextButtonProps
+>(
+  (
+    {
+      editor: providedEditor,
+      textColor,
+      text,
+      hideWhenUnavailable = false,
+      onApplied,
+      showShortcut = false,
+      onClick,
+      children,
+      style,
+      ...buttonProps
+    },
+    ref
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor)
+    const {
+      isVisible,
+      canColorText,
+      isActive,
+      handleColorText,
+      label,
+      shortcutKeys,
+      Icon,
+    } = useColorText({
+      editor,
+      textColor,
+      label: text || `Color text to ${textColor}`,
+      hideWhenUnavailable,
+      onApplied,
+    })
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event)
+        if (event.defaultPrevented) return
+        handleColorText()
+      },
+      [handleColorText, onClick]
+    )
+
+    const buttonStyle = useMemo(
+      () =>
+        ({
+          ...style,
+          "--color-text-button-color": textColor,
+        }) as React.CSSProperties,
+      [textColor, style]
+    )
+
+    if (!isVisible) {
+      return null
+    }
+
+    return (
+      <Button
+        type="button"
+        data-style="ghost"
+        data-active-state={isActive ? "on" : "off"}
+        role="button"
+        tabIndex={-1}
+        disabled={!canColorText}
+        data-disabled={!canColorText}
+        aria-label={label}
+        aria-pressed={isActive}
+        tooltip={label}
+        onClick={handleClick}
+        style={buttonStyle}
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <span
+              className="tiptap-button-color-text"
+              style={{ color: textColor }}
+            >
+              <Icon
+                className="tiptap-button-icon"
+                style={{ color: textColor, flexGrow: 1 }}
+              />
+            </span>
+            {text && <span className="tiptap-button-text">{text}</span>}
+            {showShortcut && (
+              <ColorTextShortcutBadge shortcutKeys={shortcutKeys} />
+            )}
+          </>
+        )}
+      </Button>
+    )
+  }
+)
+
+ColorTextButton.displayName = "ColorTextButton"

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

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

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

@@ -0,0 +1,251 @@
+"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 { isMarkInSchema, isNodeTypeSelected, selectCurrentBlockContent } from "../../../lib/tiptap-utils";
+// --- Icons ---
+import { TextColorSmallIcon } from "../../tiptap-icons/text-color-small-icon";
+
+export const COLOR_TEXT_SHORTCUT_KEY = "mod+shift+t";
+export const TEXT_COLORS = [
+  {
+    label: "Default text",
+    value: "var(--tt-color-text)",
+    border: "var(--tt-color-text-contrast)",
+  },
+  {
+    label: "Gray text",
+    value: "var(--tt-color-text-gray)",
+    border: "var(--tt-color-text-gray-contrast)",
+  },
+  {
+    label: "Brown text",
+    value: "var(--tt-color-text-brown)",
+    border: "var(--tt-color-text-brown-contrast)",
+  },
+  {
+    label: "Orange text",
+    value: "var(--tt-color-text-orange)",
+    border: "var(--tt-color-text-orange-contrast)",
+  },
+  {
+    label: "Yellow text",
+    value: "var(--tt-color-text-yellow)",
+    border: "var(--tt-color-text-yellow-contrast)",
+  },
+  {
+    label: "Green text",
+    value: "var(--tt-color-text-green)",
+    border: "var(--tt-color-text-green-contrast)",
+  },
+  {
+    label: "Blue text",
+    value: "var(--tt-color-text-blue)",
+    border: "var(--tt-color-text-blue-contrast)",
+  },
+  {
+    label: "Purple text",
+    value: "var(--tt-color-text-purple)",
+    border: "var(--tt-color-text-purple-contrast)",
+  },
+  {
+    label: "Pink text",
+    value: "var(--tt-color-text-pink)",
+    border: "var(--tt-color-text-pink-contrast)",
+  },
+  {
+    label: "Red text",
+    value: "var(--tt-color-text-red)",
+    border: "var(--tt-color-text-red-contrast)",
+  },
+];
+
+/**
+ * Configuration for the color text functionality
+ */
+export interface UseColorTextConfig {
+  /**
+   * The Tiptap editor instance.
+   */
+  editor?: Editor | null;
+  /**
+   * The text color to apply.
+   * Can be any valid CSS color value.
+   */
+  textColor: string;
+  /**
+   * Optional text to display alongside the icon.
+   */
+  label: string;
+  /**
+   * Whether the button should hide when the mark is not available.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Called when the text color is applied.
+   */
+  onApplied?: ({ color, label }: { color: string; label: string }) => void;
+}
+
+/**
+ * Checks if text color can be toggled in the current editor state
+ */
+export function canColorText(editor: Editor | null): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isMarkInSchema("textStyle", editor) || isNodeTypeSelected(editor, ["image"])) return false;
+
+  try {
+    return editor.can().setMark("textStyle", { color: "currentColor" });
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Checks if text color is active in the current selection
+ */
+export function isColorTextActive(editor: Editor | null, textColor: string): boolean {
+  if (!editor || !editor.isEditable) return false;
+  return editor.isActive("textStyle", { color: textColor });
+}
+
+/**
+ * Determines if the color text 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 (!isMarkInSchema("textStyle", editor)) return false;
+
+  if (hideWhenUnavailable && !editor.isActive("code")) {
+    return canColorText(editor);
+  }
+
+  return true;
+}
+
+/**
+ * Custom hook that provides color text functionality for Tiptap editor
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with required textColor
+ * function MySimpleTextColorButton() {
+ *   const { isVisible, handleColorText, isActive } = useColorText({
+ *     textColor: "red",
+ *     label: "Red Text",
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <button
+ *       onClick={handleColorText}
+ *       style={{ color: isActive ? "red" : "inherit" }}
+ *     >
+ *       Red Text
+ *     </button>
+ *   )
+ * }
+ *
+ * // Advanced usage
+ * function MyAdvancedTextColorButton() {
+ *   const { isVisible, handleColorText, label, isActive } = useColorText({
+ *     editor: myEditor,
+ *     textColor: "#ff0000",
+ *     label: "Apply Red",
+ *     hideWhenUnavailable: true,
+ *     onApplied: ({ color }) => console.log("Applied:", color),
+ *   })
+ *
+ *   if (!isVisible) return null
+ *
+ *   return (
+ *     <MyButton
+ *       onClick={handleColorText}
+ *       aria-label={label}
+ *       data-active={isActive}
+ *     >
+ *       Apply Text Color
+ *     </MyButton>
+ *   )
+ * }
+ * ```
+ */
+export function useColorText(config: UseColorTextConfig) {
+  const { editor: providedEditor, label, textColor, hideWhenUnavailable = false, onApplied } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const isMobile = useIsBreakpoint();
+  const [isVisible, setIsVisible] = useState<boolean>(true);
+  const canColorTextState = canColorText(editor);
+  const isActive = isColorTextActive(editor, textColor);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const handleSelectionUpdate = () => {
+      setIsVisible(shouldShowButton({ editor, hideWhenUnavailable }));
+    };
+
+    handleSelectionUpdate();
+
+    editor.on("selectionUpdate", handleSelectionUpdate);
+
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+    };
+  }, [editor, hideWhenUnavailable]);
+
+  const handleColorText = useCallback(() => {
+    if (!editor || !canColorTextState) return false;
+
+    if (editor.state.storedMarks) {
+      const textStyleMarkType = editor.schema.marks.textStyle;
+      if (textStyleMarkType) {
+        editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMarkType));
+      }
+    }
+
+    setTimeout(() => {
+      selectCurrentBlockContent(editor);
+
+      const success = editor.chain().focus().toggleMark("textStyle", { color: textColor }).run();
+      if (success) {
+        onApplied?.({ color: textColor, label });
+      }
+      return success;
+    }, 0);
+  }, [editor, canColorTextState, textColor, onApplied, label]);
+
+  useHotkeys(
+    COLOR_TEXT_SHORTCUT_KEY,
+    (event) => {
+      event.preventDefault();
+      handleColorText();
+    },
+    {
+      enabled: isVisible && canColorTextState,
+      enableOnContentEditable: !isMobile,
+      enableOnFormTags: true,
+    },
+  );
+
+  return {
+    isVisible,
+    isActive,
+    handleColorText,
+    canColorText: canColorTextState,
+    label: label || `Color text to ${textColor}`,
+    shortcutKeys: COLOR_TEXT_SHORTCUT_KEY,
+    Icon: TextColorSmallIcon,
+  };
+}

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

@@ -0,0 +1,25 @@
+@import "tailwindcss";
+
+.tiptap-button-color-text-popover {
+  @apply relative flex items-center justify-center rounded-full;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin: 0 -0.175rem;
+  background-color: var(--active-highlight-color);
+  transition: transform 0.2s ease;
+}
+
+.tiptap-button-color-text-popover::after {
+  @apply absolute inset-0 rounded-full;
+  content: "";
+  box-sizing: border-box;
+  border: 1px solid var(--active-highlight-color, theme("colors.gray.200"));
+  filter: brightness(95%);
+  mix-blend-mode: multiply;
+}
+
+.dark .tiptap-button-color-text-popover::after {
+  border-color: var(--active-highlight-color, theme("colors.gray.700"));
+  filter: brightness(140%);
+  mix-blend-mode: lighten;
+}