Add indent integration. (#15914)

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

packages/ckeditor5-indent/src/indentui.ts

@@ -7,7 +7,7 @@
  * @module indent/indentui
  */
 
-import { ButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 import { icons, Plugin } from 'ckeditor5/src/core.js';
 
 /**
@@ -42,29 +42,54 @@ export default class IndentUI extends Plugin {
 	}
 
 	/**
-	 * Defines a UI button.
+	 * Defines UI buttons for both toolbar and menu bar.
 	 */
 	private _defineButton( commandName: 'indent' | 'outdent', label: string, icon: string ): void {
 		const editor = this.editor;
 
-		editor.ui.componentFactory.add( commandName, locale => {
-			const command = editor.commands.get( commandName )!;
-			const view = new ButtonView( locale );
+		editor.ui.componentFactory.add( commandName, () => {
+			const buttonView = this._createButton( ButtonView, commandName, label, icon );
 
-			view.set( {
-				label,
-				icon,
+			buttonView.set( {
 				tooltip: true
 			} );
 
-			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			return buttonView;
+		} );
 
-			this.listenTo( view, 'execute', () => {
-				editor.execute( commandName );
-				editor.editing.view.focus();
-			} );
+		editor.ui.componentFactory.add( 'menuBar:' + commandName, () => {
+			return this._createButton( MenuBarMenuListItemButtonView, commandName, label, icon );
+		} );
+	}
 
-			return view;
+	/**
+	 * Creates a button to use either in toolbar or in menu bar.
+	 */
+	private _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>(
+		ButtonClass: T,
+		commandName: string,
+		label: string,
+		icon: string
+	): InstanceType<T> {
+		const editor = this.editor;
+		const locale = editor.locale;
+		const command = editor.commands.get( commandName )!;
+		const view = new ButtonClass( editor.locale ) as InstanceType<T>;
+		const t = locale.t;
+
+		view.set( {
+			label,
+			icon
+		} );
+
+		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+		// Execute the command.
+		this.listenTo( view, 'execute', () => {
+			editor.execute( commandName );
+			editor.editing.view.focus();
 		} );
+
+		return view;
 	}
 }

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

@@ -166,6 +166,8 @@ export default class MenuBarView extends View implements FocusableView {
 					'-',
 					'menuBar:heading',
 					'-',
+					'menuBar:indent',
+					'menuBar:outdent',
 					'menuBar:removeFormat'
 				]
 			},