@ckeditor/ckeditor5-table 33.0.0 → 34.2.0

package/src/tablecolumnresize/utils.js

@@ -0,0 +1,367 @@
+/**
+ * @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/utils
+ */
+
+/* istanbul ignore file */
+
+import { global } from 'ckeditor5/src/utils';
+import {
+	COLUMN_WIDTH_PRECISION,
+	COLUMN_MIN_WIDTH_AS_PERCENTAGE,
+	COLUMN_MIN_WIDTH_IN_PIXELS
+} from './constants';
+
+/**
+ * Collects all affected by the differ table model elements. The returned set may be empty.
+ *
+ * @param {Array.<module:engine/model/differ~DiffItem>} changes
+ * @param {module:engine/model/model~Model} model
+ * @returns {Set.<module:engine/model/element~Element>}
+ */
+export function getAffectedTables( changes, model ) {
+	const tablesToProcess = new Set();
+
+	for ( const change of changes ) {
+		let referencePosition = null;
+
+		// Checks if the particular change from the differ is:
+		// - an insertion or removal of a table, a row or a cell,
+		// - 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 'attribute':
+				if ( change.range.start.nodeAfter ) {
+					referencePosition = [ 'table', 'tableRow', 'tableCell' ].includes( change.range.start.nodeAfter.name ) ?
+						change.range.start :
+						null;
+				}
+
+				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 );
+					}
+				}
+			}
+		}
+
+		const table = affectedTables;
+
+		if ( table ) {
+			for ( const tableItem of table ) {
+				tablesToProcess.add( tableItem );
+			}
+		}
+	}
+
+	return tablesToProcess;
+}
+
+/**
+ * Returns the computed width (in pixels) of the DOM element.
+ *
+ * @param {HTMLElement} domElement
+ * @returns {Number}
+ */
+export function getElementWidthInPixels( domElement ) {
+	return parseFloat( global.window.getComputedStyle( domElement ).width );
+}
+
+/**
+ * Calculates the table width in pixels.
+ *
+ * @param {module:engine/model/element~Element} table
+ * @param {module:core/editor/editor~Editor} editor
+ * @returns {Number}
+ */
+export function getTableWidthInPixels( table, editor ) {
+	const viewTbody = getTbodyViewElement( table, editor );
+	const domTbody = editor.editing.view.domConverter.mapViewToDom( viewTbody );
+
+	return getElementWidthInPixels( domTbody );
+}
+
+/**
+ * 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;
+		} );
+}
+
+/**
+ * Calculates the percentage of the minimum column width given in pixels for a given table.
+ *
+ * @param {module:engine/model/element~Element} table
+ * @param {module:core/editor/editor~Editor} editor
+ * @returns {Number}
+ */
+export function getColumnMinWidthAsPercentage( table, editor ) {
+	const tableWidthInPixels = getTableWidthInPixels( table, editor );
+
+	return COLUMN_MIN_WIDTH_IN_PIXELS * 100 / tableWidthInPixels;
+}
+
+/**
+ * Returns the column indexes on the left and right edges of a cell.
+ *
+ * @param {module:engine/model/element~Element} cell
+ * @returns {Object}
+ */
+export function getColumnIndex( cell, columnIndexMap ) {
+	const cellColumnIndex = columnIndexMap.get( cell );
+	const cellWidth = cell.getAttribute( 'colspan' ) || 1;
+
+	return {
+		leftEdge: cellColumnIndex,
+		rightEdge: cellColumnIndex + cellWidth - 1
+	};
+}
+
+/**
+ * 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}
+ */
+export function toPrecision( value ) {
+	const multiplier = Math.pow( 10, COLUMN_WIDTH_PRECISION );
+	const number = parseFloat( value );
+
+	return Math.round( number * multiplier ) / multiplier;
+}
+
+/**
+ * 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}
+ */
+export function clamp( number, min, max ) {
+	if ( number <= min ) {
+		return toPrecision( min );
+	}
+
+	if ( number >= max ) {
+		return toPrecision( max );
+	}
+
+	return toPrecision( number );
+}
+
+/**
+ * Creates an array with defined length and fills all elements with defined value.
+ *
+ * @param {Number} length
+ * @param {*} value
+ * @returns {Array.<*>}
+ */
+export function fillArray( length, value ) {
+	return Array( length ).fill( value );
+}
+
+/**
+ * Sums all array values that can be parsed to a float.
+ *
+ * @param {Array.<Number>} array
+ * @returns {Number}
+ */
+export function sumArray( array ) {
+	return array
+		.map( value => parseFloat( value ) )
+		.filter( value => !Number.isNaN( value ) )
+		.reduce( ( result, item ) => result + item, 0 );
+}
+
+/**
+ * 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%.
+ *
+ * Currently, only widths provided as percentage values are supported.
+ *
+ * @param {String} columnWidthsAttribute
+ * @returns {Array.<Number>}
+ */
+export function normalizeColumnWidthsAttribute( columnWidthsAttribute ) {
+	const columnWidths = prepareColumnWidths( columnWidthsAttribute );
+	const totalWidth = sumArray( columnWidths );
+
+	if ( totalWidth === 100 ) {
+		return columnWidths;
+	}
+
+	return columnWidths
+		// Adjust all the columns proportionally.
+		.map( columnWidth => toPrecision( columnWidth * 100 / totalWidth ) )
+		// Due to rounding of numbers it may happen that the sum of the widths of all columns will not be exactly 100%. Therefore, the width
+		// of the last column is explicitly adjusted (narrowed or expanded), since all the columns have been proportionally changed already.
+		.map( ( columnWidth, columnIndex, columnWidths ) => {
+			const isLastColumn = columnIndex === columnWidths.length - 1;
+
+			if ( !isLastColumn ) {
+				return columnWidth;
+			}
+
+			const totalWidth = sumArray( columnWidths );
+
+			return toPrecision( columnWidth + 100 - totalWidth );
+		} );
+}
+
+// Initializes the column widths by parsing the attribute value and calculating the uninitialized column widths. The special value 'auto'
+// indicates that width for the column must be calculated. The width of such uninitialized column is calculated as follows:
+// - 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()`}.
+//
+// @private
+// @param {String} columnWidthsAttribute
+// @returns {Array.<Number>}
+function prepareColumnWidths( columnWidthsAttribute ) {
+	const columnWidths = columnWidthsAttribute
+		.split( ',' )
+		.map( columnWidth => columnWidth.trim() );
+
+	const numberOfUninitializedColumns = columnWidths.filter( columnWidth => columnWidth === 'auto' ).length;
+
+	if ( numberOfUninitializedColumns === 0 ) {
+		return columnWidths.map( columnWidth => toPrecision( columnWidth ) );
+	}
+
+	const totalWidthOfInitializedColumns = sumArray( columnWidths );
+
+	const widthForUninitializedColumn = Math.max(
+		( 100 - totalWidthOfInitializedColumns ) / numberOfUninitializedColumns,
+		COLUMN_MIN_WIDTH_AS_PERCENTAGE
+	);
+
+	return columnWidths
+		.map( columnWidth => columnWidth === 'auto' ? widthForUninitializedColumn : columnWidth )
+		.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 ) {
+	let viewTableColumnResizerElement = [ ...viewCell.getChildren() ]
+		.find( viewElement => viewElement.hasClass( 'table-column-resizer' ) );
+
+	if ( viewTableColumnResizerElement ) {
+		return;
+	}
+
+	viewTableColumnResizerElement = viewWriter.createUIElement( 'div', {
+		class: 'table-column-resizer'
+	} );
+
+	viewWriter.insert(
+		viewWriter.createPositionAt( viewCell, 'end' ),
+		viewTableColumnResizerElement
+	);
+}
+
+// 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;
+	}
+
+	viewWriter.remove( viewTableColumnResizerElement );
+}

package/src/tablecolumnresize.js

@@ -0,0 +1,36 @@
+/**
+ * @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
+ */
+
+import { Plugin } from 'ckeditor5/src/core';
+import TableColumnResizeEditing from './tablecolumnresize/tablecolumnresizeediting';
+
+import '../theme/tablecolumnresize.css';
+
+/**
+ * The table column resizer feature.
+ *
+ * It provides the possibility to set the width of each column in a table using a resize handle.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class TableColumnResize extends Plugin {
+	/**
+	 * @inheritDoc
+ 	 */
+	static get requires() {
+		return [ TableColumnResizeEditing ];
+	}
+
+	/**
+	 * @inheritDoc
+ 	 */
+	static get pluginName() {
+		return 'TableColumnResize';
+	}
+}

package/src/tableediting.js

@@ -65,10 +65,8 @@ export default class TableEditing extends Plugin {
 		const tableUtils = editor.plugins.get( TableUtils );
 
 		schema.register( 'table', {
-			allowWhere: '$block',
-			allowAttributes: [ 'headingRows', 'headingColumns' ],
-			isObject: true,
-			isBlock: true
+			inheritAllFrom: '$blockObject',
+			allowAttributes: [ 'headingRows', 'headingColumns' ]
 		} );
 
 		schema.register( 'tableRow', {
@@ -77,8 +75,8 @@ export default class TableEditing extends Plugin {
 		} );
 
 		schema.register( 'tableCell', {
+			allowContentOf: '$container',
 			allowIn: 'tableRow',
-			allowChildren: '$block',
 			allowAttributes: [ 'colspan', 'rowspan' ],
 			isLimit: true,
 			isSelectable: true

package/src/tablekeyboard.js

@@ -42,23 +42,20 @@ export default class TableKeyboard extends Plugin {
 		const view = this.editor.editing.view;
 		const viewDocument = view.document;
 
-		// Handle Tab key navigation.
-		this.editor.keystrokes.set( 'Tab', ( ...args ) => this._handleTabOnSelectedTable( ...args ), { priority: 'low' } );
-		this.editor.keystrokes.set( 'Tab', this._getTabHandler( true ), { priority: 'low' } );
-		this.editor.keystrokes.set( 'Shift+Tab', this._getTabHandler( false ), { priority: 'low' } );
-
 		this.listenTo( viewDocument, 'arrowKey', ( ...args ) => this._onArrowKey( ...args ), { context: 'table' } );
+		this.listenTo( viewDocument, 'tab', ( ...args ) => this._handleTabOnSelectedTable( ...args ), { context: 'figure' } );
+		this.listenTo( viewDocument, 'tab', ( ...args ) => this._handleTab( ...args ), { context: [ 'th', 'td' ] } );
 	}
 
 	/**
-	 * Handles {@link module:engine/view/document~Document#event:keydown keydown} events for the <kbd>Tab</kbd> key executed
+	 * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
 	 * when the table widget is selected.
 	 *
 	 * @private
-	 * @param {module:engine/view/observer/keyobserver~KeyEventData} data Key event data.
-	 * @param {Function} cancel The stop/stopPropagation/preventDefault function.
+	 * @param {module:engine/view/observer/bubblingeventinfo~BubblingEventInfo} bubblingEventInfo
+	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 */
-	_handleTabOnSelectedTable( data, cancel ) {
+	_handleTabOnSelectedTable( bubblingEventInfo, domEventData ) {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 		const selectedElement = selection.getSelectedElement();
@@ -67,7 +64,9 @@ export default class TableKeyboard extends Plugin {
 			return;
 		}
 
-		cancel();
+		domEventData.preventDefault();
+		domEventData.stopPropagation();
+		bubblingEventInfo.stop();
 
 		editor.model.change( writer => {
 			writer.setSelection( writer.createRangeIn( selectedElement.getChild( 0 ).getChild( 0 ) ) );
@@ -75,87 +74,90 @@ export default class TableKeyboard extends Plugin {
 	}
 
 	/**
-	 * Returns a handler for {@link module:engine/view/document~Document#event:keydown keydown} events for the <kbd>Tab</kbd> key executed
+	 * Handles {@link module:engine/view/document~Document#event:tab tab} events for the <kbd>Tab</kbd> key executed
 	 * inside table cells.
 	 *
 	 * @private
-	 * @param {Boolean} isForward Whether this handler will move the selection to the next or the previous cell.
+	 * @param {module:engine/view/observer/bubblingeventinfo~BubblingEventInfo} bubblingEventInfo
+	 * @param {module:engine/view/observer/domeventdata~DomEventData} domEventData
 	 */
-	_getTabHandler( isForward ) {
+	_handleTab( bubblingEventInfo, domEventData ) {
 		const editor = this.editor;
 		const tableUtils = this.editor.plugins.get( TableUtils );
 
-		return ( domEventData, cancel ) => {
-			const selection = editor.model.document.selection;
-			let tableCell = tableUtils.getTableCellsContainingSelection( selection )[ 0 ];
+		const selection = editor.model.document.selection;
+		const isForward = !domEventData.shiftKey;
 
-			if ( !tableCell ) {
-				tableCell = this.editor.plugins.get( 'TableSelection' ).getFocusCell();
-			}
+		let tableCell = tableUtils.getTableCellsContainingSelection( selection )[ 0 ];
 
-			if ( !tableCell ) {
-				return;
-			}
+		if ( !tableCell ) {
+			tableCell = this.editor.plugins.get( 'TableSelection' ).getFocusCell();
+		}
 
-			cancel();
+		if ( !tableCell ) {
+			return;
+		}
 
-			const tableRow = tableCell.parent;
-			const table = tableRow.parent;
+		domEventData.preventDefault();
+		domEventData.stopPropagation();
+		bubblingEventInfo.stop();
 
-			const currentRowIndex = table.getChildIndex( tableRow );
-			const currentCellIndex = tableRow.getChildIndex( tableCell );
+		const tableRow = tableCell.parent;
+		const table = tableRow.parent;
 
-			const isFirstCellInRow = currentCellIndex === 0;
+		const currentRowIndex = table.getChildIndex( tableRow );
+		const currentCellIndex = tableRow.getChildIndex( tableCell );
 
-			if ( !isForward && isFirstCellInRow && currentRowIndex === 0 ) {
-				// Set the selection over the whole table if the selection was in the first table cell.
-				editor.model.change( writer => {
-					writer.setSelection( writer.createRangeOn( table ) );
-				} );
+		const isFirstCellInRow = currentCellIndex === 0;
 
-				return;
-			}
+		if ( !isForward && isFirstCellInRow && currentRowIndex === 0 ) {
+			// Set the selection over the whole table if the selection was in the first table cell.
+			editor.model.change( writer => {
+				writer.setSelection( writer.createRangeOn( table ) );
+			} );
 
-			const isLastCellInRow = currentCellIndex === tableRow.childCount - 1;
-			const isLastRow = currentRowIndex === tableUtils.getRows( table ) - 1;
+			return;
+		}
 
-			if ( isForward && isLastRow && isLastCellInRow ) {
-				editor.execute( 'insertTableRowBelow' );
+		const isLastCellInRow = currentCellIndex === tableRow.childCount - 1;
+		const isLastRow = currentRowIndex === tableUtils.getRows( table ) - 1;
 
-				// Check if the command actually added a row. If `insertTableRowBelow` execution didn't add a row (because it was disabled
-				// or it got overwritten) set the selection over the whole table to mirror the first cell case.
-				if ( currentRowIndex === tableUtils.getRows( table ) - 1 ) {
-					editor.model.change( writer => {
-						writer.setSelection( writer.createRangeOn( table ) );
-					} );
+		if ( isForward && isLastRow && isLastCellInRow ) {
+			editor.execute( 'insertTableRowBelow' );
 
-					return;
-				}
+			// Check if the command actually added a row. If `insertTableRowBelow` execution didn't add a row (because it was disabled
+			// or it got overwritten) set the selection over the whole table to mirror the first cell case.
+			if ( currentRowIndex === tableUtils.getRows( table ) - 1 ) {
+				editor.model.change( writer => {
+					writer.setSelection( writer.createRangeOn( table ) );
+				} );
+
+				return;
 			}
+		}
 
-			let cellToFocus;
+		let cellToFocus;
 
-			// Move to the first cell in the next row.
-			if ( isForward && isLastCellInRow ) {
-				const nextRow = table.getChild( currentRowIndex + 1 );
+		// Move to the first cell in the next row.
+		if ( isForward && isLastCellInRow ) {
+			const nextRow = table.getChild( currentRowIndex + 1 );
 
-				cellToFocus = nextRow.getChild( 0 );
-			}
-			// Move to the last cell in the previous row.
-			else if ( !isForward && isFirstCellInRow ) {
-				const previousRow = table.getChild( currentRowIndex - 1 );
+			cellToFocus = nextRow.getChild( 0 );
+		}
+		// Move to the last cell in the previous row.
+		else if ( !isForward && isFirstCellInRow ) {
+			const previousRow = table.getChild( currentRowIndex - 1 );
 
-				cellToFocus = previousRow.getChild( previousRow.childCount - 1 );
-			}
-			// Move to the next/previous cell.
-			else {
-				cellToFocus = tableRow.getChild( currentCellIndex + ( isForward ? 1 : -1 ) );
-			}
+			cellToFocus = previousRow.getChild( previousRow.childCount - 1 );
+		}
+		// Move to the next/previous cell.
+		else {
+			cellToFocus = tableRow.getChild( currentCellIndex + ( isForward ? 1 : -1 ) );
+		}
 
-			editor.model.change( writer => {
-				writer.setSelection( writer.createRangeIn( cellToFocus ) );
-			} );
-		};
+		editor.model.change( writer => {
+			writer.setSelection( writer.createRangeIn( cellToFocus ) );
+		} );
 	}
 
 	/**

package/theme/tablecolumnresize.css

@@ -0,0 +1,59 @@
+/*
+ * 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
+ */
+
+:root {
+	--ck-color-table-column-resizer-hover: var(--ck-color-base-active);
+	--ck-table-column-resizer-width: 7px;
+
+	/* The offset used for absolute positioning of the resizer element, so that it is placed exactly above the cell border.
+	   The value is: minus half the width of the resizer decreased additionaly by the half the width of the border (0.5px). */
+	--ck-table-column-resizer-position-offset: calc(var(--ck-table-column-resizer-width) * -0.5 - 0.5px);
+}
+
+.ck-content .table table {
+	overflow: hidden;
+	table-layout: fixed;
+}
+
+.ck-content .table td,
+.ck-content .table th {
+	position: relative;
+}
+
+.ck-content .table .table-column-resizer {
+	position: absolute;
+	/* The resizer element resides in each cell so to occupy the entire height of the table, which is unknown from a CSS point of view,
+	   it is extended to an extremely high height. Even for screens with a very high pixel density, the resizer will fulfill its role as
+	   it should, i.e. for a screen of 476 ppi the total height of the resizer will take over 350 sheets of A4 format, which is totally
+	   unrealistic height for a single table. */
+	top: -999999px;
+	bottom: -999999px;
+	right: var(--ck-table-column-resizer-position-offset);
+	width: var(--ck-table-column-resizer-width);
+	cursor: col-resize;
+	user-select: none;
+	z-index: var(--ck-z-default);
+}
+
+/* The resizer elements, which are extended to an extremely high height, break the drag & drop feature in Chrome. To make it work again,
+   all resizers must be hidden while the table is dragged. */
+.ck-content .table[draggable] .table-column-resizer {
+	display: none;
+}
+
+.ck-content .table .table-column-resizer:hover,
+.ck-content .table .table-column-resizer__active {
+	background-color: var(--ck-color-table-column-resizer-hover);
+	opacity: 0.25;
+}
+
+.ck-content[dir=rtl] .table .table-column-resizer {
+	left: var(--ck-table-column-resizer-position-offset);
+	right: unset;
+}
+
+.ck-content.ck-read-only .table .table-column-resizer {
+	display: none;
+}