Merge pull request #1301 from ant-design/refactor_markdown_streaming_type

refactor(XMarkdown): markdown streaming type

Author: Div627

packages/x-markdown/src/XMarkdown/interface.ts

@@ -20,7 +20,7 @@ export interface AnimationConfig {
 
 type Token = Tokens.Generic;
 
-interface SteamingOption {
+interface StreamingOption {
   /**
    * @description 指示是否还有后续内容块，为 false 时刷新所有缓存并完成渲染
    * @description Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering
@@ -87,7 +87,7 @@ interface XMarkdownProps {
    * @description 流式渲染行为的配置
    * @description Configuration for streaming rendering behavior
    */
-  streaming?: SteamingOption;
+  streaming?: StreamingOption;
   /**
    * @description Markdown 解析和扩展的 Marked.js 配置
    * @description Marked.js configuration for Markdown parsing and extensions
@@ -132,4 +132,4 @@ interface XMarkdownProps {
   dompurifyConfig?: DOMPurifyConfig;
 }
 
-export type { XMarkdownProps, Token, Tokens, StreamStatus, ComponentProps, SteamingOption };
+export type { XMarkdownProps, Token, Tokens, StreamStatus, ComponentProps, StreamingOption };

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

@@ -31,22 +31,22 @@ Used for rendering streaming Markdown format returned by LLMs.
 | children | Markdown content, alias for `content` property | `string` | - |
 | components | Custom React components to replace HTML elements | `Record<string, React.ComponentType<ComponentProps> \| keyof JSX.IntrinsicElements>`, see [details](/x-markdowns/components) | - |
 | paragraphTag | Custom HTML tag for paragraph elements. Prevents validation errors when custom components contain block-level elements | `keyof JSX.IntrinsicElements` | `'p'` |
-| streaming | Configuration for streaming rendering behavior | `SteamingOption`, see [details](/x-markdowns/streaming) | - |
+| streaming | Configuration for streaming rendering behavior | `StreamingOption`, see [syntax processing](/x-markdowns/streaming-syntax) and [animation effects](/x-markdowns/streaming-animation) | - |
 | config | Marked.js configuration for Markdown parsing and extensions | [`MarkedExtension`](https://marked.js.org/using_advanced#options) | `{ gfm: true }` |
 | openLinksInNewTab | Whether to add `target="_blank"` to all anchor tags | `boolean` | `false` |
 | dompurifyConfig | DOMPurify configuration for HTML sanitization and XSS protection | [`DOMPurify.Config`](https://github.com/cure53/DOMPurify#can-i-configure-dompurify) | - |
 | className | Additional CSS class name for the root container | `string` | - |
 | rootClassName | Alias for `className`, additional CSS class for the root element | `string` | - |
 | style | Inline styles for the root container | `CSSProperties` | - |
 
-### SteamingOption
+### StreamingOption
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | hasNextChunk | Indicates whether more content chunks are expected. When false, flushes all cached content and completes rendering | `boolean` | `false` |
 | enableAnimation | Enables text fade-in animation for block elements (`p`, `li`, `h1`, `h2`, `h3`, `h4`) | `boolean` | `false` |
 | animationConfig | Configuration for text appearance animation effects | `AnimationConfig` | `{ fadeDuration: 200, opacity: 0.2 }` |
-| incompletePlaceholderMap | Placeholder mapping for unclosed Markdown elements, supports custom placeholder components for links and images | `{ link?: string; image?: string }` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |
+| incompleteMarkdownComponentMap | Placeholder mapping for unclosed Markdown elements, supports custom placeholder components for links and images | `{ link?: string; image?: string }` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |
 
 #### AnimationConfig
 

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

@@ -31,22 +31,22 @@ order: 2
 | children | Markdown 内容，作为 `content` 属性的别名 | `string` | - |
 | components | 用于替换 HTML 元素的自定义 React 组件 | `Record<string, React.ComponentType<ComponentProps> \| keyof JSX.IntrinsicElements>`，查看[详情](/x-markdowns/components-cn) | - |
 | paragraphTag | 段落元素的自定义 HTML 标签，防止自定义组件包含块级元素时的验证错误 | `keyof JSX.IntrinsicElements` | `'p'` |
-| streaming | 流式渲染行为的配置 | `SteamingOption`，查看[详情](/x-markdowns/streaming-cn) | - |
+| streaming | 流式渲染行为的配置 | `StreamingOption`，查看[语法处理](/x-markdowns/streaming-syntax)和[动画效果](/x-markdowns/streaming-animation) | - |
 | config | Markdown 解析和扩展的 Marked.js 配置 | [`MarkedExtension`](https://marked.js.org/using_advanced#options) | `{ gfm: true }` |
 | openLinksInNewTab | 是否为所有 a 标签添加 `target="_blank"` | `boolean` | `false` |
 | dompurifyConfig | HTML 净化和 XSS 防护的 DOMPurify 配置 | [`DOMPurify.Config`](https://github.com/cure53/DOMPurify#can-i-configure-dompurify) | - |
 | className | 根容器的额外 CSS 类名 | `string` | - |
 | rootClassName | `className` 的别名，根元素的额外 CSS 类 | `string` | - |
 | style | 根容器的内联样式 | `CSSProperties` | - |
 
-### SteamingOption
+### StreamingOption
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | hasNextChunk | 指示是否还有后续内容块，为 false 时刷新所有缓存并完成渲染 | `boolean` | `false` |
 | enableAnimation | 为块级元素（`p`、`li`、`h1`、`h2`、`h3`、`h4`）启用文字淡入动画 | `boolean` | `false` |
 | animationConfig | 文字出现动画效果的配置 | `AnimationConfig` | `{ fadeDuration: 200, opacity: 0.2 }` |
-| incompletePlaceholderMap | 未闭合Markdown元素的占位符映射，支持自定义链接和图片的占位符组件 | `{ link?: string; image?: string }` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |
+| incompleteMarkdownComponentMap | 未闭合Markdown元素的占位符映射，支持自定义链接和图片的占位符组件 | `{ link?: string; image?: string }` | `{ link: 'incomplete-link', image: 'incomplete-image' }` |
 
 #### AnimationConfig
 
@@ -60,7 +60,7 @@ order: 2
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | domNode | 来自 html-react-parser 的组件 DOM 节点，包含解析后的 DOM 节点信息 | [`DOMNode`](https://github.com/remarkablemark/html-react-parser?tab=readme-ov-file#replace) | - |
-| streamStatus |流式渲染支持两种状态：`loading` 表示内容正在加载中，`done` 表示加载已完成。当前仅支持 HTML 格式以及带围栏的代码块（fenced code）。由于缩进代码块（indented code）没有明确的结束符，因此始终返回 `done` 状态 | `'loading' \| 'done'` | - |
+| streamStatus | 流式渲染支持两种状态：`loading` 表示内容正在加载中，`done` 表示加载已完成。当前仅支持 HTML 格式以及带围栏的代码块（fenced code）。由于缩进代码块（indented code）没有明确的结束符，因此始终返回 `done` 状态 | `'loading' \| 'done'` | - |
 | rest | 组件属性，支持所有标准 HTML 属性（如 `href`、`title`、`className` 等）和自定义数据属性 | `Record<string, any>` | - |
 
 ## FAQ