-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
/
mergecellcommand.js
272 lines (222 loc) · 9.64 KB
/
mergecellcommand.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
/**
* @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
/**
* @module table/commands/mergecellcommand
*/
import Command from '@ckeditor/ckeditor5-core/src/command';
import TableWalker from '../tablewalker';
import { getTableCellsContainingSelection } from '../utils/selection';
import { isHeadingColumnCell } from '../utils/common';
import { removeEmptyRowsColumns } from '../utils/structure';
/**
* The merge cell command.
*
* The command is registered by {@link module:table/tableediting~TableEditing} as the `'mergeTableCellRight'`, `'mergeTableCellLeft'`,
* `'mergeTableCellUp'` and `'mergeTableCellDown'` editor commands.
*
* To merge a table cell at the current selection with another cell, execute the command corresponding with the preferred direction.
*
* For example, to merge with a cell to the right:
*
* editor.execute( 'mergeTableCellRight' );
*
* **Note**: If a table cell has a different [`rowspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-rowspan)
* (for `'mergeTableCellRight'` and `'mergeTableCellLeft'`) or [`colspan`](https://www.w3.org/TR/html50/tabular-data.html#attr-tdth-colspan)
* (for `'mergeTableCellUp'` and `'mergeTableCellDown'`), the command will be disabled.
*
* @extends module:core/command~Command
*/
export default class MergeCellCommand extends Command {
/**
* Creates a new `MergeCellCommand` instance.
*
* @param {module:core/editor/editor~Editor} editor The editor on which this command will be used.
* @param {Object} options
* @param {String} options.direction Indicates which cell to merge with the currently selected one.
* Possible values are: `'left'`, `'right'`, `'up'` and `'down'`.
*/
constructor( editor, options ) {
super( editor );
/**
* The direction that indicates which cell will be merged with the currently selected one.
*
* @readonly
* @member {String} #direction
*/
this.direction = options.direction;
/**
* Whether the merge is horizontal (left/right) or vertical (up/down).
*
* @readonly
* @member {Boolean} #isHorizontal
*/
this.isHorizontal = this.direction == 'right' || this.direction == 'left';
}
/**
* @inheritDoc
*/
refresh() {
const cellToMerge = this._getMergeableCell();
this.value = cellToMerge;
this.isEnabled = !!cellToMerge;
}
/**
* Executes the command.
*
* Depending on the command's {@link #direction} value, it will merge the cell that is to the `'left'`, `'right'`, `'up'` or `'down'`.
*
* @fires execute
*/
execute() {
const model = this.editor.model;
const doc = model.document;
const tableCell = getTableCellsContainingSelection( doc.selection )[ 0 ];
const cellToMerge = this.value;
const direction = this.direction;
model.change( writer => {
const isMergeNext = direction == 'right' || direction == 'down';
// The merge mechanism is always the same so sort cells to be merged.
const cellToExpand = isMergeNext ? tableCell : cellToMerge;
const cellToRemove = isMergeNext ? cellToMerge : tableCell;
// Cache the parent of cell to remove for later check.
const removedTableCellRow = cellToRemove.parent;
mergeTableCells( cellToRemove, cellToExpand, writer );
const spanAttribute = this.isHorizontal ? 'colspan' : 'rowspan';
const cellSpan = parseInt( tableCell.getAttribute( spanAttribute ) || 1 );
const cellToMergeSpan = parseInt( cellToMerge.getAttribute( spanAttribute ) || 1 );
// Update table cell span attribute and merge set selection on merged contents.
writer.setAttribute( spanAttribute, cellSpan + cellToMergeSpan, cellToExpand );
writer.setSelection( writer.createRangeIn( cellToExpand ) );
const tableUtils = this.editor.plugins.get( 'TableUtils' );
const table = removedTableCellRow.findAncestor( 'table' );
// Remove empty rows and columns after merging.
removeEmptyRowsColumns( table, tableUtils );
} );
}
/**
* Returns a cell that can be merged with the current cell depending on the command's direction.
*
* @returns {module:engine/model/element~Element|undefined}
* @private
*/
_getMergeableCell() {
const model = this.editor.model;
const doc = model.document;
const tableCell = getTableCellsContainingSelection( doc.selection )[ 0 ];
if ( !tableCell ) {
return;
}
const tableUtils = this.editor.plugins.get( 'TableUtils' );
// First get the cell on proper direction.
const cellToMerge = this.isHorizontal ?
getHorizontalCell( tableCell, this.direction, tableUtils ) :
getVerticalCell( tableCell, this.direction );
if ( !cellToMerge ) {
return;
}
// If found check if the span perpendicular to merge direction is equal on both cells.
const spanAttribute = this.isHorizontal ? 'rowspan' : 'colspan';
const span = parseInt( tableCell.getAttribute( spanAttribute ) || 1 );
const cellToMergeSpan = parseInt( cellToMerge.getAttribute( spanAttribute ) || 1 );
if ( cellToMergeSpan === span ) {
return cellToMerge;
}
}
}
// Returns the cell that can be merged horizontally.
//
// @param {module:engine/model/element~Element} tableCell
// @param {String} direction
// @returns {module:engine/model/node~Node|null}
function getHorizontalCell( tableCell, direction, tableUtils ) {
const tableRow = tableCell.parent;
const table = tableRow.parent;
const horizontalCell = direction == 'right' ? tableCell.nextSibling : tableCell.previousSibling;
const hasHeadingColumns = ( table.getAttribute( 'headingColumns' ) || 0 ) > 0;
if ( !horizontalCell ) {
return;
}
// Sort cells:
const cellOnLeft = direction == 'right' ? tableCell : horizontalCell;
const cellOnRight = direction == 'right' ? horizontalCell : tableCell;
// Get their column indexes:
const { column: leftCellColumn } = tableUtils.getCellLocation( cellOnLeft );
const { column: rightCellColumn } = tableUtils.getCellLocation( cellOnRight );
const leftCellSpan = parseInt( cellOnLeft.getAttribute( 'colspan' ) || 1 );
const isCellOnLeftInHeadingColumn = isHeadingColumnCell( tableUtils, cellOnLeft, table );
const isCellOnRightInHeadingColumn = isHeadingColumnCell( tableUtils, cellOnRight, table );
// We cannot merge heading columns cells with regular cells.
if ( hasHeadingColumns && isCellOnLeftInHeadingColumn != isCellOnRightInHeadingColumn ) {
return;
}
// The cell on the right must have index that is distant to the cell on the left by the left cell's width (colspan).
const cellsAreTouching = leftCellColumn + leftCellSpan === rightCellColumn;
// If the right cell's column index is different it means that there are rowspanned cells between them.
return cellsAreTouching ? horizontalCell : undefined;
}
// Returns the cell that can be merged vertically.
//
// @param {module:engine/model/element~Element} tableCell
// @param {String} direction
// @returns {module:engine/model/node~Node|null}
function getVerticalCell( tableCell, direction ) {
const tableRow = tableCell.parent;
const table = tableRow.parent;
const rowIndex = table.getChildIndex( tableRow );
// Don't search for mergeable cell if direction points out of the table.
if ( ( direction == 'down' && rowIndex === table.childCount - 1 ) || ( direction == 'up' && rowIndex === 0 ) ) {
return;
}
const rowspan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
const headingRows = table.getAttribute( 'headingRows' ) || 0;
const isMergeWithBodyCell = direction == 'down' && ( rowIndex + rowspan ) === headingRows;
const isMergeWithHeadCell = direction == 'up' && rowIndex === headingRows;
// Don't search for mergeable cell if direction points out of the current table section.
if ( headingRows && ( isMergeWithBodyCell || isMergeWithHeadCell ) ) {
return;
}
const currentCellRowSpan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
const rowOfCellToMerge = direction == 'down' ? rowIndex + currentCellRowSpan : rowIndex;
const tableMap = [ ...new TableWalker( table, { endRow: rowOfCellToMerge } ) ];
const currentCellData = tableMap.find( value => value.cell === tableCell );
const mergeColumn = currentCellData.column;
const cellToMergeData = tableMap.find( ( { row, cellHeight, column } ) => {
if ( column !== mergeColumn ) {
return false;
}
if ( direction == 'down' ) {
// If merging a cell below the mergeRow is already calculated.
return row === rowOfCellToMerge;
} else {
// If merging a cell above calculate if it spans to mergeRow.
return rowOfCellToMerge === row + cellHeight;
}
} );
return cellToMergeData && cellToMergeData.cell;
}
// Merges two table cells. It will ensure that after merging cells with an empty paragraph, the resulting table cell will only have one
// paragraph. If one of the merged table cells is empty, the merged table cell will have the contents of the non-empty table cell.
// If both are empty, the merged table cell will have only one empty paragraph.
//
// @param {module:engine/model/element~Element} cellToRemove
// @param {module:engine/model/element~Element} cellToExpand
// @param {module:engine/model/writer~Writer} writer
function mergeTableCells( cellToRemove, cellToExpand, writer ) {
if ( !isEmpty( cellToRemove ) ) {
if ( isEmpty( cellToExpand ) ) {
writer.remove( writer.createRangeIn( cellToExpand ) );
}
writer.move( writer.createRangeIn( cellToRemove ), writer.createPositionAt( cellToExpand, 'end' ) );
}
// Remove merged table cell.
writer.remove( cellToRemove );
}
// Checks if the passed table cell contains an empty paragraph.
//
// @param {module:engine/model/element~Element} tableCell
// @returns {Boolean}
function isEmpty( tableCell ) {
return tableCell.childCount == 1 && tableCell.getChild( 0 ).is( 'element', 'paragraph' ) && tableCell.getChild( 0 ).isEmpty;
}