fix(x-markdown): correct streaming cache when list is followed by backtick

流式渲染时，当 list 后紧跟 ` 时只提交列表前缀（如 "- "），将 ` 及后续内容保留在 pending 中识别为 inline-code，使 IncompleteInlineCode 能拿到完整 data-raw；通过 Recognizer.getCommitPrefix 扩展部分提交逻辑，便于后续类似交接场景。

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: Div627

packages/x-markdown/src/XMarkdown/__tests__/hooks.test.tsx

@@ -179,12 +179,12 @@ const streamingTestCases = [
   {
     title: 'incomplete list with inline-code - single backtick',
     input: '- `',
-    output: '', // 实际实现会过滤掉不完整的列表+行内代码
+    output: '- ', // list 已完成并提交，当前 token 为 inline-code（未完成且无组件时不展示）
   },
   {
     title: 'incomplete list with inline-code - partial content',
     input: '- `code',
-    output: '', // 实际实现会过滤掉不完整的列表+行内代码
+    output: '- ', // list 已完成并提交，当前 token 为 inline-code（未完成且无组件时不展示）
   },
   {
     title: 'complete list with inline-code',

packages/x-markdown/src/XMarkdown/hooks/useStreaming.ts

@@ -10,10 +10,20 @@ export interface StreamCache {
   completeMarkdown: string;
 }
 
+/**
+ * When a token is about to be committed, if a non-empty string is returned,
+ * only that prefix is committed and the rest of the pending content is left
+ * for subsequent recognition (used for handover scenarios like list followed by `).
+ * Returns null to commit the entire pending content by default.
+ */
 interface Recognizer {
   tokenType: StreamCacheTokenType;
   isStartOfToken: (markdown: string) => boolean;
   isStreamingValid: (markdown: string) => boolean;
+  /** Optional: prefix for partial commit, useful for extending handover logic
+   * when the current token ends and is immediately followed by the start symbol
+   * of the next token */
+  getCommitPrefix?: (pending: string) => string | null;
 }
 
 /* ------------ Constants ------------ */
@@ -24,12 +34,8 @@ const STREAM_INCOMPLETE_REGEX = {
   link: [/^\[[^\]\r\n]{0,1000}$/, /^\[[^\r\n]{0,1000}\]\(*[^)\r\n]{0,1000}$/],
   html: [/^<\/$/, /^<\/?[a-zA-Z][a-zA-Z0-9-]{0,100}[^>\r\n]{0,1000}$/],
   commonEmphasis: [/^(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/],
-  // regex2 matches cases like "- **"
-  list: [
-    /^[-+*]\s{0,3}$/,
-    /^[-+*]\s{1,3}(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/,
-    /^[-+*]\s{1,3}`[^`\r\n]{0,300}$/,
-  ],
+  // regex2 matches cases like "- **" (list item with emphasis start).
+  list: [/^[-+*]\s{0,3}$/, /^[-+*]\s{1,3}(\*{1,3}|_{1,3})(?!\s)(?!.*\1$)[^\r\n]{0,1000}$/],
   'inline-code': [/^`[^`\r\n]{0,300}$/],
 } as const;
 
@@ -87,6 +93,12 @@ const tokenRecognizerMap: Partial<Record<StreamCacheTokenType, Recognizer>> = {
     isStartOfToken: (markdown: string) => /^[-+*]/.test(markdown),
     isStreamingValid: (markdown: string) =>
       STREAM_INCOMPLETE_REGEX.list.some((re) => re.test(markdown)),
+    // list 后紧跟 ` 时只提交列表前缀，余下留给 inline-code（- * 可能为多级列表，不处理）
+    getCommitPrefix: (pending: string) => {
+      const listPrefix = pending.match(/^([-+*]\s{0,3})/)?.[1];
+      const rest = listPrefix ? pending.slice(listPrefix.length) : '';
+      return listPrefix && rest.startsWith('`') ? listPrefix : null;
+    },
   },
   [StreamCacheTokenType.Table]: {
     tokenType: StreamCacheTokenType.Table,
@@ -112,6 +124,13 @@ const recognize = (cache: StreamCache, tokenType: StreamCacheTokenType): void =>
   }
 
   if (token === tokenType && !recognizer.isStreamingValid(pending)) {
+    const prefix = recognizer.getCommitPrefix?.(pending);
+    if (prefix != null) {
+      cache.completeMarkdown += prefix;
+      cache.pending = pending.slice(prefix.length);
+      cache.token = StreamCacheTokenType.Text;
+      return;
+    }
     commitCache(cache);
   }
 };
@@ -290,6 +309,11 @@ const useStreaming = (
         } else {
           const handler = recognizeHandlers.find((handler) => handler.tokenType === cache.token);
           handler?.recognize(cache);
+          // After commit (e.g. list → Text), re-run all recognizers so pending (e.g. "`") becomes the new token (e.g. inline-code)
+          const tokenAfterRecognize = cache.token as StreamCacheTokenType;
+          if (tokenAfterRecognize === StreamCacheTokenType.Text) {
+            for (const h of recognizeHandlers) h.recognize(cache);
+          }
         }
 
         if (cache.token === StreamCacheTokenType.Text) {

packages/x/docs/x-markdown/components.en-US.md

@@ -152,9 +152,9 @@ Incorrect Output:
 </think>
 ```
 
-**Root Cause:** According to [CommonMark](https://spec.commonmark.org/0.30/#html-blocks) specification, HTML block recognition depends on strict formatting rules. Once two consecutive line breaks (i.e., empty lines) appear inside an HTML block and do not meet specific HTML block type continuation conditions (such as <div>, <pre>, etc.), the parser will terminate the current HTML block and process subsequent content as Markdown paragraphs.
+**Root Cause:** According to [CommonMark](https://spec.commonmark.org/0.30/#html-blocks) specification, HTML block recognition depends on strict formatting rules. Once two consecutive line breaks (i.e., empty lines) appear inside an HTML block and do not meet specific HTML block type continuation conditions (such as `<div>`, `<pre>`, etc.), the parser will terminate the current HTML block and process subsequent content as Markdown paragraphs.
 
-Custom tags (like <think>) are typically not recognized as "paragraph-spanning" HTML block types, making them highly susceptible to empty line interference.
+Custom tags (like `<think>` ) are typically not recognized as "paragraph-spanning" HTML block types, making them highly susceptible to empty line interference.
 
 **Solutions:**
 

packages/x/docs/x-markdown/components.zh-CN.md

@@ -152,9 +152,9 @@ const UserCard = ({ domNode, streamStatus }) => {
 </think>
 ```
 
-**根本原因：** 根据 [CommonMark](https://spec.commonmark.org/0.30/#html-blocks) 规范，HTML 块的识别依赖于严格的格式规则。一旦在 HTML 块内部出现两个连续换行（即空行），且未满足特定 HTML 块类型（如 <div>、<pre> 等）的延续条件，解析器会终止当前 HTML 块，并将后续内容作为 Markdown 段落处理。
+**根本原因：** 根据 [CommonMark](https://spec.commonmark.org/0.30/#html-blocks) 规范，HTML 块的识别依赖于严格的格式规则。一旦在 HTML 块内部出现两个连续换行（即空行），且未满足特定 HTML 块类型（如 `<div>`、`<pre>` 等）的延续条件，解析器会终止当前 HTML 块，并将后续内容作为 Markdown 段落处理。
 
-自定义标签（如 <think>）通常不被识别为“可跨段落”的 HTML 块类型，因此极易受空行干扰。
+自定义标签（如 `<think>` ）通常不被识别为“可跨段落”的 HTML 块类型，因此极易受空行干扰。
 
 **解决方案：**
 

packages/x/docs/x-markdown/demo/streaming/format.tsx

@@ -11,26 +11,30 @@ const demos = [
     
 Ant Design X is a comprehensive toolkit for AI applications, integrating a UI component library, streaming Markdown rendering engine, and AI SDK.
 
-\`npm install @ant-design/x-markdown\`
+- \`npm install @ant-design/x\`
+- \`npm install @ant-design/x-markdown\`
+- \`npm install @ant-design/x-sdk\`
 
-### @ant-design/x
+### \`@ant-design/x\`
 
 A React UI library based on the Ant Design system, designed for **AI-driven interfaces**. [Click here for details.](/components/introduce/).
 
-### @ant-design/x-markdown
+### \`@ant-design/x-markdown\`
 
 An optimized Markdown rendering solution for **streaming content**. [Click here for details.](/x-markdowns/introduce).
 
-### @ant-design/x-sdk
+### \`@ant-design/x-sdk\`
 
 Provides a complete set of **tool APIs**. [Click here for details.](/x-sdks/introduce).
-<welcome data-icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp" title="Hello, I'm Ant Design X" data-description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"></welcome>
+
 
 | Repo | Description |
 | ------ | ----------- |
 | @ant-design/x   | A React UI library based on the Ant Design system. |
 | @ant-design/x-markdown | An optimized Markdown rendering solution for **streaming content**. |
 | @ant-design/x-sdk    | Provides a complete set of **tool APIs**. |
+
+<welcome data-icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp" title="Hello, I'm Ant Design X" data-description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~"></welcome>
 `,
   },
   {
@@ -62,7 +66,7 @@ Provides a complete set of **tool APIs**. [Click here for details.](/x-sdks/intr
   },
   {
     title: 'InlineCode',
-    content: 'This is inline code: `npm install @ant-design/x-markdown`',
+    content: 'This is inline code: `npm install @ant-design/x-markdown`.',
   },
 ];
 
@@ -129,32 +133,42 @@ const WelcomeCard = (props: Record<string, any>) => (
 );
 
 const StreamDemo: React.FC<{ content: string }> = ({ content }) => {
-  const [displayText, setDisplayText] = useState(content);
-  const [isStreaming, setIsStreaming] = useState(false);
+  const [hasNextChunk, setHasNextChunk] = React.useState(true);
   const { theme: antdTheme } = theme.useToken();
   const className = antdTheme.id === 0 ? 'x-markdown-light' : 'x-markdown-dark';
+  const [index, setIndex] = React.useState(0);
+  const timer = React.useRef<NodeJS.Timeout | null>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
 
-  const startStream = React.useCallback(() => {
-    setDisplayText('');
-    setIsStreaming(true);
-    let index = 0;
-
-    const stream = () => {
-      if (index <= content.length) {
-        setDisplayText(content.slice(0, index));
-        index++;
-        setTimeout(stream, 30);
-      } else {
-        setIsStreaming(false);
+  React.useEffect(() => {
+    if (index >= content.length) {
+      setHasNextChunk(false);
+      return;
+    }
+
+    timer.current = setTimeout(() => {
+      setIndex(Math.min(index + 1, content.length));
+    }, 30);
+
+    return () => {
+      if (timer.current) {
+        clearTimeout(timer.current);
+        timer.current = null;
       }
     };
-
-    stream();
-  }, [content]);
+  }, [index]);
 
   React.useEffect(() => {
-    startStream();
-  }, [startStream]);
+    if (contentRef.current && index > 0 && index < content.length) {
+      const { scrollHeight, clientHeight } = contentRef.current;
+      if (scrollHeight > clientHeight) {
+        contentRef.current.scrollTo({
+          top: scrollHeight,
+          behavior: 'smooth',
+        });
+      }
+    }
+  }, [index]);
 
   return (
     <div style={{ display: 'flex', gap: 16, width: '100%' }}>
@@ -169,11 +183,11 @@ const StreamDemo: React.FC<{ content: string }> = ({ content }) => {
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
             margin: 0,
-            maxHeight: 800,
+            height: 600,
             overflow: 'auto',
           }}
         >
-          {displayText || 'Click Stream to start'}
+          {content.slice(0, index)}
         </div>
       </Card>
 
@@ -182,7 +196,13 @@ const StreamDemo: React.FC<{ content: string }> = ({ content }) => {
         size="small"
         style={{ flex: 1, overflow: 'scroll' }}
         extra={
-          <Button type="primary" onClick={startStream} loading={isStreaming}>
+          <Button
+            type="primary"
+            onClick={() => {
+              setIndex(0);
+              setHasNextChunk(true);
+            }}
+          >
             Re-Render
           </Button>
         }
@@ -197,7 +217,7 @@ const StreamDemo: React.FC<{ content: string }> = ({ content }) => {
           }}
         >
           <XMarkdown
-            content={displayText}
+            content={content.slice(0, index)}
             className={className}
             paragraphTag="div"
             openLinksInNewTab
@@ -211,7 +231,7 @@ const StreamDemo: React.FC<{ content: string }> = ({ content }) => {
               'incomplete-inline-code': IncompleteInlineCode,
               welcome: WelcomeCard,
             }}
-            streaming={{ hasNextChunk: isStreaming }}
+            streaming={{ hasNextChunk }}
           />
         </div>
       </Card>