Browse Source

Added: Support of rowspaned cells update in `TableUtils#splitCellHorizontally()`.

Maciej Gołaszewski 7 years ago
parent
commit
4224fbf385

+ 1 - 1
packages/ckeditor5-table/src/commands/insertrowcommand.js

@@ -63,6 +63,6 @@ export default class InsertRowCommand extends Command {
 
 		const insertAt = this.direction === 'below' ? rowIndex + 1 : rowIndex;
 
-		tableUtils.insertRow( table, { rows: 1, at: insertAt } );
+		tableUtils.insertRows( table, { rows: 1, at: insertAt } );
 	}
 }

+ 3 - 2
packages/ckeditor5-table/src/tableediting.js

@@ -100,7 +100,8 @@ export default class TablesEditing extends Plugin {
 		editor.commands.add( 'insertRowAbove', new InsertRowCommand( editor, { location: 'above' } ) );
 		editor.commands.add( 'insertRowBelow', new InsertRowCommand( editor, { location: 'below' } ) );
 		editor.commands.add( 'insertColumn', new InsertColumnCommand( editor ) );
-		editor.commands.add( 'splitCell', new SplitCellCommand( editor ) );
+		editor.commands.add( 'splitCellVertically', new SplitCellCommand( editor, { direction: 'vertically' } ) );
+		editor.commands.add( 'splitCellHorizontally', new SplitCellCommand( editor, { direction: 'horizontally' } ) );
 		editor.commands.add( 'removeRow', new RemoveRowCommand( editor ) );
 		editor.commands.add( 'removeColumn', new RemoveColumnCommand( editor ) );
 		editor.commands.add( 'mergeRight', new MergeCellCommand( editor, { direction: 'right' } ) );
@@ -201,7 +202,7 @@ export default class TablesEditing extends Plugin {
 		const isLastRow = currentRow === table.childCount - 1;
 
 		if ( isForward && isLastRow && isLastCellInRow ) {
-			editor.plugins.get( TableUtils ).insertRow( table, { at: table.childCount } );
+			editor.plugins.get( TableUtils ).insertRows( table, { at: table.childCount } );
 		}
 
 		let moveToCell;

+ 22 - 21
packages/ckeditor5-table/src/tableutils.js

@@ -18,7 +18,7 @@ import Position from '@ckeditor/ckeditor5-engine/src/model/position';
  * @extends module:core/command~Command
  */
 export default class TableUtils extends Plugin {
-	insertRow( table, options = {} ) {
+	insertRows( table, options = {} ) {
 		const model = this.editor.model;
 
 		const rows = parseInt( options.rows ) || 1;
@@ -56,17 +56,7 @@ export default class TableUtils extends Plugin {
 				tableCellToInsert = columns;
 			}
 
-			for ( let i = 0; i < rows; i++ ) {
-				const tableRow = writer.createElement( 'tableRow' );
-
-				writer.insert( tableRow, table, insertAt );
-
-				for ( let columnIndex = 0; columnIndex < tableCellToInsert; columnIndex++ ) {
-					const cell = writer.createElement( 'tableCell' );
-
-					writer.insert( cell, tableRow, 'end' );
-				}
-			}
+			createEmptyRows( writer, table, insertAt, rows, tableCellToInsert );
 		} );
 	}
 
@@ -141,23 +131,34 @@ export default class TableUtils extends Plugin {
 		const rowIndex = table.getChildIndex( tableCell.parent );
 
 		model.change( writer => {
-			for ( const tableWalkerValue of new TableWalker( table, { startRow: rowIndex, endRow: rowIndex } ) ) {
-				if ( tableWalkerValue.cell !== tableCell ) {
+			for ( const tableWalkerValue of new TableWalker( table, { startRow: 0, endRow: rowIndex } ) ) {
+				if ( tableWalkerValue.cell !== tableCell && tableWalkerValue.row + tableWalkerValue.rowspan > rowIndex ) {
 					const rowspan = parseInt( tableWalkerValue.cell.getAttribute( 'rowspan' ) || 1 );
 
 					writer.setAttribute( 'rowspan', rowspan + cellNumber - 1, tableWalkerValue.cell );
 				}
 			}
 
-			for ( let i = rowIndex + 1; i < rowIndex + cellNumber; i++ ) {
-				const tableRow = writer.createElement( 'tableRow' );
+			createEmptyRows( writer, table, rowIndex + 1, cellNumber - 1, 1 );
+		} );
+	}
+}
 
-				writer.insert( tableRow, table, i );
+// @param writer
+// @param table
+// @param {Number} insertAt Row index of row insertion.
+// @param {Number} rows Number of rows to create.
+// @param {Number} tableCellToInsert Number of cells to insert in each row.
+function createEmptyRows( writer, table, insertAt, rows, tableCellToInsert ) {
+	for ( let i = 0; i < rows; i++ ) {
+		const tableRow = writer.createElement( 'tableRow' );
 
-				const cell = writer.createElement( 'tableCell' );
+		writer.insert( tableRow, table, insertAt );
 
-				writer.insert( cell, tableRow, 'end' );
-			}
-		} );
+		for ( let columnIndex = 0; columnIndex < tableCellToInsert; columnIndex++ ) {
+			const cell = writer.createElement( 'tableCell' );
+
+			writer.insert( cell, tableRow, 'end' );
+		}
 	}
 }

+ 27 - 9
packages/ckeditor5-table/tests/tableutils.js

@@ -71,14 +71,14 @@ describe( 'TableUtils', () => {
 		return editor.destroy();
 	} );
 
-	describe( 'insertRow()', () => {
+	describe( 'insertRows()', () => {
 		it( 'should insert row in given table at given index', () => {
 			setData( model, modelTable( [
 				[ '11[]', '12' ],
 				[ '21', '22' ]
 			] ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 1 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 1 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ '11[]', '12' ],
@@ -93,7 +93,7 @@ describe( 'TableUtils', () => {
 				[ '21', '22' ]
 			] ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ) );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ) );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ '', '' ],
@@ -109,7 +109,7 @@ describe( 'TableUtils', () => {
 				[ '31', '32' ]
 			], { headingRows: 2 } ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 1 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 1 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ '11[]', '12' ],
@@ -126,7 +126,7 @@ describe( 'TableUtils', () => {
 				[ '31', '32' ]
 			], { headingRows: 2 } ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 2 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 2 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ '11[]', '12' ],
@@ -143,7 +143,7 @@ describe( 'TableUtils', () => {
 				[ '33', '34' ]
 			], { headingColumns: 3, headingRows: 1 } ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ { colspan: 2, contents: '11[]' }, '13', '14' ],
@@ -162,7 +162,7 @@ describe( 'TableUtils', () => {
 				[ '31', '32', '33' ]
 			], { headingColumns: 3, headingRows: 1 } ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ { rowspan: 2, contents: '11[]' }, '12', '13' ],
@@ -181,7 +181,7 @@ describe( 'TableUtils', () => {
 				[ { colspan: 3, contents: '31' } ]
 			], { headingColumns: 3, headingRows: 1 } ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ { rowspan: 2, contents: '11[]' }, '12', '13' ],
@@ -199,7 +199,7 @@ describe( 'TableUtils', () => {
 				[ '21', '22' ]
 			] ) );
 
-			tableUtils.insertRow( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
+			tableUtils.insertRows( root.getNodeByPath( [ 0 ] ), { at: 2, rows: 3 } );
 
 			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
 				[ '11[]', '12' ],
@@ -347,5 +347,23 @@ describe( 'TableUtils', () => {
 				[ '20', '21', '22' ]
 			] ) );
 		} );
+
+		it( 'should properly update rowspanned cells overlapping selected cell', () => {
+			setData( model, modelTable( [
+				[ { rowspan: 2, contents: '00' }, '01', { rowspan: 3, contents: '02' } ],
+				[ '[]11' ],
+				[ '20', '21' ]
+			] ) );
+
+			tableUtils.splitCellVertically( root.getNodeByPath( [ 0, 1, 0 ] ), 3 );
+
+			expect( formatTable( getData( model ) ) ).to.equal( formattedModelTable( [
+				[ { rowspan: 4, contents: '00' }, '01', { rowspan: 5, contents: '02' } ],
+				[ '[]11' ],
+				[ '' ],
+				[ '' ],
+				[ '20', '21' ]
+			] ) );
+		} );
 	} );
 } );