@ckeditor/ckeditor5-table 27.1.0 → 29.2.0

package/lang/translations/zh.po

@@ -247,3 +247,15 @@ msgstr "尺寸代碼錯誤。試試看 \"10px\" 或 \"2em\" 或簡單寫 \"2\"
 msgctxt "The label used by assistive technologies describing a button that opens a color picker, where user can choose a configured color for a certain properties (eg.: background color, color, border-color etc.)."
 msgid "Color picker"
 msgstr "顏色選擇"
+
+msgctxt "The button label for the table toolbar hiding caption attached to the table."
+msgid "Toggle caption off"
+msgstr ""
+
+msgctxt "The button label for the table toolbar showing caption attached to the table."
+msgid "Toggle caption on"
+msgstr ""
+
+msgctxt "The placeholder text for the table caption displayed when the caption is empty."
+msgid "Enter table caption"
+msgstr ""

package/package.json

@@ -1,39 +1,40 @@
 {
   "name": "@ckeditor/ckeditor5-table",
-  "version": "27.1.0",
+  "version": "29.2.0",
   "description": "Table feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
     "ckeditor5-feature",
-    "ckeditor5-plugin"
+    "ckeditor5-plugin",
+    "ckeditor5-dll"
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^27.1.0",
+    "ckeditor5": "^29.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-alignment": "^27.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^27.1.0",
-    "@ckeditor/ckeditor5-clipboard": "^27.1.0",
-    "@ckeditor/ckeditor5-core": "^27.1.0",
-    "@ckeditor/ckeditor5-dev-utils": "^24.0.0",
-    "@ckeditor/ckeditor5-editor-classic": "^27.1.0",
-    "@ckeditor/ckeditor5-engine": "^27.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^27.1.0",
-    "@ckeditor/ckeditor5-image": "^27.1.0",
-    "@ckeditor/ckeditor5-indent": "^27.1.0",
-    "@ckeditor/ckeditor5-list": "^27.1.0",
-    "@ckeditor/ckeditor5-media-embed": "^27.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^27.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^27.1.0",
-    "@ckeditor/ckeditor5-typing": "^27.1.0",
-    "@ckeditor/ckeditor5-ui": "^27.1.0",
-    "@ckeditor/ckeditor5-undo": "^27.1.0",
-    "@ckeditor/ckeditor5-utils": "^27.1.0",
-    "@ckeditor/ckeditor5-widget": "^27.1.0",
+    "@ckeditor/ckeditor5-alignment": "^29.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^29.2.0",
+    "@ckeditor/ckeditor5-clipboard": "^29.2.0",
+    "@ckeditor/ckeditor5-core": "^29.2.0",
+    "@ckeditor/ckeditor5-dev-utils": "^25.4.0",
+    "@ckeditor/ckeditor5-editor-classic": "^29.2.0",
+    "@ckeditor/ckeditor5-engine": "^29.2.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^29.2.0",
+    "@ckeditor/ckeditor5-image": "^29.2.0",
+    "@ckeditor/ckeditor5-indent": "^29.2.0",
+    "@ckeditor/ckeditor5-list": "^29.2.0",
+    "@ckeditor/ckeditor5-media-embed": "^29.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^29.2.0",
+    "@ckeditor/ckeditor5-theme-lark": "^29.2.0",
+    "@ckeditor/ckeditor5-typing": "^29.2.0",
+    "@ckeditor/ckeditor5-ui": "^29.2.0",
+    "@ckeditor/ckeditor5-undo": "^29.2.0",
+    "@ckeditor/ckeditor5-utils": "^29.2.0",
+    "@ckeditor/ckeditor5-widget": "^29.2.0",
     "json-diff": "^0.5.4",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11"
@@ -55,7 +56,8 @@
     "lang",
     "src",
     "theme",
-    "build"
+    "build",
+    "ckeditor5-metadata.json"
   ],
   "scripts": {
     "dll:build": "webpack"

package/src/commands/insertcolumncommand.js

@@ -52,10 +52,9 @@ export default class InsertColumnCommand extends Command {
 	 */
 	refresh() {
 		const selection = this.editor.model.document.selection;
+		const isAnyCellSelected = !!getSelectionAffectedTableCells( selection ).length;
 
-		const tableParent = selection.getFirstPosition().findAncestor( 'table' );
-
-		this.isEnabled = !!tableParent;
+		this.isEnabled = isAnyCellSelected;
 	}
 
 	/**

package/src/commands/insertrowcommand.js

@@ -52,10 +52,9 @@ export default class InsertRowCommand extends Command {
 	 */
 	refresh() {
 		const selection = this.editor.model.document.selection;
+		const isAnyCellSelected = !!getSelectionAffectedTableCells( selection ).length;
 
-		const tableParent = selection.getFirstPosition().findAncestor( 'table' );
-
-		this.isEnabled = !!tableParent;
+		this.isEnabled = isAnyCellSelected;
 	}
 
 	/**

package/src/commands/inserttablecommand.js

@@ -8,7 +8,7 @@
  */
 
 import { Command } from 'ckeditor5/src/core';
-import { findOptimalInsertionPosition, checkSelectionOnObject } from 'ckeditor5/src/widget';
+import { findOptimalInsertionRange } from 'ckeditor5/src/widget';
 
 /**
  * The insert table command.
@@ -30,8 +30,7 @@ export default class InsertTableCommand extends Command {
 		const selection = model.document.selection;
 		const schema = model.schema;
 
-		this.isEnabled = isAllowedInParent( selection, schema ) &&
-			!checkSelectionOnObject( selection, schema );
+		this.isEnabled = isAllowedInParent( selection, schema );
 	}
 
 	/**
@@ -42,21 +41,37 @@ export default class InsertTableCommand extends Command {
 	 * @param {Object} options
 	 * @param {Number} [options.rows=2] The number of rows to create in the inserted table.
 	 * @param {Number} [options.columns=2] The number of columns to create in the inserted table.
-	 * @param {Number} [options.headingRows=0] The number of heading rows.
-	 * @param {Number} [options.headingColumns=0] The number of heading columns.
+	 * @param {Number} [options.headingRows] The number of heading rows.
+	 * If not provided it will default to {@link module:table/table~TableConfig#defaultHeadings `config.table.defaultHeadings.rows`}
+	 * table config.
+	 * @param {Number} [options.headingColumns] The number of heading columns.
+	 * If not provided it will default to {@link module:table/table~TableConfig#defaultHeadings `config.table.defaultHeadings.columns`}
+	 * table config.
 	 * @fires execute
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
 		const selection = model.document.selection;
 		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+		const config = this.editor.config.get( 'table' );
 
-		const insertPosition = findOptimalInsertionPosition( selection, model );
+		const insertionRange = findOptimalInsertionRange( selection, model );
+
+		const defaultRows = config.defaultHeadings.rows;
+		const defaultColumns = config.defaultHeadings.columns;
+
+		if ( options.headingRows === undefined && defaultRows ) {
+			options.headingRows = defaultRows;
+		}
+
+		if ( options.headingColumns === undefined && defaultColumns ) {
+			options.headingColumns = defaultColumns;
+		}
 
 		model.change( writer => {
 			const table = tableUtils.createTable( writer, options );
 
-			model.insertContent( table, insertPosition );
+			model.insertContent( table, insertionRange );
 
 			writer.setSelection( writer.createPositionAt( table.getNodeByPath( [ 0, 0, 0 ] ), 0 ) );
 		} );

package/src/commands/mergecellcommand.js

@@ -133,7 +133,7 @@ export default class MergeCellCommand extends Command {
 		// First get the cell on proper direction.
 		const cellToMerge = this.isHorizontal ?
 			getHorizontalCell( tableCell, this.direction, tableUtils ) :
-			getVerticalCell( tableCell, this.direction );
+			getVerticalCell( tableCell, this.direction, tableUtils );
 
 		if ( !cellToMerge ) {
 			return;
@@ -155,6 +155,7 @@ export default class MergeCellCommand extends Command {
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} direction
+// @param {module:table/tableutils~TableUtils} tableUtils
 // @returns {module:engine/model/node~Node|null}
 function getHorizontalCell( tableCell, direction, tableUtils ) {
 	const tableRow = tableCell.parent;
@@ -195,15 +196,16 @@ function getHorizontalCell( tableCell, direction, tableUtils ) {
 //
 // @param {module:engine/model/element~Element} tableCell
 // @param {String} direction
+// @param {module:table/tableutils~TableUtils} tableUtils
 // @returns {module:engine/model/node~Node|null}
-function getVerticalCell( tableCell, direction ) {
+function getVerticalCell( tableCell, direction, tableUtils ) {
 	const tableRow = tableCell.parent;
 	const table = tableRow.parent;
 
 	const rowIndex = table.getChildIndex( tableRow );
 
 	// Don't search for mergeable cell if direction points out of the table.
-	if ( ( direction == 'down' && rowIndex === table.childCount - 1 ) || ( direction == 'up' && rowIndex === 0 ) ) {
+	if ( ( direction == 'down' && rowIndex === tableUtils.getRows( table ) - 1 ) || ( direction == 'up' && rowIndex === 0 ) ) {
 		return;
 	}
 

package/src/commands/removerowcommand.js

@@ -51,23 +51,25 @@ export default class RemoveRowCommand extends Command {
 	 */
 	execute() {
 		const model = this.editor.model;
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+
 		const referenceCells = getSelectionAffectedTableCells( model.document.selection );
 		const removedRowIndexes = getRowIndexes( referenceCells );
 
 		const firstCell = referenceCells[ 0 ];
 		const table = firstCell.findAncestor( 'table' );
 
-		const columnIndexToFocus = this.editor.plugins.get( 'TableUtils' ).getCellLocation( firstCell ).column;
+		const columnIndexToFocus = tableUtils.getCellLocation( firstCell ).column;
 
 		model.change( writer => {
 			const rowsToRemove = removedRowIndexes.last - removedRowIndexes.first + 1;
 
-			this.editor.plugins.get( 'TableUtils' ).removeRows( table, {
+			tableUtils.removeRows( table, {
 				at: removedRowIndexes.first,
 				rows: rowsToRemove
 			} );
 
-			const cellToFocus = getCellToFocus( table, removedRowIndexes.first, columnIndexToFocus );
+			const cellToFocus = getCellToFocus( table, removedRowIndexes.first, columnIndexToFocus, tableUtils.getRows( table ) );
 
 			writer.setSelection( writer.createPositionAt( cellToFocus, 0 ) );
 		} );
@@ -77,8 +79,9 @@ export default class RemoveRowCommand extends Command {
 // Returns a cell that should be focused before removing the row, belonging to the same column as the currently focused cell.
 // * If the row was not the last one, the cell to focus will be in the row that followed it (before removal).
 // * If the row was the last one, the cell to focus will be in the row that preceded it (before removal).
-function getCellToFocus( table, removedRowIndex, columnToFocus ) {
-	const row = table.getChild( removedRowIndex ) || table.getChild( table.childCount - 1 );
+function getCellToFocus( table, removedRowIndex, columnToFocus, tableRowCount ) {
+	// Don't go beyond last row's index.
+	const row = table.getChild( Math.min( removedRowIndex, tableRowCount - 1 ) );
 
 	// Default to first table cell.
 	let cellToFocus = row.getChild( 0 );

package/src/converters/downcast.js

@@ -74,7 +74,8 @@ export function downcastInsertTable( options = {} ) {
 		for ( const tableRow of table.getChildren() ) {
 			const rowIndex = tableRow.index;
 
-			if ( !viewRows.has( rowIndex ) ) {
+			// Make sure that this is a table row and not some other element (i.e., caption).
+			if ( tableRow.is( 'element', 'tableRow' ) && !viewRows.has( rowIndex ) ) {
 				viewRows.set( rowIndex, createTr( tableElement, tableRow, rowIndex, tableAttributes, conversionApi ) );
 			}
 		}
@@ -257,9 +258,7 @@ export function convertParagraphInTableCell( modelElement, conversionApi ) {
 	}
 
 	if ( isSingleParagraphWithoutAttributes( modelElement ) ) {
-		// Use display:inline-block to force Chrome/Safari to limit text mutations to this element.
-		// See #6062.
-		return writer.createContainerElement( 'span', { style: 'display:inline-block' } );
+		return writer.createContainerElement( 'span', { class: 'ck-table-bogus-paragraph' } );
 	} else {
 		return writer.createContainerElement( 'p' );
 	}
@@ -270,7 +269,7 @@ export function convertParagraphInTableCell( modelElement, conversionApi ) {
  *
  * The paragraph should be converted in the editing view to:
  *
- * * If returned `true` - to a `<span style="display:inline-block">`
+ * * If returned `true` - to a `<span class="ck-table-bogus-paragraph">`
  * * If returned `false` - to a `<p>`
  *
  * @param {module:engine/model/element~Element} modelElement

package/src/converters/table-caption-post-fixer.js

@@ -0,0 +1,69 @@
+/**
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/converters/table-caption-post-fixer
+ */
+
+/**
+ * Injects a table caption post-fixer into the model.
+ *
+ * The role of the table caption post-fixer is to ensure that the table with caption have the correct structure
+ * after a {@link module:engine/model/model~Model#change `change()`} block was executed.
+ *
+ * The correct structure means that:
+ *
+ * * If there are many caption model element, they are merged into one model.
+ * * A final, merged caption model is placed at the end of the table.
+ *
+ * @param {module:engine/model/model~Model} model
+ */
+export default function injectTableCaptionPostFixer( model ) {
+	model.document.registerPostFixer( writer => tableCaptionPostFixer( writer, model ) );
+}
+
+// The table caption post-fixer.
+//
+// @param {module:engine/model/writer~Writer} writer
+// @param {module:engine/model/model~Model} model
+function tableCaptionPostFixer( writer, model ) {
+	const changes = model.document.differ.getChanges();
+	let wasFixed = false;
+
+	for ( const entry of changes ) {
+		if ( entry.type != 'insert' ) {
+			continue;
+		}
+
+		const positionParent = entry.position.parent;
+
+		if ( positionParent.is( 'element', 'table' ) || entry.name == 'table' ) {
+			const table = entry.name == 'table' ? entry.position.nodeAfter : entry.position.parent;
+			const captionsToMerge = Array.from( table.getChildren() ).filter( child => child.is( 'element', 'caption' ) );
+			const firstCaption = captionsToMerge.shift();
+
+			if ( !firstCaption ) {
+				continue;
+			}
+
+			// Move all the contents of the captions to the first one.
+			for ( const caption of captionsToMerge ) {
+				writer.move( writer.createRangeIn( caption ), firstCaption, 'end' );
+				writer.remove( caption );
+			}
+
+			// Make sure the final caption is at the end of the table.
+			if ( firstCaption.nextSibling ) {
+				writer.move( writer.createRangeOn( firstCaption ), table, 'end' );
+				wasFixed = true;
+			}
+
+			// Do we merged captions and/or moved the single caption to the end of the table?
+			wasFixed = !!captionsToMerge.length || wasFixed;
+		}
+	}
+
+	return wasFixed;
+}

package/src/converters/table-cell-paragraph-post-fixer.js

@@ -70,7 +70,9 @@ function fixTable( table, writer ) {
 	let wasFixed = false;
 
 	for ( const row of table.getChildren() ) {
-		wasFixed = fixTableRow( row, writer ) || wasFixed;
+		if ( row.is( 'element', 'tableRow' ) ) {
+			wasFixed = fixTableRow( row, writer ) || wasFixed;
+		}
 	}
 
 	return wasFixed;

package/src/converters/table-layout-post-fixer.js

@@ -291,12 +291,13 @@ function fixTableCellsRowspan( table, writer ) {
 function fixTableRowsSizes( table, writer ) {
 	let wasFixed = false;
 
-	const rowsLengths = getRowsLengths( table );
+	const childrenLengths = getChildrenLengths( table );
 	const rowsToRemove = [];
 
 	// Find empty rows.
-	for ( const [ rowIndex, size ] of rowsLengths.entries() ) {
-		if ( !size ) {
+	for ( const [ rowIndex, size ] of childrenLengths.entries() ) {
+		// Ignore all non-row models.
+		if ( !size && table.getChild( rowIndex ).is( 'element', 'tableRow' ) ) {
 			rowsToRemove.push( rowIndex );
 		}
 	}
@@ -309,10 +310,13 @@ function fixTableRowsSizes( table, writer ) {
 
 		for ( const rowIndex of rowsToRemove.reverse() ) {
 			writer.remove( table.getChild( rowIndex ) );
-			rowsLengths.splice( rowIndex, 1 );
+			childrenLengths.splice( rowIndex, 1 );
 		}
 	}
 
+	// Filter out everything that's not a table row.
+	const rowsLengths = childrenLengths.filter( ( row, rowIndex ) => table.getChild( rowIndex ).is( 'element', 'tableRow' ) );
+
 	// Verify if all the rows have the same number of columns.
 	const tableSize = rowsLengths[ 0 ];
 	const isValid = rowsLengths.every( length => length === tableSize );
@@ -346,7 +350,8 @@ function fixTableRowsSizes( table, writer ) {
 // @returns {Array.<{{cell, rowspan}}>}
 function findCellsToTrim( table ) {
 	const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
-	const maxRows = table.childCount;
+	const maxRows = Array.from( table.getChildren() )
+		.reduce( ( count, row ) => row.is( 'element', 'tableRow' ) ? count + 1 : count, 0 );
 
 	const cellsToTrim = [];
 
@@ -376,12 +381,12 @@ function findCellsToTrim( table ) {
 //
 // @param {module:engine/model/element~Element} table
 // @returns {Array.<Number>}
-function getRowsLengths( table ) {
+function getChildrenLengths( table ) {
 	// TableWalker will not provide items for the empty rows, we need to pre-fill this array.
 	const lengths = new Array( table.childCount ).fill( 0 );
 
-	for ( const { row } of new TableWalker( table, { includeAllSlots: true } ) ) {
-		lengths[ row ]++;
+	for ( const { rowIndex } of new TableWalker( table, { includeAllSlots: true } ) ) {
+		lengths[ rowIndex ]++;
 	}
 
 	return lengths;

package/src/converters/tableproperties.js

@@ -11,21 +11,33 @@
  * Conversion helper for upcasting attributes using normalized styles.
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
- * @param {String} modelElement
- * @param {String} modelAttribute
- * @param {String} styleName
+ * @param {Object} options
+ * @param {String} options.modelAttribute The attribute to set.
+ * @param {String} options.styleName The style name to convert.
+ * @param {String} options.viewElement The view element name that should be converted.
+ * @param {String} options.defaultValue The default value for the specified `modelAttribute`.
+ * @param {Boolean} [options.reduceBoxSides=false]
  */
-export function upcastStyleToAttribute( conversion, modelElement, modelAttribute, styleName ) {
+export function upcastStyleToAttribute( conversion, options ) {
+	const { viewElement, defaultValue, modelAttribute, styleName, reduceBoxSides = false } = options;
+
 	conversion.for( 'upcast' ).attributeToAttribute( {
 		view: {
+			name: viewElement,
 			styles: {
 				[ styleName ]: /[\s\S]+/
 			}
 		},
 		model: {
-			name: modelElement,
 			key: modelAttribute,
-			value: viewElement => viewElement.getNormalizedStyle( styleName )
+			value: viewElement => {
+				const normalized = viewElement.getNormalizedStyle( styleName );
+				const value = reduceBoxSides ? reduceBoxSidesValue( normalized ) : normalized;
+
+				if ( defaultValue !== value ) {
+					return value;
+				}
+			}
 		}
 	} );
 }
@@ -35,8 +47,12 @@ export function upcastStyleToAttribute( conversion, modelElement, modelAttribute
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
  * @param {String} viewElementName
+ * @param {Object} defaultBorder The default border values.
+ * @param {String} defaultBorder.color The default `borderColor` value.
+ * @param {String} defaultBorder.style The default `borderStyle` value.
+ * @param {String} defaultBorder.width The default `borderWidth` value.
  */
-export function upcastBorderStyles( conversion, viewElementName ) {
+export function upcastBorderStyles( conversion, viewElementName, defaultBorder ) {
 	conversion.for( 'upcast' ).add( dispatcher => dispatcher.on( 'element:' + viewElementName, ( evt, data, conversionApi ) => {
 		// If the element was not converted by element-to-element converter,
 		// we should not try to convert the style. See #8393.
@@ -44,13 +60,21 @@ export function upcastBorderStyles( conversion, viewElementName ) {
 			return;
 		}
 
-		// 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.
+		// Check the most detailed properties. These will be always set directly or
+		// when using the "group" properties like: `border-(top|right|bottom|left)` or `border`.
 		const stylesToConsume = [
-			'border-top',
-			'border-right',
-			'border-bottom',
-			'border-left'
+			'border-top-width',
+			'border-top-color',
+			'border-top-style',
+			'border-bottom-width',
+			'border-bottom-color',
+			'border-bottom-style',
+			'border-right-width',
+			'border-right-color',
+			'border-right-style',
+			'border-left-width',
+			'border-left-color',
+			'border-left-style'
 		].filter( styleName => data.viewItem.hasStyle( styleName ) );
 
 		if ( !stylesToConsume.length ) {
@@ -70,9 +94,29 @@ export function upcastBorderStyles( conversion, viewElementName ) {
 
 		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 );
+		const normalizedBorder = {
+			style: data.viewItem.getNormalizedStyle( 'border-style' ),
+			color: data.viewItem.getNormalizedStyle( 'border-color' ),
+			width: data.viewItem.getNormalizedStyle( 'border-width' )
+		};
+
+		const reducedBorder = {
+			style: reduceBoxSidesValue( normalizedBorder.style ),
+			color: reduceBoxSidesValue( normalizedBorder.color ),
+			width: reduceBoxSidesValue( normalizedBorder.width )
+		};
+
+		if ( reducedBorder.style !== defaultBorder.style ) {
+			conversionApi.writer.setAttribute( 'borderStyle', reducedBorder.style, modelElement );
+		}
+
+		if ( reducedBorder.color !== defaultBorder.color ) {
+			conversionApi.writer.setAttribute( 'borderColor', reducedBorder.color, modelElement );
+		}
+
+		if ( reducedBorder.width !== defaultBorder.width ) {
+			conversionApi.writer.setAttribute( 'borderWidth', reducedBorder.width, modelElement );
+		}
 	} ) );
 }
 
@@ -80,11 +124,12 @@ export function upcastBorderStyles( conversion, viewElementName ) {
  * Conversion helper for downcasting an attribute to a style.
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
- * @param {String} modelElement
- * @param {String} modelAttribute
- * @param {String} styleName
+ * @param {Object} options
+ * @param {String} options.modelElement
+ * @param {String} options.modelAttribute
+ * @param {String} options.styleName
  */
-export function downcastAttributeToStyle( conversion, modelElement, modelAttribute, styleName ) {
+export function downcastAttributeToStyle( conversion, { modelElement, modelAttribute, styleName } ) {
 	conversion.for( 'downcast' ).attributeToAttribute( {
 		model: {
 			name: modelElement,
@@ -103,10 +148,11 @@ export function downcastAttributeToStyle( conversion, modelElement, modelAttribu
  * Conversion helper for downcasting attributes from the model table to a view table (not to `<figure>`).
  *
  * @param {module:engine/conversion/conversion~Conversion} conversion
- * @param {String} modelAttribute
- * @param {String} styleName
+ * @param {Object} options
+ * @param {String} options.modelAttribute
+ * @param {String} options.styleName
  */
-export function downcastTableAttribute( conversion, modelAttribute, 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;
@@ -124,3 +170,16 @@ export function downcastTableAttribute( conversion, modelAttribute, styleName )
 		}
 	} ) );
 }
+
+// Reduces the full top, right, bottom, left object to a single string if all sides are equal.
+function reduceBoxSidesValue( style ) {
+	if ( !style ) {
+		return;
+	}
+
+	const commonValue = [ 'top', 'right', 'bottom', 'left' ]
+		.map( side => style[ side ] )
+		.reduce( ( result, side ) => result == side ? result : null );
+
+	return commonValue || style;
+}