Skip to content

Commit 60c1945

Browse files
committed
DOC-3131: New subtoolbar support for context toolbars.
1 parent be90ec1 commit 60c1945

File tree

3 files changed

+70
-0
lines changed

3 files changed

+70
-0
lines changed

modules/ROOT/pages/7.8.0-release-notes.adoc

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,47 @@ For information on using Enhanced Skins & Icon Packs, see: xref:enhanced-skins-a
114114

115115
// CCFR here.
116116

117+
=== New subtoolbar support for context toolbars.
118+
// #TINY-11748
119+
120+
{productname} {release-version} introduces support for multi-level context toolbars, enabling more advanced and interactive editing experiences directly within the editor interface. Previously, developers had to manually configure separate toolbars and manage transitions between them using predicate logic. This release simplifies that process by adding a new API for defining and navigating subtoolbars, similar to the existing context form functionality.
121+
122+
A new `+navigateback+` button streamlines navigation between toolbar levels, while improved focus management ensures input fields are automatically focused when switching toolbars. These enhancements provide a more flexible, intuitive, and responsive workflow for both developers and end users.
123+
124+
.Example of a multi-level context toolbar configuration:
125+
[source, js]
126+
----
127+
tinymce.init({
128+
selector: 'textarea',
129+
height: 350,
130+
setup: (editor) => {
131+
editor.ui.registry.addContextToolbar('bar', {
132+
predicate: () => true,
133+
items: 'bold italic | undo redo | subbar1',
134+
position: 'line',
135+
scope: 'editor'
136+
});
137+
138+
editor.ui.registry.addContextToolbar('subbar1', {
139+
launch: { text: 'Subbar 1' },
140+
items: 'navigateback bold italic | undo redo | subbar2'
141+
});
142+
143+
editor.ui.registry.addContextToolbar('subbar2', {
144+
launch: { text: 'Subbar 2' },
145+
items: 'navigateback bold italic | undo redo | subbar3'
146+
});
147+
148+
editor.ui.registry.addContextToolbar('subbar3', {
149+
launch: { text: 'Subbar 3' },
150+
items: 'navigateback bold italic | undo redo'
151+
});
152+
}
153+
});
154+
----
155+
156+
For more information on context toolbars, see xref:contexttoolbar.adoc[Context toolbars].
157+
117158

118159
[[additions]]
119160
== Additions

modules/ROOT/pages/contexttoolbar.adoc

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,34 @@ items: [
6060
]
6161
----
6262

63+
[NOTE]
64+
For editors using 7.8.0+, context toolbars also support the `+navigateback+` button for multi-level toolbar navigation. This built-in button allows returning to the previous context toolbar when using nested toolbars.
65+
66+
.Example of a multi-level context toolbar configuration:
67+
[source, js]
68+
----
69+
tinymce.init({
70+
selector: 'textarea',
71+
setup: (editor) => {
72+
// Register the main context toolbar named 'bar'
73+
editor.ui.registry.addContextToolbar('bar', {
74+
predicate: () => true, // Always show the toolbar when triggered
75+
items: 'bold italic | undo redo | subbar1', // Toolbar buttons and nested toolbar trigger
76+
position: 'line',
77+
scope: 'editor'
78+
});
79+
80+
// Register a nested context toolbar named 'subbar1'
81+
editor.ui.registry.addContextToolbar('subbar1', {
82+
launch: { text: 'Subbar 1' }, // Button label that appears in the parent toolbar
83+
items: 'navigateback bold italic | undo redo | subbar2'
84+
// 'navigateback' allows users to return to the previous toolbar
85+
// 'subbar2' is another nested toolbar (can be defined similarly)
86+
});
87+
}
88+
});
89+
----
90+
6391
liveDemo::context-toolbar-labels[height="600", tab="js"]
6492

6593
== Launching a context toolbar programmatically

modules/ROOT/partials/toolbar-button-ids/core-toolbar-buttons.adoc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ The `+fontsize+` and `+fontsizeinput+` toolbar buttons should not be placed in a
3030
|`+italic+` |Applies the italic format to the current selection.
3131
|`+language+` |Dropdown list with languages to apply to the selection. This button requires the xref:content-localization.adoc#content_langs[`+content_langs+` option].
3232
|`+lineheight+` |Dropdown list with line heights to apply to selection.
33+
|`+navigateback+` | Allows navigation between subtoolbar levels for multi-level toolbar configurations.
3334
|`+newdocument+` |Creates a new document.
3435
|`+outdent+` |Outdents the current list item or block element.
3536
|`+paste+` |Pastes the current clipboard into the editor.

0 commit comments

Comments
 (0)