@multiplatform.one/rich-text 6.0.0

package/src/toolbar/useHorizontalScroll.tsx

@@ -0,0 +1,270 @@
+/**
+ * Horizontal scroll hook and scroll arrow component for toolbar overflow
+ *
+ * Extracted as-is from EditorToolbar.tsx (well-implemented).
+ */
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { View } from "tamagui";
+import { LinearGradient } from "@tamagui/linear-gradient";
+import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+
+const scrollArrowThreshold = 8;
+
+// ===========================================================================
+// useHorizontalScroll
+// ===========================================================================
+
+/**
+ * Hook to enable horizontal scroll via mouse wheel and drag
+ */
+export function useHorizontalScroll(ref: React.RefObject<HTMLDivElement | null>) {
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    // Handle wheel -> horizontal scroll (both vertical and horizontal wheel)
+    const handleWheel = (e: WheelEvent) => {
+      // Use deltaY (vertical scroll) or deltaX (horizontal scroll)
+      const delta = e.deltaY !== 0 ? e.deltaY : e.deltaX;
+      if (delta !== 0 && el.scrollWidth > el.clientWidth) {
+        e.preventDefault();
+        el.scrollLeft += delta;
+      }
+    };
+
+    // Handle drag to scroll
+    let isDown = false;
+    let isDragging = false;
+    let startX = 0;
+    let scrollLeft = 0;
+
+    const handleMouseDown = (e: MouseEvent) => {
+      if (e.button !== 0) return;
+      isDown = true;
+      isDragging = false;
+      startX = e.clientX;
+      scrollLeft = el.scrollLeft;
+    };
+
+    const handleMouseUp = (e: MouseEvent) => {
+      if (isDragging) {
+        // Prevent click on buttons if we were dragging
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      isDown = false;
+      isDragging = false;
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!isDown) return;
+
+      const x = e.clientX;
+      const diff = Math.abs(x - startX);
+
+      // Start dragging after moving more than 5px
+      if (diff > 5) {
+        isDragging = true;
+        e.preventDefault();
+        const walk = x - startX;
+        el.scrollLeft = scrollLeft - walk;
+      }
+    };
+
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    el.addEventListener("mousedown", handleMouseDown, { capture: true });
+    el.addEventListener("mouseup", handleMouseUp, { capture: true });
+    el.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", () => {
+      isDown = false;
+      isDragging = false;
+    });
+
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+      el.removeEventListener("mousedown", handleMouseDown, { capture: true });
+      el.removeEventListener("mouseup", handleMouseUp, { capture: true });
+      el.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [ref]);
+}
+
+// ===========================================================================
+// useHorizontalScrollArrows
+// ===========================================================================
+
+/**
+ * Hook to track horizontal scroll arrows visibility
+ */
+export function useHorizontalScrollArrows() {
+  const [arrowLeft, setArrowLeft] = useState(false);
+  const [arrowRight, setArrowRight] = useState(false);
+  const arrowScrollDirRef = useRef<"left" | "right" | null>(null);
+
+  const updateArrows = useCallback((element: HTMLElement) => {
+    const left = element.scrollLeft > scrollArrowThreshold;
+    const right =
+      element.scrollLeft < element.scrollWidth - element.clientWidth - scrollArrowThreshold;
+    setArrowLeft((prev) => (prev !== left ? left : prev));
+    setArrowRight((prev) => (prev !== right ? right : prev));
+  }, []);
+
+  return { arrowLeft, arrowRight, arrowScrollDirRef, updateArrows };
+}
+
+// ===========================================================================
+// HorizontalScrollArrow
+// ===========================================================================
+
+export interface HorizontalScrollArrowProps {
+  direction: "left" | "right";
+  scrollRef: React.RefObject<HTMLElement | null>;
+  visible: boolean;
+  arrowScrollDirRef: React.RefObject<"left" | "right" | null>;
+  transition?: string;
+}
+
+/**
+ * Horizontal scroll arrow component
+ */
+export function HorizontalScrollArrow({
+  direction,
+  scrollRef,
+  visible,
+  arrowScrollDirRef,
+  transition,
+}: HorizontalScrollArrowProps) {
+  const isLeft = direction === "left";
+  const animationFrameRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const hoveringRef = useRef(false);
+  const activeRef = useRef(false);
+  const selfScrollingRef = useRef(false);
+  const resumeDelay = 100;
+
+  const stopLoop = useCallback(() => {
+    activeRef.current = false;
+    cancelAnimationFrame(animationFrameRef.current);
+    animationFrameRef.current = 0;
+  }, []);
+
+  const startLoop = useCallback(() => {
+    if (activeRef.current || !hoveringRef.current) return;
+    activeRef.current = true;
+    lastTimeRef.current = performance.now();
+    const tick = () => {
+      const el = scrollRef.current;
+      if (!el || !hoveringRef.current || !activeRef.current) {
+        activeRef.current = false;
+        return;
+      }
+      const now = performance.now();
+      const elapsed = now - lastTimeRef.current;
+      lastTimeRef.current = now;
+      const px = Math.min(
+        elapsed / 2,
+        Math.max(isLeft ? el.scrollLeft : el.scrollWidth - el.clientWidth - el.scrollLeft, 0),
+      );
+      if (px > 0) {
+        selfScrollingRef.current = true;
+        arrowScrollDirRef.current = isLeft ? "left" : "right";
+        el.scrollLeft += isLeft ? -px : px;
+      }
+      animationFrameRef.current = requestAnimationFrame(tick);
+    };
+    animationFrameRef.current = requestAnimationFrame(tick);
+  }, [isLeft, scrollRef, arrowScrollDirRef]);
+
+  const openTimestampRef = useRef(0);
+  useEffect(() => {
+    openTimestampRef.current = performance.now();
+  }, [visible]);
+
+  const handlePointerEnter = useCallback(() => {
+    hoveringRef.current = true;
+    const elapsed = performance.now() - openTimestampRef.current;
+    const wasOverOnOpen = elapsed < 80;
+    if (wasOverOnOpen) {
+      if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = setTimeout(() => {
+        resumeTimerRef.current = null;
+        if (hoveringRef.current) startLoop();
+      }, 600);
+    } else {
+      startLoop();
+    }
+  }, [startLoop]);
+
+  const handlePointerLeave = useCallback(() => {
+    hoveringRef.current = false;
+    if (resumeTimerRef.current) {
+      clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = null;
+    }
+    stopLoop();
+  }, [stopLoop]);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !visible) return;
+    const onScroll = () => {
+      if (selfScrollingRef.current) {
+        selfScrollingRef.current = false;
+        return;
+      }
+      if (!hoveringRef.current) return;
+      stopLoop();
+      if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
+      resumeTimerRef.current = setTimeout(() => {
+        resumeTimerRef.current = null;
+        if (hoveringRef.current) startLoop();
+      }, resumeDelay);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, [scrollRef, visible, startLoop, stopLoop]);
+
+  useEffect(
+    () => () => {
+      handlePointerLeave();
+    },
+    [handlePointerLeave],
+  );
+
+  const Icon = isLeft ? CaretLeftIcon : CaretRightIcon;
+
+  return (
+    <View
+      position="absolute"
+      {...{ [isLeft ? "left" : "right"]: 0 }}
+      top={0}
+      bottom={0}
+      width={28}
+      alignItems="center"
+      justifyContent="center"
+      zIndex={2}
+      pointerEvents={visible ? "auto" : "none"}
+      opacity={visible ? 1 : 0}
+      {...(transition ? { animation: transition as any } : undefined)}
+      onPointerEnter={visible ? handlePointerEnter : undefined}
+      onPointerLeave={handlePointerLeave}
+      data-testid={`toolbar-scroll-arrow-${direction}`}
+    >
+      <LinearGradient
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        colors={isLeft ? ["$color3", "transparent"] : ["transparent", "$color3"]}
+        start={isLeft ? [0, 0] : [0.6, 0]}
+        end={isLeft ? [0.6, 0] : [1, 0]}
+      />
+      <View position="relative" zIndex={1}>
+        <Icon size={16} />
+      </View>
+    </View>
+  );
+}

package/src/types.spec.ts

@@ -0,0 +1,102 @@
+import { describe, it, expect } from "vitest";
+import { defaultEditorState } from "./types";
+import { NATIVE_SUPPORTED_COMMANDS, TEXT_COLORS, HIGHLIGHT_COLORS } from "./constants";
+
+describe("types and constants", () => {
+  it("defaultEditorState has expected shape and default values", () => {
+    expect(defaultEditorState.isBold).toBe(false);
+    expect(defaultEditorState.isParagraph).toBe(true);
+    expect(defaultEditorState.textAlign).toBe("left");
+    expect(defaultEditorState.textColor).toBeNull();
+    expect(defaultEditorState.highlightColor).toBeNull();
+    expect(defaultEditorState.canUndo).toBe(false);
+    expect(defaultEditorState.canRedo).toBe(false);
+  });
+
+  it("NATIVE_SUPPORTED_COMMANDS maps supported commands to true and unsupported to false", () => {
+    expect(NATIVE_SUPPORTED_COMMANDS.bold).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.italic).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.textColor).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.highlight).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.taskList).toBe(true);
+    expect(NATIVE_SUPPORTED_COMMANDS.image).toBe(true);
+
+    expect(NATIVE_SUPPORTED_COMMANDS.subscript).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.superscript).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.alignLeft).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.codeBlock).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.horizontalRule).toBe(false);
+    expect(NATIVE_SUPPORTED_COMMANDS.clearFormatting).toBe(false);
+  });
+
+  it("TEXT_COLORS and HIGHLIGHT_COLORS are non-empty with valid entries", () => {
+    expect(TEXT_COLORS.length).toBeGreaterThan(0);
+    expect(HIGHLIGHT_COLORS.length).toBeGreaterThan(0);
+
+    for (const entry of TEXT_COLORS) {
+      expect(entry).toHaveProperty("name");
+      expect(entry).toHaveProperty("value");
+      expect(typeof entry.name).toBe("string");
+    }
+
+    for (const entry of HIGHLIGHT_COLORS) {
+      expect(entry).toHaveProperty("name");
+      expect(entry).toHaveProperty("value");
+      expect(typeof entry.name).toBe("string");
+    }
+  });
+
+  it("TEXT_COLORS includes a default/null entry and HIGHLIGHT_COLORS includes a none/null entry", () => {
+    const defaultEntry = TEXT_COLORS.find((c) => c.value === null);
+    expect(defaultEntry).toBeDefined();
+    expect(defaultEntry?.name).toBe("Default");
+
+    const noneEntry = HIGHLIGHT_COLORS.find((c) => c.value === null);
+    expect(noneEntry).toBeDefined();
+    expect(noneEntry?.name).toBe("None");
+  });
+
+  it("NativeCapability covers all EditorCommand values", () => {
+    const commands: string[] = [
+      "bold",
+      "italic",
+      "underline",
+      "strike",
+      "code",
+      "subscript",
+      "superscript",
+      "heading1",
+      "heading2",
+      "heading3",
+      "heading4",
+      "heading5",
+      "heading6",
+      "paragraph",
+      "bulletList",
+      "orderedList",
+      "taskList",
+      "blockquote",
+      "codeBlock",
+      "link",
+      "image",
+      "undo",
+      "redo",
+      "alignLeft",
+      "alignCenter",
+      "alignRight",
+      "alignJustify",
+      "textColor",
+      "highlight",
+      "horizontalRule",
+      "clearFormatting",
+    ];
+
+    for (const cmd of commands) {
+      expect(typeof NATIVE_SUPPORTED_COMMANDS[cmd as keyof typeof NATIVE_SUPPORTED_COMMANDS]).toBe(
+        "boolean",
+      );
+    }
+
+    expect(Object.keys(NATIVE_SUPPORTED_COMMANDS).length).toBe(commands.length);
+  });
+});

package/src/types.ts

@@ -0,0 +1,217 @@
+/**
+ * Shared types for the rich text editor
+ */
+
+import type { FontSizeTokens } from "tamagui";
+
+// ===========================================================================
+// Editor Command
+// ===========================================================================
+
+export type TextAlignment = "left" | "center" | "right" | "justify";
+
+export type EditorCommand =
+  | "bold"
+  | "italic"
+  | "underline"
+  | "strike"
+  | "code"
+  | "subscript"
+  | "superscript"
+  | "heading1"
+  | "heading2"
+  | "heading3"
+  | "heading4"
+  | "heading5"
+  | "heading6"
+  | "paragraph"
+  | "bulletList"
+  | "orderedList"
+  | "taskList"
+  | "blockquote"
+  | "codeBlock"
+  | "link"
+  | "image"
+  | "undo"
+  | "redo"
+  | "alignLeft"
+  | "alignCenter"
+  | "alignRight"
+  | "alignJustify"
+  | "textColor"
+  | "highlight"
+  | "horizontalRule"
+  | "clearFormatting"
+  | "insertTable"
+  | "addColumnBefore"
+  | "addColumnAfter"
+  | "deleteColumn"
+  | "addRowBefore"
+  | "addRowAfter"
+  | "deleteRow"
+  | "deleteTable"
+  | "mergeCells"
+  | "splitCell"
+  | "toggleHeaderRow";
+
+// ===========================================================================
+// Editor State
+// ===========================================================================
+
+export interface EditorState {
+  isBold: boolean;
+  isItalic: boolean;
+  isUnderline: boolean;
+  isStrike: boolean;
+  isCode: boolean;
+  isSubscript: boolean;
+  isSuperscript: boolean;
+  isHeading1: boolean;
+  isHeading2: boolean;
+  isHeading3: boolean;
+  isHeading4: boolean;
+  isHeading5: boolean;
+  isHeading6: boolean;
+  isParagraph: boolean;
+  isBulletList: boolean;
+  isOrderedList: boolean;
+  isTaskList: boolean;
+  isBlockquote: boolean;
+  isCodeBlock: boolean;
+  isLink: boolean;
+  canUndo: boolean;
+  canRedo: boolean;
+  textAlign: TextAlignment;
+  /** Current text color (null means default) */
+  textColor: string | null;
+  /** Current highlight/background color (null means none) */
+  highlightColor: string | null;
+  /** Total word count */
+  wordCount: number;
+  /** Total character count */
+  characterCount: number;
+}
+
+export const defaultEditorState: EditorState = {
+  isBold: false,
+  isItalic: false,
+  isUnderline: false,
+  isStrike: false,
+  isCode: false,
+  isSubscript: false,
+  isSuperscript: false,
+  isHeading1: false,
+  isHeading2: false,
+  isHeading3: false,
+  isHeading4: false,
+  isHeading5: false,
+  isHeading6: false,
+  isParagraph: true,
+  isBulletList: false,
+  isOrderedList: false,
+  isTaskList: false,
+  isBlockquote: false,
+  isCodeBlock: false,
+  isLink: false,
+  canUndo: false,
+  canRedo: false,
+  textAlign: "left",
+  textColor: null,
+  highlightColor: null,
+  wordCount: 0,
+  characterCount: 0,
+};
+
+// ===========================================================================
+// Editor Ref and Props
+// ===========================================================================
+
+export interface RichEditorRef {
+  /** Execute an editor command */
+  executeCommand: (command: EditorCommand, payload?: any) => void;
+  /** Get the current editor state */
+  getState: () => EditorState;
+  /** Get the content as HTML */
+  getHTML: () => string;
+  /** Get the content as JSON (ProseMirror format) */
+  getJSON: () => any;
+  /** Set content from HTML */
+  setHTML: (html: string) => void;
+  /** Set content from JSON */
+  setJSON: (json: any) => void;
+  /** Focus the editor */
+  focus: () => void;
+  /** Blur the editor */
+  blur: () => void;
+}
+
+export interface RichEditorProps {
+  /** Initial content as HTML */
+  initialContent?: string;
+  /** Initial content as JSON (takes precedence over initialContent) */
+  initialJSON?: any;
+  /** Placeholder text when editor is empty */
+  placeholder?: string;
+  /** Whether the editor is editable */
+  editable?: boolean;
+  /** Auto focus on mount */
+  autoFocus?: boolean;
+  /** Called when content changes */
+  onChange?: (html: string, json: any) => void;
+  /** Called when editor state changes (bold, italic, etc.) */
+  onStateChange?: (state: EditorState) => void;
+  /** Called when editor is focused */
+  onFocus?: () => void;
+  /** Called when editor is blurred */
+  onBlur?: () => void;
+  /** Minimum height of the editor */
+  minHeight?: number;
+  /** Maximum height of the editor */
+  maxHeight?: number;
+  /** Show error state */
+  hasError?: boolean;
+}
+
+// ===========================================================================
+// Editor Mode
+// ===========================================================================
+
+export type EditorMode = "richtext" | "markdown";
+
+// ===========================================================================
+// Native Capability
+// ===========================================================================
+
+/** Maps each EditorCommand to whether 10Tap natively supports it */
+export type NativeCapability = Record<EditorCommand, boolean>;
+
+// ===========================================================================
+// Toolbar Section
+// ===========================================================================
+
+/** Toolbar section identifiers for visibility config */
+export type ToolbarSection =
+  | "history"
+  | "formatting"
+  | "color"
+  | "heading"
+  | "alignment"
+  | "list"
+  | "block"
+  | "link"
+  | "image"
+  | "clear";
+
+// ===========================================================================
+// Context Value
+// ===========================================================================
+
+/** Values provided by RichEditorContext via createStyledContext */
+export interface RichEditorContextValue {
+  /** Size token for toolbar buttons and editor sizing */
+  size: FontSizeTokens;
+  /** Whether to use compact sizing */
+  compact: boolean;
+  /** Whether the editor is disabled */
+  disabled: boolean;
+}