fix(app): apply clipboard syntax at selection boundaries

Selections contained inside formatting copy only their visible content. Preserve Markdown syntax when the range includes or crosses the semantic element, while retaining list and table structure needed to serialize child boundaries.

packages/app/e2e/browser/assistant-selection-copy.spec.ts

@@ -118,11 +118,18 @@ async function selectAssistantText(page: Page, text: string): Promise<void> {
   await selectAssistantTextRange(page, text, text);
 }
 
-async function doubleClickAssistantText(page: Page, text: string): Promise<void> {
+async function doubleClickAssistantMarkdownText(
+  page: Page,
+  tag: "code" | "strong",
+  text: string,
+): Promise<void> {
   const assistantMessage = page.getByTestId("assistant-message").filter({
     hasText: "Direct matches:",
   });
-  await assistantMessage.getByText(text, { exact: true }).dblclick();
+  await assistantMessage
+    .locator(`[data-paseo-markdown-tag="${tag}"]`)
+    .filter({ hasText: text })
+    .dblclick({ position: { x: 5, y: 5 } });
 }
 
 async function selectAssistantTextRange(
@@ -333,13 +340,20 @@ test("copying an assistant selection preserves Markdown structure and links", as
     expect(clipboard.html).toContain('<th style="text-align:right">Right</th>');
     expect(clipboard.html).toContain('<th style="text-align:center">Center</th>');
 
-    await doubleClickAssistantText(page, "apply_patch");
+    await doubleClickAssistantMarkdownText(page, "code", "apply_patch");
     await copySelection(page);
 
     const doubleClickedCodeClipboard = await readRichClipboard(page);
     expect(doubleClickedCodeClipboard.plainText).toBe("apply_patch");
     expect(doubleClickedCodeClipboard.html).not.toContain("<code>");
 
+    await doubleClickAssistantMarkdownText(page, "strong", "strong prose");
+    await copySelection(page);
+
+    const doubleClickedBoldClipboard = await readRichClipboard(page);
+    expect(doubleClickedBoldClipboard.plainText).toBe("strong");
+    expect(doubleClickedBoldClipboard.html).not.toContain("<strong>");
+
     await selectAssistantTextRange(
       page,
       "P1 — High-value UI behavior",
@@ -395,30 +409,21 @@ test("copying an assistant selection preserves Markdown structure and links", as
     await copySelection(page);
 
     const titledLinkClipboard = await readRichClipboard(page);
-    expect(titledLinkClipboard.plainText).toBe('[docs](https://docs.example.com "Reference")');
-    expect(titledLinkClipboard.html).toContain(
-      '<a href="https://docs.example.com/" title="Reference">docs</a>',
-    );
+    expect(titledLinkClipboard.plainText).toBe("docs");
+    expect(titledLinkClipboard.html).not.toContain("<a ");
 
     await selectAssistantText(page, "https://autolink.example.com");
     await copySelection(page);
 
     const autolinkClipboard = await readRichClipboard(page);
-    expect(autolinkClipboard.plainText).toBe(
-      "[https://autolink.example.com](https://autolink.example.com)",
-    );
-    expect(autolinkClipboard.html).toContain(
-      '<a href="https://autolink.example.com/">https://autolink.example.com</a>',
-    );
+    expect(autolinkClipboard.plainText).toBe("https://autolink.example.com");
 
     await selectAssistantText(page, "workspace file");
     await copySelection(page);
 
     const fileLinkClipboard = await readRichClipboard(page);
-    expect(fileLinkClipboard.plainText).toBe("[workspace file](file:///tmp/paseo%20notes.md#L4)");
-    expect(fileLinkClipboard.html).toContain(
-      '<a href="file:///tmp/paseo%20notes.md#L4">workspace file</a>',
-    );
+    expect(fileLinkClipboard.plainText).toBe("workspace file");
+    expect(fileLinkClipboard.html).not.toContain("<a ");
 
     await selectAssistantTextRange(page, "Seventh item", "Eighth item");
     await copySelection(page);

packages/app/src/assistant-selection-copy/content.browser.test.ts

@@ -155,15 +155,19 @@ describe("assistant selection copy ranges", () => {
     },
   );
 
-  it("retains strong delimiters when its complete contents are selected", () => {
-    const message = mountFixture();
-    const element = fixtureElement(message, '[data-paseo-markdown-tag="strong"]');
-    const content = createAssistantSelectionClipboardContent(
-      selectText(element, 0, textNode(element).length),
-    );
-    expect(content?.plainText).toBe("**bold text**");
-    expect(content?.html).toContain("<strong>");
-  });
+  it.each(["strong", "em", "s", "h2", "blockquote"])(
+    "copies all content selected from inside a %s element without its syntax",
+    (tag) => {
+      const message = mountFixture();
+      const element = fixtureElement(message, '[data-paseo-markdown-tag="strong"]');
+      element.setAttribute("data-paseo-markdown-tag", tag);
+      const content = createAssistantSelectionClipboardContent(
+        selectText(element, 0, textNode(element).length),
+      );
+      expect(content?.plainText).toBe("bold text");
+      expect(content?.html).not.toContain(`<${tag}>`);
+    },
+  );
 
   it("copies complete inline code without delimiters when the selection stays inside", () => {
     const message = mountFixture();

packages/app/src/assistant-selection-copy/content.web.ts

@@ -278,6 +278,13 @@ function shouldPreserveSemanticElement(range: Range, element: Element): boolean
   if (tag === "p" || isTableStructure(tag)) {
     return true;
   }
+  const isSelectableSemantic = tag !== null && tag !== "ol" && tag !== "ul";
+  if (
+    (isSelectableSemantic || element.tagName === "A") &&
+    selectionStaysInsideElement(range, element)
+  ) {
+    return false;
+  }
   if (tag === "ol" || tag === "ul") {
     const selectedItems = selectedListItems(element, range);
     return selectedItems.some((item) => hasSelectedAllContents(range, item, true));
@@ -285,6 +292,15 @@ function shouldPreserveSemanticElement(range: Range, element: Element): boolean
   return hasSelectedAllContents(range, element, tag === "li");
 }
 
+function selectionStaysInsideElement(range: Range, element: Element): boolean {
+  return (
+    range.startContainer !== element &&
+    range.endContainer !== element &&
+    element.contains(range.startContainer) &&
+    element.contains(range.endContainer)
+  );
+}
+
 function selectedListItems(list: Element, range: Range): Element[] {
   return Array.from(list.children).filter(
     (child) =>