From 69d16937706d5e07f2eda756dc9b298b400814a6 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Fri, 31 Oct 2025 16:01:10 +0800
Subject: [PATCH 01/10] feat: mermaid actions

---
 .../x-markdown/src/plugins/Mermaid/index.tsx  | 100 ++++++++++++------
 1 file changed, 65 insertions(+), 35 deletions(-)

diff --git a/packages/x-markdown/src/plugins/Mermaid/index.tsx b/packages/x-markdown/src/plugins/Mermaid/index.tsx
index bb1639b9d..b5b8e0149 100644
--- a/packages/x-markdown/src/plugins/Mermaid/index.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/index.tsx
@@ -1,9 +1,17 @@
-import { CopyOutlined, DownloadOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
+import {
+  CopyOutlined,
+  DownloadOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
 import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
+import Actions from '@ant-design/x/es/actions';
+import type { ActionsProps } from '@ant-design/x/es/actions/interface';
 import useLocale from '@ant-design/x/es/locale/useLocale';
 import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
 import locale_EN from '@ant-design/x/locale/en_US';
-import { Button, message, Segmented, Space, Tooltip } from 'antd';
+import { message, Segmented } from 'antd';
 import classnames from 'classnames';
 import throttle from 'lodash.throttle';
 import mermaid from 'mermaid';
@@ -222,6 +230,60 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
     }
   };
 
+  const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
+    switch (keyPath[0]) {
+      case 'copy':
+        handleCopyCode();
+        break;
+      case 'zoomOut':
+        handleZoomOut();
+        break;
+      case 'zoomIn':
+        handleZoomIn();
+        break;
+      case 'zoomReset':
+        handleReset();
+        break;
+      case 'download':
+        handleDownload();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const actionItems = [
+    {
+      key: 'copy',
+      label: contextLocale.copy,
+      icon: <CopyOutlined />,
+    },
+    {
+      key: 'zoomOut',
+      label: contextLocale.zoomOut,
+      icon: <ZoomInOutlined />,
+    },
+    {
+      key: 'zoomIn',
+      label: contextLocale.zoomOut,
+      icon: <ZoomOutOutlined />,
+    },
+    {
+      key: 'zoomReset',
+      label: contextLocale.zoomReset,
+      icon: <UndoOutlined />,
+    },
+    {
+      key: 'download',
+      label: contextLocale.download,
+      icon: <DownloadOutlined />,
+    },
+  ];
+
+  const activeActions = actionItems.filter(
+    (item) => item.key === 'copy' || renderType === RenderType.Image,
+  );
+
   const renderHeader = () => {
     if (header === null) return null;
     if (header) return header;
@@ -244,39 +306,7 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
           value={renderType}
           onChange={setRenderType}
         />
-        <Space>
-          <Tooltip title={contextLocale.copy}>
-            <Button type="text" size="small" icon={<CopyOutlined />} onClick={handleCopyCode} />
-          </Tooltip>
-          {renderType === RenderType.Image ? (
-            <>
-              <Tooltip title={contextLocale.zoomOut}>
-                <Button type="text" size="small" icon={<ZoomInOutlined />} onClick={handleZoomIn} />
-              </Tooltip>
-              <Tooltip title={contextLocale.zoomIn}>
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<ZoomOutOutlined />}
-                  onClick={handleZoomOut}
-                />
-              </Tooltip>
-              <Tooltip title={contextLocale.zoomReset}>
-                <Button type="text" size="small" onClick={handleReset}>
-                  {contextLocale.zoomReset}
-                </Button>
-              </Tooltip>
-              <Tooltip title={contextLocale.download}>
-                <Button
-                  type="text"
-                  size="small"
-                  icon={<DownloadOutlined />}
-                  onClick={handleDownload}
-                />
-              </Tooltip>
-            </>
-          ) : null}
-        </Space>
+        <Actions items={activeActions} onClick={onClick} />
       </div>
     );
   };

From c879bc31ae4b617dd62e014dccf33ee384ac08a0 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Fri, 31 Oct 2025 16:10:18 +0800
Subject: [PATCH 02/10] feat: mermaid actions key

---
 packages/x-markdown/src/plugins/Mermaid/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-markdown/src/plugins/Mermaid/index.tsx b/packages/x-markdown/src/plugins/Mermaid/index.tsx
index b5b8e0149..a4b54abaf 100644
--- a/packages/x-markdown/src/plugins/Mermaid/index.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/index.tsx
@@ -265,7 +265,7 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
     },
     {
       key: 'zoomIn',
-      label: contextLocale.zoomOut,
+      label: contextLocale.zoomIn,
       icon: <ZoomOutOutlined />,
     },
     {

From 83a52de77adcae686c372673c1189e6f2619fc42 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Fri, 31 Oct 2025 16:36:15 +0800
Subject: [PATCH 03/10] feat: doc

---
 packages/x/docs/x-markdown/demo/_utils/adx-markdown.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x/docs/x-markdown/demo/_utils/adx-markdown.ts b/packages/x/docs/x-markdown/demo/_utils/adx-markdown.ts
index ac0bae3d7..4e7e42fb1 100644
--- a/packages/x/docs/x-markdown/demo/_utils/adx-markdown.ts
+++ b/packages/x/docs/x-markdown/demo/_utils/adx-markdown.ts
@@ -70,7 +70,7 @@ Ant Design X 是一款AI应用复合工具集，融合了 UI 组件库、流式
 npm install @ant-design/x --save  # React 版本
 \`\`\`
 
-## @ant-design/-sdk
+## @ant-design/x-sdk
 
 ### 特性
 

From 61a5b16d446f48c76de66370ba10a9ea1ae1ee7e Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Fri, 31 Oct 2025 16:47:04 +0800
Subject: [PATCH 04/10] feat: mermaid locale

---
 packages/x-markdown/src/plugins/Mermaid/index.tsx | 8 ++++----
 packages/x/components/locale/zh_CN.ts             | 4 ++--
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/x-markdown/src/plugins/Mermaid/index.tsx b/packages/x-markdown/src/plugins/Mermaid/index.tsx
index a4b54abaf..8f7da401f 100644
--- a/packages/x-markdown/src/plugins/Mermaid/index.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/index.tsx
@@ -259,13 +259,13 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
       icon: <CopyOutlined />,
     },
     {
-      key: 'zoomOut',
-      label: contextLocale.zoomOut,
+      key: 'zoomIn',
+      label: contextLocale.zoomIn,
       icon: <ZoomInOutlined />,
     },
     {
-      key: 'zoomIn',
-      label: contextLocale.zoomIn,
+      key: 'zoomOut',
+      label: contextLocale.zoomOut,
       icon: <ZoomOutOutlined />,
     },
     {
diff --git a/packages/x/components/locale/zh_CN.ts b/packages/x/components/locale/zh_CN.ts
index 725d54f0d..1f9b5820a 100644
--- a/packages/x/components/locale/zh_CN.ts
+++ b/packages/x/components/locale/zh_CN.ts
@@ -24,8 +24,8 @@ const localeValues: Required<xLocale & xMarkdownLocale> = {
   Mermaid: {
     copySuccess: '复制成功',
     copy: '复制代码',
-    zoomIn: '缩小',
-    zoomOut: '放大',
+    zoomIn: '放大',
+    zoomOut: '缩小',
     zoomReset: '重置',
     download: '下载',
     code: '代码',

From 7c3baea0427b071e9571a0876639b02c45b036d5 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Mon, 3 Nov 2025 14:36:52 +0800
Subject: [PATCH 05/10] feat: mermaid test case

---
 .../plugins/Mermaid/__test__/index.test.tsx   | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx b/packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx
index ef8d09195..ada1be870 100644
--- a/packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx
@@ -135,7 +135,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyButton = screen.getByRole('button', { name: 'copy' });
+      const copyButton = screen.getByRole('img', { name: 'copy' });
       fireEvent.click(copyButton);
 
       await waitFor(() => {
@@ -154,7 +154,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyButton = screen.getByRole('button', { name: 'copy' });
+      const copyButton = screen.getByRole('img', { name: 'copy' });
 
       // 确保点击不会抛出错误
       expect(() => fireEvent.click(copyButton)).not.toThrow();
@@ -177,7 +177,7 @@ describe('Mermaid Plugin', () => {
 
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const copyButton = screen.getByRole('button', { name: 'copy' });
+      const copyButton = screen.getByRole('img', { name: 'copy' });
       fireEvent.click(copyButton);
 
       await waitFor(() => {
@@ -192,23 +192,23 @@ describe('Mermaid Plugin', () => {
     it('should show zoom controls only in image mode', () => {
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      expect(screen.getByRole('button', { name: 'zoom-in' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'zoom-out' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'download' })).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'zoom-in' })).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'zoom-out' })).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'undo' })).toBeInTheDocument();
+      expect(screen.getByRole('img', { name: 'download' })).toBeInTheDocument();
 
       const codeButton = screen.getByText('Code');
       fireEvent.click(codeButton);
 
-      expect(screen.queryByRole('button', { name: 'zoom-in' })).not.toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'zoom-out' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('img', { name: 'zoom-in' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('img', { name: 'zoom-out' })).not.toBeInTheDocument();
     });
 
     it('should handle zoom in/out', () => {
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const zoomInButton = screen.getByRole('button', { name: 'zoom-in' });
-      const zoomOutButton = screen.getByRole('button', { name: 'zoom-out' });
+      const zoomInButton = screen.getByRole('img', { name: 'zoom-in' });
+      const zoomOutButton = screen.getByRole('img', { name: 'zoom-out' });
 
       fireEvent.click(zoomInButton);
       fireEvent.click(zoomOutButton);
@@ -217,7 +217,7 @@ describe('Mermaid Plugin', () => {
     it('should handle reset functionality', () => {
       render(<Mermaid>{mermaidContent}</Mermaid>);
 
-      const resetButton = screen.getByRole('button', { name: 'Reset' });
+      const resetButton = screen.getByRole('img', { name: 'undo' });
       fireEvent.click(resetButton);
     });
   });
@@ -500,7 +500,7 @@ describe('Mermaid Plugin', () => {
         container.querySelector = mockQuerySelector;
       }
 
-      const downloadButton = screen.getByRole('button', { name: 'download' });
+      const downloadButton = screen.getByRole('img', { name: 'download' });
       fireEvent.click(downloadButton);
 
       // Wait for async operations
@@ -542,7 +542,7 @@ describe('Mermaid Plugin', () => {
         container.querySelector = mockQuerySelector;
       }
 
-      const downloadButton = screen.getByRole('button', { name: 'download' });
+      const downloadButton = screen.getByRole('img', { name: 'download' });
       fireEvent.click(downloadButton);
 
       // Should not throw and should return early

From 5b195d6668ba22d136ba3d7da524fba90ebd7c03 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Mon, 3 Nov 2025 14:51:56 +0800
Subject: [PATCH 06/10] feat: code coverage

---
 packages/x-markdown/src/plugins/Mermaid/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/x-markdown/src/plugins/Mermaid/index.tsx b/packages/x-markdown/src/plugins/Mermaid/index.tsx
index 8f7da401f..5a0e99014 100644
--- a/packages/x-markdown/src/plugins/Mermaid/index.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/index.tsx
@@ -247,8 +247,6 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
       case 'download':
         handleDownload();
         break;
-      default:
-        break;
     }
   };
 

From ca89f2dfbacaa95e4e682ee5e91dd9c355bdda8e Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Mon, 17 Nov 2025 21:23:16 +0800
Subject: [PATCH 07/10] feat: HighlightCode action

---
 .../src/plugins/HighlightCode/index.tsx       | 24 +++++++++++++++----
 .../x-markdown/src/plugins/Mermaid/index.tsx  |  4 ++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/x-markdown/src/plugins/HighlightCode/index.tsx b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
index 9fabe4428..cac1b4b67 100644
--- a/packages/x-markdown/src/plugins/HighlightCode/index.tsx
+++ b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
@@ -1,9 +1,11 @@
 import { CopyOutlined } from '@ant-design/icons';
+import { ActionsProps } from '@ant-design/x';
 import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
+import Actions from '@ant-design/x/es/actions';
 import useLocale from '@ant-design/x/es/locale/useLocale';
 import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
 import locale_EN from '@ant-design/x/locale/en_US';
-import { Button, message, Tooltip } from 'antd';
+import { message, Tooltip } from 'antd';
 import classnames from 'classnames';
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -74,6 +76,22 @@ const HighlightCode: React.FC<HighlightCodeProps> = (props) => {
     }
   };
 
+  const handleActionsClick: ActionsProps['onClick'] = ({ keyPath }) => {
+    switch (keyPath[0]) {
+      case 'copy':
+        handleCopyCode();
+        break;
+    }
+  };
+
+  const actionItems = [
+    {
+      key: 'copy',
+      label: contextLocale.copy,
+      icon: <CopyOutlined />,
+    },
+  ];
+
   const renderTitle = () => {
     if (header === null) return null;
 
@@ -99,9 +117,7 @@ const HighlightCode: React.FC<HighlightCodeProps> = (props) => {
         >
           {lang}
         </span>
-        <Tooltip title={contextLocale.copy}>
-          <Button type="text" size="small" icon={<CopyOutlined />} onClick={handleCopyCode} />
-        </Tooltip>
+        <Actions items={actionItems} onClick={handleActionsClick} />
       </div>
     );
   };
diff --git a/packages/x-markdown/src/plugins/Mermaid/index.tsx b/packages/x-markdown/src/plugins/Mermaid/index.tsx
index 5a0e99014..83e3645c7 100644
--- a/packages/x-markdown/src/plugins/Mermaid/index.tsx
+++ b/packages/x-markdown/src/plugins/Mermaid/index.tsx
@@ -230,7 +230,7 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
     }
   };
 
-  const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
+  const handleActionsClick: ActionsProps['onClick'] = ({ keyPath }) => {
     switch (keyPath[0]) {
       case 'copy':
         handleCopyCode();
@@ -304,7 +304,7 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
           value={renderType}
           onChange={setRenderType}
         />
-        <Actions items={activeActions} onClick={onClick} />
+        <Actions items={activeActions} onClick={handleActionsClick} />
       </div>
     );
   };

From 850788cc8a04efaab7ed64effabfd5bd91025997 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Tue, 18 Nov 2025 10:50:22 +0800
Subject: [PATCH 08/10] feat: remove the useless import in HighlightCode

---
 packages/x-markdown/src/plugins/HighlightCode/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-markdown/src/plugins/HighlightCode/index.tsx b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
index cac1b4b67..0127808d7 100644
--- a/packages/x-markdown/src/plugins/HighlightCode/index.tsx
+++ b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
@@ -5,7 +5,7 @@ import Actions from '@ant-design/x/es/actions';
 import useLocale from '@ant-design/x/es/locale/useLocale';
 import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
 import locale_EN from '@ant-design/x/locale/en_US';
-import { message, Tooltip } from 'antd';
+import { message } from 'antd';
 import classnames from 'classnames';
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

From 35fadfdccd105069c84d6e1485352a3d356160ef Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Tue, 18 Nov 2025 11:02:25 +0800
Subject: [PATCH 09/10] feat: HighlightCode type ActionProps

---
 packages/x-markdown/src/plugins/HighlightCode/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-markdown/src/plugins/HighlightCode/index.tsx b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
index 0127808d7..ea53277ea 100644
--- a/packages/x-markdown/src/plugins/HighlightCode/index.tsx
+++ b/packages/x-markdown/src/plugins/HighlightCode/index.tsx
@@ -1,7 +1,7 @@
 import { CopyOutlined } from '@ant-design/icons';
-import { ActionsProps } from '@ant-design/x';
 import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
 import Actions from '@ant-design/x/es/actions';
+import type { ActionsProps } from '@ant-design/x/es/actions/interface';
 import useLocale from '@ant-design/x/es/locale/useLocale';
 import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
 import locale_EN from '@ant-design/x/locale/en_US';

From 0275fb98f10c0875b80248bc56bbbe8093558901 Mon Sep 17 00:00:00 2001
From: Rain120 <1085131904@qq.com>
Date: Thu, 20 Nov 2025 20:52:16 +0800
Subject: [PATCH 10/10] feat: HighlightCode test case

---
 .../HighlightCode/__test__/index.test.tsx     | 36 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/packages/x-markdown/src/plugins/HighlightCode/__test__/index.test.tsx b/packages/x-markdown/src/plugins/HighlightCode/__test__/index.test.tsx
index b2eff1bb1..9eacb43a9 100644
--- a/packages/x-markdown/src/plugins/HighlightCode/__test__/index.test.tsx
+++ b/packages/x-markdown/src/plugins/HighlightCode/__test__/index.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import XMarkdown from '../../../XMarkdown';
 import HighlightCode from '..';
@@ -177,4 +177,38 @@ plain text
     expect(container.querySelector('pre')).toBeInTheDocument();
     expect(container.textContent).toContain('plain text');
   });
+
+  it('should handle copy action click', async () => {
+    const content = `\`\`\`javascript
+console.log("test copy");
+\`\`\``;
+    const mockClipboard = {
+      writeText: jest.fn().mockResolvedValue(undefined),
+    };
+
+    Object.defineProperty(navigator, 'clipboard', {
+      writable: true,
+      value: mockClipboard,
+    });
+
+    render(
+      <XMarkdown
+        content={content}
+        components={{
+          code: (props: Record<string, any>) => {
+            const { class: className, children } = props;
+            const lang = className?.match(/language-(\w+)/)?.[1] || '';
+            return <HighlightCode lang={lang}>{children}</HighlightCode>;
+          },
+        }}
+      />,
+    );
+
+    const copyButton = screen.getByRole('img', { name: 'copy' });
+    fireEvent.click(copyButton);
+
+    await waitFor(() => {
+      expect(mockClipboard.writeText).toHaveBeenCalledWith('console.log("test copy");');
+    });
+  });
 });