refactor(XMarkdown): move mermaid & highlight to standalone components, drop x-markdown dependency

[Div627]

中文版模板 / Chinese template

🤔 This is a ...

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

🔗 Related Issues

• Describe the source of related requirements, such as links to relevant issue discussions.
• For example: close #xxxx, fix #xxxx

💡 Background and Solution

• The specific problem to be addressed.
• List the final API implementation and usage if needed.
• If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

• Read Keep a Changelog like a cat tracks a laser pointer.
• Describe the impact of the changes on developers, not the solution approach.
• Reference: https://x.ant.design/changelog

Language	Changelog
🇺🇸 English	BREAKING CHANGE: x-markdown no longer includes built-in Mermaid and Highlight rendering capabilities; these components must now be imported separately from x. The dependencies on @ant-design and @ant-design/x have also been removed from x-markdown. Use Actions.copy instead of navigator.clipboard to prevent compatibility issues.
🇨🇳 Chinese	BREAKING: x-markdown 不再内置 Mermaid 与 Highlight 渲染能力，需单独从 x 中引用组件。并移除 x-markdown 对 @ant-design 和 @ant-design/x 的依赖。使用 Actions.copy 而非 navigator.clipboard，以避免兼容性问题。

[coderabbitai[bot]]

[!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_component

---

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[bot]]

[gemini-code-assist[bot]]

Summary of Changes

Hello @Div627, I'm Gemini Code Assist[^1]! 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!

This pull request undertakes a significant refactoring of the @ant-design/x-markdown package by extracting its previously integrated Mermaid diagram rendering and code highlighting capabilities. These functionalities are now provided as independent CodeHighlighter and Mermaid components within the @ant-design/x library. This strategic move aims to streamline the x-markdown package, making it lighter and more focused on its core Markdown parsing responsibilities, while offering greater modularity and explicit control over these features to developers. The change also involves updating dependencies, internal styling mechanisms, and documentation across the affected packages.

Highlights

• Architectural Refactoring: The core x-markdown package has been refactored to remove its built-in Mermaid diagram rendering and code highlighting functionalities. These features are now extracted into standalone CodeHighlighter and Mermaid components.
• New Standalone Components: New CodeHighlighter and Mermaid components have been introduced within the @ant-design/x package, providing dedicated and reusable solutions for syntax highlighting and diagram rendering, respectively.
• Dependency Reduction for x-markdown: The x-markdown package has significantly reduced its direct dependencies, including those related to Ant Design theming (@ant-design/cssinjs, @ant-design/x, antd) and the external libraries for highlighting and diagrams (mermaid, react-syntax-highlighter).
• Breaking Change: Users of x-markdown will now need to explicitly import CodeHighlighter and Mermaid from @ant-design/x if they wish to use these functionalities, as they are no longer bundled with x-markdown.
• Centralized Theming and Localization: Theming and localization for the newly extracted CodeHighlighter and Mermaid components are now managed through the @ant-design/x provider, consolidating configuration.

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 :thumbsup: and :thumbsdown: 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.

[^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[bot]]

Deploying ant-design-x with    Cloudflare Pages

Latest commit:	e290757
Status:	✅  Deploy successful!
Preview URL:	https://23e40c7b.ant-design-x.pages.dev
Branch Preview URL:	https://feature-markdown-component.ant-design-x.pages.dev

View logs

[socket-security[bot]]

[!WARNING] Review the following alerts detected in dependencies.

According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.

Action	Severity	Alert  (click "▶" to expand/collapse)
Warn		Protestware or unwanted behavior: npm es5-ext Note: This package prints a protestware console message on install regarding Ukraine for users with Russian language locale From: ? → npm/[email protected] ℹ Read more on: This package | This alert | What is protestware? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at [email protected]. Suggestion: Consider that consuming this package may come along with functionality unrelated to its primary purpose. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/[email protected]. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.
Warn		Protestware or unwanted behavior: npm es5-ext Note: The script attempts to run a local post-install script, which could potentially contain malicious code. The error handling suggests that it is designed to fail silently, which is a common tactic in malicious scripts. From: ? → npm/[email protected] ℹ Read more on: This package | This alert | What is protestware? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at [email protected]. Suggestion: Consider that consuming this package may come along with functionality unrelated to its primary purpose. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/[email protected]. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[codecov[bot]]

Bundle Report

Changes will increase total bundle size by 630.29kB (46.02%) :arrow_up::warning:, exceeding the configured threshold of 5%.

Bundle name	Size	Change
x-markdown-array-push	244.52kB	-1.13MB (-82.15%) :arrow_down:
antdx-array-push	1.76MB	1.76MB (100%) :arrow_up::warning:

Affected Assets, Files, and Routes:

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

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
x-markdown.js (New)	241.78kB	241.78kB	100.0% :rocket:
x-markdown.css (New)	2.74kB	2.74kB	100.0% :rocket:
~~latex.min.js~~ (Deleted)	-268.76kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_AMS-Regular.*.ttf~~ (Deleted)	-63.63kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Regular.*.ttf~~ (Deleted)	-53.58kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Bold.*.ttf~~ (Deleted)	-51.34kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Italic.*.ttf~~ (Deleted)	-33.58kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_AMS-Regular.*.woff~~ (Deleted)	-33.52kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-BoldItalic.*.ttf~~ (Deleted)	-32.97kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-Italic.*.ttf~~ (Deleted)	-31.31kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-BoldItalic.*.ttf~~ (Deleted)	-31.2kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Regular.*.woff~~ (Deleted)	-30.77kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Bold.*.woff~~ (Deleted)	-29.91kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_AMS-Regular.*.woff2~~ (Deleted)	-28.08kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Typewriter-Regular.*.ttf~~ (Deleted)	-27.56kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Regular.*.woff2~~ (Deleted)	-26.27kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Bold.*.woff2~~ (Deleted)	-25.32kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Bold.*.ttf~~ (Deleted)	-24.5kB	0 bytes	-100.0% :wastebasket:
~~latex.min.css~~ (Deleted)	-24.32kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Italic.*.ttf~~ (Deleted)	-22.36kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Italic.*.woff~~ (Deleted)	-19.68kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Bold.*.ttf~~ (Deleted)	-19.58kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Regular.*.ttf~~ (Deleted)	-19.57kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Regular.*.ttf~~ (Deleted)	-19.44kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-BoldItalic.*.woff~~ (Deleted)	-19.41kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-Italic.*.woff~~ (Deleted)	-18.75kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-BoldItalic.*.woff~~ (Deleted)	-18.67kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-Italic.*.woff2~~ (Deleted)	-16.99kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Main-BoldItalic.*.woff2~~ (Deleted)	-16.78kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Script-Regular.*.ttf~~ (Deleted)	-16.65kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-Italic.*.woff2~~ (Deleted)	-16.44kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Math-BoldItalic.*.woff2~~ (Deleted)	-16.4kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Typewriter-Regular.*.woff~~ (Deleted)	-16.03kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Bold.*.woff~~ (Deleted)	-14.41kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Italic.*.woff~~ (Deleted)	-14.11kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Typewriter-Regular.*.woff2~~ (Deleted)	-13.57kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Bold.*.woff~~ (Deleted)	-13.3kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Regular.*.woff~~ (Deleted)	-13.21kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Bold.*.ttf~~ (Deleted)	-12.37kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Regular.*.ttf~~ (Deleted)	-12.34kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Regular.*.woff~~ (Deleted)	-12.32kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size1-Regular.*.ttf~~ (Deleted)	-12.23kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Bold.*.woff2~~ (Deleted)	-12.22kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Italic.*.woff2~~ (Deleted)	-12.03kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size2-Regular.*.ttf~~ (Deleted)	-11.51kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Bold.*.woff2~~ (Deleted)	-11.35kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Fraktur-Regular.*.woff2~~ (Deleted)	-11.32kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Script-Regular.*.woff~~ (Deleted)	-10.59kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size4-Regular.*.ttf~~ (Deleted)	-10.36kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_SansSerif-Regular.*.woff2~~ (Deleted)	-10.34kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Script-Regular.*.woff2~~ (Deleted)	-9.64kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Bold.*.woff~~ (Deleted)	-7.72kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Regular.*.woff~~ (Deleted)	-7.66kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size3-Regular.*.ttf~~ (Deleted)	-7.59kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Bold.*.woff2~~ (Deleted)	-6.91kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Caligraphic-Regular.*.woff2~~ (Deleted)	-6.91kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size1-Regular.*.woff~~ (Deleted)	-6.5kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size2-Regular.*.woff~~ (Deleted)	-6.19kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size4-Regular.*.woff~~ (Deleted)	-5.98kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size1-Regular.*.woff2~~ (Deleted)	-5.47kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size2-Regular.*.woff2~~ (Deleted)	-5.21kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size4-Regular.*.woff2~~ (Deleted)	-4.93kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size3-Regular.*.woff~~ (Deleted)	-4.42kB	0 bytes	-100.0% :wastebasket:
~~static/KaTeX_Size3-Regular.*.woff2~~ (Deleted)	-3.62kB	0 bytes	-100.0% :wastebasket:

[github-actions[bot]]

size-limit report 📦

Path	Size
packages/x/dist/antdx.min.js	439.09 KB (+382.61 KB 🔺)
packages/x-sdk/dist/x-sdk.min.js	7.3 KB
packages/x-markdown/dist/x-markdown.min.js	28.8 KB (-21.92 KB 🔽)
packages/x-markdown/dist/plugins/code-high-light.min.js	0 B (-313.46 KB 🔽)
packages/x-markdown/dist/plugins/latex.min.js	61.95 KB
packages/x-markdown/dist/plugins/mermaid.min.js	0 B (-883.08 KB 🔽)

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 94.54%. Comparing base (3e56eb1) to head (e290757). :warning: Report is 1 commits behind head on feature.

Additional details and impacted files

@@             Coverage Diff             @@
##           feature    #1402      +/-   ##
===========================================
+ Coverage    94.44%   94.54%   +0.10%     
===========================================
  Files          140      136       -4     
  Lines         3853     3816      -37     
  Branches      1079     1078       -1     
===========================================
- Hits          3639     3608      -31     
+ Misses         211      205       -6     
  Partials         3        3              

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

[afc163]

这个体积变化是不是有问题？

[Div627]

这个体积变化是不是有问题？

Mermaid 从 XMarkdown 移动到 X 导致的体积变大，已修改为懒加载的 peerDependence