Merge pull request #45 from ckeditor/i/5692

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

src/decouplededitor.js

@@ -76,7 +76,12 @@ export default class DecoupledEditor extends Editor {
 
 		this.model.document.createRoot();
 
-		const view = new DecoupledEditorUIView( this.locale, this.editing.view, this.sourceElement );
+		const shouldToolbarGroupWhenFull = !this.config.get( 'toolbar.shouldNotGroupWhenFull' );
+		const view = new DecoupledEditorUIView( this.locale, this.editing.view, {
+			editableElement: this.sourceElement,
+			shouldToolbarGroupWhenFull
+		} );
+
 		this.ui = new DecoupledEditorUI( this, view );
 	}
 

src/decouplededitoruiview.js

@@ -28,10 +28,14 @@ export default class DecoupledEditorUIView extends EditorUIView {
 	 *
 	 * @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 {HTMLElement} [editableElement] The editable element. If not specified, it will be automatically created by
+	 * @param {Object} [options={}] Configuration options fo the view instance.
+	 * @param {HTMLElement} [options.editableElement] The editable element. If not specified, it will be automatically created by
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
+	 * @param {Boolean} [options.shouldToolbarGroupWhenFull] When set `true` enables automatic items grouping
+	 * in the main {@link editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
+	 * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
 	 */
-	constructor( locale, editingView, editableElement ) {
+	constructor( locale, editingView, options = {} ) {
 		super( locale );
 
 		/**
@@ -41,7 +45,7 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		 * @member {module:ui/toolbar/toolbarview~ToolbarView}
 		 */
 		this.toolbar = new ToolbarView( locale, {
-			shouldGroupWhenFull: true
+			shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
 		} );
 
 		/**
@@ -50,7 +54,7 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		 * @readonly
 		 * @member {module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView}
 		 */
-		this.editable = new InlineEditableUIView( locale, editingView, editableElement );
+		this.editable = new InlineEditableUIView( locale, editingView, options.editableElement );
 
 		// This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
 		// Because of the above, make sure the toolbar supports rounded corners.

tests/decouplededitor.js

@@ -60,6 +60,30 @@ describe( 'DecoupledEditor', () => {
 
 				editor.ui.destroy();
 			} );
+
+			describe( 'automatic toolbar items groupping', () => {
+				it( 'should be on by default', () => {
+					const editorElement = document.createElement( 'div' );
+					const editor = new DecoupledEditor( 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 DecoupledEditor( editorElement, {
+						toolbar: {
+							shouldNotGroupWhenFull: true
+						}
+					} );
+
+					expect( editor.ui.view.toolbar.options.shouldGroupWhenFull ).to.be.false;
+
+					editorElement.remove();
+				} );
+			} );
 		} );
 	} );
 

tests/decouplededitoruiview.js

@@ -46,8 +46,26 @@ describe( 'DecoupledEditorUIView', () => {
 				expect( view.toolbar.isRendered ).to.be.false;
 			} );
 
-			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 DecoupledEditorUIView( locale, editingView, {
+						shouldToolbarGroupWhenFull: true
+					} );
+
+					view.editable.name = editingViewRoot.rootName;
+					view.render();
+
+					expect( view.toolbar.options.shouldGroupWhenFull ).to.be.true;
+
+					return view.destroy();
+				} );
 			} );
 		} );
 
@@ -66,7 +84,9 @@ describe( 'DecoupledEditorUIView', () => {
 
 			it( 'can be created out of an existing DOM element', () => {
 				const editableElement = document.createElement( 'div' );
-				const testView = new DecoupledEditorUIView( locale, editingView, editableElement );
+				const testView = new DecoupledEditorUIView( locale, editingView, {
+					editableElement
+				} );
 				testView.editable.name = editingViewRoot.rootName;
 
 				testView.render();