From 5bb7d93a4ee926f987e6016122e690bcb24d6bb5 Mon Sep 17 00:00:00 2001 From: panr Date: Thu, 19 Mar 2020 17:41:14 +0100 Subject: [PATCH 1/3] Replace LabeledInputView -> LabeledFieldView --- src/linkui.js | 10 +++++----- src/ui/linkformview.js | 13 +++++++------ tests/linkui.js | 20 ++++++++++---------- tests/ui/linkformview.js | 2 +- 4 files changed, 23 insertions(+), 22 deletions(-) diff --git a/src/linkui.js b/src/linkui.js index 746a699..19d0ada 100644 --- a/src/linkui.js +++ b/src/linkui.js @@ -146,7 +146,7 @@ export default class LinkUI extends Plugin { const formView = new LinkFormView( editor.locale, linkCommand.manualDecorators ); - formView.urlInputView.bind( 'value' ).to( linkCommand, 'value' ); + formView.urlInputView.field.bind( 'value' ).to( linkCommand, 'value' ); // Form elements should be read-only when corresponding commands are disabled. formView.urlInputView.bind( 'isReadOnly' ).to( linkCommand, 'isEnabled', value => !value ); @@ -154,7 +154,7 @@ export default class LinkUI extends Plugin { // Execute link command after clicking the "Save" button. this.listenTo( formView, 'submit', () => { - editor.execute( 'link', formView.urlInputView.inputView.element.value, formView.getDecoratorSwitchesState() ); + editor.execute( 'link', formView.urlInputView.field.value, formView.getDecoratorSwitchesState() ); this._closeFormView(); } ); @@ -298,16 +298,16 @@ export default class LinkUI extends Plugin { // Select input when form view is currently visible. if ( this._balloon.visibleView === this.formView ) { - this.formView.urlInputView.select(); + this.formView.urlInputView.field.select(); } // 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 + // the command. If the user typed in the input, then canceled the balloon (`urlInputView.field#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 // https://github.com/ckeditor/ckeditor5-link/issues/123 - this.formView.urlInputView.inputView.element.value = linkCommand.value || ''; + this.formView.urlInputView.field.value = linkCommand.value || ''; } /** diff --git a/src/ui/linkformview.js b/src/ui/linkformview.js index 6d7759b..2f1bf93 100644 --- a/src/ui/linkformview.js +++ b/src/ui/linkformview.js @@ -12,8 +12,9 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview'; -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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; @@ -65,7 +66,7 @@ export default class LinkFormView extends View { /** * The URL input view. * - * @member {module:ui/labeledinput/labeledinputview~LabeledInputView} + * @member {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} */ this.urlInputView = this._createUrlInput(); @@ -207,15 +208,15 @@ export default class LinkFormView extends View { * Creates a labeled input view. * * @private - * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView} Labeled input view instance. + * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} Labeled field view instance. */ _createUrlInput() { const t = this.locale.t; - const labeledInput = new LabeledInputView( this.locale, InputTextView ); + const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText ); labeledInput.label = t( 'Link URL' ); - labeledInput.inputView.placeholder = 'https://example.com'; + labeledInput.field.placeholder = 'https://example.com'; return labeledInput; } diff --git a/tests/linkui.js b/tests/linkui.js index 9a5f97f..405b377 100644 --- a/tests/linkui.js +++ b/tests/linkui.js @@ -236,12 +236,12 @@ describe( 'LinkUI', () => { setModelData( editor.model, '<$text linkHref="url">f[]oo' ); // Mock some leftover value **in DOM**, e.g. after previous editing. - formView.urlInputView.inputView.element.value = 'leftover'; + formView.urlInputView.field.value = 'leftover'; linkUIFeature._showUI(); actionsView.fire( 'edit' ); - expect( formView.urlInputView.inputView.element.value ).to.equal( 'url' ); + expect( formView.urlInputView.field.value ).to.equal( 'url' ); } ); // https://github.com/ckeditor/ckeditor5-link/issues/123 @@ -249,7 +249,7 @@ describe( 'LinkUI', () => { setModelData( editor.model, 'f[]oo' ); linkUIFeature._showUI(); - expect( formView.urlInputView.inputView.element.value ).to.equal( '' ); + expect( formView.urlInputView.field.value ).to.equal( '' ); } ); it( 'should optionally force `main` stack to be visible', () => { @@ -823,7 +823,7 @@ describe( 'LinkUI', () => { linkUIFeature._showUI(); linkUIFeature._removeFormView(); - const selectSpy = testUtils.sinon.spy( formView.urlInputView, 'select' ); + const selectSpy = testUtils.sinon.spy( formView.urlInputView.field, 'select' ); actionsView.fire( 'edit' ); expect( balloon.visibleView ).to.equal( formView ); @@ -913,19 +913,19 @@ describe( 'LinkUI', () => { it( 'should bind formView.urlInputView#value to link command value', () => { const command = editor.commands.get( 'link' ); - expect( formView.urlInputView.value ).to.undefined; + expect( formView.urlInputView.field.value ).to.be.undefined; command.value = 'http://cksource.com'; - expect( formView.urlInputView.value ).to.equal( 'http://cksource.com' ); + expect( formView.urlInputView.field.value ).to.equal( 'http://cksource.com' ); } ); it( 'should execute link command on formView#submit event', () => { const executeSpy = testUtils.sinon.spy( editor, 'execute' ); - formView.urlInputView.value = 'http://ckeditor.com'; - expect( formView.urlInputView.inputView.element.value ).to.equal( 'http://ckeditor.com' ); + formView.urlInputView.field.value = 'http://ckeditor.com'; + expect( formView.urlInputView.field.value ).to.equal( 'http://ckeditor.com' ); - formView.urlInputView.inputView.element.value = 'http://cksource.com'; + formView.urlInputView.field.value = 'http://cksource.com'; formView.fire( 'submit' ); expect( executeSpy.calledOnce ).to.be.true; @@ -1056,7 +1056,7 @@ describe( 'LinkUI', () => { const executeSpy = testUtils.sinon.spy( editor, 'execute' ); setModelData( model, 'f[<$text linkHref="url" linkIsFoo="true">ooba]r' ); - expect( formView.urlInputView.inputView.element.value ).to.equal( 'url' ); + expect( formView.urlInputView.field.element.value ).to.equal( 'url' ); expect( formView.getDecoratorSwitchesState() ).to.deep.equal( { linkIsFoo: true } ); formView.fire( 'submit' ); diff --git a/tests/ui/linkformview.js b/tests/ui/linkformview.js index 5d0174c..2489439 100644 --- a/tests/ui/linkformview.js +++ b/tests/ui/linkformview.js @@ -81,7 +81,7 @@ describe( 'LinkFormView', () => { describe( 'url input view', () => { it( 'has placeholder', () => { - expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' ); + expect( view.urlInputView.field.placeholder ).to.equal( 'https://example.com' ); } ); } ); From c97d67217bffb763d199fc2073cdeec22a35c716 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/ui/linkformview.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ui/linkformview.js b/src/ui/linkformview.js index 2f1bf93..e3555e7 100644 --- a/src/ui/linkformview.js +++ b/src/ui/linkformview.js @@ -13,8 +13,8 @@ import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection'; import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview'; import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview'; -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 FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker'; @@ -66,7 +66,7 @@ export default class LinkFormView extends View { /** * The URL input view. * - * @member {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} + * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView} */ this.urlInputView = this._createUrlInput(); @@ -208,7 +208,7 @@ export default class LinkFormView extends View { * Creates a labeled input view. * * @private - * @returns {module:ui/labeledfieldview/labeledfieldview~LabeledFieldView} Labeled field view instance. + * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled field view instance. */ _createUrlInput() { const t = this.locale.t; From a70f683509d3213bc3d71a7f88328ee5c9039dff 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 --- src/linkui.js | 10 +++++----- src/ui/linkformview.js | 2 +- tests/linkui.js | 20 ++++++++++---------- tests/ui/linkformview.js | 2 +- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/linkui.js b/src/linkui.js index 19d0ada..f1e13f4 100644 --- a/src/linkui.js +++ b/src/linkui.js @@ -146,7 +146,7 @@ export default class LinkUI extends Plugin { const formView = new LinkFormView( editor.locale, linkCommand.manualDecorators ); - formView.urlInputView.field.bind( 'value' ).to( linkCommand, 'value' ); + formView.urlInputView.fieldView.bind( 'value' ).to( linkCommand, 'value' ); // Form elements should be read-only when corresponding commands are disabled. formView.urlInputView.bind( 'isReadOnly' ).to( linkCommand, 'isEnabled', value => !value ); @@ -154,7 +154,7 @@ export default class LinkUI extends Plugin { // Execute link command after clicking the "Save" button. this.listenTo( formView, 'submit', () => { - editor.execute( 'link', formView.urlInputView.field.value, formView.getDecoratorSwitchesState() ); + editor.execute( 'link', formView.urlInputView.fieldView.value, formView.getDecoratorSwitchesState() ); this._closeFormView(); } ); @@ -298,16 +298,16 @@ export default class LinkUI extends Plugin { // Select input when form view is currently visible. if ( this._balloon.visibleView === this.formView ) { - this.formView.urlInputView.field.select(); + this.formView.urlInputView.fieldView.select(); } // 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.field#value` stays + // the command. If the user typed in the input, then canceled the balloon (`urlInputView.fieldView#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 // https://github.com/ckeditor/ckeditor5-link/issues/123 - this.formView.urlInputView.field.value = linkCommand.value || ''; + this.formView.urlInputView.fieldView.value = linkCommand.value || ''; } /** diff --git a/src/ui/linkformview.js b/src/ui/linkformview.js index e3555e7..653bafb 100644 --- a/src/ui/linkformview.js +++ b/src/ui/linkformview.js @@ -216,7 +216,7 @@ export default class LinkFormView extends View { const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText ); labeledInput.label = t( 'Link URL' ); - labeledInput.field.placeholder = 'https://example.com'; + labeledInput.fieldView.placeholder = 'https://example.com'; return labeledInput; } diff --git a/tests/linkui.js b/tests/linkui.js index 405b377..3129e48 100644 --- a/tests/linkui.js +++ b/tests/linkui.js @@ -236,12 +236,12 @@ describe( 'LinkUI', () => { setModelData( editor.model, '<$text linkHref="url">f[]oo' ); // Mock some leftover value **in DOM**, e.g. after previous editing. - formView.urlInputView.field.value = 'leftover'; + formView.urlInputView.fieldView.value = 'leftover'; linkUIFeature._showUI(); actionsView.fire( 'edit' ); - expect( formView.urlInputView.field.value ).to.equal( 'url' ); + expect( formView.urlInputView.fieldView.value ).to.equal( 'url' ); } ); // https://github.com/ckeditor/ckeditor5-link/issues/123 @@ -249,7 +249,7 @@ describe( 'LinkUI', () => { setModelData( editor.model, 'f[]oo' ); linkUIFeature._showUI(); - expect( formView.urlInputView.field.value ).to.equal( '' ); + expect( formView.urlInputView.fieldView.value ).to.equal( '' ); } ); it( 'should optionally force `main` stack to be visible', () => { @@ -823,7 +823,7 @@ describe( 'LinkUI', () => { linkUIFeature._showUI(); linkUIFeature._removeFormView(); - const selectSpy = testUtils.sinon.spy( formView.urlInputView.field, 'select' ); + const selectSpy = testUtils.sinon.spy( formView.urlInputView.fieldView, 'select' ); actionsView.fire( 'edit' ); expect( balloon.visibleView ).to.equal( formView ); @@ -913,19 +913,19 @@ describe( 'LinkUI', () => { it( 'should bind formView.urlInputView#value to link command value', () => { const command = editor.commands.get( 'link' ); - expect( formView.urlInputView.field.value ).to.be.undefined; + expect( formView.urlInputView.fieldView.value ).to.be.undefined; command.value = 'http://cksource.com'; - expect( formView.urlInputView.field.value ).to.equal( 'http://cksource.com' ); + expect( formView.urlInputView.fieldView.value ).to.equal( 'http://cksource.com' ); } ); it( 'should execute link command on formView#submit event', () => { const executeSpy = testUtils.sinon.spy( editor, 'execute' ); - formView.urlInputView.field.value = 'http://ckeditor.com'; - expect( formView.urlInputView.field.value ).to.equal( 'http://ckeditor.com' ); + formView.urlInputView.fieldView.value = 'http://ckeditor.com'; + expect( formView.urlInputView.fieldView.value ).to.equal( 'http://ckeditor.com' ); - formView.urlInputView.field.value = 'http://cksource.com'; + formView.urlInputView.fieldView.value = 'http://cksource.com'; formView.fire( 'submit' ); expect( executeSpy.calledOnce ).to.be.true; @@ -1056,7 +1056,7 @@ describe( 'LinkUI', () => { const executeSpy = testUtils.sinon.spy( editor, 'execute' ); setModelData( model, 'f[<$text linkHref="url" linkIsFoo="true">ooba]r' ); - expect( formView.urlInputView.field.element.value ).to.equal( 'url' ); + expect( formView.urlInputView.fieldView.element.value ).to.equal( 'url' ); expect( formView.getDecoratorSwitchesState() ).to.deep.equal( { linkIsFoo: true } ); formView.fire( 'submit' ); diff --git a/tests/ui/linkformview.js b/tests/ui/linkformview.js index 2489439..205f5cf 100644 --- a/tests/ui/linkformview.js +++ b/tests/ui/linkformview.js @@ -81,7 +81,7 @@ describe( 'LinkFormView', () => { describe( 'url input view', () => { it( 'has placeholder', () => { - expect( view.urlInputView.field.placeholder ).to.equal( 'https://example.com' ); + expect( view.urlInputView.fieldView.placeholder ).to.equal( 'https://example.com' ); } ); } );