@ckeditor/ckeditor5-table 32.0.0 → 34.1.0

package/src/tablekeyboard.js

@@ -9,10 +9,10 @@
 
 import TableSelection from './tableselection';
 import TableWalker from './tablewalker';
+import TableUtils from './tableutils';
 
 import { Plugin } from 'ckeditor5/src/core';
 import { getLocalizedArrowKeyCodeDirection } from 'ckeditor5/src/utils';
-import { getSelectedTableCells, getTableCellsContainingSelection } from './utils/selection';
 
 /**
  * This plugin enables keyboard navigation for tables.
@@ -32,7 +32,7 @@ export default class TableKeyboard extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ TableSelection ];
+		return [ TableSelection, TableUtils ];
 	}
 
 	/**
@@ -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 = 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 tableUtils = this.editor.plugins.get( 'TableUtils' );
-			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 ) );
+		} );
 	}
 
 	/**
@@ -188,13 +190,14 @@ export default class TableKeyboard extends Plugin {
 	 * @returns {Boolean} Returns `true` if key was handled.
 	 */
 	_handleArrowKeys( direction, expandSelection ) {
+		const tableUtils = this.editor.plugins.get( TableUtils );
 		const model = this.editor.model;
 		const selection = model.document.selection;
 		const isForward = [ 'right', 'down' ].includes( direction );
 
 		// In case one or more table cells are selected (from outside),
 		// move the selection to a cell adjacent to the selected table fragment.
-		const selectedCells = getSelectedTableCells( selection );
+		const selectedCells = tableUtils.getSelectedTableCells( selection );
 
 		if ( selectedCells.length ) {
 			let focusCell;

package/src/tablemouse.js

@@ -11,8 +11,7 @@ import { Plugin } from 'ckeditor5/src/core';
 
 import TableSelection from './tableselection';
 import MouseEventsObserver from './tablemouse/mouseeventsobserver';
-
-import { getTableCellsContainingSelection } from './utils/selection';
+import TableUtils from './tableutils';
 
 /**
  * This plugin enables a table cells' selection with the mouse.
@@ -32,7 +31,7 @@ export default class TableMouse extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ TableSelection ];
+		return [ TableSelection, TableUtils ];
 	}
 
 	/**
@@ -57,11 +56,14 @@ export default class TableMouse extends Plugin {
 	 */
 	_enableShiftClickSelection() {
 		const editor = this.editor;
+		const tableUtils = editor.plugins.get( TableUtils );
 		let blockSelectionChange = false;
 
 		const tableSelection = editor.plugins.get( TableSelection );
 
 		this.listenTo( editor.editing.view.document, 'mousedown', ( evt, domEventData ) => {
+			const selection = editor.model.document.selection;
+
 			if ( !this.isEnabled || !tableSelection.isEnabled ) {
 				return;
 			}
@@ -70,7 +72,7 @@ export default class TableMouse extends Plugin {
 				return;
 			}
 
-			const anchorCell = tableSelection.getAnchorCell() || getTableCellsContainingSelection( editor.model.document.selection )[ 0 ];
+			const anchorCell = tableSelection.getAnchorCell() || tableUtils.getTableCellsContainingSelection( selection )[ 0 ];
 
 			if ( !anchorCell ) {
 				return;

package/src/tableselection.js

@@ -14,7 +14,6 @@ import TableWalker from './tablewalker';
 import TableUtils from './tableutils';
 
 import { cropTableToDimensions, adjustLastRowIndex, adjustLastColumnIndex } from './utils/structure';
-import { getColumnIndexes, getRowIndexes, getSelectedTableCells, isSelectionRectangular } from './utils/selection';
 
 import '../theme/tableselection.css';
 
@@ -36,7 +35,7 @@ export default class TableSelection extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ TableUtils ];
+		return [ TableUtils, TableUtils ];
 	}
 
 	/**
@@ -58,9 +57,10 @@ export default class TableSelection extends Plugin {
 	 * @returns {Array.<module:engine/model/element~Element>|null}
 	 */
 	getSelectedTableCells() {
+		const tableUtils = this.editor.plugins.get( TableUtils );
 		const selection = this.editor.model.document.selection;
 
-		const selectedCells = getSelectedTableCells( selection );
+		const selectedCells = tableUtils.getSelectedTableCells( selection );
 
 		if ( selectedCells.length == 0 ) {
 			return null;
@@ -81,6 +81,7 @@ export default class TableSelection extends Plugin {
 	 * @returns {module:engine/model/documentfragment~DocumentFragment|null}
 	 */
 	getSelectionAsFragment() {
+		const tableUtils = this.editor.plugins.get( TableUtils );
 		const selectedCells = this.getSelectedTableCells();
 
 		if ( !selectedCells ) {
@@ -89,10 +90,9 @@ export default class TableSelection extends Plugin {
 
 		return this.editor.model.change( writer => {
 			const documentFragment = writer.createDocumentFragment();
-			const tableUtils = this.editor.plugins.get( 'TableUtils' );
 
-			const { first: firstColumn, last: lastColumn } = getColumnIndexes( selectedCells );
-			const { first: firstRow, last: lastRow } = getRowIndexes( selectedCells );
+			const { first: firstColumn, last: lastColumn } = tableUtils.getColumnIndexes( selectedCells );
+			const { first: firstRow, last: lastRow } = tableUtils.getRowIndexes( selectedCells );
 
 			const sourceTable = selectedCells[ 0 ].findAncestor( 'table' );
 
@@ -101,7 +101,7 @@ export default class TableSelection extends Plugin {
 
 			// If the selection is rectangular there could be a case of all cells in the last row/column spanned over
 			// next row/column so the real lastRow/lastColumn should be updated.
-			if ( isSelectionRectangular( selectedCells, tableUtils ) ) {
+			if ( tableUtils.isSelectionRectangular( selectedCells ) ) {
 				const dimensions = {
 					firstColumn,
 					lastColumn,
@@ -269,10 +269,11 @@ export default class TableSelection extends Plugin {
 	 * @param {Array.<*>} args Delete content method arguments.
 	 */
 	_handleDeleteContent( event, args ) {
+		const tableUtils = this.editor.plugins.get( TableUtils );
 		const [ selection, options ] = args;
 		const model = this.editor.model;
 		const isBackward = !options || options.direction == 'backward';
-		const selectedTableCells = getSelectedTableCells( selection );
+		const selectedTableCells = tableUtils.getSelectedTableCells( selection );
 
 		if ( !selectedTableCells.length ) {
 			return;

package/src/tableutils.js

@@ -775,6 +775,288 @@ export default class TableUtils extends Plugin {
 		return Array.from( table.getChildren() )
 			.reduce( ( rowCount, child ) => child.is( 'element', 'tableRow' ) ? rowCount + 1 : rowCount, 0 );
 	}
+
+	/**
+	 * Creates an instance of the table walker.
+	 *
+	 * The table walker iterates internally by traversing the table from row index = 0 and column index = 0.
+	 * It walks row by row and column by column in order to output values defined in the options.
+	 * By default it will output only the locations that are occupied by a cell. To include also spanned rows and columns,
+	 * pass the `includeAllSlots` option.
+	 *
+	 * @protected
+	 * @param {module:engine/model/element~Element} table A table over which the walker iterates.
+	 * @param {Object} [options={}] An object with configuration.
+	 * @param {Number} [options.row] A row index for which this iterator will output cells.
+	 * Can't be used together with `startRow` and `endRow`.
+	 * @param {Number} [options.startRow=0] A row index from which this iterator should start. Can't be used together with `row`.
+	 * @param {Number} [options.endRow] A row index at which this iterator should end. Can't be used together with `row`.
+	 * @param {Number} [options.column] A column index for which this iterator will output cells.
+	 * Can't be used together with `startColumn` and `endColumn`.
+	 * @param {Number} [options.startColumn=0] A column index from which this iterator should start. Can't be used together with `column`.
+	 * @param {Number} [options.endColumn] A column index at which this iterator should end. Can't be used together with `column`.
+	 * @param {Boolean} [options.includeAllSlots=false] Also return values for spanned cells.
+	 */
+	createTableWalker( table, options = {} ) {
+		return new TableWalker( table, options );
+	}
+
+	/**
+	 * Returns all model table cells that are fully selected (from the outside)
+	 * within the provided model selection's ranges.
+	 *
+	 * To obtain the cells selected from the inside, use
+	 * {@link #getTableCellsContainingSelection}.
+	 *
+	 * @param {module:engine/model/selection~Selection} selection
+	 * @returns {Array.<module:engine/model/element~Element>}
+	 */
+	getSelectedTableCells( selection ) {
+		const cells = [];
+
+		for ( const range of this.sortRanges( selection.getRanges() ) ) {
+			const element = range.getContainedElement();
+
+			if ( element && element.is( 'element', 'tableCell' ) ) {
+				cells.push( element );
+			}
+		}
+
+		return cells;
+	}
+
+	/**
+	 * Returns all model table cells that the provided model selection's ranges
+	 * {@link module:engine/model/range~Range#start} inside.
+	 *
+	 * To obtain the cells selected from the outside, use
+	 * {@link #getSelectedTableCells}.
+	 *
+	 * @param {module:engine/model/selection~Selection} selection
+	 * @returns {Array.<module:engine/model/element~Element>}
+	 */
+	getTableCellsContainingSelection( selection ) {
+		const cells = [];
+
+		for ( const range of selection.getRanges() ) {
+			const cellWithSelection = range.start.findAncestor( 'tableCell' );
+
+			if ( cellWithSelection ) {
+				cells.push( cellWithSelection );
+			}
+		}
+
+		return cells;
+	}
+
+	/**
+	 * Returns all model table cells that are either completely selected
+	 * by selection ranges or host selection range
+	 * {@link module:engine/model/range~Range#start start positions} inside them.
+	 *
+	 * Combines {@link #getTableCellsContainingSelection} and
+	 * {@link #getSelectedTableCells}.
+	 *
+	 * @param {module:engine/model/selection~Selection} selection
+	 * @returns {Array.<module:engine/model/element~Element>}
+	 */
+	getSelectionAffectedTableCells( selection ) {
+		const selectedCells = this.getSelectedTableCells( selection );
+
+		if ( selectedCells.length ) {
+			return selectedCells;
+		}
+
+		return this.getTableCellsContainingSelection( selection );
+	}
+
+	/**
+	 * Returns an object with the `first` and `last` row index contained in the given `tableCells`.
+	 *
+	 *		const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
+	*
+	*		const { first, last } = getRowIndexes( selectedTableCells );
+	*
+	*		console.log( `Selected rows: ${ first } to ${ last }` );
+	*
+	* @param {Array.<module:engine/model/element~Element>} tableCells
+	* @returns {Object} Returns an object with the `first` and `last` table row indexes.
+	*/
+	getRowIndexes( tableCells ) {
+		const indexes = tableCells.map( cell => cell.parent.index );
+
+		return this._getFirstLastIndexesObject( indexes );
+	}
+
+	/**
+	 * Returns an object with the `first` and `last` column index contained in the given `tableCells`.
+	 *
+	 *		const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
+	*
+	*		const { first, last } = getColumnIndexes( selectedTableCells );
+	*
+	*		console.log( `Selected columns: ${ first } to ${ last }` );
+	*
+	* @param {Array.<module:engine/model/element~Element>} tableCells
+	* @returns {Object} Returns an object with the `first` and `last` table column indexes.
+	*/
+	getColumnIndexes( tableCells ) {
+		const table = tableCells[ 0 ].findAncestor( 'table' );
+		const tableMap = [ ...new TableWalker( table ) ];
+
+		const indexes = tableMap
+			.filter( entry => tableCells.includes( entry.cell ) )
+			.map( entry => entry.column );
+
+		return this._getFirstLastIndexesObject( indexes );
+	}
+
+	/**
+	 * Checks if the selection contains cells that do not exceed rectangular selection.
+	 *
+	 * In a table below:
+	 *
+	 *		┌───┬───┬───┬───┐
+	*		│ a │ b │ c │ d │
+	*		├───┴───┼───┤   │
+	*		│ e     │ f │   │
+	*		│       ├───┼───┤
+	*		│       │ g │ h │
+	*		└───────┴───┴───┘
+	*
+	* Valid selections are these which create a solid rectangle (without gaps), such as:
+	*   - a, b (two horizontal cells)
+	*   - c, f (two vertical cells)
+	*   - a, b, e (cell "e" spans over four cells)
+	*   - c, d, f (cell d spans over a cell in the row below)
+	*
+	* While an invalid selection would be:
+	*   - a, c (the unselected cell "b" creates a gap)
+	*   - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)
+	*
+	* @param {Array.<module:engine/model/element~Element>} selectedTableCells
+	* @returns {Boolean}
+	*/
+	isSelectionRectangular( selectedTableCells ) {
+		if ( selectedTableCells.length < 2 || !this._areCellInTheSameTableSection( selectedTableCells ) ) {
+			return false;
+		}
+
+		// A valid selection is a fully occupied rectangle composed of table cells.
+		// Below we will calculate the area of a selected table cells and the area of valid selection.
+		// The area of a valid selection is defined by top-left and bottom-right cells.
+		const rows = new Set();
+		const columns = new Set();
+
+		let areaOfSelectedCells = 0;
+
+		for ( const tableCell of selectedTableCells ) {
+			const { row, column } = this.getCellLocation( tableCell );
+			const rowspan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
+			const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 );
+
+			// Record row & column indexes of current cell.
+			rows.add( row );
+			columns.add( column );
+
+			// For cells that spans over multiple rows add also the last row that this cell spans over.
+			if ( rowspan > 1 ) {
+				rows.add( row + rowspan - 1 );
+			}
+
+			// For cells that spans over multiple columns add also the last column that this cell spans over.
+			if ( colspan > 1 ) {
+				columns.add( column + colspan - 1 );
+			}
+
+			areaOfSelectedCells += ( rowspan * colspan );
+		}
+
+		// We can only merge table cells that are in adjacent rows...
+		const areaOfValidSelection = getBiggestRectangleArea( rows, columns );
+
+		return areaOfValidSelection == areaOfSelectedCells;
+	}
+
+	/**
+	 * Returns array of sorted ranges.
+	 *
+	 * @param {Iterable.<module:engine/model/range~Range>} ranges
+	 * @return {Array.<module:engine/model/range~Range>}
+	 */
+	sortRanges( ranges ) {
+		return Array.from( ranges ).sort( compareRangeOrder );
+	}
+
+	/**
+	 * Helper method to get an object with `first` and `last` indexes from an unsorted array of indexes.
+	 *
+	 * @private
+	 * @param {Number[]} indexes
+	 * @returns {Object}
+	 */
+	_getFirstLastIndexesObject( indexes ) {
+		const allIndexesSorted = indexes.sort( ( indexA, indexB ) => indexA - indexB );
+
+		const first = allIndexesSorted[ 0 ];
+		const last = allIndexesSorted[ allIndexesSorted.length - 1 ];
+
+		return { first, last };
+	}
+
+	/**
+	 * Checks if the selection does not mix a header (column or row) with other cells.
+	 *
+	 * For instance, in the table below valid selections consist of cells with the same letter only.
+	 * So, a-a (same heading row and column) or d-d (body cells) are valid while c-d or a-b are not.
+	 *
+	 * header columns
+	 *		  ↓   ↓
+	 *		┌───┬───┬───┬───┐
+	 *		│ a │ a │ b │ b │  ← header row
+	 *		├───┼───┼───┼───┤
+	 *		│ c │ c │ d │ d │
+	 *		├───┼───┼───┼───┤
+	 *		│ c │ c │ d │ d │
+	 *		└───┴───┴───┴───┘
+	 *
+	 * @private
+	 * @param {Array.<module:engine/model/element~Element>} tableCells
+	 * @returns {Boolean}
+	 */
+	_areCellInTheSameTableSection( tableCells ) {
+		const table = tableCells[ 0 ].findAncestor( 'table' );
+
+		const rowIndexes = this.getRowIndexes( tableCells );
+		const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
+
+		// Calculating row indexes is a bit cheaper so if this check fails we can't merge.
+		if ( !this._areIndexesInSameSection( rowIndexes, headingRows ) ) {
+			return false;
+		}
+
+		const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
+		const columnIndexes = this.getColumnIndexes( tableCells );
+
+		// Similarly cells must be in same column section.
+		return this._areIndexesInSameSection( columnIndexes, headingColumns );
+	}
+
+	/**
+	 * Unified check if table rows/columns indexes are in the same heading/body section.
+	 *
+	 * @private
+	 * @param {Object} params
+	 * @param {Number} params.first
+	 * @param {Number} params.last
+	 * @param {Number} headingSectionSize
+	 */
+	_areIndexesInSameSection( { first, last }, headingSectionSize ) {
+		const firstCellIsInHeading = first < headingSectionSize;
+		const lastCellIsInHeading = last < headingSectionSize;
+
+		return firstCellIsInHeading === lastCellIsInHeading;
+	}
 }
 
 // Creates empty rows at the given index in an existing table.
@@ -943,3 +1225,31 @@ function moveCellsToRow( table, targetRowIndex, cellsToMove, writer ) {
 		}
 	}
 }
+
+function compareRangeOrder( rangeA, rangeB ) {
+	// Since table cell ranges are disjoint, it's enough to check their start positions.
+	const posA = rangeA.start;
+	const posB = rangeB.start;
+
+	// Checking for equal position (returning 0) is not needed because this would be either:
+	// a. Intersecting range (not allowed by model)
+	// b. Collapsed range on the same position (allowed by model but should not happen).
+	return posA.isBefore( posB ) ? -1 : 1;
+}
+
+// Calculates the area of a maximum rectangle that can span over the provided row & column indexes.
+//
+// @param {Array.<Number>} rows
+// @param {Array.<Number>} columns
+// @returns {Number}
+function getBiggestRectangleArea( rows, columns ) {
+	const rowsIndexes = Array.from( rows.values() );
+	const columnIndexes = Array.from( columns.values() );
+
+	const lastRow = Math.max( ...rowsIndexes );
+	const firstRow = Math.min( ...rowsIndexes );
+	const lastColumn = Math.max( ...columnIndexes );
+	const firstColumn = Math.min( ...columnIndexes );
+
+	return ( lastRow - firstRow + 1 ) * ( lastColumn - firstColumn + 1 );
+}

package/theme/table.css

@@ -43,7 +43,7 @@
 }
 
 /* Text alignment of the table header should match the editor settings and override the native browser styling,
-when content is available outside the ediitor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
+when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
 .ck-content[dir="rtl"] .table th {
 	text-align: right;
 }