@ckeditor/ckeditor5-table 32.0.0 → 33.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/table.js +2 -2
- package/build/table.js.map +1 -0
- package/build/translations/el.js +1 -0
- package/build/translations/es.js +1 -1
- package/lang/translations/el.po +261 -0
- package/lang/translations/es.po +32 -32
- package/package.json +23 -21
- package/src/commands/insertcolumncommand.js +4 -4
- package/src/commands/insertrowcommand.js +4 -4
- package/src/commands/mergecellcommand.js +4 -5
- package/src/commands/mergecellscommand.js +5 -4
- package/src/commands/removecolumncommand.js +8 -7
- package/src/commands/removerowcommand.js +5 -6
- package/src/commands/selectcolumncommand.js +4 -4
- package/src/commands/selectrowcommand.js +5 -5
- package/src/commands/setheadercolumncommand.js +5 -4
- package/src/commands/setheaderrowcommand.js +7 -4
- package/src/commands/splitcellcommand.js +4 -4
- package/src/converters/downcast.js +76 -407
- package/src/converters/{table-cell-refresh-post-fixer.js → table-cell-refresh-handler.js} +8 -19
- package/src/converters/table-headings-refresh-handler.js +68 -0
- package/src/plaintableoutput.js +151 -0
- package/src/tablecellproperties/commands/tablecellpropertycommand.js +4 -3
- package/src/tableclipboard.js +18 -15
- package/src/tableediting.js +48 -27
- package/src/tablekeyboard.js +6 -5
- package/src/tablemouse.js +6 -4
- package/src/tableselection.js +9 -8
- package/src/tableutils.js +310 -0
- package/theme/table.css +1 -1
- package/src/converters/table-heading-rows-refresh-post-fixer.js +0 -72
- package/src/utils/selection.js +0 -276
package/src/tableutils.js
CHANGED
|
@@ -775,6 +775,288 @@ export default class TableUtils extends Plugin {
|
|
|
775
775
|
return Array.from( table.getChildren() )
|
|
776
776
|
.reduce( ( rowCount, child ) => child.is( 'element', 'tableRow' ) ? rowCount + 1 : rowCount, 0 );
|
|
777
777
|
}
|
|
778
|
+
|
|
779
|
+
/**
|
|
780
|
+
* Creates an instance of the table walker.
|
|
781
|
+
*
|
|
782
|
+
* The table walker iterates internally by traversing the table from row index = 0 and column index = 0.
|
|
783
|
+
* It walks row by row and column by column in order to output values defined in the options.
|
|
784
|
+
* By default it will output only the locations that are occupied by a cell. To include also spanned rows and columns,
|
|
785
|
+
* pass the `includeAllSlots` option.
|
|
786
|
+
*
|
|
787
|
+
* @protected
|
|
788
|
+
* @param {module:engine/model/element~Element} table A table over which the walker iterates.
|
|
789
|
+
* @param {Object} [options={}] An object with configuration.
|
|
790
|
+
* @param {Number} [options.row] A row index for which this iterator will output cells.
|
|
791
|
+
* Can't be used together with `startRow` and `endRow`.
|
|
792
|
+
* @param {Number} [options.startRow=0] A row index from which this iterator should start. Can't be used together with `row`.
|
|
793
|
+
* @param {Number} [options.endRow] A row index at which this iterator should end. Can't be used together with `row`.
|
|
794
|
+
* @param {Number} [options.column] A column index for which this iterator will output cells.
|
|
795
|
+
* Can't be used together with `startColumn` and `endColumn`.
|
|
796
|
+
* @param {Number} [options.startColumn=0] A column index from which this iterator should start. Can't be used together with `column`.
|
|
797
|
+
* @param {Number} [options.endColumn] A column index at which this iterator should end. Can't be used together with `column`.
|
|
798
|
+
* @param {Boolean} [options.includeAllSlots=false] Also return values for spanned cells.
|
|
799
|
+
*/
|
|
800
|
+
createTableWalker( table, options = {} ) {
|
|
801
|
+
return new TableWalker( table, options );
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
/**
|
|
805
|
+
* Returns all model table cells that are fully selected (from the outside)
|
|
806
|
+
* within the provided model selection's ranges.
|
|
807
|
+
*
|
|
808
|
+
* To obtain the cells selected from the inside, use
|
|
809
|
+
* {@link #getTableCellsContainingSelection}.
|
|
810
|
+
*
|
|
811
|
+
* @param {module:engine/model/selection~Selection} selection
|
|
812
|
+
* @returns {Array.<module:engine/model/element~Element>}
|
|
813
|
+
*/
|
|
814
|
+
getSelectedTableCells( selection ) {
|
|
815
|
+
const cells = [];
|
|
816
|
+
|
|
817
|
+
for ( const range of this.sortRanges( selection.getRanges() ) ) {
|
|
818
|
+
const element = range.getContainedElement();
|
|
819
|
+
|
|
820
|
+
if ( element && element.is( 'element', 'tableCell' ) ) {
|
|
821
|
+
cells.push( element );
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
return cells;
|
|
826
|
+
}
|
|
827
|
+
|
|
828
|
+
/**
|
|
829
|
+
* Returns all model table cells that the provided model selection's ranges
|
|
830
|
+
* {@link module:engine/model/range~Range#start} inside.
|
|
831
|
+
*
|
|
832
|
+
* To obtain the cells selected from the outside, use
|
|
833
|
+
* {@link #getSelectedTableCells}.
|
|
834
|
+
*
|
|
835
|
+
* @param {module:engine/model/selection~Selection} selection
|
|
836
|
+
* @returns {Array.<module:engine/model/element~Element>}
|
|
837
|
+
*/
|
|
838
|
+
getTableCellsContainingSelection( selection ) {
|
|
839
|
+
const cells = [];
|
|
840
|
+
|
|
841
|
+
for ( const range of selection.getRanges() ) {
|
|
842
|
+
const cellWithSelection = range.start.findAncestor( 'tableCell' );
|
|
843
|
+
|
|
844
|
+
if ( cellWithSelection ) {
|
|
845
|
+
cells.push( cellWithSelection );
|
|
846
|
+
}
|
|
847
|
+
}
|
|
848
|
+
|
|
849
|
+
return cells;
|
|
850
|
+
}
|
|
851
|
+
|
|
852
|
+
/**
|
|
853
|
+
* Returns all model table cells that are either completely selected
|
|
854
|
+
* by selection ranges or host selection range
|
|
855
|
+
* {@link module:engine/model/range~Range#start start positions} inside them.
|
|
856
|
+
*
|
|
857
|
+
* Combines {@link #getTableCellsContainingSelection} and
|
|
858
|
+
* {@link #getSelectedTableCells}.
|
|
859
|
+
*
|
|
860
|
+
* @param {module:engine/model/selection~Selection} selection
|
|
861
|
+
* @returns {Array.<module:engine/model/element~Element>}
|
|
862
|
+
*/
|
|
863
|
+
getSelectionAffectedTableCells( selection ) {
|
|
864
|
+
const selectedCells = this.getSelectedTableCells( selection );
|
|
865
|
+
|
|
866
|
+
if ( selectedCells.length ) {
|
|
867
|
+
return selectedCells;
|
|
868
|
+
}
|
|
869
|
+
|
|
870
|
+
return this.getTableCellsContainingSelection( selection );
|
|
871
|
+
}
|
|
872
|
+
|
|
873
|
+
/**
|
|
874
|
+
* Returns an object with the `first` and `last` row index contained in the given `tableCells`.
|
|
875
|
+
*
|
|
876
|
+
* const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
|
|
877
|
+
*
|
|
878
|
+
* const { first, last } = getRowIndexes( selectedTableCells );
|
|
879
|
+
*
|
|
880
|
+
* console.log( `Selected rows: ${ first } to ${ last }` );
|
|
881
|
+
*
|
|
882
|
+
* @param {Array.<module:engine/model/element~Element>} tableCells
|
|
883
|
+
* @returns {Object} Returns an object with the `first` and `last` table row indexes.
|
|
884
|
+
*/
|
|
885
|
+
getRowIndexes( tableCells ) {
|
|
886
|
+
const indexes = tableCells.map( cell => cell.parent.index );
|
|
887
|
+
|
|
888
|
+
return this._getFirstLastIndexesObject( indexes );
|
|
889
|
+
}
|
|
890
|
+
|
|
891
|
+
/**
|
|
892
|
+
* Returns an object with the `first` and `last` column index contained in the given `tableCells`.
|
|
893
|
+
*
|
|
894
|
+
* const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
|
|
895
|
+
*
|
|
896
|
+
* const { first, last } = getColumnIndexes( selectedTableCells );
|
|
897
|
+
*
|
|
898
|
+
* console.log( `Selected columns: ${ first } to ${ last }` );
|
|
899
|
+
*
|
|
900
|
+
* @param {Array.<module:engine/model/element~Element>} tableCells
|
|
901
|
+
* @returns {Object} Returns an object with the `first` and `last` table column indexes.
|
|
902
|
+
*/
|
|
903
|
+
getColumnIndexes( tableCells ) {
|
|
904
|
+
const table = tableCells[ 0 ].findAncestor( 'table' );
|
|
905
|
+
const tableMap = [ ...new TableWalker( table ) ];
|
|
906
|
+
|
|
907
|
+
const indexes = tableMap
|
|
908
|
+
.filter( entry => tableCells.includes( entry.cell ) )
|
|
909
|
+
.map( entry => entry.column );
|
|
910
|
+
|
|
911
|
+
return this._getFirstLastIndexesObject( indexes );
|
|
912
|
+
}
|
|
913
|
+
|
|
914
|
+
/**
|
|
915
|
+
* Checks if the selection contains cells that do not exceed rectangular selection.
|
|
916
|
+
*
|
|
917
|
+
* In a table below:
|
|
918
|
+
*
|
|
919
|
+
* ┌───┬───┬───┬───┐
|
|
920
|
+
* │ a │ b │ c │ d │
|
|
921
|
+
* ├───┴───┼───┤ │
|
|
922
|
+
* │ e │ f │ │
|
|
923
|
+
* │ ├───┼───┤
|
|
924
|
+
* │ │ g │ h │
|
|
925
|
+
* └───────┴───┴───┘
|
|
926
|
+
*
|
|
927
|
+
* Valid selections are these which create a solid rectangle (without gaps), such as:
|
|
928
|
+
* - a, b (two horizontal cells)
|
|
929
|
+
* - c, f (two vertical cells)
|
|
930
|
+
* - a, b, e (cell "e" spans over four cells)
|
|
931
|
+
* - c, d, f (cell d spans over a cell in the row below)
|
|
932
|
+
*
|
|
933
|
+
* While an invalid selection would be:
|
|
934
|
+
* - a, c (the unselected cell "b" creates a gap)
|
|
935
|
+
* - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)
|
|
936
|
+
*
|
|
937
|
+
* @param {Array.<module:engine/model/element~Element>} selectedTableCells
|
|
938
|
+
* @returns {Boolean}
|
|
939
|
+
*/
|
|
940
|
+
isSelectionRectangular( selectedTableCells ) {
|
|
941
|
+
if ( selectedTableCells.length < 2 || !this._areCellInTheSameTableSection( selectedTableCells ) ) {
|
|
942
|
+
return false;
|
|
943
|
+
}
|
|
944
|
+
|
|
945
|
+
// A valid selection is a fully occupied rectangle composed of table cells.
|
|
946
|
+
// Below we will calculate the area of a selected table cells and the area of valid selection.
|
|
947
|
+
// The area of a valid selection is defined by top-left and bottom-right cells.
|
|
948
|
+
const rows = new Set();
|
|
949
|
+
const columns = new Set();
|
|
950
|
+
|
|
951
|
+
let areaOfSelectedCells = 0;
|
|
952
|
+
|
|
953
|
+
for ( const tableCell of selectedTableCells ) {
|
|
954
|
+
const { row, column } = this.getCellLocation( tableCell );
|
|
955
|
+
const rowspan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
|
|
956
|
+
const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 );
|
|
957
|
+
|
|
958
|
+
// Record row & column indexes of current cell.
|
|
959
|
+
rows.add( row );
|
|
960
|
+
columns.add( column );
|
|
961
|
+
|
|
962
|
+
// For cells that spans over multiple rows add also the last row that this cell spans over.
|
|
963
|
+
if ( rowspan > 1 ) {
|
|
964
|
+
rows.add( row + rowspan - 1 );
|
|
965
|
+
}
|
|
966
|
+
|
|
967
|
+
// For cells that spans over multiple columns add also the last column that this cell spans over.
|
|
968
|
+
if ( colspan > 1 ) {
|
|
969
|
+
columns.add( column + colspan - 1 );
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
areaOfSelectedCells += ( rowspan * colspan );
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
// We can only merge table cells that are in adjacent rows...
|
|
976
|
+
const areaOfValidSelection = getBiggestRectangleArea( rows, columns );
|
|
977
|
+
|
|
978
|
+
return areaOfValidSelection == areaOfSelectedCells;
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
/**
|
|
982
|
+
* Returns array of sorted ranges.
|
|
983
|
+
*
|
|
984
|
+
* @param {Iterable.<module:engine/model/range~Range>} ranges
|
|
985
|
+
* @return {Array.<module:engine/model/range~Range>}
|
|
986
|
+
*/
|
|
987
|
+
sortRanges( ranges ) {
|
|
988
|
+
return Array.from( ranges ).sort( compareRangeOrder );
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
/**
|
|
992
|
+
* Helper method to get an object with `first` and `last` indexes from an unsorted array of indexes.
|
|
993
|
+
*
|
|
994
|
+
* @private
|
|
995
|
+
* @param {Number[]} indexes
|
|
996
|
+
* @returns {Object}
|
|
997
|
+
*/
|
|
998
|
+
_getFirstLastIndexesObject( indexes ) {
|
|
999
|
+
const allIndexesSorted = indexes.sort( ( indexA, indexB ) => indexA - indexB );
|
|
1000
|
+
|
|
1001
|
+
const first = allIndexesSorted[ 0 ];
|
|
1002
|
+
const last = allIndexesSorted[ allIndexesSorted.length - 1 ];
|
|
1003
|
+
|
|
1004
|
+
return { first, last };
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
/**
|
|
1008
|
+
* Checks if the selection does not mix a header (column or row) with other cells.
|
|
1009
|
+
*
|
|
1010
|
+
* For instance, in the table below valid selections consist of cells with the same letter only.
|
|
1011
|
+
* So, a-a (same heading row and column) or d-d (body cells) are valid while c-d or a-b are not.
|
|
1012
|
+
*
|
|
1013
|
+
* header columns
|
|
1014
|
+
* ↓ ↓
|
|
1015
|
+
* ┌───┬───┬───┬───┐
|
|
1016
|
+
* │ a │ a │ b │ b │ ← header row
|
|
1017
|
+
* ├───┼───┼───┼───┤
|
|
1018
|
+
* │ c │ c │ d │ d │
|
|
1019
|
+
* ├───┼───┼───┼───┤
|
|
1020
|
+
* │ c │ c │ d │ d │
|
|
1021
|
+
* └───┴───┴───┴───┘
|
|
1022
|
+
*
|
|
1023
|
+
* @private
|
|
1024
|
+
* @param {Array.<module:engine/model/element~Element>} tableCells
|
|
1025
|
+
* @returns {Boolean}
|
|
1026
|
+
*/
|
|
1027
|
+
_areCellInTheSameTableSection( tableCells ) {
|
|
1028
|
+
const table = tableCells[ 0 ].findAncestor( 'table' );
|
|
1029
|
+
|
|
1030
|
+
const rowIndexes = this.getRowIndexes( tableCells );
|
|
1031
|
+
const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
|
|
1032
|
+
|
|
1033
|
+
// Calculating row indexes is a bit cheaper so if this check fails we can't merge.
|
|
1034
|
+
if ( !this._areIndexesInSameSection( rowIndexes, headingRows ) ) {
|
|
1035
|
+
return false;
|
|
1036
|
+
}
|
|
1037
|
+
|
|
1038
|
+
const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
|
|
1039
|
+
const columnIndexes = this.getColumnIndexes( tableCells );
|
|
1040
|
+
|
|
1041
|
+
// Similarly cells must be in same column section.
|
|
1042
|
+
return this._areIndexesInSameSection( columnIndexes, headingColumns );
|
|
1043
|
+
}
|
|
1044
|
+
|
|
1045
|
+
/**
|
|
1046
|
+
* Unified check if table rows/columns indexes are in the same heading/body section.
|
|
1047
|
+
*
|
|
1048
|
+
* @private
|
|
1049
|
+
* @param {Object} params
|
|
1050
|
+
* @param {Number} params.first
|
|
1051
|
+
* @param {Number} params.last
|
|
1052
|
+
* @param {Number} headingSectionSize
|
|
1053
|
+
*/
|
|
1054
|
+
_areIndexesInSameSection( { first, last }, headingSectionSize ) {
|
|
1055
|
+
const firstCellIsInHeading = first < headingSectionSize;
|
|
1056
|
+
const lastCellIsInHeading = last < headingSectionSize;
|
|
1057
|
+
|
|
1058
|
+
return firstCellIsInHeading === lastCellIsInHeading;
|
|
1059
|
+
}
|
|
778
1060
|
}
|
|
779
1061
|
|
|
780
1062
|
// Creates empty rows at the given index in an existing table.
|
|
@@ -943,3 +1225,31 @@ function moveCellsToRow( table, targetRowIndex, cellsToMove, writer ) {
|
|
|
943
1225
|
}
|
|
944
1226
|
}
|
|
945
1227
|
}
|
|
1228
|
+
|
|
1229
|
+
function compareRangeOrder( rangeA, rangeB ) {
|
|
1230
|
+
// Since table cell ranges are disjoint, it's enough to check their start positions.
|
|
1231
|
+
const posA = rangeA.start;
|
|
1232
|
+
const posB = rangeB.start;
|
|
1233
|
+
|
|
1234
|
+
// Checking for equal position (returning 0) is not needed because this would be either:
|
|
1235
|
+
// a. Intersecting range (not allowed by model)
|
|
1236
|
+
// b. Collapsed range on the same position (allowed by model but should not happen).
|
|
1237
|
+
return posA.isBefore( posB ) ? -1 : 1;
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
// Calculates the area of a maximum rectangle that can span over the provided row & column indexes.
|
|
1241
|
+
//
|
|
1242
|
+
// @param {Array.<Number>} rows
|
|
1243
|
+
// @param {Array.<Number>} columns
|
|
1244
|
+
// @returns {Number}
|
|
1245
|
+
function getBiggestRectangleArea( rows, columns ) {
|
|
1246
|
+
const rowsIndexes = Array.from( rows.values() );
|
|
1247
|
+
const columnIndexes = Array.from( columns.values() );
|
|
1248
|
+
|
|
1249
|
+
const lastRow = Math.max( ...rowsIndexes );
|
|
1250
|
+
const firstRow = Math.min( ...rowsIndexes );
|
|
1251
|
+
const lastColumn = Math.max( ...columnIndexes );
|
|
1252
|
+
const firstColumn = Math.min( ...columnIndexes );
|
|
1253
|
+
|
|
1254
|
+
return ( lastRow - firstRow + 1 ) * ( lastColumn - firstColumn + 1 );
|
|
1255
|
+
}
|
package/theme/table.css
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/* Text alignment of the table header should match the editor settings and override the native browser styling,
|
|
46
|
-
when content is available outside the
|
|
46
|
+
when content is available outside the editor. See https://github.com/ckeditor/ckeditor5/issues/6638 */
|
|
47
47
|
.ck-content[dir="rtl"] .table th {
|
|
48
48
|
text-align: right;
|
|
49
49
|
}
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @module table/converters/table-heading-rows-refresh-post-fixer
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Injects a table post-fixer into the model which marks the table in the differ to have it re-rendered.
|
|
12
|
-
*
|
|
13
|
-
* Table heading rows are represented in the model by a `headingRows` attribute. However, in the view, it's represented as separate
|
|
14
|
-
* sections of the table (`<thead>` or `<tbody>`) and changing `headingRows` attribute requires moving table rows between two sections.
|
|
15
|
-
* This causes problems with structural changes in a table (like adding and removing rows) thus atomic converters cannot be used.
|
|
16
|
-
*
|
|
17
|
-
* When table `headingRows` attribute changes, the entire table is re-rendered.
|
|
18
|
-
*
|
|
19
|
-
* @param {module:engine/model/model~Model} model
|
|
20
|
-
*/
|
|
21
|
-
export default function injectTableHeadingRowsRefreshPostFixer( model ) {
|
|
22
|
-
model.document.registerPostFixer( () => tableHeadingRowsRefreshPostFixer( model ) );
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
function tableHeadingRowsRefreshPostFixer( model ) {
|
|
26
|
-
const differ = model.document.differ;
|
|
27
|
-
|
|
28
|
-
// Stores tables to be refreshed so the table will be refreshed once for multiple changes.
|
|
29
|
-
const tablesToRefresh = new Set();
|
|
30
|
-
|
|
31
|
-
for ( const change of differ.getChanges() ) {
|
|
32
|
-
if ( change.type === 'attribute' ) {
|
|
33
|
-
const element = change.range.start.nodeAfter;
|
|
34
|
-
|
|
35
|
-
if ( element && element.is( 'element', 'table' ) && change.attributeKey === 'headingRows' ) {
|
|
36
|
-
tablesToRefresh.add( element );
|
|
37
|
-
}
|
|
38
|
-
} else {
|
|
39
|
-
/* istanbul ignore else */
|
|
40
|
-
if ( change.type === 'insert' || change.type === 'remove' ) {
|
|
41
|
-
if ( change.name === 'tableRow' ) {
|
|
42
|
-
const table = change.position.findAncestor( 'table' );
|
|
43
|
-
const headingRows = table.getAttribute( 'headingRows' ) || 0;
|
|
44
|
-
|
|
45
|
-
if ( change.position.offset < headingRows ) {
|
|
46
|
-
tablesToRefresh.add( table );
|
|
47
|
-
}
|
|
48
|
-
} else if ( change.name === 'tableCell' ) {
|
|
49
|
-
const table = change.position.findAncestor( 'table' );
|
|
50
|
-
const headingColumns = table.getAttribute( 'headingColumns' ) || 0;
|
|
51
|
-
|
|
52
|
-
if ( change.position.offset < headingColumns ) {
|
|
53
|
-
tablesToRefresh.add( table );
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
if ( tablesToRefresh.size ) {
|
|
61
|
-
// @if CK_DEBUG_TABLE // console.log( `Post-fixing table: refreshing heading rows (${ tablesToRefresh.size }).` );
|
|
62
|
-
|
|
63
|
-
for ( const table of tablesToRefresh.values() ) {
|
|
64
|
-
// Should be handled by a `triggerBy` configuration. See: https://github.com/ckeditor/ckeditor5/issues/8138.
|
|
65
|
-
differ.refreshItem( table );
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
return true;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return false;
|
|
72
|
-
}
|
package/src/utils/selection.js
DELETED
|
@@ -1,276 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
|
|
3
|
-
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* @module table/utils/selection
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import TableWalker from '../tablewalker';
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* Returns all model table cells that are fully selected (from the outside)
|
|
14
|
-
* within the provided model selection's ranges.
|
|
15
|
-
*
|
|
16
|
-
* To obtain the cells selected from the inside, use
|
|
17
|
-
* {@link module:table/utils/selection~getTableCellsContainingSelection}.
|
|
18
|
-
*
|
|
19
|
-
* @param {module:engine/model/selection~Selection} selection
|
|
20
|
-
* @returns {Array.<module:engine/model/element~Element>}
|
|
21
|
-
*/
|
|
22
|
-
export function getSelectedTableCells( selection ) {
|
|
23
|
-
const cells = [];
|
|
24
|
-
|
|
25
|
-
for ( const range of sortRanges( selection.getRanges() ) ) {
|
|
26
|
-
const element = range.getContainedElement();
|
|
27
|
-
|
|
28
|
-
if ( element && element.is( 'element', 'tableCell' ) ) {
|
|
29
|
-
cells.push( element );
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
return cells;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Returns all model table cells that the provided model selection's ranges
|
|
38
|
-
* {@link module:engine/model/range~Range#start} inside.
|
|
39
|
-
*
|
|
40
|
-
* To obtain the cells selected from the outside, use
|
|
41
|
-
* {@link module:table/utils/selection~getSelectedTableCells}.
|
|
42
|
-
*
|
|
43
|
-
* @param {module:engine/model/selection~Selection} selection
|
|
44
|
-
* @returns {Array.<module:engine/model/element~Element>}
|
|
45
|
-
*/
|
|
46
|
-
export function getTableCellsContainingSelection( selection ) {
|
|
47
|
-
const cells = [];
|
|
48
|
-
|
|
49
|
-
for ( const range of selection.getRanges() ) {
|
|
50
|
-
const cellWithSelection = range.start.findAncestor( 'tableCell' );
|
|
51
|
-
|
|
52
|
-
if ( cellWithSelection ) {
|
|
53
|
-
cells.push( cellWithSelection );
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return cells;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Returns all model table cells that are either completely selected
|
|
62
|
-
* by selection ranges or host selection range
|
|
63
|
-
* {@link module:engine/model/range~Range#start start positions} inside them.
|
|
64
|
-
*
|
|
65
|
-
* Combines {@link module:table/utils/selection~getTableCellsContainingSelection} and
|
|
66
|
-
* {@link module:table/utils/selection~getSelectedTableCells}.
|
|
67
|
-
*
|
|
68
|
-
* @param {module:engine/model/selection~Selection} selection
|
|
69
|
-
* @returns {Array.<module:engine/model/element~Element>}
|
|
70
|
-
*/
|
|
71
|
-
export function getSelectionAffectedTableCells( selection ) {
|
|
72
|
-
const selectedCells = getSelectedTableCells( selection );
|
|
73
|
-
|
|
74
|
-
if ( selectedCells.length ) {
|
|
75
|
-
return selectedCells;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return getTableCellsContainingSelection( selection );
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Returns an object with the `first` and `last` row index contained in the given `tableCells`.
|
|
83
|
-
*
|
|
84
|
-
* const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
|
|
85
|
-
*
|
|
86
|
-
* const { first, last } = getRowIndexes( selectedTableCells );
|
|
87
|
-
*
|
|
88
|
-
* console.log( `Selected rows: ${ first } to ${ last }` );
|
|
89
|
-
*
|
|
90
|
-
* @param {Array.<module:engine/model/element~Element>} tableCells
|
|
91
|
-
* @returns {Object} Returns an object with the `first` and `last` table row indexes.
|
|
92
|
-
*/
|
|
93
|
-
export function getRowIndexes( tableCells ) {
|
|
94
|
-
const indexes = tableCells.map( cell => cell.parent.index );
|
|
95
|
-
|
|
96
|
-
return getFirstLastIndexesObject( indexes );
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/**
|
|
100
|
-
* Returns an object with the `first` and `last` column index contained in the given `tableCells`.
|
|
101
|
-
*
|
|
102
|
-
* const selectedTableCells = getSelectedTableCells( editor.model.document.selection );
|
|
103
|
-
*
|
|
104
|
-
* const { first, last } = getColumnIndexes( selectedTableCells );
|
|
105
|
-
*
|
|
106
|
-
* console.log( `Selected columns: ${ first } to ${ last }` );
|
|
107
|
-
*
|
|
108
|
-
* @param {Array.<module:engine/model/element~Element>} tableCells
|
|
109
|
-
* @returns {Object} Returns an object with the `first` and `last` table column indexes.
|
|
110
|
-
*/
|
|
111
|
-
export function getColumnIndexes( tableCells ) {
|
|
112
|
-
const table = tableCells[ 0 ].findAncestor( 'table' );
|
|
113
|
-
const tableMap = [ ...new TableWalker( table ) ];
|
|
114
|
-
|
|
115
|
-
const indexes = tableMap
|
|
116
|
-
.filter( entry => tableCells.includes( entry.cell ) )
|
|
117
|
-
.map( entry => entry.column );
|
|
118
|
-
|
|
119
|
-
return getFirstLastIndexesObject( indexes );
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/**
|
|
123
|
-
* Checks if the selection contains cells that do not exceed rectangular selection.
|
|
124
|
-
*
|
|
125
|
-
* In a table below:
|
|
126
|
-
*
|
|
127
|
-
* ┌───┬───┬───┬───┐
|
|
128
|
-
* │ a │ b │ c │ d │
|
|
129
|
-
* ├───┴───┼───┤ │
|
|
130
|
-
* │ e │ f │ │
|
|
131
|
-
* │ ├───┼───┤
|
|
132
|
-
* │ │ g │ h │
|
|
133
|
-
* └───────┴───┴───┘
|
|
134
|
-
*
|
|
135
|
-
* Valid selections are these which create a solid rectangle (without gaps), such as:
|
|
136
|
-
* - a, b (two horizontal cells)
|
|
137
|
-
* - c, f (two vertical cells)
|
|
138
|
-
* - a, b, e (cell "e" spans over four cells)
|
|
139
|
-
* - c, d, f (cell d spans over a cell in the row below)
|
|
140
|
-
*
|
|
141
|
-
* While an invalid selection would be:
|
|
142
|
-
* - a, c (the unselected cell "b" creates a gap)
|
|
143
|
-
* - f, g, h (cell "d" spans over a cell from the row of "f" cell - thus creates a gap)
|
|
144
|
-
*
|
|
145
|
-
* @param {Array.<module:engine/model/element~Element>} selectedTableCells
|
|
146
|
-
* @param {module:table/tableutils~TableUtils} tableUtils
|
|
147
|
-
* @returns {Boolean}
|
|
148
|
-
*/
|
|
149
|
-
export function isSelectionRectangular( selectedTableCells, tableUtils ) {
|
|
150
|
-
if ( selectedTableCells.length < 2 || !areCellInTheSameTableSection( selectedTableCells ) ) {
|
|
151
|
-
return false;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// A valid selection is a fully occupied rectangle composed of table cells.
|
|
155
|
-
// Below we will calculate the area of a selected table cells and the area of valid selection.
|
|
156
|
-
// The area of a valid selection is defined by top-left and bottom-right cells.
|
|
157
|
-
const rows = new Set();
|
|
158
|
-
const columns = new Set();
|
|
159
|
-
|
|
160
|
-
let areaOfSelectedCells = 0;
|
|
161
|
-
|
|
162
|
-
for ( const tableCell of selectedTableCells ) {
|
|
163
|
-
const { row, column } = tableUtils.getCellLocation( tableCell );
|
|
164
|
-
const rowspan = parseInt( tableCell.getAttribute( 'rowspan' ) || 1 );
|
|
165
|
-
const colspan = parseInt( tableCell.getAttribute( 'colspan' ) || 1 );
|
|
166
|
-
|
|
167
|
-
// Record row & column indexes of current cell.
|
|
168
|
-
rows.add( row );
|
|
169
|
-
columns.add( column );
|
|
170
|
-
|
|
171
|
-
// For cells that spans over multiple rows add also the last row that this cell spans over.
|
|
172
|
-
if ( rowspan > 1 ) {
|
|
173
|
-
rows.add( row + rowspan - 1 );
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
// For cells that spans over multiple columns add also the last column that this cell spans over.
|
|
177
|
-
if ( colspan > 1 ) {
|
|
178
|
-
columns.add( column + colspan - 1 );
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
areaOfSelectedCells += ( rowspan * colspan );
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
// We can only merge table cells that are in adjacent rows...
|
|
185
|
-
const areaOfValidSelection = getBiggestRectangleArea( rows, columns );
|
|
186
|
-
|
|
187
|
-
return areaOfValidSelection == areaOfSelectedCells;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* Returns array of sorted ranges.
|
|
192
|
-
*
|
|
193
|
-
* @param {Iterable.<module:engine/model/range~Range>} ranges
|
|
194
|
-
* @return {Array.<module:engine/model/range~Range>}
|
|
195
|
-
*/
|
|
196
|
-
export function sortRanges( ranges ) {
|
|
197
|
-
return Array.from( ranges ).sort( compareRangeOrder );
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
// Helper method to get an object with `first` and `last` indexes from an unsorted array of indexes.
|
|
201
|
-
function getFirstLastIndexesObject( indexes ) {
|
|
202
|
-
const allIndexesSorted = indexes.sort( ( indexA, indexB ) => indexA - indexB );
|
|
203
|
-
|
|
204
|
-
const first = allIndexesSorted[ 0 ];
|
|
205
|
-
const last = allIndexesSorted[ allIndexesSorted.length - 1 ];
|
|
206
|
-
|
|
207
|
-
return { first, last };
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
function compareRangeOrder( rangeA, rangeB ) {
|
|
211
|
-
// Since table cell ranges are disjoint, it's enough to check their start positions.
|
|
212
|
-
const posA = rangeA.start;
|
|
213
|
-
const posB = rangeB.start;
|
|
214
|
-
|
|
215
|
-
// Checking for equal position (returning 0) is not needed because this would be either:
|
|
216
|
-
// a. Intersecting range (not allowed by model)
|
|
217
|
-
// b. Collapsed range on the same position (allowed by model but should not happen).
|
|
218
|
-
return posA.isBefore( posB ) ? -1 : 1;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
// Calculates the area of a maximum rectangle that can span over the provided row & column indexes.
|
|
222
|
-
//
|
|
223
|
-
// @param {Array.<Number>} rows
|
|
224
|
-
// @param {Array.<Number>} columns
|
|
225
|
-
// @returns {Number}
|
|
226
|
-
function getBiggestRectangleArea( rows, columns ) {
|
|
227
|
-
const rowsIndexes = Array.from( rows.values() );
|
|
228
|
-
const columnIndexes = Array.from( columns.values() );
|
|
229
|
-
|
|
230
|
-
const lastRow = Math.max( ...rowsIndexes );
|
|
231
|
-
const firstRow = Math.min( ...rowsIndexes );
|
|
232
|
-
const lastColumn = Math.max( ...columnIndexes );
|
|
233
|
-
const firstColumn = Math.min( ...columnIndexes );
|
|
234
|
-
|
|
235
|
-
return ( lastRow - firstRow + 1 ) * ( lastColumn - firstColumn + 1 );
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
// Checks if the selection does not mix a header (column or row) with other cells.
|
|
239
|
-
//
|
|
240
|
-
// For instance, in the table below valid selections consist of cells with the same letter only.
|
|
241
|
-
// So, a-a (same heading row and column) or d-d (body cells) are valid while c-d or a-b are not.
|
|
242
|
-
//
|
|
243
|
-
// header columns
|
|
244
|
-
// ↓ ↓
|
|
245
|
-
// ┌───┬───┬───┬───┐
|
|
246
|
-
// │ a │ a │ b │ b │ ← header row
|
|
247
|
-
// ├───┼───┼───┼───┤
|
|
248
|
-
// │ c │ c │ d │ d │
|
|
249
|
-
// ├───┼───┼───┼───┤
|
|
250
|
-
// │ c │ c │ d │ d │
|
|
251
|
-
// └───┴───┴───┴───┘
|
|
252
|
-
function areCellInTheSameTableSection( tableCells ) {
|
|
253
|
-
const table = tableCells[ 0 ].findAncestor( 'table' );
|
|
254
|
-
|
|
255
|
-
const rowIndexes = getRowIndexes( tableCells );
|
|
256
|
-
const headingRows = parseInt( table.getAttribute( 'headingRows' ) || 0 );
|
|
257
|
-
|
|
258
|
-
// Calculating row indexes is a bit cheaper so if this check fails we can't merge.
|
|
259
|
-
if ( !areIndexesInSameSection( rowIndexes, headingRows ) ) {
|
|
260
|
-
return false;
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
const headingColumns = parseInt( table.getAttribute( 'headingColumns' ) || 0 );
|
|
264
|
-
const columnIndexes = getColumnIndexes( tableCells );
|
|
265
|
-
|
|
266
|
-
// Similarly cells must be in same column section.
|
|
267
|
-
return areIndexesInSameSection( columnIndexes, headingColumns );
|
|
268
|
-
}
|
|
269
|
-
|
|
270
|
-
// Unified check if table rows/columns indexes are in the same heading/body section.
|
|
271
|
-
function areIndexesInSameSection( { first, last }, headingSectionSize ) {
|
|
272
|
-
const firstCellIsInHeading = first < headingSectionSize;
|
|
273
|
-
const lastCellIsInHeading = last < headingSectionSize;
|
|
274
|
-
|
|
275
|
-
return firstCellIsInHeading === lastCellIsInHeading;
|
|
276
|
-
}
|