I/3287: Table and table cell properties plugins

src/commands/utils.js

@@ -58,6 +58,22 @@ export function createEmptyTableCell( writer, insertPosition, attributes = {} )
 	writer.insert( tableCell, insertPosition );
 }
 
+/**
+ * Returns a string if all four values of box edges are equal.
+ *
+ * If 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~BoxEdges|String}
+ */
 export function getSingleValue( objectOrString ) {
 	if ( !objectOrString || !isObject( objectOrString ) ) {
 		return objectOrString;

src/tablecellproperties.js

@@ -15,8 +15,8 @@ import TableCellPropertiesEditing from './tablecellproperties/tablecellpropertie
  * The table cell properties feature.
  *
  * This is a "glue" plugin which loads the
- * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table editing feature} and
- * table UI feature.
+ * {@link module:table/tablecellproperties/tablecellpropertiesediting~TableCellPropertiesEditing table properties editing feature} and
+ * table cell properties UI feature.
  *
  * @extends module:core/plugin~Plugin
  */

src/tablecellproperties/tablecellpropertiesediting.js

@@ -35,6 +35,14 @@ import TableCellBorderWidthCommand from './commands/tablecellborderwidthcommand'
  * - horizontal and vertical alignment: `horizontalAlignment`, `verticalAlignment`
  * - cell width & height: `width` & `height`
  *
+ * It also registers commands used to manipulate the above attributes:
+ *
+ * - border: `'tableCellBorderStyle'`, `'tableCellBorderColor'` and `'tableCellBorderWidth'` commands
+ * - background color: `'tableCellBackgroundColor'`
+ * - cell padding: `'tableCellPadding'`
+ * - horizontal and vertical alignment: `'tableCellHorizontalAlignment'`, `'tableCellVerticalAlignment'`
+ * - width & height: `'tableCellWidth'` & `'tableCellHeight'`
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TableCellPropertiesEditing extends Plugin {

src/tableproperties.js

@@ -14,6 +14,10 @@ import TablePropertiesEditing from './tableproperties/tablepropertiesediting';
 /**
  * The table properties feature.
  *
+ * This is a "glue" plugin which loads the
+ * {@link module:table/tableproperties/tablepropertiesediting~TableCellPropertiesEditing table editing feature} and
+ * table UI feature.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TableProperties extends Plugin {

src/tableproperties/tablepropertiesediting.js

@@ -21,9 +21,27 @@ import TableWidthCommand from './commands/tablewidthcommand';
 import TableHeightCommand from './commands/tableheightcommand';
 import TableAlignmentCommand from './commands/tablealignmentcommand';
 
+// RegExp used for matching margin style in converters.
+const MARGIN_REG_EXP = /^(auto|0(%|[a-z]{2,4})?)$/;
+const ALIGN_VALUES_REG_EXP = /^(left|right|center)$/;
+
 /**
  * The table properties editing feature.
  *
+ * Introduces table's model attributes and their conversion:
+ *
+ * - border: `borderStyle`, `borderColor` and `borderWidth`
+ * - background color: `backgroundColor`
+ * - horizontal alignment: `alignment`
+ * - width & height: `width` & `height`
+ *
+ * It also registers commands used to manipulate the above attributes:
+ *
+ * - border: `'tableBorderStyle'`, `'tableBorderColor'` and `'tableBorderWidth'` commands
+ * - background color: `'tableBackgroundColor'`
+ * - horizontal alignment: `'tableAlignment'`
+ * - width & height: `'tableWidth'` & `'tableHeight'`
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class TablePropertiesEditing extends Plugin {
@@ -97,8 +115,8 @@ function enableAlignmentProperty( schema, conversion ) {
 		.attributeToAttribute( {
 			view: {
 				styles: {
-					'margin-right': /^(auto|0(%|[a-z]{2,4})?)$/,
-					'margin-left': /^(auto|0(%|[a-z]{2,4})?)$/
+					'margin-right': MARGIN_REG_EXP,
+					'margin-left': MARGIN_REG_EXP
 				}
 			},
 			model: {
@@ -122,7 +140,7 @@ function enableAlignmentProperty( schema, conversion ) {
 		.attributeToAttribute( {
 			view: {
 				attributes: {
-					align: /^(left|right|center)$/
+					align: ALIGN_VALUES_REG_EXP
 				}
 			},
 			model: {

tests/_utils/utils.js

@@ -16,6 +16,7 @@ import { assertEqualMarkup } from '@ckeditor/ckeditor5-utils/tests/_utils/utils'
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 const WIDGET_TABLE_CELL_CLASS = 'ck-editor__editable ck-editor__nested-editable';
+const BORDER_REG_EXP = /[\s\S]+/;
 
 /**
  * Returns a model representation of a table shorthand notation:
@@ -247,7 +248,7 @@ export function defaultConversion( conversion, asWidget = false ) {
 		view: {
 			name: 'td',
 			styles: {
-				border: /[\s\S]+/
+				border: BORDER_REG_EXP
 			}
 		},
 		model: {