Refactor/x-markdown toolbar with Actions component

[HongwuQz]

🤔 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
• [x] 🛠 Refactoring
• [ ] 🎨 Code style optimization
• [x] ✅ Test Case
• [ ] 🔀 Branch merge
• [ ] ⏩ Workflow
• [ ] ⌨️ Accessibility improvement
• [ ] ❓ Other (about what?)

🔗 Related Issues

close #1283

💡 Background and Solution

Background: Refactor Mermaid component to use the unified Actions component for operation buttons, replacing custom button implementations to improve code consistency and maintainability.

Solution:

• Use @ant-design/x/es/actions component to render operation buttons (copy, zoom in, zoom out, reset, download)
• Dynamically display different action items based on render mode (image/code)
• Update test cases to adapt to Actions component's DOM structure (use getByLabelText to find icons, then locate clickable container via closest)
• Add Chinese localization for Mermaid component

Changes:

• Replace custom button implementation with Actions component
• Fix test case element queries (Actions renders div instead of button)
• Update localization files with Mermaid-related Chinese translations

📝 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	Refactor Mermaid component to use Actions component for operation buttons.
🇨🇳 Chinese	重构 Mermaid 组件，使用 Actions 组件统一渲染操作按钮。

[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

---

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 @HongwuQz, 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 streamlines the user interface of the Mermaid component by integrating the @ant-design/x/es/actions component for all interactive buttons. This change standardizes the button presentation, enhances code consistency, and simplifies future maintenance. It also includes necessary adjustments to unit tests to accommodate the new component structure and corrects a localization error for zoom controls in Chinese.

Highlights

• Refactored Mermaid Component Actions: The Mermaid component's operation buttons (copy, zoom, reset, download) have been refactored to use the unified @ant-design/x/es/actions component, replacing custom button implementations for improved consistency and maintainability.
• Dynamic Action Display: Action items are now dynamically displayed based on the Mermaid component's render mode (image or code), ensuring only relevant actions are presented to the user.
• Updated Test Cases: Existing test cases for the Mermaid component have been updated to adapt to the new DOM structure introduced by the Actions component, utilizing getByLabelText and closest('.ant-actions-item') for accurate element targeting.
• Chinese Localization Correction: The Chinese localization for the Mermaid component has been updated, specifically correcting the zoomIn and zoomOut labels to accurately reflect '放大' (enlarge) and '缩小' (shrink) respectively.

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.

[HongwuQz]

#1283

[Div627]

highlightCode 也可以替换哈