浏览代码

Add default unit to a numeric value passed to TableWidthCommand.

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

+ 28 - 0
packages/ckeditor5-table/src/commands/utils.js

@@ -85,3 +85,31 @@ export function getSingleValue( objectOrString ) {
 		return top;
 	}
 }
+
+/**
+ * Add a unit to a value if the value is a number or string with a number.
+ *
+ * Does nothing to a non-numeric values.
+ *
+ *		getSingleValue( 25, 'px' );		// '25px'
+ *		getSingleValue( 25, 'em' );		// '25em'
+ *		getSingleValue( '25em', 'px' );	// '25em'
+ *		getSingleValue( 'foo', 'px' );	// 'foo'
+ *
+ * @param {*} value
+ * @param {String} defaultUnit A default unit added to a numeric value.
+ * @returns {String|*}
+ */
+export function addDefaultUnitToNumericValue( value, defaultUnit ) {
+	const numericValue = parseFloat( value );
+
+	if ( Number.isNaN( numericValue ) ) {
+		return value;
+	}
+
+	if ( String( numericValue ) !== String( value ) ) {
+		return value;
+	}
+
+	return `${ numericValue }${ defaultUnit }`;
+}

+ 14 - 2
packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js

@@ -61,10 +61,11 @@ export default class TablePropertyCommand extends Command {
 		const { value, batch } = options;
 
 		const table = findAncestor( 'table', selection.getFirstPosition() );
+		const valueToSet = this._getValueToSet( value );
 
 		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				writer.setAttribute( this.attributeName, value, table );
+			if ( valueToSet ) {
+				writer.setAttribute( this.attributeName, valueToSet, table );
 			} else {
 				writer.removeAttribute( this.attributeName, table );
 			}
@@ -85,4 +86,15 @@ export default class TablePropertyCommand extends Command {
 
 		return table.getAttribute( this.attributeName );
 	}
+
+	/**
+	 * Returns proper model value. Can be used to add default unit to numeric values.
+	 *
+	 * @private
+	 * @param {*} value
+	 * @returns {*}
+	 */
+	_getValueToSet( value ) {
+		return value;
+	}
 }

+ 8 - 0
packages/ckeditor5-table/src/tableproperties/commands/tablewidthcommand.js

@@ -7,6 +7,7 @@
  * @module table/tableproperties/commands/tablewidthcommand
  */
 
+import { addDefaultUnitToNumericValue } from '../../commands/utils';
 import TablePropertyCommand from './tablepropertycommand';
 
 /**
@@ -32,4 +33,11 @@ export default class TableWidthCommand extends TablePropertyCommand {
 	constructor( editor ) {
 		super( editor, 'width' );
 	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getValueToSet( value ) {
+		return addDefaultUnitToNumericValue( value, 'px' );
+	}
 }

+ 56 - 0
packages/ckeditor5-table/tests/tableproperties/commands/tablewidthcommand.js

@@ -96,6 +96,62 @@ describe( 'table properties', () => {
 					sinon.assert.calledWith( spy, batch );
 				} );
 
+				it( 'should add default unit for numeric values (number passed)', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: 25 } );
+
+					assertTableStyle( editor, 'width:25px;' );
+				} );
+
+				it( 'should add default unit for numeric values (string passed)', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: 25 } );
+
+					assertTableStyle( editor, 'width:25px;' );
+				} );
+
+				it( 'should not add default unit for numeric values with unit', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: '25pt' } );
+
+					assertTableStyle( editor, 'width:25pt;' );
+				} );
+
+				it( 'should add default unit to floats (number passed)', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: 25.1 } );
+
+					assertTableStyle( editor, 'width:25.1px;' );
+				} );
+
+				it( 'should add default unit to floats (string passed)', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: '0.1' } );
+
+					assertTableStyle( editor, 'width:0.1px;' );
+				} );
+
+				it( 'should pass invalid values', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: 'bar' } );
+
+					assertTableStyle( editor, 'width:bar;' );
+				} );
+
+				it( 'should pass invalid value (string passed, CSS float without leading 0)', () => {
+					setData( model, modelTable( [ [ 'foo[]' ] ] ) );
+
+					command.execute( { value: '.2' } );
+
+					assertTableStyle( editor, 'width:.2;' );
+				} );
+
 				describe( 'collapsed selection', () => {
 					it( 'should set selected table width to a passed value', () => {
 						setData( model, modelTable( [ [ 'foo[]' ] ] ) );