@multiplatform.one/rich-text 7.6.3 → 7.7.1

package/src/toolbar/ImageBubble.spec.tsx

@@ -0,0 +1,140 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+
+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>;
+  },
+}));
+
+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 { ImageBubble } = await import("./ImageBubble");
+
+/** Records every link in the command chain so an assertion can read the whole call. */
+function makeEditor(attrs: Record<string, unknown> = {}, 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: (name: string) => (name === "image" ? attrs : {}),
+    isActive: (name: string) => name === "image" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <ImageBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function press(container: HTMLElement, label: string) {
+  const el = container.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no control labelled "${label}"`);
+  fireEvent.click(el);
+  return el;
+}
+
+describe("ImageBubble", () => {
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+    expect(container.querySelector('[data-testid="bubble-menu"]')).toBeNull();
+  });
+
+  it("shows itself only while an image node is selected", () => {
+    const onImage = makeEditor({ src: "a.png" }, true);
+    render(onImage.editor);
+    expect(bubble.props?.shouldShow({ editor: onImage.editor })).toBe(true);
+
+    const offImage = makeEditor({}, false);
+    render(offImage.editor);
+    expect(bubble.props?.shouldShow({ editor: offImage.editor })).toBe(false);
+  });
+
+  it("shows the image's alt text, and says so plainly when there is none", () => {
+    const withAlt = render(makeEditor({ alt: "A red bicycle" }).editor);
+    expect(withAlt.getByText("A red bicycle")).toBeTruthy();
+
+    const withoutAlt = render(makeEditor({ src: "a.png" }).editor);
+    expect(withoutAlt.getByText("No alt text")).toBeTruthy();
+  });
+
+  it("prefills the editing field with the alt text already on the node", () => {
+    const { container, getByText } = render(makeEditor({ alt: "A red bicycle" }).editor);
+    press(container, "Edit alt text");
+
+    expect(getByText("Alt text")).toBeTruthy();
+    const input = container.querySelector("input") as HTMLInputElement;
+    expect(input.value).toBe("A red bicycle");
+  });
+
+  it("writes the edited alt text back onto the image node and leaves editing", () => {
+    const { editor, calls, names } = makeEditor({ alt: "old" });
+    const { container, queryByText } = render(editor);
+
+    press(container, "Edit alt text");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "new alt" },
+    });
+    press(container, "Save alt text");
+
+    expect(names()).toEqual(["focus", "updateAttributes", "run"]);
+    expect(calls[1]).toEqual(["updateAttributes", "image", { alt: "new alt" }]);
+    expect(queryByText("Alt text")).toBeNull();
+  });
+
+  it("cancel leaves editing without touching the document", () => {
+    const { editor, calls } = makeEditor({ alt: "old" });
+    const { container, queryByText, getByText } = render(editor);
+
+    press(container, "Edit alt text");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "discarded" },
+    });
+    press(container, "Cancel");
+
+    expect(calls).toEqual([]);
+    expect(queryByText("Alt text")).toBeNull();
+    expect(getByText("old")).toBeTruthy();
+  });
+
+  it("delete removes the selected node rather than clearing its attributes", () => {
+    const { editor, calls, names } = makeEditor({ alt: "old" });
+    const { container } = render(editor);
+
+    press(container, "Delete image");
+    expect(names()).toEqual(["focus", "deleteSelection", "run"]);
+    expect(calls.some(([name]) => name === "updateAttributes")).toBe(false);
+  });
+});

package/src/toolbar/LinkBubble.spec.tsx

@@ -0,0 +1,159 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { RichEditorContext } from "../context";
+
+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>;
+  },
+}));
+
+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 { LinkBubble } = await import("./LinkBubble");
+
+function makeEditor(attrs: Record<string, unknown> = {}, 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: (name: string) => (name === "link" ? attrs : {}),
+    isActive: (name: string) => name === "link" && active,
+  } as any;
+  return { editor, calls, names: () => calls.map((c) => c[0]) };
+}
+
+function render(editor: any) {
+  return renderWithProviders(
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      <LinkBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function press(container: HTMLElement, label: string) {
+  const el = container.querySelector(`[aria-label="${label}"]`);
+  if (!el) throw new Error(`no control labelled "${label}"`);
+  fireEvent.click(el);
+  return el;
+}
+
+describe("LinkBubble", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("renders nothing at all without an editor", () => {
+    const { container } = render(null);
+    expect(container.textContent).toBe("");
+  });
+
+  it("shows itself only while the caret is on a link", () => {
+    const onLink = makeEditor({ href: "https://example.com" }, true);
+    render(onLink.editor);
+    expect(bubble.props?.shouldShow({ editor: onLink.editor })).toBe(true);
+
+    const offLink = makeEditor({}, false);
+    render(offLink.editor);
+    expect(bubble.props?.shouldShow({ editor: offLink.editor })).toBe(false);
+  });
+
+  it("shows the href, and says so plainly when the mark carries none", () => {
+    const withHref = render(makeEditor({ href: "https://example.com/a" }).editor);
+    expect(withHref.getByText("https://example.com/a")).toBeTruthy();
+
+    const withoutHref = render(makeEditor({}).editor);
+    expect(withoutHref.getByText("No URL")).toBeTruthy();
+  });
+
+  it("opens the href in a new tab with noopener, from both the label and the button", () => {
+    const open = vi.spyOn(window, "open").mockImplementation(() => null);
+    const { container, getByText } = render(makeEditor({ href: "https://example.com" }).editor);
+
+    fireEvent.click(getByText("https://example.com"));
+    press(container, "Open link");
+
+    expect(open).toHaveBeenCalledTimes(2);
+    expect(open).toHaveBeenCalledWith("https://example.com", "_blank", "noopener,noreferrer");
+  });
+
+  it("does not open a window when there is no href to open", () => {
+    const open = vi.spyOn(window, "open").mockImplementation(() => null);
+    const { container } = render(makeEditor({}).editor);
+
+    press(container, "Open link");
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it("prefills the edit field with the current href", () => {
+    const { container } = render(makeEditor({ href: "https://example.com" }).editor);
+    press(container, "Edit link");
+    expect((container.querySelector("input") as HTMLInputElement).value).toBe(
+      "https://example.com",
+    );
+  });
+
+  it("saves over the whole mark range, with the value trimmed", () => {
+    const { editor, calls, names } = makeEditor({ href: "https://old.example" });
+    const { container } = render(editor);
+
+    press(container, "Edit link");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "  https://new.example  " },
+    });
+    press(container, "Save link");
+
+    expect(names()).toEqual(["focus", "extendMarkRange", "setLink", "run"]);
+    expect(calls[1]).toEqual(["extendMarkRange", "link"]);
+    expect(calls[2]).toEqual(["setLink", { href: "https://new.example" }]);
+  });
+
+  it("refuses to save a blank href, and still closes the editor", () => {
+    const { editor, calls } = makeEditor({ href: "https://old.example" });
+    const { container, getByText } = render(editor);
+
+    press(container, "Edit link");
+    fireEvent.change(container.querySelector("input") as HTMLInputElement, {
+      target: { value: "   " },
+    });
+    press(container, "Save link");
+
+    expect(calls).toEqual([]);
+    expect(getByText("https://old.example")).toBeTruthy();
+  });
+
+  it("unlinks over the whole mark range rather than the selection alone", () => {
+    const { editor, calls, names } = makeEditor({ href: "https://example.com" });
+    const { container } = render(editor);
+
+    press(container, "Remove link");
+    expect(names()).toEqual(["focus", "extendMarkRange", "unsetLink", "run"]);
+    expect(calls[1]).toEqual(["extendMarkRange", "link"]);
+  });
+});

package/src/toolbar/ResizeHandle.spec.tsx

@@ -0,0 +1,118 @@
+import { createRef } from "react";
+import { describe, expect, it, beforeEach } from "vitest";
+import { fireEvent } from "@testing-library/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { ResizeHandle } from "./ResizeHandle";
+
+/** The handle drives a real element, so give it one with a measurable height. */
+function makeContainer(height: number) {
+  const el = document.createElement("div");
+  el.getBoundingClientRect = () => ({ height }) as DOMRect;
+  document.body.appendChild(el);
+  const ref = createRef<HTMLElement>();
+  (ref as { current: HTMLElement | null }).current = el;
+  return { el, ref };
+}
+
+function grab(container: HTMLElement) {
+  const handle = container.querySelector('[role="separator"]');
+  if (!handle) throw new Error("resize handle did not render");
+  return handle;
+}
+
+function drag(handle: Element, fromY: number, toY: number) {
+  fireEvent.mouseDown(handle, { clientY: fromY });
+  document.dispatchEvent(new MouseEvent("mousemove", { clientY: toY }));
+}
+
+describe("ResizeHandle", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  });
+
+  it("exposes itself to assistive tech as a labelled separator", () => {
+    const { ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+    const handle = grab(container);
+    expect(handle.getAttribute("aria-label")).toBe("Resize editor");
+  });
+
+  it("adds the drag delta to the height the container had when the drag started", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    drag(grab(container), 100, 180);
+    expect(el.style.height).toBe("380px");
+  });
+
+  it("shrinks on an upward drag, and floors at minHeight (default 150)", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+    const handle = grab(container);
+
+    drag(handle, 100, 60);
+    expect(el.style.height).toBe("260px");
+
+    document.dispatchEvent(new MouseEvent("mousemove", { clientY: -500 }));
+    expect(el.style.height).toBe("150px");
+  });
+
+  it("honours an explicit minHeight over the default", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} minHeight={220} />);
+
+    drag(grab(container), 100, -900);
+    expect(el.style.height).toBe("220px");
+  });
+
+  it("caps at maxHeight when one is given, and does not cap when it is omitted", () => {
+    const capped = makeContainer(300);
+    const { container: cappedDom } = renderWithProviders(
+      <ResizeHandle containerRef={capped.ref} maxHeight={400} />,
+    );
+    drag(grab(cappedDom), 100, 900);
+    expect(capped.el.style.height).toBe("400px");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+
+    const free = makeContainer(300);
+    const { container: freeDom } = renderWithProviders(<ResizeHandle containerRef={free.ref} />);
+    drag(grab(freeDom), 100, 900);
+    expect(free.el.style.height).toBe("1100px");
+  });
+
+  it("locks the page cursor and selection for the length of the drag only", () => {
+    const { ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    fireEvent.mouseDown(grab(container), { clientY: 100 });
+    expect(document.body.style.cursor).toBe("ns-resize");
+    expect(document.body.style.userSelect).toBe("none");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+    expect(document.body.style.cursor).toBe("");
+    expect(document.body.style.userSelect).toBe("");
+  });
+
+  it("stops resizing after mouseup, so a later pointer move is inert", () => {
+    const { el, ref } = makeContainer(300);
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    drag(grab(container), 100, 200);
+    expect(el.style.height).toBe("400px");
+
+    document.dispatchEvent(new MouseEvent("mouseup"));
+    document.dispatchEvent(new MouseEvent("mousemove", { clientY: 900 }));
+    expect(el.style.height).toBe("400px");
+  });
+
+  it("is a no-op while the container ref is still empty", () => {
+    const ref = createRef<HTMLElement>();
+    const { container } = renderWithProviders(<ResizeHandle containerRef={ref} />);
+
+    fireEvent.mouseDown(grab(container), { clientY: 100 });
+    expect(document.body.style.cursor).toBe("");
+  });
+});

package/src/toolbar/StatusBar.spec.tsx

@@ -0,0 +1,100 @@
+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 { defaultEditorState } from "../types";
+import type { EditorState } from "../types";
+import { StatusBar } from "./StatusBar";
+
+function withContext(ui: React.ReactElement) {
+  return (
+    <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+      {ui}
+    </RichEditorContext.Provider>
+  );
+}
+
+function stateWith(counts: Partial<EditorState>): EditorState {
+  return { ...defaultEditorState, ...counts };
+}
+
+describe("StatusBar", () => {
+  it("offers both editor modes as pressable labels", () => {
+    const { getByText } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    expect(getByText("Rich text")).toBeTruthy();
+    expect(getByText("Markdown")).toBeTruthy();
+  });
+
+  it("reports the mode the user picked, not the mode it is already in", () => {
+    const onModeChange = vi.fn();
+    const { getByText } = renderWithProviders(
+      withContext(
+        <StatusBar state={defaultEditorState} mode="richtext" onModeChange={onModeChange} />,
+      ),
+    );
+
+    fireEvent.click(getByText("Markdown"));
+    expect(onModeChange).toHaveBeenCalledWith("markdown");
+
+    fireEvent.click(getByText("Rich text"));
+    expect(onModeChange).toHaveBeenLastCalledWith("richtext");
+    expect(onModeChange).toHaveBeenCalledTimes(2);
+  });
+
+  it("marks the active mode, and swaps the marking when the mode changes", () => {
+    const { getByText, rerender } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    // Tamagui compiles the weight/colour props to class tokens, so the
+    // rendered class list is where "active" is actually observable.
+    const classesOf = (label: string) => (getByText(label) as HTMLElement).className;
+
+    const activeClasses = classesOf("Rich text");
+    const idleClasses = classesOf("Markdown");
+    expect(activeClasses).not.toBe(idleClasses);
+    expect(activeClasses).toContain("_fow-600");
+    expect(idleClasses).toContain("_fow-400");
+
+    rerender(
+      withContext(<StatusBar state={defaultEditorState} mode="markdown" onModeChange={() => {}} />),
+    );
+    expect(classesOf("Markdown")).toBe(activeClasses);
+    expect(classesOf("Rich text")).toBe(idleClasses);
+  });
+
+  it("singularises exactly at one word and one character", () => {
+    const { getByText } = renderWithProviders(
+      withContext(
+        <StatusBar
+          state={stateWith({ wordCount: 1, characterCount: 1 })}
+          mode="richtext"
+          onModeChange={() => {}}
+        />,
+      ),
+    );
+    expect(getByText("1 word")).toBeTruthy();
+    expect(getByText("1 character")).toBeTruthy();
+  });
+
+  it("pluralises at zero as well as at many", () => {
+    const { getByText, rerender } = renderWithProviders(
+      withContext(<StatusBar state={defaultEditorState} mode="richtext" onModeChange={() => {}} />),
+    );
+    expect(getByText("0 words")).toBeTruthy();
+    expect(getByText("0 characters")).toBeTruthy();
+
+    rerender(
+      withContext(
+        <StatusBar
+          state={stateWith({ wordCount: 42, characterCount: 240 })}
+          mode="richtext"
+          onModeChange={() => {}}
+        />,
+      ),
+    );
+    expect(getByText("42 words")).toBeTruthy();
+    expect(getByText("240 characters")).toBeTruthy();
+  });
+});

package/src/toolbar/StatusBar.stories.tsx

@@ -0,0 +1,146 @@
+/**
+ * Storybook stories for StatusBar — the editor footer: the rich-text /
+ * markdown mode toggle on the left, word and character counts on the right.
+ *
+ * Stories: Main, SingularCounts, MarkdownMode, Empty, InFrame
+ *
+ * The footer is a pure function of `state` and `mode`, so the controls drive
+ * the two counts and the active mode directly; pressing a mode label reports
+ * through `onModeChange` (actions panel) and flips the local mode so the
+ * marking swaps the way it does inside RichEditor.
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { useEffect, useState } from "react";
+import { Paragraph, View, YStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { EditorFrame } from "../styled";
+import { defaultEditorState } from "../types";
+import type { EditorMode, EditorState } from "../types";
+import { StatusBar } from "./StatusBar";
+
+export interface StatusBarStoryArgs {
+  /** Word count shown on the right */
+  wordCount: number;
+  /** Character count shown on the right */
+  characterCount: number;
+  /** Which mode label is marked active */
+  mode: EditorMode;
+}
+
+function stateFor(args: StatusBarStoryArgs): EditorState {
+  return {
+    ...defaultEditorState,
+    wordCount: args.wordCount,
+    characterCount: args.characterCount,
+  };
+}
+
+/** Mode is local so the toggle is live; the `mode` control seeds and resets it. */
+function StatusBarSpecimen(args: StatusBarStoryArgs) {
+  const [mode, setMode] = useState<EditorMode>(args.mode);
+  useEffect(() => setMode(args.mode), [args.mode]);
+  return (
+    <StatusBar
+      state={stateFor(args)}
+      mode={mode}
+      onModeChange={(next) => {
+        action("onModeChange")(next);
+        setMode(next);
+      }}
+    />
+  );
+}
+
+const meta: Meta<StatusBarStoryArgs> = {
+  title: "Forms/RichTextEditor/StatusBar",
+  component: StatusBar as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    wordCount: { control: { type: "number", min: 0 } },
+    characterCount: { control: { type: "number", min: 0 } },
+    mode: { control: "radio", options: ["richtext", "markdown"] },
+  },
+  args: {
+    wordCount: 42,
+    characterCount: 240,
+    mode: "richtext",
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => (
+    <View maxWidth={520} borderWidth={1} borderColor="$color6" borderRadius="$3">
+      <StatusBarSpecimen {...args} />
+    </View>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<StatusBarStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls)
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// SingularCounts — the plural forms flip exactly at one
+// ---------------------------------------------------------------------------
+
+export const SingularCounts: Story = {
+  args: {
+    wordCount: 1,
+    characterCount: 1,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// MarkdownMode — the raw-source toggle is the marked one
+// ---------------------------------------------------------------------------
+
+export const MarkdownMode: Story = {
+  args: {
+    mode: "markdown",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Empty — a fresh document pluralises at zero
+// ---------------------------------------------------------------------------
+
+export const Empty: Story = {
+  args: {
+    wordCount: 0,
+    characterCount: 0,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// InFrame — where it sits: the foot of an EditorFrame, under the content
+// ---------------------------------------------------------------------------
+
+export const InFrame: Story = {
+  name: "In frame",
+  args: {
+    wordCount: 12,
+    characterCount: 71,
+  },
+  render: (args) => (
+    <EditorFrame maxWidth={520} borderRadius="$3">
+      <YStack minHeight={120} padding="$3">
+        <Paragraph size="$3" color="$color11">
+          Twelve words of body copy stand in for the editor content here.
+        </Paragraph>
+      </YStack>
+      <StatusBarSpecimen {...args} />
+    </EditorFrame>
+  ),
+};