fix(message-editor): stop pasted CSS and escapes leaking into composer (#3089)

Author: jonathanlab

packages/ui/src/features/message-editor/utils/htmlToMarkdown.test.ts

@@ -36,4 +36,42 @@ describe("htmlToMarkdown", () => {
     expect(htmlToMarkdown("")).toBeNull();
     expect(htmlToMarkdown("<p></p>")).toBeNull();
   });
+
+  it.each([
+    ["ordered-list-style numbers", "1. First 2. Second"],
+    ["underscores in identifiers", "call snake_case_name here"],
+    ["square brackets", "an array like arr[0] and [x]"],
+    ["leading hash and dash", "# not a heading - not a bullet"],
+  ])(
+    "does not backslash-escape plain text (%s), so it defers to native paste",
+    (_, text) => {
+      // Plain punctuation must not be mangled into "1\\.", "snake\\_case", etc.
+      // When it stays intact it equals the plain-text fallback and returns null.
+      expect(htmlToMarkdown(`<span>${text}</span>`, text)).toBeNull();
+    },
+  );
+
+  it("strips macOS <style> clipboard blocks instead of leaking CSS as text", () => {
+    // Shape of the text/html macOS puts on the clipboard when copying rich
+    // text from native apps. The CSS must not survive into the paste.
+    const html = [
+      '<meta charset="utf-8">',
+      "<style>",
+      "<!--",
+      "p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Helvetica}",
+      "-->",
+      "</style>",
+      '<p class="p1">Yo dude</p>',
+    ].join("\n");
+    // No formatting beyond the plain text once the CSS is gone, so it defers.
+    expect(htmlToMarkdown(html, "Yo dude")).toBeNull();
+    expect(htmlToMarkdown(html)).toBe("Yo dude");
+  });
+
+  it("preserves real formatting without escaping surrounding punctuation", () => {
+    const html = "<p>See <strong>item_1.</strong> in arr[0]</p>";
+    expect(htmlToMarkdown(html, "See item_1. in arr[0]")).toBe(
+      "See **item_1.** in arr[0]",
+    );
+  });
 });

packages/ui/src/features/message-editor/utils/htmlToMarkdown.ts

@@ -13,6 +13,18 @@ function getTurndown(): TurndownService {
     emDelimiter: "*",
   });
   turndown.use(gfm); // tables, strikethrough, task lists
+  // Drop non-content elements outright. macOS puts a <style> block in the
+  // clipboard HTML when copying rich text from native apps (Notes, Mail,
+  // Slack), and Turndown would otherwise emit its CSS as text, e.g.
+  // "p.p1 {margin: 0.0px ...; font: 18.0px Helvetica}" before the real text.
+  turndown.remove(["style", "script", "head", "title", "meta", "link"]);
+  // The composer is plain-text, so we only want structural formatting
+  // (headings, lists, links, tables, code) preserved as Markdown. Turndown's
+  // default escaping is meant for round-tripping Markdown and mangles ordinary
+  // text — "1." -> "1\.", "snake_case" -> "snake\_case", "[x]" -> "\[x\]".
+  // Disabling it keeps plain text intact so it also stays equal to the
+  // plain-text fallback below and defers to the editor's native paste.
+  turndown.escape = (text) => text;
   return turndown;
 }