Skip to content

Commit 3d43700

Browse files
author
robin
committed
refactor(editor): streamline editor component structure and enhance command methods
- Removed unnecessary conditional rendering in the MDEditor component for the PluginRender. - Simplified the MarkdownEditor component's useEffect hooks for better clarity. - Refactored command methods to utilize self-referencing for improved maintainability.
1 parent 762773c commit 3d43700

3 files changed

Lines changed: 48 additions & 54 deletions

File tree

‎ui/src/components/Editor/MarkdownEditor.tsx‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,42 +55,35 @@ const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
5555
autoFocus,
5656
});
5757

58-
// 初始化内容（只在编辑器创建时执行）
5958
useEffect(() => {
6059
if (!editor) {
6160
return;
6261
}
6362

64-
// 初始化编辑器内容
6563
editor.setValue(value || '');
6664
lastSyncedValueRef.current = value || '';
6765
onEditorReady?.(editor);
68-
}, [editor]); // 只在编辑器创建时执行
66+
}, [editor]);
6967

70-
// 当外部 value 变化时更新（但不是用户输入导致的）
7168
useEffect(() => {
7269
if (!editor) {
7370
return;
7471
}
7572

76-
// 如果 value 和 lastSyncedValueRef 相同，说明是用户输入导致的更新，跳过
7773
if (value === lastSyncedValueRef.current) {
7874
return;
7975
}
8076

81-
// 外部 value 真正变化，更新编辑器
8277
const currentValue = editor.getValue();
8378
if (currentValue !== value) {
8479
editor.setValue(value || '');
8580
lastSyncedValueRef.current = value || '';
8681
}
8782
}, [editor, value]);
8883

89-
// 清理：组件卸载时销毁编辑器
9084
useEffect(() => {
9185
return () => {
9286
if (editor) {
93-
// CodeMirror EditorView 有 destroy 方法
9487
const view = editor as unknown as EditorView;
9588
if (view.destroy) {
9689
view.destroy();

‎ui/src/components/Editor/index.tsx‎

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -123,32 +123,30 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
123123
<div className={classNames('md-editor-wrap rounded', className)}>
124124
<div className="toolbar-wrap px-3 d-flex align-items-center flex-wrap">
125125
<EditorContext.Provider value={currentEditor}>
126-
{currentEditor && (
127-
<PluginRender
128-
type={PluginType.Editor}
129-
className="d-flex align-items-center flex-wrap"
130-
editor={currentEditor}
131-
previewElement={previewRef.current?.element}>
132-
<Heading />
133-
<Bold />
134-
<Italice />
135-
<div className="toolbar-divider" />
136-
<Code />
137-
<LinkItem />
138-
<BlockQuote />
139-
<Image />
140-
<File />
141-
<Table />
142-
<div className="toolbar-divider" />
143-
<OL />
144-
<UL />
145-
<Indent />
146-
<Outdent />
147-
<Hr />
148-
<div className="toolbar-divider" />
149-
<Help />
150-
</PluginRender>
151-
)}
126+
<PluginRender
127+
type={PluginType.Editor}
128+
className="d-flex align-items-center flex-wrap"
129+
editor={currentEditor}
130+
previewElement={previewRef.current?.element}>
131+
<Heading />
132+
<Bold />
133+
<Italice />
134+
<div className="toolbar-divider" />
135+
<Code />
136+
<LinkItem />
137+
<BlockQuote />
138+
<Image />
139+
<File />
140+
<Table />
141+
<div className="toolbar-divider" />
142+
<OL />
143+
<UL />
144+
<Indent />
145+
<Outdent />
146+
<Hr />
147+
<div className="toolbar-divider" />
148+
<Help />
149+
</PluginRender>
152150
</EditorContext.Provider>
153151

154152
<div className="btn-group ms-auto" role="group">

‎ui/src/components/Editor/utils/codemirror/commands.ts‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,8 @@ import { Editor, Level } from '../../types';
3333
* @returns Object containing all command methods
3434
*/
3535
export function createCommandMethods(editor: Editor) {
36-
return {
36+
// Create methods object that allows self-reference
37+
const methods = {
3738
wrapText: (before: string, after = before, defaultText) => {
3839
const range = editor.state.selection.ranges[0];
3940
const selectedText = editor.state.sliceDoc(range.from, range.to);
@@ -79,39 +80,39 @@ export function createCommandMethods(editor: Editor) {
7980
},
8081

8182
insertBold: (text?: string) => {
82-
editor.wrapText('**', '**', text || 'bold text');
83+
methods.wrapText('**', '**', text || 'bold text');
8384
},
8485

8586
insertItalic: (text?: string) => {
86-
editor.wrapText('*', '*', text || 'italic text');
87+
methods.wrapText('*', '*', text || 'italic text');
8788
},
8889

8990
insertCode: (text?: string) => {
90-
editor.wrapText('`', '`', text || 'code');
91+
methods.wrapText('`', '`', text || 'code');
9192
},
9293

9394
insertStrikethrough: (text?: string) => {
94-
editor.wrapText('~~', '~~', text || 'strikethrough text');
95+
methods.wrapText('~~', '~~', text || 'strikethrough text');
9596
},
9697

9798
insertHeading: (level: Level, text?: string) => {
9899
const headingText = '#'.repeat(level);
99-
editor.wrapText(`${headingText} `, '', text || 'heading');
100+
methods.wrapText(`${headingText} `, '', text || 'heading');
100101
},
101102

102103
insertBlockquote: (text?: string) => {
103-
editor.wrapText('> ', '', text || 'quote');
104+
methods.wrapText('> ', '', text || 'quote');
104105
},
105106

106107
insertCodeBlock: (language?: string, code?: string) => {
107108
const lang = language || '';
108109
const codeText = code || '';
109110
const block = `\`\`\`${lang}\n${codeText}\n\`\`\``;
110-
editor.appendBlock(block);
111+
methods.appendBlock(block);
111112
},
112113

113114
insertHorizontalRule: () => {
114-
editor.appendBlock('---');
115+
methods.appendBlock('---');
115116
},
116117

117118
insertOrderedList: () => {
@@ -121,7 +122,7 @@ export function createCommandMethods(editor: Editor) {
121122
if (/^\d+\.\s/.test(lineText)) {
122123
return;
123124
}
124-
editor.replaceLines((lineItem) => {
125+
methods.replaceLines((lineItem) => {
125126
if (lineItem.trim() === '') {
126127
return lineItem;
127128
}
@@ -136,7 +137,7 @@ export function createCommandMethods(editor: Editor) {
136137
if (/^[-*+]\s/.test(lineText)) {
137138
return;
138139
}
139-
editor.replaceLines((lineItem) => {
140+
methods.replaceLines((lineItem) => {
140141
if (lineItem.trim() === '') {
141142
return lineItem;
142143
}
@@ -149,11 +150,11 @@ export function createCommandMethods(editor: Editor) {
149150
const line = editor.state.doc.line(cursor.line);
150151
const lineText = line.text.trim();
151152
if (/^\d+\.\s/.test(lineText)) {
152-
editor.replaceLines((lineItem) => {
153+
methods.replaceLines((lineItem) => {
153154
return lineItem.replace(/^\d+\.\s/, '');
154155
});
155156
} else {
156-
editor.insertOrderedList();
157+
methods.insertOrderedList();
157158
}
158159
},
159160

@@ -162,22 +163,22 @@ export function createCommandMethods(editor: Editor) {
162163
const line = editor.state.doc.line(cursor.line);
163164
const lineText = line.text.trim();
164165
if (/^[-*+]\s/.test(lineText)) {
165-
editor.replaceLines((lineItem) => {
166+
methods.replaceLines((lineItem) => {
166167
return lineItem.replace(/^[-*+]\s/, '');
167168
});
168169
} else {
169-
editor.insertUnorderedList();
170+
methods.insertUnorderedList();
170171
}
171172
},
172173

173174
insertLink: (url: string, text?: string) => {
174175
const linkText = text || url;
175-
editor.wrapText('[', `](${url})`, linkText);
176+
methods.wrapText('[', `](${url})`, linkText);
176177
},
177178

178179
insertImage: (url: string, alt?: string) => {
179180
const altText = alt || '';
180-
editor.wrapText('![', `](${url})`, altText);
181+
methods.wrapText('![', `](${url})`, altText);
181182
},
182183

183184
insertTable: (rows = 3, cols = 3) => {
@@ -192,11 +193,11 @@ export function createCommandMethods(editor: Editor) {
192193
table.push(`| ${'---'.repeat(cols).split('').join(' | ')} |`);
193194
}
194195
}
195-
editor.appendBlock(table.join('\n'));
196+
methods.appendBlock(table.join('\n'));
196197
},
197198

198199
indent: () => {
199-
editor.replaceLines((line) => {
200+
methods.replaceLines((line) => {
200201
if (line.trim() === '') {
201202
return line;
202203
}
@@ -205,7 +206,7 @@ export function createCommandMethods(editor: Editor) {
205206
},
206207

207208
outdent: () => {
208-
editor.replaceLines((line) => {
209+
methods.replaceLines((line) => {
209210
if (line.trim() === '') {
210211
return line;
211212
}
@@ -261,4 +262,6 @@ export function createCommandMethods(editor: Editor) {
261262
return /^[-*+]\s/.test(lineText);
262263
},
263264
};
265+
266+
return methods;
264267
}

0 commit comments

Comments
 (0)