- {/* break-words: long unbroken strings like attachment paths/long URLs wrap within the bubble on narrow (mobile) screens instead of overflowing. */}
-
+ {/* wrap-anywhere: long unbroken strings like attachment paths/long URLs wrap within the bubble on narrow (mobile) screens instead of overflowing; unlike break-words it also shrinks min-content, so a pathological token can't stretch the flex bubble itself. Normal words still only break when a token can't fit on a line. */}
+
{text}
diff --git a/packages/web/src/styles.css b/packages/web/src/styles.css
index 363f09b..18d958d 100644
--- a/packages/web/src/styles.css
+++ b/packages/web/src/styles.css
@@ -353,10 +353,20 @@
}
.md-body a {
@apply text-brand-700 underline decoration-brand-300 underline-offset-2 transition-colors hover:text-brand-600 dark:text-brand-300 dark:decoration-brand-700;
+ /* `anywhere` rather than `word-break: break-all`: it only breaks a token that would otherwise
+ overflow, so long URLs wrap cleanly (filling each line) while short Latin words in mixed
+ CJK/Latin link text never split mid-word; unlike `break-word` it also counts the break
+ opportunities toward min-content sizing, so a long link can't blow out flex/table layouts. */
+ overflow-wrap: anywhere;
}
.md-body code {
@apply rounded bg-gray-100 px-1 py-0.5 text-[0.85em] text-gray-800 dark:bg-gray-800 dark:text-gray-200;
}
+/* Inline code in prose often holds long unbroken paths/identifiers: same rationale as the link
+ rule above (fenced blocks are excluded — .md-body pre scrolls horizontally instead). */
+.md-body :not(pre) > code {
+ overflow-wrap: anywhere;
+}
.md-body pre {
@apply overflow-x-auto rounded-lg border border-gray-200 bg-gray-50 p-3 text-sm dark:border-gray-800 dark:bg-gray-900;
/* Off-screen code blocks skip layout/paint: with several settled 200KB+ replies in the
@@ -396,6 +406,10 @@ html.dark .shiki span {
}
.md-body table {
border-collapse: collapse;
+ /* Same rule as docs (packages/docs/src/styles.css): a wide table scrolls horizontally inside
+ the message body instead of pushing the whole page wide. */
+ display: block;
+ overflow-x: auto;
}
.md-body :is(th, td) {
@apply border border-gray-200 px-2 py-1 text-sm dark:border-gray-800;
diff --git a/packages/web/test/md.test.ts b/packages/web/test/md.test.ts
new file mode 100644
index 0000000..80c79cd
--- /dev/null
+++ b/packages/web/test/md.test.ts
@@ -0,0 +1,74 @@
+/**
+ * Md (chat markdown) rendering contract, via react-dom/server static markup (node env, no DOM):
+ * - every link — explicit [text](url), bare autolinked URL (remark-gfm), relative or #anchor —
+ * opens in a new tab: target="_blank" + rel="noreferrer" (a chat link must never navigate the
+ * SPA away from the live conversation);
+ * - fenced code still routes through the module-scope pre override into CodeBlock (its chrome
+ * renders; Shiki only loads in an effect, which static markup never runs).
+ */
+import { describe, expect, it } from "vitest";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Md } from "../src/features/chat/md";
+
+const render = (text: string, streaming = false) =>
+ renderToStaticMarkup(createElement(Md, { text, streaming }));
+
+/** All rendered
opening tags. */
+const anchors = (html: string) => html.match(/]*>/g) ?? [];
+
+const expectNewTab = (tag: string | undefined) => {
+ expect(tag).toContain('target="_blank"');
+ expect(tag).toContain('rel="noreferrer"');
+};
+
+describe("Md links", () => {
+ it("explicit markdown links open in a new tab", () => {
+ const html = render("See [the docs](https://example.com/docs) for details.");
+ const tags = anchors(html);
+ expect(tags).toHaveLength(1);
+ expect(tags[0]).toContain('href="https://example.com/docs"');
+ expectNewTab(tags[0]);
+ expect(html).toContain(">the docs");
+ });
+
+ it("bare autolinked URLs in CJK prose open in a new tab", () => {
+ const html = render("前往 https://example.com/a/very/long/path 查看结果。");
+ const tags = anchors(html);
+ expect(tags).toHaveLength(1);
+ expect(tags[0]).toContain('href="https://example.com/a/very/long/path"');
+ expectNewTab(tags[0]);
+ });
+
+ it('preserves the markdown link title from [text](url "title")', () => {
+ const html = render('Read [docs](https://example.com "API docs") first.');
+ const tags = anchors(html);
+ expect(tags).toHaveLength(1);
+ expect(tags[0]).toContain('href="https://example.com"');
+ expect(tags[0]).toContain('title="API docs"');
+ expectNewTab(tags[0]);
+ });
+
+ it("relative and #anchor hrefs also open in a new tab (never SPA-navigate)", () => {
+ const html = render("[rel](./file.md) and [frag](#section)");
+ const tags = anchors(html);
+ expect(tags).toHaveLength(2);
+ for (const tag of tags) expectNewTab(tag);
+ });
+
+ it("applies in both streaming and settled component maps", () => {
+ for (const streaming of [true, false]) {
+ const tags = anchors(render("[x](https://example.com/)", streaming));
+ expect(tags).toHaveLength(1);
+ expectNewTab(tags[0]);
+ }
+ });
+});
+
+describe("Md code blocks", () => {
+ it("fenced code still renders through the CodeBlock pre override", () => {
+ const html = render("```js\nconst a = 1;\n```");
+ expect(html).toContain("code-block"); // CodeBlock chrome wrapper class
+ expect(html).toContain("const a = 1;");
+ });
+});