Skip to content

Commit 8a3240f

Browse files
mejo-mejo-
committed
feat(menu): Group block elements in a submenu
Contributes to: #2836 Signed-off-by: Jonas <[email protected]>
1 parent aade0e7 commit 8a3240f

File tree

5 files changed

+75
-70
lines changed

5 files changed

+75
-70
lines changed

‎cypress/e2e/workspace.spec.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -194,15 +194,15 @@ describe('Workspace', function() {
194194
const actionName = `callout-${type}`
195195

196196
// enable callout
197-
cy.getSubmenuEntry('callouts', actionName).click()
197+
cy.getSubmenuEntry('blocks', actionName).click()
198198

199199
// check content
200200
cy.getContent()
201201
.find(`.callout.callout--${type}`)
202202
.should('contain', 'Callout')
203203

204204
// disable
205-
cy.getSubmenuEntry('callouts', actionName)
205+
cy.getSubmenuEntry('blocks', actionName)
206206
.should('have.class', 'is-active')
207207
.click()
208208
})
@@ -212,19 +212,19 @@ describe('Workspace', function() {
212212
const [first, ...rest] = types
213213

214214
// enable callout
215-
cy.getSubmenuEntry('callouts', `callout-${first}`)
215+
cy.getSubmenuEntry('blocks', `callout-${first}`)
216216
.click()
217217

218218
cy.wrap(rest).each(type => {
219219
const actionName = `callout-${type}`
220-
cy.getSubmenuEntry('callouts', actionName).click()
220+
cy.getSubmenuEntry('blocks', actionName).click()
221221
cy.getContent().find(`.callout.callout--${type}`)
222222
.should('contain', 'Callout')
223223
})
224224

225-
cy.getSubmenuEntry('callouts', `callout-${rest.at(-1)}`)
225+
cy.getSubmenuEntry('blocks', `callout-${rest.at(-1)}`)
226226
.click()
227-
cy.getMenuEntry('callouts')
227+
cy.getMenuEntry('blocks')
228228
.should('not.have.class', 'is-active')
229229
})
230230
})

‎src/components/Menu/ActionList.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ export default {
103103
},
104104
labelWithSelected() {
105105
if (this.currentChild) {
106-
// TRANSLATORS: examples - Headings, "Heading 1" is selected - Callouts, "Info" is selected
106+
// TRANSLATORS: examples - Headings, "Heading 1" is selected - Blocks, "Info callout" is selected
107107
return t('text', '{menuItemName}, "{selectedSubMenuItemName}" is selected', {
108108
menuItemName: this.actionEntry.label,
109109
selectedSubMenuItemName: this.currentChild.label,

‎src/components/Menu/entries.js

+65-62
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import {
77
Undo,
88
Redo,
9+
CardTextOutline,
910
CodeTags,
1011
Danger,
1112
Emoticon,
@@ -59,7 +60,7 @@ export default [
5960
keyModifiers: [MODIFIERS.Mod],
6061
icon: Undo,
6162
action: (command) => command.undo(),
62-
priority: 7,
63+
priority: 8,
6364
},
6465
{
6566
key: 'redo',
@@ -68,7 +69,7 @@ export default [
6869
keyModifiers: [MODIFIERS.Mod],
6970
icon: Redo,
7071
action: (command) => command.redo(),
71-
priority: 10,
72+
priority: 11,
7273
},
7374
{
7475
key: 'bold',
@@ -80,7 +81,7 @@ export default [
8081
action: (command) => {
8182
return command.toggleBold()
8283
},
83-
priority: 8,
84+
priority: 9,
8485
},
8586
{
8687
key: 'italic',
@@ -92,7 +93,7 @@ export default [
9293
action: (command) => {
9394
return command.toggleItalic()
9495
},
95-
priority: 9,
96+
priority: 10,
9697
},
9798
{
9899
key: 'underline',
@@ -104,7 +105,7 @@ export default [
104105
action: (command) => {
105106
return command.toggleUnderline()
106107
},
107-
priority: 13,
108+
priority: 12,
108109
},
109110
{
110111
key: 'strikethrough',
@@ -116,7 +117,7 @@ export default [
116117
action: (command) => {
117118
return command.toggleStrike()
118119
},
119-
priority: 14,
120+
priority: 13,
120121
},
121122
{
122123
key: 'headings',
@@ -132,7 +133,7 @@ export default [
132133
keyChar: '1',
133134
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
134135
icon: FormatHeader1,
135-
isActive: ['heading', { level: 1 }],
136+
isActive: { name: 'heading', attributes: { level: 1 } },
136137
action: (command) => {
137138
return command.toggleHeading({ level: 1 })
138139
},
@@ -143,7 +144,7 @@ export default [
143144
keyChar: '2',
144145
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
145146
icon: FormatHeader2,
146-
isActive: ['heading', { level: 2 }],
147+
isActive: { name: 'heading', attributes: { level: 2 } },
147148
action: (command) => {
148149
return command.toggleHeading({ level: 2 })
149150
},
@@ -154,7 +155,7 @@ export default [
154155
keyChar: '3',
155156
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
156157
icon: FormatHeader3,
157-
isActive: ['heading', { level: 3 }],
158+
isActive: { name: 'heading', attributes: { level: 3 } },
158159
action: (command) => {
159160
return command.toggleHeading({ level: 3 })
160161
},
@@ -164,7 +165,7 @@ export default [
164165
label: t('text', 'Heading 4'),
165166
keyChar: '4',
166167
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
167-
isActive: ['heading', { level: 4 }],
168+
isActive: { name: 'heading', attributes: { level: 4 } },
168169
icon: FormatHeader4,
169170
action: (command) => {
170171
return command.toggleHeading({ level: 4 })
@@ -175,7 +176,7 @@ export default [
175176
label: t('text', 'Heading 5'),
176177
keyChar: '5',
177178
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
178-
isActive: ['heading', { level: 5 }],
179+
isActive: { name: 'heading', attributes: { level: 5 } },
179180
icon: FormatHeader5,
180181
action: (command) => {
181182
return command.toggleHeading({ level: 5 })
@@ -186,7 +187,7 @@ export default [
186187
label: t('text', 'Heading 6'),
187188
keyChar: '6',
188189
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
189-
isActive: ['heading', { level: 6 }],
190+
isActive: { name: 'heading', attributes: { level: 6 } },
190191
icon: FormatHeader6,
191192
action: (command) => {
192193
return command.toggleHeading({ level: 6 })
@@ -220,7 +221,7 @@ export default [
220221
label: t('text', 'Lists'),
221222
keyChar: '7…9',
222223
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
223-
isActive: [{ isList: true }],
224+
isActive: ['bulletList', 'orderedList', 'taskList'],
224225
icon: FormatListBulleted,
225226
children: [
226227
{
@@ -287,82 +288,76 @@ export default [
287288
priority: 2,
288289
},
289290
{
290-
key: 'insert-link',
291-
label: t('text', 'Insert link'),
292-
isActive: 'link',
293-
icon: LinkIcon,
294-
component: ActionInsertLink,
295-
priority: 3,
296-
},
297-
{
298-
key: 'blockquote',
299-
label: t('text', 'Blockquote'),
300-
keyChar: 'b',
301-
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
302-
isActive: 'blockquote',
303-
icon: FormatQuote,
304-
action: (command) => {
305-
return command.toggleBlockquote()
306-
},
307-
priority: 11,
308-
},
309-
{
310-
key: 'callouts',
311-
label: t('text', 'Callouts'),
291+
key: 'blocks',
292+
label: t('text', 'Blocks'),
312293
visible: false,
313-
icon: Info,
314-
isActive: 'callout',
294+
icon: CardTextOutline,
295+
isActive: ['blockquote', 'codeBlock', 'callout'],
315296
children: [
297+
{
298+
key: 'blockquote',
299+
label: t('text', 'Blockquote'),
300+
keyChar: 'b',
301+
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Shift],
302+
isActive: 'blockquote',
303+
icon: FormatQuote,
304+
action: (command) => {
305+
return command.toggleBlockquote()
306+
},
307+
},
308+
{
309+
key: 'code-block',
310+
label: t('text', 'Code block'),
311+
keyChar: 'c',
312+
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Alt],
313+
isActive: 'codeBlock',
314+
icon: CodeTags,
315+
action: (command) => {
316+
return command.toggleCodeBlock()
317+
},
318+
},
319+
{
320+
key: 'blocks-separator',
321+
isSeparator: true,
322+
},
316323
{
317324
key: 'callout-info',
318-
label: t('text', 'Info'),
319-
isActive: ['callout', { type: 'info' }],
325+
label: t('text', 'Info callout'),
326+
isActive: { name: 'callout', attributes: { type: 'info' } },
320327
icon: Info,
321328
action: (command) => {
322329
return command.toggleCallout({ type: 'info' })
323330
},
324331
},
325332
{
326333
key: 'callout-success',
327-
label: t('text', 'Success'),
328-
isActive: ['callout', { type: 'success' }],
334+
label: t('text', 'Success callout'),
335+
isActive: { name: 'callout', attributes: { type: 'success' } },
329336
icon: Positive,
330337
action: (command) => {
331338
return command.toggleCallout({ type: 'success' })
332339
},
333340
},
334341
{
335342
key: 'callout-warn',
336-
label: t('text', 'Warning'),
337-
isActive: ['callout', { type: 'warn' }],
343+
label: t('text', 'Warning callout'),
344+
isActive: { name: 'callout', attributes: { type: 'warn' } },
338345
icon: Warn,
339346
action: (command) => {
340347
return command.toggleCallout({ type: 'warn' })
341348
},
342349
},
343350
{
344351
key: 'callout-error',
345-
label: t('text', 'Danger'),
346-
isActive: ['callout', { type: 'error' }],
352+
label: t('text', 'Danger callout'),
353+
isActive: { name: 'callout', attributes: { type: 'error' } },
347354
icon: Danger,
348355
action: (command) => {
349356
return command.toggleCallout({ type: 'error' })
350357
},
351358
},
352359
],
353-
priority: 4,
354-
},
355-
{
356-
key: 'code-block',
357-
label: t('text', 'Code block'),
358-
keyChar: 'c',
359-
keyModifiers: [MODIFIERS.Mod, MODIFIERS.Alt],
360-
isActive: 'codeBlock',
361-
icon: CodeTags,
362-
action: (command) => {
363-
return command.toggleCodeBlock()
364-
},
365-
priority: 12,
360+
priority: 3,
366361
},
367362
{
368363
key: 'table',
@@ -372,7 +367,15 @@ export default [
372367
action: (command) => {
373368
return command.insertTable()
374369
},
375-
priority: 15,
370+
priority: 4,
371+
},
372+
{
373+
key: 'insert-link',
374+
label: t('text', 'Insert link'),
375+
isActive: 'link',
376+
icon: LinkIcon,
377+
component: ActionInsertLink,
378+
priority: 5,
376379
},
377380
{
378381
key: 'details',
@@ -382,7 +385,7 @@ export default [
382385
action: (command) => {
383386
return command.toggleDetails()
384387
},
385-
priority: 16,
388+
priority: 14,
386389
},
387390
{
388391
key: 'emoji-picker',
@@ -392,13 +395,13 @@ export default [
392395
action: (command, emojiObject = {}) => {
393396
return command.emoji(emojiObject)
394397
},
395-
priority: 5,
398+
priority: 6,
396399
},
397400
{
398401
key: 'insert-attachment',
399402
label: t('text', 'Insert attachment'),
400403
icon: Paperclip,
401404
component: ActionAttachmentUpload,
402-
priority: 6,
405+
priority: 7,
403406
},
404407
]

‎src/components/Suggestion/LinkPicker/suggestions.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ const formattingSuggestions = (query) => {
6565
...menuEntries.find(e => e.key === 'headings').children,
6666
...menuEntries.find(e => e.key === 'lists').children,
6767
...menuEntries.filter(e => e.action && !filterOut(e)),
68-
...menuEntries.find(e => e.key === 'callouts').children,
68+
...menuEntries.find(e => e.key === 'blocks').children,
6969
{
7070
...menuEntries.find(e => e.key === 'emoji-picker'),
7171
action: (command) => command.insertContent(':'),

‎src/components/icons.js

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
/* eslint-disable camelcase */
77

88
import MDI_AlphabeticalVariant from 'vue-material-design-icons/AlphabeticalVariant.vue'
9+
import MDI_CardTextOutline from 'vue-material-design-icons/CardTextOutline.vue'
910
import MDI_Close from 'vue-material-design-icons/Close.vue'
1011
import MDI_Check from 'vue-material-design-icons/Check.vue'
1112
import MDI_CircleMedium from 'vue-material-design-icons/CircleMedium.vue'
@@ -90,6 +91,7 @@ export const AlphabeticalVariant = makeIcon(MDI_AlphabeticalVariant)
9091
export const AlignHorizontalCenter = makeIcon(MDI_AlignHorizontalCenter)
9192
export const AlignHorizontalLeft = makeIcon(MDI_AlignHorizontalLeft)
9293
export const AlignHorizontalRight = makeIcon(MDI_AlignHorizontalRight)
94+
export const CardTextOutline = makeIcon(MDI_CardTextOutline)
9395
export const Close = makeIcon(MDI_Close)
9496
export const Check = makeIcon(MDI_Check)
9597
export const CodeTags = makeIcon(MDI_CodeTags)

0 commit comments

Comments
 (0)