i/5597: Set balloon toolbar's max-width

src/toolbar/balloon/balloontoolbar.js

@@ -15,6 +15,10 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import normalizeToolbarConfig from '../normalizetoolbarconfig';
 import { debounce } from 'lodash-es';
+import getResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/getresizeobserver';
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+
+const toPx = toUnit( 'px' );
 
 /**
  * The contextual toolbar.
@@ -44,6 +48,14 @@ export default class BalloonToolbar extends Plugin {
 	constructor( editor ) {
 		super( editor );
 
+		/**
+		 * A normalized `config.balloonToolbar` object.
+		 *
+		 * @type {Object}
+		 * @private
+		 */
+		this._balloonConfig = normalizeToolbarConfig( editor.config.get( 'balloonToolbar' ) );
+
 		/**
 		 * The toolbar view displayed in the balloon.
 		 *
@@ -125,6 +137,28 @@ export default class BalloonToolbar extends Plugin {
 				this.show();
 			}
 		} );
+
+		if ( !this._balloonConfig.shouldNotGroupWhenFull ) {
+			this.listenTo( editor, 'ready', () => {
+				const editableElement = editor.ui.view.editable.element;
+
+				// Set toolbar's max-width on the initialization and update it on the editable resize.
+				const widthObserver = getResizeObserver( () => {
+					// We need to check if there's already the editable element in the DOM.
+					// Otherwise the `Rect` instance will complain that source (editableElement) is not available
+					// to obtain the element's geometry.
+					if ( !editableElement.ownerDocument.body.contains( editableElement ) ) {
+						return;
+					}
+
+					// In the balloon editor toolbar's max-width should be set to the 2/3 of the editable's width.
+					// It's a safe value, because at the moment we don't re-calculate it when position of the selection changes.
+					this.toolbarView.maxWidth = toPx( new Rect( editableElement ).width * 0.66 );
+				} );
+
+				widthObserver.observe( editableElement );
+			} );
+		}
 	}
 
 	/**
@@ -134,10 +168,9 @@ export default class BalloonToolbar extends Plugin {
 	 * @inheritDoc
 	 */
 	afterInit() {
-		const config = normalizeToolbarConfig( this.editor.config.get( 'balloonToolbar' ) );
 		const factory = this.editor.ui.componentFactory;
 
-		this.toolbarView.fillFromConfig( config.items, factory );
+		this.toolbarView.fillFromConfig( this._balloonConfig.items, factory );
 	}
 
 	/**
@@ -147,7 +180,8 @@ export default class BalloonToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
-		const toolbarView = new ToolbarView( this.editor.locale );
+		const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
+		const toolbarView = new ToolbarView( this.editor.locale, { shouldGroupWhenFull } );
 
 		toolbarView.extendTemplate( {
 			attributes: {

src/toolbar/toolbarview.js

@@ -61,6 +61,25 @@ export default class ToolbarView extends View {
 		 */
 		this.set( 'ariaLabel', t( 'Editor toolbar' ) );
 
+		/**
+		 * The maximum width of the toolbar element.
+		 *
+		 * Note:
+		 * You should not change the toolbar's max-width manually, because by default it's binded
+		 * with the editor's editable element's width and it will be applied automatically each time its value will change.
+		 *
+		 * If you set `config.toolbar.shouldNotGroupWhenFull: true` and also set `ToolbarView#maxWidth`,
+		 * the max-width will be applied and — in this case — you should be careful, because if you set
+		 * the value to be too small, this may cause visual and usability issues with your toolbar.
+		 *
+		 * Another scenario is when the toolbar is grouping overflowing items and you will be trying to set `ToolbarView#maxWidth`.
+		 * This new value will be immediately overridden and will not be applied.
+		 *
+		 * @default 'auto'
+		 * @member {String} #maxWidth
+		 */
+		this.set( 'maxWidth', 'auto' );
+
 		/**
 		 * A collection of toolbar items (buttons, dropdowns, etc.).
 		 *
@@ -171,7 +190,10 @@ export default class ToolbarView extends View {
 					bind.to( 'class' )
 				],
 				role: 'toolbar',
-				'aria-label': bind.to( 'ariaLabel' )
+				'aria-label': bind.to( 'ariaLabel' ),
+				style: {
+					maxWidth: bind.to( 'maxWidth' )
+				}
 			},
 
 			children: this.children,
@@ -560,6 +582,7 @@ class DynamicGrouping {
 		this.viewElement = view.element;
 
 		this._enableGroupingOnResize();
+		this._enableGroupingOnMaxWidthChange( view );
 	}
 
 	/**
@@ -686,6 +709,21 @@ class DynamicGrouping {
 		this._updateGrouping();
 	}
 
+	/**
+	 * Enables the grouping functionality, just like {@link #_enableGroupingOnResize} but the difference is that
+	 * it listens to the {@link module:ui/toolbar/toolbarview~ToolbarView#maxWidth} changes.
+	 *
+	 * Note: Right now it works only with {@link module:editor-inline/inlineeditor~InlineEditor} and
+	 * {@link module:editor-balloon/ballooneditor~BalloonEditor}.
+	 *
+	 * @private
+	 */
+	_enableGroupingOnMaxWidthChange( view ) {
+		view.on( 'change:maxWidth', () => {
+			this._updateGrouping();
+		} );
+	}
+
 	/**
 	 * When called, it will remove the last item from {@link #ungroupedItems} and move it back
 	 * to the {@link #groupedItems} collection.

tests/toolbar/balloon/balloontoolbar.js

@@ -14,13 +14,19 @@ import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import { stringify as viewStringify } from '@ckeditor/ckeditor5-engine/src/dev-utils/view';
 
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+
+const toPx = toUnit( 'px' );
+
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
-/* global document, window, Event */
+/* global document, window, Event, setTimeout */
 
 describe( 'BalloonToolbar', () => {
 	let editor, model, selection, editingView, balloonToolbar, balloon, editorElement;
@@ -102,6 +108,27 @@ describe( 'BalloonToolbar', () => {
 			} );
 	} );
 
+	it( 'should not group items when the shouldNotGroupWhenFull option is enabled', () => {
+		const editorElement = document.createElement( 'div' );
+		document.body.appendChild( editorElement );
+
+		return ClassicTestEditor.create( editorElement, {
+			plugins: [ Paragraph, Bold, Italic, Underline, BalloonToolbar ],
+			balloonToolbar: {
+				items: [ 'bold', 'italic', 'underline' ],
+				shouldNotGroupWhenFull: true
+			}
+		} ).then( editor => {
+			const balloonToolbar = editor.plugins.get( BalloonToolbar );
+
+			expect( balloonToolbar.toolbarView.options.shouldGroupWhenFull ).to.be.false;
+
+			return editor.destroy();
+		} ).then( () => {
+			editorElement.remove();
+		} );
+	} );
+
 	it( 'should fire internal `_selectionChangeDebounced` event 200 ms after last selection change', () => {
 		const clock = testUtils.sinon.useFakeTimers();
 		const spy = testUtils.sinon.spy();
@@ -344,6 +371,28 @@ describe( 'BalloonToolbar', () => {
 			balloonToolbar.show();
 			sinon.assert.calledOnce( balloonAddSpy );
 		} );
+
+		it( 'should set the toolbar max-width to half of the editable width', done => {
+			const viewElement = editor.ui.view.editable.element;
+
+			setData( model, '<paragraph>b[ar]</paragraph>' );
+
+			expect( global.document.body.contains( viewElement ) ).to.be.true;
+
+			viewElement.style.width = '400px';
+
+			// Unfortunately we have to wait for async ResizeObserver execution.
+			// ResizeObserver which has been called after changing width of viewElement,
+			// needs 2x requestAnimationFrame or timeout to update a layout.
+			// See more: https://twitter.com/paul_irish/status/912693347315150849/photo/1
+			setTimeout( () => {
+				// The expected width should be 2/3 of the editor's editable element's width.
+				const expectedWidth = toPx( new Rect( viewElement ).width * 0.66 );
+				expect( balloonToolbar.toolbarView.maxWidth ).to.be.equal( expectedWidth );
+
+				done();
+			}, 500 );
+		} );
 	} );
 
 	describe( 'hide()', () => {

tests/toolbar/toolbarview.js

@@ -167,6 +167,22 @@ describe( 'ToolbarView', () => {
 				expect( view.element.classList.contains( 'bar' ) ).to.be.false;
 			} );
 		} );
+
+		describe( 'style', () => {
+			it( 'reacts on view#maxWidth', () => {
+				view.maxWidth = '100px';
+				expect( view.element.style.maxWidth ).to.equal( '100px' );
+
+				view.maxWidth = undefined;
+				expect( view.element.style.maxWidth ).to.equal( '' );
+
+				view.maxWidth = null;
+				expect( view.element.style.maxWidth ).to.equal( '' );
+
+				view.maxWidth = '200px';
+				expect( view.element.style.maxWidth ).to.equal( '200px' );
+			} );
+		} );
 	} );
 
 	describe( 'render()', () => {