Skip to content

Commit a9ed87c

Browse files
silverwindwxiaoguang
silverwind
and
wxiaoguang
authored
Fix EasyMDE toolbar (#24489)
Fixes #24486 The "clean block" button is gone because I could not find a matching octicon. Order of buttons is roughly equal to textarea. <img width="824" alt="Screenshot 2023-05-02 at 21 10 00" src="https://user-images.githubusercontent.com/115237/235762593-ceccb260-e665-4932-ac8a-ef6fe8406a3c.png"> --------- Co-authored-by: wxiaoguang <[email protected]>
1 parent 3ae9976 commit a9ed87c

File tree

4 files changed

+217
-81
lines changed

4 files changed

+217
-81
lines changed

‎web_src/js/features/comp/ComboMarkdownEditor.js

Lines changed: 11 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js';
88
import {emojiString} from '../emoji.js';
99
import {renderPreviewPanelContent} from '../repo-editor.js';
1010
import {matchEmoji, matchMention} from '../../utils/match.js';
11-
import {svg} from '../../svg.js';
11+
import {easyMDEToolbarActions} from './EasyMDEToolbarActions.js';
1212

1313
let elementIdCounter = 0;
1414

@@ -206,66 +206,20 @@ class ComboMarkdownEditor {
206206

207207
prepareEasyMDEToolbarActions() {
208208
this.easyMDEToolbarDefault = [
209-
'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
210-
'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
211-
'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', 'horizontal-rule', '|', 'clean-block', '|',
212-
'gitea-switch-to-textarea',
209+
'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3',
210+
'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', 'gitea-checkbox-empty',
211+
'gitea-checkbox-checked', '|', 'unordered-list', 'ordered-list', '|', 'link', 'image',
212+
'table', 'horizontal-rule', '|', 'gitea-switch-to-textarea',
213213
];
214-
215-
this.easyMDEToolbarActions = {
216-
'gitea-checkbox-empty': {
217-
action(e) {
218-
const cm = e.codemirror;
219-
cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
220-
cm.focus();
221-
},
222-
icon: svg('gitea-empty-checkbox'),
223-
title: 'Add Checkbox (empty)',
224-
},
225-
'gitea-checkbox-checked': {
226-
action(e) {
227-
const cm = e.codemirror;
228-
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
229-
cm.focus();
230-
},
231-
icon: svg('octicon-checkbox'),
232-
title: 'Add Checkbox (checked)',
233-
},
234-
'gitea-switch-to-textarea': {
235-
action: () => {
236-
this.userPreferredEditor = 'textarea';
237-
this.switchToTextarea();
238-
},
239-
icon: svg('octicon-file'),
240-
title: 'Revert to simple textarea',
241-
},
242-
'gitea-code-inline': {
243-
action(e) {
244-
const cm = e.codemirror;
245-
const selection = cm.getSelection();
246-
cm.replaceSelection(`\`${selection}\``);
247-
if (!selection) {
248-
const cursorPos = cm.getCursor();
249-
cm.setCursor(cursorPos.line, cursorPos.ch - 1);
250-
}
251-
cm.focus();
252-
},
253-
icon: svg('octicon-chevron-right'),
254-
title: 'Add Inline Code',
255-
}
256-
};
257214
}
258215

259-
parseEasyMDEToolbar(actions) {
216+
parseEasyMDEToolbar(EasyMDE, actions) {
217+
this.easyMDEToolbarActions = this.easyMDEToolbarActions || easyMDEToolbarActions(EasyMDE, this);
260218
const processed = [];
261219
for (const action of actions) {
262-
if (action.startsWith('gitea-')) {
263-
const giteaAction = this.easyMDEToolbarActions[action];
264-
if (!giteaAction) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
265-
processed.push(giteaAction);
266-
} else {
267-
processed.push(action);
268-
}
220+
const actionButton = this.easyMDEToolbarActions[action];
221+
if (!actionButton) throw new Error(`Unknown EasyMDE toolbar action ${action}`);
222+
processed.push(actionButton);
269223
}
270224
return processed;
271225
}
@@ -293,7 +247,7 @@ class ComboMarkdownEditor {
293247
nativeSpellcheck: true,
294248
...this.options.easyMDEOptions,
295249
};
296-
easyMDEOpt.toolbar = this.parseEasyMDEToolbar(easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
250+
easyMDEOpt.toolbar = this.parseEasyMDEToolbar(EasyMDE, easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault);
297251

298252
this.easyMDE = new EasyMDE(easyMDEOpt);
299253
this.easyMDE.codemirror.on('change', (...args) => {this.options?.onContentChanged?.(this, ...args)});

‎web_src/js/features/comp/EasyMDEToolbarActions.js

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
import {svg} from '../../svg.js';
2+
3+
export function easyMDEToolbarActions(EasyMDE, editor) {
4+
const actions = {
5+
'|': '|',
6+
'heading-1': {
7+
action: EasyMDE.toggleHeading1,
8+
icon: svg('octicon-heading'),
9+
title: 'Heading 1',
10+
},
11+
'heading-2': {
12+
action: EasyMDE.toggleHeading2,
13+
icon: svg('octicon-heading'),
14+
title: 'Heading 2',
15+
},
16+
'heading-3': {
17+
action: EasyMDE.toggleHeading3,
18+
icon: svg('octicon-heading'),
19+
title: 'Heading 3',
20+
},
21+
'heading-smaller': {
22+
action: EasyMDE.toggleHeadingSmaller,
23+
icon: svg('octicon-heading'),
24+
title: 'Decrease Heading',
25+
},
26+
'heading-bigger': {
27+
action: EasyMDE.toggleHeadingBigger,
28+
icon: svg('octicon-heading'),
29+
title: 'Increase Heading',
30+
},
31+
'bold': {
32+
action: EasyMDE.toggleBold,
33+
icon: svg('octicon-bold'),
34+
title: 'Bold',
35+
},
36+
'italic': {
37+
action: EasyMDE.toggleItalic,
38+
icon: svg('octicon-italic'),
39+
title: 'Italic',
40+
},
41+
'strikethrough': {
42+
action: EasyMDE.toggleStrikethrough,
43+
icon: svg('octicon-strikethrough'),
44+
title: 'Strikethrough',
45+
},
46+
'quote': {
47+
action: EasyMDE.toggleBlockquote,
48+
icon: svg('octicon-quote'),
49+
title: 'Quote',
50+
},
51+
'code': {
52+
action: EasyMDE.toggleCodeBlock,
53+
icon: svg('octicon-code'),
54+
title: 'Code',
55+
},
56+
'link': {
57+
action: EasyMDE.drawLink,
58+
icon: svg('octicon-link'),
59+
title: 'Link',
60+
},
61+
'unordered-list': {
62+
action: EasyMDE.toggleUnorderedList,
63+
icon: svg('octicon-list-unordered'),
64+
title: 'Unordered List',
65+
},
66+
'ordered-list': {
67+
action: EasyMDE.toggleOrderedList,
68+
icon: svg('octicon-list-ordered'),
69+
title: 'Ordered List',
70+
},
71+
'image': {
72+
action: EasyMDE.drawImage,
73+
icon: svg('octicon-image'),
74+
title: 'Image',
75+
},
76+
'table': {
77+
action: EasyMDE.drawTable,
78+
icon: svg('octicon-table'),
79+
title: 'Table',
80+
},
81+
'horizontal-rule': {
82+
action: EasyMDE.drawHorizontalRule,
83+
icon: svg('octicon-horizontal-rule'),
84+
title: 'Horizontal Rule',
85+
},
86+
'preview': {
87+
action: EasyMDE.togglePreview,
88+
icon: svg('octicon-eye'),
89+
title: 'Preview',
90+
},
91+
'fullscreen': {
92+
action: EasyMDE.toggleFullScreen,
93+
icon: svg('octicon-screen-full'),
94+
title: 'Fullscreen',
95+
},
96+
'side-by-side': {
97+
action: EasyMDE.toggleSideBySide,
98+
icon: svg('octicon-columns'),
99+
title: 'Side by Side',
100+
},
101+
102+
// gitea's custom actions
103+
'gitea-checkbox-empty': {
104+
action(e) {
105+
const cm = e.codemirror;
106+
cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
107+
cm.focus();
108+
},
109+
icon: svg('gitea-empty-checkbox'),
110+
title: 'Add Checkbox (empty)',
111+
},
112+
'gitea-checkbox-checked': {
113+
action(e) {
114+
const cm = e.codemirror;
115+
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
116+
cm.focus();
117+
},
118+
icon: svg('octicon-checkbox'),
119+
title: 'Add Checkbox (checked)',
120+
},
121+
'gitea-switch-to-textarea': {
122+
action: () => {
123+
editor.userPreferredEditor = 'textarea';
124+
editor.switchToTextarea();
125+
},
126+
icon: svg('octicon-arrow-switch'),
127+
title: 'Revert to simple textarea',
128+
},
129+
'gitea-code-inline': {
130+
action(e) {
131+
const cm = e.codemirror;
132+
const selection = cm.getSelection();
133+
cm.replaceSelection(`\`${selection}\``);
134+
if (!selection) {
135+
const cursorPos = cm.getCursor();
136+
cm.setCursor(cursorPos.line, cursorPos.ch - 1);
137+
}
138+
cm.focus();
139+
},
140+
icon: svg('octicon-chevron-right'),
141+
title: 'Add Inline Code',
142+
}
143+
};
144+
145+
for (const [key, value] of Object.entries(actions)) {
146+
if (typeof value !== 'string') {
147+
value.name = key;
148+
}
149+
}
150+
151+
return actions;
152+
}

‎web_src/js/features/repo-wiki.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ async function initRepoWikiFormEditor() {
5858
'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
5959
'unordered-list', 'ordered-list', '|',
6060
'link', 'image', 'table', 'horizontal-rule', '|',
61-
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
61+
'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
6262
],
6363
},
6464
});

0 commit comments

Comments
 (0)