feat(XMarkdown): 支持通过组件匹配未完成的Markdown语法

[Div627]

中文版模板 / Chinese template

🤔 This is a ...

• 🆕 New feature
• 🐞 Bug fix
• 📝 Site / documentation improvement
• 📽️ Demo improvement
• 💄 Component style improvement
• 🤖 TypeScript definition improvement
• 📦 Bundle size optimization
• ⚡️ Performance optimization
• ⭐️ Feature enhancement
• 🌐 Internationalization
• 🛠 Refactoring
• 🎨 Code style optimization
• ✅ Test Case
• 🔀 Branch merge
• ⏩ Workflow
• ⌨️ Accessibility improvement
• ❓ Other (about what?)

💡 Background and Solution

Background: 在流式渲染时，遇到未完成的图片/链接 ![img](，缓存等待时间久，用户体验差。
Solution：匹配未完成的 Markdown 语法，支持传入 components 传入加载状态。

📝 Change Log

1. 支持通过组件匹配未完成的Markdown语法。
2. 默认缓存 Setext headings，避免格式突变。

Language	Changelog
🇺🇸 English
🇨🇳 Chinese

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature_markdown_format

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

[codecov]

Bundle Report

Changes will increase total bundle size by 10.04kB (0.24%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
x-markdown-array-push	3.94MB	10.04kB (0.26%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: x-markdown-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
mermaid.min.js	10.04kB	3.94MB	0.26%

[gemini-code-assist]

Summary of Changes

Hello @Div627, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

此拉取请求显著增强了 XMarkdown 组件的流式渲染能力，使其能够智能地处理不完整的Markdown语法。通过引入可自定义的占位符组件，它解决了在实时内容传输过程中因语法片段导致的视觉中断和用户体验不佳的问题。此外，还对核心流式处理逻辑进行了重构，并提供了全面的新文档和示例，以支持这些改进。

Highlights

• 支持通过组件匹配未完成的Markdown语法: 在流式渲染过程中，当遇到未完成的Markdown语法（如链接或图片）时，XMarkdown现在能够识别并允许通过自定义组件进行匹配和渲染，从而提供更好的用户体验，避免显示破碎的语法。
• 新增 incompleteMarkdownComponentMap 配置项: 为 streaming 属性新增了 incompleteMarkdownComponentMap 配置项，用户可以指定自定义组件来替代流式渲染中未闭合的链接和图片，例如显示加载骨架屏。
• 优化 useStreaming Hook 逻辑: 重构了 useStreaming Hook，引入了 StreamBuffer 接口和 handleTokenProcessing 函数，以更精细地管理流式状态和处理不完整的Markdown语法。同时，增加了当输入内容完全改变时重置流式状态的逻辑。
• 默认缓存 Setext headings: 为避免在流式渲染过程中Setext标题（如Title ---）出现格式突变，现在默认会缓存此类标题，以确保渲染的稳定性。
• 更新和新增文档: 新增了关于流式语法处理和动画效果的详细文档页面（streaming-syntax 和 streaming-animation），并更新了相关示例，以清晰地展示新功能的使用方法和最佳实践。

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[cloudflare-workers-and-pages]

Deploying ant-design-x with    Cloudflare Pages

Latest commit:	4dcc2fa
Status:	✅  Deploy successful!
Preview URL:	https://cb904c74.ant-design-x.pages.dev
Branch Preview URL:	https://feature-markdown-format.ant-design-x.pages.dev

View logs

[gemini-code-assist]

Code Review

本次 PR 旨在通过组件匹配未完成的 Markdown 语法，以改善流式渲染的用户体验。整体实现思路清晰，通过状态机和 token 缓冲来处理流式数据，并增加了替换不完整语法的能力。代码重构和测试用例的补充都非常出色，特别是新增了大量针对边缘场景的测试，大大提高了代码的健壮性。

我发现了一些可以改进的地方，主要集中在 useStreaming.ts hook 中，包括一个正则表达式的潜在 bug 和一处为了可读性可以优化的逻辑。此外，文档的更新和重构做得很好，使得新功能更容易理解和使用。

[codecov]

Codecov Report

❌ Patch coverage is 97.72727% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.93%. Comparing base (485b4a4) to head (4dcc2fa).
⚠️ Report is 2 commits behind head on next.

Files with missing lines	Patch %	Lines
...ges/x-markdown/src/XMarkdown/hooks/useStreaming.ts	97.72%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             next    #1223      +/-   ##
==========================================
+ Coverage   94.89%   94.93%   +0.04%     
==========================================
  Files         138      138              
  Lines        3586     3655      +69     
  Branches     1011     1014       +3     
==========================================
+ Hits         3403     3470      +67     
- Misses        182      184       +2     
  Partials        1        1              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[github-actions]

size-limit report 📦

Path	Size
packages/x/dist/antdx.min.js	66.75 KB
packages/x-sdk/dist/x-sdk.min.js	7.31 KB
packages/x-markdown/dist/x-markdown.min.js	43.51 KB (+6 B 🔺)
packages/x-markdown/dist/plugins/code-high-light.min.js	278.82 KB
packages/x-markdown/dist/plugins/latex.min.js	61.94 KB
packages/x-markdown/dist/plugins/mermaid.min.js	850.92 KB

[kimteayon]

文档的菜单太乱了，需要整理下