diff --git a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts b/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts index 93697212265..7560efa7e09 100644 --- 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(); - 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 index 88b181de9a5..bcaa2f4be63 100644 --- 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 index e34153d6b87..4f2cdd046ea 100644 --- a/packages/ckeditor5-ui/src/menubar/utils.ts +++ b/packages/ckeditor5-ui/src/menubar/utils.ts @@ -481,25 +481,8 @@ export const DefaultMenuBarItems: DeepReadonly = { 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 = 'menuBar:htmlEmbed', 'menuBar:pageBreak', 'menuBar:horizontalLine', - 'menuBar:codeBlock' + 'menuBar:codeBlock', + 'menuBar:tableOfContents' ] } ]