Introduced support for removing multiple rows / columns using multi-cell selection

src/commands/removecolumncommand.js

@@ -28,26 +28,22 @@ export default class RemoveColumnCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const editor = this.editor;
-		const selection = editor.model.document.selection;
-		const tableUtils = editor.plugins.get( 'TableUtils' );
+		const tableUtils = this.editor.plugins.get( 'TableUtils' );
+		const firstCell = this._getReferenceCells().next().value;
 
-		const tableCell = findAncestor( 'tableCell', selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell && tableUtils.getColumns( tableCell.parent.parent ) > 1;
+		this.isEnabled = !!firstCell && tableUtils.getColumns( firstCell.parent.parent ) > 1;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	execute() {
 		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const firstPosition = selection.getFirstPosition();
 
-		const tableCell = findAncestor( 'tableCell', firstPosition );
-		const tableRow = tableCell.parent;
+		const referenceCells = Array.from( this._getReferenceCells() );
+		const firstCell = referenceCells[ 0 ];
+		const lastCell = referenceCells[ referenceCells.length - 1 ];
+		const tableRow = firstCell.parent;
 		const table = tableRow.parent;
 
 		const headingColumns = table.getAttribute( 'headingColumns' ) || 0;
@@ -56,41 +52,74 @@ export default class RemoveColumnCommand extends Command {
 		const tableMap = [ ...new TableWalker( table ) ];
 
 		// Get column index of removed column.
-		const cellData = tableMap.find( value => value.cell === tableCell );
-		const removedColumn = cellData.column;
-		const selectionRow = cellData.row;
-		const cellToFocus = getCellToFocus( tableCell );
+		const firstCellData = tableMap.find( value => value.cell === firstCell );
+		const selectionRow = firstCellData.row;
+		const cellsToFocus = getCellToFocus( firstCell, lastCell );
+
+		const removedColumnIndexes = {
+			first: firstCellData.column,
+			last: tableMap.find( value => value.cell === lastCell ).column
+		};
 
 		model.change( writer => {
+			// A temporary workaround to avoid the "model-selection-range-intersects" error.
+			writer.setSelection( writer.createSelection( table, 'on' ) );
+
 			// Update heading columns attribute if removing a row from head section.
 			if ( headingColumns && selectionRow <= headingColumns ) {
 				writer.setAttribute( 'headingColumns', headingColumns - 1, table );
 			}
 
-			for ( const { cell, column, colspan } of tableMap ) {
-				// If colspaned cell overlaps removed column decrease it's span.
-				if ( column <= removedColumn && colspan > 1 && column + colspan > removedColumn ) {
-					updateNumericAttribute( 'colspan', colspan - 1, cell, writer );
-				} else if ( column === removedColumn ) {
-					// The cell in removed column has colspan of 1.
-					writer.remove( cell );
+			for (
+				let removedColumnIndex = removedColumnIndexes.last;
+				removedColumnIndex >= removedColumnIndexes.first;
+				removedColumnIndex--
+			) {
+				for ( const { cell, column, colspan } of tableMap ) {
+					// If colspaned cell overlaps removed column decrease it's span.
+					if ( column <= removedColumnIndex && colspan > 1 && column + colspan > removedColumnIndex ) {
+						updateNumericAttribute( 'colspan', colspan - 1, cell, writer );
+					} else if ( column === removedColumnIndex ) {
+						// The cell in removed column has colspan of 1.
+						writer.remove( cell );
+					}
 				}
 			}
 
-			writer.setSelection( writer.createPositionAt( cellToFocus, 0 ) );
+			writer.setSelection( writer.createPositionAt( cellsToFocus.reverse().filter( item => item != null )[ 0 ], 0 ) );
 		} );
 	}
+
+	/**
+	 * Returns cells that are selected and are a reference to removing rows.
+	 *
+	 * @private
+	 * @returns {Iterable.<module:engine/model/element~Element>} Generates `tableCell` elements.
+	 */
+	* _getReferenceCells() {
+		const plugins = this.editor.plugins;
+		if ( plugins.has( 'TableSelection' ) && plugins.get( 'TableSelection' ).hasMultiCellSelection ) {
+			for ( const cell of plugins.get( 'TableSelection' ).getSelectedTableCells() ) {
+				yield cell;
+			}
+		} else {
+			const selection = this.editor.model.document.selection;
+
+			yield findAncestor( 'tableCell', selection.getFirstPosition() );
+		}
+	}
 }
 
 // Returns a proper table cell to focus after removing a column. It should be a next sibling to selection visually stay in place but:
 // - selection is on last table cell it will return previous cell.
 // - table cell is spanned over 2+ columns - it will be truncated so the selection should stay in that cell.
-function getCellToFocus( tableCell ) {
-	const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 );
+function getCellToFocus( firstCell, lastCell ) {
+	const colspan = parseInt( lastCell.getAttribute( 'colspan' ) || 1 );
 
 	if ( colspan > 1 ) {
-		return tableCell;
+		return [ firstCell, lastCell ];
 	}
 
-	return tableCell.nextSibling ? tableCell.nextSibling : tableCell.previousSibling;
+	// return lastCell.nextSibling ? lastCell.nextSibling : lastCell.previousSibling;
+	return [ firstCell.previousSibling, lastCell.nextSibling ];
 }

src/commands/removerowcommand.js

@@ -28,86 +28,111 @@ export default class RemoveRowCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const model = this.editor.model;
-		const doc = model.document;
+		const firstCell = this._getReferenceCells().next().value;
 
-		const tableCell = findAncestor( 'tableCell', doc.selection.getFirstPosition() );
-
-		this.isEnabled = !!tableCell && tableCell.parent.parent.childCount > 1;
+		this.isEnabled = !!firstCell && firstCell.parent.parent.childCount > 1;
 	}
 
 	/**
 	 * @inheritDoc
 	 */
 	execute() {
-		const model = this.editor.model;
-		const selection = model.document.selection;
-
-		const firstPosition = selection.getFirstPosition();
-		const tableCell = findAncestor( 'tableCell', firstPosition );
-		const tableRow = tableCell.parent;
-		const table = tableRow.parent;
-
-		const removedRow = table.getChildIndex( tableRow );
-
-		const tableMap = [ ...new TableWalker( table, { endRow: removedRow } ) ];
+		const referenceCells = Array.from( this._getReferenceCells() );
+		const removedRowIndexes = {
+			first: referenceCells[ 0 ].parent.index,
+			last: referenceCells[ referenceCells.length - 1 ].parent.index
+		};
+		const firstCell = referenceCells[ 0 ];
+		const table = firstCell.parent.parent;
+		const tableMap = [ ...new TableWalker( table, { endRow: removedRowIndexes.last } ) ];
+
+		this.editor.model.change( writer => {
+			// Temporary workaround to avoid the "model-selection-range-intersects" error.
+			writer.setSelection( writer.createSelection( table, 'on' ) );
+
+			const firstCellData = tableMap.find( value => value.cell === firstCell );
+			const columnToFocus = firstCellData.column;
+			let cellToFocus;
+
+			for ( let i = removedRowIndexes.last; i >= removedRowIndexes.first; i-- ) {
+				const removedRowIndex = i;
+				this._removeRow( removedRowIndex, table, writer, tableMap );
+
+				cellToFocus = getCellToFocus( table, removedRowIndex, columnToFocus );
+			}
 
-		const cellData = tableMap.find( value => value.cell === tableCell );
+			writer.setSelection( writer.createPositionAt( cellToFocus, 0 ) );
+		} );
+	}
 
+	/**
+	 * @private
+	 */
+	_removeRow( removedRowIndex, table, writer, tableMap ) {
+		const cellsToMove = new Map();
+		const tableRow = table.getChild( removedRowIndex );
 		const headingRows = table.getAttribute( 'headingRows' ) || 0;
 
-		const columnToFocus = cellData.column;
+		if ( headingRows && removedRowIndex <= headingRows ) {
+			updateNumericAttribute( 'headingRows', headingRows - 1, table, writer, 0 );
+		}
 
-		model.change( writer => {
-			if ( headingRows && removedRow <= headingRows ) {
-				updateNumericAttribute( 'headingRows', headingRows - 1, table, writer, 0 );
+		// Get cells from removed row that are spanned over multiple rows.
+		tableMap
+			.filter( ( { row, rowspan } ) => row === removedRowIndex && rowspan > 1 )
+			.forEach( ( { column, cell, rowspan } ) => cellsToMove.set( column, { cell, rowspanToSet: rowspan - 1 } ) );
+
+		// Reduce rowspan on cells that are above removed row and overlaps removed row.
+		tableMap
+			.filter( ( { row, rowspan } ) => row <= removedRowIndex - 1 && row + rowspan > removedRowIndex )
+			.forEach( ( { cell, rowspan } ) => updateNumericAttribute( 'rowspan', rowspan - 1, cell, writer ) );
+
+		// Move cells to another row.
+		const targetRow = removedRowIndex + 1;
+		const tableWalker = new TableWalker( table, { includeSpanned: true, startRow: targetRow, endRow: targetRow } );
+		let previousCell;
+
+		for ( const { row, column, cell } of [ ...tableWalker ] ) {
+			if ( cellsToMove.has( column ) ) {
+				const { cell: cellToMove, rowspanToSet } = cellsToMove.get( column );
+				const targetPosition = previousCell ?
+					writer.createPositionAfter( previousCell ) :
+					writer.createPositionAt( table.getChild( row ), 0 );
+				writer.move( writer.createRangeOn( cellToMove ), targetPosition );
+				updateNumericAttribute( 'rowspan', rowspanToSet, cellToMove, writer );
+				previousCell = cellToMove;
 			}
+			else {
+				previousCell = cell;
+			}
+		}
 
-			const cellsToMove = new Map();
-
-			// Get cells from removed row that are spanned over multiple rows.
-			tableMap
-				.filter( ( { row, rowspan } ) => row === removedRow && rowspan > 1 )
-				.forEach( ( { column, cell, rowspan } ) => cellsToMove.set( column, { cell, rowspanToSet: rowspan - 1 } ) );
-
-			// Reduce rowspan on cells that are above removed row and overlaps removed row.
-			tableMap
-				.filter( ( { row, rowspan } ) => row <= removedRow - 1 && row + rowspan > removedRow )
-				.forEach( ( { cell, rowspan } ) => updateNumericAttribute( 'rowspan', rowspan - 1, cell, writer ) );
-
-			// Move cells to another row.
-			const targetRow = removedRow + 1;
-			const tableWalker = new TableWalker( table, { includeSpanned: true, startRow: targetRow, endRow: targetRow } );
-
-			let previousCell;
-
-			for ( const { row, column, cell } of [ ...tableWalker ] ) {
-				if ( cellsToMove.has( column ) ) {
-					const { cell: cellToMove, rowspanToSet } = cellsToMove.get( column );
-					const targetPosition = previousCell ?
-						writer.createPositionAfter( previousCell ) :
-						writer.createPositionAt( table.getChild( row ), 0 );
-
-					writer.move( writer.createRangeOn( cellToMove ), targetPosition );
-					updateNumericAttribute( 'rowspan', rowspanToSet, cellToMove, writer );
+		writer.remove( tableRow );
+	}
 
-					previousCell = cellToMove;
-				} else {
-					previousCell = cell;
-				}
+	/**
+	 * Returns cells that are selected and are a reference to removing rows.
+	 *
+	 * @private
+	 * @returns {Iterable.<module:engine/model/element~Element>} Generates `tableCell` elements.
+	 */
+	* _getReferenceCells() {
+		const plugins = this.editor.plugins;
+		if ( plugins.has( 'TableSelection' ) && plugins.get( 'TableSelection' ).hasMultiCellSelection ) {
+			for ( const cell of plugins.get( 'TableSelection' ).getSelectedTableCells() ) {
+				yield cell;
 			}
+		} else {
+			const selection = this.editor.model.document.selection;
 
-			writer.remove( tableRow );
-
-			const cellToFocus = getCellToFocus( table, removedRow, columnToFocus );
-			writer.setSelection( writer.createPositionAt( cellToFocus, 0 ) );
-		} );
+			yield findAncestor( 'tableCell', selection.getFirstPosition() );
+		}
 	}
 }
 
 // Returns a cell that should be focused before removing the row, belonging to the same column as the currently focused cell.
-function getCellToFocus( table, removedRow, columnToFocus ) {
-	const row = table.getChild( removedRow );
+function getCellToFocus( table, removedRowIndex, columnToFocus ) {
+	const row = table.getChild( removedRowIndex );
 
 	// Default to first table cell.
 	let cellToFocus = row.getChild( 0 );