Merge pull request #45 from ckeditor/t/35

Feature: Implemented a tip in the form that helps users discover the auto embedding. Closes #35.

lang/contexts.json

@@ -1,6 +1,7 @@
 {
 	"media widget": "Label for the media widget.",
 	"Media URL": "Label for the URL input in the Media Embed URL editing balloon.",
+	"Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
 	"Insert media": "Toolbar button tooltip for the Media Embed feature."

src/mediaembedui.js

@@ -81,7 +81,7 @@ export default class MediaEmbedUI extends Plugin {
 			}
 		} );
 
-		dropdown.on( 'change:isOpen', () => form.resetErrors() );
+		dropdown.on( 'change:isOpen', () => form.resetFormStatus() );
 		dropdown.on( 'cancel', () => closeUI() );
 
 		function closeUI() {

src/ui/mediaformview.js

@@ -218,7 +218,7 @@ export default class MediaFormView extends View {
 	 * @returns {Boolean}
 	 */
 	isValid() {
-		this.resetErrors();
+		this.resetFormStatus();
 
 		for ( const validator of this._validators ) {
 			const errorText = validator( this );
@@ -236,10 +236,14 @@ export default class MediaFormView extends View {
 	}
 
 	/**
-	 * Cleans up the errors in all form fields. See {@link #isValid}.
+	 * Cleans up the supplementary error and information text of the {@link #urlInputView}
+	 * bringing them back to the state when the form has been displayed for the first time.
+	 *
+	 * See {@link #isValid}.
 	 */
-	resetErrors() {
-		this.urlInputView.errorText = false;
+	resetFormStatus() {
+		this.urlInputView.errorText = null;
+		this.urlInputView.infoText = null;
 	}
 
 	/**
@@ -252,9 +256,17 @@ export default class MediaFormView extends View {
 		const t = this.locale.t;
 
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
+		const inputView = labeledInput.inputView;
 
 		labeledInput.label = t( 'Media URL' );
-		labeledInput.inputView.placeholder = 'https://example.com';
+		inputView.placeholder = 'https://example.com';
+
+		inputView.on( 'input', () => {
+			// Display the #infoText only when there's some value to hide it when the input
+			// is empty, e.g. user used backspace to clean it up.
+			labeledInput.infoText = inputView.element.value ?
+				t( 'Paste the URL into the content to embed faster.' ) : null;
+		} );
 
 		return labeledInput;
 	}

tests/mediaembedui.js

@@ -151,8 +151,8 @@ describe( 'MediaEmbedUI', () => {
 		} );
 
 		describe( '#change:isOpen event', () => {
-			it( 'resets form errors', () => {
-				const spy = sinon.spy( form, 'resetErrors' );
+			it( 'resets form status', () => {
+				const spy = sinon.spy( form, 'resetFormStatus' );
 
 				dropdown.fire( 'change:isOpen' );
 

tests/ui/mediaformview.js

@@ -81,6 +81,18 @@ describe( 'MediaFormView', () => {
 			it( 'has placeholder', () => {
 				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
 			} );
+
+			it( 'displays the info text when upon #input when the field has a value', () => {
+				view.urlInputView.inputView.element.value = 'foo';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.match( /^Paste the URL/ );
+
+				view.urlInputView.inputView.element.value = '';
+				view.urlInputView.inputView.fire( 'input' );
+
+				expect( view.urlInputView.infoText ).to.be.null;
+			} );
 		} );
 
 		describe( 'template', () => {
@@ -244,8 +256,8 @@ describe( 'MediaFormView', () => {
 	} );
 
 	describe( 'isValid()', () => {
-		it( 'calls resetErrors()', () => {
-			const spy = sinon.spy( view, 'resetErrors' );
+		it( 'calls resetFormStatus()', () => {
+			const spy = sinon.spy( view, 'resetFormStatus' );
 
 			view.isValid();
 
@@ -277,17 +289,25 @@ describe( 'MediaFormView', () => {
 			sinon.assert.calledOnce( val1 );
 			sinon.assert.calledOnce( val2 );
 
-			expect( view.urlInputView.errorText ).to.be.false;
+			expect( view.urlInputView.errorText ).to.be.null;
 		} );
 	} );
 
-	describe( 'resetErrors()', () => {
+	describe( 'resetFormStatus()', () => {
 		it( 'resets urlInputView#errorText', () => {
 			view.urlInputView.errorText = 'foo';
 
-			view.resetErrors();
+			view.resetFormStatus();
+
+			expect( view.urlInputView.errorText ).to.be.null;
+		} );
+
+		it( 'resets urlInputView#infoText', () => {
+			view.urlInputView.infoText = 'foo';
+
+			view.resetFormStatus();
 
-			expect( view.urlInputView.errorText ).to.be.false;
+			expect( view.urlInputView.infoText ).to.be.null;
 		} );
 	} );
 } );