@ckeditor/ckeditor5-table 27.1.0 → 29.2.0

package/src/tablecellproperties/tablecellpropertiesui.js

@@ -24,6 +24,7 @@ import { getTableWidgetAncestor } from '../utils/ui/widget';
 import { getBalloonCellPositionData, repositionContextualBalloon } from '../utils/ui/contextualballoon';
 
 import tableCellProperties from './../../theme/icons/table-cell-properties.svg';
+import { getNormalizedDefaultProperties } from '../utils/table-properties';
 
 const ERROR_TEXT_TIMEOUT = 500;
 
@@ -83,6 +84,22 @@ export default class TableCellPropertiesUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 
+		/**
+		 * The default table cell properties.
+		 *
+		 * @protected
+		 * @member {module:table/tablecellproperties~TableCellPropertiesOptions}
+		 */
+		this._defaultTableCellProperties = getNormalizedDefaultProperties(
+			editor.config.get( 'table.tableCellProperties.defaultProperties' ),
+			{
+				includeVerticalAlignmentProperty: true,
+				includeHorizontalAlignmentProperty: true,
+				includePaddingProperty: true,
+				isRightToLeftContent: editor.locale.contentLanguageDirection === 'rtl'
+			}
+		);
+
 		/**
 		 * The contextual balloon plugin instance.
 		 *
@@ -157,7 +174,8 @@ export default class TableCellPropertiesUI extends Plugin {
 		const localizedBackgroundColors = getLocalizedColorOptions( editor.locale, backgroundColorsConfig );
 		const view = new TableCellPropertiesView( editor.locale, {
 			borderColors: localizedBorderColors,
-			backgroundColors: localizedBackgroundColors
+			backgroundColors: localizedBackgroundColors,
+			defaultTableCellProperties: this._defaultTableCellProperties
 		} );
 		const t = editor.t;
 
@@ -208,52 +226,67 @@ export default class TableCellPropertiesUI extends Plugin {
 		// property of the view has changed. They also validate the value and display errors in the UI
 		// when necessary. This makes the view live, which means the changes are
 		// visible in the editing as soon as the user types or changes fields' values.
-		view.on( 'change:borderStyle', this._getPropertyChangeCallback( 'tableCellBorderStyle' ) );
+		view.on(
+			'change:borderStyle',
+			this._getPropertyChangeCallback( 'tableCellBorderStyle', this._defaultTableCellProperties.borderStyle )
+		);
 
 		view.on( 'change:borderColor', this._getValidatedPropertyChangeCallback( {
 			viewField: view.borderColorInput,
 			commandName: 'tableCellBorderColor',
 			errorText: colorErrorText,
-			validator: colorFieldValidator
+			validator: colorFieldValidator,
+			defaultValue: this._defaultTableCellProperties.borderColor
 		} ) );
 
 		view.on( 'change:borderWidth', this._getValidatedPropertyChangeCallback( {
 			viewField: view.borderWidthInput,
 			commandName: 'tableCellBorderWidth',
 			errorText: lengthErrorText,
-			validator: lineWidthFieldValidator
+			validator: lineWidthFieldValidator,
+			defaultValue: this._defaultTableCellProperties.borderWidth
 		} ) );
 
 		view.on( 'change:padding', this._getValidatedPropertyChangeCallback( {
 			viewField: view.paddingInput,
 			commandName: 'tableCellPadding',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lengthFieldValidator,
+			defaultValue: this._defaultTableCellProperties.padding
 		} ) );
 
 		view.on( 'change:width', this._getValidatedPropertyChangeCallback( {
 			viewField: view.widthInput,
 			commandName: 'tableCellWidth',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lengthFieldValidator,
+			defaultValue: this._defaultTableCellProperties.width
 		} ) );
 
 		view.on( 'change:height', this._getValidatedPropertyChangeCallback( {
 			viewField: view.heightInput,
 			commandName: 'tableCellHeight',
 			errorText: lengthErrorText,
-			validator: lengthFieldValidator
+			validator: lengthFieldValidator,
+			defaultValue: this._defaultTableCellProperties.height
 		} ) );
 
 		view.on( 'change:backgroundColor', this._getValidatedPropertyChangeCallback( {
 			viewField: view.backgroundInput,
 			commandName: 'tableCellBackgroundColor',
 			errorText: colorErrorText,
-			validator: colorFieldValidator
+			validator: colorFieldValidator,
+			defaultValue: this._defaultTableCellProperties.backgroundColor
 		} ) );
 
-		view.on( 'change:horizontalAlignment', this._getPropertyChangeCallback( 'tableCellHorizontalAlignment' ) );
-		view.on( 'change:verticalAlignment', this._getPropertyChangeCallback( 'tableCellVerticalAlignment' ) );
+		view.on(
+			'change:horizontalAlignment',
+			this._getPropertyChangeCallback( 'tableCellHorizontalAlignment', this._defaultTableCellProperties.horizontalAlignment )
+		);
+		view.on(
+			'change:verticalAlignment',
+			this._getPropertyChangeCallback( 'tableCellVerticalAlignment', this._defaultTableCellProperties.verticalAlignment )
+		);
 
 		return view;
 	}
@@ -270,10 +303,22 @@ export default class TableCellPropertiesUI extends Plugin {
 	 */
 	_fillViewFormFromCommandValues() {
 		const commands = this.editor.commands;
+		const borderStyleCommand = commands.get( 'tableCellBorderStyle' );
 
 		Object.entries( propertyToCommandMap )
-			.map( ( [ property, commandName ] ) => [ property, commands.get( commandName ).value || '' ] )
-			.forEach( ( [ property, value ] ) => this.view.set( property, value ) );
+			.map( ( [ property, commandName ] ) => {
+				const defaultValue = this._defaultTableCellProperties[ property ] || '';
+
+				return [ property, commands.get( commandName ).value || defaultValue ];
+			} )
+			.forEach( ( [ property, value ] ) => {
+				// Do not set the `border-color` and `border-width` fields if `border-style:none`.
+				if ( ( property === 'borderColor' || property === 'borderWidth' ) && borderStyleCommand.value === 'none' ) {
+					return;
+				}
+
+				this.view.set( property, value );
+			} );
 	}
 
 	/**
@@ -354,10 +399,17 @@ export default class TableCellPropertiesUI extends Plugin {
 	 *
 	 * @private
 	 * @param {String} commandName
+	 * @param {String} defaultValue The default value of the command.
 	 * @returns {Function}
 	 */
-	_getPropertyChangeCallback( commandName ) {
-		return ( evt, propertyName, newValue ) => {
+	_getPropertyChangeCallback( commandName, defaultValue ) {
+		return ( evt, propertyName, newValue, oldValue ) => {
+			// If the "oldValue" is missing and "newValue" is set to the default value, do not execute the command.
+			// It is an initial call (when opening the table properties view).
+			if ( !oldValue && defaultValue === newValue ) {
+				return;
+			}
+
 			this.editor.execute( commandName, {
 				value: newValue,
 				batch: this._undoStepBatch
@@ -376,16 +428,24 @@ export default class TableCellPropertiesUI extends Plugin {
 	 * @param {module:ui/view~View} options.viewField
 	 * @param {Function} options.validator
 	 * @param {String} options.errorText
+	 * @param {String} options.defaultValue
 	 * @returns {Function}
 	 */
-	_getValidatedPropertyChangeCallback( { commandName, viewField, validator, errorText } ) {
+	_getValidatedPropertyChangeCallback( options ) {
+		const { commandName, viewField, validator, errorText, defaultValue } = options;
 		const setErrorTextDebounced = debounce( () => {
 			viewField.errorText = errorText;
 		}, ERROR_TEXT_TIMEOUT );
 
-		return ( evt, propertyName, newValue ) => {
+		return ( evt, propertyName, newValue, oldValue ) => {
 			setErrorTextDebounced.cancel();
 
+			// If the "oldValue" is missing and "newValue" is set to the default value, do not execute the command.
+			// It is an initial call (when opening the table properties view).
+			if ( !oldValue && defaultValue === newValue ) {
+				return;
+			}
+
 			if ( validator( newValue ) ) {
 				this.editor.execute( commandName, {
 					value: newValue,

package/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -62,6 +62,8 @@ export default class TableCellPropertiesView extends View {
 	 * @param {module:table/table~TableColorConfig} options.backgroundColors A configuration of the background
 	 * color palette used by the
 	 * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
+	 * @param {module:table/tablecellproperties~TableCellPropertiesOptions} options.defaultTableCellProperties The default
+	 * table cell properties.
 	 */
 	constructor( locale, options ) {
 		super( locale );
@@ -446,9 +448,17 @@ export default class TableCellPropertiesView extends View {
 	 * @returns {Object.<String,module:ui/view~View>}
 	 */
 	_createBorderFields() {
+		const defaultTableCellProperties = this.options.defaultTableCellProperties;
+		const defaultBorder = {
+			style: defaultTableCellProperties.borderStyle,
+			width: defaultTableCellProperties.borderWidth,
+			color: defaultTableCellProperties.borderColor
+		};
+
 		const colorInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.borderColors,
-			columns: 5
+			columns: 5,
+			defaultColorValue: defaultBorder.color
 		} );
 		const locale = this.locale;
 		const t = this.t;
@@ -483,7 +493,7 @@ export default class TableCellPropertiesView extends View {
 
 		borderStyleDropdown.bind( 'isEmpty' ).to( this, 'borderStyle', value => !value );
 
-		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this ) );
+		addListToDropdown( borderStyleDropdown.fieldView, getBorderStyleDefinitions( this, defaultBorder.style ) );
 
 		// -- Width ---------------------------------------------------
 
@@ -516,13 +526,20 @@ export default class TableCellPropertiesView extends View {
 			this.borderColor = borderColorInput.fieldView.value;
 		} );
 
-		// Reset the border color and width fields when style is "none".
-		// https://github.com/ckeditor/ckeditor5/issues/6227
-		this.on( 'change:borderStyle', ( evt, name, value ) => {
-			if ( !isBorderStyleSet( value ) ) {
+		// Reset the border color and width fields depending on the `border-style` value.
+		this.on( 'change:borderStyle', ( evt, name, newValue, oldValue ) => {
+			// When removing the border (`border-style:none`), clear the remaining `border-*` properties.
+			// See: https://github.com/ckeditor/ckeditor5/issues/6227.
+			if ( !isBorderStyleSet( newValue ) ) {
 				this.borderColor = '';
 				this.borderWidth = '';
 			}
+
+			// When setting the `border-style` from `none`, set the default `border-color` and `border-width` properties.
+			if ( !isBorderStyleSet( oldValue ) ) {
+				this.borderColor = defaultBorder.color;
+				this.borderWidth = defaultBorder.width;
+			}
 		} );
 
 		return {
@@ -554,7 +571,8 @@ export default class TableCellPropertiesView extends View {
 
 		const colorInputCreator = getLabeledColorInputCreator( {
 			colorConfig: this.options.backgroundColors,
-			columns: 5
+			columns: 5,
+			defaultColorValue: this.options.defaultTableCellProperties.backgroundColor
 		} );
 
 		const backgroundInput = new LabeledFieldView( locale, colorInputCreator );
@@ -705,8 +723,18 @@ export default class TableCellPropertiesView extends View {
 			labels: this._horizontalAlignmentLabels,
 			propertyName: 'horizontalAlignment',
 			nameToValue: name => {
-				return name === ( isContentRTL ? 'right' : 'left' ) ? '' : name;
-			}
+				// For the RTL content, we want to swap the buttons "align to the left" and "align to the right".
+				if ( isContentRTL ) {
+					if ( name === 'left' ) {
+						return 'right';
+					} else if ( name === 'right' ) {
+						return 'left';
+					}
+				}
+
+				return name;
+			},
+			defaultValue: this.options.defaultTableCellProperties.horizontalAlignment
 		} );
 
 		// -- Vertical -----------------------------------------------------
@@ -724,9 +752,7 @@ export default class TableCellPropertiesView extends View {
 			toolbar: verticalAlignmentToolbar,
 			labels: this._verticalAlignmentLabels,
 			propertyName: 'verticalAlignment',
-			nameToValue: name => {
-				return name === 'middle' ? '' : name;
-			}
+			defaultValue: this.options.defaultTableCellProperties.verticalAlignment
 		} );
 
 		return {
@@ -825,5 +851,5 @@ export default class TableCellPropertiesView extends View {
 }
 
 function isBorderStyleSet( value ) {
-	return !!value;
+	return value !== 'none';
 }

package/src/tablecellproperties.js

@@ -64,9 +64,24 @@ export default class TableCellProperties extends Plugin {
  *			}
  *		};
  *
- * **Note**: The configurations do not impact the data loaded into the editor,
+ * * The default styles for table cells (`tableCellProperties.defaultProperties`):
+ *
+ *		const tableConfig = {
+ *			tableCellProperties: {
+ *				defaultProperties: {
+ *					horizontalAlignment: 'right',
+ *					verticalAlignment: 'bottom',
+ *					padding: '5px'
+ *				}
+ *			}
+ *		}
+ *
+ * 	 {@link module:table/tableproperties~TablePropertiesOptions Read more about the supported properties.}
+ *
+ * **Note**: The `borderColors` and `backgroundColors` options do not impact the data loaded into the editor,
  * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
- * allowing users to pick colors in a more convenient way.
+ * allowing users to pick colors in a more convenient way. The `defaultProperties` option does impact the data.
+ * Default values will not be kept in the editor model.
  *
  * The default color palettes for the cell background and the cell border are the same
  * ({@link module:table/utils/ui/table-properties~defaultColors check out their content}).
@@ -78,3 +93,28 @@ export default class TableCellProperties extends Plugin {
  *
  * @member {Object} module:table/table~TableConfig#tableCellProperties
  */
+
+/**
+ * The configuration of the table cell default properties feature.
+ *
+ * @typedef {Object} module:table/tablecellproperties~TableCellPropertiesOptions
+ *
+ * @property {String} width The default `width` of the table cell.
+ *
+ * @property {String} height The default `height` of the table cell.
+ *
+ * @property {String} padding The default `padding` of the table cell.
+ *
+ * @property {String} backgroundColor The default `background-color` of the table cell.
+ *
+ * @property {String} borderColor The default `border-color` of the table cell.
+ *
+ * @property {String} borderWidth The default `border-width` of the table cell.
+ *
+ * @property {String} [borderStyle='none'] The default `border-style` of the table cell.
+ *
+ * @property {String} [horizontalAlignment='center'] The default `horizontalAlignment` of the table cell.
+ *
+ * @property {String} [verticalAlignment='middle'] The default `verticalAlignment` of the table cell.
+ */
+

package/src/tableediting.js

@@ -9,7 +9,7 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 
-import upcastTable, { ensureParagraphInTableCell, skipEmptyTableRow } from './converters/upcasttable';
+import upcastTable, { ensureParagraphInTableCell, skipEmptyTableRow, upcastTableFigure } from './converters/upcasttable';
 import {
 	convertParagraphInTableCell,
 	downcastInsertCell,
@@ -76,13 +76,14 @@ export default class TableEditing extends Plugin {
 
 		schema.register( 'tableCell', {
 			allowIn: 'tableRow',
+			allowChildren: '$block',
 			allowAttributes: [ 'colspan', 'rowspan' ],
 			isLimit: true,
 			isSelectable: true
 		} );
 
-		// Allow all $block content inside a table cell.
-		schema.extend( '$block', { allowIn: 'tableCell' } );
+		// Figure conversion.
+		conversion.for( 'upcast' ).add( upcastTableFigure() );
 
 		// Table conversion.
 		conversion.for( 'upcast' ).add( upcastTable() );
@@ -106,19 +107,37 @@ export default class TableEditing extends Plugin {
 		conversion.for( 'editingDowncast' ).add( downcastInsertCell() );
 
 		// Duplicates code - needed to properly refresh paragraph inside a table cell.
-		editor.conversion.for( 'editingDowncast' ).elementToElement( {
+		conversion.for( 'editingDowncast' ).elementToElement( {
 			model: 'paragraph',
 			view: convertParagraphInTableCell,
 			converterPriority: 'high'
 		} );
 
 		// Table attributes conversion.
-		conversion.attributeToAttribute( { model: 'colspan', view: 'colspan' } );
-		conversion.attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
+		conversion.for( 'downcast' ).attributeToAttribute( { model: 'colspan', view: 'colspan' } );
+		conversion.for( 'upcast' ).attributeToAttribute( {
+			model: { key: 'colspan', value: upcastCellSpan( 'colspan' ) },
+			view: 'colspan'
+		} );
+
+		conversion.for( 'downcast' ).attributeToAttribute( { model: 'rowspan', view: 'rowspan' } );
+		conversion.for( 'upcast' ).attributeToAttribute( {
+			model: { key: 'rowspan', value: upcastCellSpan( 'rowspan' ) },
+			view: 'rowspan'
+		} );
 
 		// Table heading columns conversion (a change of heading rows requires a reconversion of the whole table).
 		conversion.for( 'editingDowncast' ).add( downcastTableHeadingColumnsChange() );
 
+		// Manually adjust model position mappings in a special case, when a table cell contains a paragraph, which is bound
+		// to its parent (to the table cell). This custom model-to-view position mapping is necessary in data pipeline only,
+		// because only during this conversion a paragraph can be bound to its parent.
+		editor.data.mapper.on( 'modelToViewPosition', mapTableCellModelPositionToView() );
+
+		// Define the config.
+		editor.config.define( 'table.defaultHeadings.rows', 0 );
+		editor.config.define( 'table.defaultHeadings.columns', 0 );
+
 		// Define all the commands.
 		editor.commands.add( 'insertTable', new InsertTableCommand( editor ) );
 		editor.commands.add( 'insertTableRowAbove', new InsertRowCommand( editor, { order: 'above' } ) );
@@ -158,3 +177,54 @@ export default class TableEditing extends Plugin {
 		return [ TableUtils ];
 	}
 }
+
+// Creates a mapper callback to adjust model position mappings in a table cell containing a paragraph, which is bound to its parent
+// (to the table cell). Only positions after this paragraph have to be adjusted, because after binding this paragraph to the table cell,
+// elements located after this paragraph would point either to a non-existent offset inside `tableCell` (if paragraph is empty), or after
+// the first character of the paragraph's text. See https://github.com/ckeditor/ckeditor5/issues/10116.
+//
+// <tableCell><paragraph></paragraph>^</tableCell> -> <td>^&nbsp;</td>
+//
+// <tableCell><paragraph>foobar</paragraph>^</tableCell> -> <td>foobar^</td>
+//
+// @returns {Function}
+function mapTableCellModelPositionToView() {
+	return ( evt, data ) => {
+		const modelParent = data.modelPosition.parent;
+		const modelNodeBefore = data.modelPosition.nodeBefore;
+
+		if ( !modelParent.is( 'element', 'tableCell' ) ) {
+			return;
+		}
+
+		if ( !modelNodeBefore || !modelNodeBefore.is( 'element', 'paragraph' ) ) {
+			return;
+		}
+
+		const viewNodeBefore = data.mapper.toViewElement( modelNodeBefore );
+		const viewParent = data.mapper.toViewElement( modelParent );
+
+		if ( viewNodeBefore === viewParent ) {
+			// Since the paragraph has already been bound to its parent, update the current position in the model with paragraph's
+			// max offset, so it points to the place which should normally (in all other cases) be the end position of this paragraph.
+			data.viewPosition = data.mapper.findPositionIn( viewParent, modelNodeBefore.maxOffset );
+		}
+	};
+}
+
+// Returns fixed colspan and rowspan attrbutes values.
+//
+// @private
+// @param {String} type colspan or rowspan.
+// @returns {Function} conversion value function.
+function upcastCellSpan( type ) {
+	return cell => {
+		const span = parseInt( cell.getAttribute( type ) );
+
+		if ( Number.isNaN( span ) || span <= 0 ) {
+			return null;
+		}
+
+		return span;
+	};
+}

package/src/tablekeyboard.js

@@ -115,15 +115,16 @@ export default class TableKeyboard extends Plugin {
 				return;
 			}
 
+			const tableUtils = this.editor.plugins.get( 'TableUtils' );
 			const isLastCellInRow = currentCellIndex === tableRow.childCount - 1;
-			const isLastRow = currentRowIndex === table.childCount - 1;
+			const isLastRow = currentRowIndex === tableUtils.getRows( table ) - 1;
 
 			if ( isForward && isLastRow && isLastCellInRow ) {
 				editor.execute( 'insertTableRowBelow' );
 
 				// Check if the command actually added a row. If `insertTableRowBelow` execution didn't add a row (because it was disabled
 				// or it got overwritten) set the selection over the whole table to mirror the first cell case.
-				if ( currentRowIndex === table.childCount - 1 ) {
+				if ( currentRowIndex === tableUtils.getRows( table ) - 1 ) {
 					editor.model.change( writer => {
 						writer.setSelection( writer.createRangeOn( table ) );
 					} );

package/src/tableproperties/commands/tablealignmentcommand.js

@@ -28,8 +28,9 @@ export default class TableAlignmentCommand extends TablePropertyCommand {
 	 * Creates a new `TableAlignmentCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value for the "alignment" attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'alignment' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'alignment', defaultValue );
 	}
 }

package/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -28,8 +28,9 @@ export default class TableBackgroundColorCommand extends TablePropertyCommand {
 	 * Creates a new `TableBackgroundColorCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'backgroundColor' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'backgroundColor', defaultValue );
 	}
 }

package/src/tableproperties/commands/tablebordercolorcommand.js

@@ -29,9 +29,10 @@ export default class TableBorderColorCommand extends TablePropertyCommand {
 	 * Creates a new `TableBorderColorCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'borderColor' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'borderColor', defaultValue );
 	}
 
 	/**
@@ -42,6 +43,12 @@ export default class TableBorderColorCommand extends TablePropertyCommand {
 			return;
 		}
 
-		return getSingleValue( table.getAttribute( this.attributeName ) );
+		const value = getSingleValue( table.getAttribute( this.attributeName ) );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 }

package/src/tableproperties/commands/tableborderstylecommand.js

@@ -29,9 +29,10 @@ export default class TableBorderStyleCommand extends TablePropertyCommand {
 	 * Creates a new `TableBorderStyleCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'borderStyle' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'borderStyle', defaultValue );
 	}
 
 	/**
@@ -42,6 +43,12 @@ export default class TableBorderStyleCommand extends TablePropertyCommand {
 			return;
 		}
 
-		return getSingleValue( table.getAttribute( this.attributeName ) );
+		const value = getSingleValue( table.getAttribute( this.attributeName ) );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 }

package/src/tableproperties/commands/tableborderwidthcommand.js

@@ -37,9 +37,10 @@ export default class TableBorderWidthCommand extends TablePropertyCommand {
 	 * Creates a new `TableBorderWidthCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'borderWidth' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'borderWidth', defaultValue );
 	}
 
 	/**
@@ -50,13 +51,25 @@ export default class TableBorderWidthCommand extends TablePropertyCommand {
 			return;
 		}
 
-		return getSingleValue( table.getAttribute( this.attributeName ) );
+		const value = getSingleValue( table.getAttribute( this.attributeName ) );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	_getValueToSet( value ) {
-		return addDefaultUnitToNumericValue( value, 'px' );
+		value = addDefaultUnitToNumericValue( value, 'px' );
+
+		if ( value === this._defaultValue ) {
+			return;
+		}
+
+		return value;
 	}
 }

package/src/tableproperties/commands/tableheightcommand.js

@@ -37,15 +37,22 @@ export default class TableHeightCommand extends TablePropertyCommand {
 	 * Creates a new `TableHeightCommand` instance.
 	 *
 	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
 	 */
-	constructor( editor ) {
-		super( editor, 'height' );
+	constructor( editor, defaultValue ) {
+		super( editor, 'height', defaultValue );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	_getValueToSet( value ) {
-		return addDefaultUnitToNumericValue( value, 'px' );
+		value = addDefaultUnitToNumericValue( value, 'px' );
+
+		if ( value === this._defaultValue ) {
+			return null;
+		}
+
+		return value;
 	}
 }