Menu Config
Menu configuration format. Is used for defining Block Tunes Menu items via Block Tool's renderSettings(), Block Tune's render() and Inline Tool's render(). Can be represented as a single item or an array of items of the following structure:
| icon |
string
|
Optional | String with tune's icon svg |
| title |
string
|
Optional | Tune title text |
| type |
'default' | 'separator' | 'html'
|
Optional |
Menu Config item type. 'default' by default
|
| element |
HTMLElement
|
Optional |
HTMLElement to be rendered inside MenuItem. Is used only with type: 'html'
|
| hint |
HintParams
|
Optional | Hint data to be displayed on item hover |
| onActivate |
() => void
|
Optional | Function to be called once tune activated by the user |
| isActive |
boolean | () => boolean
|
Optional | True if tune should be marked as active |
| isDisabled |
boolean
|
Optional | True if tune should be disabled |
| closeOnActivate |
boolean
|
Optional | True if Block Tunes menu should close once the tune is activated. By default, the menu will stay visible after the tune activation |
| toggle |
boolean | string
|
Optional | True if tune should act like a toggle (become highlighted on activation). Alternatively, can be set to toggle group name, which will make the tune behave like radio button. See example |
| confirmation |
MenuConfigItem
|
Optional |
Allows to ask for user confirmation before item activation. Contains settings of the item to be displayed at the place of clicked item. If confirmation setting is set on the tune, it should not contain onActivate callback.
|
| children |
Children
|
Optional | Data of the children items. Children items are the ones that open near trigger item on click/hover in separate popover. |
| title |
string
|
Required | Title text |
| description |
string
|
Optional | Secondary text to be displayed below the title |
| alignment |
'start' | 'center'
|
Optional |
Horizontal alignment of the hint content. Default is 'start'
|
| items |
MenuConfigItem[]
|
Required | List of children items |
{
icon: '<svg>...</svg>',
title: 'Item Title',
onActivate: () => {
// Handle item activation, for example:
document.execCommand(this.commandName);
},
isActive: () => {
// Check if item is currently active, for example:
return document.queryCommandState(this.commandName)
}
}
[
{
icon: '<svg>...</svg>',
title: 'Item 1 Title',
onActivate: () => { ... }
},{
type: 'separator'
},{
icon: '<svg>...</svg>',
title: 'Item 2 Title',
onActivate: () => { ... }
}
]
{
type: 'html',
element: document.createElement('div')
}
{
icon: '<svg>...</svg>',
title: 'Parent Item Title',
children: {
items: [
{
icon: '<svg>...</svg>',
title: 'Child Item Icon 1',
onActivate: () => { ... }
},
{
icon: '<svg>...</svg>',
title: 'Child Item Icon 2',
onActivate: () => { ... }
}
]
}
}
{
icon: '<svg>...</svg>',
title: 'Delete',
confirmation: {
icon: '<svg>...</svg>',
title: 'Are you sure you want to delete?',
onActivate: () => { ... }
},
}