Preserve assistant message formatting on copy

packages/app/src/utils/rich-clipboard.test.ts

@@ -0,0 +1,97 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  createMarkdownClipboardContent,
+  type RichClipboardWriter,
+  writeMarkdownToRichClipboard,
+} from "./rich-clipboard";
+
+const { setStringAsyncMock } = vi.hoisted(() => ({
+  setStringAsyncMock: vi.fn(async () => true),
+}));
+
+vi.mock("expo-clipboard", () => ({
+  setStringAsync: setStringAsyncMock,
+}));
+
+beforeEach(() => {
+  setStringAsyncMock.mockClear();
+});
+
+describe("createMarkdownClipboardContent", () => {
+  it("renders markdown structures to clipboard html", () => {
+    const markdown = [
+      "# Heading",
+      "",
+      "| Name | Value |",
+      "| --- | --- |",
+      "| One | Two |",
+      "",
+      "- Parent",
+      "  - Child",
+      "",
+      "```ts",
+      "const value = 1;",
+      "```",
+    ].join("\n");
+
+    const content = createMarkdownClipboardContent(markdown);
+
+    expect(content.plainText).toBe(markdown);
+    expect(content.html).toContain("<h1>Heading</h1>");
+    expect(content.html).toContain("<table>");
+    expect(content.html).toContain("<ul>");
+    expect(content.html).toContain('class="language-ts"');
+  });
+
+  it("escapes raw html instead of placing it on the rich clipboard", () => {
+    const content = createMarkdownClipboardContent(
+      '<script>alert("x")</script>\n\n[jump](javascript:alert("x"))',
+    );
+
+    expect(content.html).not.toContain("<script>");
+    expect(content.html).not.toContain('href="javascript:');
+    expect(content.html).toContain("&lt;script&gt;");
+  });
+});
+
+describe("writeMarkdownToRichClipboard", () => {
+  it("writes plain text and html when a rich clipboard writer is available", async () => {
+    const markdown = "- item";
+    const writes: Array<Parameters<RichClipboardWriter["write"]>[0]> = [];
+    const richWriter: RichClipboardWriter = {
+      supportsHtml: () => true,
+      write: async (data) => {
+        writes.push(data);
+      },
+    };
+
+    await writeMarkdownToRichClipboard(markdown, {
+      richWriter,
+      writePlainText: setStringAsyncMock,
+    });
+
+    const written = writes[0];
+    if (!written) {
+      throw new Error("Expected rich clipboard data to be written");
+    }
+    await expect(written["text/plain"].text()).resolves.toBe(markdown);
+    await expect(written["text/html"].text()).resolves.toContain("<li>item</li>");
+    expect(setStringAsyncMock).not.toHaveBeenCalled();
+  });
+
+  it("falls back to plain text when rich clipboard writing fails", async () => {
+    const richWriter: RichClipboardWriter = {
+      supportsHtml: () => true,
+      write: async () => {
+        throw new Error("clipboard denied");
+      },
+    };
+
+    await writeMarkdownToRichClipboard("**bold**", {
+      richWriter,
+      writePlainText: setStringAsyncMock,
+    });
+
+    expect(setStringAsyncMock).toHaveBeenCalledWith("**bold**");
+  });
+});

packages/app/src/utils/rich-clipboard.ts

@@ -0,0 +1,81 @@
+import * as Clipboard from "expo-clipboard";
+import MarkdownIt from "markdown-it";
+import { isWeb } from "@/constants/platform";
+
+const markdownRenderer = new MarkdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+});
+
+type ClipboardMimeType = "text/plain" | "text/html";
+
+export interface MarkdownClipboardContent {
+  plainText: string;
+  html: string;
+}
+
+export interface RichClipboardWriter {
+  supportsHtml: () => boolean;
+  write: (data: Record<ClipboardMimeType, Blob>) => Promise<void>;
+}
+
+export interface MarkdownClipboardEnvironment {
+  richWriter?: RichClipboardWriter | null;
+  writePlainText: (text: string) => Promise<unknown>;
+}
+
+export function createMarkdownClipboardContent(markdown: string): MarkdownClipboardContent {
+  return {
+    plainText: markdown,
+    html: `<meta charset="utf-8">${markdownRenderer.render(markdown)}`,
+  };
+}
+
+export async function writeMarkdownToRichClipboard(
+  markdown: string,
+  environment: MarkdownClipboardEnvironment = getDefaultMarkdownClipboardEnvironment(),
+): Promise<void> {
+  if (environment.richWriter?.supportsHtml()) {
+    const content = createMarkdownClipboardContent(markdown);
+    try {
+      await environment.richWriter.write({
+        "text/plain": new Blob([content.plainText], { type: "text/plain" }),
+        "text/html": new Blob([content.html], { type: "text/html" }),
+      });
+      return;
+    } catch {
+      // Fall through to the plain-text path. Some webviews expose rich clipboard
+      // APIs but deny writes depending on focus, permissions, or browser policy.
+    }
+  }
+
+  await environment.writePlainText(markdown);
+}
+
+function getDefaultMarkdownClipboardEnvironment(): MarkdownClipboardEnvironment {
+  return {
+    richWriter: getWebRichClipboardWriter(),
+    writePlainText: (text) => Clipboard.setStringAsync(text),
+  };
+}
+
+function getWebRichClipboardWriter(): RichClipboardWriter | null {
+  if (!isWeb) {
+    return null;
+  }
+  if (typeof navigator === "undefined" || typeof navigator.clipboard?.write !== "function") {
+    return null;
+  }
+  if (typeof ClipboardItem === "undefined") {
+    return null;
+  }
+
+  return {
+    supportsHtml: () =>
+      typeof ClipboardItem.supports !== "function" || ClipboardItem.supports("text/html"),
+    write: async (data) => {
+      await navigator.clipboard.write([new ClipboardItem(data)]);
+    },
+  };
+}