Merge pull request #190 from ckeditor/t/181

Feature: The Ctrl+K keystroke should open link URL editing dialog. Closes #181.
ckeditor · Apr 5, 2018 · 56047b5 · 56047b5
2 parents c75c4ca + 3ffef6f
commit 56047b5
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 3 deletions.
diff --git a/src/linkui.js b/src/linkui.js
@@ -109,6 +109,12 @@ export default class LinkUI extends Plugin {
 			cancel();
 		} );
 
+		// Open the form view on Ctrl+K when the **actions have focus**..
+		actionsView.keystrokes.set( linkKeystroke, ( data, cancel ) => {
+			this._addFormView();
+			cancel();
+		} );
+
 		return actionsView;
 	}
 
@@ -245,6 +251,10 @@ export default class LinkUI extends Plugin {
 	 * @protected
 	 */
 	_addActionsView() {
+		if ( this._areActionsInPanel ) {
+			return;
+		}
+
 		this._balloon.add( {
 			view: this.actionsView,
 			position: this._getBalloonPositionData()
@@ -257,6 +267,10 @@ export default class LinkUI extends Plugin {
 	 * @protected
 	 */
 	_addFormView() {
+		if ( this._isFormInPanel ) {
+			return;
+		}
+
 		const editor = this.editor;
 		const linkCommand = editor.commands.get( 'link' );
 
@@ -301,7 +315,7 @@ export default class LinkUI extends Plugin {
 		const editor = this.editor;
 		const linkCommand = editor.commands.get( 'link' );
 
-		if ( !linkCommand.isEnabled || this._isUIInPanel ) {
+		if ( !linkCommand.isEnabled ) {
 			return;
 		}
 
@@ -310,9 +324,16 @@ export default class LinkUI extends Plugin {
 			this._addActionsView();
 			this._addFormView();
 		}
-		// Otherwise display just the actions UI.
+		// If theres a link under the selection...
 		else {
-			this._addActionsView();
+			// Go to the editing UI if actions are already visible.
+			if ( this._areActionsVisible ) {
+				this._addFormView();
+			}
+			// Otherwise display just the actions UI.
+			else {
+				this._addActionsView();
+			}
 		}
 
 		// Begin responding to view#render once the UI is added.

diff --git a/tests/linkui.js b/tests/linkui.js
@@ -173,6 +173,32 @@ describe( 'LinkUI', () => {
 			} );
 		} );
 
+		// #https://github.com/ckeditor/ckeditor5-link/issues/181
+		it( 'should add #formView to the balloon when collapsed selection is inside the link and #actionsView is already visible', () => {
+			setModelData( editor.model, '<paragraph><$text linkHref="url">f[]oo</$text></paragraph>' );
+			const linkElement = editor.editing.view.getDomRoot().querySelector( 'a' );
+
+			linkUIFeature._showUI();
+
+			expect( balloon.visibleView ).to.equal( actionsView );
+			sinon.assert.calledWithExactly( balloonAddSpy, {
+				view: actionsView,
+				position: {
+					target: linkElement
+				}
+			} );
+
+			linkUIFeature._showUI();
+
+			expect( balloon.visibleView ).to.equal( formView );
+			sinon.assert.calledWithExactly( balloonAddSpy, {
+				view: formView,
+				position: {
+					target: linkElement
+				}
+			} );
+		} );
+
 		it( 'should disable #formView and #actionsView elements when link and unlink commands are disabled', () => {
 			setModelData( editor.model, '<paragraph>f[o]o</paragraph>' );
 
@@ -690,6 +716,23 @@ describe( 'LinkUI', () => {
 				expect( balloon.visibleView ).to.equal( null );
 				expect( focusEditableSpy.calledOnce ).to.be.true;
 			} );
+
+			// #https://github.com/ckeditor/ckeditor5-link/issues/181
+			it( 'should add the #formView upon Ctrl+K keystroke press', () => {
+				const keyEvtData = {
+					keyCode: keyCodes.k,
+					ctrlKey: true,
+					preventDefault: sinon.spy(),
+					stopPropagation: sinon.spy()
+				};
+
+				linkUIFeature._showUI();
+				linkUIFeature._removeFormView();
+				expect( balloon.visibleView ).to.equal( actionsView );
+
+				actionsView.keystrokes.press( keyEvtData );
+				expect( balloon.visibleView ).to.equal( formView );
+			} );
 		} );
 	} );