瀏覽代碼

WIP: Refactor code

panr 5 年之前
父節點
當前提交
78870d3250

+ 9 - 7
packages/ckeditor5-editor-inline/src/inlineeditorui.js

@@ -11,7 +11,7 @@ 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';
 
 /**
  * The inline editor UI class.
@@ -144,11 +144,6 @@ export default class InlineEditorUI extends EditorUI {
 					target: editableElement,
 					positions: view.panelPositions
 				} );
-
-				// Set toolbar's max-width only once.
-				if ( toolbar.element.style.maxWidth === '' ) {
-					this._setToolbarMaxWidth( new Rect( editableElement ).width );
-				}
 			}
 		} );
 
@@ -160,6 +155,13 @@ export default class InlineEditorUI extends EditorUI {
 			originKeystrokeHandler: editor.keystrokes,
 			toolbar
 		} );
+
+		// Set toolbar's max-width on the initialization and update it on the editable resize.
+		const widthObserver = getResizeObserver( ( [ entry ] ) => {
+			this._setToolbarMaxWidth( entry.contentRect.width );
+		} );
+
+		widthObserver.observe( editableElement );
 	}
 
 	/**
@@ -195,6 +197,6 @@ export default class InlineEditorUI extends EditorUI {
 		const view = this.view;
 		const toolbar = view.toolbar;
 
-		toolbar.element.style.maxWidth = `${ width }px`;
+		toolbar.maxWidth = width;
 	}
 }

+ 9 - 14
packages/ckeditor5-editor-inline/tests/inlineeditorui.js

@@ -121,24 +121,19 @@ describe( 'InlineEditorUI', () => {
 				sinon.assert.notCalled( spy );
 			} );
 
-			it( 'toolbar max-width is set on editor.ui#update only once when editable element is in the DOM', () => {
-				const spy = sinon.spy( editor.ui, '_setToolbarMaxWidth' );
-				testUtils.sinon.stub( viewElement, 'getBoundingClientRect' ).returns( { width: 100 } );
+			// TODO: HELP?
+			it( 'toolbar max-width is set to the value of width of the editable element', () => {
+				document.body.appendChild( viewElement );
 
-				viewElement.ownerDocument.body.append( viewElement );
-				view.panel.show();
-
-				expect( view.toolbar.element.style.maxWidth ).to.be.equal( '' );
-
-				editor.ui.fire( 'update' );
+				viewElement.style.width = '400px';
 
-				expect( view.toolbar.element.style.maxWidth ).to.be.equal( '100px' );
+				expect( viewElement.ownerDocument.body.contains( viewElement ) ).to.be.true;
+				expect( view.toolbar.element.ownerDocument.body.contains( view.toolbar.element ) ).to.be.true;
+				expect( view.toolbar.element.style.maxWidth ).to.be.equal( '400px' );
 
-				editor.ui.fire( 'update' );
+				document.body.removeChild( viewElement );
 
-				sinon.assert.calledOnce( spy );
-
-				viewElement.remove();
+				expect( viewElement ).to.not.exist;
 			} );
 
 			it( 'toolbar should group items by default', () => {