8
0
Просмотр исходного кода

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

Aleksander Nowodzinski 8 лет назад
Родитель
Сommit
c580b4af8c

+ 9 - 1
packages/ckeditor5-image/src/imagetextalternative.js

@@ -153,8 +153,16 @@ export default class ImageTextAlternative extends Plugin {
 	_showBalloonPanel() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageTextAlternative' );
-		this.form.lebeledInput.value = command.value || '';
+		const lebeledInput = this.form.lebeledInput;
 		this.balloonPanel.attach();
+
+		// 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 (`lebeledInput#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
+		lebeledInput.value = lebeledInput.inputView.element.value = command.value || '';
+
 		this.form.lebeledInput.select();
 	}
 

+ 18 - 0
packages/ckeditor5-image/tests/imagetextalternative.js

@@ -94,6 +94,24 @@ describe( 'ImageTextAlternative', () => {
 	} );
 
 	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.lebeledInput.value = 'foo';
+
+			// Mock the user using the form, changing the value but clicking "Cancel".
+			// so the command's value is not updated.
+			form.lebeledInput.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.lebeledInput.inputView.element.value ).to.equal( 'foo' );
+		} );
+
 		it( 'should execute command on submit', () => {
 			const spy = sinon.spy( editor, 'execute' );
 			form.fire( 'submit' );