Browse Source

De-duplicate table cell commands code.

Maciej Gołaszewski 5 years ago
parent
commit
0f83fb9acd

+ 8 - 54
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -7,9 +7,7 @@
  * @module table/tablecellproperties/commands/tablecellbackgroundcolorcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
 
 /**
  * The table cell background color command.
@@ -17,65 +15,21 @@ import { findAncestor } from '../../commands/utils';
  * The command is registered by {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
  * `'tableCellBackgroundColor'` editor command.
  *
- * To change cell backgroundColor of the selected cell, execute the command:
+ * To change cell `backgroundColor` attribute of the selected cells, execute the command:
  *
  *		editor.execute( 'tableCellBackgroundColor', {
- *			value: '5px'
+ *			value: '#f00'
  *		} );
  *
  * @extends module:core/command~Command
  */
-export default class TableCellBackgroundColorCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'backgroundColor';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
-		if ( !tableCell ) {
-			return;
-		}
-
-		return tableCell.getAttribute( this.attributeName );
-	}
-
+export default class TableCellBackgroundColorCommand extends TableCellPropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableCellBackgroundColorCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set backgroundColor.
-	 * If backgroundColor is not set the command will remove the attribute.
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
 	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'backgroundColor' );
 	}
 }

+ 10 - 44
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellbordercolorcommand.js

@@ -7,9 +7,8 @@
  * @module table/tablecellproperties/commands/tablecellbordercolorcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table cell border color command.
@@ -25,57 +24,24 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  *
  * @extends module:core/command~Command
  */
-export default class TableCellBorderColorCommand extends Command {
+export default class TableCellBorderColorCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 */
 	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'borderColor';
+		super( editor, 'borderColor' );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
+	_getAttribute( tableCell ) {
 		if ( !tableCell ) {
 			return;
 		}
 
 		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
 	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set border color.
-	 * If border color is not set the command will remove the attribute.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
-	}
 }

+ 10 - 44
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderstylecommand.js

@@ -7,9 +7,8 @@
  * @module table/tablecellproperties/commands/tablecellborderstylecommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table cell border style command.
@@ -25,57 +24,24 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  *
  * @extends module:core/command~Command
  */
-export default class TableCellBorderStyleCommand extends Command {
+export default class TableCellBorderStyleCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 */
 	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'borderStyle';
+		super( editor, 'borderStyle' );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
+	_getAttribute( tableCell ) {
 		if ( !tableCell ) {
 			return;
 		}
 
 		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
 	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set border style.
-	 * If border style is not set the command will remove the attribute.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
-	}
 }

+ 10 - 44
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellborderwidthcommand.js

@@ -7,9 +7,8 @@
  * @module table/tablecellproperties/commands/tablecellborderwidthcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table cell border width command.
@@ -25,57 +24,24 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  *
  * @extends module:core/command~Command
  */
-export default class TableCellBorderWidthCommand extends Command {
+export default class TableCellBorderWidthCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 */
 	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'borderWidth';
+		super( editor, 'borderWidth' );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
+	_getAttribute( tableCell ) {
 		if ( !tableCell ) {
 			return;
 		}
 
 		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
 	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set border width.
-	 * If border width is not set the command will remove the attribute.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
-	}
 }

+ 7 - 52
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellheightcommand.js

@@ -7,9 +7,7 @@
  * @module table/tablecellproperties/commands/tablecellheightcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
 
 /**
  * The table cell height command.
@@ -23,58 +21,15 @@ import { findAncestor } from '../../commands/utils';
  *			value: '5px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */
-export default class TableCellHeightCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'height';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
-		if ( !tableCell ) {
-			return;
-		}
-
-		return tableCell.getAttribute( this.attributeName );
-	}
-
+export default class TableCellHeightCommand extends TableCellPropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableCellHeightCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set height. If height is not set the command will remove the attribute.
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
 	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'height' );
 	}
 }

+ 7 - 53
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellhorizontalalignmentcommand.js

@@ -7,9 +7,7 @@
  * @module table/tablecellproperties/commands/tablecellhorizontalalignmentcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
 
 /**
  * The table cell horizontal alignment command.
@@ -23,59 +21,15 @@ import { findAncestor } from '../../commands/utils';
  *			value: '5px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */
-export default class TableCellHorizontalAlignmentCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'horizontalAlignment';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
-		if ( !tableCell ) {
-			return;
-		}
-
-		return tableCell.getAttribute( this.attributeName );
-	}
-
+export default class TableCellHorizontalAlignmentCommand extends TableCellPropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableCellHorizontalAlignmentCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set horizontal alignment.
-	 * If horizontal alignment is not set the command will remove the attribute.
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
 	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'horizontalAlignment' );
 	}
 }

+ 11 - 44
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpaddingcommand.js

@@ -7,9 +7,8 @@
  * @module table/tablecellproperties/commands/tablecellpaddingcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table cell padding command.
@@ -23,58 +22,26 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  *			value: '5px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */
-export default class TableCellPaddingCommand extends Command {
+export default class TableCellPaddingCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellPaddingCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 */
 	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'padding';
+		super( editor, 'padding' );
 	}
 
 	/**
 	 * @inheritDoc
 	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
+	_getAttribute( tableCell ) {
 		if ( !tableCell ) {
 			return;
 		}
 
 		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
 	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set padding. If padding is not set the command will remove the attribute.
-	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
-	}
 }

+ 88 - 0
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellpropertycommand.js

@@ -0,0 +1,88 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tablecellproperties/commands/tablecellpropertycommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor } from '../../commands/utils';
+
+/**
+ * The table cell attribute command.
+ *
+ * The command is a base command for other table cell attributes commands.
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellPropertyCommand extends Command {
+	/**
+	 * Creates a new `TableCellPropertyCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
+	 * @param {String} attributeName Table cell attribute name.
+	 */
+	constructor( editor, attributeName ) {
+		super( editor );
+
+		this.attributeName = attributeName;
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		const editor = this.editor;
+		const selection = editor.model.document.selection;
+
+		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
+
+		this.isEnabled = !!tableCell;
+		this.value = this._getAttribute( tableCell );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @fires execute
+	 * @param {Object} [options]
+	 * @param {*} [options.value] If set the command will set the attribute on selected table cells.
+	 * If it is not set the command will remove the attribute from selected table cells.
+	 * @param {module:engine/model/batch~Batch} [options.batch]
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value, batch } = options;
+
+		const tableCells = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
+
+		model.enqueueChange( batch || 'default', writer => {
+			if ( value ) {
+				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
+			} else {
+				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
+			}
+		} );
+	}
+
+	/**
+	 * Returns attribute value for a table cell.
+	 *
+	 * @param {module:engine/model/element~Element} tableCell
+	 * @returns {String|undefined}
+	 * @private
+	 */
+	_getAttribute( tableCell ) {
+		if ( !tableCell ) {
+			return;
+		}
+
+		return tableCell.getAttribute( this.attributeName );
+	}
+}

+ 15 - 54
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellverticalalignmentcommand.js

@@ -7,9 +7,7 @@
  * @module table/tablecellproperties/commands/tablecellverticalalignmentcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
 
 /**
  * The table cell vertical alignment command.
@@ -20,62 +18,25 @@ import { findAncestor } from '../../commands/utils';
  * To change cell vertical alignment of the selected cell, execute the command:
  *
  *		editor.execute( 'tableCellVerticalAlignment', {
- *			value: '5px'
+ *			value: 'top'
  *		} );
  *
- * @extends module:core/command~Command
+ * The editor UI allows to set those attributes from
+ * [a `vertical-align` CSS attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align):
+ *
+ * * `'top'`
+ * * `'bottom'`
+ * * `'middle'`
+ *
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */
-export default class TableCellVerticalAlignmentCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'verticalAlignment';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
-		if ( !tableCell ) {
-			return;
-		}
-
-		return tableCell.getAttribute( this.attributeName );
-	}
-
+export default class TableCellVerticalAlignmentCommand extends TableCellPropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableCellVerticalAlignmentCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set vertical alignment.
-	 * If vertical alignment is not set the command will remove the attribute.
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
 	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'verticalAlignment' );
 	}
 }

+ 7 - 52
packages/ckeditor5-table/src/tablecellproperties/commands/tablecellwidthcommand.js

@@ -7,9 +7,7 @@
  * @module table/tablecellproperties/commands/tablecellwidthcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TableCellPropertyCommand from './tablecellpropertycommand';
 
 /**
  * The table cell width command.
@@ -23,58 +21,15 @@ import { findAncestor } from '../../commands/utils';
  *			value: '5px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tablecellproperties/commands/tablecellpropertycommand
  */
-export default class TableCellWidthCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'width';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell;
-		this.value = this._getValue( tableCell );
-	}
-
-	_getValue( tableCell ) {
-		if ( !tableCell ) {
-			return;
-		}
-
-		return tableCell.getAttribute( this.attributeName );
-	}
-
+export default class TableCellWidthCommand extends TableCellPropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableCellWidthCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set width. If width is not set the command will remove the attribute.
+	 * @param {module:core/editor/editor~Editor} editor Editor on which this command will be used.
 	 */
-	execute( options = {} ) {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const { value, batch } = options;
-
-		const tableCells = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
-			} else {
-				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'width' );
 	}
 }