Merge pull request #16035 from ckeditor/ck/app-menu-bar-highlight

Internal (highlight): Added menu bar integration. Related to #15894.
ckeditor · Mar 21, 2024 · 6a586f8 · 6a586f8
2 parents 3c7a1a6 + 749522d
commit 6a586f8
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 2 deletions.
diff --git 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<HighlightOption> ) {
+		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
@@ -524,6 +524,7 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 					'menuBar:heading',
 					'menuBar:fontSize',
 					'menuBar:fontFamily',
+					'menuBar:highlight',
 					'menuBar:textPartLanguage'
 				]
 			},