Skip to content

Commit b3743ed

Browse files
jaywcjlovejaywcjlove
committed
feat: add commands Internationalization example. ##621 
1 parent c7d5acd commit b3743ed

File tree

4 files changed

+279
-0
lines changed

4 files changed

+279
-0
lines changed

‎core/README.md

+21
Original file line numberDiff line numberDiff line change
@@ -502,6 +502,27 @@ export default function App() {
502502
}
503503
```
504504

505+
Internationalization Example, You can refer to `commands-cn` for internationalization.
506+
507+
```jsx mdx:preview
508+
import React, { useContext } from "react";
509+
import MDEditor, { commands } from "@uiw/react-md-editor";
510+
import { getCommands, getExtraCommands } from "@uiw/react-md-editor/commands-cn";
511+
512+
export default function App() {
513+
const [value, setValue] = React.useState("**Hello world!!!**");
514+
return (
515+
<MDEditor
516+
value={value}
517+
preview="edit"
518+
commands={[...getCommands()]}
519+
extraCommands={[...getExtraCommands()]}
520+
onChange={(val) => setValue(val)}
521+
/>
522+
);
523+
}
524+
```
525+
505526
### Editor Font Size
506527

507528
[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/markdown-editor-for-react-uiwjs-react-md-editor-issues-425-2epmgh?fontsize=14&hidenavigation=1&theme=dark)

‎core/commands-cn.d.ts

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
declare module '@uiw/react-md-editor/commands-cn' {
2+
import { type ICommand } from '@uiw/react-md-editor/esm/commands';
3+
import { divider } from '@uiw/react-md-editor/esm/commands/divider';
4+
import { group } from '@uiw/react-md-editor/esm/commands/group';
5+
let bold: ICommand;
6+
let code: ICommand;
7+
let codeBlock: ICommand;
8+
let comment: ICommand;
9+
let fullscreen: ICommand;
10+
let hr: ICommand;
11+
let image: ICommand;
12+
let italic: ICommand;
13+
let link: ICommand;
14+
let checkedListCommand: ICommand;
15+
let orderedListCommand: ICommand;
16+
let unorderedListCommand: ICommand;
17+
let codeEdit: ICommand;
18+
let codeLive: ICommand;
19+
let codePreview: ICommand;
20+
let quote: ICommand;
21+
let strikethrough: ICommand;
22+
let issue: ICommand;
23+
let title: ICommand;
24+
let title1: ICommand;
25+
let title2: ICommand;
26+
let title3: ICommand;
27+
let title4: ICommand;
28+
let title5: ICommand;
29+
let title6: ICommand;
30+
let table: ICommand;
31+
let help: ICommand;
32+
export const getCommands: () => ICommand[];
33+
export const getExtraCommands: () => ICommand[];
34+
export {
35+
title,
36+
title1,
37+
title2,
38+
title3,
39+
title4,
40+
title5,
41+
title6,
42+
bold,
43+
codeBlock,
44+
comment,
45+
italic,
46+
strikethrough,
47+
hr,
48+
group,
49+
divider,
50+
link,
51+
quote,
52+
code,
53+
image,
54+
unorderedListCommand,
55+
orderedListCommand,
56+
checkedListCommand,
57+
table,
58+
issue,
59+
help,
60+
codeEdit,
61+
codeLive,
62+
codePreview,
63+
fullscreen,
64+
};
65+
}

‎core/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@
2525
"import": "./esm/commands/index.js",
2626
"types": "./lib/commands/index.d.ts",
2727
"require": "./lib/commands/index.js"
28+
},
29+
"./commands-cn": {
30+
"import": "./esm/commands/index.cn.js",
31+
"types": "./lib/commands/index.cn.d.ts",
32+
"require": "./lib/commands/index.cn.js"
2833
}
2934
},
3035
"scripts": {
@@ -50,6 +55,7 @@
5055
"markdown-editor.css",
5156
"nohighlight.d.ts",
5257
"commands.d.ts",
58+
"commands-cn.d.ts",
5359
"lib",
5460
"dist",
5561
"esm",

‎core/src/commands/index.cn.ts

+187
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import { type ICommand } from './';
2+
import { divider } from './divider';
3+
import { group } from './group';
4+
5+
import { bold as boldInit } from './bold';
6+
import { code as codeInit, codeBlock as codeBlockInit } from './code';
7+
import { comment as commentInit } from './comment';
8+
import { fullscreen as fullscreenInit } from './fullscreen';
9+
import { hr as hrInit } from './hr';
10+
import { image as imageInit } from './image';
11+
import { italic as italicInit } from './italic';
12+
import { link as linkInit } from './link';
13+
import {
14+
checkedListCommand as checkedListCommandInit,
15+
orderedListCommand as orderedListCommandInit,
16+
unorderedListCommand as unorderedListCommandInit,
17+
} from './list';
18+
import { codeEdit as codeEditInit, codeLive as codeLiveInit, codePreview as codePreviewInit } from './preview';
19+
import { quote as quoteInit } from './quote';
20+
import { strikethrough as strikethroughInit } from './strikeThrough';
21+
import { issue as issueInit } from './issue';
22+
import { title as titleInit } from './title';
23+
import { title1 as title1Init } from './title1';
24+
import { title2 as title2Init } from './title2';
25+
import { title3 as title3Init } from './title3';
26+
import { title4 as title4Init } from './title4';
27+
import { title5 as title5Init } from './title5';
28+
import { title6 as title6Init } from './title6';
29+
import { table as tableInit } from './table';
30+
import { help as helpInit } from './help';
31+
32+
let bold: ICommand = {
33+
...boldInit,
34+
buttonProps: { 'aria-label': '添加粗体文本(ctrl + b)', title: '添加粗体文本(ctrl + b)' },
35+
};
36+
let code: ICommand = { ...codeInit, buttonProps: { 'aria-label': '插入代码(ctrl + j)', title: '插入代码(ctrl + j)' } };
37+
let codeBlock: ICommand = {
38+
...codeBlockInit,
39+
buttonProps: { 'aria-label': '插入代码块(ctrl + shift + j)', title: '插入代码块(ctrl + shift + j)' },
40+
};
41+
let comment: ICommand = {
42+
...commentInit,
43+
buttonProps: { 'aria-label': '插入注释(ctrl + /)', title: '插入注释(ctrl + /)' },
44+
};
45+
let fullscreen: ICommand = {
46+
...fullscreenInit,
47+
buttonProps: { 'aria-label': '切换全屏(ctrl + 0)', title: '切换全屏(ctrl + 0)' },
48+
};
49+
let hr: ICommand = { ...hrInit, buttonProps: { 'aria-label': '插入HR (ctrl + h)', title: '插入HR (ctrl + h)' } };
50+
let image: ICommand = {
51+
...imageInit,
52+
buttonProps: { 'aria-label': '添加图像(ctrl + k)', title: '添加图像(ctrl + k)' },
53+
};
54+
let italic: ICommand = {
55+
...italicInit,
56+
buttonProps: { 'aria-label': '添加斜体文本(ctrl + i)', title: '添加斜体文本(ctrl + i)' },
57+
};
58+
let link: ICommand = { ...linkInit, buttonProps: { 'aria-label': '添加链接(ctrl + l)', title: '添加链接(ctrl + l)' } };
59+
let checkedListCommand: ICommand = {
60+
...checkedListCommandInit,
61+
buttonProps: { 'aria-label': '添加检查列表(ctrl + shift + c)', title: '添加检查列表(ctrl + shift + c)' },
62+
};
63+
let orderedListCommand: ICommand = {
64+
...orderedListCommandInit,
65+
buttonProps: { 'aria-label': '添加有序列表(ctrl + shift + o)', title: '添加有序列表(ctrl + shift + o)' },
66+
};
67+
let unorderedListCommand: ICommand = {
68+
...unorderedListCommandInit,
69+
buttonProps: {
70+
'aria-label': '添加无序列表(ctrl + shift + u)',
71+
title: '添加无序列表(ctrl + shift + u)',
72+
},
73+
};
74+
let codeEdit: ICommand = {
75+
...codeEditInit,
76+
buttonProps: { 'aria-label': '编辑代码(ctrl + 7)', title: '编辑代码(ctrl + 7)' },
77+
};
78+
let codeLive: ICommand = {
79+
...codeLiveInit,
80+
buttonProps: { 'aria-label': '实时代码(ctrl + 8)', title: '实时代码(ctrl + 8)' },
81+
};
82+
let codePreview: ICommand = {
83+
...codePreviewInit,
84+
buttonProps: { 'aria-label': '预览代码(ctrl + 9)', title: '预览代码(ctrl + 9)' },
85+
};
86+
let quote: ICommand = {
87+
...quoteInit,
88+
buttonProps: { 'aria-label': '预览代码(ctrl + 9)', title: '预览代码(ctrl + 9)' },
89+
};
90+
91+
let strikethrough: ICommand = {
92+
...strikethroughInit,
93+
buttonProps: {
94+
'aria-label': 'Add strikethrough text (ctrl + shift + x)',
95+
title: 'Add strikethrough text (ctrl + shift + x)',
96+
},
97+
};
98+
let issue: ICommand = { ...issueInit, buttonProps: { 'aria-label': '添加 issue', title: '添加 issue' } };
99+
let title: ICommand = {
100+
...titleInit,
101+
buttonProps: { 'aria-label': '插入 title (ctrl + 1)', title: '插入 title (ctrl + 1)' },
102+
};
103+
let title1: ICommand = {
104+
...title1Init,
105+
buttonProps: { 'aria-label': '插入 title1 (ctrl + 1)', title: '插入 title1 (ctrl + 1)' },
106+
};
107+
let title2: ICommand = {
108+
...title2Init,
109+
buttonProps: { 'aria-label': '插入 title2 (ctrl + 2)', title: '插入 title2 (ctrl + 2)' },
110+
};
111+
let title3: ICommand = {
112+
...title3Init,
113+
buttonProps: { 'aria-label': '插入 title3 (ctrl + 3)', title: '插入 title3 (ctrl + 3)' },
114+
};
115+
let title4: ICommand = {
116+
...title4Init,
117+
buttonProps: { 'aria-label': '插入 title4 (ctrl + 4)', title: '插入 title4 (ctrl + 4)' },
118+
};
119+
let title5: ICommand = {
120+
...title5Init,
121+
buttonProps: { 'aria-label': '插入 title5 (ctrl + 5)', title: '插入 title5 (ctrl + 5)' },
122+
};
123+
let title6: ICommand = {
124+
...title6Init,
125+
buttonProps: { 'aria-label': '插入 title6 (ctrl + 6)', title: '插入 title6 (ctrl + 6)' },
126+
};
127+
let table: ICommand = { ...tableInit, buttonProps: { 'aria-label': '添加表格', title: '添加表格' } };
128+
let help: ICommand = { ...helpInit, buttonProps: { 'aria-label': '打开帮助', title: '打开帮助' } };
129+
130+
export const getCommands: () => ICommand[] = () => [
131+
bold,
132+
italic,
133+
strikethrough,
134+
hr,
135+
group([title1, title2, title3, title4, title5, title6], {
136+
name: 'title',
137+
groupName: 'title',
138+
buttonProps: { 'aria-label': '插入标题', title: 'I插入标题' },
139+
}),
140+
divider,
141+
link,
142+
quote,
143+
code,
144+
codeBlock,
145+
comment,
146+
image,
147+
table,
148+
divider,
149+
unorderedListCommand,
150+
orderedListCommand,
151+
checkedListCommand,
152+
divider,
153+
help,
154+
];
155+
156+
export const getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];
157+
export {
158+
title,
159+
title1,
160+
title2,
161+
title3,
162+
title4,
163+
title5,
164+
title6,
165+
bold,
166+
codeBlock,
167+
comment,
168+
italic,
169+
strikethrough,
170+
hr,
171+
group,
172+
divider,
173+
link,
174+
quote,
175+
code,
176+
image,
177+
unorderedListCommand,
178+
orderedListCommand,
179+
checkedListCommand,
180+
table,
181+
issue,
182+
help,
183+
codeEdit,
184+
codeLive,
185+
codePreview,
186+
fullscreen,
187+
};

0 commit comments

Comments
 (0)