Procházet zdrojové kódy

Move setting toolbar max-width to initializer instead of running it when toolbar should be shown

panr před 6 roky
rodič
revize
4b9104f041

+ 18 - 6
packages/ckeditor5-ui/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.
@@ -125,6 +129,19 @@ export default class BalloonToolbar extends Plugin {
 				this.show();
 			}
 		} );
+
+		this.listenTo( editor, 'ready', () => {
+			const editableElement = this.editor.ui.view.editable.element;
+
+			// Set toolbar's max-width on the initialization and update it on the editable resize.
+			const widthObserver = getResizeObserver( ( [ entry ] ) => {
+				// In the balloon editor toolbar's max-width should be set to half 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._setToolbarMaxWidth( entry.contentRect.width / 2 );
+			} );
+
+			widthObserver.observe( editableElement );
+		} );
 	}
 
 	/**
@@ -189,11 +206,6 @@ export default class BalloonToolbar extends Plugin {
 			this._balloon.updatePosition( this._getBalloonPositionData() );
 		} );
 
-		// Set toolbar's max-width to be half of the editable's width.
-		const maxToolbarWidth = new Rect( this.editor.editing.view.getDomRoot() ).width;
-
-		this._setToolbarMaxWidth( maxToolbarWidth / 2 );
-
 		// Add the toolbar to the common editor contextual balloon.
 		this._balloon.add( {
 			view: this.toolbarView,
@@ -273,7 +285,7 @@ export default class BalloonToolbar extends Plugin {
 	 * @private
 	 */
 	_setToolbarMaxWidth( width ) {
-		this.toolbarView.element.style.maxWidth = `${ width }px`;
+		this.toolbarView.maxWidth = toPx( width );
 	}
 
 	/**