@multiplatform.one/rich-text 7.6.3 → 7.7.1

package/src/toolbar/TableBubble.spec.tsx

@@ -0,0 +1,189 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+import type { EditorCapabilities } from "../types";
+
+const bubble = vi.hoisted(() => ({ props: null as Record<string, any> | null }));
+
+vi.mock("@tiptap/react/menus", () => ({
+  BubbleMenu: (props: any) => {
+    bubble.props = props;
+    return <div data-testid="bubble-menu">{props.children}</div>;
+  },
+}));
+
+// The table menu lives inside a Popover, which never mounts its content in a
+// headless DOM. Flatten the popover so the menu is inspectable; nothing else
+// about tamagui is replaced.
+vi.mock("tamagui", async (importOriginal) => {
+  const actual = await importOriginal<Record<string, any>>();
+  const Popover: any = ({ children }: any) => <>{children}</>;
+  Popover.Trigger = ({ children }: any) => <>{children}</>;
+  return { ...actual, Popover };
+});
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+  PopoverContent: ({ children }: any) => <div data-testid="table-menu">{children}</div>,
+}));
+
+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>
+  ),
+}));
+
+const { TableBubble } = await import("./TableBubble");
+
+function makeEditor(active = true) {
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const editor = {
+    chain: () => chain,
+    getAttributes: () => ({}),
+    isActive: (name: string) => name === "table" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any, capabilities?: EditorCapabilities) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <TableBubble editor={editor} capabilities={capabilities} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+/** Labels of the items inside the Table dropdown, in document order. */
+function menuLabels(container: HTMLElement) {
+  const menu = container.querySelector('[data-testid="table-menu"]');
+  if (!menu) throw new Error("table menu did not render");
+  return Array.from(menu.querySelectorAll("[aria-label]")).map((el) =>
+    el.getAttribute("aria-label"),
+  );
+}
+
+function pressInMenu(container: HTMLElement, label: string) {
+  const menu = container.querySelector('[data-testid="table-menu"]') as HTMLElement;
+  const el = menu.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no menu item labelled "${label}"`);
+  fireEvent.click(el);
+}
+
+const ROW_AND_COLUMN = [
+  "Add row above",
+  "Add row below",
+  "Delete row",
+  "Add column before",
+  "Add column after",
+  "Delete column",
+];
+
+describe("TableBubble", () => {
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows itself only while the caret is inside a table", () => {
+    const inTable = makeEditor(true);
+    render(inTable.editor);
+    expect(bubble.props?.shouldShow({ editor: inTable.editor })).toBe(true);
+
+    const outside = makeEditor(false);
+    render(outside.editor);
+    expect(bubble.props?.shouldShow({ editor: outside.editor })).toBe(false);
+  });
+
+  it("anchors to the table rect, not the caret, so it cannot cover the first row", () => {
+    const { editor } = makeEditor();
+    render(editor);
+    expect(typeof bubble.props?.getReferencedVirtualElement).toBe("function");
+    expect(bubble.props?.options).toMatchObject({ placement: "top-start" });
+  });
+
+  // LC-52: GFM pipe tables are plain grids, so merge and split have no
+  // markdown form. The markdown capability must drop exactly those two.
+  it("markdown capability removes exactly mergeCells and splitCell", () => {
+    const { container } = render(makeEditor().editor, "markdown");
+    const labels = menuLabels(container);
+
+    expect(labels).not.toContain("Merge cells");
+    expect(labels).not.toContain("Split cell");
+    expect(labels).toContain("Toggle header row");
+    expect(labels).toContain("Delete table");
+  });
+
+  it("full capability keeps all four table actions", () => {
+    const { container } = render(makeEditor().editor, "full");
+    const labels = menuLabels(container);
+
+    expect(labels).toContain("Toggle header row");
+    expect(labels).toContain("Merge cells");
+    expect(labels).toContain("Split cell");
+    expect(labels).toContain("Delete table");
+  });
+
+  it("defaults to the full surface when no capability is passed", () => {
+    const { container } = render(makeEditor().editor);
+    expect(menuLabels(container)).toEqual(
+      menuLabels(render(makeEditor().editor, "full").container),
+    );
+  });
+
+  it("the capability filter touches table actions only — every row and column action survives", () => {
+    const full = menuLabels(render(makeEditor().editor, "full").container);
+    const markdown = menuLabels(render(makeEditor().editor, "markdown").container);
+
+    for (const label of ROW_AND_COLUMN) {
+      expect(full).toContain(label);
+      expect(markdown).toContain(label);
+    }
+    expect(full.length - markdown.length).toBe(2);
+  });
+
+  it("the quick buttons add after the current row and column, not before", () => {
+    const { editor, names } = makeEditor();
+    const { container } = render(editor);
+
+    fireEvent.click(container.querySelector('[aria-label="Add row"]')!);
+    expect(names()).toEqual(["focus", "addRowAfter", "run"]);
+
+    fireEvent.click(container.querySelector('[aria-label="Add column"]')!);
+    expect(names()).toEqual(["focus", "addRowAfter", "run", "focus", "addColumnAfter", "run"]);
+  });
+
+  it("each menu item runs its own command", () => {
+    const cases: Array<[string, string]> = [
+      ["Add row above", "addRowBefore"],
+      ["Delete row", "deleteRow"],
+      ["Add column before", "addColumnBefore"],
+      ["Delete column", "deleteColumn"],
+      ["Toggle header row", "toggleHeaderRow"],
+      ["Merge cells", "mergeCells"],
+      ["Split cell", "splitCell"],
+    ];
+
+    for (const [label, command] of cases) {
+      const { editor, names } = makeEditor();
+      const { container } = render(editor, "full");
+      pressInMenu(container, label);
+      expect(names()).toEqual(["focus", command, "run"]);
+    }
+  });
+});

package/src/toolbar/ToolbarButton.stories.tsx

@@ -0,0 +1,193 @@
+/**
+ * Storybook stories for ToolbarButton and ToolbarDropdownButton — the two
+ * pressables every toolbar cluster is built from.
+ *
+ * Stories: Main, Active, Unavailable, WithTooltip, DropdownButton, Row
+ *
+ * Two things are worth seeing here and nowhere else. The pressable is a 44x44
+ * target (Axiom 12) while the visible chrome is a 30x30 box inside it, so the
+ * strip stays dense without shrinking the hit area. And an unavailable control
+ * is never bare-`disabled` (DG-ST-03): it keeps focus, reports `aria-disabled`,
+ * dims, drops its hover surface, and loses its tooltip (DG-OVL-05).
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { XStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { ToolbarFrame } from "../styled";
+import { BoldIcon, ItalicIcon, RedoIcon, StrikeIcon, UndoIcon } from "./icons";
+import { ToolbarButton, ToolbarDropdownButton } from "./ToolbarButton";
+import { ToolbarGroup } from "./ToolbarGroup";
+
+export interface ToolbarButtonStoryArgs {
+  /** Format is on: the chrome box takes the active surface */
+  active: boolean;
+  /** Unavailable: aria-disabled, dimmed, no hover surface, no tooltip */
+  disabled: boolean;
+  /** Shortcut hint on hover; suppressed while unavailable */
+  tooltip: string;
+  /** Accessible name — required, since the glyph carries no text */
+  "aria-label": string;
+}
+
+const meta: Meta<ToolbarButtonStoryArgs> = {
+  title: "Forms/RichTextEditor/ToolbarButton",
+  component: ToolbarButton as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    active: { control: "boolean" },
+    disabled: { control: "boolean" },
+    tooltip: { control: "text" },
+    "aria-label": { control: "text" },
+  },
+  args: {
+    active: false,
+    disabled: false,
+    tooltip: "Bold (⌘B)",
+    "aria-label": "Bold",
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        active={args.active}
+        disabled={args.disabled}
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <BoldIcon>B</BoldIcon>
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<ToolbarButtonStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls)
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// Active — the format is on, so the chrome box takes the active surface
+// ---------------------------------------------------------------------------
+
+export const Active: Story = {
+  args: {
+    active: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Unavailable — DG-ST-03: aria-disabled and washed, never bare `disabled`
+// ---------------------------------------------------------------------------
+
+export const Unavailable: Story = {
+  args: {
+    disabled: true,
+    "aria-label": "Undo",
+    tooltip: "Undo (⌘Z)",
+  },
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        disabled={args.disabled}
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <UndoIcon />
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// WithTooltip — the shortcut hint that returns with availability
+// ---------------------------------------------------------------------------
+
+export const WithTooltip: Story = {
+  name: "With tooltip",
+  args: {
+    tooltip: "Strikethrough (⌘⇧X)",
+    "aria-label": "Strikethrough",
+  },
+  render: (args) => (
+    <ToolbarFrame width={80} justifyContent="center">
+      <ToolbarButton
+        tooltip={args.tooltip}
+        aria-label={args["aria-label"]}
+        onPress={() => action("onPress")(args["aria-label"])}
+      >
+        <StrikeIcon>S</StrikeIcon>
+      </ToolbarButton>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// DropdownButton — the caret variant: fixed height, width follows its label
+// ---------------------------------------------------------------------------
+
+export const DropdownButton: Story = {
+  name: "Dropdown button",
+  render: () => (
+    <ToolbarFrame width={220} justifyContent="center">
+      <XStack alignItems="center" gap="$1">
+        <ToolbarDropdownButton aria-label="Heading" onPress={() => action("onPress")("Heading")}>
+          H1
+        </ToolbarDropdownButton>
+        <ToolbarDropdownButton active aria-label="Lists" onPress={() => action("onPress")("Lists")}>
+          Bullets
+        </ToolbarDropdownButton>
+        <ToolbarDropdownButton
+          disabled
+          aria-label="Table"
+          onPress={() => action("onPress")("Table")}
+        >
+          Table
+        </ToolbarDropdownButton>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};
+
+// ---------------------------------------------------------------------------
+// Row — the four states side by side, in the bar they live in
+// ---------------------------------------------------------------------------
+
+export const Row: Story = {
+  render: () => (
+    <ToolbarFrame width={320}>
+      <XStack alignItems="center" gap="$1" paddingHorizontal="$2">
+        <ToolbarGroup>
+          <ToolbarButton disabled onPress={() => {}} aria-label="Undo" tooltip="Undo (⌘Z)">
+            <UndoIcon />
+          </ToolbarButton>
+          <ToolbarButton onPress={() => action("onPress")("Redo")} aria-label="Redo">
+            <RedoIcon />
+          </ToolbarButton>
+        </ToolbarGroup>
+        <ToolbarGroup showSeparator={false}>
+          <ToolbarButton active onPress={() => action("onPress")("Bold")} aria-label="Bold">
+            <BoldIcon>B</BoldIcon>
+          </ToolbarButton>
+          <ToolbarButton onPress={() => action("onPress")("Italic")} aria-label="Italic">
+            <ItalicIcon>I</ItalicIcon>
+          </ToolbarButton>
+        </ToolbarGroup>
+      </XStack>
+    </ToolbarFrame>
+  ),
+};

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>
+  ),
+};