Merge pull request #100 from ckeditor/i/5692

Feature: The main editor toolbar should respect the `config.toolbar.shouldNotGroupWhenFull` configuration (see ckeditor/ckeditor5#5692).

Author: Reinmar

src/classiceditor.js

@@ -70,7 +70,12 @@ export default class ClassicEditor extends Editor {
 
 		this.model.document.createRoot();
 
-		this.ui = new ClassicEditorUI( this, new ClassicEditorUIView( this.locale, this.editing.view ) );
+		const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );
+		const view = new ClassicEditorUIView( this.locale, this.editing.view, {
+			shouldToolbarGroupWhenFull
+		} );
+
+		this.ui = new ClassicEditorUI( this, view );
 
 		attachToForm( this );
 	}

src/classiceditoruiview.js

@@ -26,8 +26,12 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 	 *
 	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
 	 * @param {module:engine/view/view~View} editingView The editing view instance this view is related to.
+	 * @param {Object} [options={}] Configuration options fo the view instance.
+	 * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping
+	 * in the main {@link module:editor-classic/classiceditoruiview~ClassicEditorUIView#toolbar toolbar}.
+	 * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
 	 */
-	constructor( locale, editingView ) {
+	constructor( locale, editingView, options = {} ) {
 		super( locale );
 
 		/**
@@ -46,7 +50,7 @@ export default class ClassicEditorUIView extends BoxedEditorUIView {
 		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
 		this.toolbar = new ToolbarView( locale, {
-			shouldGroupWhenFull: true
+			shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
 		} );
 
 		/**

tests/classiceditor.js

@@ -102,6 +102,30 @@ describe( 'ClassicEditor', () => {
 				expect( editor.ui ).to.be.instanceof( ClassicEditorUI );
 				expect( editor.ui.view ).to.be.instanceof( ClassicEditorUIView );
 			} );
+
+			describe( 'automatic toolbar items groupping', () => {
+				it( 'should be on by default', () => {
+					const editorElement = document.createElement( 'div' );
+					const editor = new ClassicEditor( editorElement );
+
+					expect( editor.ui.view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+
+					editorElement.remove();
+				} );
+
+				it( 'can be disabled using config.toolbar.shouldNotGroupWhenFull', () => {
+					const editorElement = document.createElement( 'div' );
+					const editor = new ClassicEditor( editorElement, {
+						toolbar: {
+							shouldNotGroupWhenFull: true
+						}
+					} );
+
+					expect( editor.ui.view.toolbar.options.shouldGroupWhenFull ).to.be.false;
+
+					editorElement.remove();
+				} );
+			} );
 		} );
 	} );
 

tests/classiceditoruiview.js

@@ -59,8 +59,26 @@ describe( 'ClassicEditorUIView', () => {
 				expect( view.stickyPanel.content.get( 0 ) ).to.equal( view.toolbar );
 			} );
 
-			it( 'has automatic items grouping enabled', () => {
-				expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+			describe( 'automatic items grouping', () => {
+				it( 'should be disabled by default', () => {
+					expect( view.toolbar.options.shouldGroupWhenFull ).to.be.undefined;
+				} );
+
+				it( 'should be controlled via options.shouldToolbarGroupWhenFull', () => {
+					const locale = new Locale();
+					const editingView = new EditingView();
+					const editingViewRoot = createRoot( editingView.document );
+					const view = new ClassicEditorUIView( locale, editingView, {
+						shouldToolbarGroupWhenFull: true
+					} );
+
+					view.editable.name = editingViewRoot.rootName;
+					view.render();
+
+					expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+
+					return view.destroy();
+				} );
 			} );
 		} );