From db6a2570a9fb6814e5c2166cff751bb78c377371 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Remiszewski?=
 <118178939+mremiszewski@users.noreply.github.com>
Date: Fri, 1 Mar 2024 09:39:11 +0100
Subject: [PATCH] Add remove format integration. (#15937)

Internal (remove-format): Added menu bar integration. Related to #15894.
---
 .../src/removeformatui.ts                     | 44 +++++++++++++------
 .../ckeditor5-ui/src/menubar/menubarview.ts   |  4 +-
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/ckeditor5-remove-format/src/removeformatui.ts b/packages/ckeditor5-remove-format/src/removeformatui.ts
index 4b39448443b..0a08d79c9d9 100644
--- a/packages/ckeditor5-remove-format/src/removeformatui.ts
+++ b/packages/ckeditor5-remove-format/src/removeformatui.ts
@@ -8,7 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core.js';
-import { ButtonView } from 'ckeditor5/src/ui.js';
+import { ButtonView, MenuBarMenuListItemButtonView } from 'ckeditor5/src/ui.js';
 
 import type RemoveFormatCommand from './removeformatcommand.js';
 
@@ -33,27 +33,43 @@ export default class RemoveFormatUI extends Plugin {
 	 */
 	public init(): void {
 		const editor = this.editor;
-		const t = editor.t;
 
-		editor.ui.componentFactory.add( REMOVE_FORMAT, locale => {
-			const command: RemoveFormatCommand = editor.commands.get( REMOVE_FORMAT )!;
-			const view = new ButtonView( locale );
+		editor.ui.componentFactory.add( REMOVE_FORMAT, () => {
+			const view = this._createButton( ButtonView );
 
 			view.set( {
-				label: t( 'Remove Format' ),
-				icon: removeFormatIcon,
 				tooltip: true
 			} );
 
-			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			return view;
+		} );
 
-			// Execute the command.
-			this.listenTo( view, 'execute', () => {
-				editor.execute( REMOVE_FORMAT );
-				editor.editing.view.focus();
-			} );
+		editor.ui.componentFactory.add( `menuBar:${ REMOVE_FORMAT }`, () => this._createButton( MenuBarMenuListItemButtonView ) );
+	}
 
-			return view;
+	/**
+	 * Creates a button for remove format 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: RemoveFormatCommand = editor.commands.get( REMOVE_FORMAT )!;
+		const view = new ButtonClass( editor.locale ) as InstanceType<T>;
+		const t = locale.t;
+
+		view.set( {
+			label: t( 'Remove Format' ),
+			icon: removeFormatIcon
+		} );
+
+		view.bind( 'isEnabled' ).to( command, 'isEnabled' );
+
+		// Execute the command.
+		this.listenTo( view, 'execute', () => {
+			editor.execute( REMOVE_FORMAT );
+			editor.editing.view.focus();
 		} );
+
+		return view;
 	}
 }
diff --git a/packages/ckeditor5-ui/src/menubar/menubarview.ts b/packages/ckeditor5-ui/src/menubar/menubarview.ts
index 6a8132bad60..4b1c66a3c92 100644
--- a/packages/ckeditor5-ui/src/menubar/menubarview.ts
+++ b/packages/ckeditor5-ui/src/menubar/menubarview.ts
@@ -164,7 +164,9 @@ export default class MenuBarView extends View implements FocusableView {
 					'menuBar:italic',
 					'menuBar:underline',
 					'-',
-					'menuBar:heading'
+					'menuBar:heading',
+					'-',
+					'menuBar:removeFormat'
 				]
 			},
 			{