Add menu bar integration to code block. (#15967)

Internal (code-block): Added menu bar integration. Related to #15894.

packages/ckeditor5-code-block/src/codeblockui.ts

@@ -9,7 +9,17 @@
 
 import { icons, Plugin } from 'ckeditor5/src/core.js';
 import { Collection } from 'ckeditor5/src/utils.js';
-import { ViewModel, SplitButtonView, createDropdown, addListToDropdown, type ListDropdownItemDefinition } from 'ckeditor5/src/ui.js';
+import {
+	ViewModel,
+	SplitButtonView,
+	createDropdown,
+	addListToDropdown,
+	MenuBarMenuListItemButtonView,
+	MenuBarMenuListView,
+	MenuBarMenuView,
+	MenuBarMenuListItemView,
+	type ListDropdownButtonDefinition
+} from 'ckeditor5/src/ui.js';
 
 import { getNormalizedAndLocalizedLanguageDefinitions } from './utils.js';
 
@@ -39,9 +49,10 @@ export default class CodeBlockUI extends Plugin {
 		const t = editor.t;
 		const componentFactory = editor.ui.componentFactory;
 		const normalizedLanguageDefs = getNormalizedAndLocalizedLanguageDefinitions( editor );
+		const itemDefinitions = this._getLanguageListItemDefinitions( normalizedLanguageDefs );
+		const command: CodeBlockCommand = editor.commands.get( 'codeBlock' )!;
 
 		componentFactory.add( 'codeBlock', locale => {
-			const command: CodeBlockCommand = editor.commands.get( 'codeBlock' )!;
 			const dropdownView = createDropdown( locale, SplitButtonView );
 			const splitButtonView = dropdownView.buttonView;
 			const accessibleLabel = t( 'Insert code block' );
@@ -75,13 +86,54 @@ export default class CodeBlockUI extends Plugin {
 			dropdownView.class = 'ck-code-block-dropdown';
 			dropdownView.bind( 'isEnabled' ).to( command );
 
-			addListToDropdown( dropdownView, () => this._getLanguageListItemDefinitions( normalizedLanguageDefs ), {
+			addListToDropdown( dropdownView, itemDefinitions, {
 				role: 'menu',
 				ariaLabel: accessibleLabel
 			} );
 
 			return dropdownView;
 		} );
+
+		componentFactory.add( 'menuBar:codeBlock', locale => {
+			const menuView = new MenuBarMenuView( locale );
+
+			menuView.buttonView.set( {
+				label: t( 'Code block' ),
+				icon: icons.codeBlock
+			} );
+
+			const listView = new MenuBarMenuListView( locale );
+
+			for ( const definition of itemDefinitions ) {
+				const listItemView = new MenuBarMenuListItemView( locale, menuView );
+				const buttonView = new MenuBarMenuListItemButtonView( locale );
+
+				buttonView.extendTemplate( {
+					attributes: {
+						'aria-checked': buttonView.bindTemplate.to( 'isOn' )
+					}
+				} );
+
+				buttonView.bind( ...Object.keys( definition.model ) as Array<keyof MenuBarMenuListItemButtonView> ).to( definition.model );
+				buttonView.delegate( 'execute' ).to( menuView );
+
+				buttonView.on( 'execute', () => {
+					editor.execute( 'codeBlock', {
+						language: definition.model._codeBlockLanguage as string,
+						forceValue: command.value == definition.model._codeBlockLanguage ? false : true
+					} );
+
+					editor.editing.view.focus();
+				} );
+
+				listItemView.children.add( buttonView );
+				listView.items.add( listItemView );
+			}
+
+			menuView.panelView.children.add( listView );
+
+			return menuView;
+		} );
 	}
 
 	/**
@@ -90,13 +142,13 @@ export default class CodeBlockUI extends Plugin {
 	 */
 	private _getLanguageListItemDefinitions(
 		normalizedLanguageDefs: Array<CodeBlockLanguageDefinition>
-	): Collection<ListDropdownItemDefinition> {
+	): Collection<ListDropdownButtonDefinition> {
 		const editor = this.editor;
 		const command: CodeBlockCommand = editor.commands.get( 'codeBlock' )!;
-		const itemDefinitions = new Collection<ListDropdownItemDefinition>();
+		const itemDefinitions = new Collection<ListDropdownButtonDefinition>();
 
 		for ( const languageDef of normalizedLanguageDefs ) {
-			const definition: ListDropdownItemDefinition = {
+			const definition: ListDropdownButtonDefinition = {
 				type: 'button',
 				model: new ViewModel( {
 					_codeBlockLanguage: languageDef.language,

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

@@ -479,7 +479,8 @@ export const DefaultMenuBarItems: DeepReadonly<MenuBarConfigObject[ 'items' ]> =
 					'menuBar:blockQuote',
 					'menuBar:htmlEmbed',
 					'menuBar:pageBreak',
-					'menuBar:horizontalLine'
+					'menuBar:horizontalLine',
+					'menuBar:codeBlock'
 				]
 			}
 		]