DOC-2578: Add Labels and Groups for Context Toolbar Buttons.

Author: kemister85

antora.yml

@@ -10,7 +10,7 @@ asciidoc:
     companyurl: https://www.tiny.cloud
     cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js
     tdcdnurl: https://cdn.tiny.cloud/1/_your_api_key_/tinydrive/7/tinydrive.min.js
-    tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7/tinymce.min.js
+    tinymce_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/7-dev/tinymce.min.js
     tinydrive_live_demo_url: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinydrive/7/tinydrive.min.js
     webcomponent_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-webcomponent@2/dist/tinymce-webcomponent.min.js
     jquery_url: https://cdn.jsdelivr.net/npm/@tinymce/tinymce-jquery@2/dist/tinymce-jquery.min.js

modules/ROOT/examples/live-demos/context-toolbar-labels/index.html

@@ -0,0 +1,9 @@
+<textarea id="context-toolbar-labels">
+  <p>Clicking on the example image below will show the newly configured context toolbar.</p>
+
+  {{logofordemoshtml}}
+
+  <p>Select a word in this sentence, to see the other newly configured context toolbar.</p>
+
+  <p>Clicking on text should not invoke the context toolbar</p>
+</textarea>

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 }'
+});

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-vwxyz 1 changelog entry>
 // #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.
 

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.