fix(app): keep line breaks and indentation in copied code (#2935)

* fix(app): keep line breaks and indentation in copied code #2930 strips the pre/code tags from a partly selected code block, which is right for the Markdown syntax but leaves the code itself going through Turndown as prose. Turndown collapses whitespace, so two selected lines arrive as one, the indentation is gone, and Markdown-significant characters come back escaped. Divert a partial code selection before that: copy the selected text verbatim. Fully selected regions are untouched and still produce a fence, which is what hasSelectedAllContents was already deciding. The html half needs pre for anything multi-line -- HTML collapses newlines too, so a rich paste target would lose the lines the same way. A single line stays undecorated, matching the rule that a partial selection does not carry its container's formatting. Two trailing-newline fixes ride along, since both make a paste run code nobody asked to run. Newlines between rendered lines are their own text nodes, so a selection that overshoots the end of a line carries one; strip it. The block's Copy button was handed the raw fence body, which ends in a newline; hand it the rendered text instead. * fix(app): strip every trailing blank line from copied code The Copy button stripped one trailing newline, so a fence whose author left a blank line before the closing delimiter still put an executable newline on the clipboard. Pasting that into a terminal runs the last line, which is the thing the strip existed to prevent. Both copy paths now share one regex in markup.ts and remove every trailing break, plus any indentation that followed the last one. Reported by Greptile on #2935. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(app): infer code copy format from selection boundary --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Mohamed Boudra <boudra.moha@gmail.com>
2026-08-06 11:27:38 +00:00
parent 2298e9efdf
commit e99eb7de3d
7 changed files with 528 additions and 14 deletions
@@ -36,6 +36,14 @@ const ASSISTANT_MARKDOWN = [
  "",
  "```typescript",
  'const answer = "yes";',
+  "  return answer;",
+  "```",
+  "",
+  "After code.",
+  "",
+  "```bash",
+  "echo trailing",
+  "",
  "```",
  "",
  "````text",
@@ -52,10 +60,14 @@ const ASSISTANT_MARKDOWN = [
 const EXPECTED_WHOLE_SELECTION_MARKDOWN = ASSISTANT_MARKDOWN.replace(
  "<https://autolink.example.com>",
  "[https://autolink.example.com](https://autolink.example.com)",
-).replace(
-  "3. Outer three\n\n   7. Inner seven\n   8. Inner eight\n   9. Inner nine",
-  "3. Outer three\n    7. Inner seven\n    8. Inner eight\n    9. Inner nine",
-);
+)
+  .replace(
+    "3. Outer three\n\n   7. Inner seven\n   8. Inner eight\n   9. Inner nine",
+    "3. Outer three\n    7. Inner seven\n    8. Inner eight\n    9. Inner nine",
+  )
+  // Rendering drops the blank line before a closing fence, so copying cannot bring it
+  // back. The fence is here to cover a body that ends in more than one newline.
+  .replace("```bash\necho trailing\n\n```", "```bash\necho trailing\n```");

 interface ClipboardContent {
  html: string;
@@ -80,6 +92,19 @@ async function selectAssistantMessage(page: Page): Promise<void> {
  });
 }

+async function selectAssistantElement(page: Page, selector: string): Promise<void> {
+  const assistantMessage = page.getByTestId("assistant-message").filter({
+    hasText: "Direct matches:",
+  });
+  await assistantMessage.locator(selector).evaluate((element) => {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  });
+}
+
 async function selectAssistantText(page: Page, text: string): Promise<void> {
  await selectAssistantTextRange(page, text, text);
 }
@@ -134,10 +159,66 @@ async function selectAssistantTextRange(
  );
 }

+/**
+ * Select from `startText` into the middle of the next rendered code line.
+ *
+ * Highlighted code splits a line across one text node per syntax token and puts the
+ * newline in a node of its own, so this is a partial selection that crosses a line
+ * break — the shape whose whitespace Turndown would collapse.
+ */
+async function selectAssistantAcrossCodeLines(
+  page: Page,
+  startText: string,
+  endText: string,
+): Promise<void> {
+  const assistantMessage = page.getByTestId("assistant-message").filter({
+    hasText: "Direct matches:",
+  });
+  await assistantMessage.evaluate(
+    (element, selectedRange) => {
+      const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+      let startNode: Node | null = null;
+      let startOffset = -1;
+      let textNode = walker.nextNode();
+      while (textNode) {
+        if (!startNode) {
+          const offset = textNode.textContent?.indexOf(selectedRange.startText) ?? -1;
+          if (offset >= 0) {
+            startNode = textNode;
+            startOffset = offset;
+          }
+          textNode = walker.nextNode();
+          continue;
+        }
+        const endOffset = textNode.textContent?.indexOf(selectedRange.endText) ?? -1;
+        if (endOffset >= 0) {
+          const range = document.createRange();
+          range.setStart(startNode, startOffset);
+          range.setEnd(textNode, endOffset + selectedRange.endText.length);
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+          selection?.addRange(range);
+          return;
+        }
+        textNode = walker.nextNode();
+      }
+      throw new Error(
+        `Could not find a code range: ${selectedRange.startText} — ${selectedRange.endText}`,
+      );
+    },
+    { startText, endText },
+  );
+}
+
 async function copySelection(page: Page): Promise<void> {
  await page.keyboard.press("ControlOrMeta+c");
 }

+/** The Copy button writes text/plain only, so the rich reader would throw on it. */
+async function readPlainClipboard(page: Page): Promise<string> {
+  return page.evaluate(() => navigator.clipboard.readText());
+}
+
 async function readRichClipboard(page: Page): Promise<ClipboardContent> {
  return page.evaluate(async () => {
    const items = await navigator.clipboard.read();
@@ -329,6 +410,60 @@ test("copying an assistant selection preserves Markdown structure and links", as
    expect(columnSliceClipboard.html).not.toContain("<table>");
    expect(columnSliceClipboard.html).toContain("ready");
    expect(columnSliceClipboard.html).toContain("<s>obsolete</s>");
+
+    // A partial selection loses its `pre` wrapper, so the code reaches Turndown as
+    // prose unless it is diverted first: the line break and the indentation go, and
+    // Markdown-significant characters get escaped.
+    await selectAssistantAcrossCodeLines(page, "const", "return");
+    await copySelection(page);
+
+    const codeLinesClipboard = await readRichClipboard(page);
+    expect(codeLinesClipboard.plainText).toBe('const answer = "yes";\n  return');
+    expect(codeLinesClipboard.html).toContain('<pre><code class="language-typescript">');
+
+    // Selecting inside code expresses an intent to copy code, even when the selection
+    // contains every character in the block.
+    await selectAssistantElement(
+      page,
+      '[data-paseo-markdown-language="typescript"] [data-paseo-markdown-tag="code"]',
+    );
+    await copySelection(page);
+
+    const completeCodeClipboard = await readRichClipboard(page);
+    expect(completeCodeClipboard.plainText).toBe('const answer = "yes";\n  return answer;');
+
+    // Crossing the block boundary expresses an intent to carry its Markdown structure.
+    await selectAssistantAcrossCodeLines(page, "const", "After code.");
+    await copySelection(page);
+
+    const crossedCodeClipboard = await readRichClipboard(page);
+    expect(crossedCodeClipboard.plainText).toBe(
+      '```typescript\nconst answer = "yes";\n  return answer;\n```\n\nAfter code.',
+    );
+
+    // Selecting a whole line runs off its end into the newline node. A trailing
+    // newline auto-executes the line when it is pasted into a terminal.
+    await selectAssistantAcrossCodeLines(page, "const", "  ");
+    await copySelection(page);
+
+    expect((await readRichClipboard(page)).plainText).toBe('const answer = "yes";');
+
+    // The block's own Copy button had the same hazard: a Markdown fence body ends in
+    // a newline, and the button copied it raw.
+    const typescriptFence = assistantMessage.locator('[data-paseo-markdown-language="typescript"]');
+    // The button is opacity 0 / pointerEvents none until the fence is hovered.
+    await typescriptFence.hover();
+    await typescriptFence.locator("[data-paseo-markdown-ignore]").click();
+
+    expect(await readPlainClipboard(page)).toBe('const answer = "yes";\n  return answer;');
+
+    // A blank line before the closing fence leaves the body ending in two newlines,
+    // so stripping only the terminal one still hands the terminal an executable line.
+    const bashFence = assistantMessage.locator('[data-paseo-markdown-language="bash"]');
+    await bashFence.hover();
+    await bashFence.locator("[data-paseo-markdown-ignore]").click();
+
+    expect(await readPlainClipboard(page)).toBe("echo trailing");
  } finally {
    await agent.cleanup();
  }