Add menu bar integration to horizontal line. (#15910)

Internal (horizontal-line): Added menu bar integration. Related to #15894.

packages/ckeditor5-horizontal-line/src/horizontallineui.ts

@@ -8,7 +8,7 @@
  */
 
 import { icons, Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 
 import type HorizontalLineCommand from './horizontallinecommand.js';
 
@@ -28,28 +28,46 @@ export default class HorizontalLineUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
 
 		// Add the `horizontalLine` button to feature components.
-		editor.ui.componentFactory.add( 'horizontalLine', locale => {
-			const command: HorizontalLineCommand = editor.commands.get( 'horizontalLine' )!;
-			const view = new ButtonView( locale );
+		editor.ui.componentFactory.add( 'horizontalLine', () => {
+			const buttonView = this._createButton( ButtonView );
 
-			view.set( {
-				label: t( 'Horizontal line' ),
-				icon: icons.horizontalLine,
+			buttonView.set( {
 				tooltip: true
 			} );
 
-			view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+			return buttonView;
+		} );
 
-			// Execute the command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( 'horizontalLine' );
-				editor.editing.view.focus();
-			} );
+		editor.ui.componentFactory.add( 'menuBar:horizontalLine', () => {
+			return this._createButton( MenuBarMenuListItemButtonView );
+		} );
+	}
+
+	/**
+	 * Creates a button for horizontal line command to use either in toolbar or in menu bar.
+	 */
+	private _createButton<T extends typeof ButtonView | typeof MenuBarMenuListItemButtonView>( ButtonClass: T ): InstanceType<T> {
+		const editor = this.editor;
+		const locale = editor.locale;
+		const command: HorizontalLineCommand = editor.commands.get( 'horizontalLine' )!;
+		const view = new ButtonClass( editor.locale ) as InstanceType<T>;
+		const t = locale.t;
+
+		view.set( {
+			label: t( 'Horizontal line' ),
+			icon: icons.horizontalLine
+		} );
+
+		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
 
-			return view;
+		// Execute the command.
+		this.listenTo( view, 'execute', () => {
+			editor.execute( 'horizontalLine' );
+			editor.editing.view.focus();
 		} );
+
+		return view;
 	}
 }

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

@@ -149,6 +149,7 @@ export default class MenuBarView extends View implements FocusableView {
 				id: 'insert',
 				label: 'Insert',
 				items: [
+					'menuBar:horizontalLine',
 					'menuBar:blockQuote'
 				]
 			},