Merge pull request #16116 from ckeditor/ck/app-menu-bar-decoupled-editor

Internal (editor-decoupled): Add menu bar to decoupled editor. Related to #15894.

packages/ckeditor5-core/src/editor/editorconfig.ts

@@ -187,8 +187,22 @@ export interface EditorConfig {
 	 * {@glink examples/builds/classic-editor Classic editor} and {@glink examples/builds/document-editor Document editor}
 	 * support this feature. Setting the `config.menuBar` configuration for other editor types will have no effect.
 	 *
-	 * **Note**: You do not have set this configuration in order to to use the menu bar.
-	 * By default, a {@link module:ui/menubar/utils#DefaultMenuBarItems default configuration} is used that already includes
+	 * **Note**: The menu bar is disabled in the {@glink examples/builds/classic-editor Classic editor} by default. Set the
+	 * `isVisible` configuration flag to `true` in order to enable it:
+	 *
+	 * ```ts
+	 * ClassicEditor
+	 * 	.create( document.querySelector( '#editor' ), {
+	 * 		menuBar: {
+	 * 			isVisible: true
+	 * 		}
+	 * 	} )
+	 * 	.then( ... )
+	 * 	.catch( ... );
+	 * ```
+	 *
+	 * **Note**: You do not have set the `items` property in this configuration in order to to use the menu bar.
+	 * By default, a {@link module:ui/menubar/utils#DefaultMenuBarItems default set of items} is used that already includes
 	 * **all core editor features**. For you convenience, there are `config.menuBar.addItems` and
 	 * `config.menuBar.removeItems` options available that will help you adjust the default configuration without setting the
 	 * entire menu bar structure from scratch (see below).

packages/ckeditor5-editor-decoupled/src/decouplededitor.ts

@@ -41,7 +41,8 @@ import { isElement as _isElement } from 'lodash-es';
  * In order to create a decoupled editor instance, use the static
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
  *
- * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
+ * Note that you will need to attach the editor toolbar and menu bar to your web page manually, in a desired place,
+ * after the editor is initialized.
  *
  * # Decoupled editor and document editor build
  *

packages/ckeditor5-editor-decoupled/src/decouplededitorui.ts

@@ -13,6 +13,7 @@ import {
 
 import {
 	EditorUI,
+	normalizeMenuBarConfig,
 	type EditorUIReadyEvent
 } from 'ckeditor5/src/ui.js';
 
@@ -80,6 +81,7 @@ export default class DecoupledEditorUI extends EditorUI {
 
 		this._initPlaceholder();
 		this._initToolbar();
+		this._initMenuBar();
 		this.fire<EditorUIReadyEvent>( 'ready' );
 	}
 
@@ -110,6 +112,36 @@ export default class DecoupledEditorUI extends EditorUI {
 		this.addToolbar( view.toolbar );
 	}
 
+	/**
+	 * Initializes the editor menu bar.
+	 */
+	private _initMenuBar(): void {
+		const editor = this.editor;
+		const menuBarViewElement = this.view.menuBarView.element!;
+		const view = this.view;
+
+		this.focusTracker.add( menuBarViewElement );
+		editor.keystrokes.listenTo( menuBarViewElement );
+
+		const normalizedMenuBarConfig = normalizeMenuBarConfig( editor.config.get( 'menuBar' ) || {} );
+
+		view.menuBarView.fillFromConfig( normalizedMenuBarConfig, this.componentFactory );
+
+		editor.keystrokes.set( 'Esc', ( data, cancel ) => {
+			if ( menuBarViewElement.contains( this.focusTracker.focusedElement ) ) {
+				editor.editing.view.focus();
+				cancel();
+			}
+		} );
+
+		editor.keystrokes.set( 'Alt+F9', ( data, cancel ) => {
+			if ( !menuBarViewElement.contains( this.focusTracker.focusedElement ) ) {
+				this.view.menuBarView.focus();
+				cancel();
+			}
+		} );
+	}
+
 	/**
 	 * Enable the placeholder text on the editing root.
 	 */

packages/ckeditor5-editor-decoupled/src/decouplededitoruiview.ts

@@ -7,14 +7,15 @@
  * @module editor-decoupled/decouplededitoruiview
  */
 
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
+import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
 import type { Locale } from 'ckeditor5/src/utils.js';
 import type { EditingView } from 'ckeditor5/src/engine.js';
 
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable} and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, but without any
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
+ * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
  * specific arrangement of the components in the DOM.
  *
  * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
@@ -26,6 +27,11 @@ export default class DecoupledEditorUIView extends EditorUIView {
 	 */
 	public readonly toolbar: ToolbarView;
 
+	/**
+	 * Menu bar view instance.
+	 */
+	public readonly menuBarView: MenuBarView;
+
 	/**
 	 * The editable of the decoupled editor UI.
 	 */
@@ -59,6 +65,8 @@ export default class DecoupledEditorUIView extends EditorUIView {
 			shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
 		} );
 
+		this.menuBarView = new MenuBarView( locale );
+
 		this.editable = new InlineEditableUIView( locale, editingView, options.editableElement, {
 			label: editableView => {
 				return t( 'Rich Text Editor. Editing area: %0', editableView.name! );
@@ -78,6 +86,15 @@ export default class DecoupledEditorUIView extends EditorUIView {
 				dir: locale.uiLanguageDirection
 			}
 		} );
+
+		this.menuBarView.extendTemplate( {
+			attributes: {
+				class: [
+					'ck-reset_all',
+					'ck-rounded-corners'
+				]
+			}
+		} );
 	}
 
 	/**
@@ -86,6 +103,6 @@ export default class DecoupledEditorUIView extends EditorUIView {
 	public override render(): void {
 		super.render();
 
-		this.registerChild( [ this.toolbar, this.editable ] );
+		this.registerChild( [ this.menuBarView, this.toolbar, this.editable ] );
 	}
 }

packages/ckeditor5-editor-decoupled/tests/manual/decouplededitor.html

@@ -3,19 +3,24 @@
 	<button id="initEditor">Init editor</button>
 </p>
 
+<h2>The menu bar</h2>
+<div class="menubar-container"></div>
+
 <h2>The toolbar</h2>
 <div class="toolbar-container"></div>
 
 <h2>The editable</h2>
 <div class="editable-container"></div>
 
 <style>
+	.menubar-container,
 	.editable-container,
 	.toolbar-container {
 		position: relative;
 		border: 1px solid red;
 	}
 
+	.menubar-container::after,
 	.editable-container::after,
 	.toolbar-container::after {
 		content: attr(class);
@@ -28,6 +33,7 @@ <h2>The editable</h2>
 		padding: .1em .3em;
 	}
 
+	.menubar-container,
 	.toolbar-container{
 		padding: 1em;
 	}

packages/ckeditor5-editor-decoupled/tests/manual/decouplededitor.js

@@ -28,6 +28,7 @@ function initEditor() {
 			console.log( 'Editor was initialized', newEditor );
 			console.log( 'You can now play with it using global `editor` and `editable` variables.' );
 
+			document.querySelector( '.menubar-container' ).appendChild( newEditor.ui.view.menuBarView.element );
 			document.querySelector( '.toolbar-container' ).appendChild( newEditor.ui.view.toolbar.element );
 			document.querySelector( '.editable-container' ).appendChild( newEditor.ui.view.editable.element );
 

packages/ckeditor5-theme-lark/theme/ckeditor5-editor-classic/classiceditor.css

@@ -20,6 +20,7 @@
 				border-bottom-width: 1px;
 			}
 
+			& .ck-menu-bar,
 			& .ck-toolbar {
 				border: 0;
 			}

packages/ckeditor5-theme-lark/theme/ckeditor5-ui/components/menubar/menubar.css

@@ -9,4 +9,5 @@
 	background: var(--ck-color-base-background);
 	padding: var(--ck-spacing-small);
 	gap: var(--ck-spacing-small);
+	border: 1px solid var(--ck-color-toolbar-border);
 }