feat(code): paste rich text as Markdown in the composer

apps/code/package.json

@@ -51,10 +51,10 @@
     "@electron-forge/plugin-vite": "^7.11.1",
     "@electron-forge/publisher-github": "^7.11.1",
     "@electron-forge/shared-types": "^7.11.1",
-    "@reforged/maker-appimage": "^5.2.0",
     "@electron/rebuild": "^4.0.3",
     "@playwright/test": "^1.42.0",
     "@posthog/rollup-plugin": "^1.4.0",
+    "@reforged/maker-appimage": "^5.2.0",
     "@storybook/addon-a11y": "10.2.0",
     "@storybook/addon-docs": "10.2.0",
     "@storybook/react-vite": "10.2.0",
@@ -67,6 +67,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@types/semver": "^7.7.1",
+    "@types/turndown": "^5.0.6",
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/ui": "^4.0.10",
     "adm-zip": "^0.5.16",
@@ -118,6 +119,7 @@
     "@codemirror/view": "^6.39.17",
     "@dnd-kit/react": "^0.1.21",
     "@fontsource-variable/inter": "^5.2.8",
+    "@joplin/turndown-plugin-gfm": "^1.0.67",
     "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/ext-apps": "^1.1.2",
@@ -203,6 +205,7 @@
     "tailwind-merge": "^3.5.0",
     "tailwindcss-scroll-mask": "^0.0.3",
     "tippy.js": "^6.3.7",
+    "turndown": "^7.2.4",
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "vscode-icons-js": "^11.6.1",

apps/code/src/renderer/features/message-editor/tiptap/useTiptapEditor.ts

@@ -19,6 +19,7 @@ import {
   type ParsedGithubIssueUrl,
   parseGithubIssueUrl,
 } from "../utils/githubIssueUrl";
+import { htmlToMarkdown } from "../utils/htmlToMarkdown";
 import {
   persistImageFile,
   persistTextContent,
@@ -451,19 +452,24 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
             return true;
           }
 
+          // Editor is plain-text, so preserve pasted formatting as Markdown.
+          const html = event.clipboardData?.getData("text/html");
+          const markdown = html ? htmlToMarkdown(html, clipboardText) : null;
+          const effectiveText = markdown ?? clipboardText;
+
           // Auto-convert long pasted text into a file attachment
           const autoConvertThreshold =
             useFeatureSettingsStore.getState().autoConvertLongText;
           if (
-            clipboardText &&
+            effectiveText &&
             autoConvertThreshold !== "off" &&
-            clipboardText.length > Number(autoConvertThreshold)
+            effectiveText.length > Number(autoConvertThreshold)
           ) {
             event.preventDefault();
 
             (async () => {
               try {
-                await pasteTextAsFile(view, clipboardText, pasteCountRef);
+                await pasteTextAsFile(view, effectiveText, pasteCountRef);
                 showPasteHint(
                   "Pasted as file attachment",
                   "Click the chip to convert back to text.",
@@ -476,6 +482,13 @@ export function useTiptapEditor(options: UseTiptapEditorOptions) {
             return true;
           }
 
+          // Insert inline; ProseMirror would otherwise drop the HTML formatting.
+          if (markdown) {
+            event.preventDefault();
+            view.dispatch(view.state.tr.insertText(markdown, from, to));
+            return true;
+          }
+
           if (clipboardText && clipboardText.length > 200) {
             showPasteHint(
               "Pasted as text",

apps/code/src/renderer/features/message-editor/utils/htmlToMarkdown.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from "vitest";
+import { htmlToMarkdown } from "./htmlToMarkdown";
+
+describe("htmlToMarkdown", () => {
+  it.each([
+    [
+      "headings, emphasis and links",
+      "<h1>Title</h1><p>Some <strong>bold</strong> and <em>italic</em> with a <a href='https://posthog.com'>link</a>.</p>",
+      "# Title\n\nSome **bold** and *italic* with a [link](https://posthog.com).",
+    ],
+    [
+      "unordered lists",
+      "<ul><li>one</li><li>two</li></ul>",
+      "-   one\n-   two",
+    ],
+    [
+      "tables via the gfm plugin",
+      "<table><thead><tr><th>a</th><th>b</th></tr></thead><tbody><tr><td>1</td><td>2</td></tr></tbody></table>",
+      "| a   | b   |\n| --- | --- |\n| 1   | 2   |",
+    ],
+    [
+      "fenced code blocks",
+      "<pre><code>const x = 1;</code></pre>",
+      "```\nconst x = 1;\n```",
+    ],
+  ])("converts %s", (_, html, expected) => {
+    expect(htmlToMarkdown(html)).toBe(expected);
+  });
+
+  it("returns null when there is no formatting beyond the plain-text fallback", () => {
+    const html = "<p>just text</p>";
+    expect(htmlToMarkdown(html, "just text")).toBeNull();
+  });
+
+  it("returns null for empty html", () => {
+    expect(htmlToMarkdown("")).toBeNull();
+    expect(htmlToMarkdown("<p></p>")).toBeNull();
+  });
+});

apps/code/src/renderer/features/message-editor/utils/htmlToMarkdown.ts

@@ -0,0 +1,35 @@
+import { gfm } from "@joplin/turndown-plugin-gfm";
+import TurndownService from "turndown";
+
+let turndown: TurndownService | null = null;
+
+function getTurndown(): TurndownService {
+  if (turndown) return turndown;
+  turndown = new TurndownService({
+    headingStyle: "atx",
+    codeBlockStyle: "fenced",
+    bulletListMarker: "-",
+    emDelimiter: "*",
+  });
+  turndown.use(gfm); // tables, strikethrough, task lists
+  return turndown;
+}
+
+/** Convert clipboard HTML to Markdown. Returns null when it adds nothing over the plain-text fallback. */
+export function htmlToMarkdown(
+  html: string,
+  plainTextFallback?: string,
+): string | null {
+  const markdown = getTurndown().turndown(html).trim();
+  if (!markdown) return null;
+
+  // No formatting beyond the plain text; defer to the default paste.
+  if (
+    plainTextFallback !== undefined &&
+    markdown === plainTextFallback.trim()
+  ) {
+    return null;
+  }
+
+  return markdown;
+}

apps/code/src/renderer/types/joplin-turndown-plugin-gfm.d.ts

@@ -0,0 +1,9 @@
+declare module "@joplin/turndown-plugin-gfm" {
+  import type { Plugin } from "turndown";
+
+  export const gfm: Plugin;
+  export const tables: Plugin;
+  export const strikethrough: Plugin;
+  export const taskListItems: Plugin;
+  export const highlightedCodeBlock: Plugin;
+}