@multiplatform.one/rich-text 7.7.0 → 7.7.2

package/src/toolbar/ToolbarGroup.stories.tsx

@@ -0,0 +1,148 @@
+/**
+ * Storybook stories for ToolbarGroup — the toolbar's segmenting wrapper: it
+ * lays its buttons out in a row and, unless told otherwise, draws the vertical
+ * rule that separates one cluster of controls from the next.
+ *
+ * Stories: Main, NoSeparator, Hidden, TwoGroups
+ *
+ * The group has no state of its own, so the controls are its whole surface:
+ * `visible` decides whether anything renders at all, `showSeparator` decides
+ * whether the trailing rule does.
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { XStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { ToolbarFrame } from "../styled";
+import { BoldIcon, ItalicIcon, RedoIcon, StrikeIcon, UndoIcon } from "./icons";
+import { ToolbarButton } from "./ToolbarButton";
+import { ToolbarGroup } from "./ToolbarGroup";
+
+export interface ToolbarGroupStoryArgs {
+  /** Renders nothing at all when false — how the toolbar drops a section */
+  visible: boolean;
+  /** Draws the trailing vertical rule that ends the cluster */
+  showSeparator: boolean;
+}
+
+/** A history cluster: the pair the real toolbar opens with. */
+function HistoryButtons() {
+  return (
+    <>
+      <ToolbarButton onPress={() => {}} aria-label="Undo">
+        <UndoIcon />
+      </ToolbarButton>
+      <ToolbarButton onPress={() => {}} aria-label="Redo">
+        <RedoIcon />
+      </ToolbarButton>
+    </>
+  );
+}
+
+/** A formatting cluster: the group that follows history in the real toolbar. */
+function FormattingButtons() {
+  return (
+    <>
+      <ToolbarButton active onPress={() => {}} aria-label="Bold">
+        <BoldIcon>B</BoldIcon>
+      </ToolbarButton>
+      <ToolbarButton onPress={() => {}} aria-label="Italic">
+        <ItalicIcon>I</ItalicIcon>
+      </ToolbarButton>
+      <ToolbarButton onPress={() => {}} aria-label="Strikethrough">
+        <StrikeIcon>S</StrikeIcon>
+      </ToolbarButton>
+    </>
+  );
+}
+
+const meta: Meta<ToolbarGroupStoryArgs> = {
+  title: "Forms/RichTextEditor/ToolbarGroup",
+  component: ToolbarGroup as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    visible: { control: "boolean" },
+    showSeparator: { control: "boolean" },
+  },
+  args: {
+    visible: true,
+    showSeparator: true,
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  // The group only reads as a group inside the bar it segments, so every
+  // story renders it in a real ToolbarFrame with a neighbour after it.
+  render: (args) => (
+    <ToolbarFrame maxWidth={420}>
+      <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+        <ToolbarGroup visible={args.visible} showSeparator={args.showSeparator}>
+          <HistoryButtons />
+        </ToolbarGroup>
+        <ToolbarGroup showSeparator={false}>
+          <FormattingButtons />
+        </ToolbarGroup>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<ToolbarGroupStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls) — a group with its trailing rule
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// NoSeparator — the last group in a bar ends without a rule
+// ---------------------------------------------------------------------------
+
+export const NoSeparator: Story = {
+  name: "No separator",
+  args: {
+    showSeparator: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Hidden — visible={false} removes the buttons AND the rule
+// ---------------------------------------------------------------------------
+
+export const Hidden: Story = {
+  args: {
+    visible: false,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// TwoGroups — the shape the toolbar is actually built from
+// ---------------------------------------------------------------------------
+
+export const TwoGroups: Story = {
+  name: "Two groups",
+  render: () => (
+    <ToolbarFrame maxWidth={420}>
+      <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+        <ToolbarGroup>
+          <HistoryButtons />
+        </ToolbarGroup>
+        <ToolbarGroup>
+          <FormattingButtons />
+        </ToolbarGroup>
+        <ToolbarGroup showSeparator={false}>
+          <ToolbarButton onPress={() => {}} aria-label="Blockquote">
+            <BoldIcon>Q</BoldIcon>
+          </ToolbarButton>
+        </ToolbarGroup>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};

package/src/toolbar/fixedToolbarStories.spec.tsx

@@ -0,0 +1,200 @@
+/**
+ * Mounts every FixedToolbar story with its args and asserts the visible
+ * contract each one exists to show, so a story that stops rendering what its
+ * name promises fails here before the gallery ships it.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+
+// Stand-ins for the catalog Button and Tooltip, as in fixedToolbar.spec.tsx
+// next to this one: the toolbar's contract is which controls exist and what
+// they are labelled, which the swap leaves intact.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      aria-disabled={props["aria-disabled"]}
+      aria-pressed={props["aria-pressed"]}
+      onClick={props.onPress}
+      data-active={props.theme === "active" ? "true" : undefined}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+}));
+
+// The LiveEditor story mounts a real editor. ProseMirror needs a browser
+// layout engine happy-dom does not have, so the editor is stood in with the
+// same mock shape richEditor.spec.tsx uses; what this spec asserts about that
+// story is that the bar renders BESIDE an editor, not what the editor does.
+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(),
+  storage: { mediaUpload: { handlers: {} }, suggestionChrome: { value: null } },
+};
+
+vi.mock("@tiptap/react", () => ({
+  useEditor: vi.fn().mockReturnValue(mockEditor),
+  EditorContent: () => <div data-testid="editor-content">Editor</div>,
+}));
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: ({ children }: any) => <div data-testid="bubble-menu">{children}</div>,
+}));
+
+const storiesModule = await import("./FixedToolbar.stories");
+const meta = storiesModule.default;
+const { Main, Sections, MarkdownCapabilities, ErrorState, FullscreenToggle, LiveEditor } =
+  storiesModule;
+type FixedToolbarStoryArgs = import("./FixedToolbar.stories").FixedToolbarStoryArgs;
+
+type StoryLike = {
+  args?: Partial<FixedToolbarStoryArgs>;
+  render?: (args: FixedToolbarStoryArgs) => React.ReactElement;
+};
+
+/** Resolve a story the way Storybook does: meta args, story args, story render. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as FixedToolbarStoryArgs), ...story.args };
+  const render = story.render ?? (meta.render as StoryLike["render"]);
+  if (!render) throw new Error("story has no render");
+  const Story = () => render(args);
+  const Decorator = meta.decorators?.[0] as
+    | ((S: React.ComponentType) => React.ReactElement)
+    | undefined;
+  return renderWithProviders(Decorator ? Decorator(Story) : <Story />);
+}
+
+const stories = {
+  Main,
+  Sections,
+  MarkdownCapabilities,
+  ErrorState,
+  FullscreenToggle,
+  LiveEditor,
+} as const;
+
+const labelsIn = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[role='button']")).map((b) =>
+    b.getAttribute("aria-label"),
+  );
+
+describe("FixedToolbar stories", () => {
+  it("nests under the editor title so the gallery buckets it with RichTextEditor", () => {
+    expect(meta.title).toBe("Forms/RichTextEditor/FixedToolbar");
+  });
+
+  it.each(Object.entries(stories))("%s mounts a labelled toolbar", (_name, story) => {
+    const { container } = mount(story);
+    const toolbar = container.querySelector("[role='toolbar']");
+    expect(toolbar).toBeTruthy();
+    expect(toolbar!.getAttribute("aria-label")).toBe("Formatting toolbar");
+    expect(labelsIn(container)).toContain("Bold");
+  });
+
+  it("Main shows every primary group and keeps the overflow items in More", () => {
+    const { container } = mount(Main);
+    const labels = labelsIn(container);
+    for (const label of [
+      "Undo",
+      "Redo",
+      "Bold",
+      "Italic",
+      "Underline",
+      "Strikethrough",
+      "Text Color",
+      "Heading",
+      "Lists",
+      "Blockquote",
+      "Code Block",
+      "Link",
+      "Insert Image",
+      "More formatting options",
+    ]) {
+      expect(labels).toContain(label);
+    }
+    expect(labels).not.toContain("Clear Formatting");
+  });
+
+  it("Main washes Redo and leaves Undo available, matching its args", () => {
+    const { container } = mount(Main);
+    const at = (label: string) =>
+      container
+        .querySelector<HTMLElement>(`[aria-label="${label}"]`)!
+        .getAttribute("aria-disabled");
+    expect(at("Undo")).toBeNull();
+    expect(at("Redo")).toBe("true");
+  });
+
+  it("Sections trims the bar to formatting and link", () => {
+    const { container } = mount(Sections);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Link");
+    expect(labels).not.toContain("Undo");
+    expect(labels).not.toContain("Heading");
+    expect(labels).not.toContain("Insert Image");
+    // isBold: true is what the story exists to show alongside the trim
+    expect(
+      container.querySelector<HTMLElement>('[aria-label="Bold"]')!.getAttribute("data-active"),
+    ).toBe("true");
+  });
+
+  it("MarkdownCapabilities drops the controls GFM cannot express", () => {
+    const { container } = mount(MarkdownCapabilities);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Link");
+    // Absent, not disabled: the commands are never registered.
+    expect(labels).not.toContain("Underline");
+    expect(labels).not.toContain("Text Color");
+    expect(labels).not.toContain("Highlight Color");
+  });
+
+  it("ErrorState still renders the full bar (the error is the rule's colour)", () => {
+    const { container } = mount(ErrorState);
+    expect(labelsIn(container)).toContain("Bold");
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+  });
+
+  it("FullscreenToggle adds the toggle and flips its pressed state", () => {
+    const { container, getByText } = mount(FullscreenToggle);
+    const toggle = container.querySelector<HTMLElement>('[aria-label="Fullscreen"]')!;
+    expect(toggle).toBeTruthy();
+    expect(toggle.getAttribute("aria-pressed")).toBe("false");
+    expect(getByText("Fullscreen: off")).toBeTruthy();
+    fireEvent.click(toggle);
+    expect(getByText("Fullscreen: on")).toBeTruthy();
+    expect(
+      container
+        .querySelector<HTMLElement>('[aria-label="Fullscreen"]')!
+        .getAttribute("aria-pressed"),
+    ).toBe("true");
+  });
+
+  it("Main has no fullscreen toggle, so the FullscreenToggle story earns its place", () => {
+    const { container } = mount(Main);
+    expect(container.querySelector('[aria-label="Fullscreen"]')).toBeNull();
+  });
+
+  it("LiveEditor puts a standalone bar above a real editor", () => {
+    const { container } = mount(LiveEditor);
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+    expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
+  });
+});

package/src/toolbar/statusBarStories.spec.tsx

@@ -0,0 +1,86 @@
+/**
+ * Mounts every StatusBar story with its args and asserts the visible contract
+ * each one exists to show, so a story that stops rendering what its name
+ * promises fails here before the gallery ships it.
+ */
+import { describe, expect, it } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import meta, { Empty, InFrame, Main, MarkdownMode, SingularCounts } from "./StatusBar.stories";
+import type { StatusBarStoryArgs } from "./StatusBar.stories";
+
+type StoryLike = {
+  args?: Partial<StatusBarStoryArgs>;
+  render?: (args: StatusBarStoryArgs) => React.ReactElement;
+};
+
+/** Resolve a story the way Storybook does: meta args, story args, story render. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as StatusBarStoryArgs), ...story.args };
+  const render = story.render ?? (meta.render as StoryLike["render"]);
+  if (!render) throw new Error("story has no render");
+  const Story = () => render(args);
+  const Decorator = meta.decorators?.[0] as
+    | ((S: React.ComponentType) => React.ReactElement)
+    | undefined;
+  return renderWithProviders(Decorator ? Decorator(Story) : <Story />);
+}
+
+const stories = { Main, SingularCounts, MarkdownMode, Empty, InFrame } as const;
+
+describe("StatusBar stories", () => {
+  it("nests under the editor title so the gallery buckets it with RichTextEditor", () => {
+    expect(meta.title).toBe("Forms/RichTextEditor/StatusBar");
+  });
+
+  it.each(Object.entries(stories))("%s mounts both mode labels", (_name, story) => {
+    const { getByText } = mount(story);
+    expect(getByText("Rich text")).toBeTruthy();
+    expect(getByText("Markdown")).toBeTruthy();
+  });
+
+  it("Main shows the plural counts the controls seed", () => {
+    const { getByText } = mount(Main);
+    expect(getByText("42 words")).toBeTruthy();
+    expect(getByText("240 characters")).toBeTruthy();
+  });
+
+  it("SingularCounts flips both nouns to singular at exactly one", () => {
+    const { getByText, queryByText } = mount(SingularCounts);
+    expect(getByText("1 word")).toBeTruthy();
+    expect(getByText("1 character")).toBeTruthy();
+    expect(queryByText("1 words")).toBeNull();
+  });
+
+  it("Empty pluralises at zero", () => {
+    const { getByText } = mount(Empty);
+    expect(getByText("0 words")).toBeTruthy();
+    expect(getByText("0 characters")).toBeTruthy();
+  });
+
+  it("MarkdownMode marks the markdown label, not the rich-text one", () => {
+    const { getByText } = mount(MarkdownMode);
+    const classesOf = (label: string) => (getByText(label) as HTMLElement).className;
+    expect(classesOf("Markdown")).toContain("_fow-600");
+    expect(classesOf("Rich text")).toContain("_fow-400");
+  });
+
+  it("pressing the idle label swaps the marking, so the toggle is live in the story", () => {
+    const { getByText } = mount(Main);
+    const classesOf = (label: string) => (getByText(label) as HTMLElement).className;
+    expect(classesOf("Rich text")).toContain("_fow-600");
+    fireEvent.click(getByText("Markdown"));
+    expect(classesOf("Markdown")).toContain("_fow-600");
+    expect(classesOf("Rich text")).toContain("_fow-400");
+  });
+
+  it("InFrame puts the footer under stand-in body copy inside an EditorFrame", () => {
+    const { getByText } = mount(InFrame);
+    const body = getByText(/Twelve words of body copy/);
+    const footer = getByText("12 words");
+    expect(body).toBeTruthy();
+    expect(footer).toBeTruthy();
+    // The footer follows the body in document order (it is the frame's foot).
+    expect(body.compareDocumentPosition(footer) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});

package/src/toolbar/toolbarButtonStories.spec.tsx

@@ -0,0 +1,122 @@
+/**
+ * Mounts every ToolbarButton story with its args and asserts the visible
+ * contract each one exists to show, so a story that stops rendering what its
+ * name promises fails here before the gallery ships it.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+
+// Stand-ins for the catalog Button and Tooltip, as in the toolbar specs next
+// to this one. Both forward the attributes the stories exist to demonstrate:
+// the DG-ST-03 aria-disabled state and the DG-OVL-05 tooltip.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button
+      role="button"
+      aria-label={props["aria-label"]}
+      aria-disabled={props["aria-disabled"]}
+      aria-pressed={props["aria-pressed"]}
+      onClick={props.onPress}
+      data-active={props.theme === "active" ? "true" : undefined}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ content, children }: any) => <span data-tooltip={content}>{children}</span>,
+}));
+
+const storiesModule = await import("./ToolbarButton.stories");
+const meta = storiesModule.default;
+const { Main, Active, Unavailable, WithTooltip, DropdownButton, Row } = storiesModule;
+type ToolbarButtonStoryArgs = import("./ToolbarButton.stories").ToolbarButtonStoryArgs;
+
+type StoryLike = {
+  args?: Partial<ToolbarButtonStoryArgs>;
+  render?: (args: ToolbarButtonStoryArgs) => React.ReactElement;
+};
+
+/** Resolve a story the way Storybook does: meta args, story args, story render. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as ToolbarButtonStoryArgs), ...story.args };
+  const render = story.render ?? (meta.render as StoryLike["render"]);
+  if (!render) throw new Error("story has no render");
+  const Story = () => render(args);
+  const Decorator = meta.decorators?.[0] as
+    | ((S: React.ComponentType) => React.ReactElement)
+    | undefined;
+  return renderWithProviders(Decorator ? Decorator(Story) : <Story />);
+}
+
+const stories = { Main, Active, Unavailable, WithTooltip, DropdownButton, Row } as const;
+
+const buttonNamed = (container: HTMLElement, label: string) =>
+  container.querySelector<HTMLElement>(`[aria-label="${label}"]`);
+
+describe("ToolbarButton stories", () => {
+  it("nests under the editor title so the gallery buckets it with RichTextEditor", () => {
+    expect(meta.title).toBe("Forms/RichTextEditor/ToolbarButton");
+  });
+
+  it.each(Object.entries(stories))("%s mounts at least one labelled control", (_name, story) => {
+    const { container } = mount(story);
+    const buttons = container.querySelectorAll("[role='button']");
+    expect(buttons.length).toBeGreaterThan(0);
+    for (const button of Array.from(buttons)) {
+      expect(button.getAttribute("aria-label")).toBeTruthy();
+    }
+  });
+
+  it("Main is available: it fires onPress and is not aria-disabled", () => {
+    const { container } = mount(Main);
+    const bold = buttonNamed(container, "Bold")!;
+    expect(bold.getAttribute("aria-disabled")).toBeNull();
+    fireEvent.click(bold);
+  });
+
+  it("Active marks the button through the active theme", () => {
+    const { container } = mount(Active);
+    expect(buttonNamed(container, "Bold")!.getAttribute("data-active")).toBe("true");
+    // Main is the same button without the mark, so the story earns its place.
+    const plain = mount(Main);
+    expect(buttonNamed(plain.container, "Bold")!.getAttribute("data-active")).toBeNull();
+  });
+
+  it("Unavailable reports aria-disabled and drops the tooltip (DG-ST-03 / DG-OVL-05)", () => {
+    const { container } = mount(Unavailable);
+    const undo = buttonNamed(container, "Undo")!;
+    expect(undo.getAttribute("aria-disabled")).toBe("true");
+    // Never bare-disabled: it stays focusable so AT can still reach it.
+    expect(undo.hasAttribute("disabled")).toBe(false);
+    expect(container.querySelector("[data-tooltip]")).toBeNull();
+  });
+
+  it("WithTooltip keeps the shortcut hint that Unavailable loses", () => {
+    const { container } = mount(WithTooltip);
+    const tooltip = container.querySelector("[data-tooltip]");
+    expect(tooltip).toBeTruthy();
+    expect(tooltip!.getAttribute("data-tooltip")).toBe("Strikethrough (⌘⇧X)");
+  });
+
+  it("DropdownButton shows the caret variant in all three states", () => {
+    const { container } = mount(DropdownButton);
+    expect(buttonNamed(container, "Heading")).toBeTruthy();
+    expect(buttonNamed(container, "Lists")!.getAttribute("data-active")).toBe("true");
+    expect(buttonNamed(container, "Table")!.getAttribute("aria-disabled")).toBe("true");
+    // The caret is what separates this from the square button.
+    expect(container.querySelectorAll("svg").length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("Row lines the states up: unavailable, plain, active", () => {
+    const { container } = mount(Row);
+    expect(buttonNamed(container, "Undo")!.getAttribute("aria-disabled")).toBe("true");
+    expect(buttonNamed(container, "Redo")!.getAttribute("aria-disabled")).toBeNull();
+    expect(buttonNamed(container, "Bold")!.getAttribute("data-active")).toBe("true");
+    expect(buttonNamed(container, "Italic")!.getAttribute("data-active")).toBeNull();
+  });
+});

package/src/toolbar/toolbarGroupStories.spec.tsx

@@ -0,0 +1,108 @@
+/**
+ * Mounts every ToolbarGroup story with its args and asserts the visible
+ * contract each one exists to show, so a story that stops rendering what its
+ * name promises fails here before the gallery ships it.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+
+// The catalog Button and Tooltip are heavy under happy-dom; the toolbar specs
+// next to this one already stand them in with a plain button, and the group's
+// contract (which children render, and whether a separator follows) is
+// unaffected by that swap.
+vi.mock("@multiplatform.one/forms", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Button: (props: any) => (
+    <button role="button" aria-label={props["aria-label"]} onClick={props.onPress}>
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+}));
+
+const storiesModule = await import("./ToolbarGroup.stories");
+const meta = storiesModule.default;
+const { Main, NoSeparator, Hidden, TwoGroups } = storiesModule;
+type ToolbarGroupStoryArgs = import("./ToolbarGroup.stories").ToolbarGroupStoryArgs;
+
+type StoryLike = {
+  args?: Partial<ToolbarGroupStoryArgs>;
+  render?: (args: ToolbarGroupStoryArgs) => React.ReactElement;
+};
+
+/** Resolve a story the way Storybook does: meta args, story args, story render. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as ToolbarGroupStoryArgs), ...story.args };
+  const render = story.render ?? (meta.render as StoryLike["render"]);
+  if (!render) throw new Error("story has no render");
+  const Story = () => render(args);
+  const Decorator = meta.decorators?.[0] as
+    | ((S: React.ComponentType) => React.ReactElement)
+    | undefined;
+  return renderWithProviders(Decorator ? Decorator(Story) : <Story />);
+}
+
+/**
+ * The row the groups sit in. A ToolbarGroup renders a fragment
+ * (group frame + optional separator), so the row's element children ARE the
+ * groups and their separators — which is where "did the separator render"
+ * is observable, the separator being an unlabelled styled Separator.
+ */
+function rowOf(container: HTMLElement, anyButtonLabel: string): HTMLElement {
+  const button = container.querySelector<HTMLElement>(`[aria-label="${anyButtonLabel}"]`);
+  if (!button) throw new Error(`no button labelled ${anyButtonLabel}`);
+  const groupFrame = button.parentElement;
+  const row = groupFrame?.parentElement;
+  if (!row) throw new Error("no toolbar row");
+  return row;
+}
+
+const labelsIn = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[aria-label]")).map((el) => el.getAttribute("aria-label"));
+
+describe("ToolbarGroup stories", () => {
+  it("nests under the editor title so the gallery buckets it with RichTextEditor", () => {
+    expect(meta.title).toBe("Forms/RichTextEditor/ToolbarGroup");
+  });
+
+  it("Main shows the history pair, the formatting trio and a separator between them", () => {
+    const { container } = mount(Main);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Undo");
+    expect(labels).toContain("Redo");
+    expect(labels).toContain("Bold");
+    // group frame, separator, group frame
+    expect(rowOf(container, "Undo").children.length).toBe(3);
+  });
+
+  it("NoSeparator keeps both groups but drops the rule between them", () => {
+    const { container } = mount(NoSeparator);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Undo");
+    expect(labels).toContain("Bold");
+    expect(rowOf(container, "Undo").children.length).toBe(2);
+  });
+
+  it("Hidden removes the group's buttons AND its separator, leaving the neighbour", () => {
+    const { container } = mount(Hidden);
+    const labels = labelsIn(container);
+    expect(labels).not.toContain("Undo");
+    expect(labels).not.toContain("Redo");
+    expect(labels).toContain("Bold");
+    expect(rowOf(container, "Bold").children.length).toBe(1);
+  });
+
+  it("TwoGroups renders three clusters with a rule after each but the last", () => {
+    const { container } = mount(TwoGroups);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Undo");
+    expect(labels).toContain("Bold");
+    expect(labels).toContain("Blockquote");
+    // three group frames + two separators
+    expect(rowOf(container, "Undo").children.length).toBe(5);
+  });
+});

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

@@ -1 +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;AAUtD,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;AA+eD,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}
+{"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;AAUtD,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;AAigBD,eAAO,MAAM,UAAU;;;;CAIrB,CAAC"}

package/types/editor/TentapEditor.native.d.ts

@@ -16,6 +16,10 @@ import type { RichEditorProps, RichEditorRef } from "../types";
 export interface TentapEditorProps extends RichEditorProps {
     /** Fill the available space (fullscreen modal) instead of using minHeight */
     fill?: boolean;
+    /** CSS font-family string for body text (resolved from knobs by RichEditor) */
+    bodyFontFamily?: string;
+    /** CSS font-family string for headings (resolved from knobs by RichEditor) */
+    headingFontFamily?: string;
 }
 export declare const TentapEditor: import("react").ForwardRefExoticComponent<TentapEditorProps & import("react").RefAttributes<RichEditorRef>>;
 //# sourceMappingURL=TentapEditor.native.d.ts.map