From f903f453a9086e228b932680c7a3a6e5876a7253 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 19 Mar 2020 16:58:06 +0100 Subject: [PATCH 1/3] Replace LabeledInputView -> LabeledFieldView --- .../imagetextalternativeui.js | 6 +++--- .../ui/textalternativeformview.js | 15 ++++++++------- .../imagetextalternativeui.js | 17 ++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/imagetextalternative/imagetextalternativeui.js b/src/imagetextalternative/imagetextalternativeui.js index bf2012d6..7e01dee4 100644 --- a/src/imagetextalternative/imagetextalternativeui.js +++ b/src/imagetextalternative/imagetextalternativeui.js @@ -117,7 +117,7 @@ export default class ImageTextAlternativeUI extends Plugin { this.listenTo( this._form, 'submit', () => { editor.execute( 'imageTextAlternative', { - newValue: this._form.labeledInput.inputView.element.value + newValue: this._form.labeledInput.field.element.value } ); this._hideForm( true ); @@ -177,9 +177,9 @@ export default class ImageTextAlternativeUI extends Plugin { // 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 || ''; + labeledInput.field.value = labeledInput.field.element.value = command.value || ''; - this._form.labeledInput.select(); + this._form.labeledInput.field.select(); } /** diff --git a/src/imagetextalternative/ui/textalternativeformview.js b/src/imagetextalternative/ui/textalternativeformview.js index 75b0a6f0..c19338f9 100644 --- a/src/imagetextalternative/ui/textalternativeformview.js +++ b/src/imagetextalternative/ui/textalternativeformview.js @@ -11,8 +11,9 @@ import View from '@ckeditor/ckeditor5-ui/src/view'; import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; -import LabeledInputView from '@ckeditor/ckeditor5-ui/src/labeledinput/labeledinputview'; -import InputTextView from '@ckeditor/ckeditor5-ui/src/inputtext/inputtextview'; + +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; +import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; @@ -54,9 +55,9 @@ export default class TextAlternativeFormView extends View { this.keystrokes = new KeystrokeHandler(); /** - * A textarea with a label. + * An input with a label. * - * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} #labeledTextarea + * @member {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} #labeledInput */ this.labeledInput = this._createLabeledInputView(); @@ -181,14 +182,14 @@ export default class TextAlternativeFormView extends View { * Creates an input with a label. * * @private - * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView} + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} Labeled field view instance. */ _createLabeledInputView() { const t = this.locale.t; - const labeledInput = new LabeledInputView( this.locale, InputTextView ); + const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText ); labeledInput.label = t( 'Text alternative' ); - labeledInput.inputView.placeholder = t( 'Text alternative' ); + labeledInput.field.placeholder = t( 'Text alternative' ); return labeledInput; } diff --git a/tests/imagetextalternative/imagetextalternativeui.js b/tests/imagetextalternative/imagetextalternativeui.js index 73e8f436..77f46a70 100644 --- a/tests/imagetextalternative/imagetextalternativeui.js +++ b/tests/imagetextalternative/imagetextalternativeui.js @@ -78,23 +78,23 @@ describe( 'ImageTextAlternativeUI', () => { } ); it( 'should set alt attribute value to textarea and select it', () => { - const spy = sinon.spy( form.labeledInput, 'select' ); + const spy = sinon.spy( form.labeledInput.field, 'select' ); setData( model, '[foo bar]' ); button.fire( 'execute' ); sinon.assert.calledOnce( spy ); - expect( form.labeledInput.value ).equals( 'foo bar' ); + expect( form.labeledInput.field.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.labeledInput, 'select' ); + const spy = sinon.spy( form.labeledInput.field, 'select' ); setData( model, '[]' ); button.fire( 'execute' ); sinon.assert.calledOnce( spy ); - expect( form.labeledInput.value ).equals( '' ); + expect( form.labeledInput.field.value ).equals( '' ); } ); } ); @@ -102,19 +102,18 @@ describe( 'ImageTextAlternativeUI', () => { // 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'; + form.labeledInput.field.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.'; + form.labeledInput.field.element.value = 'This value was canceled.'; // Mock the user editing the same image once again. setData( model, '[foo]' ); button.fire( 'execute' ); - expect( form.labeledInput.inputView.element.value ).to.equal( 'foo' ); + expect( form.labeledInput.field.element.value ).to.equal( 'foo' ); } ); it( 'should execute command on submit', () => { @@ -123,7 +122,7 @@ describe( 'ImageTextAlternativeUI', () => { sinon.assert.calledOnce( spy ); sinon.assert.calledWithExactly( spy, 'imageTextAlternative', { - newValue: form.labeledInput.inputView.element.value + newValue: form.labeledInput.field.element.value } ); } ); From 5b08c844d296d4772e42241a1a07728bbab42f11 Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 25 Mar 2020 15:43:33 +0100 Subject: [PATCH 2/3] Change module path --- src/imagetextalternative/ui/textalternativeformview.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/imagetextalternative/ui/textalternativeformview.js b/src/imagetextalternative/ui/textalternativeformview.js index c19338f9..b76bbb08 100644 --- a/src/imagetextalternative/ui/textalternativeformview.js +++ b/src/imagetextalternative/ui/textalternativeformview.js @@ -12,8 +12,8 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; -import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfieldview/labeledfieldview'; -import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfieldview/utils'; +import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview'; +import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils'; import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler'; import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler'; @@ -57,7 +57,7 @@ export default class TextAlternativeFormView extends View { /** * An input with a label. * - * @member {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} #labeledInput + * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView} #labeledInput */ this.labeledInput = this._createLabeledInputView(); @@ -182,7 +182,7 @@ export default class TextAlternativeFormView extends View { * Creates an input with a label. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} Labeled field view instance. + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled field view instance. */ _createLabeledInputView() { const t = this.locale.t; From 56d0b248ae4e88cce65b9b744266955efae05fcb Mon Sep 17 00:00:00 2001 From: panr Date: Wed, 25 Mar 2020 16:03:32 +0100 Subject: [PATCH 3/3] Change #field to #fieldView --- .../imagetextalternativeui.js | 6 +++--- .../ui/textalternativeformview.js | 2 +- .../imagetextalternativeui.js | 16 ++++++++-------- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/imagetextalternative/imagetextalternativeui.js b/src/imagetextalternative/imagetextalternativeui.js index 7e01dee4..b7a5c043 100644 --- a/src/imagetextalternative/imagetextalternativeui.js +++ b/src/imagetextalternative/imagetextalternativeui.js @@ -117,7 +117,7 @@ export default class ImageTextAlternativeUI extends Plugin { this.listenTo( this._form, 'submit', () => { editor.execute( 'imageTextAlternative', { - newValue: this._form.labeledInput.field.element.value + newValue: this._form.labeledInput.fieldView.element.value } ); this._hideForm( true ); @@ -177,9 +177,9 @@ export default class ImageTextAlternativeUI extends Plugin { // 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.field.value = labeledInput.field.element.value = command.value || ''; + labeledInput.fieldView.value = labeledInput.fieldView.element.value = command.value || ''; - this._form.labeledInput.field.select(); + this._form.labeledInput.fieldView.select(); } /** diff --git a/src/imagetextalternative/ui/textalternativeformview.js b/src/imagetextalternative/ui/textalternativeformview.js index b76bbb08..5427970b 100644 --- a/src/imagetextalternative/ui/textalternativeformview.js +++ b/src/imagetextalternative/ui/textalternativeformview.js @@ -189,7 +189,7 @@ export default class TextAlternativeFormView extends View { const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText ); labeledInput.label = t( 'Text alternative' ); - labeledInput.field.placeholder = t( 'Text alternative' ); + labeledInput.fieldView.placeholder = t( 'Text alternative' ); return labeledInput; } diff --git a/tests/imagetextalternative/imagetextalternativeui.js b/tests/imagetextalternative/imagetextalternativeui.js index 77f46a70..711707fa 100644 --- a/tests/imagetextalternative/imagetextalternativeui.js +++ b/tests/imagetextalternative/imagetextalternativeui.js @@ -78,23 +78,23 @@ describe( 'ImageTextAlternativeUI', () => { } ); it( 'should set alt attribute value to textarea and select it', () => { - const spy = sinon.spy( form.labeledInput.field, 'select' ); + const spy = sinon.spy( form.labeledInput.fieldView, 'select' ); setData( model, '[foo bar]' ); button.fire( 'execute' ); sinon.assert.calledOnce( spy ); - expect( form.labeledInput.field.value ).equals( 'foo bar' ); + expect( form.labeledInput.fieldView.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.labeledInput.field, 'select' ); + const spy = sinon.spy( form.labeledInput.fieldView, 'select' ); setData( model, '[]' ); button.fire( 'execute' ); sinon.assert.calledOnce( spy ); - expect( form.labeledInput.field.value ).equals( '' ); + expect( form.labeledInput.fieldView.value ).equals( '' ); } ); } ); @@ -103,17 +103,17 @@ describe( 'ImageTextAlternativeUI', () => { 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.field.value = 'foo'; + form.labeledInput.fieldView.value = 'foo'; // Mock the user using the form, changing the value but clicking "Cancel". // so the command's value is not updated. - form.labeledInput.field.element.value = 'This value was canceled.'; + form.labeledInput.fieldView.element.value = 'This value was canceled.'; // Mock the user editing the same image once again. setData( model, '[foo]' ); button.fire( 'execute' ); - expect( form.labeledInput.field.element.value ).to.equal( 'foo' ); + expect( form.labeledInput.fieldView.element.value ).to.equal( 'foo' ); } ); it( 'should execute command on submit', () => { @@ -122,7 +122,7 @@ describe( 'ImageTextAlternativeUI', () => { sinon.assert.calledOnce( spy ); sinon.assert.calledWithExactly( spy, 'imageTextAlternative', { - newValue: form.labeledInput.field.element.value + newValue: form.labeledInput.fieldView.element.value } ); } );