Przeglądaj źródła

Used UI#update event instead of View#render to attach image UI.

Oskar Wróbel 7 lat temu
rodzic
commit
3d7c618711

+ 1 - 1
packages/ckeditor5-image/src/imagetextalternative/imagetextalternativeui.js

@@ -115,7 +115,7 @@ export default class ImageTextAlternativeUI extends Plugin {
 		} );
 
 		// Reposition the balloon or hide the form if an image widget is no longer selected.
-		this.listenTo( view, 'render', () => {
+		this.listenTo( editor.ui, 'update', () => {
 			if ( !isImageWidgetSelected( viewDocument.selection ) ) {
 				this._hideForm( true );
 			} else if ( this._isVisible ) {

+ 10 - 16
packages/ckeditor5-image/src/imagetoolbar.js

@@ -93,11 +93,11 @@ export default class ImageToolbar extends Plugin {
 		this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory );
 
 		// Show balloon panel each time image widget is selected.
-		this.listenTo( editor.editing.view, 'render', () => {
+		this.listenTo( editor.ui, 'update', () => {
 			this._checkIsVisible();
 		} );
 
-		// There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
+		// UI#update is not fired after focus is back in editor, we need to check if balloon panel should be visible.
 		this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => {
 			this._checkIsVisible();
 		}, { priority: 'low' } );
@@ -111,14 +111,10 @@ export default class ImageToolbar extends Plugin {
 	_checkIsVisible() {
 		const editor = this.editor;
 
-		if ( !editor.ui.focusTracker.isFocused ) {
+		if ( !editor.ui.focusTracker.isFocused || !isImageWidgetSelected( editor.editing.view.document.selection ) ) {
 			this._hideToolbar();
 		} else {
-			if ( isImageWidgetSelected( editor.editing.view.document.selection ) ) {
-				this._showToolbar();
-			} else {
-				this._hideToolbar();
-			}
+			this._showToolbar();
 		}
 	}
 
@@ -132,14 +128,12 @@ export default class ImageToolbar extends Plugin {
 
 		if ( this._isVisible ) {
 			repositionContextualBalloon( editor );
-		} else {
-			if ( !this._balloon.hasView( this._toolbar ) ) {
-				this._balloon.add( {
-					view: this._toolbar,
-					position: getBalloonPositionData( editor ),
-					balloonClassName
-				} );
-			}
+		} else if ( !this._balloon.hasView( this._toolbar ) ) {
+			this._balloon.add( {
+				view: this._toolbar,
+				position: getBalloonPositionData( editor ),
+				balloonClassName
+			} );
 		}
 	}
 

+ 5 - 3
packages/ckeditor5-image/tests/imagetextalternative/imagetextalternativeui.js

@@ -156,14 +156,14 @@ describe( 'ImageTextAlternative', () => {
 			expect( balloon.visibleView ).to.equal( lastView );
 		} );
 
-		describe( 'integration with the editor selection (#render event)', () => {
+		describe( 'integration with the editor selection (ui#update event)', () => {
 			it( 'should re-position the form', () => {
 				setData( model, '[<image src=""></image>]' );
 				button.fire( 'execute' );
 
 				const spy = sinon.spy( balloon, 'updatePosition' );
 
-				editor.editing.view.fire( 'render' );
+				editor.ui.fire( 'update' );
 				sinon.assert.calledOnce( spy );
 			} );
 
@@ -174,11 +174,13 @@ describe( 'ImageTextAlternative', () => {
 				const removeSpy = sinon.spy( balloon, 'remove' );
 				const focusSpy = sinon.spy( editor.editing.view, 'focus' );
 
-				// EnqueueChange automatically fires #render event.
 				model.enqueueChange( 'transparent', writer => {
 					writer.remove( doc.selection.getFirstRange() );
 				} );
 
+				// Because the update event is throttled we need to "flush" it.
+				editor.ui.fire( 'update' );
+
 				sinon.assert.calledWithExactly( removeSpy, form );
 				sinon.assert.calledOnce( focusSpy );
 			} );

+ 24 - 9
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -17,7 +17,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageToolbar', () => {
-	let editor, model, doc, editingView, plugin, toolbar, balloon, editorElement;
+	let editor, model, doc, plugin, toolbar, balloon, editorElement;
 
 	beforeEach( () => {
 		editorElement = global.document.createElement( 'div' );
@@ -36,7 +36,6 @@ describe( 'ImageToolbar', () => {
 				doc = model.document;
 				plugin = editor.plugins.get( ImageToolbar );
 				toolbar = plugin._toolbar;
-				editingView = editor.editing.view;
 				balloon = editor.plugins.get( 'ContextualBalloon' );
 			} );
 	} );
@@ -79,6 +78,9 @@ describe( 'ImageToolbar', () => {
 
 			setData( model, '[<image src=""></image>]' );
 
+			// "Flush" throttled update event.
+			editor.ui.fire( 'update' );
+
 			sinon.assert.calledWithMatch( spy, {
 				view: toolbar,
 				balloonClassName: 'ck-toolbar-container'
@@ -112,17 +114,18 @@ describe( 'ImageToolbar', () => {
 		} );
 	} );
 
-	describe( 'integration with the editor selection (#change event)', () => {
+	describe( 'integration with the editor selection', () => {
 		beforeEach( () => {
 			editor.ui.focusTracker.isFocused = true;
 		} );
 
-		it( 'should show the toolbar on render when the image is selected', () => {
+		it( 'should show the toolbar on ui#update when the image is selected', () => {
 			setData( model, '<paragraph>[foo]</paragraph><image src=""></image>' );
 
 			expect( balloon.visibleView ).to.be.null;
 
-			editingView.change( () => {} );
+			editor.ui.fire( 'update' );
+
 			expect( balloon.visibleView ).to.be.null;
 
 			model.change( writer => {
@@ -132,16 +135,22 @@ describe( 'ImageToolbar', () => {
 				);
 			} );
 
+			// "Flush" throttled update event.
+			editor.ui.fire( 'update' );
 			expect( balloon.visibleView ).to.equal( toolbar );
 
 			// Make sure successive change does not throw, e.g. attempting
 			// to insert the toolbar twice.
-			editingView.change( () => {} );
+			editor.ui.fire( 'update' );
 			expect( balloon.visibleView ).to.equal( toolbar );
 		} );
 
 		it( 'should not engage when the toolbar is in the balloon yet invisible', () => {
 			setData( model, '[<image src=""></image>]' );
+
+			// "Flush" throttled update event.
+			editor.ui.fire( 'update' );
+
 			expect( balloon.visibleView ).to.equal( toolbar );
 
 			const lastView = new View();
@@ -156,13 +165,17 @@ describe( 'ImageToolbar', () => {
 
 			expect( balloon.visibleView ).to.equal( lastView );
 
-			editingView.change( () => {} );
+			editor.ui.fire( 'update' );
+
 			expect( balloon.visibleView ).to.equal( lastView );
 		} );
 
-		it( 'should hide the toolbar on render if the image is de–selected', () => {
+		it( 'should hide the toolbar on ui#update if the image is de–selected', () => {
 			setData( model, '<paragraph>foo</paragraph>[<image src=""></image>]' );
 
+			// "Flush" throttled update event.
+			editor.ui.fire( 'update' );
+
 			expect( balloon.visibleView ).to.equal( toolbar );
 
 			model.change( writer => {
@@ -172,11 +185,13 @@ describe( 'ImageToolbar', () => {
 				);
 			} );
 
+			// "Flush" throttled update event.
+			editor.ui.fire( 'update' );
 			expect( balloon.visibleView ).to.be.null;
 
 			// Make sure successive change does not throw, e.g. attempting
 			// to remove the toolbar twice.
-			editingView.change( () => {} );
+			editor.ui.fire( 'update' );
 			expect( balloon.visibleView ).to.be.null;
 		} );
 	} );