Merge pull request #70 from ckeditor/t/5

Other: The help text under the media URL input should be displayed when it's empty. The quick insertion tip should pop out when the user started typing in the input (see #5).

lang/contexts.json

@@ -1,7 +1,8 @@
 {
 	"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.",
+	"Paste the media URL in the input.": "The help text displayed under the media URL input helping users to discover the interface.",
+	"Tip: 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/ui/mediaformview.js

@@ -134,6 +134,21 @@ export default class MediaFormView extends View {
 				this.cancelButtonView
 			]
 		} );
+
+		/**
+		 * The default info text for the {@link #inputView}.
+		 *
+		 * @private
+		 * @member {String} _urlInputViewInfoDefault
+		 */
+
+		/**
+		 * The info text with an additional tip for the {@link #inputView},
+		 * displayed when the input has some value.
+		 *
+		 * @private
+		 * @member {String} _urlInputViewInfoTip
+		 */
 	}
 
 	/**
@@ -243,7 +258,7 @@ export default class MediaFormView extends View {
 	 */
 	resetFormStatus() {
 		this.urlInputView.errorText = null;
-		this.urlInputView.infoText = null;
+		this.urlInputView.infoText = this._urlInputViewInfoDefault;
 	}
 
 	/**
@@ -258,14 +273,16 @@ export default class MediaFormView extends View {
 		const labeledInput = new LabeledInputView( this.locale, InputTextView );
 		const inputView = labeledInput.inputView;
 
+		this._urlInputViewInfoDefault = t( 'Paste the media URL in the input.' );
+		this._urlInputViewInfoTip = t( 'Tip: Paste the URL into the content to embed faster.' );
+
 		labeledInput.label = t( 'Media URL' );
+		labeledInput.infoText = this._urlInputViewInfoDefault;
 		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;
+			// Display the tip text only when there's some value. Otherwise fall back to the default info text.
+			labeledInput.infoText = inputView.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
 		} );
 
 		return labeledInput;

tests/ui/mediaformview.js

@@ -82,16 +82,20 @@ describe( 'MediaFormView', () => {
 				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
 			} );
 
-			it( 'displays the info text when upon #input when the field has a value', () => {
+			it( 'has info text', () => {
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
+			} );
+
+			it( 'displays the tip 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/ );
+				expect( view.urlInputView.infoText ).to.match( /^Tip: Paste the URL into/ );
 
 				view.urlInputView.inputView.element.value = '';
 				view.urlInputView.inputView.fire( 'input' );
 
-				expect( view.urlInputView.infoText ).to.be.null;
+				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 			} );
 		} );
 
@@ -307,7 +311,7 @@ describe( 'MediaFormView', () => {
 
 			view.resetFormStatus();
 
-			expect( view.urlInputView.infoText ).to.be.null;
+			expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 		} );
 	} );
 } );