@multiplatform.one/rich-text 6.1.0 → 6.3.0

package/src/toolbar/toolbarSubComponents.spec.tsx

@@ -5,7 +5,8 @@ import { defaultEditorState } from "../types";
 import { TEXT_COLORS, HIGHLIGHT_COLORS } from "../constants";
 import { normalizeUrl } from "./LinkDialog";
 
-vi.mock("@multiplatform.one/forms", () => ({
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Button: (props: any) => (
     <button
       role="button"
@@ -18,7 +19,8 @@ vi.mock("@multiplatform.one/forms", () => ({
   ),
 }));
 
-vi.mock("@multiplatform.one/components", () => ({
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
   Tooltip: ({ children }: any) => children,
 }));
 

package/src/toolbar/useHorizontalScroll.spec.ts

@@ -0,0 +1,67 @@
+/**
+ * ScrollArrow direction math (rtl-audit U1-class residual): CSSOM flips the
+ * scrollLeft range under RTL (0 → −(scrollWidth − clientWidth)), so the raw
+ * LTR reading inverted both arrow visibility and the remaining-distance
+ * clamp. `horizontalScrollEdges` is the direction-normalized primitive both
+ * the visibility hook and the hover-scroll loop consume.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+// The module under test imports useDirection (house RTL pattern); the pure
+// edge math is exercised with explicit directions (same wholesale-mock
+// precedent as toolbarPrimitives.spec).
+vi.mock("@multiplatform.one/components", () => ({
+  useDirection: () => "ltr",
+}));
+
+const { horizontalScrollEdges } = await import("./useHorizontalScroll");
+
+const scroller = (scrollLeft: number) => ({ scrollLeft, scrollWidth: 500, clientWidth: 300 });
+
+describe("horizontalScrollEdges", () => {
+  it("LTR: scrollLeft is the distance from the left edge", () => {
+    expect(horizontalScrollEdges(scroller(0), "ltr")).toEqual({
+      fromLeftEdge: 0,
+      fromRightEdge: 200,
+    });
+    expect(horizontalScrollEdges(scroller(120), "ltr")).toEqual({
+      fromLeftEdge: 120,
+      fromRightEdge: 80,
+    });
+    expect(horizontalScrollEdges(scroller(200), "ltr")).toEqual({
+      fromLeftEdge: 200,
+      fromRightEdge: 0,
+    });
+  });
+
+  it("RTL: scrollLeft runs 0 → −range, distances normalize per edge", () => {
+    // Start position (flush right): everything overflows to the LEFT.
+    expect(horizontalScrollEdges(scroller(0), "rtl")).toEqual({
+      fromLeftEdge: 200,
+      fromRightEdge: 0,
+    });
+    expect(horizontalScrollEdges(scroller(-120), "rtl")).toEqual({
+      fromLeftEdge: 80,
+      fromRightEdge: 120,
+    });
+    // Fully scrolled (flush left): nothing further left, all content right.
+    expect(horizontalScrollEdges(scroller(-200), "rtl")).toEqual({
+      fromLeftEdge: 0,
+      fromRightEdge: 200,
+    });
+  });
+
+  it("no overflow: both distances collapse to zero in both directions", () => {
+    const flat = { scrollLeft: 0, scrollWidth: 300, clientWidth: 300 };
+    expect(horizontalScrollEdges(flat, "ltr")).toEqual({ fromLeftEdge: 0, fromRightEdge: 0 });
+    expect(horizontalScrollEdges(flat, "rtl")).toEqual({ fromLeftEdge: 0, fromRightEdge: 0 });
+  });
+
+  it("pre-fix regression: raw scrollLeft sign misreads RTL edges", () => {
+    // The old visibility math (scrollLeft > threshold) at the RTL start
+    // position read 0 → no left arrow, while 200px actually overflowed left.
+    const atRtlStart = horizontalScrollEdges(scroller(0), "rtl");
+    expect(atRtlStart.fromLeftEdge).toBeGreaterThan(8);
+    expect(atRtlStart.fromRightEdge).toBeLessThanOrEqual(8);
+  });
+});

package/src/toolbar/useHorizontalScroll.tsx

@@ -8,9 +8,31 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { View } from "tamagui";
 import { LinearGradient } from "@tamagui/linear-gradient";
 import { CaretLeftIcon, CaretRightIcon } from "@phosphor-icons/react";
+import { useDirection } from "@multiplatform.one/components";
 
 const scrollArrowThreshold = 8;
 
+/**
+ * Physical px distances from each horizontal scroll edge. The arrows are
+ * physically-anchored edge overlays (left:0 / right:0), but CSSOM flips the
+ * `scrollLeft` range under RTL: an RTL scroller runs 0 → −(scrollWidth −
+ * clientWidth), so the LTR reading (`scrollLeft` = distance from the left
+ * edge) inverts and both arrow visibility and the remaining-distance clamp
+ * break. Normalize per `useDirection()` (house RTL pattern) instead of
+ * reading the raw sign.
+ */
+export function horizontalScrollEdges(
+  element: Pick<HTMLElement, "scrollLeft" | "scrollWidth" | "clientWidth">,
+  direction: "ltr" | "rtl",
+): { fromLeftEdge: number; fromRightEdge: number } {
+  const range = Math.max(element.scrollWidth - element.clientWidth, 0);
+  const minScrollLeft = direction === "rtl" ? -range : 0;
+  return {
+    fromLeftEdge: element.scrollLeft - minScrollLeft,
+    fromRightEdge: minScrollLeft + range - element.scrollLeft,
+  };
+}
+
 // ===========================================================================
 // useHorizontalScroll
 // ===========================================================================
@@ -98,17 +120,21 @@ export function useHorizontalScroll(ref: React.RefObject<HTMLDivElement | null>)
  * Hook to track horizontal scroll arrows visibility
  */
 export function useHorizontalScrollArrows() {
+  const direction = useDirection();
   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));
-  }, []);
+  const updateArrows = useCallback(
+    (element: HTMLElement) => {
+      const { fromLeftEdge, fromRightEdge } = horizontalScrollEdges(element, direction);
+      const left = fromLeftEdge > scrollArrowThreshold;
+      const right = fromRightEdge > scrollArrowThreshold;
+      setArrowLeft((prev) => (prev !== left ? left : prev));
+      setArrowRight((prev) => (prev !== right ? right : prev));
+    },
+    [direction],
+  );
 
   return { arrowLeft, arrowRight, arrowScrollDirRef, updateArrows };
 }
@@ -136,6 +162,7 @@ export function HorizontalScrollArrow({
   transition,
 }: HorizontalScrollArrowProps) {
   const isLeft = direction === "left";
+  const textDirection = useDirection();
   const animationFrameRef = useRef(0);
   const lastTimeRef = useRef(0);
   const resumeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -163,10 +190,10 @@ export function HorizontalScrollArrow({
       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),
-      );
+      // Remaining distance to this arrow's physical edge (RTL-normalized);
+      // the step itself stays physical: scrollLeft always decreases leftward.
+      const { fromLeftEdge, fromRightEdge } = horizontalScrollEdges(el, textDirection);
+      const px = Math.min(elapsed / 2, Math.max(isLeft ? fromLeftEdge : fromRightEdge, 0));
       if (px > 0) {
         selfScrollingRef.current = true;
         arrowScrollDirRef.current = isLeft ? "left" : "right";
@@ -175,7 +202,7 @@ export function HorizontalScrollArrow({
       animationFrameRef.current = requestAnimationFrame(tick);
     };
     animationFrameRef.current = requestAnimationFrame(tick);
-  }, [isLeft, scrollRef, arrowScrollDirRef]);
+  }, [isLeft, scrollRef, arrowScrollDirRef, textDirection]);
 
   const openTimestampRef = useRef(0);
   useEffect(() => {

package/src/toolbar/useRovingFocus.spec.tsx

@@ -0,0 +1,100 @@
+import { describe, expect, it } from "vitest";
+import { useRef } from "react";
+import { fireEvent, render } from "@testing-library/react";
+import { useRovingFocus } from "./useRovingFocus";
+
+function Toolbar({ disabledSecond = false }: { disabledSecond?: boolean }) {
+  const ref = useRef<HTMLDivElement>(null);
+  useRovingFocus(ref);
+  return (
+    <div ref={ref} role="toolbar" aria-label="Test toolbar">
+      <button type="button">one</button>
+      <button type="button" disabled={disabledSecond}>
+        two
+      </button>
+      <button type="button">three</button>
+    </div>
+  );
+}
+
+/** Tamagui Buttons render as <div role="button">, not <button> */
+function DivToolbar() {
+  const ref = useRef<HTMLDivElement>(null);
+  useRovingFocus(ref);
+  return (
+    <div ref={ref} role="toolbar" aria-label="Div toolbar">
+      <div role="button" tabIndex={0}>
+        bold
+      </div>
+      <div role="button" tabIndex={0}>
+        italic
+      </div>
+      <div role="button" tabIndex={0} aria-disabled="true">
+        redo
+      </div>
+      <div role="button" tabIndex={0}>
+        undo
+      </div>
+    </div>
+  );
+}
+
+describe("useRovingFocus", () => {
+  it("handles div[role=button] controls (Tamagui Button shape)", () => {
+    const { getAllByRole, getByRole } = render(<DivToolbar />);
+    const buttons = getAllByRole("button");
+    // aria-disabled control is excluded from the roving order entirely
+    expect(buttons.map((b) => b.tabIndex)).toEqual([0, -1, 0, -1]);
+    buttons[0]!.focus();
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    expect(document.activeElement).toBe(buttons[1]);
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    // skips the aria-disabled control
+    expect(document.activeElement).toBe(buttons[3]);
+  });
+
+  it("makes the toolbar a single tab stop (first button 0, rest -1)", () => {
+    const { getAllByRole } = render(<Toolbar />);
+    const buttons = getAllByRole("button");
+    expect(buttons.map((b) => b.tabIndex)).toEqual([0, -1, -1]);
+  });
+
+  it("moves focus with ArrowRight and wraps", () => {
+    const { getAllByRole, getByRole } = render(<Toolbar />);
+    const [first, second, third] = getAllByRole("button");
+    first!.focus();
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    expect(document.activeElement).toBe(second);
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    expect(document.activeElement).toBe(third);
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    expect(document.activeElement).toBe(first);
+  });
+
+  it("moves focus with ArrowLeft (reverse) and Home/End", () => {
+    const { getAllByRole, getByRole } = render(<Toolbar />);
+    const [first, _second, third] = getAllByRole("button");
+    first!.focus();
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowLeft" });
+    expect(document.activeElement).toBe(third);
+    fireEvent.keyDown(getByRole("toolbar"), { key: "Home" });
+    expect(document.activeElement).toBe(first);
+    fireEvent.keyDown(getByRole("toolbar"), { key: "End" });
+    expect(document.activeElement).toBe(third);
+  });
+
+  it("skips disabled controls", () => {
+    const { getAllByRole, getByRole } = render(<Toolbar disabledSecond />);
+    const [first, _second, third] = getAllByRole("button");
+    first!.focus();
+    fireEvent.keyDown(getByRole("toolbar"), { key: "ArrowRight" });
+    expect(document.activeElement).toBe(third);
+  });
+
+  it("updates the tab stop when focus lands on a control", () => {
+    const { getAllByRole } = render(<Toolbar />);
+    const buttons = getAllByRole("button");
+    fireEvent.focusIn(buttons[2]!);
+    expect(buttons.map((b) => b.tabIndex)).toEqual([-1, -1, 0]);
+  });
+});

package/src/toolbar/useRovingFocus.ts

@@ -0,0 +1,82 @@
+/**
+ * Roving tabindex for the toolbar (WAI-ARIA toolbar pattern).
+ *
+ * The toolbar is ONE tab stop: Tab enters at the last-active control and
+ * leaves on the next Tab; ArrowLeft/ArrowRight (direction-aware for RTL),
+ * Home, and End move between enabled controls.
+ */
+
+import { useEffect } from "react";
+import type { RefObject } from "react";
+
+// Tamagui Buttons render as <div role="button">, so match by role as well
+// as by tag; disabled controls drop out of the roving order either way.
+const FOCUSABLE = [
+  'button:not([disabled]):not([aria-disabled="true"])',
+  '[role="button"]:not([disabled]):not([aria-disabled="true"])',
+].join(", ");
+
+export function useRovingFocus(containerRef: RefObject<HTMLElement | null>) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return undefined;
+
+    const controls = () => Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE));
+
+    const setTabStops = (active?: HTMLElement) => {
+      const list = controls();
+      if (list.length === 0) return;
+      const current =
+        active && list.includes(active) ? active : (list.find((b) => b.tabIndex === 0) ?? list[0]!);
+      for (const control of list) control.tabIndex = control === current ? 0 : -1;
+    };
+
+    setTabStops();
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+      const list = controls();
+      if (list.length === 0) return;
+      const current = document.activeElement as HTMLElement | null;
+      let index = current ? list.indexOf(current) : -1;
+      if (index === -1) return;
+
+      const isRtl =
+        (container.closest("[dir]") as HTMLElement | null)?.dir === "rtl" || document.dir === "rtl";
+      const forward = isRtl ? -1 : 1;
+
+      if (event.key === "ArrowRight") index = (index + forward + list.length) % list.length;
+      else if (event.key === "ArrowLeft") index = (index - forward + list.length) % list.length;
+      else if (event.key === "Home") index = 0;
+      else index = list.length - 1;
+
+      event.preventDefault();
+      const next = list[index]!;
+      setTabStops(next);
+      next.focus();
+      next.scrollIntoView({ block: "nearest", inline: "nearest" });
+    };
+
+    const handleFocusIn = (event: FocusEvent) => {
+      const target = event.target as HTMLElement;
+      if (target.matches?.(FOCUSABLE)) setTabStops(target);
+    };
+
+    // Buttons mount/unmount (sections, disabled flips) -- keep stops valid
+    const observer = new MutationObserver(() => setTabStops());
+    observer.observe(container, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    });
+
+    container.addEventListener("keydown", handleKeyDown);
+    container.addEventListener("focusin", handleFocusIn);
+    return () => {
+      observer.disconnect();
+      container.removeEventListener("keydown", handleKeyDown);
+      container.removeEventListener("focusin", handleFocusIn);
+    };
+  }, [containerRef]);
+}

package/src/types.spec.ts

@@ -1,6 +1,12 @@
 import { describe, it, expect } from "vitest";
 import { defaultEditorState } from "./types";
-import { NATIVE_SUPPORTED_COMMANDS, TEXT_COLORS, HIGHLIGHT_COLORS } from "./constants";
+import {
+  NATIVE_SUPPORTED_COMMANDS,
+  TEXT_COLORS,
+  TEXT_COLORS_DARK,
+  HIGHLIGHT_COLORS,
+  PALETTE_THEME_TOKENS,
+} from "./constants";
 
 describe("types and constants", () => {
   it("defaultEditorState has expected shape and default values", () => {
@@ -56,6 +62,28 @@ describe("types and constants", () => {
     expect(noneEntry?.name).toBe("None");
   });
 
+  it("palette values are theme custom properties, never raw hex (Axiom 5 / DG-COL-01)", () => {
+    for (const entry of [...TEXT_COLORS, ...TEXT_COLORS_DARK, ...HIGHLIGHT_COLORS]) {
+      if (entry.value === null) continue;
+      expect(entry.value).toMatch(/^var\(--[a-zA-Z0-9]+\)$/);
+    }
+  });
+
+  it("light and dark text palettes share tokens; only the neutral ink label flips", () => {
+    expect(TEXT_COLORS_DARK.map((c) => c.value)).toEqual(TEXT_COLORS.map((c) => c.value));
+    expect(TEXT_COLORS.find((c) => c.value === "var(--color12)")?.name).toBe("Black");
+    expect(TEXT_COLORS_DARK.find((c) => c.value === "var(--color12)")?.name).toBe("White");
+  });
+
+  it("PALETTE_THEME_TOKENS covers every token referenced by the palettes", () => {
+    expect(PALETTE_THEME_TOKENS.length).toBeGreaterThan(0);
+    for (const entry of [...TEXT_COLORS, ...HIGHLIGHT_COLORS]) {
+      if (entry.value === null) continue;
+      const token = entry.value.replace(/^var\(--/, "").replace(/\)$/, "");
+      expect(PALETTE_THEME_TOKENS).toContain(token);
+    }
+  });
+
   it("NativeCapability covers all EditorCommand values", () => {
     const commands: string[] = [
       "bold",
@@ -89,6 +117,17 @@ describe("types and constants", () => {
       "highlight",
       "horizontalRule",
       "clearFormatting",
+      "insertTable",
+      "addColumnBefore",
+      "addColumnAfter",
+      "deleteColumn",
+      "addRowBefore",
+      "addRowAfter",
+      "deleteRow",
+      "deleteTable",
+      "mergeCells",
+      "splitCell",
+      "toggleHeaderRow",
     ];
 
     for (const cmd of commands) {

package/src/types.ts

@@ -3,6 +3,22 @@
  */
 
 import type { FontSizeTokens } from "tamagui";
+import type { MentionItem } from "@multiplatform.one/forms";
+
+// ===========================================================================
+// Mentions
+// ===========================================================================
+
+/**
+ * Mention wiring for the @ suggestion popup (web). Uses the forms
+ * `MentionItem` contract (LC-16: same data shape as MentionInput).
+ */
+export interface RichTextMentionOptions {
+  /** Trigger character (default "@") */
+  trigger?: string;
+  /** Returns suggestion items for a query (sync or async) */
+  items: (query: string) => MentionItem[] | Promise<MentionItem[]>;
+}
 
 // ===========================================================================
 // Editor Command
@@ -170,6 +186,18 @@ export interface RichEditorProps {
   maxHeight?: number;
   /** Show error state */
   hasError?: boolean;
+  /**
+   * Uploads a pasted/dropped image and resolves its URL (web). Without it,
+   * images are inlined as base64 data URIs.
+   */
+  onImageUpload?: (file: File) => Promise<string>;
+  /**
+   * Uploads a pasted/dropped non-image file and resolves its URL (web).
+   * Inserts an attachment chip link; without it, non-image files are ignored.
+   */
+  onFileUpload?: (file: File) => Promise<{ url: string; name?: string }>;
+  /** Enables the @ mention suggestion popup (web) */
+  mentions?: RichTextMentionOptions;
 }
 
 // ===========================================================================

package/types/RichEditor.d.ts

@@ -0,0 +1,51 @@
+/**
+ * RichEditor compound component (web)
+ *
+ * Combines the TiptapEditor, FixedToolbar, and BubbleToolbar into a compound
+ * component with static properties:
+ * - RichEditor.FixedToolbar
+ * - RichEditor.BubbleToolbar
+ * - RichEditor.Editor
+ *
+ * Root provides RichEditorContext with resolved size, compact, and disabled.
+ * Uses useResolvedKnobs for knobs integration and clampRadiusForLargeComponent
+ * for radius clamping (max $4).
+ */
+import type { SizeTokens } from "tamagui";
+import type { RichEditorProps, RichEditorRef, ToolbarSection } from "./types";
+import { FixedToolbar } from "./toolbar/FixedToolbar";
+import { BubbleToolbar } from "./toolbar/BubbleToolbar";
+export interface RichEditorCombinedProps extends RichEditorProps {
+    /** Size token for the editor */
+    size?: SizeTokens;
+    /** Use compact sizing for tighter controls */
+    compact?: boolean;
+    /** Show the fixed toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Show the bubble toolbar on text selection (default: false, web only) */
+    showBubbleToolbar?: boolean;
+    /** Toolbar sections to display (shows all when omitted) */
+    sections?: ToolbarSection[];
+    /** Show a drag handle to resize the editor vertically (default: true) */
+    resizable?: boolean;
+    /** Show word/character count status bar (default: true) */
+    showStatusBar?: boolean;
+    /** Controlled fullscreen state (uncontrolled when omitted) */
+    fullscreen?: boolean;
+    /** Initial fullscreen state when uncontrolled (default: false) */
+    defaultFullscreen?: boolean;
+    /** Called when the fullscreen state changes */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /**
+     * Native only: render the embedded inline editor instead of the
+     * preview + fullscreen edit modal. Ignored on web (the web editor is
+     * always inline; fullscreen is the toolbar toggle).
+     */
+    inlineEditing?: boolean;
+}
+export declare const RichEditor: import("react").ForwardRefExoticComponent<RichEditorCombinedProps & import("react").RefAttributes<RichEditorRef>> & {
+    FixedToolbar: typeof FixedToolbar;
+    BubbleToolbar: typeof BubbleToolbar;
+    Editor: import("react").NamedExoticComponent<import("./editor").TiptapEditorProps & import("react").RefAttributes<RichEditorRef>>;
+};
+//# sourceMappingURL=RichEditor.d.ts.map

package/types/RichEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichEditor.d.ts","sourceRoot":"","sources":["../src/RichEditor.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAYH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,KAAK,EAGV,eAAe,EACf,aAAa,EACb,cAAc,EACf,MAAM,SAAS,CAAC;AAKjB,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAQxD,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,yEAAyE;IACzE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA2ND,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}

package/types/RichEditor.native.d.ts

@@ -0,0 +1,59 @@
+/**
+ * RichEditor compound component (native)
+ *
+ * Mobile editing model (Notion / Gmail convention):
+ *
+ * - INLINE (default): a compact PREVIEW surface themed like an input --
+ *   the committed content rendered as styled text (or the placeholder),
+ *   with a subtle edit affordance. Tapping it does not type inline; it
+ *   opens the fullscreen editor.
+ * - FULLSCREEN EDIT: a safe-area-aware RN Modal. Header bar with Cancel
+ *   (left, discards the draft back to the pre-open value) and Done (right,
+ *   commits via onChange) -- draft-until-commit. The Tentap editor fills
+ *   the screen and the FixedToolbar docks ABOVE the keyboard via
+ *   KeyboardAvoidingView.
+ * - `inlineEditing` opts back into the embedded inline editor for hosts
+ *   that truly want the old behavior.
+ *
+ * The web `fullscreen` / `defaultFullscreen` / `onFullscreenChange` props
+ * map to the modal here, so the public API is one surface.
+ *
+ * No BubbleToolbar sub-component (10Tap does not support floating menus).
+ * The BubbleToolbar property is still present on the compound component
+ * to maintain the same public interface, but renders nothing on native.
+ */
+import type { SizeTokens } from "tamagui";
+import type { RichEditorProps, RichEditorRef, ToolbarSection } from "./types";
+import { FixedToolbar } from "./toolbar/FixedToolbar";
+export interface RichEditorCombinedProps extends RichEditorProps {
+    /** Size token for the editor */
+    size?: SizeTokens;
+    /** Use compact sizing for tighter controls */
+    compact?: boolean;
+    /** Show the fixed toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Show the bubble toolbar on text selection (not supported on native, ignored) */
+    showBubbleToolbar?: boolean;
+    /** Toolbar sections to display (shows all when omitted) */
+    sections?: ToolbarSection[];
+    /** Controlled fullscreen state (opens the fullscreen edit modal) */
+    fullscreen?: boolean;
+    /** Initial fullscreen state when uncontrolled (default: false) */
+    defaultFullscreen?: boolean;
+    /** Called when the fullscreen state changes */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /**
+     * Escape hatch: render the old embedded inline editor instead of the
+     * preview + fullscreen modal (default: false)
+     */
+    inlineEditing?: boolean;
+}
+/** No-op BubbleToolbar for native -- 10Tap does not support floating menus */
+declare function NativeBubbleToolbar(): null;
+export declare const RichEditor: import("react").ForwardRefExoticComponent<RichEditorCombinedProps & import("react").RefAttributes<RichEditorRef>> & {
+    FixedToolbar: typeof FixedToolbar;
+    BubbleToolbar: typeof NativeBubbleToolbar;
+    Editor: any;
+};
+export {};
+//# sourceMappingURL=RichEditor.native.d.ts.map

package/types/RichEditor.native.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichEditor.native.d.ts","sourceRoot":"","sources":["../src/RichEditor.native.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAWH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,KAAK,EAAe,eAAe,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI3F,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAStD,MAAM,WAAW,uBAAwB,SAAQ,eAAe;IAC9D,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;IAC5B,oEAAoE;IACpE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kEAAkE;IAClE,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACnD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAMD,8EAA8E;AAC9E,iBAAS,mBAAmB,SAE3B;AA4dD,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}

package/types/RichTextEditor/index.d.ts

@@ -0,0 +1,71 @@
+/**
+ * RichTextEditor with form integration
+ *
+ * Three-branch architecture following field architecture standard:
+ * - Branch 1: Skeleton loading state
+ * - Branch 2: Standalone (no form context)
+ * - Branch 3: Form-integrated (with TanStack Form)
+ *
+ * Wraps RichEditor compound component with FieldLayout and validation.
+ * Uses custom empty check for '<p></p>' which is Tiptap's empty state.
+ */
+import type { DeepKeys, DeepValue } from "@tanstack/form-core";
+import type React from "react";
+import type { LabelProps, SizeTokens } from "tamagui";
+import { type FormFieldProps, type FieldComponentProps, type Validator } from "@multiplatform.one/forms";
+import type { RichTextMentionOptions, ToolbarSection } from "../types";
+export type RichTextEditorProps<TParentData = any, TName extends DeepKeys<TParentData> = any, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>> = Omit<FormFieldProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, "children" | "field"> & Partial<Omit<FieldComponentProps<TParentData, TName, TFieldValidator, TFormValidator, TData>, "children">> & {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onBlur?: (...args: any[]) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    minHeight?: number;
+    maxHeight?: number;
+    label?: React.ReactNode;
+    labelProps?: Omit<LabelProps, "htmlFor" | "ref">;
+    helperText?: string;
+    error?: string | boolean;
+    required?: boolean;
+    size?: SizeTokens;
+    /** Show the formatting toolbar (default: true) */
+    showToolbar?: boolean;
+    /** Use compact sizing for toolbar (default: false) */
+    compact?: boolean;
+    /** Show the bubble toolbar on text selection (default: false, web only) */
+    showBubbleToolbar?: boolean;
+    /** Toolbar sections to display (shows all when omitted) */
+    sections?: ToolbarSection[];
+    /** When true, renders a skeleton placeholder instead of the editor */
+    skeleton?: boolean;
+    /** Controlled fullscreen state (web; uncontrolled when omitted) */
+    fullscreen?: boolean;
+    /** Initial fullscreen state when uncontrolled (default: false) */
+    defaultFullscreen?: boolean;
+    /** Called when the fullscreen state changes */
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    /**
+     * Native only: render the embedded inline editor instead of the
+     * preview + fullscreen edit modal (ignored on web)
+     */
+    inlineEditing?: boolean;
+    /**
+     * Uploads a pasted/dropped image and resolves its URL (web). Without it,
+     * images are inlined as base64 data URIs.
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+    /**
+     * Uploads a pasted/dropped non-image file and resolves its URL (web).
+     * Inserts an attachment chip link; without it, non-image files are ignored.
+     */
+    onFileUpload?: (file: File) => Promise<{
+        url: string;
+        name?: string;
+    }>;
+    /** Enables the @ mention suggestion popup (web) */
+    mentions?: RichTextMentionOptions;
+};
+export declare function RichTextEditor<TParentData, TName extends DeepKeys<TParentData>, TFieldValidator extends Validator<DeepValue<TParentData, TName>, unknown> | undefined = undefined, TFormValidator extends Validator<TParentData, unknown> | undefined = undefined, TData extends DeepValue<TParentData, TName> = DeepValue<TParentData, TName>>(props: RichTextEditorProps<TParentData, TName, TFieldValidator, TFormValidator, TData>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/types/RichTextEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/RichTextEditor/index.tsx"],"names":[],"mappings":"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"}