fix: split autolinks at CJK punctuation (#327)

* fix: split autolinks at CJK punctuation

* chore: clarify CJK autolink boundary

Author: xxchan

.changeset/spicy-lizards-move.md

@@ -0,0 +1,5 @@
+---
+"streamdown": patch
+---
+
+Fix autolink parsing to stop at CJK punctuation boundaries.

packages/streamdown/__tests__/cjk-friendly.test.tsx

@@ -1,4 +1,5 @@
 import { render } from "@testing-library/react";
+import remarkGfm from "remark-gfm";
 import { describe, expect, it } from "vitest";
 import { Streamdown } from "../index";
 
@@ -235,6 +236,27 @@ describe("CJK (Chinese, Japanese, Korean) Friendly Support (#185)", () => {
       expect(link?.textContent).toContain("日本語のリンク");
     });
 
+    it("splits autolinks at CJK punctuation", () => {
+      const autolinkContent = "请访问 https://example.com。谢谢";
+      const { container } = render(<Streamdown>{autolinkContent}</Streamdown>);
+
+      const link = container.querySelector('[data-streamdown="link"]');
+      expect(link?.textContent).toBe("https://example.com");
+      expect(link?.getAttribute("href")).toBe("https://example.com/");
+      expect(container.textContent).toBe(autolinkContent);
+    });
+
+    it("keeps default autolink behavior without the CJK boundary plugin", () => {
+      const autolinkContent = "请访问 https://example.com。谢谢";
+      const { container } = render(
+        <Streamdown remarkPlugins={[remarkGfm]}>{autolinkContent}</Streamdown>
+      );
+
+      const link = container.querySelector('[data-streamdown="link"]');
+      expect(link?.textContent).toBe("https://example.com。谢谢");
+      expect(container.textContent).toBe(autolinkContent);
+    });
+
     it("renders inline code near CJK emphasis", () => {
       const inlineContent =
         "**日本語のコード**：`console.log('こんにちは（挨拶）')`";

packages/streamdown/index.tsx

@@ -25,6 +25,7 @@ import type { Pluggable } from "unified";
 import { components as defaultComponents } from "./lib/components";
 import { Markdown, type Options } from "./lib/markdown";
 import { parseMarkdownIntoBlocks } from "./lib/parse-blocks";
+import { remarkCjkAutolinkBoundary } from "./lib/remark/cjk-autolink";
 import { cn } from "./lib/utils";
 import packageJson from "./package.json";
 
@@ -103,6 +104,7 @@ export const defaultRehypePlugins: Record<string, Pluggable> = {
 
 export const defaultRemarkPlugins: Record<string, Pluggable> = {
   gfm: [remarkGfm, {}],
+  cjkAutolinkBoundary: [remarkCjkAutolinkBoundary, {}],
   math: [remarkMath, { singleDollarTextMath: false }],
   cjkFriendly: [remarkCjkFriendly, {}],
   cjkFriendlyGfmStrikethrough: [remarkCjkFriendlyGfmStrikethrough, {}],

packages/streamdown/lib/remark/cjk-autolink.ts

@@ -0,0 +1,97 @@
+import type { Link, Root, Text } from "mdast";
+import type { Plugin } from "unified";
+import { visit } from "unist-util-visit";
+import type { Parent } from "unist";
+
+const CJK_AUTOLINK_BOUNDARY_CHARS = new Set<string>([
+  "。",
+  "．",
+  "，",
+  "、",
+  "？",
+  "！",
+  "：",
+  "；",
+  "（",
+  "）",
+  "【",
+  "】",
+  "「",
+  "」",
+  "『",
+  "』",
+  "〈",
+  "〉",
+  "《",
+  "》",
+]);
+
+const AUTOLINK_PREFIX_PATTERN = /^(https?:\/\/|mailto:|www\.)/i;
+
+const isAutolinkLiteral = (node: Link): node is Link & { children: [Text] } => {
+  if (node.children.length !== 1) {
+    return false;
+  }
+
+  const child = node.children[0];
+  return child.type === "text" && child.value === node.url;
+};
+
+const findCjkBoundaryIndex = (url: string): number | null => {
+  let index = 0;
+  for (const char of url) {
+    if (CJK_AUTOLINK_BOUNDARY_CHARS.has(char)) {
+      return index;
+    }
+    index += char.length;
+  }
+  return null;
+};
+
+const buildAutolink = (url: string, source: Link): Link => ({
+  ...source,
+  url,
+  children: [
+    {
+      type: "text",
+      value: url,
+    },
+  ],
+});
+
+const buildTrailingText = (value: string): Text => ({
+  type: "text",
+  value,
+});
+
+// Split literal autolinks at CJK punctuation boundaries so trailing text
+// is not swallowed by the URL.
+export const remarkCjkAutolinkBoundary: Plugin<[], Root> = () => (tree) => {
+  visit(tree, "link", (node: Link, index: number | null, parent?: Parent) => {
+    if (!parent || typeof index !== "number") {
+      return;
+    }
+
+    if (!isAutolinkLiteral(node)) {
+      return;
+    }
+
+    if (!AUTOLINK_PREFIX_PATTERN.test(node.url)) {
+      return;
+    }
+
+    const boundaryIndex = findCjkBoundaryIndex(node.url);
+    if (boundaryIndex === null || boundaryIndex === 0) {
+      return;
+    }
+
+    const trimmedUrl = node.url.slice(0, boundaryIndex);
+    const trailing = node.url.slice(boundaryIndex);
+
+    const trimmedLink = buildAutolink(trimmedUrl, node);
+    const trailingText = buildTrailingText(trailing);
+
+    parent.children.splice(index, 1, trimmedLink, trailingText);
+    return index + 1;
+  });
+};