@ckeditor/ckeditor5-table 34.2.0 → 35.1.0

package/src/tablecolumnresize/tablecolumnresizeediting.js

@@ -7,16 +7,18 @@
  * @module table/tablecolumnresize/tablecolumnresizeediting
  */
 
-/* istanbul ignore file */
-
 import { throttle } from 'lodash-es';
 import { global, DomEmitterMixin } from 'ckeditor5/src/utils';
 import { Plugin } from 'ckeditor5/src/core';
 
 import MouseEventsObserver from '../../src/tablemouse/mouseeventsobserver';
 import TableEditing from '../tableediting';
+import TableUtils from '../tableutils';
 import TableWalker from '../tablewalker';
 
+import TableWidthResizeCommand from './tablewidthresizecommand';
+import TableColumnWidthsCommand from './tablecolumnwidthscommand';
+
 import {
 	upcastColgroupElement,
 	downcastTableColumnWidthsAttribute
@@ -24,20 +26,17 @@ import {
 
 import {
 	clamp,
-	fillArray,
+	createFilledArray,
 	sumArray,
-	getAffectedTables,
-	getColumnIndex,
-	getColumnWidthsInPixels,
+	getColumnEdgesIndexes,
+	getChangedResizedTables,
 	getColumnMinWidthAsPercentage,
 	getElementWidthInPixels,
 	getTableWidthInPixels,
-	getNumberOfColumn,
-	isTableRendered,
-	normalizeColumnWidthsAttribute,
+	normalizeColumnWidths,
 	toPrecision,
-	insertColumnResizerElements,
-	removeColumnResizerElements
+	ensureColumnResizerElement,
+	getDomCellOuterWidth
 } from './utils';
 
 import { COLUMN_MIN_WIDTH_IN_PIXELS } from './constants';
@@ -52,7 +51,7 @@ export default class TableColumnResizeEditing extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ TableEditing ];
+		return [ TableEditing, TableUtils ];
 	}
 
 	/**
@@ -77,13 +76,14 @@ export default class TableColumnResizeEditing extends Plugin {
 		this._isResizingActive = false;
 
 		/**
-		 * A flag indicating if the column resizing is allowed. It is not allowed if the editor is in read-only mode or the
-		 * `TableColumnResize` plugin is disabled.
+		 * A flag indicating if the column resizing is allowed. It is not allowed if the editor is in read-only
+		 * or comments-only mode or the `TableColumnResize` plugin is disabled.
 		 *
 		 * @private
+		 * @observable
 		 * @member {Boolean}
 		 */
-		this._isResizingAllowed = true;
+		this.set( '_isResizingAllowed', true );
 
 		/**
 		 * A temporary storage for the required data needed to correctly calculate the widths of the resized columns. This storage is
@@ -95,22 +95,27 @@ export default class TableColumnResizeEditing extends Plugin {
 		this._resizingData = null;
 
 		/**
-		 * Internal map to store reference between a cell and its columnIndex. This information is required in postfixer to properly
-		 * recognize if the cell was inserted or deleted.
+		 * DOM emitter.
 		 *
 		 * @private
-		 * @member {Map}
+		 * @member {DomEmitterMixin}
 		 */
-		this._columnIndexMap = new Map();
+		this._domEmitter = Object.create( DomEmitterMixin );
 
 		/**
-		 * Internal map to store reference between a cell and operation that was performed on it (insert/remove). This is required
-		 * in order to add/remove resizers based on operation performed (which is done on 'render').
+		 * A local reference to the {@link module:table/tableutils~TableUtils} plugin.
 		 *
 		 * @private
-		 * @member {Map}
+		 * @member {module:table/tableutils~TableUtils}
 		 */
-		this._cellsModified = new Map();
+		this._tableUtilsPlugin = editor.plugins.get( 'TableUtils' );
+
+		this.on( 'change:_isResizingAllowed', ( evt, name, value ) => {
+			// Toggling the `ck-column-resize_disabled` class shows and hides the resizers through CSS.
+			editor.editing.view.change( writer => {
+				writer[ value ? 'removeClass' : 'addClass' ]( 'ck-column-resize_disabled', editor.editing.view.document.getRoot() );
+			} );
+		} );
 	}
 
 	/**
@@ -118,362 +123,239 @@ export default class TableColumnResizeEditing extends Plugin {
 	 */
 	init() {
 		this._extendSchema();
-		this._setupConversion();
-		this._setupPostFixer();
-		this._setupColumnResizers();
+		this._registerPostFixer();
+		this._registerConverters();
+		this._registerResizingListeners();
 		this._registerColgroupFixer();
 		this._registerResizerInserter();
 
 		const editor = this.editor;
 		const columnResizePlugin = editor.plugins.get( 'TableColumnResize' );
 
+		editor.commands.add( 'resizeTableWidth', new TableWidthResizeCommand( editor ) );
+		editor.commands.add( 'resizeColumnWidths', new TableColumnWidthsCommand( editor ) );
+
+		const resizeTableWidthCommand = editor.commands.get( 'resizeTableWidth' );
+		const resizeColumnWidthsCommand = editor.commands.get( 'resizeColumnWidths' );
+
+		// Currently the states of column resize and table resize (which is actually the last column resize) features
+		// are bound together. They can be separated in the future by adding distinct listeners and applying
+		// different CSS classes (e.g. `ck-column-resize_disabled` and `ck-table-resize_disabled`) to the editor root.
+		// See #12148 for the details.
 		this.bind( '_isResizingAllowed' ).to(
 			editor, 'isReadOnly',
 			columnResizePlugin, 'isEnabled',
-			( isEditorReadOnly, isPluginEnabled ) => !isEditorReadOnly && isPluginEnabled
+			resizeTableWidthCommand, 'isEnabled',
+			resizeColumnWidthsCommand, 'isEnabled',
+			( isEditorReadOnly, isPluginEnabled, isResizeTableWidthCommandEnabled, isResizeColumnWidthsCommandEnabled ) =>
+				!isEditorReadOnly && isPluginEnabled && isResizeTableWidthCommandEnabled && isResizeColumnWidthsCommandEnabled
 		);
 	}
 
 	/**
-	 * Registers new attributes for a table and a table cell model elements.
-	 *
-	 * @private
+	 * @inheritDoc
 	 */
-	_extendSchema() {
-		const editor = this.editor;
-		const schema = editor.model.schema;
-
-		schema.extend( 'table', {
-			allowAttributes: [ 'tableWidth', 'columnWidths' ]
-		} );
+	destroy() {
+		this._domEmitter.stopListening();
+		super.destroy();
 	}
 
 	/**
-	 * Registers table column resizer converters.
+	 * Registers new attributes for a table model element.
 	 *
 	 * @private
 	 */
-	_setupConversion() {
-		const editor = this.editor;
-		const conversion = editor.conversion;
-
-		conversion.for( 'upcast' ).attributeToAttribute( {
-			view: {
-				name: 'figure',
-				key: 'style',
-				value: {
-					width: /[\s\S]+/
-				}
-			},
-			model: {
-				name: 'table',
-				key: 'tableWidth',
-				value: viewElement => viewElement.getStyle( 'width' )
-			}
-		} );
-
-		conversion.for( 'downcast' ).attributeToAttribute( {
-			model: {
-				name: 'table',
-				key: 'tableWidth'
-			},
-			view: width => ( {
-				name: 'figure',
-				key: 'style',
-				value: {
-					width
-				}
-			} )
+	_extendSchema() {
+		this.editor.model.schema.extend( 'table', {
+			allowAttributes: [ 'tableWidth', 'columnWidths' ]
 		} );
-
-		conversion.for( 'upcast' ).add( upcastColgroupElement( editor ) );
-		conversion.for( 'downcast' ).add( downcastTableColumnWidthsAttribute() );
 	}
 
 	/**
-	 * Registers table column resizer post-fixer.
+	 * Registers table column resize post-fixer.
 	 *
-	 * It checks if the change from the differ concerns a table-related element or an attribute. If yes, then it is responsible for the
-	 * following:
-	 * (1) Depending on whether the `enableResize` event is not prevented...
-	 *    (1.1) ...removing the `columnWidths` attribute from the table and all the cells from column index map, or
-	 *    (1.2) ...adding the `columnWidths` attribute to the table.
-	 * (2) Adjusting the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
-	 *    (2.1) Add all cells to column index map with its column index (to properly handle column insertion and deletion).
-	 * (3) Checking if columns have been added or removed...
-	 *    (3.1) ... in the middle of the table, or
-	 *    (3.2) ... at the table end.
-	 * (4) Checking if the inline cell width has been configured and transferring its value to the appropriate column, but currently only
-	 * for a cell that is not spanned horizontally.
+	 * It checks if the change from the differ concerns a table-related element or attribute. For detected changes it:
+	 *  * Adjusts the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
+	 *  * Checks if the `columnWidths` attribute gets updated accordingly after columns have been added or removed.
 	 *
 	 * @private
 	 */
-	_setupPostFixer() {
+	_registerPostFixer() {
 		const editor = this.editor;
-		const columnIndexMap = this._columnIndexMap;
-		const cellsModified = this._cellsModified;
-
-		editor.model.document.registerPostFixer( writer => {
-			const changes = editor.model.document.differ.getChanges();
+		const model = editor.model;
 
+		model.document.registerPostFixer( writer => {
 			let changed = false;
 
-			for ( const table of getAffectedTables( changes, editor.model ) ) {
-				// (1.1) Remove the `columnWidths` attribute from the table and all the cells from column index map if the
-				// manual width is not allowed for a given cell. There is no need to process the given table anymore.
-				if ( this.fire( 'disableResize', table ) ) {
-					if ( table.hasAttribute( 'columnWidths' ) ) {
-						writer.removeAttribute( 'columnWidths', table );
+			for ( const table of getChangedResizedTables( model ) ) {
+				// (1) Adjust the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
+				const columnWidths = normalizeColumnWidths( table.getAttribute( 'columnWidths' ).split( ',' ) );
 
-						for ( const { cell } of new TableWalker( table ) ) {
-							columnIndexMap.delete( cell );
-							cellsModified.set( cell, 'remove' );
-						}
+				// (2) If the number of columns has changed, then we need to adjust the widths of the affected columns.
+				adjustColumnWidths( columnWidths, table, this );
 
-						changed = true;
-					}
+				const columnWidthsAttribute = columnWidths.map( width => `${ width }%` ).join( ',' );
 
+				if ( table.getAttribute( 'columnWidths' ) === columnWidthsAttribute ) {
 					continue;
 				}
 
-				// (1.2) Add the `columnWidths` attribute to the table with the 'auto' special value for each column, what means that it is
-				// calculated proportionally to the whole table width.
-				const numberOfColumns = getNumberOfColumn( table, editor );
-
-				if ( !table.hasAttribute( 'columnWidths' ) ) {
-					const columnWidthsAttribute = fillArray( numberOfColumns, 'auto' ).join( ',' );
-
-					writer.setAttribute( 'columnWidths', columnWidthsAttribute, table );
-
-					changed = true;
-				}
-
-				// (2) Adjust the `columnWidths` attribute to guarantee that the sum of the widths from all columns is 100%.
-				const columnWidths = normalizeColumnWidthsAttribute( table.getAttribute( 'columnWidths' ) );
-
-				let removedColumnWidths = null;
-				let isColumnInsertionHandled = false;
-				let isColumnDeletionHandled = false;
-
-				for ( const { cell, cellWidth: cellColumnWidth, column } of new TableWalker( table ) ) {
-					// (2.1) Add all cells to column index map with its column index. Do not process the given cell anymore, because the
-					// `columnIndex` reference in the map is required to properly handle column insertion and deletion.
-					if ( !columnIndexMap.has( cell ) ) {
-						columnIndexMap.set( cell, column );
-						cellsModified.set( cell, 'insert' );
-
-						changed = true;
-
-						continue;
-					}
-
-					const previousColumn = columnIndexMap.get( cell );
-
-					const isColumnInsertion = previousColumn < column;
-					const isColumnDeletion = previousColumn > column;
-
-					// (3.1) Handle column insertion and update the `columnIndex` references in column index map for affected cells.
-					if ( isColumnInsertion ) {
-						if ( !isColumnInsertionHandled ) {
-							const columnMinWidthAsPercentage = getColumnMinWidthAsPercentage( table, editor );
-							const isColumnSwapped = columnIndexMap.get( cell.previousSibling ) === column;
-							const columnWidthsToInsert = isColumnSwapped ?
-								removedColumnWidths :
-								fillArray( column - previousColumn, columnMinWidthAsPercentage );
-
-							columnWidths.splice( previousColumn, 0, ...columnWidthsToInsert );
-
-							isColumnInsertionHandled = true;
-						}
-
-						columnIndexMap.set( cell, column );
-						cellsModified.set( cell, 'insert' );
-
-						changed = true;
-					}
-
-					// (3.1) Handle column deletion and update the `columnIndex` references in column index map for affected cells.
-					if ( isColumnDeletion ) {
-						if ( !isColumnDeletionHandled ) {
-							removedColumnWidths = columnWidths.splice( column, previousColumn - column );
-
-							const isColumnSwapped = cell.nextSibling && columnIndexMap.get( cell.nextSibling ) === column;
-
-							if ( !isColumnSwapped ) {
-								const columnToExpand = column > 0 ? column - 1 : column;
-
-								columnWidths[ columnToExpand ] += sumArray( removedColumnWidths );
-							}
-
-							isColumnDeletionHandled = true;
-						}
-
-						columnIndexMap.set( cell, column );
-						cellsModified.set( cell, 'insert' );
-
-						changed = true;
-					}
-
-					// (4) Check if the inline cell width has been configured and transfer its value to the appropriate column.
-					if ( cell.hasAttribute( 'width' ) ) {
-						// Currently, only the inline width from the cells that are not horizontally spanned are supported.
-						if ( cellColumnWidth !== 1 ) {
-							continue;
-						}
-
-						// It may happen that the table is not yet fully rendered in the editing view (i.e. it does not contain the
-						// `<colgroup>` yet), but the cell has an inline width set. In that case it is not possible to properly convert the
-						// inline cell width as a percentage value to the whole table width. Currently, we just ignore this case and
-						// initialize the table with all the default (equal) column widths.
-						if ( !isTableRendered( table, editor ) ) {
-							writer.removeAttribute( 'width', cell );
-
-							changed = true;
-
-							continue;
-						}
-
-						const tableWidthInPixels = getTableWidthInPixels( table, editor );
-						const columnWidthsInPixels = getColumnWidthsInPixels( table, editor );
-						const columnMinWidthAsPercentage = getColumnMinWidthAsPercentage( table, editor );
-
-						const cellWidth = parseFloat( cell.getAttribute( 'width' ) );
-
-						const isWidthInPixels = cell.getAttribute( 'width' ).endsWith( 'px' );
-						const isWidthAsPercentage = cell.getAttribute( 'width' ).endsWith( '%' );
-
-						// Currently, only inline width in pixels or as percentage is supported.
-						if ( !isWidthInPixels && !isWidthAsPercentage ) {
-							continue;
-						}
-
-						const isRightEdge = !cell.nextSibling;
-
-						if ( isRightEdge ) {
-							const rootWidthInPixels = getElementWidthInPixels( editor.editing.view.getDomRoot() );
-							const lastColumnIndex = numberOfColumns - 1;
-							const lastColumnWidthInPixels = columnWidthsInPixels[ lastColumnIndex ];
-
-							let tableWidthNew;
-
-							if ( isWidthInPixels ) {
-								const cellWidthLowerBound = COLUMN_MIN_WIDTH_IN_PIXELS;
-								const cellWidthUpperBound = rootWidthInPixels - ( tableWidthInPixels - lastColumnWidthInPixels );
-
-								columnWidthsInPixels[ lastColumnIndex ] = clamp( cellWidth, cellWidthLowerBound, cellWidthUpperBound );
-
-								tableWidthNew = sumArray( columnWidthsInPixels );
-
-								// Update all the column widths.
-								for ( let columnIndex = 0; columnIndex <= lastColumnIndex; columnIndex++ ) {
-									columnWidths[ columnIndex ] = toPrecision( columnWidthsInPixels[ columnIndex ] * 100 / tableWidthNew );
-								}
-							} else {
-								const cellWidthLowerBound = columnMinWidthAsPercentage;
-								const cellWidthUpperBound = 100 - ( tableWidthInPixels - lastColumnWidthInPixels ) * 100 /
-									rootWidthInPixels;
-
-								columnWidths[ lastColumnIndex ] = clamp( cellWidth, cellWidthLowerBound, cellWidthUpperBound );
+				writer.setAttribute( 'columnWidths', columnWidthsAttribute, table );
 
-								tableWidthNew = ( tableWidthInPixels - lastColumnWidthInPixels ) * 100 /
-									( 100 - columnWidths[ lastColumnIndex ] );
+				changed = true;
+			}
 
-								// Update all the column widths, except the last one, which has been already adjusted.
-								for ( let columnIndex = 0; columnIndex <= lastColumnIndex - 1; columnIndex++ ) {
-									columnWidths[ columnIndex ] = toPrecision( columnWidthsInPixels[ columnIndex ] * 100 / tableWidthNew );
-								}
-							}
+			return changed;
+		} );
 
-							writer.setAttribute( 'width', `${ toPrecision( tableWidthNew * 100 / rootWidthInPixels ) }%`, table );
-						} else {
-							const currentColumnWidth = columnWidthsInPixels[ column ];
-							const nextColumnWidth = columnWidthsInPixels[ column + 1 ];
-							const bothColumnWidth = currentColumnWidth + nextColumnWidth;
+		// Adjusts if necessary the `columnWidths` in case if the number of column has changed.
+		//
+		// @private
+		// @param {Array.<Number>} columnWidths Note: this array **may be modified** by the function.
+		// @param {module:engine/model/element~Element} table Table to be checked.
+		// @param {module:table/tablecolumnresize/tablecolumnresizeediting~TableColumnResizeEditing} plugin
+		function adjustColumnWidths( columnWidths, table, plugin ) {
+			const newTableColumnsCount = plugin._tableUtilsPlugin.getColumns( table );
+			const columnsCountDelta = newTableColumnsCount - columnWidths.length;
+
+			if ( columnsCountDelta === 0 ) {
+				return;
+			}
 
-							const cellMaxWidthAsPercentage = ( bothColumnWidth - COLUMN_MIN_WIDTH_IN_PIXELS ) * 100 / tableWidthInPixels;
+			// Collect all cells that are affected by the change.
+			const cellSet = getAffectedCells( plugin.editor.model.document.differ, table );
 
-							let cellWidthAsPercentage = isWidthInPixels ?
-								cellWidth * 100 / tableWidthInPixels :
-								cellWidth;
+			for ( const cell of cellSet ) {
+				const currentColumnsDelta = newTableColumnsCount - columnWidths.length;
 
-							cellWidthAsPercentage = clamp( cellWidthAsPercentage, columnMinWidthAsPercentage, cellMaxWidthAsPercentage );
+				if ( currentColumnsDelta === 0 ) {
+					continue;
+				}
 
-							const dxAsPercentage = cellWidthAsPercentage - columnWidths[ column ];
+				// If the column count in the table changed, adjust the widths of the affected columns.
+				const hasMoreColumns = currentColumnsDelta > 0;
+				const currentColumnIndex = plugin._tableUtilsPlugin.getCellLocation( cell ).column;
 
-							columnWidths[ column ] += dxAsPercentage;
-							columnWidths[ column + 1 ] -= dxAsPercentage;
-						}
+				if ( hasMoreColumns ) {
+					const columnMinWidthAsPercentage = getColumnMinWidthAsPercentage( table, plugin.editor );
+					const columnWidthsToInsert = createFilledArray( currentColumnsDelta, columnMinWidthAsPercentage );
 
-						writer.removeAttribute( 'width', cell );
+					columnWidths.splice( currentColumnIndex, 0, ...columnWidthsToInsert );
+				} else {
+					// Moves the widths of the removed columns to the preceding one.
+					// Other editors either reduce the width of the whole table or adjust the widths
+					// proportionally, so change of this behavior can be considered in the future.
+					const removedColumnWidths = columnWidths.splice( currentColumnIndex, Math.abs( currentColumnsDelta ) );
 
-						changed = true;
-					}
+					columnWidths[ currentColumnIndex ] += sumArray( removedColumnWidths );
 				}
+			}
+		}
 
-				const isColumnInsertionAtEnd = numberOfColumns > columnWidths.length;
-				const isColumnDeletionAtEnd = numberOfColumns < columnWidths.length;
-
-				// (3.2) Handle column insertion at table end.
-				if ( isColumnInsertionAtEnd ) {
-					const columnMinWidthAsPercentage = getColumnMinWidthAsPercentage( table, editor );
-					const numberOfInsertedColumns = numberOfColumns - columnWidths.length;
-					const insertedColumnWidths = fillArray( numberOfInsertedColumns, columnMinWidthAsPercentage );
-
-					columnWidths.splice( columnWidths.length, 0, ...insertedColumnWidths );
+		// Returns a set of cells that have been changed in a given table.
+		//
+		// @private
+		// @param {module:engine/model/differ~Differ} differ
+		// @param {module:engine/model/element~Element} table
+		// @returns {Set.<module:engine/model/element~Element>}
+		function getAffectedCells( differ, table ) {
+			const cellSet = new Set();
+
+			for ( const change of differ.getChanges() ) {
+				if (
+					change.type == 'insert' &&
+					change.position.nodeAfter &&
+					change.position.nodeAfter.name == 'tableCell' &&
+					change.position.nodeAfter.getAncestors().includes( table )
+				) {
+					cellSet.add( change.position.nodeAfter );
+				} else if ( change.type == 'remove' ) {
+					// If the first cell was removed, use the node after the change position instead.
+					const referenceNode = change.position.nodeBefore || change.position.nodeAfter;
+
+					if ( referenceNode.name == 'tableCell' && referenceNode.getAncestors().includes( table ) ) {
+						cellSet.add( referenceNode );
+					}
 				}
+			}
 
-				// (3.2) Handle column deletion at table end.
-				if ( isColumnDeletionAtEnd ) {
-					const removedColumnWidths = columnWidths.splice( numberOfColumns );
+			return cellSet;
+		}
+	}
 
-					columnWidths[ numberOfColumns - 1 ] += sumArray( removedColumnWidths );
+	/**
+	 * Registers table column resize converters.
+	 *
+	 * @private
+	 */
+	_registerConverters() {
+		const editor = this.editor;
+		const conversion = editor.conversion;
+		const widthStyleToTableWidthDefinition = {
+			view: {
+				name: 'figure',
+				key: 'style',
+				value: {
+					width: /[\s\S]+/
 				}
-
-				const columnWidthsAttribute = columnWidths.map( width => `${ width }%` ).join( ',' );
-
-				if ( table.getAttribute( 'columnWidths' ) === columnWidthsAttribute ) {
-					continue;
+			},
+			model: {
+				name: 'table',
+				key: 'tableWidth',
+				value: viewElement => viewElement.getStyle( 'width' )
+			}
+		};
+		const tableWidthToWidthStyleDefinition = {
+			model: {
+				name: 'table',
+				key: 'tableWidth'
+			},
+			view: width => ( {
+				name: 'figure',
+				key: 'style',
+				value: {
+					width
 				}
+			} )
+		};
 
-				writer.setAttribute( 'columnWidths', columnWidthsAttribute, table );
-
-				changed = true;
-			}
+		conversion.for( 'upcast' ).attributeToAttribute( widthStyleToTableWidthDefinition );
+		conversion.for( 'upcast' ).add( upcastColgroupElement( this._tableUtilsPlugin ) );
 
-			return changed;
-		} );
+		conversion.for( 'downcast' ).attributeToAttribute( tableWidthToWidthStyleDefinition );
+		conversion.for( 'downcast' ).add( downcastTableColumnWidthsAttribute() );
 	}
 
 	/**
-	 * Initializes column resizing feature by registering mouse event handlers for `mousedown`, `mouseup` and `mousemove` events.
+	 * Registers listeners to handle resizing process.
 	 *
 	 * @private
 	 */
-	_setupColumnResizers() {
-		const editor = this.editor;
-		const editingView = editor.editing.view;
+	_registerResizingListeners() {
+		const editingView = this.editor.editing.view;
 
 		editingView.addObserver( MouseEventsObserver );
 		editingView.document.on( 'mousedown', this._onMouseDownHandler.bind( this ), { priority: 'high' } );
 
-		const domEmitter = Object.create( DomEmitterMixin );
-
-		domEmitter.listenTo( global.window.document, 'mouseup', this._onMouseUpHandler.bind( this ) );
-		domEmitter.listenTo( global.window.document, 'mousemove', throttle( this._onMouseMoveHandler.bind( this ), 50 ) );
+		this._domEmitter.listenTo( global.window.document, 'mousemove', throttle( this._onMouseMoveHandler.bind( this ), 50 ) );
+		this._domEmitter.listenTo( global.window.document, 'mouseup', this._onMouseUpHandler.bind( this ) );
 	}
 
 	/**
-	 * Handles the `mousedown` event on column resizer element.
+	 * Handles the `mousedown` event on column resizer element:
+	 *  * calculates the initial column pixel widths,
+	 *  * inserts the `<colgroup>` element if it is not present in the `<table>`,
+	 *  * puts the necessary data in the temporary storage,
+	 *  * applies the attributes to the `<table>` view element.
 	 *
 	 * @private
-	 * @param {module:utils/eventinfo~EventInfo} eventInfo
-	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
+	 * @param {module:utils/eventinfo~EventInfo} eventInfo An object containing information about the fired event.
+	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData The data related to the DOM event.
 	 */
 	_onMouseDownHandler( eventInfo, domEventData ) {
-		const editor = this.editor;
-		const editingView = editor.editing.view;
+		const target = domEventData.target;
 
-		if ( !domEventData.target.hasClass( 'table-column-resizer' ) ) {
+		if ( !target.hasClass( 'ck-table-column-resizer' ) ) {
 			return;
 		}
 
@@ -484,101 +366,100 @@ export default class TableColumnResizeEditing extends Plugin {
 		domEventData.preventDefault();
 		eventInfo.stop();
 
-		this._isResizingActive = true;
-		this._resizingData = this._getResizingData( domEventData );
-
-		editingView.change( writer => {
-			writer.addClass( 'table-column-resizer__active', this._resizingData.elements.viewResizer );
-		} );
-	}
-
-	/**
-	 * Handles the `mouseup` event if previously the `mousedown` event was triggered from the column resizer element.
-	 *
-	 * @private
-	 * @param {module:utils/eventinfo~EventInfo} eventInfo
-	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
-	 */
-	_onMouseUpHandler() {
 		const editor = this.editor;
+		const modelTable = editor.editing.mapper.toModelElement( target.findAncestor( 'figure' ) );
+
+		// The column widths are calculated upon mousedown to allow lazy applying the `columnWidths` attribute on the table.
+		const columnWidthsInPx = _calculateDomColumnWidths( modelTable, this._tableUtilsPlugin, editor );
+		const viewTable = target.findAncestor( 'table' );
 		const editingView = editor.editing.view;
 
-		if ( !this._isResizingActive ) {
-			return;
+		// Insert colgroup for the table that is resized for the first time.
+		if ( ![ ...viewTable.getChildren() ].find( viewCol => viewCol.is( 'element', 'colgroup' ) ) ) {
+			editingView.change( viewWriter => {
+				_insertColgroupElement( viewWriter, columnWidthsInPx, viewTable );
+			} );
 		}
 
-		const {
-			modelTable,
-			viewColgroup,
-			viewFigure,
-			viewResizer
-		} = this._resizingData.elements;
-
-		const columnWidthsAttributeOld = modelTable.getAttribute( 'columnWidths' );
-		const columnWidthsAttributeNew = [ ...viewColgroup.getChildren() ]
-			.map( viewCol => viewCol.getStyle( 'width' ) )
-			.join( ',' );
-
-		const isColumnWidthsAttributeChanged = columnWidthsAttributeOld !== columnWidthsAttributeNew;
-
-		const tableWidthAttributeOld = modelTable.getAttribute( 'tableWidth' );
-		const tableWidthAttributeNew = viewFigure.getStyle( 'width' );
-
-		const isTableWidthAttributeChanged = tableWidthAttributeOld !== tableWidthAttributeNew;
-
-		if ( isColumnWidthsAttributeChanged || isTableWidthAttributeChanged ) {
-			if ( this._isResizingAllowed ) {
-				// Commit all changes to the model.
-				editor.model.change( writer => {
-					if ( isColumnWidthsAttributeChanged ) {
-						writer.setAttribute( 'columnWidths', columnWidthsAttributeNew, modelTable );
-					}
-
-					if ( isTableWidthAttributeChanged ) {
-						writer.setAttribute( 'tableWidth', `${ toPrecision( tableWidthAttributeNew ) }%`, modelTable );
-					}
-				} );
-			} else {
-				// In read-only mode revert all changes in the editing view. The model is not touched so it does not need to be restored.
-				editingView.change( writer => {
-					if ( isColumnWidthsAttributeChanged ) {
-						const columnWidths = columnWidthsAttributeOld.split( ',' );
+		this._isResizingActive = true;
+		this._resizingData = this._getResizingData( domEventData, columnWidthsInPx );
+
+		// At this point we change only the editor view - we don't want other users to see our changes yet,
+		// so we can't apply them in the model.
+		editingView.change( writer => _applyResizingAttributesToTable( writer, viewTable, this._resizingData ) );
+
+		// Calculates the DOM columns' widths. It is done by taking the width of the widest cell
+		// from each table column (we rely on the  {@link module:table/tablewalker~TableWalker}
+		// to determine which column the cell belongs to).
+		//
+		// @private
+		// @param {module:engine/model/element~Element} modelTable A table which columns should be measured.
+		// @param {module:table/tableutils~TableUtils} tableUtils The Table Utils plugin instance.
+		// @param {module:core/editor/editor~Editor} editor The editor instance.
+		// @returns {Array.<Number>} Columns' widths expressed in pixels (without unit).
+		function _calculateDomColumnWidths( modelTable, tableUtilsPlugin, editor ) {
+			const columnWidthsInPx = Array( tableUtilsPlugin.getColumns( modelTable ) );
+			const tableWalker = new TableWalker( modelTable );
+
+			for ( const cellSlot of tableWalker ) {
+				const viewCell = editor.editing.mapper.toViewElement( cellSlot.cell );
+				const domCell = editor.editing.view.domConverter.mapViewToDom( viewCell );
+				const domCellWidth = getDomCellOuterWidth( domCell );
+
+				if ( !columnWidthsInPx[ cellSlot.column ] || domCellWidth < columnWidthsInPx[ cellSlot.column ] ) {
+					columnWidthsInPx[ cellSlot.column ] = toPrecision( domCellWidth );
+				}
+			}
 
-						for ( const viewCol of viewColgroup.getChildren() ) {
-							writer.setStyle( 'width', columnWidths.shift(), viewCol );
-						}
-					}
+			return columnWidthsInPx;
+		}
 
-					if ( isTableWidthAttributeChanged ) {
-						if ( tableWidthAttributeOld ) {
-							writer.setStyle( 'width', tableWidthAttributeOld, viewFigure );
-						} else {
-							writer.removeStyle( 'width', viewFigure );
-						}
-					}
-				} );
+		// Creates a `<colgroup>` element with `<col>`s and inserts it into a given view table.
+		//
+		// @private
+		// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter A writer instance.
+		// @param {Array.<Number>} columnWidthsInPx Column widths.
+		// @param {module:engine/view/element~Element} viewTable A table view element.
+		function _insertColgroupElement( viewWriter, columnWidthsInPx, viewTable ) {
+			const colgroup = viewWriter.createContainerElement( 'colgroup' );
+
+			for ( let i = 0; i < columnWidthsInPx.length; i++ ) {
+				const viewColElement = viewWriter.createEmptyElement( 'col' );
+				const columnWidthInPc = `${ toPrecision( columnWidthsInPx[ i ] / sumArray( columnWidthsInPx ) * 100 ) }%`;
+
+				viewWriter.setStyle( 'width', columnWidthInPc, viewColElement );
+				viewWriter.insert( viewWriter.createPositionAt( colgroup, 'end' ), viewColElement );
 			}
-		}
 
-		editingView.change( writer => {
-			writer.removeClass( 'table-column-resizer__active', viewResizer );
-		} );
+			viewWriter.insert( viewWriter.createPositionAt( viewTable, 'start' ), colgroup );
+		}
 
-		this._isResizingActive = false;
-		this._resizingData = null;
+		// Applies the style and classes to the view table as the resizing begun.
+		//
+		// @private
+		// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter A writer instance.
+		// @param {module:engine/view/element~Element} viewTable A table containing the clicked resizer.
+		// @param {Object} resizingData Data related to the resizing.
+		function _applyResizingAttributesToTable( viewWriter, viewTable, resizingData ) {
+			const figureInitialPcWidth = resizingData.widths.viewFigureWidth / resizingData.widths.viewFigureParentWidth;
+
+			viewWriter.addClass( 'ck-table-resized', viewTable );
+			viewWriter.addClass( 'ck-table-column-resizer__active', resizingData.elements.viewResizer );
+			viewWriter.setStyle( 'width', `${ toPrecision( figureInitialPcWidth * 100 ) }%`, viewTable.findAncestor( 'figure' ) );
+		}
 	}
 
 	/**
-	 * Handles the `mousemove` event if previously the `mousedown` event was triggered from the column resizer element.
+	 * Handles the `mousemove` event.
+	 *  * If resizing process is not in progress, it does nothing.
+	 *  * If resizing is active but not allowed, it stops the resizing process instantly calling the `mousedown` event handler.
+	 *  * Otherwise it dynamically updates the widths of the resized columns.
 	 *
 	 * @private
-	 * @param {module:utils/eventinfo~EventInfo} eventInfo
-	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
+	 * @param {module:utils/eventinfo~EventInfo} eventInfo An object containing information about the fired event.
+	 * @param {Event} mouseEventData The native DOM event.
 	 */
-	_onMouseMoveHandler( eventInfo, domEventData ) {
-		const editor = this.editor;
-		const editingView = editor.editing.view;
-
+	_onMouseMoveHandler( eventInfo, mouseEventData ) {
 		if ( !this._isResizingActive ) {
 			return;
 		}
@@ -593,19 +474,19 @@ export default class TableColumnResizeEditing extends Plugin {
 			columnPosition,
 			flags: {
 				isRightEdge,
-				isLtrContent,
-				isTableCentered
+				isTableCentered,
+				isLtrContent
+			},
+			elements: {
+				viewFigure,
+				viewLeftColumn,
+				viewRightColumn
 			},
 			widths: {
 				viewFigureParentWidth,
 				tableWidth,
 				leftColumnWidth,
 				rightColumnWidth
-			},
-			elements: {
-				viewFigure,
-				viewLeftColumn,
-				viewRightColumn
 			}
 		} = this._resizingData;
 
@@ -621,7 +502,7 @@ export default class TableColumnResizeEditing extends Plugin {
 		const multiplier = ( isLtrContent ? 1 : -1 ) * ( isRightEdge && isTableCentered ? 2 : 1 );
 
 		const dx = clamp(
-			( domEventData.clientX - columnPosition ) * multiplier,
+			( mouseEventData.clientX - columnPosition ) * multiplier,
 			Math.min( dxLowerBound, 0 ),
 			Math.max( dxUpperBound, 0 )
 		);
@@ -630,7 +511,7 @@ export default class TableColumnResizeEditing extends Plugin {
 			return;
 		}
 
-		editingView.change( writer => {
+		this.editor.editing.view.change( writer => {
 			const leftColumnWidthAsPercentage = toPrecision( ( leftColumnWidth + dx ) * 100 / tableWidth );
 
 			writer.setStyle( 'width', `${ leftColumnWidthAsPercentage }%`, viewLeftColumn );
@@ -648,13 +529,110 @@ export default class TableColumnResizeEditing extends Plugin {
 	}
 
 	/**
-	 * Retrieves and returns required data needed to correctly calculate the widths of the resized columns.
+	 * Handles the `mouseup` event.
+	 *  * If resizing process is not in progress, it does nothing.
+	 *  * If resizing is active but not allowed, it cancels the resizing process restoring the original widths.
+	 *  * Otherwise it propagates the changes from view to the model by executing the adequate commands.
 	 *
 	 * @private
-	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
-	 * @returns {Object}
 	 */
-	_getResizingData( domEventData ) {
+	_onMouseUpHandler() {
+		if ( !this._isResizingActive ) {
+			return;
+		}
+
+		const {
+			viewResizer,
+			modelTable,
+			viewFigure,
+			viewColgroup
+		} = this._resizingData.elements;
+
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+
+		const columnWidthsAttributeOld = modelTable.getAttribute( 'columnWidths' );
+		const columnWidthsAttributeNew = [ ...viewColgroup.getChildren() ]
+			.map( viewCol => viewCol.getStyle( 'width' ) )
+			.join( ',' );
+
+		const isColumnWidthsAttributeChanged = columnWidthsAttributeOld !== columnWidthsAttributeNew;
+
+		const tableWidthAttributeOld = modelTable.getAttribute( 'tableWidth' );
+		const tableWidthAttributeNew = viewFigure.getStyle( 'width' );
+
+		const isTableWidthAttributeChanged = tableWidthAttributeOld !== tableWidthAttributeNew;
+
+		if ( isColumnWidthsAttributeChanged || isTableWidthAttributeChanged ) {
+			if ( this._isResizingAllowed ) {
+				// Commit all changes to the model.
+				if ( isTableWidthAttributeChanged ) {
+					editor.execute(
+						'resizeTableWidth',
+						{
+							table: modelTable,
+							tableWidth: `${ toPrecision( tableWidthAttributeNew ) }%`,
+							columnWidths: columnWidthsAttributeNew
+						}
+					);
+				} else {
+					editor.execute( 'resizeColumnWidths', { columnWidths: columnWidthsAttributeNew, table: modelTable } );
+				}
+			} else {
+				// In read-only mode revert all changes in the editing view. The model is not touched so it does not need to be restored.
+				// This case can occur if the read-only mode kicks in during the resizing process.
+				editingView.change( writer => {
+					// If table had resized columns before, restore the previous column widths.
+					// Otherwise clean up the view from the temporary column resizing markup.
+					if ( columnWidthsAttributeOld ) {
+						const columnWidths = columnWidthsAttributeOld.split( ',' );
+
+						for ( const viewCol of viewColgroup.getChildren() ) {
+							writer.setStyle( 'width', columnWidths.shift(), viewCol );
+						}
+					} else {
+						writer.remove( viewColgroup );
+					}
+
+					if ( isTableWidthAttributeChanged ) {
+						// If the whole table was already resized before, restore the previous table width.
+						// Otherwise clean up the view from the temporary table resizing markup.
+						if ( tableWidthAttributeOld ) {
+							writer.setStyle( 'width', tableWidthAttributeOld, viewFigure );
+						} else {
+							writer.removeStyle( 'width', viewFigure );
+						}
+					}
+
+					// If a table and its columns weren't resized before,
+					// prune the remaining common resizing markup.
+					if ( !columnWidthsAttributeOld && !tableWidthAttributeOld ) {
+						writer.removeClass(
+							'ck-table-resized',
+							[ ...viewFigure.getChildren() ].find( element => element.name === 'table' )
+						);
+					}
+				} );
+			}
+		}
+
+		editingView.change( writer => {
+			writer.removeClass( 'ck-table-column-resizer__active', viewResizer );
+		} );
+
+		this._isResizingActive = false;
+		this._resizingData = null;
+	}
+
+	/**
+	 * Retrieves and returns required data needed for the resizing process.
+	 *
+	 * @private
+	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData The data of the `mousedown` event.
+	 * @param {Array.<Number>} columnWidths The current widths of the columns.
+	 * @returns {Object} The data needed for the resizing process.
+	 */
+	_getResizingData( domEventData, columnWidths ) {
 		const editor = this.editor;
 
 		const columnPosition = domEventData.domEvent.clientX;
@@ -664,8 +642,8 @@ export default class TableColumnResizeEditing extends Plugin {
 		const modelLeftCell = editor.editing.mapper.toModelElement( viewLeftCell );
 		const modelTable = modelLeftCell.findAncestor( 'table' );
 
-		const leftColumnIndex = getColumnIndex( modelLeftCell, this._columnIndexMap ).rightEdge;
-		const lastColumnIndex = getNumberOfColumn( modelTable, editor ) - 1;
+		const leftColumnIndex = getColumnEdgesIndexes( modelLeftCell, this._tableUtilsPlugin ).rightEdge;
+		const lastColumnIndex = this._tableUtilsPlugin.getColumns( modelTable ) - 1;
 
 		const isRightEdge = leftColumnIndex === lastColumnIndex;
 		const isTableCentered = !modelTable.hasAttribute( 'tableAlignment' );
@@ -678,37 +656,38 @@ export default class TableColumnResizeEditing extends Plugin {
 		const viewRightColumn = isRightEdge ? undefined : viewColgroup.getChild( leftColumnIndex + 1 );
 
 		const viewFigureParentWidth = getElementWidthInPixels( editor.editing.view.domConverter.mapViewToDom( viewFigure.parent ) );
+		const viewFigureWidth = getElementWidthInPixels( editor.editing.view.domConverter.mapViewToDom( viewFigure ) );
 		const tableWidth = getTableWidthInPixels( modelTable, editor );
-		const columnWidths = getColumnWidthsInPixels( modelTable, editor );
 		const leftColumnWidth = columnWidths[ leftColumnIndex ];
 		const rightColumnWidth = isRightEdge ? undefined : columnWidths[ leftColumnIndex + 1 ];
 
 		return {
 			columnPosition,
+			flags: {
+				isRightEdge,
+				isTableCentered,
+				isLtrContent
+			},
 			elements: {
+				viewResizer,
 				modelTable,
 				viewFigure,
 				viewColgroup,
 				viewLeftColumn,
-				viewRightColumn,
-				viewResizer
+				viewRightColumn
 			},
 			widths: {
 				viewFigureParentWidth,
+				viewFigureWidth,
 				tableWidth,
 				leftColumnWidth,
 				rightColumnWidth
-			},
-			flags: {
-				isRightEdge,
-				isTableCentered,
-				isLtrContent
 			}
 		};
 	}
 
 	/**
-	 * Inserts colgroup if it is missing from table (e.g. after table insertion into table).
+	 * Inserts the `<colgroup>` element if it is missing in the view table (e.g. after table insertion into table).
 	 *
 	 * @private
 	 */
@@ -716,43 +695,38 @@ export default class TableColumnResizeEditing extends Plugin {
 		const editor = this.editor;
 
 		this.listenTo( editor.editing.view.document, 'layoutChanged', () => {
-			const table = editor.model.document.selection.getFirstPosition().findAncestor( 'table' );
-			const tableView = editor.editing.view.document.selection.getFirstPosition().getAncestors().reverse().find(
-				element => element.name === 'table'
+			const viewTable = editor.editing.view.document.selection.getFirstPosition().getAncestors().reverse().find(
+				viewElement => viewElement.name === 'table'
 			);
-			const tableViewContainsColgroup = tableView && [ ...tableView.getChildren() ].find(
+			const viewTableContainsColgroup = viewTable && [ ...viewTable.getChildren() ].find(
 				viewElement => viewElement.is( 'element', 'colgroup' )
 			);
+			const modelTable = editor.model.document.selection.getFirstPosition().findAncestor( 'table' );
 
-			if ( table && table.hasAttribute( 'columnWidths' ) && tableView && !tableViewContainsColgroup ) {
-				editor.editing.reconvertItem( table );
+			if ( modelTable && modelTable.hasAttribute( 'columnWidths' ) && viewTable && !viewTableContainsColgroup ) {
+				editor.editing.reconvertItem( modelTable );
 			}
 		}, { priority: 'low' } );
 	}
 
 	/**
-	 * Registers a handler on 'render' to properly insert/remove resizers after all postfixers finished their job.
+	 * Registers a listener ensuring that each resizable cell have a resizer handle.
 	 *
 	 * @private
 	 */
 	_registerResizerInserter() {
-		const editor = this.editor;
-		const view = editor.editing.view;
-		const cellsModified = this._cellsModified;
+		const view = this.editor.editing.view;
 
 		view.on( 'render', () => {
-			for ( const [ cell, operation ] of cellsModified.entries() ) {
-				const viewCell = editor.editing.mapper.toViewElement( cell );
+			for ( const item of view.createRangeIn( view.document.getRoot() ) ) {
+				if ( ![ 'td', 'th' ].includes( item.item.name ) ) {
+					continue;
+				}
 
 				view.change( viewWriter => {
-					if ( operation === 'insert' ) {
-						insertColumnResizerElements( viewWriter, viewCell );
-					} else if ( operation === 'remove' ) {
-						removeColumnResizerElements( viewWriter, viewCell );
-					}
+					ensureColumnResizerElement( viewWriter, item.item );
 				} );
 			}
-			cellsModified.clear();
 		}, { priority: 'lowest' } );
 	}
 }