diff --git a/packages/ckeditor5-highlight/src/highlightui.ts b/packages/ckeditor5-highlight/src/highlightui.ts index 53981429293..4fb5ccfa9dd 100644 --- a/packages/ckeditor5-highlight/src/highlightui.ts +++ b/packages/ckeditor5-highlight/src/highlightui.ts @@ -9,11 +9,16 @@ import { Plugin, icons } from 'ckeditor5/src/core.js'; import { + addToolbarToDropdown, + createDropdown, ButtonView, + ListSeparatorView, + MenuBarMenuView, + MenuBarMenuListView, + MenuBarMenuListItemView, + MenuBarMenuListItemButtonView, SplitButtonView, ToolbarSeparatorView, - createDropdown, - addToolbarToDropdown, type DropdownView } from 'ckeditor5/src/ui.js'; @@ -89,6 +94,8 @@ export default class HighlightUI extends Plugin { this._addRemoveHighlightButton(); this._addDropdown( options ); + + this._addMenuBarButton( options ); } /** @@ -252,6 +259,81 @@ export default class HighlightUI extends Plugin { return dropdownView; } ); } + + /** + * Creates the menu bar button for highlight including submenu with available options. + */ + private _addMenuBarButton( options: Array ) { + const editor = this.editor; + const t = editor.t; + + editor.ui.componentFactory.add( 'menuBar:highlight', locale => { + const command: HighlightCommand = editor.commands.get( 'highlight' )!; + const menuView = new MenuBarMenuView( locale ); + + menuView.buttonView.set( { + label: t( 'Highlight' ), + icon: getIconForType( 'marker' ) + } ); + menuView.buttonView.iconView.fillColor = 'transparent'; + + const listView = new MenuBarMenuListView( locale ); + + for ( const option of options ) { + const listItemView = new MenuBarMenuListItemView( locale, menuView ); + const buttonView = new MenuBarMenuListItemButtonView( locale ); + + buttonView.set( { + label: option.title, + icon: getIconForType( option.type ) + } ); + + buttonView.extendTemplate( { + attributes: { + 'aria-checked': buttonView.bindTemplate.to( 'isOn' ) + } + } ); + + buttonView.delegate( 'execute' ).to( menuView ); + buttonView.bind( 'isOn' ).to( command, 'value', value => value === option.model ); + buttonView.iconView.bind( 'fillColor' ).to( buttonView, 'isOn', value => value ? 'transparent' : option.color ); + + buttonView.on( 'execute', () => { + editor.execute( 'highlight', { value: option.model } ); + + editor.editing.view.focus(); + } ); + + listItemView.children.add( buttonView ); + listView.items.add( listItemView ); + } + + // Add remove highlight button + listView.items.add( new ListSeparatorView( locale ) ); + const listItemView = new MenuBarMenuListItemView( locale, menuView ); + const buttonView = new MenuBarMenuListItemButtonView( locale ); + + buttonView.set( { + label: t( 'Remove highlight' ), + icon: icons.eraser + } ); + + buttonView.delegate( 'execute' ).to( menuView ); + + buttonView.on( 'execute', () => { + editor.execute( 'highlight', { value: null } ); + + editor.editing.view.focus(); + } ); + + listItemView.children.add( buttonView ); + listView.items.add( listItemView ); + + menuView.panelView.children.add( listView ); + + return menuView; + } ); + } } /** diff --git a/packages/ckeditor5-ui/src/menubar/utils.ts b/packages/ckeditor5-ui/src/menubar/utils.ts index 0b4807cf1b3..3251b7c3969 100644 --- a/packages/ckeditor5-ui/src/menubar/utils.ts +++ b/packages/ckeditor5-ui/src/menubar/utils.ts @@ -524,6 +524,7 @@ export const DefaultMenuBarItems: DeepReadonly = 'menuBar:heading', 'menuBar:fontSize', 'menuBar:fontFamily', + 'menuBar:highlight', 'menuBar:textPartLanguage' ] },