Merge pull request #96 from ckeditor/i/6110

Other: Replaced `LabeledInputView` with `LabeledFieldView`. See ckeditor/ckeditor5#6110.

Author: jodator

src/mediaembedui.js

@@ -78,12 +78,12 @@ export default class MediaEmbedUI extends Plugin {
 		// invisible form/input cannot be focused/selected.
 		button.on( 'open', () => {
 			// 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 (`urlInputView#value` stays
+			// the command. If the user typed in the input, then canceled (`urlInputView#fieldView#value` stays
 			// unaltered) and re-opened it without changing the value of the media command (e.g. because they
 			// didn't change the selection), they would see the old value instead of the actual value of the
 			// command.
 			form.url = command.value || '';
-			form.urlInputView.select();
+			form.urlInputView.fieldView.select();
 			form.focus();
 		}, { priority: 'low' } );
 

src/ui/mediaformview.js

@@ -11,8 +11,9 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-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/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';
@@ -59,7 +60,7 @@ export default class MediaFormView extends View {
 		/**
 		 * The URL input view.
 		 *
-		 * @member {module:ui/labeledinput/labeledinputview~LabeledInputView}
+		 * @member {module:ui/labeledfield/labeledfieldview~LabeledFieldView}
 		 */
 		this.urlInputView = this._createUrlInput();
 
@@ -212,7 +213,7 @@ export default class MediaFormView extends View {
 	 * @type {Number}
 	 */
 	get url() {
-		return this.urlInputView.inputView.element.value.trim();
+		return this.urlInputView.fieldView.element.value.trim();
 	}
 
 	/**
@@ -224,7 +225,7 @@ export default class MediaFormView extends View {
 	 * @param {String} url
 	 */
 	set url( url ) {
-		this.urlInputView.inputView.element.value = url.trim();
+		this.urlInputView.fieldView.element.value = url.trim();
 	}
 
 	/**
@@ -265,24 +266,24 @@ export default class MediaFormView extends View {
 	 * Creates a labeled input view.
 	 *
 	 * @private
-	 * @returns {module:ui/labeledinput/labeledinputview~LabeledInputView} Labeled input view instance.
+	 * @returns {module:ui/labeledfield/labeledfieldview~LabeledFieldView} Labeled input view instance.
 	 */
 	_createUrlInput() {
 		const t = this.locale.t;
 
-		const labeledInput = new LabeledInputView( this.locale, InputTextView );
-		const inputView = labeledInput.inputView;
+		const labeledInput = new LabeledFieldView( this.locale, createLabeledInputText );
+		const inputField = labeledInput.fieldView;
 
 		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';
+		inputField.placeholder = 'https://example.com';
 
-		inputView.on( 'input', () => {
+		inputField.on( 'input', () => {
 			// 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;
+			labeledInput.infoText = inputField.element.value ? this._urlInputViewInfoTip : this._urlInputViewInfoDefault;
 		} );
 
 		return labeledInput;

tests/mediaembedui.js

@@ -84,7 +84,7 @@ describe( 'MediaEmbedUI', () => {
 			describe( '#open event', () => {
 				it( 'executes the actions with the "low" priority', () => {
 					const spy = sinon.spy();
-					const selectSpy = sinon.spy( form.urlInputView, 'select' );
+					const selectSpy = sinon.spy( form.urlInputView.fieldView, 'select' );
 
 					button.on( 'open', () => {
 						spy();
@@ -106,7 +106,7 @@ describe( 'MediaEmbedUI', () => {
 				} );
 
 				it( 'should select the content of the input', () => {
-					const spy = sinon.spy( form.urlInputView, 'select' );
+					const spy = sinon.spy( form.urlInputView.fieldView, 'select' );
 
 					button.fire( 'open' );
 					sinon.assert.calledOnce( spy );

tests/ui/mediaformview.js

@@ -79,21 +79,21 @@ describe( 'MediaFormView', () => {
 
 		describe( 'url input view', () => {
 			it( 'has placeholder', () => {
-				expect( view.urlInputView.inputView.placeholder ).to.equal( 'https://example.com' );
+				expect( view.urlInputView.fieldView.placeholder ).to.equal( 'https://example.com' );
 			} );
 
 			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' );
+				view.urlInputView.fieldView.element.value = 'foo';
+				view.urlInputView.fieldView.fire( 'input' );
 
 				expect( view.urlInputView.infoText ).to.match( /^Tip: Paste the URL into/ );
 
-				view.urlInputView.inputView.element.value = '';
-				view.urlInputView.inputView.fire( 'input' );
+				view.urlInputView.fieldView.element.value = '';
+				view.urlInputView.fieldView.fire( 'input' );
 
 				expect( view.urlInputView.infoText ).to.match( /^Paste the media URL/ );
 			} );
@@ -243,19 +243,19 @@ describe( 'MediaFormView', () => {
 
 	describe( 'url()', () => {
 		it( 'returns the #inputView DOM value', () => {
-			view.urlInputView.inputView.element.value = 'foo';
+			view.urlInputView.fieldView.element.value = 'foo';
 
 			expect( view.url ).to.equal( 'foo' );
 		} );
 
 		it( 'sets the #inputView DOM value', () => {
-			view.urlInputView.inputView.element.value = 'bar';
+			view.urlInputView.fieldView.element.value = 'bar';
 
 			view.url = 'foo';
-			expect( view.urlInputView.inputView.element.value ).to.equal( 'foo' );
+			expect( view.urlInputView.fieldView.element.value ).to.equal( 'foo' );
 
 			view.url = ' baz ';
-			expect( view.urlInputView.inputView.element.value ).to.equal( 'baz' );
+			expect( view.urlInputView.fieldView.element.value ).to.equal( 'baz' );
 		} );
 	} );