fix(session-ui): keep Markdown text selectable (#53665)

Co-authored-by: Brendonovich <14191578+Brendonovich@users.noreply.github.com>

packages/gui-extensions/src/file/artifact-view.tsx

@@ -444,7 +444,7 @@ function ArtifactMarkdown(props: { session: MountedSession; path: string; text:
       openLocalFile={(href) => void links.open({ href, base: dir(), session: props.session })}
     >
       <div class="mx-auto w-full max-w-3xl px-8 py-6">
-        <Markdown text={props.text} cacheKey={props.cacheKey} class="select-text" />
+        <Markdown text={props.text} cacheKey={props.cacheKey} />
       </div>
     </MarkdownProvider>
   )
@@ -454,7 +454,7 @@ function ArtifactMarkdown(props: { session: MountedSession; path: string; text:
 function ArtifactMermaid(props: { text: string; cacheKey?: string }) {
   return (
     <div class="mx-auto w-full max-w-4xl px-8 py-6">
-      <Markdown text={`\`\`\`mermaid\n${props.text}\n\`\`\``} cacheKey={props.cacheKey} class="select-text" />
+      <Markdown text={`\`\`\`mermaid\n${props.text}\n\`\`\``} cacheKey={props.cacheKey} />
     </div>
   )
 }

packages/session-ui/component-tests/markdown.spec.ts

@@ -36,6 +36,17 @@ story("renders small completed Markdown immediately without skipping sanitizatio
   await expect(harness.locator("pre.shiki")).toBeVisible()
 })
 
+story("keeps Markdown text selectable inside a container that disables selection", async ({ page }) => {
+  await page.evaluate(async (fixture) => {
+    document.body.style.userSelect = "none"
+    const { mountMarkdown } = await import(fixture)
+    await mountMarkdown({ text: "Selectable answer text" })
+  }, fixture)
+
+  await page.getByTestId("markdown-fixture").getByText("Selectable answer text").click({ clickCount: 3 })
+  expect(await page.evaluate(() => getSelection()?.toString().trim())).toBe("Selectable answer text")
+})
+
 story("sanitizes raw HTML while preserving supported Markdown markup", async ({ page }) => {
   const result = await page.evaluate(async (fixture) => {
     const { sanitizeMarkdown } = await import(fixture)

packages/session-ui/src/components/markdown.css

@@ -15,6 +15,9 @@
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base); /* 14px */
   line-height: 160%;
+  /* Shells such as the app's turn off selection for chrome; Markdown is content, so it stays selectable. */
+  -webkit-user-select: text;
+  user-select: text;
 
   [data-markdown-word] {
     display: inline;