Merge pull request #120 from ckeditor/t/78

Fix: The URL field's value should be updated each time the form shows up. Closes #78.

src/link.js

@@ -229,14 +229,23 @@ export default class Link extends Plugin {
 	 * @return {Promise} A promise resolved when the {@link #formView} {@link module:ui/view~View#init} is done.
 	 */
 	_showPanel( focusInput ) {
-		const editing = this.editor.editing;
+		const editor = this.editor;
+		const command = editor.commands.get( 'link' );
+		const editing = editor.editing;
 		const showViewDocument = editing.view;
 		const showIsCollapsed = showViewDocument.selection.isCollapsed;
 		const showSelectedLink = this._getSelectedLinkElement();
 
 		// https://github.com/ckeditor/ckeditor5-link/issues/53
 		this.formView.unlinkButtonView.isVisible = !!showSelectedLink;
 
+		// 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
+		// unaltered) and re-opened it without changing the value of the link command (e.g. because they
+		// clicked the same link), they would see the old value instead of the actual value of the command.
+		// https://github.com/ckeditor/ckeditor5-link/issues/78
+		this.formView.urlInputView.inputView.element.value = command.value;
+
 		this.listenTo( showViewDocument, 'render', () => {
 			const renderSelectedLink = this._getSelectedLinkElement();
 			const renderIsCollapsed = showViewDocument.selection.isCollapsed;

tests/link.js

@@ -214,6 +214,19 @@ describe( 'Link', () => {
 				} );
 		} );
 
+		// https://github.com/ckeditor/ckeditor5-link/issues/78
+		it( 'should make sure the URL input in the #formView always stays in sync with the value of the command', () => {
+			setModelData( editor.document, '<paragraph><$text linkHref="url">f[]oo</$text></paragraph>' );
+
+			// Mock some leftover value **in DOM**, e.g. after previous editing.
+			formView.urlInputView.inputView.element.value = 'leftover';
+
+			return linkFeature._showPanel()
+				.then( () => {
+					expect( formView.urlInputView.inputView.element.value ).to.equal( 'url' );
+				} );
+		} );
+
 		describe( 'when the document is rendering', () => {
 			it( 'should not duplicate #render listeners', () => {
 				const viewDocument = editor.editing.view;