Improved ContextualBalloon to deal with an async Views.

src/contextualballoon.js → src/panel/balloon/contextualballoon.js

@@ -4,11 +4,11 @@
  */
 
 /**
- * @module ui/contextualballoon
+ * @module ui/panel/balloon/contextualballoon
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import BalloonPanelView from './panel/balloon/balloonpanelview';
+import BalloonPanelView from './balloonpanelview';
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
@@ -42,15 +42,15 @@ export default class ContextualBalloon extends Plugin {
 
 		/**
 		 * Stack of the views injected into the balloon. Last one in the stack is displayed
-		 * as a content of {@link module:ui/contextualballoon~ContextualBalloon#view}.
+		 * as a content of {@link module:ui/panel/balloon/contextualballoon~ContextualBalloon#view}.
 		 *
 		 * @private
 		 * @member {Map} #_stack
 		 */
 		this._stack = new Map();
 
-		// Add balloon panel view to editor `body` collection.
-		this.editor.ui.view.body.add( this.view );
+		// Add balloon panel view to editor `body` collection and wait until view will be ready.
+		return this.editor.ui.view.body.add( this.view );
 	}
 
 	static get pluginName() {
@@ -83,8 +83,9 @@ export default class ContextualBalloon extends Plugin {
 	 * Adds a new view to the stack and makes it visible.
 	 *
 	 * @param {Object} data Configuration of the view.
-	 * @param {module:ui/view~View} view Content of the balloon.
-	 * @param {module:utils/dom/position~Options} position Positioning options.
+	 * @param {module:ui/view~View} [data.view] Content of the balloon.
+	 * @param {module:utils/dom/position~Options} [data.position] Positioning options.
+	 * @returns {Promise} A Promise resolved when the child {@link module:ui/view~View#init} is done.
 	 */
 	add( data ) {
 		if ( this.hasView( data.view ) ) {
@@ -105,7 +106,7 @@ export default class ContextualBalloon extends Plugin {
 		// Add new view to the stack.
 		this._stack.set( data.view, data );
 		// And display it.
-		this._show( data.view );
+		return this._show( data.view );
 	}
 
 	/**
@@ -114,6 +115,7 @@ export default class ContextualBalloon extends Plugin {
 	 * When there is no view in the stack then balloon will hide.
 	 *
 	 * @param {module:ui/view~View} view A view to be removed from the balloon.
+	 * @returns {Promise} A Promise resolved when the preceding view is ready.
 	 */
 	remove( view ) {
 		if ( !this.hasView( view ) ) {
@@ -125,6 +127,9 @@ export default class ContextualBalloon extends Plugin {
 			throw new CKEditorError( 'contextualballoon-remove-view-not-exist: Cannot remove configuration of not existing view.' );
 		}
 
+		// A Promise resolved when the preceding view is ready.
+		let promise = Promise.resolve();
+
 		// When visible view is being removed.
 		if ( this.visibleView === view ) {
 			// We need to remove it from the view content.
@@ -139,7 +144,7 @@ export default class ContextualBalloon extends Plugin {
 			// If it is some other view.
 			if ( last ) {
 				// Just show it.
-				this._show( last.view );
+				promise = this._show( last.view );
 			} else {
 				// Hide the balloon panel.
 				this.view.hide();
@@ -148,6 +153,8 @@ export default class ContextualBalloon extends Plugin {
 			// Just remove given view from the stack.
 			this._stack.delete( view );
 		}
+
+		return promise;
 	}
 
 	/**
@@ -164,10 +171,12 @@ export default class ContextualBalloon extends Plugin {
 	 *
 	 * @private
 	 * @param {module:ui/view~View} view View to show in the balloon.
+	 * @returns {Promise} A Promise resolved when the child {@link module:ui/view~View#init} is done.
 	 */
 	_show( view ) {
-		this.view.content.add( view );
-		this.view.attachTo( this._getBalloonPosition() );
+		return this.view.content.add( view ).then( () => {
+			this.view.attachTo( this._getBalloonPosition() );
+		} );
 	}
 
 	/**
@@ -187,6 +196,7 @@ export default class ContextualBalloon extends Plugin {
 	destroy() {
 		this.editor.ui.view.body.remove( this.view );
 		this.view.destroy();
+		this._stack.clear();
 		super.destroy();
 	}
 }

tests/manual/contextualballoon/contextualballoon.js

@@ -16,7 +16,7 @@ import EssentialsPresets from '@ckeditor/ckeditor5-presets/src/essentials';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
-import ContextualBalloon from '../../../src/contextualballoon';
+import ContextualBalloon from '../../../src/panel/balloon/contextualballoon';
 import ToolbarView from '../../../src/toolbar/toolbarview';
 import ButtonView from '../../../src/button/buttonview';
 import Template from '../../../src/template';