Merge pull request #115 from ckeditor/t/114

Fix: Text alternative input should synchronize its value when the balloon shows up. Closes #114.

src/imagetextalternative.js

@@ -103,7 +103,7 @@ export default class ImageTextAlternative extends Plugin {
 		const form = new TextAlternativeFormView( editor.locale );
 
 		this.listenTo( form, 'submit', () => {
-			editor.execute( 'imageTextAlternative', { newValue: form.lebeledInput.inputView.element.value } );
+			editor.execute( 'imageTextAlternative', { newValue: form.labeledInput.inputView.element.value } );
 			this._hideBalloonPanel();
 		} );
 
@@ -153,9 +153,17 @@ export default class ImageTextAlternative extends Plugin {
 	_showBalloonPanel() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageTextAlternative' );
-		this.form.lebeledInput.value = command.value || '';
+		const labeledInput = this.form.labeledInput;
 		this.balloonPanel.attach();
-		this.form.lebeledInput.select();
+
+		// Make sure that each time the panel shows up, the field remains in sync with the value of
+		// the command. If the user typed in the input, then canceled the balloon (`labeledInput#value`
+		// stays unaltered) and re-opened it without changing the value of the command, they would see the
+		// old value instead of the actual value of the command.
+		// https://github.com/ckeditor/ckeditor5-image/issues/114
+		labeledInput.value = labeledInput.inputView.element.value = command.value || '';
+
+		this.form.labeledInput.select();
 	}
 
 	/**

src/imagetextalternative/ui/textalternativeformview.js

@@ -33,7 +33,7 @@ export default class TextAlternativeFormView extends View {
 		 *
 		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea
 		 */
-		this.lebeledInput = this._createLabeledInputView();
+		this.labeledInput = this._createLabeledInputView();
 
 		/**
 		 * Button used to submit the form.
@@ -68,7 +68,7 @@ export default class TextAlternativeFormView extends View {
 			},
 
 			children: [
-				this.lebeledInput,
+				this.labeledInput,
 				{
 					tag: 'div',
 

tests/imagetextalternative.js

@@ -75,31 +75,49 @@ describe( 'ImageTextAlternative', () => {
 		} );
 
 		it( 'should set alt attribute value to textarea and select it', () => {
-			const spy = sinon.spy( form.lebeledInput, 'select' );
+			const spy = sinon.spy( form.labeledInput, 'select' );
 			setData( editor.document, '[<image src="" alt="foo bar"></image>]' );
 			button.fire( 'execute' );
 
 			sinon.assert.calledOnce( spy );
-			expect( plugin.form.lebeledInput.value ).equals( 'foo bar' );
+			expect( plugin.form.labeledInput.value ).equals( 'foo bar' );
 		} );
 
 		it( 'should set empty text to textarea and select it when there is no alt attribute', () => {
-			const spy = sinon.spy( form.lebeledInput, 'select' );
+			const spy = sinon.spy( form.labeledInput, 'select' );
 			setData( editor.document, '[<image src=""></image>]' );
 			button.fire( 'execute' );
 
 			sinon.assert.calledOnce( spy );
-			expect( plugin.form.lebeledInput.value ).equals( '' );
+			expect( plugin.form.labeledInput.value ).equals( '' );
 		} );
 	} );
 
 	describe( 'balloon panel form', () => {
+		// https://github.com/ckeditor/ckeditor5-image/issues/114
+		it( 'should make sure the input always stays in sync with the value of the command', () => {
+			const button = editor.ui.componentFactory.create( 'imageTextAlternative' );
+
+			// Mock the value of the input after some past editing.
+			form.labeledInput.value = 'foo';
+
+			// Mock the user using the form, changing the value but clicking "Cancel".
+			// so the command's value is not updated.
+			form.labeledInput.inputView.element.value = 'This value was canceled.';
+
+			// Mock the user editing the same image once again.
+			setData( editor.document, '[<image src="" alt="foo"></image>]' );
+
+			button.fire( 'execute' );
+			expect( form.labeledInput.inputView.element.value ).to.equal( 'foo' );
+		} );
+
 		it( 'should execute command on submit', () => {
 			const spy = sinon.spy( editor, 'execute' );
 			form.fire( 'submit' );
 
 			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, 'imageTextAlternative', { newValue: form.lebeledInput.inputView.element.value } );
+			sinon.assert.calledWithExactly( spy, 'imageTextAlternative', { newValue: form.labeledInput.inputView.element.value } );
 		} );
 
 		it( 'should detach panel on cancel', () => {

tests/imagetextalternative/ui/textalternativeformview.js

@@ -23,7 +23,7 @@ describe( 'TextAlternativeFormView', () => {
 		} );
 
 		it( 'should create child views', () => {
-			expect( view.lebeledInput ).to.be.instanceOf( View );
+			expect( view.labeledInput ).to.be.instanceOf( View );
 			expect( view.saveButtonView ).to.be.instanceOf( View );
 			expect( view.cancelButtonView ).to.be.instanceOf( View );
 		} );