@multiplatform.one/rich-text 7.6.3 → 7.7.1

package/src/editor/TentapEditor.native.tsx

@@ -42,6 +42,7 @@ import { RichEditorContext } from "../context";
 import { PALETTE_THEME_TOKENS } from "../constants";
 import { t } from "../shared/t";
 import { getEditorStateFromBridge } from "./useEditorState";
+import { getEditorCSS } from "./editorStyles";
 import { htmlToMarkdown, markdownToHtml } from "./markdown";
 
 function useNativeEditorDarkMode(): boolean {
@@ -60,6 +61,10 @@ function useNativeEditorDarkMode(): boolean {
 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;
 }
 
 // Avoid `forwardRef<A, B>(...)` — Metro/Babel TSX can parse the `>` as JSX and
@@ -77,6 +82,8 @@ export const TentapEditor = forwardRef(
       minHeight = 150,
       maxHeight,
       fill = false,
+      bodyFontFamily,
+      headingFontFamily,
       hasError: _hasError,
     }: TentapEditorProps,
     ref: ForwardedRef<RichEditorRef>,
@@ -148,6 +155,34 @@ export const TentapEditor = forwardRef(
       return () => clearTimeout(id);
     }, [editor, theme]);
 
+    // The content rules: padding, the $body / $heading families, block flow
+    // for lists and quotes, code and image chrome. Web gets them from
+    // getEditorCSS() through a <style> tag; the 10Tap WebView is a separate
+    // document with no Tamagui stylesheet, so with nothing injected it renders
+    // WebKit's defaults, which is zero padding and the UA serif (MPO-187, Clay's
+    // screenshot: "Hello world" at x=0 in Times while the toolbar is the system
+    // sans). One source: the same function the web editor uses, so a fix on
+    // either side lands on both. motionMs 0 because there is no bubble menu on
+    // native, and the palette block above already defines every var(--colorN)
+    // this CSS reads. `.ProseMirror` outranks darkEditorCss's `* { color }`, so
+    // the foreground also moves onto the theme's --color12 in both schemes.
+    useEffect(() => {
+      const id = setTimeout(() => {
+        editor.injectCSS(
+          getEditorCSS({
+            minHeight,
+            maxHeight,
+            bodyFontFamily,
+            headingFontFamily,
+            fullscreen: fill,
+            motionMs: 0,
+          }),
+          "multiplatform-tentap-content",
+        );
+      }, 150);
+      return () => clearTimeout(id);
+    }, [editor, minHeight, maxHeight, bodyFontFamily, headingFontFamily, fill]);
+
     // Subscribe to editor state updates
     useEffect(() => {
       const unsubscribe = editor._subscribeToEditorStateUpdate((state: any) => {

package/src/richEditorPartsStories.spec.tsx

@@ -0,0 +1,150 @@
+/**
+ * Mounts every RichEditor shell 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.
+ *
+ * ProseMirror needs a browser layout engine happy-dom does not have, and the
+ * catalog Button is heavy under it, so both are stood in as the toolbar specs
+ * next door do. The theme hooks stay REAL: the toolbar's pickers render a
+ * FloatingPanel, which reads knobs richEditor.spec.tsx's `useResolvedKnobs`
+ * stub does not carry ("Cannot destructure property 'style' of
+ * 'panel.knobProps.elevatedSurface'"). What survives the swaps — which chrome
+ * the shell renders for a given set of props — is exactly what these stories
+ * are about.
+ */
+import { describe, expect, it, vi } from "vitest";
+
+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"]}
+      onClick={props.onPress}
+    >
+      {props.children}
+    </button>
+  ),
+}));
+
+vi.mock("@multiplatform.one/components", async (importOriginal) => ({
+  ...(await importOriginal<Record<string, unknown>>()),
+  Tooltip: ({ children }: any) => children,
+}));
+
+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>,
+}));
+
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+
+const storiesModule = await import("./RichEditor.parts.stories");
+const meta = storiesModule.default;
+const { Main, NoStatusBar, NotResizable, MarkdownCapabilities, ReadOnly, WithError, Compact } =
+  storiesModule;
+
+type StoryLike = { args?: Record<string, unknown> };
+
+/** Resolve a story the way Storybook does: meta args over story args. */
+function mount(story: StoryLike) {
+  const args = { ...(meta.args as Record<string, unknown>), ...story.args };
+  const Component = meta.component as React.ComponentType<Record<string, unknown>>;
+  return renderWithProviders(<Component {...args} />);
+}
+
+const stories = {
+  Main,
+  NoStatusBar,
+  NotResizable,
+  MarkdownCapabilities,
+  ReadOnly,
+  WithError,
+  Compact,
+} as const;
+
+const labelsIn = (container: HTMLElement) =>
+  Array.from(container.querySelectorAll("[role='button']")).map((b) =>
+    b.getAttribute("aria-label"),
+  );
+
+describe("RichEditor shell stories", () => {
+  it("nests under the editor title so the gallery buckets it with RichTextEditor", () => {
+    expect(meta.title).toBe("Forms/RichTextEditor/RichEditor");
+  });
+
+  it("is a separate title from the form field's, so neither shadows the other", () => {
+    expect(meta.title).not.toBe("Forms/RichTextEditor");
+  });
+
+  it.each(Object.entries(stories))("%s mounts the editor content", (_name, story) => {
+    const { container } = mount(story);
+    expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
+  });
+
+  it("Main renders the toolbar AND the status bar", () => {
+    const { container, getByText } = mount(Main);
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+    expect(labelsIn(container)).toContain("Bold");
+    expect(getByText("Rich text")).toBeTruthy();
+    expect(getByText("0 words")).toBeTruthy();
+  });
+
+  it("NoStatusBar drops the footer, and with it the mode toggle", () => {
+    const { container, queryByText } = mount(NoStatusBar);
+    expect(queryByText("Rich text")).toBeNull();
+    expect(queryByText("0 words")).toBeNull();
+    // The toolbar is untouched — only the footer goes.
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+  });
+
+  it("ReadOnly hides the toolbar, since there is nothing to command", () => {
+    const { container } = mount(ReadOnly);
+    expect(container.querySelector("[role='toolbar']")).toBeNull();
+    expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
+  });
+
+  it("MarkdownCapabilities drops the controls GFM cannot express", () => {
+    const { container } = mount(MarkdownCapabilities);
+    const labels = labelsIn(container);
+    expect(labels).toContain("Bold");
+    expect(labels).not.toContain("Underline");
+    expect(labels).not.toContain("Text Color");
+  });
+
+  it("WithError keeps the whole shell, since the error is the frame's colour", () => {
+    const { container, getByText } = mount(WithError);
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+    expect(getByText("Rich text")).toBeTruthy();
+  });
+
+  // One render per test: getByText is bound to the document, so two mounts in
+  // one test make every footer query ambiguous.
+  it.each([
+    ["NotResizable", NotResizable],
+    ["Compact", Compact],
+  ])("%s still renders toolbar, content and footer", (_name, story) => {
+    const { container, getByText } = mount(story);
+    expect(container.querySelector("[role='toolbar']")).toBeTruthy();
+    expect(container.querySelector("[data-testid='editor-content']")).toBeTruthy();
+    expect(getByText("Rich text")).toBeTruthy();
+  });
+});

package/src/toolbar/CodeBlockBubble.spec.tsx

@@ -0,0 +1,219 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { act, 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>;
+  },
+}));
+
+// The language list lives inside a Popover, which never mounts its content in
+// a headless DOM. Flatten the popover so the list is inspectable.
+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="language-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 { CodeBlockBubble } = await import("./CodeBlockBubble");
+
+function makeEditor(
+  opts: { language?: string | null; code?: string; active?: boolean; attrs?: unknown } = {},
+) {
+  const { language = null, code = "const a = 1;", active = true } = opts;
+  const calls: Array<[string, ...unknown[]]> = [];
+  const chain: any = new Proxy(
+    {},
+    {
+      get:
+        (_target, prop: string) =>
+        (...args: unknown[]) => {
+          calls.push([prop, ...args]);
+          return chain;
+        },
+    },
+  );
+  const codeBlockNode = { type: { name: "codeBlock" }, textContent: code };
+  const docNode = { type: { name: "doc" }, textContent: "outer" };
+  const editor = {
+    chain: () => chain,
+    getAttributes: (name: string) =>
+      "attrs" in opts ? (opts.attrs as any) : name === "codeBlock" ? { language } : {},
+    isActive: (name: string) => name === "codeBlock" && active,
+    state: {
+      selection: { $from: { depth: 1, node: (d: number) => (d === 1 ? codeBlockNode : docNode) } },
+    },
+  } 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}>
+      <CodeBlockBubble editor={editor} />
+    </RichEditorContext.Provider>,
+  );
+}
+
+function labelOf(container: HTMLElement, selector: string) {
+  return container.querySelector(selector)?.getAttribute("aria-label");
+}
+
+function menuLabels(container: HTMLElement) {
+  const menu = container.querySelector('[data-testid="language-menu"]');
+  if (!menu) throw new Error("language menu did not render");
+  return Array.from(menu.querySelectorAll("[aria-label]")).map((el) =>
+    el.getAttribute("aria-label"),
+  );
+}
+
+describe("CodeBlockBubble", () => {
+  let writeText: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    writeText = vi.fn(() => Promise.resolve());
+    Object.defineProperty(globalThis.navigator, "clipboard", {
+      value: { writeText },
+      configurable: true,
+      writable: true,
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  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 code block", () => {
+    const inside = makeEditor({ active: true });
+    render(inside.editor);
+    expect(bubble.props?.shouldShow({ editor: inside.editor })).toBe(true);
+
+    const outside = makeEditor({ active: false });
+    render(outside.editor);
+    expect(bubble.props?.shouldShow({ editor: outside.editor })).toBe(false);
+  });
+
+  it("anchors to the block rect, not the caret, so it does not chase typing", () => {
+    render(makeEditor().editor);
+    expect(typeof bubble.props?.getReferencedVirtualElement).toBe("function");
+    expect(bubble.props?.options).toMatchObject({ placement: "top-start" });
+  });
+
+  it("labels a null language as Plain text", () => {
+    const { container } = render(makeEditor({ language: null }).editor);
+    expect(container.querySelector('[aria-label="Select language"]')?.textContent).toBe(
+      "Plain text",
+    );
+  });
+
+  it("labels a known language with its catalog label, not its attribute value", () => {
+    const { container } = render(makeEditor({ language: "typescript" }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("TypeScript");
+    expect(trigger?.textContent).not.toBe("typescript");
+  });
+
+  it("falls back to the raw attribute for a language the catalog does not know", () => {
+    const { container } = render(makeEditor({ language: "brainfuck" }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("brainfuck");
+  });
+
+  it("falls back to Plain text when the node carries no language attribute at all", () => {
+    const { container } = render(makeEditor({ attrs: undefined }).editor);
+    const trigger = container.querySelector('[aria-label="Select language"]');
+    expect(trigger?.textContent).toBe("Plain text");
+  });
+
+  it("offers a language list headed by Plain text", () => {
+    const { container } = render(makeEditor().editor);
+    const labels = menuLabels(container);
+    expect(labels[0]).toBe("Plain text");
+    for (const label of ["TypeScript", "Python", "SQL", "Mermaid", "Math (TeX)"]) {
+      expect(labels).toContain(label);
+    }
+  });
+
+  it("picking a language writes it onto the node; picking Plain text clears it to null", () => {
+    const picked = makeEditor({ language: null });
+    const { container } = render(picked.editor);
+    const menu = container.querySelector('[data-testid="language-menu"]') as HTMLElement;
+
+    fireEvent.click(menu.querySelector('[aria-label="Python"]')!);
+    expect(picked.names()).toEqual(["focus", "updateAttributes", "run"]);
+    expect(picked.calls[1]).toEqual(["updateAttributes", "codeBlock", { language: "python" }]);
+
+    const cleared = makeEditor({ language: "python" });
+    const { container: c2 } = render(cleared.editor);
+    const menu2 = c2.querySelector('[data-testid="language-menu"]') as HTMLElement;
+    fireEvent.click(menu2.querySelector('[aria-label="Plain text"]')!);
+    expect(cleared.calls[1]).toEqual(["updateAttributes", "codeBlock", { language: null }]);
+  });
+
+  it("copies the text of the code block the caret is in, and says so for 1.5s", async () => {
+    vi.useFakeTimers();
+    const { container } = render(makeEditor({ code: "print('hi')" }).editor);
+
+    await act(async () => {
+      fireEvent.click(container.querySelector('[aria-label="Copy code"]')!);
+    });
+
+    expect(writeText).toHaveBeenCalledWith("print('hi')");
+    expect(labelOf(container, '[aria-label="Copied"]')).toBe("Copied");
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+    expect(container.querySelector('[aria-label="Copied"]')).toBeNull();
+    expect(container.querySelector('[aria-label="Copy code"]')).toBeTruthy();
+  });
+
+  it("a rejected clipboard write warns and leaves the label alone", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    writeText.mockRejectedValueOnce(new Error("denied"));
+    const { container } = render(makeEditor().editor);
+
+    await act(async () => {
+      fireEvent.click(container.querySelector('[aria-label="Copy code"]')!);
+    });
+
+    expect(warn).toHaveBeenCalled();
+    expect(container.querySelector('[aria-label="Copied"]')).toBeNull();
+    warn.mockRestore();
+  });
+
+  it("remove toggles the code block off rather than deleting the selection", () => {
+    const { editor, names, calls } = makeEditor();
+    const { container } = render(editor);
+
+    fireEvent.click(container.querySelector('[aria-label="Remove code block"]')!);
+    expect(names()).toEqual(["focus", "toggleCodeBlock", "run"]);
+    expect(calls.some(([n]) => n === "deleteSelection")).toBe(false);
+  });
+});

package/src/toolbar/FixedToolbar.stories.tsx

@@ -0,0 +1,224 @@
+/**
+ * Storybook stories for FixedToolbar — the bar across the top of the editor,
+ * the thing the whole toolbar/ folder assembles into.
+ *
+ * Stories: Main, Sections, MarkdownCapabilities, ErrorState, FullscreenToggle,
+ * LiveEditor
+ *
+ * The toolbar owns no editor state: it renders `state` and calls commands
+ * through `editorRef`. So every story but the last drives it from a plain
+ * state object and reports the commands into the actions panel, which is the
+ * only way to see the command wiring without a document to run it against.
+ * LiveEditor is the exception — a real editor behind a standalone bar, which
+ * is what the compound `RichEditor.Editor` export exists for.
+ */
+import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
+import { action } from "@multiplatform.one/storybook";
+import { useRef, useState } from "react";
+import { Paragraph, YStack } from "tamagui";
+import { RichEditorContext } from "../context";
+import { EditorFrame } from "../styled";
+import { RichEditor } from "../RichEditor";
+import { defaultEditorState } from "../types";
+import type { EditorCapabilities, EditorState, RichEditorRef, ToolbarSection } from "../types";
+import { FixedToolbar } from "./FixedToolbar";
+
+export interface FixedToolbarStoryArgs {
+  /** Bold is on in the current selection */
+  isBold: boolean;
+  /** Italic is on in the current selection */
+  isItalic: boolean;
+  /** There is history to undo (an empty history washes the Undo button) */
+  canUndo: boolean;
+  /** There is history to redo */
+  canRedo: boolean;
+  /** Which sections show; undefined shows every one */
+  sections?: ToolbarSection[];
+  /** markdown drops the controls GFM cannot express */
+  capabilities: EditorCapabilities;
+  /** Paints the bar's bottom rule red, matching the frame */
+  hasError: boolean;
+}
+
+function stateFor(args: FixedToolbarStoryArgs): EditorState {
+  return {
+    ...defaultEditorState,
+    isBold: args.isBold,
+    isItalic: args.isItalic,
+    canUndo: args.canUndo,
+    canRedo: args.canRedo,
+  };
+}
+
+/**
+ * A toolbar with no editor under it. `editorRef` stays null, so commands are
+ * reported to the actions panel instead of running — which is the point:
+ * the bar's job is to name the command, not to perform it.
+ */
+function ToolbarSpecimen(args: FixedToolbarStoryArgs) {
+  const editorRef = useRef<RichEditorRef>({
+    executeCommand: (command, payload) => action("executeCommand")(command, payload),
+    getState: () => stateFor(args),
+    getHTML: () => "",
+    getJSON: () => null,
+    getMarkdown: () => "",
+    setHTML: () => {},
+    setJSON: () => {},
+    setMarkdown: () => {},
+    focus: () => {},
+    blur: () => {},
+  });
+  return (
+    <EditorFrame maxWidth={720} borderRadius="$3" hasError={args.hasError}>
+      <FixedToolbar
+        editorRef={editorRef}
+        state={stateFor(args)}
+        sections={args.sections}
+        capabilities={args.capabilities}
+        hasError={args.hasError}
+      />
+      <YStack minHeight={100} padding="$3">
+        <Paragraph size="$3" color="$color11">
+          The bar above drives this space. Commands land in the Actions panel.
+        </Paragraph>
+      </YStack>
+    </EditorFrame>
+  );
+}
+
+const meta: Meta<FixedToolbarStoryArgs> = {
+  title: "Forms/RichTextEditor/FixedToolbar",
+  component: FixedToolbar as never,
+  parameters: {
+    layout: "padded",
+  },
+  argTypes: {
+    isBold: { control: "boolean" },
+    isItalic: { control: "boolean" },
+    canUndo: { control: "boolean" },
+    canRedo: { control: "boolean" },
+    capabilities: { control: "radio", options: ["full", "markdown"] },
+    hasError: { control: "boolean" },
+    sections: { control: false },
+  },
+  args: {
+    isBold: false,
+    isItalic: false,
+    canUndo: true,
+    canRedo: false,
+    capabilities: "full",
+    hasError: false,
+  },
+  decorators: [
+    (Story) => (
+      <RichEditorContext.Provider size="$true" compact={false} disabled={false}>
+        <Story />
+      </RichEditorContext.Provider>
+    ),
+  ],
+  render: (args) => <ToolbarSpecimen {...args} />,
+};
+
+export default meta;
+type Story = StoryObj<FixedToolbarStoryArgs>;
+
+// ---------------------------------------------------------------------------
+// Main (with controls) — every section, bold off, redo unavailable
+// ---------------------------------------------------------------------------
+
+export const Main: Story = {};
+
+// ---------------------------------------------------------------------------
+// Sections — the `sections` prop trims the bar to the listed groups
+// ---------------------------------------------------------------------------
+
+export const Sections: Story = {
+  args: {
+    sections: ["formatting", "link"],
+    isBold: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// MarkdownCapabilities — GFM cannot express colour or underline, so those
+// controls are absent, not merely disabled
+// ---------------------------------------------------------------------------
+
+export const MarkdownCapabilities: Story = {
+  name: "Markdown capabilities",
+  args: {
+    capabilities: "markdown",
+  },
+};
+
+// ---------------------------------------------------------------------------
+// ErrorState — the bar's bottom rule turns red with the frame
+// ---------------------------------------------------------------------------
+
+export const ErrorState: Story = {
+  name: "Error state",
+  args: {
+    hasError: true,
+  },
+};
+
+// ---------------------------------------------------------------------------
+// FullscreenToggle — onFullscreenToggle adds the expand control at the right
+// end, outside the scrolling strip so it never scrolls away
+// ---------------------------------------------------------------------------
+
+export const FullscreenToggle: Story = {
+  name: "Fullscreen toggle",
+  render: (args) => {
+    const FullscreenSpecimen = () => {
+      const [fullscreen, setFullscreen] = useState(false);
+      const editorRef = useRef<RichEditorRef>(null);
+      return (
+        <EditorFrame maxWidth={720} borderRadius="$3">
+          <FixedToolbar
+            editorRef={editorRef}
+            state={stateFor(args)}
+            fullscreen={fullscreen}
+            onFullscreenToggle={() => {
+              action("onFullscreenToggle")(!fullscreen);
+              setFullscreen(!fullscreen);
+            }}
+          />
+          <YStack minHeight={100} padding="$3">
+            <Paragraph size="$3" color="$color11">
+              {fullscreen ? "Fullscreen: on" : "Fullscreen: off"}
+            </Paragraph>
+          </YStack>
+        </EditorFrame>
+      );
+    };
+    return <FullscreenSpecimen />;
+  },
+};
+
+// ---------------------------------------------------------------------------
+// LiveEditor — a standalone bar wired to a real editor through the compound
+// `RichEditor.Editor` export; typing updates the marks
+// ---------------------------------------------------------------------------
+
+export const LiveEditor: Story = {
+  name: "Live editor",
+  render: () => {
+    const LiveSpecimen = () => {
+      const editorRef = useRef<RichEditorRef>(null);
+      const [state, setState] = useState<EditorState>(defaultEditorState);
+      return (
+        <EditorFrame maxWidth={720} borderRadius="$3">
+          <FixedToolbar editorRef={editorRef} state={state} />
+          <RichEditor.Editor
+            ref={editorRef}
+            initialContent="<p>Select this text and press <strong>B</strong> in the bar above — the button marks itself from the editor's own state.</p>"
+            onStateChange={setState}
+            minHeight={160}
+          />
+        </EditorFrame>
+      );
+    };
+    return <LiveSpecimen />;
+  },
+};