feat: Replace x/Actions in Mermaid and HighlightCode component

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>
     );
   };