Merge pull request #224 from ckeditor/i/3287

Feature: Introduced the table and table cell properties plugins. Closes ckeditor/ckeditor5#6048.

Author: oleq

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@ckeditor/ckeditor5-core": "^16.0.0",
     "@ckeditor/ckeditor5-ui": "^16.0.0",
-    "@ckeditor/ckeditor5-widget": "^16.0.0"
+    "@ckeditor/ckeditor5-widget": "^16.0.0",
+    "lodash-es": "^4.17.10"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-alignment": "^16.0.0",
@@ -21,6 +22,7 @@
     "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
     "@ckeditor/ckeditor5-engine": "^16.0.0",
     "@ckeditor/ckeditor5-image": "^16.0.0",
+    "@ckeditor/ckeditor5-indent": "^16.0.0",
     "@ckeditor/ckeditor5-list": "^16.0.0",
     "@ckeditor/ckeditor5-media-embed": "^16.0.0",
     "@ckeditor/ckeditor5-paragraph": "^16.0.0",

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,31 @@ export function createEmptyTableCell( writer, insertPosition, attributes = {} )
 	writer.insertElement( 'paragraph', tableCell );
 	writer.insert( tableCell, insertPosition );
 }
+
+/**
+ * Returns a string if all four values of box sides are equal.
+ *
+ * If a string is passed, it is treated as a single value (pass-through).
+ *
+ *		// returns 'foo':
+ *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'foo', left: 'foo' } );
+ *		getSingleValue( 'foo' );
+ *
+ *		// Returns undefined:
+ *		getSingleValue( { top: 'foo', right: 'foo', bottom: 'bar', left: 'foo' } );
+ *		getSingleValue( { top: 'foo', right: 'foo' } );
+ *
+ * @param objectOrString
+ * @returns {module:engine/view/stylesmap~BoxSides|String}
+ */
+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;
+	}
+}

src/converters/tableproperties.js

@@ -0,0 +1,116 @@
+/**
+ * @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/converters/tableproperites
+ */
+
+/**
+ * Conversion helper for upcasting attribute using normalized styles.
+ *
+ * @param {module:engine/conversion/conversion~Conversion} conversion
+ * @param {String} modelElement
+ * @param {String} modelAttribute
+ * @param {String} styleName
+ */
+export function upcastStyleToAttribute( conversion, modelElement, modelAttribute, styleName ) {
+	conversion.for( 'upcast' ).attributeToAttribute( {
+		view: {
+			styles: {
+				[ styleName ]: /[\s\S]+/
+			}
+		},
+		model: {
+			name: modelElement,
+			key: modelAttribute,
+			value: viewElement => viewElement.getNormalizedStyle( styleName )
+		}
+	} );
+}
+
+/**
+ * Conversion helper for upcasting border styles for view element.
+ *
+ * @param {module:engine/conversion/conversion~Conversion} conversion
+ * @param {String} viewElementName
+ */
+export function upcastBorderStyles( conversion, viewElementName ) {
+	conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:' + viewElementName, ( evt, data, conversionApi ) => {
+		// TODO: this is counter-intuitive: ie.: if only `border-top` is defined then `hasStyle( 'border' )` also returns true.
+		// TODO: this might needs to be fixed in styles normalizer.
+		const stylesToConsume = [
+			'border-top',
+			'border-right',
+			'border-bottom',
+			'border-left'
+		].filter( styleName => data.viewItem.hasStyle( styleName ) );
+
+		if ( !stylesToConsume.length ) {
+			return;
+		}
+
+		const matcherPattern = {
+			styles: stylesToConsume
+		};
+
+		// Try to consume appropriate values from consumable values list.
+		if ( !conversionApi.consumable.test( data.viewItem, matcherPattern ) ) {
+			return;
+		}
+
+		const modelElement = [ ...data.modelRange.getItems( { shallow: true } ) ].pop();
+
+		conversionApi.consumable.consume( data.viewItem, matcherPattern );
+
+		conversionApi.writer.setAttribute( 'borderStyle', data.viewItem.getNormalizedStyle( 'border-style' ), modelElement );
+		conversionApi.writer.setAttribute( 'borderColor', data.viewItem.getNormalizedStyle( 'border-color' ), modelElement );
+		conversionApi.writer.setAttribute( 'borderWidth', data.viewItem.getNormalizedStyle( 'border-width' ), modelElement );
+	} ) );
+}
+
+/**
+ * Conversion helper for downcasting attribute to a style.
+ *
+ * @param {module:engine/conversion/conversion~Conversion} conversion
+ * @param {String} modelElement
+ * @param {String} modelAttribute
+ * @param {String} styleName
+ */
+export function downcastAttributeToStyle( conversion, modelElement, modelAttribute, styleName ) {
+	conversion.for( 'downcast' ).attributeToAttribute( {
+		model: {
+			name: modelElement,
+			key: modelAttribute
+		},
+		view: modelAttributeValue => ( {
+			key: 'style',
+			value: {
+				[ styleName ]: modelAttributeValue
+			}
+		} )
+	} );
+}
+
+/**
+ * Conversion helper for downcasting attributes from model's table to a view table (not to figure).
+ *
+ * @param {module:engine/conversion/conversion~Conversion} conversion
+ * @param {String} modelAttribute
+ * @param {String} styleName
+ */
+export function downcastTableAttribute( conversion, modelAttribute, styleName ) {
+	conversion.for( 'downcast' ).add( dispatcher => dispatcher.on( `attribute:${ modelAttribute }:table`, ( evt, data, conversionApi ) => {
+		const { item, attributeNewValue } = data;
+		const { mapper, writer } = conversionApi;
+
+		const table = [ ...mapper.toViewElement( item ).getChildren() ].find( child => child.is( 'table' ) );
+
+		if ( attributeNewValue ) {
+			writer.setStyle( styleName, attributeNewValue, table );
+		} else {
+			writer.removeAttribute( styleName, table );
+		}
+	} ) );
+}

src/tablecellproperties.js

@@ -0,0 +1,37 @@
+/**
+ * @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
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertiesediting';
+
+/**
+ * The table cell properties feature.
+ *
+ * This is a "glue" plugin which loads the
+ * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table properties editing feature} and
+ * table cell properties UI feature.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableCellProperties extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'TableCellProperties';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ TableCellPropertiesEditing ];
+	}
+}

src/tablecellproperties/commands/tablecellbackgroundcolorcommand.js

@@ -0,0 +1,35 @@
+/**
+ * @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/tablecellbackgroundcolorcommand
+ */
+
+import TableCellPropertyCommand from './tablecellpropertycommand';
+
+/**
+ * The table cell background color command.
+ *
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBackgroundColor'` editor command.
+ *
+ * To change the background color of selected cells, execute the command:
+ *
+ *		editor.execute( 'tableCellBackgroundColor', {
+ *			value: '#f00'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBackgroundColorCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBackgroundColorCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'backgroundColor' );
+	}
+}

src/tablecellproperties/commands/tablecellbordercolorcommand.js

@@ -0,0 +1,47 @@
+/**
+ * @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/tablecellbordercolorcommand
+ */
+
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
+
+/**
+ * The table cell border color command.
+ *
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderColor'` editor command.
+ *
+ * To change the border color of selected cells, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderColor', {
+ *			value: '#f00'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderColorCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderColor' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getAttribute( tableCell ) {
+		if ( !tableCell ) {
+			return;
+		}
+
+		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
+	}
+}

src/tablecellproperties/commands/tablecellborderstylecommand.js

@@ -0,0 +1,47 @@
+/**
+ * @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/tablecellborderstylecommand
+ */
+
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
+
+/**
+ * The table cell border style command.
+ *
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderStyle'` editor command.
+ *
+ * To change the border style of selected cells, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderStyle', {
+ *			value: 'dashed'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderStyleCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderStyle' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getAttribute( tableCell ) {
+		if ( !tableCell ) {
+			return;
+		}
+
+		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
+	}
+}

src/tablecellproperties/commands/tablecellborderwidthcommand.js

@@ -0,0 +1,47 @@
+/**
+ * @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/tablecellborderwidthcommand
+ */
+
+import TableCellPropertyCommand from './tablecellpropertycommand';
+import { getSingleValue } from '../../commands/utils';
+
+/**
+ * The table cell border width command.
+ *
+ * The command is registered by the {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing} as
+ * `'tableCellBorderWidth'` editor command.
+ *
+ * To change the border width of selected cells, execute the command:
+ *
+ *		editor.execute( 'tableCellBorderWidth', {
+ *			value: '5px'
+ *		} );
+ *
+ * @extends module:core/command~Command
+ */
+export default class TableCellBorderWidthCommand extends TableCellPropertyCommand {
+	/**
+	 * Creates a new `TableCellBorderWidthCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 */
+	constructor( editor ) {
+		super( editor, 'borderWidth' );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	_getAttribute( tableCell ) {
+		if ( !tableCell ) {
+			return;
+		}
+
+		return getSingleValue( tableCell.getAttribute( this.attributeName ) );
+	}
+}