Skip to content

Commit deafe20

Browse files
makhnatkinmakhnatkin
authored
feat(toolbars): updated flattenPreset (#531)
1 parent 300bfdf commit deafe20

File tree

4 files changed

+353
-24
lines changed

4 files changed

+353
-24
lines changed

‎src/bundle/MarkdownEditorView.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from './
2020
import {useMarkdownEditorContext} from './context';
2121
import {EditorSettings, EditorSettingsProps} from './settings';
2222
import {stickyCn} from './sticky';
23-
import {getToolbarsConfigs} from './toolbar/utils';
23+
import {getToolbarsConfigs} from './toolbar/utils/toolbarsConfigs';
2424
import type {MarkdownEditorMode} from './types';
2525

2626
import '../styles/styles.scss';

‎src/bundle/toolbar/utils/flattenPreset.test.tsx

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
import React from 'react';
2+
3+
import {ToolbarDataType} from '../../../toolbar/types';
4+
import type {WToolbarData} from '../../config/wysiwyg';
5+
6+
import {flattenPreset} from './flattenPreset';
7+
8+
interface IconProps {}
9+
const Icon: React.FC<IconProps> = () => {
10+
return <div />;
11+
};
12+
13+
interface WToolbarColorsProps {}
14+
const WToolbarColors: React.FC<WToolbarColorsProps> = () => {
15+
return <div />;
16+
};
17+
18+
const input: WToolbarData = [
19+
[
20+
{
21+
type: ToolbarDataType.SingleButton,
22+
id: 'undo',
23+
icon: {data: Icon},
24+
hotkey: 'mod+z',
25+
hintWhenDisabled: false,
26+
exec: () => {},
27+
isActive: () => false,
28+
isEnable: () => false,
29+
title: '',
30+
},
31+
{
32+
type: ToolbarDataType.SingleButton,
33+
id: 'redo',
34+
icon: {data: Icon},
35+
hotkey: 'mod+shift+z',
36+
hintWhenDisabled: false,
37+
exec: () => {},
38+
isActive: () => false,
39+
isEnable: () => false,
40+
title: '',
41+
},
42+
],
43+
[
44+
{
45+
type: ToolbarDataType.SingleButton,
46+
id: 'bold',
47+
icon: {data: Icon},
48+
hotkey: 'mod+b',
49+
exec: () => {},
50+
isActive: () => false,
51+
isEnable: () => false,
52+
title: '',
53+
},
54+
{
55+
type: ToolbarDataType.SingleButton,
56+
id: 'italic',
57+
icon: {data: Icon},
58+
hotkey: 'mod+i',
59+
exec: () => {},
60+
isActive: () => false,
61+
isEnable: () => false,
62+
title: '',
63+
},
64+
{
65+
type: ToolbarDataType.SingleButton,
66+
id: 'underline',
67+
icon: {data: Icon},
68+
hotkey: 'mod+u',
69+
exec: () => {},
70+
isActive: () => false,
71+
isEnable: () => false,
72+
title: '',
73+
},
74+
{
75+
type: ToolbarDataType.SingleButton,
76+
id: 'strike',
77+
icon: {data: Icon},
78+
hotkey: 'mod+shift+s',
79+
exec: () => {},
80+
isActive: () => false,
81+
isEnable: () => false,
82+
title: '',
83+
},
84+
{
85+
type: ToolbarDataType.SingleButton,
86+
id: 'mono',
87+
icon: {data: Icon},
88+
exec: () => {},
89+
isActive: () => false,
90+
isEnable: () => false,
91+
title: '',
92+
},
93+
{
94+
type: ToolbarDataType.SingleButton,
95+
id: 'mark',
96+
icon: {data: Icon},
97+
exec: () => {},
98+
isActive: () => false,
99+
isEnable: () => false,
100+
title: '',
101+
},
102+
],
103+
[
104+
{
105+
type: ToolbarDataType.ListButton,
106+
id: 'heading',
107+
icon: {data: Icon},
108+
withArrow: true,
109+
title: '',
110+
data: [
111+
{
112+
id: 'paragraph',
113+
icon: {data: Icon},
114+
hotkey: 'cmd+alt+0',
115+
exec: () => {},
116+
isActive: () => false,
117+
isEnable: () => false,
118+
title: '',
119+
},
120+
{
121+
id: 'heading1',
122+
icon: {data: Icon},
123+
hotkey: 'cmd+alt+1',
124+
exec: () => {},
125+
isActive: () => false,
126+
isEnable: () => false,
127+
title: '',
128+
},
129+
{
130+
id: 'heading2',
131+
icon: {data: Icon},
132+
hotkey: 'cmd+alt+2',
133+
exec: () => {},
134+
isActive: () => false,
135+
isEnable: () => false,
136+
title: '',
137+
},
138+
{
139+
id: 'heading3',
140+
icon: {data: Icon},
141+
hotkey: 'cmd+alt+3',
142+
exec: () => {},
143+
isActive: () => false,
144+
isEnable: () => false,
145+
title: '',
146+
},
147+
{
148+
id: 'heading4',
149+
icon: {data: Icon},
150+
hotkey: 'cmd+alt+4',
151+
exec: () => {},
152+
isActive: () => false,
153+
isEnable: () => false,
154+
title: '',
155+
},
156+
{
157+
id: 'heading5',
158+
icon: {data: Icon},
159+
hotkey: 'cmd+alt+5',
160+
exec: () => {},
161+
isActive: () => false,
162+
isEnable: () => false,
163+
title: '',
164+
},
165+
{
166+
id: 'heading6',
167+
icon: {data: Icon},
168+
hotkey: 'cmd+alt+6',
169+
exec: () => {},
170+
isActive: () => false,
171+
isEnable: () => false,
172+
title: '',
173+
},
174+
],
175+
},
176+
{
177+
type: ToolbarDataType.ListButton,
178+
id: 'lists',
179+
icon: {data: Icon},
180+
withArrow: true,
181+
title: '',
182+
data: [
183+
{
184+
id: 'bulletList',
185+
icon: {data: Icon},
186+
hotkey: 'mod+shift+l',
187+
exec: () => {},
188+
isActive: () => false,
189+
isEnable: () => false,
190+
title: '',
191+
},
192+
{
193+
id: 'orderedList',
194+
icon: {data: Icon},
195+
hotkey: 'mod+shift+m',
196+
exec: () => {},
197+
isActive: () => false,
198+
isEnable: () => false,
199+
title: '',
200+
},
201+
{
202+
id: 'sinkListItem',
203+
icon: {data: Icon},
204+
hotkey: 'tab',
205+
exec: () => {},
206+
isActive: () => false,
207+
isEnable: () => false,
208+
title: '',
209+
},
210+
{
211+
id: 'liftListItem',
212+
icon: {data: Icon},
213+
hotkey: 'shift+tab',
214+
exec: () => {},
215+
isActive: () => false,
216+
isEnable: () => false,
217+
title: '',
218+
},
219+
],
220+
},
221+
{
222+
type: ToolbarDataType.ReactComponent,
223+
id: 'colorify',
224+
width: 42,
225+
component: WToolbarColors,
226+
},
227+
{
228+
type: ToolbarDataType.SingleButton,
229+
id: 'link',
230+
icon: {data: Icon},
231+
hotkey: 'mod+k',
232+
exec: () => {},
233+
isActive: () => false,
234+
isEnable: () => false,
235+
title: '',
236+
},
237+
{
238+
type: ToolbarDataType.SingleButton,
239+
id: 'note',
240+
icon: {data: Icon},
241+
hotkey: 'cmd+alt+8',
242+
exec: () => {},
243+
isActive: () => false,
244+
isEnable: () => false,
245+
title: '',
246+
},
247+
{
248+
type: ToolbarDataType.SingleButton,
249+
id: 'cut',
250+
icon: {data: Icon},
251+
hotkey: 'cmd+alt+7',
252+
exec: () => {},
253+
isActive: () => false,
254+
isEnable: () => false,
255+
title: '',
256+
},
257+
{
258+
type: ToolbarDataType.SingleButton,
259+
id: 'quote',
260+
icon: {data: Icon},
261+
hotkey: 'mod+shift+.',
262+
exec: () => {},
263+
isActive: () => false,
264+
isEnable: () => false,
265+
title: '',
266+
},
267+
],
268+
];
269+
270+
const expectedIds = [
271+
'undo',
272+
'redo',
273+
'bold',
274+
'italic',
275+
'underline',
276+
'strike',
277+
'mono',
278+
'mark',
279+
'paragraph',
280+
'heading1',
281+
'heading2',
282+
'heading3',
283+
'heading4',
284+
'heading5',
285+
'heading6',
286+
'bulletList',
287+
'orderedList',
288+
'sinkListItem',
289+
'liftListItem',
290+
'colorify',
291+
'link',
292+
'note',
293+
'cut',
294+
'quote',
295+
];
296+
297+
describe('flattenPreset', () => {
298+
it('should flatten nested toolbar data and return a correctly flattened structure', () => {
299+
const result = flattenPreset(input);
300+
const expectedOutput = expectedIds.map((id) => expect.objectContaining({id}));
301+
302+
expect(result).toEqual(expect.arrayContaining(expectedOutput));
303+
});
304+
305+
it('should return a list of flattened IDs', () => {
306+
const result = flattenPreset(input);
307+
const resultIds = result.map((item) => item.id);
308+
309+
expect(resultIds).toEqual(expectedIds);
310+
});
311+
});

‎src/bundle/toolbar/utils/flattenPreset.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {ToolbarDataType} from '../../../toolbar/types';
2+
import type {MToolbarData, MToolbarItemData, WToolbarData, WToolbarItemData} from '../../config';
3+
4+
export const flattenPreset = <T extends WToolbarData | MToolbarData>(
5+
config: T,
6+
): T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[] => {
7+
return config.flat().reduce<(WToolbarItemData | MToolbarItemData)[]>((acc, item) => {
8+
if (item.type === ToolbarDataType.ListButton && Array.isArray(item.data)) {
9+
return acc.concat(item.data);
10+
}
11+
12+
acc.push(item as WToolbarItemData | MToolbarItemData);
13+
return acc;
14+
}, []) as unknown as T extends WToolbarData ? WToolbarItemData[] : MToolbarItemData[];
15+
};

0 commit comments

Comments
 (0)