Merge 7653462 into be7f15d

src/decouplededitorui.js

@@ -115,13 +115,18 @@ export default class DecoupledEditorUI extends EditorUI {
 		const toolbar = view.toolbar;
 
 		toolbar.fillFromConfig( this._toolbarConfig.items, this.componentFactory );
+		toolbar.shouldGroupWhenFull = true;
 
 		enableToolbarKeyboardFocus( {
 			origin: editor.editing.view,
 			originFocusTracker: this.focusTracker,
 			originKeystrokeHandler: editor.keystrokes,
 			toolbar
 		} );
+
+		this.on( 'update', () => {
+			toolbar.updateGroupedItems();
+		} );
 	}
 
 	/**

src/decouplededitoruiview.js

@@ -10,7 +10,6 @@
 import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
-import Template from '@ckeditor/ckeditor5-ui/src/template';
 
 /**
  * The decoupled editor UI view. It is a virtual view providing an inline
@@ -55,7 +54,7 @@ export default class DecoupledEditorUIView extends EditorUIView {
 		// Because of the above, make sure the toolbar supports rounded corners.
 		// Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
 		// and some toolbar item styles depend on this attribute.
-		Template.extend( this.toolbar.template, {
+		this.toolbar.extendTemplate( {
 			attributes: {
 				class: [
 					'ck-reset_all',

tests/decouplededitorui.js

@@ -136,38 +136,44 @@ describe( 'DecoupledEditorUI', () => {
 			} );
 		} );
 
-		describe( 'view.toolbar#items', () => {
-			it( 'are filled with the config.toolbar (specified as an Array)', () => {
-				return VirtualDecoupledTestEditor
-					.create( '', {
-						toolbar: [ 'foo', 'bar' ]
-					} )
-					.then( editor => {
-						const items = editor.ui.view.toolbar.items;
+		describe( 'view.toolbar', () => {
+			it( 'has automatic items grouping enabled', () => {
+				expect( view.toolbar.shouldGroupWhenFull ).to.be.true;
+			} );
 
-						expect( items.get( 0 ).name ).to.equal( 'foo' );
-						expect( items.get( 1 ).name ).to.equal( 'bar' );
+			describe( '#items', () => {
+				it( 'are filled with the config.toolbar (specified as an Array)', () => {
+					return VirtualDecoupledTestEditor
+						.create( '', {
+							toolbar: [ 'foo', 'bar' ]
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
 
-						return editor.destroy();
-					} );
-			} );
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.get( 1 ).name ).to.equal( 'bar' );
 
-			it( 'are filled with the config.toolbar (specified as an Object)', () => {
-				return VirtualDecoupledTestEditor
-					.create( '', {
-						toolbar: {
-							items: [ 'foo', 'bar' ],
-							viewportTopOffset: 100
-						}
-					} )
-					.then( editor => {
-						const items = editor.ui.view.toolbar.items;
+							return editor.destroy();
+						} );
+				} );
 
-						expect( items.get( 0 ).name ).to.equal( 'foo' );
-						expect( items.get( 1 ).name ).to.equal( 'bar' );
+				it( 'are filled with the config.toolbar (specified as an Object)', () => {
+					return VirtualDecoupledTestEditor
+						.create( '', {
+							toolbar: {
+								items: [ 'foo', 'bar' ],
+								viewportTopOffset: 100
+							}
+						} )
+						.then( editor => {
+							const items = editor.ui.view.toolbar.items;
 
-						return editor.destroy();
-					} );
+							expect( items.get( 0 ).name ).to.equal( 'foo' );
+							expect( items.get( 1 ).name ).to.equal( 'bar' );
+
+							return editor.destroy();
+						} );
+				} );
 			} );
 		} );