From 83f205bd3d275f869a6f79afb123ab67f2384971 Mon Sep 17 00:00:00 2001
From: Mohamed Boudra <boudra.moha@gmail.com>
Date: Sun, 24 May 2026 12:10:09 +0800
Subject: [PATCH] Preserve assistant message formatting on copy

---
 package-lock.json                             | 27 ++++++
 packages/app/package.json                     |  2 +
 packages/app/src/components/message.tsx       |  4 +-
 packages/app/src/utils/rich-clipboard.test.ts | 97 +++++++++++++++++++
 packages/app/src/utils/rich-clipboard.ts      | 81 ++++++++++++++++
 5 files changed, 209 insertions(+), 2 deletions(-)
 create mode 100644 packages/app/src/utils/rich-clipboard.test.ts
 create mode 100644 packages/app/src/utils/rich-clipboard.ts

diff --git a/package-lock.json b/package-lock.json
index 886e54871..07a05ec58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12358,6 +12358,24 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -12367,6 +12385,13 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -36348,6 +36373,7 @@
         "expo-updates": "~29.0.12",
         "fast-deep-equal": "^3.1.3",
         "lucide-react-native": "^0.546.0",
+        "markdown-it": "^10.0.0",
         "mnemonic-id": "^3.2.7",
         "qrcode": "^1.5.4",
         "react": "19.1.0",
@@ -36375,6 +36401,7 @@
       "devDependencies": {
         "@playwright/test": "^1.56.1",
         "@testing-library/react": "^16.3.2",
+        "@types/markdown-it": "^14.1.2",
         "@types/qrcode": "^1.5.6",
         "@types/react": "~19.2.0",
         "@types/ws": "^8.18.1",
diff --git a/packages/app/package.json b/packages/app/package.json
index ca17374d7..3302620f4 100644
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -76,6 +76,7 @@
     "expo-updates": "~29.0.12",
     "fast-deep-equal": "^3.1.3",
     "lucide-react-native": "^0.546.0",
+    "markdown-it": "^10.0.0",
     "mnemonic-id": "^3.2.7",
     "qrcode": "^1.5.4",
     "react": "19.1.0",
@@ -103,6 +104,7 @@
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@testing-library/react": "^16.3.2",
+    "@types/markdown-it": "^14.1.2",
     "@types/qrcode": "^1.5.6",
     "@types/react": "~19.2.0",
     "@types/ws": "^8.18.1",
diff --git a/packages/app/src/components/message.tsx b/packages/app/src/components/message.tsx
index 5cf4f99a0..3b96077ec 100644
--- a/packages/app/src/components/message.tsx
+++ b/packages/app/src/components/message.tsx
@@ -62,7 +62,6 @@ import Animated, {
 import Svg, { Defs, LinearGradient as SvgLinearGradient, Rect, Stop } from "react-native-svg";
 import { createMarkdownStyles } from "@/styles/markdown-styles";
 import { Fonts } from "@/constants/theme";
-import * as Clipboard from "expo-clipboard";
 import type { TodoEntry, UserMessageImageAttachment } from "@/types/stream";
 import type { AgentAttachment } from "@server/shared/messages";
 import type { ToolCallDetail } from "@server/server/agent/agent-sdk-types";
@@ -73,6 +72,7 @@ import { useStableEvent } from "@/hooks/use-stable-event";
 import { HighlightedCodeBlock } from "@/components/highlighted-code-block";
 import { splitMarkdownBlocks } from "@/utils/split-markdown-blocks";
 import { formatDuration, formatMessageTimestamp } from "@/utils/time";
+import { writeMarkdownToRichClipboard } from "@/utils/rich-clipboard";
 import {
   getAssistantImageLoadStateFromMetadata,
   getAssistantImageMetadata,
@@ -1117,7 +1117,7 @@ export const TurnCopyButton = memo(function TurnCopyButton({
       return;
     }
 
-    await Clipboard.setStringAsync(content);
+    await writeMarkdownToRichClipboard(content);
     setCopied(true);
 
     if (copyTimeoutRef.current) {
diff --git a/packages/app/src/utils/rich-clipboard.test.ts b/packages/app/src/utils/rich-clipboard.test.ts
new file mode 100644
index 000000000..b204f3786
--- /dev/null
+++ b/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**");
+  });
+});
diff --git a/packages/app/src/utils/rich-clipboard.ts b/packages/app/src/utils/rich-clipboard.ts
new file mode 100644
index 000000000..bd0a826e7
--- /dev/null
+++ b/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)]);
+    },
+  };
+}