Merge a12e6ea into 6142355

src/linkui.js

@@ -205,7 +205,7 @@ export default class LinkUI extends Plugin {
 			button.bind( 'isOn', 'isEnabled' ).to( linkCommand, 'value', 'isEnabled' );
 
 			// Show the panel on button click.
-			this.listenTo( button, 'execute', () => this._showUI() );
+			this.listenTo( button, 'execute', () => this._showUI( true ) );
 
 			return button;
 		} );
@@ -255,7 +255,7 @@ export default class LinkUI extends Plugin {
 		// Close on click outside of balloon panel element.
 		clickOutsideHandler( {
 			emitter: this.formView,
-			activator: () => this._isUIVisible,
+			activator: () => this._isUIInPanel,
 			contextElements: [ this._balloon.view.element ],
 			callback: () => this._hideUI()
 		} );
@@ -295,7 +295,10 @@ export default class LinkUI extends Plugin {
 			position: this._getBalloonPositionData()
 		} );
 
-		this.formView.urlInputView.select();
+		// Select input when form view is currently visible.
+		if ( this._balloon.visibleView === this.formView ) {
+			this.formView.urlInputView.select();
+		}
 
 		// Make sure that each time the panel shows up, the URL field remains in sync with the value of
 		// the command. If the user typed in the input, then canceled the balloon (`urlInputView#value` stays
@@ -329,9 +332,10 @@ export default class LinkUI extends Plugin {
 	 * Shows the right kind of the UI for current state of the command. It's either
 	 * {@link #formView} or {@link #actionsView}.
 	 *
+	 * @param {Boolean} forceVisible
 	 * @private
 	 */
-	_showUI() {
+	_showUI( forceVisible = false ) {
 		const editor = this.editor;
 		const linkCommand = editor.commands.get( 'link' );
 
@@ -342,9 +346,15 @@ export default class LinkUI extends Plugin {
 		// When there's no link under the selection, go straight to the editing UI.
 		if ( !this._getSelectedLinkElement() ) {
 			this._addActionsView();
+
+			// Be sure panel with link is visible.
+			if ( forceVisible ) {
+				this._balloon.showStack( 'main' );
+			}
+
 			this._addFormView();
 		}
-		// If theres a link under the selection...
+		// If there's a link under the selection...
 		else {
 			// Go to the editing UI if actions are already visible.
 			if ( this._areActionsVisible ) {

tests/linkui.js

@@ -18,6 +18,7 @@ import LinkFormView from '../src/ui/linkformview';
 import LinkActionsView from '../src/ui/linkactionsview';
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import View from '@ckeditor/ckeditor5-ui/src/view';
 
 import ClickObserver from '@ckeditor/ckeditor5-engine/src/view/observer/clickobserver';
 
@@ -103,7 +104,7 @@ describe( 'LinkUI', () => {
 				const spy = testUtils.sinon.stub( linkUIFeature, '_showUI' ).returns( {} );
 
 				linkButton.fire( 'execute' );
-				sinon.assert.calledWithExactly( spy );
+				sinon.assert.calledWithExactly( spy, true );
 			} );
 		} );
 	} );
@@ -255,6 +256,19 @@ describe( 'LinkUI', () => {
 			expect( formView.urlInputView.inputView.element.value ).to.equal( '' );
 		} );
 
+		it( 'should optionally force `main` stack to be visible', () => {
+			setModelData( editor.model, '<paragraph>f[o]o</paragraph>' );
+
+			balloon.add( {
+				view: new View(),
+				stackId: 'secondary'
+			} );
+
+			linkUIFeature._showUI( true );
+
+			expect( balloon.visibleView ).to.equal( formView );
+		} );
+
 		describe( 'response to ui#update', () => {
 			let view, viewDocument;
 
@@ -581,7 +595,26 @@ describe( 'LinkUI', () => {
 		it( 'should hide the UI and not focus editable upon clicking outside the UI', () => {
 			const spy = testUtils.sinon.spy( linkUIFeature, '_hideUI' );
 
-			linkUIFeature._showUI( true );
+			linkUIFeature._showUI();
+			document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
+
+			sinon.assert.calledWithExactly( spy );
+		} );
+
+		it( 'should hide the UI when link is in not currently visible stack', () => {
+			const spy = testUtils.sinon.spy( linkUIFeature, '_hideUI' );
+
+			balloon.add( {
+				view: new View(),
+				stackId: 'secondary'
+			} );
+
+			linkUIFeature._showUI();
+
+			// Be sure any of link view is not currently visible/
+			expect( balloon.visibleView ).to.not.equal( actionsView );
+			expect( balloon.visibleView ).to.not.equal( formView );
+
 			document.body.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
 
 			sinon.assert.calledWithExactly( spy );
@@ -590,7 +623,7 @@ describe( 'LinkUI', () => {
 		it( 'should not hide the UI upon clicking inside the the UI', () => {
 			const spy = testUtils.sinon.spy( linkUIFeature, '_hideUI' );
 
-			linkUIFeature._showUI( true );
+			linkUIFeature._showUI();
 			balloon.view.element.dispatchEvent( new Event( 'mousedown', { bubbles: true } ) );
 
 			sinon.assert.notCalled( spy );