Преглед на файлове

Refactored ImageBalloonPanel showing/hiding to fix focus issues.

Szymon Kupś преди 9 години
родител
ревизия
8035df6031
променени са 2 файла, в които са добавени 14 реда и са изтрити 9 реда
  1. 11 3
      packages/ckeditor5-image/src/imagetoolbar.js
  2. 3 6
      packages/ckeditor5-image/src/ui/imageballoonpanel.js

+ 11 - 3
packages/ckeditor5-image/src/imagetoolbar.js

@@ -43,18 +43,26 @@ export default class ImageToolbar extends Plugin {
 			promises.push( toolbar.items.add( editor.ui.componentFactory.create( name ) ) );
 		}
 
-		// Add toolbar to editor's UI.
+		// Add balloon panel to editor's UI.
 		promises.push( editor.ui.view.body.add( panel ) );
 
-		// Show toolbar each time image widget is selected.
-		editor.listenTo( this.editor.editing.view, 'render', () => {
+		// Show balloon panel each time image widget is selected.
+		this.listenTo( this.editor.editing.view, 'render', () => {
 			this.show();
+		}, { priority: 'low' } );
+
+		// There is no render method after focus is back in editor, we need to check if balloon panel should be visible.
+		this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
+			if ( !was && is ) {
+				this.show();
+			}
 		} );
 
 		return Promise.all( promises );
 	}
 
 	show() {
+		// TODO: maybe isImageWidgetSelected( editor ) - this code is repeated in many places.
 		const selectedElement = this.editor.editing.view.selection.getSelectedElement();
 
 		if ( selectedElement && isImageWidget( selectedElement ) ) {

+ 3 - 6
packages/ckeditor5-image/src/ui/imageballoonpanel.js

@@ -56,14 +56,14 @@ export default class ImageBalloonPanel extends BalloonPanelView {
 		// Let the focusTracker know about new focusable UI element.
 		editor.ui.focusTracker.add( this.element );
 
-		// Hide the panel when editor loses focus but no the other way around.
+		// Hide the balloon if editor had focus and now focus is lost.
 		this.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => {
 			if ( was && !is ) {
-				this.hide();
+				this.detach();
 			}
 		} );
 
-		// Check if the toolbar should be displayed each time view is rendered.
+		// Hide the balloon if no image is currently selected.
 		editor.listenTo( editingView, 'render', () => {
 			const selectedElement = editingView.selection.getSelectedElement();
 
@@ -78,8 +78,6 @@ export default class ImageBalloonPanel extends BalloonPanelView {
 	}
 
 	attach() {
-		this.show();
-
 		this._attach();
 		this.editor.ui.view.listenTo( global.window, 'scroll', this._throttledAttach );
 		this.editor.ui.view.listenTo( global.window, 'resize', this._throttledAttach );
@@ -87,7 +85,6 @@ export default class ImageBalloonPanel extends BalloonPanelView {
 
 	detach() {
 		this.hide();
-
 		this.editor.ui.view.stopListening( global.window, 'scroll', this._throttledAttach );
 		this.editor.ui.view.stopListening( global.window, 'resize', this._throttledAttach );
 	}