Explorar el Código

Relax matching criteria for ColorInputView's text input.

Tomek Wytrębowicz hace 5 años
padre
commit
1c2077a7e2

+ 15 - 1
packages/ckeditor5-table/src/ui/colorinputview.js

@@ -294,8 +294,9 @@ export default class ColorInputView extends View {
 	 */
 	_setInputValue( inputValue ) {
 		if ( !this._stillTyping ) {
+			const normalizedInputValue = normalizeColor( inputValue );
 			// Check if the value matches one of our defined colors.
-			const mappedColor = this.options.colorDefinitions.find( def => inputValue === def.color );
+			const mappedColor = this.options.colorDefinitions.find( def => normalizedInputValue === normalizeColor( def.color ) );
 
 			if ( mappedColor ) {
 				this._inputView.value = mappedColor.label;
@@ -305,3 +306,16 @@ export default class ColorInputView extends View {
 		}
 	}
 }
+
+// Normalizes color value, by stripping extensive whitespace.
+// For example., transforms:
+// * `   rgb(  25 50    0 )` to `rgb(25 50 0)`,
+// * "\t  rgb(  25 ,  50,0 )		" to `rgb(25 50 0)`.
+//
+// @param {String} colorString The value to be normalized.
+// @returns {String}
+function normalizeColor( colorString ) {
+	// Remove any whitespace at the beginning, after `(`, or `,`, at the end, before `)`, `,`, or another whitespace.
+	// Then, replace `,` or whitespace with single space.
+	return colorString.replace( /(?<=^|\(|,)\s*|\s*(?=$|\)|\s|,)|/g, '' ).replace( /,|\s/g, ' ' );
+}

+ 17 - 0
packages/ckeditor5-table/tests/ui/colorinputview.js

@@ -218,6 +218,23 @@ describe( 'ColorInputView', () => {
 				expect( inputView.value ).to.equal( 'bar' );
 			} );
 
+			it( `when the color input value is set to one of defined colors, but with few additional white spaces,
+			should use its label as the text input value`, () => {
+				view.value = 'rgb(0,    255, 0)';
+				expect( inputView.value ).to.equal( 'Green' );
+
+				view.value = '   rgb( 255 0  0)    ';
+				expect( inputView.value ).to.equal( 'Red' );
+
+				view.value = ' 		  rgb(0,  0,  255 )';
+				expect( inputView.value ).to.equal( 'Blue' );
+
+				// Blindly stripping spaces may not work.
+				// rgb(25 50 0) != rgb(255 0 0)
+				view.value = ' 		  rgb(25 50  0)';
+				expect( inputView.value ).to.equal( ' 		  rgb(25 50  0)' );
+			} );
+
 			it( `when the color input value is set to one of defined colors,
 			should use its label as the text input value`, () => {
 				view.value = 'rgb(0,255,0)';