From 932e90d875a345a9362451734ee4e6e32daa3a74 Mon Sep 17 00:00:00 2001
From: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
Date: Mon, 18 Nov 2019 15:47:31 +0100
Subject: [PATCH] Feature: The main editor toolbar should respect the
 config.toolbar.shouldGroupWhenFull configuration.

---
 src/classiceditor.js         |  7 ++++++-
 src/classiceditoruiview.js   |  8 ++++++--
 tests/classiceditor.js       | 24 ++++++++++++++++++++++++
 tests/classiceditoruiview.js | 22 ++++++++++++++++++++--
 4 files changed, 56 insertions(+), 5 deletions(-)

diff --git a/src/classiceditor.js b/src/classiceditor.js
index 4e30a06..596cd92 100644
--- a/src/classiceditor.js
+++ b/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 shouldGroupWhenFull = this.config.get( 'toolbar.shouldGroupWhenFull' );
+		const view = new ClassicEditorUIView( this.locale, this.editing.view, {
+			shouldToolbarGroupWhenFull: shouldGroupWhenFull === undefined ? true : shouldGroupWhenFull
+		} );
+
+		this.ui = new ClassicEditorUI( this, view );
 
 		attachToForm( this );
 	}
diff --git a/src/classiceditoruiview.js b/src/classiceditoruiview.js
index 8be1199..00ac189 100644
--- a/src/classiceditoruiview.js
+++ b/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
 		} );
 
 		/**
diff --git a/tests/classiceditor.js b/tests/classiceditor.js
index 165c444..0e1b121 100644
--- a/tests/classiceditor.js
+++ b/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.shouldGroupWhenFull', () => {
+					const editorElement = document.createElement( 'div' );
+					const editor = new ClassicEditor( editorElement, {
+						toolbar: {
+							shouldGroupWhenFull: false
+						}
+					} );
+
+					expect( editor.ui.view.toolbar.options.shouldGroupWhenFull ).to.be.false;
+
+					editorElement.remove();
+				} );
+			} );
 		} );
 	} );
 
diff --git a/tests/classiceditoruiview.js b/tests/classiceditoruiview.js
index 9ca3f67..939a330 100644
--- a/tests/classiceditoruiview.js
+++ b/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();
+				} );
 			} );
 		} );