8
0
Pārlūkot izejas kodu

Merge pull request #240 from ckeditor/i/6201

Internal: Improve line width validation. Closes ckeditor/ckeditor5#6201.
Piotrek Koszuliński 5 gadi atpakaļ
vecāks
revīzija
9d57cf7041

+ 3 - 2
packages/ckeditor5-table/src/tablecellproperties/tablecellpropertiesui.js

@@ -20,7 +20,8 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	colorFieldValidator,
-	lengthFieldValidator
+	lengthFieldValidator,
+	lineWidthFieldValidator
 } from '../ui/utils';
 import { debounce } from 'lodash-es';
 
@@ -183,7 +184,7 @@ export default class TableCellPropertiesUI extends Plugin {
 			viewField: view.borderWidthInput,
 			commandName: 'tableCellBorderWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lineWidthFieldValidator
 		} ) );
 
 		view.on( 'change:padding', this._getValidatedPropertyChangeCallback( {

+ 3 - 2
packages/ckeditor5-table/src/tableproperties/tablepropertiesui.js

@@ -20,7 +20,8 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	colorFieldValidator,
-	lengthFieldValidator
+	lengthFieldValidator,
+	lineWidthFieldValidator
 } from '../ui/utils';
 import { debounce } from 'lodash-es';
 
@@ -182,7 +183,7 @@ export default class TablePropertiesUI extends Plugin {
 			viewField: view.borderWidthInput,
 			commandName: 'tableBorderWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lineWidthFieldValidator
 		} ) );
 
 		view.on( 'change:backgroundColor', this._getValidatedPropertyChangeCallback( {

+ 17 - 1
packages/ckeditor5-table/src/ui/utils.js

@@ -11,7 +11,7 @@ import BalloonPanelView from '@ckeditor/ckeditor5-ui/src/panel/balloon/balloonpa
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import Model from '@ckeditor/ckeditor5-ui/src/model';
-import { isColor, isLength } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
+import { isColor, isLength, isPercentage } from '@ckeditor/ckeditor5-engine/src/view/styles/utils';
 import { getTableWidgetAncestor } from '../utils';
 import { findAncestor } from '../commands/utils';
 
@@ -157,6 +157,7 @@ export function colorFieldValidator( value ) {
  * Otherwise, `false` is returned.
  *
  * See {@link module:engine/view/styles/utils~isLength}.
+ * See {@link module:engine/view/styles/utils~isPercentage}.
  *
  * @param {String} value
  * @returns {Boolean}
@@ -164,6 +165,21 @@ export function colorFieldValidator( value ) {
 export function lengthFieldValidator( value ) {
 	value = value.trim();
 
+	return isEmpty( value ) || isNumberString( value ) || isLength( value ) || isPercentage( value );
+}
+
+/**
+ * Returns `true` when the passed value is an empty string, number without unit or a valid CSS length expression.
+ * Otherwise, `false` is returned.
+ *
+ * See {@link module:engine/view/styles/utils~isLength}.
+ *
+ * @param {String} value
+ * @returns {Boolean}
+ */
+export function lineWidthFieldValidator( value ) {
+	value = value.trim();
+
 	return isEmpty( value ) || isNumberString( value ) || isLength( value );
 }
 

+ 36 - 0
packages/ckeditor5-table/tests/ui/utils.js

@@ -22,6 +22,7 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	lengthFieldValidator,
+	lineWidthFieldValidator,
 	colorFieldValidator,
 	fillToolbar
 } from '../../src/ui/utils';
@@ -245,6 +246,7 @@ describe( 'UI Utils', () => {
 			expect( lengthFieldValidator( '1px' ) ).to.be.true;
 			expect( lengthFieldValidator( '12em' ) ).to.be.true;
 			expect( lengthFieldValidator( ' 12em ' ) ).to.be.true;
+			expect( lengthFieldValidator( '45%' ) ).to.be.true;
 		} );
 
 		it( 'should pass for number without unit', () => {
@@ -265,6 +267,40 @@ describe( 'UI Utils', () => {
 		} );
 	} );
 
+	describe( 'lineWidthFieldValidator()', () => {
+		it( 'should pass for an empty value', () => {
+			expect( lineWidthFieldValidator( '' ) ).to.be.true;
+		} );
+
+		it( 'should pass for white spaces', () => {
+			expect( lineWidthFieldValidator( '  ' ) ).to.be.true;
+		} );
+
+		it( 'should pass for lengths', () => {
+			expect( lineWidthFieldValidator( '1px' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '12em' ) ).to.be.true;
+			expect( lineWidthFieldValidator( ' 12em ' ) ).to.be.true;
+		} );
+
+		it( 'should pass for number without unit', () => {
+			expect( lineWidthFieldValidator( '1' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '12.1' ) ).to.be.true;
+			expect( lineWidthFieldValidator( '0.125 ' ) ).to.be.true;
+		} );
+
+		it( 'should not pass for invalid number values', () => {
+			expect( lineWidthFieldValidator( '.1 ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45. ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45.1.1 ' ) ).to.be.false;
+			expect( lineWidthFieldValidator( '45%' ) ).to.be.false;
+		} );
+
+		it( 'should pass for lengths surrounded by white spaces', () => {
+			expect( lineWidthFieldValidator( '3px ' ) ).to.be.true;
+			expect( lineWidthFieldValidator( ' 12em ' ) ).to.be.true;
+		} );
+	} );
+
 	describe( 'getBorderStyleDefinitions()', () => {
 		let view, locale, definitions;