浏览代码

Merge branch 'master' into i/6232

Maciej Gołaszewski 5 年之前
父节点
当前提交
5afe3592c8

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

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

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

@@ -20,6 +20,7 @@ import {
 	getLocalizedColorErrorText,
 	getLocalizedLengthErrorText,
 	lengthFieldValidator,
+	lineWidthFieldValidator,
 	repositionContextualBalloon
 } from '../ui/utils';
 import { debounce } from 'lodash-es';
@@ -180,7 +181,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 );
 }
 

+ 14 - 0
packages/ckeditor5-table/tests/tablecellproperties/tablecellpropertiesediting.js

@@ -600,6 +600,20 @@ describe( 'table cell properties', () => {
 
 					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
 				} );
+
+				it( 'should upcast from background shorthand', () => {
+					editor.setData( '<table><tr><td style="background:#f00 center center">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
+				} );
+
+				it( 'should upcast from background shorthand (rbg color value with spaces)', () => {
+					editor.setData( '<table><tr><td style="background:rgb(253, 253, 119) center center">foo</td></tr></table>' );
+					const tableCell = model.document.getRoot().getNodeByPath( [ 0, 0, 0 ] );
+
+					expect( tableCell.getAttribute( 'backgroundColor' ) ).to.equal( 'rgb(253, 253, 119)' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {

+ 7 - 0
packages/ckeditor5-table/tests/tableproperties/tablepropertiesediting.js

@@ -559,6 +559,13 @@ describe( 'table properties', () => {
 
 					expect( table.getAttribute( 'backgroundColor' ) ).to.equal( '#f00' );
 				} );
+
+				it( 'should upcast from background shorthand (rbg color value with spaces)', () => {
+					editor.setData( '<table style="background:rgb(253, 253, 119) center center"><tr><td>foo</td></tr></table>' );
+					const table = model.document.getRoot().getNodeByPath( [ 0 ] );
+
+					expect( table.getAttribute( 'backgroundColor' ) ).to.equal( 'rgb(253, 253, 119)' );
+				} );
 			} );
 
 			describe( 'downcast conversion', () => {

+ 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;