@multiplatform.one/rich-text 6.0.0

package/src/integration.spec.tsx

@@ -0,0 +1,430 @@
+/**
+ * Integration tests for the rich text editor rebuild
+ *
+ * These tests focus on cross-component data flow and integration points
+ * that span multiple modules, filling gaps not covered by individual
+ * module tests from Task Groups 2-14.
+ */
+
+import { describe, it, expect, vi } from "vitest";
+
+// ===========================================================================
+// 1. Cross-component data flow: getEditorStateFromTiptap text alignment
+// ===========================================================================
+
+describe("getEditorStateFromTiptap text alignment paths", () => {
+  it("maps center, right, and justify alignment from Tiptap editor", async () => {
+    const { getEditorStateFromTiptap } = await import("./editor/useEditorState");
+
+    const createMockEditor = (activeAlign: string) => ({
+      isActive: (type: string | Record<string, any>, attrs?: any) => {
+        if (typeof type === "object" && type.textAlign) {
+          return type.textAlign === activeAlign;
+        }
+        if (attrs?.textAlign) {
+          return attrs.textAlign === activeAlign;
+        }
+        if (type === "paragraph") return true;
+        return false;
+      },
+      getAttributes: () => ({}),
+      can: () => ({ undo: () => false, redo: () => false }),
+    });
+
+    const centerState = getEditorStateFromTiptap(createMockEditor("center"));
+    expect(centerState.textAlign).toBe("center");
+
+    const rightState = getEditorStateFromTiptap(createMockEditor("right"));
+    expect(rightState.textAlign).toBe("right");
+
+    const justifyState = getEditorStateFromTiptap(createMockEditor("justify"));
+    expect(justifyState.textAlign).toBe("justify");
+  });
+});
+
+// ===========================================================================
+// 2. getEditorCSS default minHeight
+// ===========================================================================
+
+describe("getEditorCSS defaults", () => {
+  it("applies 150px default minHeight when no options are provided", async () => {
+    const { getEditorCSS } = await import("./editor/editorStyles");
+
+    const css = getEditorCSS();
+    expect(css).toContain("min-height: 150px");
+  });
+});
+
+// ===========================================================================
+// 3. ToolbarButton disabled state from context
+// ===========================================================================
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      disabled={props.disabled}
+      onClick={props.onPress}
+      data-active={props.theme === "active" ? "true" : undefined}
+    >
+      {props.children}
+    </button>
+  ),
+  Field: ({ children, ...props }: any) => {
+    const field = {
+      state: { value: props.defaultValue ?? "", meta: { errors: [] } },
+      handleChange: vi.fn(),
+      handleBlur: vi.fn(),
+    };
+    return <div data-testid="tanstack-field">{children(field)}</div>;
+  },
+  FieldLayout: ({ children, label, error, ..._props }: any) => (
+    <div data-testid="field-layout" data-label={label} data-error={error || undefined}>
+      {children}
+    </div>
+  ),
+  Skeleton: ({ variant, width, height }: any) => (
+    <div data-testid="skeleton" data-variant={variant} style={{ width, height }} />
+  ),
+  getFieldError: (field: any, propError: any) => {
+    const fieldError = field.state.meta.errors.length
+      ? String(field.state.meta.errors[0])
+      : undefined;
+    return propError ?? fieldError;
+  },
+  useFormField: ({ form }: any) => ({
+    resolvedForm: form || undefined,
+    knobProps: {
+      body: {},
+      borderRadius: { borderRadius: "$3", borderWidth: 1 },
+      elevation: undefined,
+      sizeToken: "$4",
+      outlined: false,
+      inputBackground: "$color2",
+      textAccentColor: "$color",
+      transition: undefined,
+      heading: {},
+      gap: { gap: "$2" },
+    },
+    id: "test-id",
+  }),
+  useResolvedValidators: (
+    required: boolean | undefined,
+    validators: any,
+    label: any,
+    name: any,
+    isEmpty?: (v: unknown) => boolean,
+  ) => {
+    if (!required) return validators;
+    const check = isEmpty || ((v: unknown) => v == null || v === "");
+    const requiredValidator = ({ value }: { value: unknown }) =>
+      check(value)
+        ? `${typeof label === "string" ? label : name || "Field"} is required`
+        : undefined;
+    if (!validators) return { onSubmit: requiredValidator };
+    return { ...validators, onSubmit: requiredValidator };
+  },
+  mergeFieldHandler: (field: any, name: string, handler: any) => {
+    return (...args: any[]) => {
+      (field[name] as Function)(...args);
+      handler?.(...args);
+    };
+  },
+  clampRadiusForLargeComponent: (radiusToken: string | undefined, maxTokenNum = 4) => {
+    if (!radiusToken) return "$3";
+    if (radiusToken === "$0") return 0;
+    if (typeof radiusToken === "string" && radiusToken.startsWith("$")) {
+      const num = Number.parseInt(radiusToken.slice(1), 10);
+      return num > maxTokenNum ? `$${maxTokenNum}` : radiusToken;
+    }
+    return radiusToken;
+  },
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+vi.mock("@multiplatform.one/theme", () => ({
+  useResolvedKnobs: () => ({
+    knobProps: {
+      body: {},
+      borderRadius: { borderRadius: "$3", borderWidth: 1 },
+      elevation: undefined,
+      sizeToken: "$4",
+      outlined: false,
+      inputBackground: "$color2",
+      textAccentColor: "$color",
+      transition: undefined,
+      heading: {},
+    },
+    control: {
+      hoverKnobProps: undefined,
+      pressKnobProps: undefined,
+      focusKnobProps: undefined,
+      focusVisibleKnobProps: undefined,
+    },
+  }),
+}));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: ({ children }: any) => <div data-testid="bubble-menu">{children}</div>,
+}));
+
+const mockEditor = {
+  isActive: vi.fn().mockReturnValue(false),
+  getAttributes: vi.fn().mockReturnValue({}),
+  can: vi.fn().mockReturnValue({ undo: () => false, redo: () => false }),
+  getHTML: vi.fn().mockReturnValue("<p></p>"),
+  getJSON: vi.fn().mockReturnValue({ type: "doc", content: [] }),
+  chain: vi.fn().mockReturnValue({
+    focus: vi.fn().mockReturnValue({
+      toggleBold: vi.fn().mockReturnValue({ run: vi.fn() }),
+    }),
+  }),
+  commands: {
+    setContent: vi.fn(),
+    focus: vi.fn(),
+    blur: vi.fn(),
+  },
+  setEditable: vi.fn(),
+};
+
+vi.mock("@tiptap/react", () => ({
+  useEditor: vi.fn().mockReturnValue(mockEditor),
+  EditorContent: ({ editor: _editor }: any) => <div data-testid="editor-content">Editor</div>,
+}));
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-underline", () => ({ default: {} }));
+vi.mock("@tiptap/extension-link", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-text-align", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-color", () => ({ Color: {} }));
+vi.mock("@tiptap/extension-text-style", () => ({ TextStyle: {} }));
+vi.mock("@tiptap/extension-highlight", () => ({
+  Highlight: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-subscript", () => ({ Subscript: {} }));
+vi.mock("@tiptap/extension-superscript", () => ({ Superscript: {} }));
+vi.mock("@tiptap/extension-task-list", () => ({ default: {} }));
+vi.mock("@tiptap/extension-task-item", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-image", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "./context";
+import { defaultEditorState } from "./types";
+import type { EditorCommand, EditorState, ToolbarSection } from "./types";
+
+const { ToolbarButton } = await import("./toolbar/ToolbarButton");
+const { FixedToolbar } = await import("./toolbar/FixedToolbar");
+const { RichEditor } = await import("./RichEditor");
+const { RichTextEditor } = await import("./RichTextEditor/index");
+
+describe("ToolbarButton disabled state from context", () => {
+  it("inherits disabled state from RichEditorContext", () => {
+    const { getByRole } = renderWithProviders(
+      <RichEditorContext.Provider size="$true" compact={false} disabled>
+        <ToolbarButton onPress={() => {}} aria-label="Test">
+          T
+        </ToolbarButton>
+      </RichEditorContext.Provider>,
+    );
+    const button = getByRole("button");
+    expect(button.getAttribute("disabled")).not.toBeNull();
+  });
+});
+
+// ===========================================================================
+// 4. EditorState flows to FixedToolbar and reflects active states
+// ===========================================================================
+
+describe("EditorState flows to FixedToolbar active states", () => {
+  it("reflects bold active state in the Bold toolbar button", () => {
+    const boldActiveState: EditorState = {
+      ...defaultEditorState,
+      isBold: true,
+    };
+
+    const { container } = renderWithProviders(
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <FixedToolbar editorRef={{ current: null }} state={boldActiveState} />
+      </RichEditorContext.Provider>,
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    const boldButton = Array.from(buttons).find((b) => b.getAttribute("aria-label") === "Bold");
+    expect(boldButton).toBeTruthy();
+    expect(boldButton?.getAttribute("data-active")).toBe("true");
+  });
+});
+
+// ===========================================================================
+// 5. Sections with empty array hides all groups
+// ===========================================================================
+
+describe("FixedToolbar sections edge case", () => {
+  it("hides all groups when sections is an empty array", () => {
+    const { container } = renderWithProviders(
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <FixedToolbar
+          editorRef={{ current: null }}
+          state={defaultEditorState}
+          sections={[] as ToolbarSection[]}
+        />
+      </RichEditorContext.Provider>,
+    );
+
+    const buttons = container.querySelectorAll("[role='button']");
+    expect(buttons.length).toBe(0);
+  });
+});
+
+// ===========================================================================
+// 6. RichEditor compound component forwards ref to TiptapEditor
+// ===========================================================================
+
+describe("RichEditor ref forwarding", () => {
+  it("forwards ref through compound component to TiptapEditor", () => {
+    const { createRef } = require("react");
+    const ref = createRef();
+
+    renderWithProviders(<RichEditor ref={ref} />);
+
+    expect(ref.current).toBeTruthy();
+    expect(typeof ref.current?.executeCommand).toBe("function");
+    expect(typeof ref.current?.getHTML).toBe("function");
+    expect(typeof ref.current?.getState).toBe("function");
+  });
+});
+
+// ===========================================================================
+// 7. RichTextEditor custom empty check integration
+// ===========================================================================
+
+describe("RichTextEditor form validation with custom empty check", () => {
+  it("uses richTextIsEmpty so '<p></p>' triggers required validation", () => {
+    const mockForm = { store: {} } as any;
+    const { getByTestId } = renderWithProviders(
+      <RichTextEditor
+        form={mockForm}
+        name="content"
+        label="Content"
+        required
+        defaultValue="<p></p>"
+      />,
+    );
+
+    const field = getByTestId("tanstack-field");
+    expect(field).toBeTruthy();
+  });
+});
+
+// ===========================================================================
+// 8. Bridge state mapping consistency between tiptap and bridge
+// ===========================================================================
+
+describe("EditorState shape consistency between platforms", () => {
+  it("getEditorStateFromTiptap and getEditorStateFromBridge produce the same shape", async () => {
+    const { getEditorStateFromTiptap, getEditorStateFromBridge } =
+      await import("./editor/useEditorState");
+
+    const tiptapState = getEditorStateFromTiptap(null);
+    const bridgeState = getEditorStateFromBridge(null);
+
+    const tiptapKeys = Object.keys(tiptapState).sort();
+    const bridgeKeys = Object.keys(bridgeState).sort();
+
+    expect(tiptapKeys).toEqual(bridgeKeys);
+    expect(tiptapState).toEqual(bridgeState);
+  });
+});
+
+// ===========================================================================
+// 9. NATIVE_SUPPORTED_COMMANDS completeness matches EditorCommand type
+// ===========================================================================
+
+describe("NATIVE_SUPPORTED_COMMANDS completeness", () => {
+  it("has an entry for every EditorCommand and each value is a boolean", async () => {
+    const { NATIVE_SUPPORTED_COMMANDS } = await import("./constants");
+
+    // All EditorCommand union values must have an entry in the map
+    const allCommands: 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",
+    ];
+
+    for (const cmd of allCommands) {
+      expect(
+        typeof NATIVE_SUPPORTED_COMMANDS[cmd],
+        `NATIVE_SUPPORTED_COMMANDS should have a boolean for "${cmd}"`,
+      ).toBe("boolean");
+    }
+
+    // No extra keys beyond what EditorCommand defines
+    const commandKeys = Object.keys(NATIVE_SUPPORTED_COMMANDS);
+    expect(commandKeys.length).toBe(allCommands.length);
+  });
+});
+
+// ===========================================================================
+// 10. RichEditor passes showBubbleToolbar through to TiptapEditor
+// ===========================================================================
+
+describe("RichEditor passes showBubbleToolbar to TiptapEditor", () => {
+  it("renders BubbleMenu when showBubbleToolbar is true", () => {
+    const { container } = renderWithProviders(<RichEditor showBubbleToolbar />);
+
+    const bubbleMenu = container.querySelector("[data-testid='bubble-menu']");
+    expect(bubbleMenu).toBeTruthy();
+  });
+
+  it("does not render BubbleMenu when showBubbleToolbar is false", () => {
+    const { container } = renderWithProviders(<RichEditor showBubbleToolbar={false} />);
+
+    const bubbleMenu = container.querySelector("[data-testid='bubble-menu']");
+    expect(bubbleMenu).toBeNull();
+  });
+});

package/src/richEditor.spec.tsx

@@ -0,0 +1,169 @@
+import { describe, it, expect, vi } from "vitest";
+
+// ---------------------------------------------------------------------------
+// Mocks — must come before imports
+// ---------------------------------------------------------------------------
+
+vi.mock("@multiplatform.one/forms", () => ({
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      disabled={props.disabled}
+      onClick={props.onPress}
+    >
+      {props.children}
+    </button>
+  ),
+  clampRadiusForLargeComponent: (radiusToken: string | undefined, maxTokenNum = 4) => {
+    if (!radiusToken) return "$3";
+    if (radiusToken === "$0") return 0;
+    if (typeof radiusToken === "string" && radiusToken.startsWith("$")) {
+      const num = Number.parseInt(radiusToken.slice(1), 10);
+      return num > maxTokenNum ? `$${maxTokenNum}` : radiusToken;
+    }
+    return radiusToken;
+  },
+}));
+
+vi.mock("@multiplatform.one/components", () => ({
+  Tooltip: ({ children }: any) => children,
+}));
+
+vi.mock("@multiplatform.one/theme", () => ({
+  useResolvedKnobs: (_options?: any) => ({
+    knobProps: {
+      body: {},
+      borderRadius: { borderRadius: "$3", borderWidth: 1 },
+      elevation: undefined,
+      sizeToken: "$4",
+      outlined: false,
+      inputBackground: "$color2",
+      textAccentColor: "$color",
+      transition: undefined,
+      heading: {},
+    },
+    control: {
+      hoverKnobProps: undefined,
+      pressKnobProps: undefined,
+      focusKnobProps: undefined,
+      focusVisibleKnobProps: undefined,
+    },
+  }),
+}));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: ({ children }: any) => <div data-testid="bubble-menu">{children}</div>,
+}));
+
+const mockEditor = {
+  isActive: vi.fn().mockReturnValue(false),
+  getAttributes: vi.fn().mockReturnValue({}),
+  can: vi.fn().mockReturnValue({ undo: () => false, redo: () => false }),
+  getHTML: vi.fn().mockReturnValue("<p></p>"),
+  getJSON: vi.fn().mockReturnValue({ type: "doc", content: [] }),
+  chain: vi.fn().mockReturnValue({
+    focus: vi.fn().mockReturnValue({
+      toggleBold: vi.fn().mockReturnValue({ run: vi.fn() }),
+    }),
+  }),
+  commands: {
+    setContent: vi.fn(),
+    focus: vi.fn(),
+    blur: vi.fn(),
+  },
+  setEditable: vi.fn(),
+};
+
+vi.mock("@tiptap/react", () => ({
+  useEditor: vi.fn().mockReturnValue(mockEditor),
+  EditorContent: ({ editor: _editor }: any) => <div data-testid="editor-content">Editor</div>,
+}));
+
+vi.mock("@tiptap/starter-kit", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-underline", () => ({ default: {} }));
+vi.mock("@tiptap/extension-link", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-placeholder", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-text-align", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-color", () => ({ Color: {} }));
+vi.mock("@tiptap/extension-text-style", () => ({ TextStyle: {} }));
+vi.mock("@tiptap/extension-highlight", () => ({
+  Highlight: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-subscript", () => ({ Subscript: {} }));
+vi.mock("@tiptap/extension-superscript", () => ({ Superscript: {} }));
+vi.mock("@tiptap/extension-task-list", () => ({ default: {} }));
+vi.mock("@tiptap/extension-task-item", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+vi.mock("@tiptap/extension-image", () => ({
+  default: { configure: vi.fn().mockReturnValue({}) },
+}));
+
+// ---------------------------------------------------------------------------
+// Imports (after mocks)
+// ---------------------------------------------------------------------------
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { defaultEditorState } from "./types";
+
+const { RichEditor } = await import("./RichEditor");
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("RichEditor compound component", () => {
+  it("provides RichEditorContext to children and renders without error", () => {
+    const { container } = renderWithProviders(<RichEditor />);
+    // The compound component should render its root EditorFrame
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("exposes FixedToolbar, BubbleToolbar, and Editor as static properties", () => {
+    expect(RichEditor.FixedToolbar).toBeDefined();
+    expect(RichEditor.BubbleToolbar).toBeDefined();
+    expect(RichEditor.Editor).toBeDefined();
+  });
+
+  it("applies clampRadiusForLargeComponent max $4 via useResolvedKnobs", () => {
+    // Render with default props -- the component internally calls
+    // useResolvedKnobs and clampRadiusForLargeComponent
+    const { container } = renderWithProviders(<RichEditor />);
+    // It should render successfully (radius clamping applied internally)
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("manages EditorState via useState and passes state to toolbar", () => {
+    const handleStateChange = vi.fn();
+    const { container } = renderWithProviders(
+      <RichEditor showToolbar onStateChange={handleStateChange} />,
+    );
+    // The editor should render with a toolbar when showToolbar is true
+    expect(container.firstChild).toBeTruthy();
+    // Default state should be applied (no errors during render)
+    expect(defaultEditorState.isBold).toBe(false);
+    expect(defaultEditorState.isParagraph).toBe(true);
+  });
+
+  it("hides toolbar when showToolbar is false", () => {
+    const { container: withToolbar } = renderWithProviders(<RichEditor showToolbar />);
+    const { container: withoutToolbar } = renderWithProviders(<RichEditor showToolbar={false} />);
+    // Both should render, but the one without toolbar should have fewer children
+    expect(withToolbar.firstChild).toBeTruthy();
+    expect(withoutToolbar.firstChild).toBeTruthy();
+  });
+
+  it("applies disabled state when editable is false", () => {
+    const { container } = renderWithProviders(<RichEditor editable={false} />);
+    expect(container.firstChild).toBeTruthy();
+  });
+});

package/src/styled.spec.tsx

@@ -0,0 +1,42 @@
+import { describe, it, expect } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  EditorFrame,
+  ToolbarFrame,
+  ToolbarGroupFrame,
+  ToolbarSeparatorFrame,
+  DropdownMenuItemFrame,
+} from "./styled";
+
+describe("styled components", () => {
+  it("EditorFrame renders with name property", () => {
+    const { container } = renderWithProviders(<EditorFrame />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("EditorFrame applies hasError variant", () => {
+    const { container } = renderWithProviders(<EditorFrame hasError />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("ToolbarFrame renders", () => {
+    const { container } = renderWithProviders(<ToolbarFrame />);
+    expect(container.firstChild).toBeTruthy();
+  });
+
+  it("ToolbarGroupFrame, ToolbarSeparatorFrame, and DropdownMenuItemFrame render", () => {
+    const { container } = renderWithProviders(
+      <>
+        <ToolbarGroupFrame />
+        <ToolbarSeparatorFrame />
+        <DropdownMenuItemFrame />
+      </>,
+    );
+    expect(container.children.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("DropdownMenuItemFrame applies active variant", () => {
+    const { container } = renderWithProviders(<DropdownMenuItemFrame active />);
+    expect(container.firstChild).toBeTruthy();
+  });
+});