Merge pull request #16112 from ckeditor/ck/app-menu-bar-toc

Internal (document-outline): Added Table of contents button in default menu bar structure. Internal (restricted-editing): Refactored the restricted editing buttons in the menu bar.
ckeditor · Mar 28, 2024 · 0994381 · 0994381
2 parents d73d3e3 + 8cff45e
commit 0994381
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 33 deletions.
diff --git a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts b/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts
@@ -14,12 +14,17 @@ import {
 	addListToDropdown,
 	MenuBarMenuListItemButtonView,
 	type ButtonExecuteEvent,
-	type ListDropdownItemDefinition
+	type ListDropdownItemDefinition, MenuBarMenuView, MenuBarMenuListView, MenuBarMenuListItemView
 } from 'ckeditor5/src/ui.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 
 import lockIcon from '../theme/icons/contentlock.svg';
 
+const BUTTON_TEMPLATES = [
+	{ commandName: 'goToPreviousRestrictedEditingException', label: 'Previous editable region', keystroke: 'Shift+Tab' },
+	{ commandName: 'goToNextRestrictedEditingException', label: 'Next editable region', keystroke: 'Tab' }
+];
+
 /**
  * The restricted editing mode UI feature.
  *
@@ -45,16 +50,9 @@ export default class RestrictedEditingModeUI extends Plugin {
 			const dropdownView = createDropdown( locale );
 			const listItems = new Collection<ListDropdownItemDefinition>();
 
-			listItems.add( this._getButtonDefinition(
-				'goToPreviousRestrictedEditingException',
-				t( 'Previous editable region' ),
-				'Shift+Tab'
-			) );
-			listItems.add( this._getButtonDefinition(
-				'goToNextRestrictedEditingException',
-				t( 'Next editable region' ),
-				'Tab'
-			) );
+			BUTTON_TEMPLATES.forEach( ( { commandName, label, keystroke } ) => {
+				listItems.add( this._getButtonDefinition( commandName, t( label ), keystroke ) );
+			} );
 
 			addListToDropdown( dropdownView, listItems );
 
@@ -75,6 +73,34 @@ export default class RestrictedEditingModeUI extends Plugin {
 			return dropdownView;
 		} );
 
+		editor.ui.componentFactory.add( 'menuBar:restrictedEditing', locale => {
+			const menuView = new MenuBarMenuView( locale );
+			const listView = new MenuBarMenuListView( locale );
+
+			listView.set( {
+				ariaLabel: t( 'Navigate editable regions' ),
+				role: 'menu'
+			} );
+
+			menuView.buttonView.set( {
+				label: t( 'Navigate editable regions' )
+			} );
+
+			menuView.panelView.children.add( listView );
+
+			BUTTON_TEMPLATES.forEach( ( { commandName, label, keystroke } ) => {
+				const listItemView = new MenuBarMenuListItemView( locale, menuView );
+				const buttonView = this._createMenuBarButton( t( label ), commandName, keystroke );
+
+				buttonView.delegate( 'execute' ).to( menuView );
+
+				listItemView.children.add( buttonView );
+				listView.items.add( listItemView );
+			} );
+
+			return menuView;
+		} );
+
 		editor.ui.componentFactory.add(
 			'menuBar:restrictedEditingPrevious',
 			() => this._createMenuBarButton( t( 'Previous editable region' ), 'goToPreviousRestrictedEditingException', 'Shift+Tab' )
@@ -97,7 +123,6 @@ export default class RestrictedEditingModeUI extends Plugin {
 		view.set( {
 			label,
 			keystroke,
-			tooltip: true,
 			isEnabled: true,
 			isOn: false
 		} );

diff --git a/packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.js b/packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.js
@@ -51,6 +51,9 @@ async function startStandardEditingMode() {
 				'mergeTableCells'
 			]
 		},
+		menuBar: {
+			isVisible: true
+		},
 		updateSourceElementOnDestroy: true
 	} );
 }
@@ -80,7 +83,10 @@ async function startRestrictedEditingMode() {
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ],
 			tableToolbar: [ 'bold', 'italic' ]
 		},
-		updateSourceElementOnDestroy: true
+		updateSourceElementOnDestroy: true,
+		menuBar: {
+			isVisible: true
+		}
 	} );
 }
 

diff --git a/packages/ckeditor5-ui/src/menubar/utils.ts b/packages/ckeditor5-ui/src/menubar/utils.ts
@@ -481,25 +481,8 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 			{
 				groupId: 'standardEditingMode',
 				items: [
-					'menuBar:restrictedEditingException'
-				]
-			},
-			{
-				groupId: 'restrictedEditing',
-				items: [
-					{
-						menuId: 'restrictedEditing',
-						label: 'Restricted editing',
-						groups: [
-							{
-								groupId: 'restrictedEditingMode',
-								items: [
-									'menuBar:restrictedEditingPrevious',
-									'menuBar:restrictedEditingNext'
-								]
-							}
-						]
-					}
+					'menuBar:restrictedEditingException',
+					'menuBar:restrictedEditing'
 				]
 			}
 		]
@@ -521,7 +504,8 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 					'menuBar:htmlEmbed',
 					'menuBar:pageBreak',
 					'menuBar:horizontalLine',
-					'menuBar:codeBlock'
+					'menuBar:codeBlock',
+					'menuBar:tableOfContents'
 				]
 			}
 		]