diff --git a/packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js b/packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js index f44c2c39137..dc109d57bc8 100644 --- a/packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js +++ b/packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js @@ -135,7 +135,7 @@ export default class ImageInsertPanelView extends View { integrationView.fieldView.bind( 'value' ).to( this, 'imageURLInputValue', value => value || '' ); integrationView.fieldView.on( 'input', () => { - this.imageURLInputValue = integrationView.fieldView.element.value; + this.imageURLInputValue = integrationView.fieldView.element.value.trim(); } ); } @@ -286,7 +286,7 @@ export default class ImageInsertPanelView extends View { withText: true } ); - insertButtonView.bind( 'isEnabled' ).to( this, 'imageURLInputValue' ); + insertButtonView.bind( 'isEnabled' ).to( this, 'imageURLInputValue', value => !!value ); insertButtonView.delegate( 'execute' ).to( this, 'submit' ); cancelButtonView.delegate( 'execute' ).to( this, 'cancel' ); diff --git a/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js b/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js index 75a0d702dea..1a8720be20d 100644 --- a/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js +++ b/packages/ckeditor5-image/tests/imageinsert/ui/imageinsertpanelview.js @@ -294,5 +294,32 @@ describe( 'ImageUploadPanelView', () => { expect( view.imageURLInputValue ).to.equal( 'xyz' ); } ); + + it( 'should trim input value', () => { + const form = view.getIntegration( 'insertImageViaUrl' ); + + form.fieldView.element.value = ' '; + form.fieldView.fire( 'input' ); + + expect( view.imageURLInputValue ).to.equal( '' ); + + form.fieldView.element.value = ' test '; + form.fieldView.fire( 'input' ); + + expect( view.imageURLInputValue ).to.equal( 'test' ); + } ); + + it( 'binds saveButtonView#isEnabled to URL input value', () => { + const form = view.getIntegration( 'insertImageViaUrl' ); + const saveButtonView = view.template.children[ 1 ].children.first; + + expect( saveButtonView.isEnabled ).to.be.false; + + form.fieldView.element.value = 'test'; + form.fieldView.fire( 'input' ); + + expect( view.imageURLInputValue ).to.equal( 'test' ); + expect( !!saveButtonView.isEnabled ).to.be.true; + } ); } ); } ); diff --git a/packages/ckeditor5-media-embed/src/mediaembedui.js b/packages/ckeditor5-media-embed/src/mediaembedui.js index 403a52c2d9e..dd68b162c40 100644 --- a/packages/ckeditor5-media-embed/src/mediaembedui.js +++ b/packages/ckeditor5-media-embed/src/mediaembedui.js @@ -104,7 +104,6 @@ export default class MediaEmbedUI extends Plugin { // Form elements should be read-only when corresponding commands are disabled. form.urlInputView.bind( 'isReadOnly' ).to( command, 'isEnabled', value => !value ); - form.saveButtonView.bind( 'isEnabled' ).to( command ); } } diff --git a/packages/ckeditor5-media-embed/src/ui/mediaformview.js b/packages/ckeditor5-media-embed/src/ui/mediaformview.js index b48e0a09c5e..0e5da7fe310 100644 --- a/packages/ckeditor5-media-embed/src/ui/mediaformview.js +++ b/packages/ckeditor5-media-embed/src/ui/mediaformview.js @@ -57,6 +57,14 @@ export default class MediaFormView extends View { */ this.keystrokes = new KeystrokeHandler(); + /** + * The value of the URL input. + * + * @member {String} #mediaURLInputValue + * @observable + */ + this.set( 'mediaURLInputValue', '' ); + /** * The URL input view. * @@ -71,6 +79,7 @@ export default class MediaFormView extends View { */ this.saveButtonView = this._createButton( t( 'Save' ), checkIcon, 'ck-button-save' ); this.saveButtonView.type = 'submit'; + this.saveButtonView.bind( 'isEnabled' ).to( this, 'mediaURLInputValue', value => !!value ); /** * The Cancel button view. @@ -276,6 +285,7 @@ export default class MediaFormView extends View { inputField.on( 'input', () => { // Display the tip text only when there's some value. Otherwise fall back to the default info text. labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault; + this.mediaURLInputValue = inputField.element.value.trim(); } ); return labeledInput; diff --git a/packages/ckeditor5-media-embed/tests/mediaembedui.js b/packages/ckeditor5-media-embed/tests/mediaembedui.js index bb30fd9e315..a1d60f94278 100644 --- a/packages/ckeditor5-media-embed/tests/mediaembedui.js +++ b/packages/ckeditor5-media-embed/tests/mediaembedui.js @@ -209,13 +209,27 @@ describe( 'MediaEmbedUI', () => { expect( form.urlInputView.isReadOnly ).to.be.true; } ); - it( 'binds saveButtonView#isEnabled to command#isEnabled', () => { - const command = editor.commands.get( 'mediaEmbed' ); + it( 'should trim URL input value', () => { + form.urlInputView.fieldView.element.value = ' '; + form.urlInputView.fieldView.fire( 'input' ); - expect( form.saveButtonView.isEnabled ).to.be.true; + expect( form.mediaURLInputValue ).to.equal( '' ); + + form.urlInputView.fieldView.element.value = ' test '; + form.urlInputView.fieldView.fire( 'input' ); + + expect( form.mediaURLInputValue ).to.equal( 'test' ); + } ); + + it( 'binds saveButtonView#isEnabled to trimmed URL input value', () => { + form.urlInputView.fieldView.fire( 'input' ); - command.isEnabled = false; expect( form.saveButtonView.isEnabled ).to.be.false; + + form.urlInputView.fieldView.element.value = 'test'; + form.urlInputView.fieldView.fire( 'input' ); + + expect( form.saveButtonView.isEnabled ).to.be.true; } ); describe( 'validators', () => {