瀏覽代碼

Add table cell border commands.

Maciej Gołaszewski 5 年之前
父節點
當前提交
98a1e528d9

+ 82 - 0
packages/ckeditor5-table/src/commands/tablecellbordercolorcommand.js

@@ -0,0 +1,82 @@
+/**
+ * @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/tablecellbordercolorcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor, getSingleValue } from './utils';
+
+/**
+ * The table cell border color command.
+ *
+ * The command is registered by {@link module:table/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderColor'` editor command.
+ *
+ * To change cell border color of the selected cell, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderColor', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderColorCommand extends Command {
+	constructor( editor ) {
+		super( editor );
+
+		this.attributeName = '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 ) {
+		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 } = 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 ) );
+			}
+		} );
+	}
+}
+

+ 82 - 0
packages/ckeditor5-table/src/commands/tablecellborderstylecommand.js

@@ -0,0 +1,82 @@
+/**
+ * @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/tablecellborderstylecommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor, getSingleValue } from './utils';
+
+/**
+ * The table cell border style command.
+ *
+ * The command is registered by {@link module:table/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderStyle'` editor command.
+ *
+ * To change cell border style of the selected cell, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderStyle', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderStyleCommand extends Command {
+	constructor( editor ) {
+		super( editor );
+
+		this.attributeName = '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 ) {
+		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 } = 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 ) );
+			}
+		} );
+	}
+}
+

+ 82 - 0
packages/ckeditor5-table/src/commands/tablecellborderwidthcommand.js

@@ -0,0 +1,82 @@
+/**
+ * @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/tablecellborderwidthcommand
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findAncestor, getSingleValue } from './utils';
+
+/**
+ * The table cell border width command.
+ *
+ * The command is registered by {@link module:table/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderWidth'` editor command.
+ *
+ * To change cell border width of the selected cell, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderWidth', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderWidthCommand extends Command {
+	constructor( editor ) {
+		super( editor );
+
+		this.attributeName = '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 ) {
+		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 } = 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 ) );
+			}
+		} );
+	}
+}
+

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

@@ -19,6 +19,9 @@ import TableCellHeightCommand from './commands/tablecellheightcommand';
 import TableCellBackgroundColorCommand from './commands/tablecellbackgroundcolorcommand';
 import TableCellVerticalAlignmentCommand from './commands/tablecellverticalalignmentcommand';
 import TableCellHorizontalAlignmentCommand from './commands/tablecellhorizontalalignmentcommand';
+import TableCellBorderStyleCommand from './commands/tablecellborderstylecommand';
+import TableCellBorderColorCommand from './commands/tablecellbordercolorcommand';
+import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand';
 
 /**
  * The table cell properties editing feature.
@@ -62,6 +65,10 @@ export default class TableCellPropertiesEditing extends Plugin {
 		viewDoc.addStyleProcessorRules( addBackgroundRules );
 
 		enableBorderProperties( schema, conversion );
+		editor.commands.add( 'tableCellBorderStyle', new TableCellBorderStyleCommand( editor ) );
+		editor.commands.add( 'tableCellBorderColor', new TableCellBorderColorCommand( editor ) );
+		editor.commands.add( 'tableCellBorderWidth', new TableCellBorderWidthCommand( editor ) );
+
 		enableHorizontalAlignmentProperty( schema, conversion );
 		editor.commands.add( 'tableCellHorizontalAlignment', new TableCellHorizontalAlignmentCommand( editor ) );