Skip to content

Commit c38a32e

Browse files
buwenhaobuwenhao
authored
feat: Replace the operation icons of HighlightCode and Mermaid in XMarkdown (#1344)
1 parent 7010ca4 commit c38a32e

File tree

4 files changed

+62
-53
lines changed

4 files changed

+62
-53
lines changed

‎packages/x-markdown/src/plugins/HighlightCode/index.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { CopyOutlined } from '@ant-design/icons';
21
import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
2+
import Actions from '@ant-design/x/es/actions';
33
import useLocale from '@ant-design/x/es/locale/useLocale';
44
import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
55
import locale_EN from '@ant-design/x/locale/en_US';
6-
import { Button, message, Tooltip } from 'antd';
6+
import { message } from 'antd';
77
import classnames from 'classnames';
88
import React from 'react';
99
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
@@ -99,9 +99,7 @@ const HighlightCode: React.FC<HighlightCodeProps> = (props) => {
9999
>
100100
{lang}
101101
</span>
102-
<Tooltip title={contextLocale.copy}>
103-
<Button type="text" size="small" icon={<CopyOutlined />} onClick={handleCopyCode} />
104-
</Tooltip>
102+
<Actions.Copy text={contextLocale.copy} onClick={handleCopyCode} />
105103
</div>
106104
);
107105
};

‎packages/x-markdown/src/plugins/Mermaid/__test__/index.test.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ describe('Mermaid Plugin', () => {
135135

136136
render(<Mermaid>{mermaidContent}</Mermaid>);
137137

138-
const copyButton = screen.getByRole('button', { name: 'copy' });
138+
const copyButton = screen.getByLabelText('copy');
139139
fireEvent.click(copyButton);
140140

141141
await waitFor(() => {
@@ -154,7 +154,7 @@ describe('Mermaid Plugin', () => {
154154

155155
render(<Mermaid>{mermaidContent}</Mermaid>);
156156

157-
const copyButton = screen.getByRole('button', { name: 'copy' });
157+
const copyButton = screen.getByLabelText('copy');
158158

159159
// 确保点击不会抛出错误
160160
expect(() => fireEvent.click(copyButton)).not.toThrow();
@@ -177,7 +177,7 @@ describe('Mermaid Plugin', () => {
177177

178178
render(<Mermaid>{mermaidContent}</Mermaid>);
179179

180-
const copyButton = screen.getByRole('button', { name: 'copy' });
180+
const copyButton = screen.getByLabelText('copy');
181181
fireEvent.click(copyButton);
182182

183183
await waitFor(() => {
@@ -192,23 +192,23 @@ describe('Mermaid Plugin', () => {
192192
it('should show zoom controls only in image mode', () => {
193193
render(<Mermaid>{mermaidContent}</Mermaid>);
194194

195-
expect(screen.getByRole('button', { name: 'zoom-in' })).toBeInTheDocument();
196-
expect(screen.getByRole('button', { name: 'zoom-out' })).toBeInTheDocument();
195+
expect(screen.getByLabelText('zoom-in')).toBeInTheDocument();
196+
expect(screen.getByLabelText('zoom-out')).toBeInTheDocument();
197197
expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();
198-
expect(screen.getByRole('button', { name: 'download' })).toBeInTheDocument();
198+
expect(screen.getByLabelText('download')).toBeInTheDocument();
199199

200200
const codeButton = screen.getByText('Code');
201201
fireEvent.click(codeButton);
202202

203-
expect(screen.queryByRole('button', { name: 'zoom-in' })).not.toBeInTheDocument();
204-
expect(screen.queryByRole('button', { name: 'zoom-out' })).not.toBeInTheDocument();
203+
expect(screen.queryByLabelText('zoom-in')).not.toBeInTheDocument();
204+
expect(screen.queryByLabelText('zoom-out')).not.toBeInTheDocument();
205205
});
206206

207207
it('should handle zoom in/out', () => {
208208
render(<Mermaid>{mermaidContent}</Mermaid>);
209209

210-
const zoomInButton = screen.getByRole('button', { name: 'zoom-in' });
211-
const zoomOutButton = screen.getByRole('button', { name: 'zoom-out' });
210+
const zoomInButton = screen.getByLabelText('zoom-in');
211+
const zoomOutButton = screen.getByLabelText('zoom-out');
212212

213213
fireEvent.click(zoomInButton);
214214
fireEvent.click(zoomOutButton);
@@ -500,7 +500,7 @@ describe('Mermaid Plugin', () => {
500500
container.querySelector = mockQuerySelector;
501501
}
502502

503-
const downloadButton = screen.getByRole('button', { name: 'download' });
503+
const downloadButton = screen.getByLabelText('download');
504504
fireEvent.click(downloadButton);
505505

506506
// Wait for async operations
@@ -542,7 +542,7 @@ describe('Mermaid Plugin', () => {
542542
container.querySelector = mockQuerySelector;
543543
}
544544

545-
const downloadButton = screen.getByRole('button', { name: 'download' });
545+
const downloadButton = screen.getByLabelText('download');
546546
fireEvent.click(downloadButton);
547547

548548
// Should not throw and should return early

‎packages/x-markdown/src/plugins/Mermaid/index.tsx‎

Lines changed: 45 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { CopyOutlined, DownloadOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
22
import useXComponentConfig from '@ant-design/x/es/_util/hooks/use-x-component-config';
3+
import Actions from '@ant-design/x/es/actions';
4+
import { ItemType } from '@ant-design/x/es/actions/interface';
35
import useLocale from '@ant-design/x/es/locale/useLocale';
46
import useXProviderContext from '@ant-design/x/es/x-provider/hooks/use-x-provider-context';
57
import locale_EN from '@ant-design/x/locale/en_US';
6-
import { Button, message, Segmented, Space, Tooltip } from 'antd';
8+
import { Button, message, Segmented, Tooltip } from 'antd';
79
import classnames from 'classnames';
810
import throttle from 'lodash.throttle';
911
import mermaid from 'mermaid';
@@ -226,6 +228,47 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
226228
if (header === null) return null;
227229
if (header) return header;
228230

231+
const items: ItemType[] = [
232+
{
233+
key: 'copy',
234+
icon: <CopyOutlined />,
235+
label: contextLocale.copy,
236+
onItemClick: handleCopyCode,
237+
},
238+
...(renderType === RenderType.Image
239+
? [
240+
{
241+
key: 'zoomIn',
242+
icon: <ZoomInOutlined />,
243+
label: contextLocale.zoomIn,
244+
onItemClick: handleZoomIn,
245+
},
246+
{
247+
key: 'zoomOut',
248+
icon: <ZoomOutOutlined />,
249+
label: contextLocale.zoomOut,
250+
onItemClick: handleZoomOut,
251+
},
252+
{
253+
key: 'zoomReset',
254+
actionRender: () => (
255+
<Tooltip title={contextLocale.zoomReset}>
256+
<Button type="text" size="small" onClick={handleReset}>
257+
{contextLocale.zoomReset}
258+
</Button>
259+
</Tooltip>
260+
),
261+
},
262+
{
263+
key: 'download',
264+
icon: <DownloadOutlined />,
265+
label: contextLocale.download,
266+
onItemClick: handleDownload,
267+
},
268+
]
269+
: []),
270+
];
271+
229272
return (
230273
<div
231274
className={classnames(
@@ -244,39 +287,7 @@ const Mermaid: React.FC<MermaidProps> = React.memo((props) => {
244287
value={renderType}
245288
onChange={setRenderType}
246289
/>
247-
<Space>
248-
<Tooltip title={contextLocale.copy}>
249-
<Button type="text" size="small" icon={<CopyOutlined />} onClick={handleCopyCode} />
250-
</Tooltip>
251-
{renderType === RenderType.Image ? (
252-
<>
253-
<Tooltip title={contextLocale.zoomOut}>
254-
<Button type="text" size="small" icon={<ZoomInOutlined />} onClick={handleZoomIn} />
255-
</Tooltip>
256-
<Tooltip title={contextLocale.zoomIn}>
257-
<Button
258-
type="text"
259-
size="small"
260-
icon={<ZoomOutOutlined />}
261-
onClick={handleZoomOut}
262-
/>
263-
</Tooltip>
264-
<Tooltip title={contextLocale.zoomReset}>
265-
<Button type="text" size="small" onClick={handleReset}>
266-
{contextLocale.zoomReset}
267-
</Button>
268-
</Tooltip>
269-
<Tooltip title={contextLocale.download}>
270-
<Button
271-
type="text"
272-
size="small"
273-
icon={<DownloadOutlined />}
274-
onClick={handleDownload}
275-
/>
276-
</Tooltip>
277-
</>
278-
) : null}
279-
</Space>
290+
<Actions items={items} />
280291
</div>
281292
);
282293
};

‎packages/x/components/locale/zh_CN.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ const localeValues: Required<xLocale & xMarkdownLocale> = {
2424
Mermaid: {
2525
copySuccess: '复制成功',
2626
copy: '复制代码',
27-
zoomIn: '缩小',
28-
zoomOut: '放大',
27+
zoomIn: '放大',
28+
zoomOut: '缩小',
2929
zoomReset: '重置',
3030
download: '下载',
3131
code: '代码',

0 commit comments

Comments
 (0)