@ckeditor/ckeditor5-table 35.0.1 → 35.2.0

package/src/tablecolumnresize/tablecolumnwidthscommand.js

@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tablecolumnresize/tablecolumnwidthscommand
+ */
+
+import TablePropertyCommand from '../tableproperties/commands/tablepropertycommand';
+
+/**
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableColumnWidthsCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableColumnWidthsCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
+	 */
+	constructor( editor, defaultValue ) {
+		super( editor, 'columnWidths', defaultValue );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		// The command is always enabled as it doesn't care about the actual selection - table can be resized
+		// even if the selection is elsewhere.
+		this.isEnabled = true;
+	}
+
+	/**
+	 * Changes the `columnWidths` attribute value for the given or currently selected table.
+	 *
+	 * @param {Object} options
+	 * @param {String} [options.columnWidths] New value of the `columnWidths` attribute.
+	 * @param {module:engine/model/element~Element} [options.table] The table that is having the columns resized.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const table = options.table || model.document.selection.getSelectedElement();
+		const { columnWidths } = options;
+
+		model.change( writer => {
+			if ( columnWidths ) {
+				writer.setAttribute( this.attributeName, columnWidths, table );
+			} else {
+				writer.removeAttribute( this.attributeName, table );
+			}
+		} );
+	}
+}

package/src/tablecolumnresize/tablewidthresizecommand.js

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module table/tablecolumnresize/tablewidthresizecommand
+ */
+
+import TablePropertyCommand from '../tableproperties/commands/tablepropertycommand';
+
+/**
+ * @extends module:table/tableproperties/commands/tablepropertycommand~TablePropertyCommand
+ */
+export default class TableWidthResizeCommand extends TablePropertyCommand {
+	/**
+	 * Creates a new `TableWidthResizeCommand` instance.
+	 *
+	 * @param {module:core/editor/editor~Editor} editor An editor in which this command will be used.
+	 * @param {String} defaultValue The default value of the attribute.
+	 */
+	constructor( editor, defaultValue ) {
+		// We create a custom command instead of using the existing `TableWidthCommand`
+		// as we also need to change the `columnWidths` property and running both commands
+		// separately would make the integration with Track Changes feature more troublesome.
+		super( editor, 'tableWidth', defaultValue );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	refresh() {
+		// The command is always enabled as it doesn't care about the actual selection - table can be resized
+		// even if the selection is elsewhere.
+		this.isEnabled = true;
+	}
+
+	/**
+	 * Changes the `tableWidth` and `columnWidths` attribute values for the given or currently selected table.
+	 *
+	 * @param {Object} options
+	 * @param {String} [options.tableWidth] The new table width.
+	 * @param {String} [options.columnWidths] The new table column widths.
+	 * @param {module:engine/model/element~Element} [options.table] The table that is affected by the resize.
+	 */
+	execute( options = {} ) {
+		const model = this.editor.model;
+		const table = options.table || model.document.selection.getSelectedElement();
+		const { tableWidth, columnWidths } = options;
+
+		model.change( writer => {
+			if ( tableWidth ) {
+				writer.setAttribute( this.attributeName, tableWidth, table );
+				writer.setAttribute( 'columnWidths', columnWidths, table );
+			} else {
+				writer.removeAttribute( this.attributeName, table );
+			}
+		} );
+	}
+}

package/src/tablecolumnresize/utils.js

@@ -7,8 +7,6 @@
  * @module table/tablecolumnresize/utils
  */
 
-/* istanbul ignore file */
-
 import { global } from 'ckeditor5/src/utils';
 import {
 	COLUMN_WIDTH_PRECISION,
@@ -17,16 +15,18 @@ import {
 } from './constants';
 
 /**
- * Collects all affected by the differ table model elements. The returned set may be empty.
+ * Returns all the inserted or changed table model elements in a given change set. Only the tables
+ * with 'columnsWidth' attribute are taken into account. The returned set may be empty.
+ *
+ * Most notably if an entire table is removed it will not be included in returned set.
  *
- * @param {Array.<module:engine/model/differ~DiffItem>} changes
- * @param {module:engine/model/model~Model} model
- * @returns {Set.<module:engine/model/element~Element>}
+ * @param {module:engine/model/model~Model} model The model to collect the affected elements from.
+ * @returns {Set.<module:engine/model/element~Element>} A set of table model elements.
  */
-export function getAffectedTables( changes, model ) {
-	const tablesToProcess = new Set();
+export function getChangedResizedTables( model ) {
+	const affectedTables = new Set();
 
-	for ( const change of changes ) {
+	for ( const change of model.document.differ.getChanges() ) {
 		let referencePosition = null;
 
 		// Checks if the particular change from the differ is:
@@ -34,13 +34,20 @@ export function getAffectedTables( changes, model ) {
 		// - an attribute change on a table, a row or a cell.
 		switch ( change.type ) {
 			case 'insert':
-			case 'remove':
 				referencePosition = [ 'table', 'tableRow', 'tableCell' ].includes( change.name ) ?
 					change.position :
 					null;
 
 				break;
 
+			case 'remove':
+				// If the whole table is removed, there's no need to update its column widths (#12201).
+				referencePosition = [ 'tableRow', 'tableCell' ].includes( change.name ) ?
+					change.position :
+					null;
+
+				break;
+
 			case 'attribute':
 				if ( change.range.start.nodeAfter ) {
 					referencePosition = [ 'table', 'tableRow', 'tableCell' ].includes( change.range.start.nodeAfter.name ) ?
@@ -51,102 +58,99 @@ export function getAffectedTables( changes, model ) {
 				break;
 		}
 
-		const affectedTables = [];
-
-		if ( referencePosition ) {
-			const tableNode = ( referencePosition.nodeAfter && referencePosition.nodeAfter.name === 'table' ) ?
-				referencePosition.nodeAfter : referencePosition.findAncestor( 'table' );
-
-			if ( tableNode ) {
-				const range = model.createRangeOn( tableNode );
-
-				for ( const node of range.getItems() ) {
-					if ( node.is( 'element' ) && node.name === 'table' ) {
-						affectedTables.push( node );
-					}
-				}
-			}
+		if ( !referencePosition ) {
+			continue;
 		}
 
-		const table = affectedTables;
+		const tableNode = ( referencePosition.nodeAfter && referencePosition.nodeAfter.name === 'table' ) ?
+			referencePosition.nodeAfter : referencePosition.findAncestor( 'table' );
 
-		if ( table ) {
-			for ( const tableItem of table ) {
-				tablesToProcess.add( tableItem );
+		// We iterate over the whole table looking for the nested tables that are also affected.
+		for ( const node of model.createRangeOn( tableNode ).getItems() ) {
+			if ( node.is( 'element' ) && node.name === 'table' && node.hasAttribute( 'columnWidths' ) ) {
+				affectedTables.add( node );
 			}
 		}
 	}
 
-	return tablesToProcess;
+	return affectedTables;
 }
 
 /**
- * Returns the computed width (in pixels) of the DOM element.
+ * Calculates the percentage of the minimum column width given in pixels for a given table.
  *
- * @param {HTMLElement} domElement
- * @returns {Number}
+ * @param {module:engine/model/element~Element} modelTable A table model element.
+ * @param {module:core/editor/editor~Editor} editor The editor instance.
+ * @returns {Number} The minimal column width in percentage.
  */
-export function getElementWidthInPixels( domElement ) {
-	return parseFloat( global.window.getComputedStyle( domElement ).width );
+export function getColumnMinWidthAsPercentage( modelTable, editor ) {
+	return COLUMN_MIN_WIDTH_IN_PIXELS * 100 / getTableWidthInPixels( modelTable, editor );
 }
 
 /**
  * Calculates the table width in pixels.
  *
- * @param {module:engine/model/element~Element} table
- * @param {module:core/editor/editor~Editor} editor
- * @returns {Number}
+ * @param {module:engine/model/element~Element} modelTable A table model element.
+ * @param {module:core/editor/editor~Editor} editor The editor instance.
+ * @returns {Number} The width of the table in pixels.
  */
-export function getTableWidthInPixels( table, editor ) {
-	const viewTbody = getTbodyViewElement( table, editor );
-	const domTbody = editor.editing.view.domConverter.mapViewToDom( viewTbody );
+export function getTableWidthInPixels( modelTable, editor ) {
+	// It is possible for a table to not have a <tbody> element - see #11878.
+	const referenceElement = getChildrenViewElement( modelTable, 'tbody', editor ) || getChildrenViewElement( modelTable, 'thead', editor );
+	const domReferenceElement = editor.editing.view.domConverter.mapViewToDom( referenceElement );
 
-	return getElementWidthInPixels( domTbody );
+	return getElementWidthInPixels( domReferenceElement );
 }
 
-/**
- * Calculates the column widths in pixels basing on the `columnWidths` table attribute:
- * - If the value for a given column is provided in pixels then it is just converted to a number and returned.
- * - Otherwise, it is assumed that unit is percentage and the column width is calculated proportionally to the whole table width.
- *
- * @param {module:engine/model/element~Element} table
- * @param {module:core/editor/editor~Editor} editor
- * @returns {Array.<Number>}
- */
-export function getColumnWidthsInPixels( table, editor ) {
-	const tableWidthInPixels = getTableWidthInPixels( table, editor );
-
-	return table.getAttribute( 'columnWidths' )
-		.split( ',' )
-		.map( columnWidth => columnWidth.trim() )
-		.map( columnWidth => {
-			return columnWidth.endsWith( 'px' ) ?
-				parseFloat( columnWidth ) :
-				parseFloat( columnWidth ) * tableWidthInPixels / 100;
-		} );
+// Returns the a view element with a given name that is nested directly in a `<table>` element
+// related to a given `modelTable`.
+//
+// @private
+// @param {module:engine/model/element~Element} table
+// @param {module:core/editor/editor~Editor} editor
+// @param {String} elementName Name of a view to be looked for, e.g. `'colgroup`', `'thead`'.
+// @returns {module:engine/view/element~Element|undefined} Matched view or `undefined` otherwise.
+function getChildrenViewElement( modelTable, elementName, editor ) {
+	const viewFigure = editor.editing.mapper.toViewElement( modelTable );
+	const viewTable = [ ...viewFigure.getChildren() ].find( viewChild => viewChild.is( 'element', 'table' ) );
+
+	return [ ...viewTable.getChildren() ].find( viewChild => viewChild.is( 'element', elementName ) );
 }
 
 /**
- * Calculates the percentage of the minimum column width given in pixels for a given table.
+ * Returns the computed width (in pixels) of the DOM element without padding and borders.
  *
- * @param {module:engine/model/element~Element} table
- * @param {module:core/editor/editor~Editor} editor
- * @returns {Number}
+ * @param {HTMLElement} domElement A DOM element.
+ * @returns {Number} The width of the DOM element in pixels.
  */
-export function getColumnMinWidthAsPercentage( table, editor ) {
-	const tableWidthInPixels = getTableWidthInPixels( table, editor );
-
-	return COLUMN_MIN_WIDTH_IN_PIXELS * 100 / tableWidthInPixels;
+export function getElementWidthInPixels( domElement ) {
+	const styles = global.window.getComputedStyle( domElement );
+
+	// In the 'border-box' box sizing algorithm, the element's width
+	// already includes the padding and border width (#12335).
+	if ( styles.boxSizing === 'border-box' ) {
+		return parseFloat( styles.width ) -
+			parseFloat( styles.paddingLeft ) -
+			parseFloat( styles.paddingRight ) -
+			parseFloat( styles.borderLeftWidth ) -
+			parseFloat( styles.borderRightWidth );
+	} else {
+		return parseFloat( styles.width );
+	}
 }
 
 /**
- * Returns the column indexes on the left and right edges of a cell.
+ * Returns the column indexes on the left and right edges of a cell. They differ if the cell spans
+ * across multiple columns.
  *
- * @param {module:engine/model/element~Element} cell
- * @returns {Object}
+ * @param {module:engine/model/element~Element} cell A table cell model element.
+ * @param {module:table/tableutils~TableUtils} tableUtils The Table Utils plugin instance.
+ * @returns {Object} An object containing the indexes of the left and right edges of the cell.
+ * @returns {Number} return.leftEdge The index of the left edge of the cell.
+ * @returns {Number} return.rightEdge The index of the right edge of the cell.
  */
-export function getColumnIndex( cell, columnIndexMap ) {
-	const cellColumnIndex = columnIndexMap.get( cell );
+export function getColumnEdgesIndexes( cell, tableUtils ) {
+	const cellColumnIndex = tableUtils.getCellLocation( cell ).column;
 	const cellWidth = cell.getAttribute( 'colspan' ) || 1;
 
 	return {
@@ -155,59 +159,11 @@ export function getColumnIndex( cell, columnIndexMap ) {
 	};
 }
 
-/**
- * Returns the total number of columns in a table.
- *
- * @param {module:engine/model/element~Element} table
- * @param {module:core/editor/editor~Editor} editor
- * @returns {Number}
- */
-export function getNumberOfColumn( table, editor ) {
-	return editor.plugins.get( 'TableUtils' ).getColumns( table );
-}
-
-/**
- * Checks if the table is already fully rendered, with the `<colgroup>` element that defines the widths for each column.
- *
- * @param {module:engine/model/element~Element} table
- * @param {module:core/editor/editor~Editor} editor
- * @returns {Number}
- */
-export function isTableRendered( table, editor ) {
-	return !!getColgroupViewElement( table, editor );
-}
-
-// Returns the `<colgroup>` view element, if it exists in a table. Returns `undefined` otherwise.
-//
-// @private
-// @param {module:engine/model/element~Element} table
-// @param {module:core/editor/editor~Editor} editor
-// @returns {module:engine/view/element~Element|undefined}
-function getColgroupViewElement( table, editor ) {
-	const viewFigure = editor.editing.mapper.toViewElement( table );
-	const viewTable = [ ...viewFigure.getChildren() ].find( viewChild => viewChild.is( 'element', 'table' ) );
-
-	return [ ...viewTable.getChildren() ].find( viewChild => viewChild.is( 'element', 'colgroup' ) );
-}
-
-// Returns the `<tbody>` view element, if it exists in a table. Returns `undefined` otherwise.
-//
-// @private
-// @param {module:engine/model/element~Element} table
-// @param {module:core/editor/editor~Editor} editor
-// @returns {module:engine/view/element~Element|undefined}
-function getTbodyViewElement( table, editor ) {
-	const viewFigure = editor.editing.mapper.toViewElement( table );
-	const viewTable = [ ...viewFigure.getChildren() ].find( viewChild => viewChild.is( 'element', 'table' ) );
-
-	return [ ...viewTable.getChildren() ].find( viewChild => viewChild.is( 'element', 'tbody' ) );
-}
-
 /**
  * Rounds the provided value to a fixed-point number with defined number of digits after the decimal point.
  *
- * @param {Number|String} value
- * @returns {Number}
+ * @param {Number|String} value A number to be rounded.
+ * @returns {Number} The rounded number.
  */
 export function toPrecision( value ) {
 	const multiplier = Math.pow( 10, COLUMN_WIDTH_PRECISION );
@@ -220,10 +176,10 @@ export function toPrecision( value ) {
  * Clamps the number within the inclusive lower (min) and upper (max) bounds. Returned number is rounded using the
  * {@link ~toPrecision `toPrecision()`} function.
  *
- * @param {Number} number
- * @param {Number} min
- * @param {Number} max
- * @returns {Number}
+ * @param {Number} number A number to be clamped.
+ * @param {Number} min A lower bound.
+ * @param {Number} max An upper bound.
+ * @returns {Number} The clamped number.
  */
 export function clamp( number, min, max ) {
 	if ( number <= min ) {
@@ -240,19 +196,19 @@ export function clamp( number, min, max ) {
 /**
  * Creates an array with defined length and fills all elements with defined value.
  *
- * @param {Number} length
- * @param {*} value
- * @returns {Array.<*>}
+ * @param {Number} length The length of the array.
+ * @param {*} value The value to fill the array with.
+ * @returns {Array.<*>} An array with defined length and filled with defined value.
  */
-export function fillArray( length, value ) {
+export function createFilledArray( length, value ) {
 	return Array( length ).fill( value );
 }
 
 /**
  * Sums all array values that can be parsed to a float.
  *
- * @param {Array.<Number>} array
- * @returns {Number}
+ * @param {Array.<Number>} array An array of numbers.
+ * @returns {Number} The sum of all array values.
  */
 export function sumArray( array ) {
 	return array
@@ -263,15 +219,16 @@ export function sumArray( array ) {
 
 /**
  * Makes sure that the sum of the widths from all columns is 100%. If the sum of all the widths is not equal 100%, all the widths are
- * changed proportionally so that they all sum back to 100%.
+ * changed proportionally so that they all sum back to 100%. If there are columns without specified width, the amount remaining
+ * after assigning the known widths will be distributed equally between them.
  *
  * Currently, only widths provided as percentage values are supported.
  *
- * @param {String} columnWidthsAttribute
- * @returns {Array.<Number>}
+ * @param {Array.<Number>} columnWidths An array of column widths.
+ * @returns {Array.<Number>} An array of column widths guaranteed to sum up to 100%.
  */
-export function normalizeColumnWidthsAttribute( columnWidthsAttribute ) {
-	const columnWidths = prepareColumnWidths( columnWidthsAttribute );
+export function normalizeColumnWidths( columnWidths ) {
+	columnWidths = calculateMissingColumnWidths( columnWidths );
 	const totalWidth = sumArray( columnWidths );
 
 	if ( totalWidth === 100 ) {
@@ -301,16 +258,12 @@ export function normalizeColumnWidthsAttribute( columnWidthsAttribute ) {
 // - If there is enough free space in the table for all uninitialized columns to have at least the minimum allowed width for all of them,
 //   then set this width equally for all uninitialized columns.
 // - Otherwise, just set the minimum allowed width for all uninitialized columns. The sum of all column widths will be greater than 100%,
-//   but then it will be adjusted proportionally to 100% in {@link #normalizeColumnWidthsAttribute `normalizeColumnWidthsAttribute()`}.
+//   but then it will be adjusted proportionally to 100% in {@link #normalizeColumnWidths `normalizeColumnWidths()`}.
 //
 // @private
-// @param {String} columnWidthsAttribute
-// @returns {Array.<Number>}
-function prepareColumnWidths( columnWidthsAttribute ) {
-	const columnWidths = columnWidthsAttribute
-		.split( ',' )
-		.map( columnWidth => columnWidth.trim() );
-
+// @param {Array.<Number>} columnWidths An array of column widths.
+// @returns {Array.<Number>} An array with 'auto' values replaced with calculated widths.
+function calculateMissingColumnWidths( columnWidths ) {
 	const numberOfUninitializedColumns = columnWidths.filter( columnWidth => columnWidth === 'auto' ).length;
 
 	if ( numberOfUninitializedColumns === 0 ) {
@@ -329,20 +282,22 @@ function prepareColumnWidths( columnWidthsAttribute ) {
 		.map( columnWidth => toPrecision( columnWidth ) );
 }
 
-// Inserts column resizer element into a view cell.
-//
-// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
-// @param {module:engine/view/element~Element} viewCell View cell.
-export function insertColumnResizerElements( viewWriter, viewCell ) {
+/**
+ * Inserts column resizer element into a view cell if it is missing.
+ *
+ * @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
+ * @param {module:engine/view/element~Element} viewCell View cell where resizer should be put.
+ */
+export function ensureColumnResizerElement( viewWriter, viewCell ) {
 	let viewTableColumnResizerElement = [ ...viewCell.getChildren() ]
-		.find( viewElement => viewElement.hasClass( 'table-column-resizer' ) );
+		.find( viewElement => viewElement.hasClass( 'ck-table-column-resizer' ) );
 
 	if ( viewTableColumnResizerElement ) {
 		return;
 	}
 
 	viewTableColumnResizerElement = viewWriter.createUIElement( 'div', {
-		class: 'table-column-resizer'
+		class: 'ck-table-column-resizer'
 	} );
 
 	viewWriter.insert(
@@ -351,17 +306,26 @@ export function insertColumnResizerElements( viewWriter, viewCell ) {
 	);
 }
 
-// Removes column resizer element from a view cell.
-//
-// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter View writer instance.
-// @param {module:engine/view/element~Element} viewCell View cell.
-export function removeColumnResizerElements( viewWriter, viewCell ) {
-	const viewTableColumnResizerElement = [ ...viewCell.getChildren() ]
-		.find( viewElement => viewElement.hasClass( 'table-column-resizer' ) );
-
-	if ( !viewTableColumnResizerElement ) {
-		return;
+/**
+ * Calculates the total horizontal space taken by the cell. That includes:
+ *  * width,
+ *  * left and red padding,
+ *  * border width.
+ *
+ * @param {HTMLElement}  domCell A DOM cell element.
+ * @returns {Number} Width in pixels without `px` at the end.
+ */
+export function getDomCellOuterWidth( domCell ) {
+	const styles = global.window.getComputedStyle( domCell );
+
+	// In the 'border-box' box sizing algorithm, the element's width
+	// already includes the padding and border width (#12335).
+	if ( styles.boxSizing === 'border-box' ) {
+		return parseInt( styles.width );
+	} else {
+		return parseFloat( styles.width ) +
+			parseFloat( styles.paddingLeft ) +
+			parseFloat( styles.paddingRight ) +
+			parseFloat( styles.borderWidth );
 	}
-
-	viewWriter.remove( viewTableColumnResizerElement );
 }

package/src/tablecolumnresize.js

@@ -9,13 +9,14 @@
 
 import { Plugin } from 'ckeditor5/src/core';
 import TableColumnResizeEditing from './tablecolumnresize/tablecolumnresizeediting';
+import TableCellWidthEditing from './tablecellwidth/tablecellwidthediting';
 
 import '../theme/tablecolumnresize.css';
 
 /**
- * The table column resizer feature.
+ * The table column resize feature.
  *
- * It provides the possibility to set the width of each column in a table using a resize handle.
+ * It provides the possibility to set the width of each column in a table using a resize handler.
  *
  * @extends module:core/plugin~Plugin
  */
@@ -24,7 +25,7 @@ export default class TableColumnResize extends Plugin {
 	 * @inheritDoc
  	 */
 	static get requires() {
-		return [ TableColumnResizeEditing ];
+		return [ TableColumnResizeEditing, TableCellWidthEditing ];
 	}
 
 	/**

package/src/tableproperties/ui/tablepropertiesview.js

@@ -360,8 +360,10 @@ export default class TablePropertiesView extends View {
 		[
 			this.borderStyleDropdown,
 			this.borderColorInput,
+			this.borderColorInput.fieldView.dropdownView.buttonView,
 			this.borderWidthInput,
 			this.backgroundInput,
+			this.backgroundInput.fieldView.dropdownView.buttonView,
 			this.widthInput,
 			this.heightInput,
 			this.alignmentToolbar,

package/src/tableui.js

@@ -73,12 +73,6 @@ export default class TableUI extends Plugin {
 
 				insertTableView.delegate( 'execute' ).to( dropdownView );
 
-				dropdownView.buttonView.on( 'open', () => {
-					// Reset the chooser before showing it to the user.
-					insertTableView.rows = 0;
-					insertTableView.columns = 0;
-				} );
-
 				dropdownView.on( 'execute', () => {
 					editor.execute( 'insertTable', { rows: insertTableView.rows, columns: insertTableView.columns } );
 					editor.editing.view.focus();