diff --git a/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html new file mode 100644 index 0000000000..172316e060 --- /dev/null +++ b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.html @@ -0,0 +1,9 @@ + diff --git a/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js new file mode 100644 index 0000000000..7c0d94b2dc --- /dev/null +++ b/modules/ROOT/examples/live-demos/context-toolbar-labels/index.js @@ -0,0 +1,34 @@ +tinymce.init({ + selector: 'textarea#context-toolbar-labels', + height: 350, + setup: (editor) => { + editor.ui.registry.addContextToolbar('imagealignment', { + predicate: (node) => node.nodeName.toLowerCase() === 'img', + position: 'node', + scope: 'node', + items: [ + { + name: 'Formatting', + items: ['alignleft', 'aligncenter', 'alignright'] + }, + { + label: 'Copy', + items: ['copy', 'paste'] + } + ], + }); + + editor.ui.registry.addContextToolbar('textselection', { + predicate: (node) => !editor.selection.isCollapsed(), + position: 'selection', + scope: 'node', + items: [ + { + name: 'Format', + items: ['bold', 'italic', 'underline'] + }, + ], + }); + }, + content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' +}); diff --git a/modules/ROOT/pages/7.6.0-release-notes.adoc b/modules/ROOT/pages/7.6.0-release-notes.adoc index 6b9a99c2c5..e1b8f53d36 100644 --- a/modules/ROOT/pages/7.6.0-release-notes.adoc +++ b/modules/ROOT/pages/7.6.0-release-notes.adoc @@ -213,7 +213,33 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a === // #TINY-vwxyz1 -== New `+disabled+` option for disabling all user interactions +=== Add Labels and Groups for Context Toolbar Buttons +// #TINY-11095 + +The release of {productname} {release-version} introduces the ability to organize context toolbar buttons into groups with optional labels or titles. This enhancement, available from {productname} 7.6.0 onward, improves toolbar usability by enabling clearer categorization of buttons. + +The `items` object structure now supports defining groups with an optional `name` property for titles or a `label` property for identifying the group. This feature allows developers to create more intuitive and accessible toolbars by visually segmenting functionality. + +Example of a context toolbar configuration with groups and labels: + +.Example +[source,js] +---- +items: [ + { + name: 'Formatting', // Optional, used as the group's title + items: [ 'bold', 'italic' ] // Array of registered button names + }, + { + label: 'History', // Optional, used as a label for the group + items: [ 'undo', 'redo' ] // Array of registered button names + }, +] +---- + +For more details on configuring context toolbar groups and labels, see: xref:contexttoolbar.adoc#add-labels-and-groups-for-context-toolbar-buttons[Context Toolbar]. + +=== New `+disabled+` option for disabling all user interactions A new `+disabled+` option has been introduced to {productname} in version {release-version}. This option allows integrators to disable all user interactions with the editor, including cursor placement, content modifications, and UI components. When set to `+true+`, the editor behaves similarly to the readonly mode changes introduced in {productname} 7.4.0 but ensures complete non-interactivity. diff --git a/modules/ROOT/pages/contexttoolbar.adoc b/modules/ROOT/pages/contexttoolbar.adoc index dc57291ff4..90bdca8a10 100644 --- a/modules/ROOT/pages/contexttoolbar.adoc +++ b/modules/ROOT/pages/contexttoolbar.adoc @@ -27,6 +27,41 @@ This example shows how the quickbars plugin adds the standard selection context liveDemo::context-toolbar[height="600", tab="js"] +[[add-labels-and-groups-for-context-toolbar-buttons]] +== Add labels and groups for context toolbar buttons + +From {productname} 7.6.0 onward, registering a context toolbar allows specifying `items` as an object that supports grouping with optional names and labels. This improvement enhances toolbar usability by organizing buttons into titled or labeled groups. + +The object structure takes two optional properties: `name` and `label`. + +* `name`: property is used as the group's title for the group that contains the buttons. +* `label`: property is used as a label for each group of buttons. + +[NOTE] +If neither `name` nor `label` is specified, the behavior defaults to ungrouped buttons. + +The object structure for `items` is as follows: + +.Example of a context toolbar configuration with groups and labels +[source,js] +---- +items: [ + { + name: 'Formatting', // Optional, used as the group's title + items: [ 'bold', 'italic' ] // Array of registered button names + }, + { + label: 'History', // Optional, used as a label for the group + items: [ 'undo', 'redo' ] // Array of registered button names + }, + { + items: [ 'undo', 'italic' ] // No name or label specified, default behavior applies + } +] +---- + +liveDemo::context-toolbar-labels[height="600", tab="js"] + == Launching a context toolbar programmatically There is an `+editor+` event called `+contexttoolbar-show+` that can be fired to show a context toolbar at the current selection. The event takes a parameter `+toolbarKey+` which specifies the name of the registered context form or context toolbar to show.