Merge pull request #416 from ckeditor/t/ckeditor5-core/130

Internal: Used the `EditorUI#update` event instead of `View#render` to attach the UI components (see ckeditor/ckeditor5-core#130).

src/toolbar/balloon/balloontoolbar.js

@@ -167,9 +167,8 @@ export default class BalloonToolbar extends Plugin {
 			return;
 		}
 
-		// Update the toolbar position upon change (e.g. external document changes)
-		// while it's visible.
-		this.listenTo( this.editor.editing.view, 'render', () => {
+		// Update the toolbar position when the editor ui should be refreshed.
+		this.listenTo( this.editor.ui, 'update', () => {
 			this._balloon.updatePosition( this._getBalloonPositionData() );
 		} );
 
@@ -186,7 +185,7 @@ export default class BalloonToolbar extends Plugin {
 	 */
 	hide() {
 		if ( this._balloon.hasView( this.toolbarView ) ) {
-			this.stopListening( this.editor.editing.view, 'render' );
+			this.stopListening( this.editor.ui, 'update' );
 			this._balloon.remove( this.toolbarView );
 		}
 	}

src/toolbar/block/blocktoolbar.js

@@ -230,7 +230,7 @@ export default class BlockToolbar extends Plugin {
 			}
 		} );
 
-		this.listenTo( view, 'render', () => {
+		this.listenTo( editor.ui, 'update', () => {
 			// Get first selected block, button will be attached to this element.
 			modelTarget = Array.from( model.document.selection.getSelectedBlocks() )[ 0 ];
 

tests/toolbar/balloon/balloontoolbar.js

@@ -275,17 +275,17 @@ describe( 'BalloonToolbar', () => {
 			expect( targetRect ).to.deep.equal( backwardSelectionRect );
 		} );
 
-		it( 'should update balloon position on view#change event while balloon is added to the #_balloon', () => {
+		it( 'should update balloon position on ui#update event while balloon is added to the #_balloon', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			balloonToolbar.show();
 			sinon.assert.notCalled( spy );
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 			sinon.assert.calledOnce( spy );
 		} );
 
@@ -369,15 +369,15 @@ describe( 'BalloonToolbar', () => {
 			sinon.assert.calledWithExactly( removeBalloonSpy, balloonToolbar.toolbarView );
 		} );
 
-		it( 'should stop update balloon position on ViewDocument#change event', () => {
+		it( 'should stop update balloon position on ui#update event', () => {
 			setData( model, '<paragraph>b[a]r</paragraph>' );
 
 			const spy = sandbox.spy( balloon, 'updatePosition' );
 
 			balloonToolbar.show();
 			balloonToolbar.hide();
 
-			editingView.fire( 'render' );
+			editor.ui.fire( 'update' );
 			sinon.assert.notCalled( spy );
 		} );
 

tests/toolbar/block/blocktoolbar.js

@@ -226,7 +226,7 @@ describe( 'BlockToolbar', () => {
 			expect( blockToolbar.buttonView.isVisible ).to.be.true;
 		} );
 
-		it( 'should not display the button when the selection is placed in a root element', () => {
+		it( 'should not display the button when the selection is placed in the root element', () => {
 			editor.model.schema.extend( '$text', { allowIn: '$root' } );
 
 			setData( editor.model, '<paragraph>foo</paragraph>[]<paragraph>bar</paragraph>' );
@@ -291,7 +291,7 @@ describe( 'BlockToolbar', () => {
 				height: 100
 			} );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			expect( blockToolbar.buttonView.top ).to.equal( 470 );
 			expect( blockToolbar.buttonView.left ).to.equal( 100 );
@@ -326,37 +326,37 @@ describe( 'BlockToolbar', () => {
 				height: 100
 			} );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			expect( blockToolbar.buttonView.top ).to.equal( 472 );
 			expect( blockToolbar.buttonView.left ).to.equal( 100 );
 		} );
 
-		it( 'should reposition the #panelView when open on view#render', () => {
+		it( 'should reposition the #panelView when open on ui#update', () => {
 			blockToolbar.panelView.isVisible = false;
 
 			const spy = testUtils.sinon.spy( blockToolbar.panelView, 'pin' );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.notCalled( spy );
 
 			blockToolbar.panelView.isVisible = true;
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.calledWith( spy, {
 				target: blockToolbar.buttonView.element,
 				limiter: editor.ui.view.editableElement
 			} );
 		} );
 
-		it( 'should not reset the toolbar focus on view#render', () => {
+		it( 'should not reset the toolbar focus on ui#update', () => {
 			blockToolbar.panelView.isVisible = true;
 
 			const spy = testUtils.sinon.spy( blockToolbar.toolbarView, 'focus' );
 
-			editor.editing.view.fire( 'render' );
+			editor.ui.fire( 'update' );
 
 			sinon.assert.notCalled( spy );
 		} );