Merge pull request #15947 from ckeditor/ck/app-menu-bar-list

Internal (list): Added menu bar integration. Related to #15894.

packages/ckeditor5-list/src/list/listui.ts

@@ -7,8 +7,7 @@
  * @module list/list/listui
  */
 
-import { createUIComponent } from './utils.js';
-
+import { createUIComponents } from './utils.js';
 import { icons, Plugin } from 'ckeditor5/src/core.js';
 
 /**
@@ -30,7 +29,7 @@ export default class ListUI extends Plugin {
 		const t = this.editor.t;
 
 		// Create two buttons and link them with numberedList and bulletedList commands.
-		createUIComponent( this.editor, 'numberedList', t( 'Numbered List' ), icons.numberedList );
-		createUIComponent( this.editor, 'bulletedList', t( 'Bulleted List' ), icons.bulletedList );
+		createUIComponents( this.editor, 'numberedList', t( 'Numbered List' ), icons.numberedList );
+		createUIComponents( this.editor, 'bulletedList', t( 'Bulleted List' ), icons.bulletedList );
 	}
 }

packages/ckeditor5-list/src/list/utils.ts

@@ -8,43 +8,65 @@
  */
 
 import type { Editor } from 'ckeditor5/src/core.js';
-import { ButtonView, type ButtonExecuteEvent } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView, type ButtonExecuteEvent } from 'ckeditor5/src/ui.js';
 
 /**
- * Helper method for creating a UI button and linking it with an appropriate command.
+ * Helper method for creating toolbar and menu buttons and linking them with an appropriate command.
  *
  * @internal
  * @param editor The editor instance to which the UI component will be added.
  * @param commandName The name of the command.
  * @param label The button label.
  * @param icon The source of the icon.
  */
-export function createUIComponent(
+export function createUIComponents(
 	editor: Editor,
 	commandName: 'bulletedList' | 'numberedList' | 'todoList',
 	label: string,
 	icon: string
 ): void {
-	editor.ui.componentFactory.add( commandName, locale => {
-		const command = editor.commands.get( commandName )!;
-		const buttonView = new ButtonView( locale );
+	editor.ui.componentFactory.add( commandName, () => {
+		const buttonView = _createButton( ButtonView, editor, commandName, label, icon );
 
 		buttonView.set( {
-			label,
-			icon,
 			tooltip: true,
 			isToggleable: true
 		} );
 
-		// Bind button model to command.
-		buttonView.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+		return buttonView;
+	} );
 
-		// Execute command.
-		buttonView.on<ButtonExecuteEvent>( 'execute', () => {
-			editor.execute( commandName );
-			editor.editing.view.focus();
-		} );
+	editor.ui.componentFactory.add( `menuBar:${ commandName }`, () =>
+		_createButton( MenuBarMenuListItemButtonView, editor, commandName, label, icon )
+	);
+}
 
-		return buttonView;
+/**
+ * Creates a button to use either in toolbar or in menu bar.
+ */
+function _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>(
+	ButtonClass: T,
+	editor: Editor,
+	commandName: 'bulletedList' | 'numberedList' | 'todoList',
+	label: string,
+	icon: string
+): InstanceType<T> {
+	const command = editor.commands.get( commandName )!;
+	const view = new ButtonClass( editor.locale ) as InstanceType<T>;
+
+	view.set( {
+		label,
+		icon
 	} );
+
+	// Bind button model to command.
+	view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+
+	// Execute the command.
+	view.on<ButtonExecuteEvent>( 'execute', () => {
+		editor.execute( commandName );
+		editor.editing.view.focus();
+	} );
+
+	return view;
 }