浏览代码

WIP: Move setting toolbar max-width to inlineeditoruiview

panr 5 年之前
父节点
当前提交
7d4af30508

+ 0 - 22
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -11,11 +11,6 @@ import EditorUI from '@ckeditor/ckeditor5-core/src/editor/editorui';
 import enableToolbarKeyboardFocus from '@ckeditor/ckeditor5-ui/src/toolbar/enabletoolbarkeyboardfocus';
 import normalizeToolbarConfig from '@ckeditor/ckeditor5-ui/src/toolbar/normalizetoolbarconfig';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/src/view/placeholder';
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
-import getResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/getresizeobserver';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-
-const toPx = toUnit( 'px' );
 
 /**
  * The inline editor UI class.
@@ -155,23 +150,6 @@ export default class InlineEditorUI extends EditorUI {
 			originKeystrokeHandler: editor.keystrokes,
 			toolbar
 		} );
-
-		// Set the toolbar's max-width on the initialization and update it on the editable resize,
-		// if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
-		if ( !this._toolbarConfig.shouldNotGroupWhenFull ) {
-			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;
-				}
-
-				this.view.toolbar.maxWidth = toPx( new Rect( editableElement ).width );
-			} );
-
-			widthObserver.observe( editableElement );
-		}
 	}
 
 	/**

+ 26 - 0
packages/ckeditor5-editor-inline/src/inlineeditoruiview.js

@@ -11,6 +11,11 @@ import EditorUIView from '@ckeditor/ckeditor5-ui/src/editorui/editoruiview';
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpanelview';
 import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import getResizeObserver from '@ckeditor/ckeditor5-utils/src/dom/getresizeobserver';
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+
+const toPx = toUnit( 'px' );
 
 /**
  * Inline editor UI view. Uses an nline editable and a floating toolbar.
@@ -25,6 +30,7 @@ export default class InlineEditorUIView extends EditorUIView {
 	 * @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
 	 * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
+	 * @param {Object} [options={}] Configuration options for the view instance.
 	 */
 	constructor( locale, editingView, editableElement, options = {} ) {
 		super( locale );
@@ -146,6 +152,26 @@ export default class InlineEditorUIView extends EditorUIView {
 		this.body.add( this.panel );
 		this.registerChild( this.editable );
 		this.panel.content.add( this.toolbar );
+
+		const options = this.toolbar.options;
+
+		// Set toolbar's max-width on the initialization and update it on the editable resize,
+		// if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
+		if ( options.shouldGroupWhenFull ) {
+			const editableElement = this.editable.element;
+			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;
+				}
+
+				this.toolbar.maxWidth = toPx( new Rect( editableElement ).width );
+			} );
+
+			widthObserver.observe( editableElement );
+		}
 	}
 
 	/**

+ 1 - 26
packages/ckeditor5-editor-inline/tests/inlineeditorui.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals document, Event, setTimeout */
+/* globals document, Event */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
 
@@ -13,14 +13,10 @@ import InlineEditorUIView from '../src/inlineeditoruiview';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 
-import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 import { assertBinding } from '@ckeditor/ckeditor5-utils/tests/_utils/utils';
 import { isElement } from 'lodash-es';
-import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
-
-const toPx = toUnit( 'px' );
 
 describe( 'InlineEditorUI', () => {
 	let editor, view, ui, viewElement;
@@ -108,27 +104,6 @@ describe( 'InlineEditorUI', () => {
 				editor.ui.fire( 'update' );
 				sinon.assert.notCalled( spy );
 			} );
-
-			// Sometimes this test can fail, due to the fact that it have to wait for async ResizeObserver execution.
-			it( 'should set inline toolbar max-width to the width of the editable element', done => {
-				document.body.appendChild( viewElement );
-
-				expect( 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( () => {
-					const editableWidthWithPadding = toPx( new Rect( viewElement ).width );
-					expect( view.toolbar.maxWidth ).to.be.equal( editableWidthWithPadding );
-
-					document.body.removeChild( viewElement );
-
-					done();
-				}, 500 );
-			} );
 		} );
 
 		describe( 'editable', () => {

+ 31 - 0
packages/ckeditor5-editor-inline/tests/inlineeditoruiview.js

@@ -10,9 +10,16 @@ import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpa
 import InlineEditableUIView from '@ckeditor/ckeditor5-ui/src/editableui/inline/inlineeditableuiview';
 import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 import createRoot from '@ckeditor/ckeditor5-engine/tests/view/_utils/createroot.js';
+import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
+import toUnit from '@ckeditor/ckeditor5-utils/src/dom/tounit';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
+
+const toPx = toUnit( 'px' );
 
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
+/* globals setTimeout */
+
 describe( 'InlineEditorUIView', () => {
 	let locale, view, editingView, editingViewRoot;
 
@@ -91,6 +98,30 @@ describe( 'InlineEditorUIView', () => {
 			it( 'sets the default value of the #viewportTopOffset attribute', () => {
 				expect( view.viewportTopOffset ).to.equal( 0 );
 			} );
+
+			// Sometimes this test can fail, due to the fact that it have to wait for async ResizeObserver execution.
+			it( 'max-width should be set to the width of the editable element', done => {
+				const viewElement = view.editable.element;
+				global.document.body.appendChild( viewElement );
+
+				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( () => {
+					const editableWidthWithPadding = toPx( new Rect( viewElement ).width );
+
+					expect( view.toolbar.maxWidth ).to.be.equal( editableWidthWithPadding );
+
+					global.document.body.removeChild( viewElement );
+
+					done();
+				}, 500 );
+			} );
 		} );
 
 		describe( '#panel', () => {