Browse Source

Add TableCellHeightCommand and TableCellWidthCommand.

Maciej Gołaszewski 5 years ago
parent
commit
19800ae3a7

+ 80 - 0
packages/ckeditor5-table/src/commands/tablecellheightcommand.js

@@ -0,0 +1,80 @@
+/**
+ * @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/commands/tablecellheightcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor } from './utils';
+
+/**
+ * The table cell height command.
+ *
+ * The command is registered by {@link module:table/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellHeight'` editor command.
+ *
+ * To change cell height of the selected cell, execute the command:
+ *
+ *		editor.execute( 'tableCellHeight', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+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 );
+	}
+
+	/**
+	 * Executes the command.
+	 *
+	 * @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.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const selection = model.document.selection;
+
+		const { value } = options;
+
+		const tableCells = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
+
+		model.change( writer => {
+			if ( value ) {
+				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
+			} else {
+				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
+			}
+		} );
+	}
+}

+ 2 - 16
packages/ckeditor5-table/src/commands/tablecellpaddingcommand.js

@@ -8,9 +8,8 @@
  */
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
-import { isObject } from 'lodash-es';
 
-import { findAncestor } from './utils';
+import { findAncestor, getSingleValue } from './utils';
 
 /**
  * The table cell padding command.
@@ -51,9 +50,7 @@ export default class TableCellPaddingCommand extends Command {
 			return;
 		}
 
-		const padding = tableCell.getAttribute( 'padding' );
-
-		return getSingleValue( padding );
+		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
 	}
 
 	/**
@@ -82,14 +79,3 @@ export default class TableCellPaddingCommand extends Command {
 	}
 }
 
-function getSingleValue( objectOrString ) {
-	if ( !objectOrString || !isObject( objectOrString ) ) {
-		return objectOrString;
-	}
-
-	const { top, right, bottom, left } = objectOrString;
-
-	if ( top == right && right == bottom && bottom == left ) {
-		return top;
-	}
-}

+ 80 - 0
packages/ckeditor5-table/src/commands/tablecellwidthcommand.js

@@ -0,0 +1,80 @@
+/**
+ * @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/commands/tablecellwidthcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor } from './utils';
+
+/**
+ * The table cell width command.
+ *
+ * The command is registered by {@link module:table/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellWidth'` editor command.
+ *
+ * To change cell width of the selected cell, execute the command:
+ *
+ *		editor.execute( 'tableCellWidth', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+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 );
+	}
+
+	/**
+	 * 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 } = options;
+
+		const tableCells = Array.from( selection.getSelectedBlocks() )
+			.map( element => findAncestor( 'tableCell', model.createPositionAt( element, 0 ) ) );
+
+		model.change( writer => {
+			if ( value ) {
+				tableCells.forEach( tableCell => writer.setAttribute( this.attributeName, value, tableCell ) );
+			} else {
+				tableCells.forEach( tableCell => writer.removeAttribute( this.attributeName, tableCell ) );
+			}
+		} );
+	}
+}

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

@@ -7,6 +7,8 @@
  * @module table/commands/utils
  */
 
+import { isObject } from 'lodash-es';
+
 /**
  * Returns the parent element of given name. Returns undefined if position is not inside desired parent.
  *
@@ -55,3 +57,15 @@ export function createEmptyTableCell( writer, insertPosition, attributes = {} )
 	writer.insertElement( 'paragraph', tableCell );
 	writer.insert( tableCell, insertPosition );
 }
+
+export function getSingleValue( objectOrString ) {
+	if ( !objectOrString || !isObject( objectOrString ) ) {
+		return objectOrString;
+	}
+
+	const { top, right, bottom, left } = objectOrString;
+
+	if ( top == right && right == bottom && bottom == left ) {
+		return top;
+	}
+}

+ 8 - 0
packages/ckeditor5-table/src/tablecellpropertiesediting.js

@@ -14,6 +14,8 @@ import { addPaddingRules } from '@ckeditor/ckeditor5-engine/src/view/styles/padd
 import { addBackgroundRules } from '@ckeditor/ckeditor5-engine/src/view/styles/background';
 import TableEditing from './tableediting';
 import TableCellPaddingCommand from './commands/tablecellpaddingcommand';
+import TableCellWidthCommand from './commands/tablecellwidthcommand';
+import TableCellHeightCommand from './commands/tablecellheightcommand';
 
 /**
  * The table cell properties editing feature.
@@ -58,10 +60,16 @@ export default class TableCellPropertiesEditing extends Plugin {
 
 		enableBorderProperties( schema, conversion );
 		enableHorizontalAlignmentProperty( schema, conversion );
+
 		enableProperty( schema, conversion, 'width', 'width' );
+		editor.commands.add( 'tableCellWidth', new TableCellWidthCommand( editor ) );
+
 		enableProperty( schema, conversion, 'height', 'height' );
+		editor.commands.add( 'tableCellHeight', new TableCellHeightCommand( editor ) );
+
 		enableProperty( schema, conversion, 'padding', 'padding' );
 		editor.commands.add( 'tableCellPadding', new TableCellPaddingCommand( editor ) );
+
 		enableProperty( schema, conversion, 'backgroundColor', 'background-color' );
 		enableProperty( schema, conversion, 'verticalAlignment', 'vertical-align' );
 	}