Add menu bar integration to text part language.

packages/ckeditor5-language/src/textpartlanguageui.ts

@@ -8,7 +8,17 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ViewModel, createDropdown, addListToDropdown, type ListDropdownItemDefinition } from 'ckeditor5/src/ui.js';
+import {
+	addListToDropdown,
+	createDropdown,
+	ListSeparatorView,
+	MenuBarMenuView,
+	MenuBarMenuListView,
+	MenuBarMenuListItemView,
+	MenuBarMenuListItemButtonView,
+	ViewModel,
+	type ListDropdownItemDefinition
+} from 'ckeditor5/src/ui.js';
 import { Collection } from 'ckeditor5/src/utils.js';
 import { stringifyLanguageAttribute } from './utils.js';
 import type TextPartLanguageCommand from './textpartlanguagecommand.js';
@@ -37,48 +47,47 @@ export default class TextPartLanguageUI extends Plugin {
 		const removeTitle = t( 'Remove language' );
 		const accessibleLabel = t( 'Language' );
 
-		// Register UI component.
-		editor.ui.componentFactory.add( 'textPartLanguage', locale => {
-			const itemDefinitions = new Collection<ListDropdownItemDefinition>();
-			const titles: Record<string, string> = {};
+		const itemDefinitions = new Collection<ListDropdownItemDefinition>();
+		const titles: Record<string, string> = {};
+		const languageCommand: TextPartLanguageCommand = editor.commands.get( 'textPartLanguage' )!;
+
+		// Item definition with false `languageCode` will behave as remove lang button.
+		itemDefinitions.add( {
+			type: 'button',
+			model: new ViewModel( {
+				label: removeTitle,
+				languageCode: false,
+				withText: true
+			} )
+		} );
 
-			const languageCommand: TextPartLanguageCommand = editor.commands.get( 'textPartLanguage' )!;
+		itemDefinitions.add( {
+			type: 'separator'
+		} );
 
-			// Item definition with false `languageCode` will behave as remove lang button.
-			itemDefinitions.add( {
-				type: 'button',
+		for ( const option of options ) {
+			const def = {
+				type: 'button' as const,
 				model: new ViewModel( {
-					label: removeTitle,
-					languageCode: false,
+					label: option.title,
+					languageCode: option.languageCode,
+					role: 'menuitemradio',
+					textDirection: option.textDirection,
 					withText: true
 				} )
-			} );
-
-			itemDefinitions.add( {
-				type: 'separator'
-			} );
+			};
 
-			for ( const option of options ) {
-				const def = {
-					type: 'button' as const,
-					model: new ViewModel( {
-						label: option.title,
-						languageCode: option.languageCode,
-						role: 'menuitemradio',
-						textDirection: option.textDirection,
-						withText: true
-					} )
-				};
+			const language = stringifyLanguageAttribute( option.languageCode, option.textDirection );
 
-				const language = stringifyLanguageAttribute( option.languageCode, option.textDirection );
+			def.model.bind( 'isOn' ).to( languageCommand, 'value', value => value === language );
 
-				def.model.bind( 'isOn' ).to( languageCommand, 'value', value => value === language );
+			itemDefinitions.add( def );
 
-				itemDefinitions.add( def );
-
-				titles[ language ] = option.title;
-			}
+			titles[ language ] = option.title;
+		}
 
+		// Register UI component.
+		editor.ui.componentFactory.add( 'textPartLanguage', locale => {
 			const dropdownView = createDropdown( locale );
 			addListToDropdown( dropdownView, itemDefinitions, {
 				ariaLabel: accessibleLabel,
@@ -128,5 +137,47 @@ export default class TextPartLanguageUI extends Plugin {
 
 			return dropdownView;
 		} );
+
+		// Register menu bar UI component.
+		editor.ui.componentFactory.add( 'menuBar:textPartLanguage', locale => {
+			const menuView = new MenuBarMenuView( locale );
+
+			menuView.buttonView.set( {
+				label: accessibleLabel
+			} );
+
+			const listView = new MenuBarMenuListView( locale );
+
+			for ( const definition of itemDefinitions ) {
+				if ( definition.type != 'button' ) {
+					listView.items.add( new ListSeparatorView( locale ) );
+					continue;
+				}
+
+				const listItemView = new MenuBarMenuListItemView( locale, menuView );
+				const buttonView = new MenuBarMenuListItemButtonView( locale );
+
+				buttonView.bind( ...Object.keys( definition.model ) as Array<keyof MenuBarMenuListItemButtonView> ).to( definition.model );
+				buttonView.bind( 'ariaChecked' ).to( buttonView, 'isOn' );
+				buttonView.delegate( 'execute' ).to( menuView );
+
+				buttonView.on( 'execute', () => {
+					languageCommand.execute( {
+						languageCode: ( definition.model as any ).languageCode,
+						textDirection: ( definition.model as any ).textDirection
+					} );
+
+					editor.editing.view.focus();
+				} );
+
+				listItemView.children.add( buttonView );
+				listView.items.add( listItemView );
+			}
+
+			menuView.bind( 'isEnabled' ).to( languageCommand, 'isEnabled' );
+			menuView.panelView.children.add( listView );
+
+			return menuView;
+		} );
 	}
 }

packages/ckeditor5-ui/src/index.ts

@@ -81,6 +81,7 @@ export * from './labeledfield/utils.js';
 
 export { default as ListItemGroupView } from './list/listitemgroupview.js';
 export { default as ListItemView } from './list/listitemview.js';
+export { default as ListSeparatorView } from './list/listseparatorview.js';
 export { default as ListView } from './list/listview.js';
 
 export { default as Notification } from './notification/notification.js';

packages/ckeditor5-ui/src/menubar/utils.ts

@@ -523,7 +523,8 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 				items: [
 					'menuBar:heading',
 					'menuBar:fontSize',
-					'menuBar:fontFamily'
+					'menuBar:fontFamily',
+					'menuBar:textPartLanguage'
 				]
 			},
 			{