Merge pull request #8271 from ckeditor/i/7917

Fix (image): The insert button in the insert image dropdown will now be disabled when URL input is empty. Closes #7917.

Fix (media-embed): Disable the save button in insert media dropdown when the input is empty. See #7917.

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' );
 

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;
+		} );
 	} );
 } );

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 );
 	}
 }
 

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;

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', () => {