浏览代码

De-duplicate table commands code.

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

+ 8 - 54
packages/ckeditor5-table/src/tableproperties/commands/tablealignmentcommand.js

@@ -7,9 +7,7 @@
  * @module table/tableproperties/commands/tablealignmentcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
 
 /**
  * The table alignment command.
@@ -20,62 +18,18 @@ import { findAncestor } from '../../commands/utils';
  * To change alignment of the selected table, execute the command:
  *
  *		editor.execute( 'tableAlignment', {
- *			value: '5px'
+ *			value: 'right'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableAlignmentCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'alignment';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
-	_getValue( table ) {
-		if ( !table ) {
-			return;
-		}
-
-		return table.getAttribute( this.attributeName );
-	}
-
+export default class TableAlignmentCommand extends TablePropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableAlignmentCommand` instance.
 	 *
-	 * @fires execute
-	 * @param {Object} [options]
-	 * @param {Boolean} [options.value] If set the command will set alignment.
-	 * If 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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'alignment' );
 	}
 }

+ 8 - 54
packages/ckeditor5-table/src/tableproperties/commands/tablebackgroundcolorcommand.js

@@ -7,9 +7,7 @@
  * @module table/tableproperties/commands/tablebackgroundcolorcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
 
 /**
  * The table background color command.
@@ -20,62 +18,18 @@ import { findAncestor } from '../../commands/utils';
  * To change backgroundColor of the selected, execute the command:
  *
  *		editor.execute( 'tableBackgroundColor', {
- *			value: '5px'
+ *			value: '#f00'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableBackgroundColorCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'backgroundColor';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
-	_getValue( table ) {
-		if ( !table ) {
-			return;
-		}
-
-		return table.getAttribute( this.attributeName );
-	}
-
+export default class TableBackgroundColorCommand extends TablePropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableBackgroundColorCommand` 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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'backgroundColor' );
 	}
 }

+ 11 - 45
packages/ckeditor5-table/src/tableproperties/commands/tablebordercolorcommand.js

@@ -7,9 +7,8 @@
  * @module table/tableproperties/commands/tablebordercolorcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table border color command.
@@ -20,31 +19,24 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  * To change border color of the selected , execute the command:
  *
  *		editor.execute( 'tableBorderColor', {
- *			value: '5px'
+ *			value: '#f00'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableBorderColorCommand extends Command {
+export default class TableBorderColorCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderColorCommand` 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 table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
 	_getValue( table ) {
 		if ( !table ) {
 			return;
@@ -52,30 +44,4 @@ export default class TableBorderColorCommand extends Command {
 
 		return getSingleValue( table.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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
-	}
 }

+ 11 - 45
packages/ckeditor5-table/src/tableproperties/commands/tableborderstylecommand.js

@@ -7,9 +7,8 @@
  * @module table/tableproperties/commands/tableborderstylecommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table style border command.
@@ -20,31 +19,24 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  * To change border of the selected , execute the command:
  *
  *		editor.execute( 'tableBorderStyle', {
- *			value: '5px'
+ *			value: 'dashed'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableBorderStyleCommand extends Command {
+export default class TableBorderStyleCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderStyleCommand` 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 table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
 	_getValue( table ) {
 		if ( !table ) {
 			return;
@@ -52,30 +44,4 @@ export default class TableBorderStyleCommand extends Command {
 
 		return getSingleValue( table.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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
-	}
 }

+ 10 - 44
packages/ckeditor5-table/src/tableproperties/commands/tableborderwidthcommand.js

@@ -7,9 +7,8 @@
  * @module table/tableproperties/commands/tableborderwidthcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor, getSingleValue } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
+import { getSingleValue } from '../../commands/utils';
 
 /**
  * The table width border command.
@@ -23,28 +22,21 @@ import { findAncestor, getSingleValue } from '../../commands/utils';
  *			value: '5px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableBorderWidthCommand extends Command {
+export default class TableBorderWidthCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableBorderWidthCommand` 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 table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
 	_getValue( table ) {
 		if ( !table ) {
 			return;
@@ -52,30 +44,4 @@ export default class TableBorderWidthCommand extends Command {
 
 		return getSingleValue( table.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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
-	}
 }

+ 7 - 52
packages/ckeditor5-table/src/tableproperties/commands/tableheightcommand.js

@@ -7,9 +7,7 @@
  * @module table/tableproperties/commands/tableheightcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
 
 /**
  * The table height command.
@@ -20,61 +18,18 @@ import { findAncestor } from '../../commands/utils';
  * To change height of the selected table, execute the command:
  *
  *		editor.execute( 'tableHeight', {
- *			value: '5px'
+ *			value: '500px'
  *		} );
  *
  * @extends module:core/command~Command
  */
-export default class TableHeightCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'height';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
-	_getValue( table ) {
-		if ( !table ) {
-			return;
-		}
-
-		return table.getAttribute( this.attributeName );
-	}
-
+export default class TableHeightCommand extends TablePropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableHeightCommand` 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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'height' );
 	}
 }

+ 86 - 0
packages/ckeditor5-table/src/tableproperties/commands/tablepropertycommand.js

@@ -0,0 +1,86 @@
+/**
+ * @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/tableproperties/commands/tablepropertycommand
+ */
+
+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 TablePropertyCommand extends Command {
+	/**
+	 * Creates a new `TablePropertyCommand` 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 table = findAncestor( 'table', selection.getFirstPosition() );
+
+		this.isEnabled = !!table;
+		this.value = this._getValue( table );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @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.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value, batch } = options;
+
+		const tables = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
+
+		model.enqueueChange( batch || 'default', writer => {
+			if ( value ) {
+				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
+			} else {
+				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
+			}
+		} );
+	}
+
+	/**
+	 * Returns attribute value for a table cell.
+	 *
+	 * @param {module:engine/model/element~Element} table
+	 * @returns {String|undefined}
+	 * @private
+	 */
+	_getValue( table ) {
+		if ( !table ) {
+			return;
+		}
+
+		return table.getAttribute( this.attributeName );
+	}
+}

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

@@ -7,9 +7,7 @@
  * @module table/tableproperties/commands/tablewidthcommand
  */
 
-import Command from '@ckeditor/ckeditor5-core/src/command';
-
-import { findAncestor } from '../../commands/utils';
+import TablePropertyCommand from './tablepropertycommand';
 
 /**
  * The table width command.
@@ -20,61 +18,18 @@ import { findAncestor } from '../../commands/utils';
  * To change width of the selected table, execute the command:
  *
  *		editor.execute( 'tableWidth', {
- *			value: '5px'
+ *			value: '400px'
  *		} );
  *
- * @extends module:core/command~Command
+ * @extends module:table/tableproperties/commands/tablepropertycommand
  */
-export default class TableWidthCommand extends Command {
-	constructor( editor ) {
-		super( editor );
-
-		this.attributeName = 'width';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-
-		const table = findAncestor( 'table', selection.getFirstPosition() );
-
-		this.isEnabled = !!table;
-		this.value = this._getValue( table );
-	}
-
-	_getValue( table ) {
-		if ( !table ) {
-			return;
-		}
-
-		return table.getAttribute( this.attributeName );
-	}
-
+export default class TableWidthCommand extends TablePropertyCommand {
 	/**
-	 * Executes the command.
+	 * Creates a new `TableWidthCommand` 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 tables = Array.from( selection.getSelectedBlocks() )
-			.map( element => findAncestor( 'table', model.createPositionAt( element, 0 ) ) );
-
-		model.enqueueChange( batch || 'default', writer => {
-			if ( value ) {
-				tables.forEach( table => writer.setAttribute( this.attributeName, value, table ) );
-			} else {
-				tables.forEach( table => writer.removeAttribute( this.attributeName, table ) );
-			}
-		} );
+	constructor( editor ) {
+		super( editor, 'width' );
 	}
 }