Merge pull request #268 from ckeditor/i/6127

Internal: Integrated multi cell selection with set column /row header commands. Closes ckeditor/ckeditor5#6127.
ckeditor · Mar 11, 2020 · eab1b5f · eab1b5f
2 parents 3ec288a + 786fd87
commit eab1b5f
Show file tree

Hide file tree

Showing 4 changed files with 592 additions and 34 deletions.
diff --git a/src/commands/setheadercolumncommand.js b/src/commands/setheadercolumncommand.js
@@ -13,7 +13,7 @@ import {
 	updateNumericAttribute,
 	isHeadingColumnCell
 } from './utils';
-import { getTableCellsContainingSelection } from '../utils';
+import { getSelectionAffectedTableCells } from '../utils';
 
 /**
  * The header column command.
@@ -36,10 +36,9 @@ export default class SetHeaderColumnCommand extends Command {
 	 */
 	refresh() {
 		const model = this.editor.model;
-		const doc = model.document;
-		const tableCell = getTableCellsContainingSelection( doc.selection )[ 0 ];
+		const selectedCells = getSelectionAffectedTableCells( model.document.selection );
 		const tableUtils = this.editor.plugins.get( 'TableUtils' );
-		const isInTable = !!tableCell;
+		const isInTable = selectedCells.length > 0;
 
 		this.isEnabled = isInTable;
 
@@ -51,7 +50,7 @@ export default class SetHeaderColumnCommand extends Command {
 		 * @readonly
 		 * @member {Boolean} #value
 		 */
-		this.value = isInTable && isHeadingColumnCell( tableUtils, tableCell );
+		this.value = isInTable && selectedCells.every( cell => isHeadingColumnCell( tableUtils, cell ) );
 	}
 
 	/**
@@ -68,21 +67,23 @@ export default class SetHeaderColumnCommand extends Command {
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
-		const doc = model.document;
-		const selection = doc.selection;
 		const tableUtils = this.editor.plugins.get( 'TableUtils' );
 
-		const tableCell = getTableCellsContainingSelection( selection )[ 0 ];
-		const tableRow = tableCell.parent;
+		const selectedCells = getSelectionAffectedTableCells( model.document.selection );
+		const firstCell = selectedCells[ 0 ];
+		const lastCell = selectedCells[ selectedCells.length - 1 ];
+		const tableRow = firstCell.parent;
 		const table = tableRow.parent;
 
-		const { column: selectionColumn } = tableUtils.getCellLocation( tableCell );
+		const [ selectedColumnMin, selectedColumnMax ] =
+			// Returned cells might not necessary be in order, so make sure to sort it.
+			[ tableUtils.getCellLocation( firstCell ).column, tableUtils.getCellLocation( lastCell ).column ].sort();
 
 		if ( options.forceValue === this.value ) {
 			return;
 		}
 
-		const headingColumnsToSet = this.value ? selectionColumn : selectionColumn + 1;
+		const headingColumnsToSet = this.value ? selectedColumnMin : selectedColumnMax + 1;
 
 		model.change( writer => {
 			updateNumericAttribute( 'headingColumns', headingColumnsToSet, table, writer, 0 );

diff --git a/src/commands/setheaderrowcommand.js b/src/commands/setheaderrowcommand.js
@@ -9,11 +9,8 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 
-import {
-	createEmptyTableCell,
-	updateNumericAttribute
-} from './utils';
-import { getTableCellsContainingSelection } from '../utils';
+import { createEmptyTableCell, updateNumericAttribute } from './utils';
+import { getSelectionAffectedTableCells } from '../utils';
 import TableWalker from '../tablewalker';
 
 /**
@@ -36,11 +33,8 @@ export default class SetHeaderRowCommand extends Command {
 	 */
 	refresh() {
 		const model = this.editor.model;
-		const doc = model.document;
-		const selection = doc.selection;
-
-		const tableCell = getTableCellsContainingSelection( selection )[ 0 ];
-		const isInTable = !!tableCell;
+		const selectedCells = getSelectionAffectedTableCells( model.document.selection );
+		const isInTable = selectedCells.length > 0;
 
 		this.isEnabled = isInTable;
 
@@ -52,7 +46,7 @@ export default class SetHeaderRowCommand extends Command {
 		 * @readonly
 		 * @member {Boolean} #value
 		 */
-		this.value = isInTable && this._isInHeading( tableCell, tableCell.parent.parent );
+		this.value = isInTable && selectedCells.every( cell => this._isInHeading( cell, cell.parent.parent ) );
 	}
 
 	/**
@@ -69,21 +63,23 @@ export default class SetHeaderRowCommand extends Command {
 	 */
 	execute( options = {} ) {
 		const model = this.editor.model;
-		const doc = model.document;
-		const selection = doc.selection;
 
-		const tableCell = getTableCellsContainingSelection( selection )[ 0 ];
-		const tableRow = tableCell.parent;
-		const table = tableRow.parent;
+		const selectedCells = getSelectionAffectedTableCells( model.document.selection );
+		const firstCell = selectedCells[ 0 ];
+		const lastCell = selectedCells[ selectedCells.length - 1 ];
+		const table = firstCell.parent.parent;
 
 		const currentHeadingRows = table.getAttribute( 'headingRows' ) || 0;
-		const selectionRow = tableRow.index;
+
+		const [ selectedRowMin, selectedRowMax ] =
+			// Returned cells might not necessary be in order, so make sure to sort it.
+			[ firstCell.parent.index, lastCell.parent.index ].sort();
 
 		if ( options.forceValue === this.value ) {
 			return;
 		}
 
-		const headingRowsToSet = this.value ? selectionRow : selectionRow + 1;
+		const headingRowsToSet = this.value ? selectedRowMin : selectedRowMax + 1;
 
 		model.change( writer => {
 			if ( headingRowsToSet ) {