fix(web): keep a document link inline in the coordinator's sentence

Author: TheGreatAxios

apps/web/src/markdown.tsx

@@ -73,15 +73,20 @@ function inline(
       const href = match[5].replace(MARKS, "");
       if (href.startsWith(DOCUMENT_LINK) && openDocument !== undefined) {
         const id = decodeURIComponent(href.slice(DOCUMENT_LINK.length));
+        // A link rather than a button: a button never breaks across lines, so a
+        // title in a sentence would jump to its own line and shed its punctuation.
         out.push(
-          <button
+          <a
             key={key}
-            type="button"
+            href="#"
             className="artifact-mention"
-            onClick={() => openDocument(id)}
+            onClick={(event) => {
+              event.preventDefault();
+              openDocument(id);
+            }}
           >
             {label}
-          </button>,
+          </a>,
         );
       } else if (href.startsWith("https://") || href.startsWith("http://")) {
         out.push(

apps/web/src/pages/workspace-layout.css

@@ -145,19 +145,9 @@
 }
 
 .artifact-mention {
-  display: inline-flex;
-  align-items: center;
-  min-height: 44px;
-  min-width: 44px;
-  margin: 0;
-  padding: 0 var(--space-1);
-  border: 0;
-  background: transparent;
   color: var(--wb-foreground);
-  font: inherit;
   text-decoration: underline;
   text-underline-offset: 0.15em;
-  cursor: pointer;
 }
 
 .artifact-mention:focus-visible {

apps/web/src/pages/workspace/print-document.ts

@@ -1,6 +1,6 @@
 const SHEET_CLASS = "print-sheet";
-// Controls and selection affordances stay on screen; a document mention prints as its text.
-const SCREEN_ONLY = ".pane-bar, .passage-offer, button:not(.artifact-mention)";
+// Controls and selection affordances stay on screen.
+const SCREEN_ONLY = ".pane-bar, .passage-offer, button";
 
 /**
  * Prints the document a pane shows through the browser's dialog, whose "Save as PDF"

apps/web/src/pages/workspace/transcript.test.tsx

@@ -6,6 +6,7 @@ import {
   maxTurnText,
 } from "@corbits-builder/schemas/conversation";
 import { wording } from "../../config.ts";
+import { Markdown } from "../../markdown.tsx";
 import { DocumentDecision } from "./document-decision.tsx";
 import {
   awaitingCommit,
@@ -96,6 +97,44 @@ describe("conversation transcript", () => {
     expect(html).not.toContain("sha256");
   });
 
+  test("a bold document name stays a link inside its sentence and still opens", () => {
+    const source =
+      "Already written into **Ways to build your list**. What the app does is next.";
+    const documents = [{ id: "approaches", title: "Ways to build your list" }];
+    const html = renderToStaticMarkup(
+      <RoomThread
+        turns={[{ role: "assistant", text: source, at: 2 }]}
+        documents={documents}
+        onOpenDocument={() => {}}
+      />,
+    );
+    // A link, not a button: a button is one unbreakable box, so the title would leave the line.
+    expect(html).toContain(
+      'into <strong><a href="#" class="artifact-mention">Ways to build your list</a></strong>. What',
+    );
+
+    const opened: string[] = [];
+    const link = findElement(
+      Markdown({
+        source: "See [Ways to build your list](document:approaches).",
+        openDocument: (id) => opened.push(id),
+      }),
+      "a",
+    );
+    let prevented = false;
+    (
+      link?.props["onClick"] as
+        | ((event: { preventDefault(): void }) => void)
+        | undefined
+    )?.({
+      preventDefault: () => {
+        prevented = true;
+      },
+    });
+    expect(opened).toEqual(["approaches"]);
+    expect(prevented).toBe(true);
+  });
+
   test("an approval asks about the document in words", () => {
     const html = renderToStaticMarkup(
       <RoomThread