@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

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.
Files changed (254) hide show
  1. package/.eslintrc.js +3 -3
  2. package/CHANGELOG.md +16 -0
  3. package/dist/cjs/commands/misc.js +3 -3
  4. package/dist/cjs/nodeviews/TableCell.js +10 -10
  5. package/dist/cjs/nodeviews/TableContainer.js +83 -27
  6. package/dist/cjs/nodeviews/TableResizer.js +40 -19
  7. package/dist/cjs/nodeviews/TableRow.js +23 -23
  8. package/dist/cjs/pm-plugins/table-resizing/plugin.js +3 -3
  9. package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +4 -4
  10. package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +3 -3
  11. package/dist/cjs/ui/FloatingContextualMenu/styles.js +1 -1
  12. package/dist/cjs/ui/FloatingDragMenu/styles.js +1 -1
  13. package/dist/cjs/ui/common-styles.js +13 -13
  14. package/dist/cjs/ui/ui-styles.js +25 -25
  15. package/dist/cjs/utils/guidelines.js +7 -4
  16. package/dist/cjs/utils/merged-cells.js +3 -3
  17. package/dist/cjs/utils/snapping.js +7 -8
  18. package/dist/es2019/commands/misc.js +3 -3
  19. package/dist/es2019/nodeviews/TableContainer.js +70 -9
  20. package/dist/es2019/nodeviews/TableResizer.js +42 -21
  21. package/dist/es2019/nodeviews/TableRow.js +21 -21
  22. package/dist/es2019/pm-plugins/table-resizing/plugin.js +3 -3
  23. package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +4 -4
  24. package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +3 -3
  25. package/dist/es2019/ui/FloatingContextualMenu/styles.js +47 -47
  26. package/dist/es2019/ui/FloatingDragMenu/styles.js +30 -30
  27. package/dist/es2019/ui/common-styles.js +802 -816
  28. package/dist/es2019/ui/ui-styles.js +665 -678
  29. package/dist/es2019/utils/guidelines.js +5 -2
  30. package/dist/es2019/utils/merged-cells.js +3 -3
  31. package/dist/es2019/utils/snapping.js +5 -6
  32. package/dist/esm/commands/misc.js +3 -3
  33. package/dist/esm/nodeviews/TableCell.js +10 -10
  34. package/dist/esm/nodeviews/TableContainer.js +85 -29
  35. package/dist/esm/nodeviews/TableResizer.js +42 -21
  36. package/dist/esm/nodeviews/TableRow.js +23 -23
  37. package/dist/esm/pm-plugins/table-resizing/plugin.js +3 -3
  38. package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +4 -4
  39. package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +3 -3
  40. package/dist/esm/ui/FloatingContextualMenu/styles.js +1 -1
  41. package/dist/esm/ui/FloatingDragMenu/styles.js +1 -1
  42. package/dist/esm/ui/common-styles.js +13 -13
  43. package/dist/esm/ui/ui-styles.js +25 -25
  44. package/dist/esm/utils/guidelines.js +6 -3
  45. package/dist/esm/utils/merged-cells.js +3 -3
  46. package/dist/esm/utils/snapping.js +6 -7
  47. package/dist/types/nodeviews/TableResizer.d.ts +2 -1
  48. package/dist/types/pm-plugins/decorations/utils/index.d.ts +1 -1
  49. package/dist/types/pm-plugins/drag-and-drop/utils/autoscrollers.d.ts +1 -1
  50. package/dist/types/pm-plugins/drag-and-drop/utils/getDragBehaviour.d.ts +1 -1
  51. package/dist/types/pm-plugins/table-resizing/utils/index.d.ts +1 -1
  52. package/dist/types/ui/ColumnResizeWidget/index.d.ts +1 -1
  53. package/dist/types/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.d.ts +1 -1
  54. package/dist/types/ui/FloatingToolbarLabel/FloatingToolbarLabel.d.ts +1 -1
  55. package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +1 -1
  56. package/dist/types/ui/TableFloatingControls/CornerControls/index.d.ts +1 -1
  57. package/dist/types/ui/icons/DragHandleDisabledIcon.d.ts +1 -1
  58. package/dist/types/utils/guidelines.d.ts +2 -1
  59. package/dist/types/utils/snapping.d.ts +3 -2
  60. package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +2 -1
  61. package/dist/types-ts4.5/pm-plugins/decorations/utils/index.d.ts +1 -1
  62. package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/autoscrollers.d.ts +1 -1
  63. package/dist/types-ts4.5/pm-plugins/drag-and-drop/utils/getDragBehaviour.d.ts +1 -1
  64. package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts +1 -1
  65. package/dist/types-ts4.5/ui/ColumnResizeWidget/index.d.ts +1 -1
  66. package/dist/types-ts4.5/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.d.ts +1 -1
  67. package/dist/types-ts4.5/ui/FloatingToolbarLabel/FloatingToolbarLabel.d.ts +1 -1
  68. package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts +1 -1
  69. package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/index.d.ts +1 -1
  70. package/dist/types-ts4.5/ui/icons/DragHandleDisabledIcon.d.ts +1 -1
  71. package/dist/types-ts4.5/utils/guidelines.d.ts +2 -1
  72. package/dist/types-ts4.5/utils/snapping.d.ts +3 -2
  73. package/docs/0-intro.tsx +9 -7
  74. package/package.json +3 -3
  75. package/report.api.md +67 -66
  76. package/src/commands/clear.ts +36 -44
  77. package/src/commands/collapse.ts +8 -8
  78. package/src/commands/column-resize.ts +412 -452
  79. package/src/commands/delete.ts +14 -14
  80. package/src/commands/display-mode.ts +10 -11
  81. package/src/commands/go-to-next-cell.ts +48 -54
  82. package/src/commands/hover.ts +210 -227
  83. package/src/commands/index.ts +35 -35
  84. package/src/commands/insert.ts +208 -235
  85. package/src/commands/misc.ts +655 -748
  86. package/src/commands/referentiality.ts +9 -9
  87. package/src/commands/selection.ts +433 -563
  88. package/src/commands/sort.ts +68 -86
  89. package/src/commands/split-cell.ts +14 -14
  90. package/src/commands/toggle.ts +69 -67
  91. package/src/commands-with-analytics.ts +570 -639
  92. package/src/create-plugin-config.ts +13 -13
  93. package/src/event-handlers.ts +513 -612
  94. package/src/handlers.ts +120 -133
  95. package/src/nodeviews/ExternalDropTargets.tsx +68 -73
  96. package/src/nodeviews/OverflowShadowsObserver.ts +148 -157
  97. package/src/nodeviews/TableCell.ts +47 -54
  98. package/src/nodeviews/TableComponent.tsx +1018 -1112
  99. package/src/nodeviews/TableComponentWithSharedState.tsx +91 -94
  100. package/src/nodeviews/TableContainer.tsx +384 -340
  101. package/src/nodeviews/TableNodeViewBase.ts +19 -24
  102. package/src/nodeviews/TableResizer.tsx +642 -653
  103. package/src/nodeviews/TableRow.ts +580 -629
  104. package/src/nodeviews/TableStickyScrollbar.ts +173 -190
  105. package/src/nodeviews/__mocks__/OverflowShadowsObserver.ts +8 -8
  106. package/src/nodeviews/__mocks__/OverridableMock.ts +14 -15
  107. package/src/nodeviews/table.tsx +345 -375
  108. package/src/nodeviews/types.ts +21 -24
  109. package/src/nodeviews/update-overflow-shadows.ts +8 -14
  110. package/src/plugin.tsx +578 -603
  111. package/src/pm-plugins/analytics/actions.ts +10 -12
  112. package/src/pm-plugins/analytics/commands.ts +31 -37
  113. package/src/pm-plugins/analytics/plugin-factory.ts +4 -2
  114. package/src/pm-plugins/analytics/plugin-key.ts +1 -3
  115. package/src/pm-plugins/analytics/plugin.ts +60 -70
  116. package/src/pm-plugins/analytics/reducer.ts +19 -19
  117. package/src/pm-plugins/analytics/types.ts +10 -10
  118. package/src/pm-plugins/analytics/utils/moved-event.ts +38 -38
  119. package/src/pm-plugins/decorations/plugin.ts +58 -77
  120. package/src/pm-plugins/decorations/utils/column-controls.ts +59 -71
  121. package/src/pm-plugins/decorations/utils/column-resizing.ts +50 -57
  122. package/src/pm-plugins/decorations/utils/compose-decorations.ts +6 -6
  123. package/src/pm-plugins/decorations/utils/index.ts +3 -6
  124. package/src/pm-plugins/decorations/utils/types.ts +7 -12
  125. package/src/pm-plugins/default-table-selection.ts +3 -3
  126. package/src/pm-plugins/drag-and-drop/actions.ts +25 -25
  127. package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts +158 -190
  128. package/src/pm-plugins/drag-and-drop/commands.ts +154 -170
  129. package/src/pm-plugins/drag-and-drop/consts.ts +4 -5
  130. package/src/pm-plugins/drag-and-drop/plugin-factory.ts +23 -20
  131. package/src/pm-plugins/drag-and-drop/plugin-key.ts +1 -3
  132. package/src/pm-plugins/drag-and-drop/plugin.ts +329 -383
  133. package/src/pm-plugins/drag-and-drop/reducer.ts +30 -30
  134. package/src/pm-plugins/drag-and-drop/types.ts +8 -8
  135. package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +38 -41
  136. package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts +3 -6
  137. package/src/pm-plugins/drag-and-drop/utils/monitor.ts +57 -70
  138. package/src/pm-plugins/keymap.ts +208 -220
  139. package/src/pm-plugins/main.ts +348 -400
  140. package/src/pm-plugins/plugin-factory.ts +32 -34
  141. package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts +83 -97
  142. package/src/pm-plugins/sticky-headers/commands.ts +2 -6
  143. package/src/pm-plugins/sticky-headers/plugin-key.ts +1 -3
  144. package/src/pm-plugins/sticky-headers/plugin-state.ts +41 -44
  145. package/src/pm-plugins/sticky-headers/plugin.ts +4 -4
  146. package/src/pm-plugins/sticky-headers/types.ts +8 -8
  147. package/src/pm-plugins/sticky-headers/util.ts +10 -10
  148. package/src/pm-plugins/table-analytics.ts +70 -72
  149. package/src/pm-plugins/table-local-id.ts +180 -184
  150. package/src/pm-plugins/table-resizing/commands.ts +72 -85
  151. package/src/pm-plugins/table-resizing/event-handlers.ts +298 -317
  152. package/src/pm-plugins/table-resizing/plugin-factory.ts +10 -10
  153. package/src/pm-plugins/table-resizing/plugin-key.ts +1 -3
  154. package/src/pm-plugins/table-resizing/plugin.ts +61 -68
  155. package/src/pm-plugins/table-resizing/reducer.ts +30 -33
  156. package/src/pm-plugins/table-resizing/utils/colgroup.ts +84 -84
  157. package/src/pm-plugins/table-resizing/utils/column-state.ts +78 -81
  158. package/src/pm-plugins/table-resizing/utils/content-width.ts +94 -114
  159. package/src/pm-plugins/table-resizing/utils/dom.ts +93 -110
  160. package/src/pm-plugins/table-resizing/utils/index.ts +29 -34
  161. package/src/pm-plugins/table-resizing/utils/misc.ts +94 -119
  162. package/src/pm-plugins/table-resizing/utils/resize-column.ts +93 -106
  163. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +240 -257
  164. package/src/pm-plugins/table-resizing/utils/resize-state.ts +343 -372
  165. package/src/pm-plugins/table-resizing/utils/scale-table.ts +202 -207
  166. package/src/pm-plugins/table-resizing/utils/types.ts +17 -17
  167. package/src/pm-plugins/table-resizing/utils/unit-to-number.ts +1 -2
  168. package/src/pm-plugins/table-selection-keymap.ts +25 -51
  169. package/src/pm-plugins/table-width.ts +191 -204
  170. package/src/pm-plugins/view-mode-sort/index.ts +223 -227
  171. package/src/pm-plugins/view-mode-sort/plugin-key.ts +3 -2
  172. package/src/pm-plugins/view-mode-sort/types.ts +12 -12
  173. package/src/pm-plugins/view-mode-sort/utils.ts +108 -117
  174. package/src/reducer.ts +139 -155
  175. package/src/toolbar.tsx +815 -905
  176. package/src/transforms/column-width.ts +186 -213
  177. package/src/transforms/delete-columns.ts +208 -222
  178. package/src/transforms/delete-rows.ts +117 -121
  179. package/src/transforms/fix-tables.ts +190 -215
  180. package/src/transforms/merge.ts +263 -269
  181. package/src/transforms/replace-table.ts +27 -43
  182. package/src/transforms/split.ts +65 -75
  183. package/src/types.ts +421 -427
  184. package/src/ui/ColumnResizeWidget/index.tsx +40 -47
  185. package/src/ui/DragHandle/HandleIconComponent.tsx +9 -13
  186. package/src/ui/DragHandle/index.tsx +221 -250
  187. package/src/ui/DragPreview/index.tsx +35 -35
  188. package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx +33 -41
  189. package/src/ui/FloatingContextualButton/FixedButton.tsx +154 -157
  190. package/src/ui/FloatingContextualButton/index.tsx +109 -115
  191. package/src/ui/FloatingContextualButton/styles.ts +43 -46
  192. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +634 -694
  193. package/src/ui/FloatingContextualMenu/index.tsx +83 -101
  194. package/src/ui/FloatingContextualMenu/styles.ts +57 -65
  195. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +37 -37
  196. package/src/ui/FloatingDeleteButton/getPopUpOptions.ts +47 -57
  197. package/src/ui/FloatingDeleteButton/index.tsx +319 -350
  198. package/src/ui/FloatingDragMenu/DragMenu.tsx +555 -596
  199. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +152 -162
  200. package/src/ui/FloatingDragMenu/index.tsx +88 -102
  201. package/src/ui/FloatingDragMenu/styles.ts +51 -54
  202. package/src/ui/FloatingInsertButton/InsertButton.tsx +204 -217
  203. package/src/ui/FloatingInsertButton/getPopupOptions.ts +100 -115
  204. package/src/ui/FloatingInsertButton/index.tsx +248 -292
  205. package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx +24 -29
  206. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +308 -329
  207. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +85 -94
  208. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +46 -46
  209. package/src/ui/TableFloatingColumnControls/index.tsx +116 -136
  210. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +79 -91
  211. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +95 -102
  212. package/src/ui/TableFloatingControls/CornerControls/index.tsx +1 -4
  213. package/src/ui/TableFloatingControls/CornerControls/types.ts +8 -8
  214. package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx +50 -50
  215. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +111 -124
  216. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +86 -105
  217. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +305 -341
  218. package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +72 -75
  219. package/src/ui/TableFloatingControls/index.tsx +191 -193
  220. package/src/ui/TableFullWidthLabel/index.tsx +20 -20
  221. package/src/ui/common-styles.ts +880 -912
  222. package/src/ui/consts.ts +29 -74
  223. package/src/ui/icons/AddColLeftIcon.tsx +33 -39
  224. package/src/ui/icons/AddColRightIcon.tsx +33 -39
  225. package/src/ui/icons/AddRowAboveIcon.tsx +16 -22
  226. package/src/ui/icons/AddRowBelowIcon.tsx +33 -39
  227. package/src/ui/icons/DisplayModeIcon.tsx +31 -31
  228. package/src/ui/icons/DragHandleDisabledIcon.tsx +19 -21
  229. package/src/ui/icons/DragHandleIcon.tsx +12 -12
  230. package/src/ui/icons/DragInMotionIcon.tsx +45 -52
  231. package/src/ui/icons/MergeCellsIcon.tsx +22 -28
  232. package/src/ui/icons/MinimisedHandle.tsx +9 -9
  233. package/src/ui/icons/SplitCellIcon.tsx +30 -36
  234. package/src/ui/ui-styles.ts +769 -798
  235. package/src/utils/alignment.ts +1 -1
  236. package/src/utils/analytics.ts +192 -208
  237. package/src/utils/collapse.ts +55 -64
  238. package/src/utils/column-controls.ts +237 -254
  239. package/src/utils/create.ts +30 -30
  240. package/src/utils/decoration.ts +482 -502
  241. package/src/utils/dom.ts +127 -134
  242. package/src/utils/drag-menu.ts +322 -373
  243. package/src/utils/get-allow-add-column-custom-step.ts +4 -5
  244. package/src/utils/guidelines.ts +16 -21
  245. package/src/utils/index.ts +68 -68
  246. package/src/utils/merged-cells.ts +245 -254
  247. package/src/utils/nodes.ts +91 -106
  248. package/src/utils/paste.ts +119 -135
  249. package/src/utils/row-controls.ts +199 -213
  250. package/src/utils/selection.ts +77 -87
  251. package/src/utils/snapping.ts +87 -100
  252. package/src/utils/table.ts +44 -44
  253. package/src/utils/transforms.ts +5 -5
  254. package/src/utils/update-plugin-state-decorations.ts +5 -9
@@ -1,8 +1,5 @@
1
1
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
2
- import {
3
- tableCellMinWidth,
4
- tableNewColumnMinWidth,
5
- } from '@atlaskit/editor-common/styles';
2
+ import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
6
3
  import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
7
4
  import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
8
5
  import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
@@ -12,11 +9,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
12
9
 
13
10
  import { getSelectedTableInfo } from '../../../utils';
14
11
 
15
- import {
16
- getColWidthFix,
17
- hasTableBeenResized,
18
- insertColgroupFromNode,
19
- } from './colgroup';
12
+ import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
20
13
  import type { ColumnState } from './column-state';
21
14
  import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
22
15
  import { syncStickyRowToTable } from './dom';
@@ -24,407 +17,385 @@ import { getTableMaxWidth, getTableScalingPercent } from './misc';
24
17
  import type { ResizeState, ResizeStateWithAnalytics } from './types';
25
18
 
26
19
  export const getResizeState = ({
27
- minWidth,
28
- maxSize,
29
- table,
30
- tableRef,
31
- start,
32
- domAtPos,
33
- isTableScalingEnabled = false,
20
+ minWidth,
21
+ maxSize,
22
+ table,
23
+ tableRef,
24
+ start,
25
+ domAtPos,
26
+ isTableScalingEnabled = false,
34
27
  }: {
35
- minWidth: number;
36
- maxSize: number;
37
- table: PMNode;
38
- tableRef: HTMLTableElement | null;
39
- start: number;
40
- domAtPos: (pos: number) => { node: Node; offset: number };
41
- isTableScalingEnabled: boolean;
28
+ minWidth: number;
29
+ maxSize: number;
30
+ table: PMNode;
31
+ tableRef: HTMLTableElement | null;
32
+ start: number;
33
+ domAtPos: (pos: number) => { node: Node; offset: number };
34
+ isTableScalingEnabled: boolean;
42
35
  }): ResizeState => {
43
- if (isTableScalingEnabled) {
44
- const scalePercent = getTableScalingPercent(table, tableRef);
45
- minWidth = Math.ceil(minWidth / scalePercent);
46
- }
47
- // If the table has been resized, we can use the column widths from the table node
48
- if (hasTableBeenResized(table)) {
49
- const cols = calcTableColumnWidths(table).map((width, index) => ({
50
- width: width === 0 ? tableNewColumnMinWidth : width,
51
- minWidth: width === 0 ? tableNewColumnMinWidth : minWidth,
52
- index,
53
- }));
54
-
55
- const widths = cols.map((col) => col.width);
56
- const tableWidth = widths.reduce((sum, width) => sum + width, 0);
57
- const overflow = tableWidth > maxSize;
58
-
59
- return {
60
- cols,
61
- widths,
62
- maxSize,
63
- tableWidth,
64
- overflow,
65
- isScaled: isTableScalingEnabled,
66
- };
67
- }
68
-
69
- const shouldReinsertColgroup = !isTableScalingEnabled;
70
-
71
- // Getting the resize state from DOM
72
- const colgroupChildren = insertColgroupFromNode(
73
- tableRef,
74
- table,
75
- isTableScalingEnabled,
76
- shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
77
- );
78
- const cols = Array.from(colgroupChildren).map((_, index) => {
79
- // If the table hasn't been resized and we have a table width attribute, we can use it
80
- // to calculate the widths of the columns
81
- if (isTableScalingEnabled) {
82
- const tableNodeWidth = getTableContainerWidth(table);
83
- return {
84
- index,
85
- width: tableNodeWidth / colgroupChildren.length,
86
- minWidth,
87
- };
88
- }
89
- const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
90
- return getColumnStateFromDOM(cellsRefs, index, minWidth);
91
- });
92
-
93
- const widths = cols.map((col) => col.width);
94
- const tableWidth = widths.reduce((sum, width) => sum + width, 0);
95
-
96
- const overflow = tableWidth > maxSize;
97
-
98
- return {
99
- cols,
100
- widths,
101
- maxSize,
102
- tableWidth,
103
- overflow,
104
- isScaled: isTableScalingEnabled,
105
- };
36
+ if (isTableScalingEnabled) {
37
+ const scalePercent = getTableScalingPercent(table, tableRef);
38
+ minWidth = Math.ceil(minWidth / scalePercent);
39
+ }
40
+ // If the table has been resized, we can use the column widths from the table node
41
+ if (hasTableBeenResized(table)) {
42
+ const cols = calcTableColumnWidths(table).map((width, index) => ({
43
+ width: width === 0 ? tableNewColumnMinWidth : width,
44
+ minWidth: width === 0 ? tableNewColumnMinWidth : minWidth,
45
+ index,
46
+ }));
47
+
48
+ const widths = cols.map((col) => col.width);
49
+ const tableWidth = widths.reduce((sum, width) => sum + width, 0);
50
+ const overflow = tableWidth > maxSize;
51
+
52
+ return {
53
+ cols,
54
+ widths,
55
+ maxSize,
56
+ tableWidth,
57
+ overflow,
58
+ isScaled: isTableScalingEnabled,
59
+ };
60
+ }
61
+
62
+ const shouldReinsertColgroup = !isTableScalingEnabled;
63
+
64
+ // Getting the resize state from DOM
65
+ const colgroupChildren = insertColgroupFromNode(
66
+ tableRef,
67
+ table,
68
+ isTableScalingEnabled,
69
+ shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
70
+ );
71
+ const cols = Array.from(colgroupChildren).map((_, index) => {
72
+ // If the table hasn't been resized and we have a table width attribute, we can use it
73
+ // to calculate the widths of the columns
74
+ if (isTableScalingEnabled) {
75
+ const tableNodeWidth = getTableContainerWidth(table);
76
+ return {
77
+ index,
78
+ width: tableNodeWidth / colgroupChildren.length,
79
+ minWidth,
80
+ };
81
+ }
82
+ const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
83
+ return getColumnStateFromDOM(cellsRefs, index, minWidth);
84
+ });
85
+
86
+ const widths = cols.map((col) => col.width);
87
+ const tableWidth = widths.reduce((sum, width) => sum + width, 0);
88
+
89
+ const overflow = tableWidth > maxSize;
90
+
91
+ return {
92
+ cols,
93
+ widths,
94
+ maxSize,
95
+ tableWidth,
96
+ overflow,
97
+ isScaled: isTableScalingEnabled,
98
+ };
106
99
  };
107
100
 
108
101
  // updates Colgroup DOM node with new widths
109
102
  export const updateColgroup = (
110
- state: ResizeState,
111
- tableRef: HTMLElement | null,
112
- tableNode?: PMNode,
113
- isTableScalingEnabled?: boolean,
103
+ state: ResizeState,
104
+ tableRef: HTMLElement | null,
105
+ tableNode?: PMNode,
106
+ isTableScalingEnabled?: boolean,
114
107
  ): void => {
115
- const cols = tableRef?.querySelectorAll('col');
116
- const columnsCount = cols?.length;
117
- /**
108
+ const cols = tableRef?.querySelectorAll('col');
109
+ const columnsCount = cols?.length;
110
+ /**
118
111
  updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
119
112
  We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
120
113
  We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
121
114
  * */
122
- if (isTableScalingEnabled && tableNode) {
123
- const scalePercent = getTableScalingPercent(tableNode, tableRef);
124
- state.cols
125
- .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
126
- .forEach((column, i) => {
127
- const fixedColWidth = getColWidthFix(column.width, columnsCount ?? 0);
128
- const scaledWidth = fixedColWidth * scalePercent;
129
- const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
130
- // we aren't handling the remaining pixels here when the 48px min width is reached
131
- if (cols?.[i]) {
132
- cols[i].style.width = `${finalWidth}px`;
133
- }
134
- });
135
- } else {
136
- state.cols
137
- .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
138
- .forEach((column, i) => {
139
- if (cols?.[i]) {
140
- cols[i].style.width = `${getColWidthFix(
141
- column.width,
142
- columnsCount ?? 0,
143
- )}px`;
144
- }
145
- });
146
- }
147
-
148
- // colgroup has updated, reflect new widths in sticky header
149
- syncStickyRowToTable(tableRef);
115
+ if (isTableScalingEnabled && tableNode) {
116
+ const scalePercent = getTableScalingPercent(tableNode, tableRef);
117
+ state.cols
118
+ .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
119
+ .forEach((column, i) => {
120
+ const fixedColWidth = getColWidthFix(column.width, columnsCount ?? 0);
121
+ const scaledWidth = fixedColWidth * scalePercent;
122
+ const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
123
+ // we aren't handling the remaining pixels here when the 48px min width is reached
124
+ if (cols?.[i]) {
125
+ cols[i].style.width = `${finalWidth}px`;
126
+ }
127
+ });
128
+ } else {
129
+ state.cols
130
+ .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
131
+ .forEach((column, i) => {
132
+ if (cols?.[i]) {
133
+ cols[i].style.width = `${getColWidthFix(column.width, columnsCount ?? 0)}px`;
134
+ }
135
+ });
136
+ }
137
+
138
+ // colgroup has updated, reflect new widths in sticky header
139
+ syncStickyRowToTable(tableRef);
150
140
  };
151
141
 
152
142
  export const getTotalWidth = ({ cols }: ResizeState): number => {
153
- return cols.reduce((totalWidth, col) => totalWidth + col.width, 0);
143
+ return cols.reduce((totalWidth, col) => totalWidth + col.width, 0);
154
144
  };
155
145
 
156
146
  // adjust columns to take up the total width
157
147
  // difference in total columns widths vs table width happens due to the "Math.floor"
158
- export const adjustColumnsWidths = (
159
- resizeState: ResizeState,
160
- maxSize: number,
161
- ): ResizeState => {
162
- const totalWidth = getTotalWidth(resizeState);
163
- const diff = maxSize - totalWidth;
164
- if (diff > 0 || (diff < 0 && Math.abs(diff) < tableCellMinWidth)) {
165
- let updated = false;
166
- return {
167
- ...resizeState,
168
- cols: resizeState.cols.map((col) => {
169
- if (!updated && col.width + diff > col.minWidth) {
170
- updated = true;
171
- return { ...col, width: col.width + diff };
172
- }
173
- return col;
174
- }),
175
- };
176
- }
177
-
178
- return resizeState;
148
+ export const adjustColumnsWidths = (resizeState: ResizeState, maxSize: number): ResizeState => {
149
+ const totalWidth = getTotalWidth(resizeState);
150
+ const diff = maxSize - totalWidth;
151
+ if (diff > 0 || (diff < 0 && Math.abs(diff) < tableCellMinWidth)) {
152
+ let updated = false;
153
+ return {
154
+ ...resizeState,
155
+ cols: resizeState.cols.map((col) => {
156
+ if (!updated && col.width + diff > col.minWidth) {
157
+ updated = true;
158
+ return { ...col, width: col.width + diff };
159
+ }
160
+ return col;
161
+ }),
162
+ };
163
+ }
164
+
165
+ return resizeState;
179
166
  };
180
167
 
181
168
  export const evenAllColumnsWidths = (resizeState: ResizeState): ResizeState => {
182
- const maxSize = getTotalWidth(resizeState);
183
- const evenWidth = Math.floor(maxSize / resizeState.cols.length);
184
- const cols = resizeState.cols.map((col) => ({ ...col, width: evenWidth }));
169
+ const maxSize = getTotalWidth(resizeState);
170
+ const evenWidth = Math.floor(maxSize / resizeState.cols.length);
171
+ const cols = resizeState.cols.map((col) => ({ ...col, width: evenWidth }));
185
172
 
186
- return adjustColumnsWidths({ ...resizeState, cols }, maxSize);
173
+ return adjustColumnsWidths({ ...resizeState, cols }, maxSize);
187
174
  };
188
175
 
189
176
  const getSpace = (columns: ColumnState[], start: number, end: number) =>
190
- columns
191
- .slice(start, end)
192
- .map((col) => col.width)
193
- .reduce((sum, width) => sum + width, 0);
194
-
195
- export const evenSelectedColumnsWidths = (
196
- resizeState: ResizeState,
197
- rect: Rect,
198
- ): ResizeState => {
199
- const cols = resizeState.cols;
200
- const selectedSpace = getSpace(cols, rect.left, rect.right);
201
- const allSpace = getSpace(cols, 0, cols.length);
202
-
203
- const allWidth = allSpace / cols.length;
204
- const width = selectedSpace / (rect.right - rect.left);
205
-
206
- // Result equals even distribution of all columns -
207
- // unset widths of all columns
208
- if (allWidth === width) {
209
- return {
210
- ...resizeState,
211
- widths: cols.map(() => width),
212
- cols: resizeState.cols.map((col) => ({
213
- ...col,
214
- width: 0,
215
- })),
216
- };
217
- }
218
-
219
- return {
220
- ...resizeState,
221
- widths: cols.map((col, i) =>
222
- i >= rect.left && i < rect.right ? width : col.width,
223
- ),
224
- cols: cols.map((col, i) => ({
225
- ...col,
226
- width: i >= rect.left && i < rect.right ? width : col.width,
227
- })),
228
- };
177
+ columns
178
+ .slice(start, end)
179
+ .map((col) => col.width)
180
+ .reduce((sum, width) => sum + width, 0);
181
+
182
+ export const evenSelectedColumnsWidths = (resizeState: ResizeState, rect: Rect): ResizeState => {
183
+ const cols = resizeState.cols;
184
+ const selectedSpace = getSpace(cols, rect.left, rect.right);
185
+ const allSpace = getSpace(cols, 0, cols.length);
186
+
187
+ const allWidth = allSpace / cols.length;
188
+ const width = selectedSpace / (rect.right - rect.left);
189
+
190
+ // Result equals even distribution of all columns -
191
+ // unset widths of all columns
192
+ if (allWidth === width) {
193
+ return {
194
+ ...resizeState,
195
+ widths: cols.map(() => width),
196
+ cols: resizeState.cols.map((col) => ({
197
+ ...col,
198
+ width: 0,
199
+ })),
200
+ };
201
+ }
202
+
203
+ return {
204
+ ...resizeState,
205
+ widths: cols.map((col, i) => (i >= rect.left && i < rect.right ? width : col.width)),
206
+ cols: cols.map((col, i) => ({
207
+ ...col,
208
+ width: i >= rect.left && i < rect.right ? width : col.width,
209
+ })),
210
+ };
229
211
  };
230
212
 
231
213
  export const bulkColumnsResize = (
232
- resizeState: ResizeState,
233
- columnsIndexes: number[],
234
- sourceColumnIndex: number,
214
+ resizeState: ResizeState,
215
+ columnsIndexes: number[],
216
+ sourceColumnIndex: number,
235
217
  ) => {
236
- const currentTableWidth = getTotalWidth(resizeState);
237
- const colIndex =
238
- columnsIndexes.indexOf(sourceColumnIndex) > -1
239
- ? sourceColumnIndex
240
- : sourceColumnIndex + 1;
241
- const sourceCol = resizeState.cols[colIndex];
242
- const seenColumns: {
243
- [key: number]: { width: number; minWidth: number; index: number };
244
- } = {};
245
- const widthsDiffs: number[] = [];
246
- const cols = resizeState.cols.map((col) => {
247
- if (columnsIndexes.indexOf(col.index) > -1) {
248
- const diff = col.width - sourceCol.width;
249
- if (diff !== 0) {
250
- widthsDiffs.push(diff);
251
- }
252
- return { ...col, width: sourceCol.width };
253
- }
254
- return col;
255
- });
256
-
257
- let newState = {
258
- ...resizeState,
259
- cols: cols.map((col) => {
260
- if (
261
- columnsIndexes.indexOf(col.index) > -1 ||
262
- // take from prev columns only if dragging the first handle to the left
263
- (columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex)
264
- ) {
265
- return col;
266
- }
267
- while (widthsDiffs.length) {
268
- const diff = widthsDiffs.shift() || 0;
269
- const column = seenColumns[col.index] || col;
270
- const maybeWidth = column.width + diff;
271
-
272
- if (maybeWidth > column.minWidth) {
273
- seenColumns[column.index] = { ...column, width: maybeWidth };
274
- } else {
275
- widthsDiffs.push(maybeWidth - column.minWidth);
276
- seenColumns[column.index] = { ...column, width: column.minWidth };
277
- break;
278
- }
279
- }
280
- return seenColumns[col.index] || col;
281
- }),
282
- };
283
-
284
- // minimum possible table widths at the current layout
285
- const minTableWidth = resizeState.maxSize;
286
- // new table widths after bulk resize
287
- const newTotalWidth = getTotalWidth(newState);
288
- // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
289
- if (
290
- columnsIndexes.length === resizeState.cols.length &&
291
- newTotalWidth < minTableWidth
292
- ) {
293
- // table is not in overflow -> normal resize of a single column
294
- if (currentTableWidth === minTableWidth) {
295
- return resizeState;
296
- }
297
- // table is in overflow: keep the dragged column at its widths and evenly distribute columns
298
- // to recover from overflow state
299
- else {
300
- const columnWidth = Math.floor(
301
- (minTableWidth - sourceCol.width) / (newState.cols.length - 1),
302
- );
303
- newState = {
304
- ...resizeState,
305
- cols: newState.cols.map((col) => {
306
- if (col.index === sourceCol.index) {
307
- return col;
308
- }
309
-
310
- return { ...col, width: columnWidth };
311
- }),
312
- };
313
- }
314
- }
315
-
316
- // fix total table widths by adding missing pixels to columns widths here and there
317
- return adjustColumnsWidths(newState, resizeState.maxSize);
218
+ const currentTableWidth = getTotalWidth(resizeState);
219
+ const colIndex =
220
+ columnsIndexes.indexOf(sourceColumnIndex) > -1 ? sourceColumnIndex : sourceColumnIndex + 1;
221
+ const sourceCol = resizeState.cols[colIndex];
222
+ const seenColumns: {
223
+ [key: number]: { width: number; minWidth: number; index: number };
224
+ } = {};
225
+ const widthsDiffs: number[] = [];
226
+ const cols = resizeState.cols.map((col) => {
227
+ if (columnsIndexes.indexOf(col.index) > -1) {
228
+ const diff = col.width - sourceCol.width;
229
+ if (diff !== 0) {
230
+ widthsDiffs.push(diff);
231
+ }
232
+ return { ...col, width: sourceCol.width };
233
+ }
234
+ return col;
235
+ });
236
+
237
+ let newState = {
238
+ ...resizeState,
239
+ cols: cols.map((col) => {
240
+ if (
241
+ columnsIndexes.indexOf(col.index) > -1 ||
242
+ // take from prev columns only if dragging the first handle to the left
243
+ (columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex)
244
+ ) {
245
+ return col;
246
+ }
247
+ while (widthsDiffs.length) {
248
+ const diff = widthsDiffs.shift() || 0;
249
+ const column = seenColumns[col.index] || col;
250
+ const maybeWidth = column.width + diff;
251
+
252
+ if (maybeWidth > column.minWidth) {
253
+ seenColumns[column.index] = { ...column, width: maybeWidth };
254
+ } else {
255
+ widthsDiffs.push(maybeWidth - column.minWidth);
256
+ seenColumns[column.index] = { ...column, width: column.minWidth };
257
+ break;
258
+ }
259
+ }
260
+ return seenColumns[col.index] || col;
261
+ }),
262
+ };
263
+
264
+ // minimum possible table widths at the current layout
265
+ const minTableWidth = resizeState.maxSize;
266
+ // new table widths after bulk resize
267
+ const newTotalWidth = getTotalWidth(newState);
268
+ // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
269
+ if (columnsIndexes.length === resizeState.cols.length && newTotalWidth < minTableWidth) {
270
+ // table is not in overflow -> normal resize of a single column
271
+ if (currentTableWidth === minTableWidth) {
272
+ return resizeState;
273
+ }
274
+ // table is in overflow: keep the dragged column at its widths and evenly distribute columns
275
+ // to recover from overflow state
276
+ else {
277
+ const columnWidth = Math.floor(
278
+ (minTableWidth - sourceCol.width) / (newState.cols.length - 1),
279
+ );
280
+ newState = {
281
+ ...resizeState,
282
+ cols: newState.cols.map((col) => {
283
+ if (col.index === sourceCol.index) {
284
+ return col;
285
+ }
286
+
287
+ return { ...col, width: columnWidth };
288
+ }),
289
+ };
290
+ }
291
+ }
292
+
293
+ // fix total table widths by adding missing pixels to columns widths here and there
294
+ return adjustColumnsWidths(newState, resizeState.maxSize);
318
295
  };
319
296
 
320
297
  export const areColumnsEven = (resizeState: ResizeState): boolean => {
321
- const newResizeState = evenAllColumnsWidths(resizeState);
322
- return newResizeState.cols.every(
323
- (col, i) => col.width === resizeState.cols[i].width,
324
- );
298
+ const newResizeState = evenAllColumnsWidths(resizeState);
299
+ return newResizeState.cols.every((col, i) => col.width === resizeState.cols[i].width);
325
300
  };
326
301
 
327
302
  // Get the layout
328
303
  export const normaliseTableLayout = (input: string | undefined | null) => {
329
- switch (input) {
330
- case 'wide':
331
- return input;
332
- case 'full-width':
333
- return input;
334
- default:
335
- return 'default';
336
- }
304
+ switch (input) {
305
+ case 'wide':
306
+ return input;
307
+ case 'full-width':
308
+ return input;
309
+ default:
310
+ return 'default';
311
+ }
337
312
  };
338
313
 
339
314
  export const getNewResizeStateFromSelectedColumns = (
340
- rect: Rect,
341
- state: EditorState,
342
- domAtPos: (pos: number) => { node: Node; offset: number },
343
- getEditorContainerWidth: GetEditorContainerWidth,
344
- isTableScalingEnabled = false,
315
+ rect: Rect,
316
+ state: EditorState,
317
+ domAtPos: (pos: number) => { node: Node; offset: number },
318
+ getEditorContainerWidth: GetEditorContainerWidth,
319
+ isTableScalingEnabled = false,
345
320
  ): ResizeStateWithAnalytics | undefined => {
346
- // Fail early so that we don't do complex calculations for no reason
347
- const numColumnsSelected = rect.right - rect.left;
348
- if (numColumnsSelected <= 1) {
349
- return;
350
- }
351
-
352
- const { totalRowCount, totalColumnCount, table } = getSelectedTableInfo(
353
- state.selection,
354
- );
355
-
356
- if (!table) {
357
- return;
358
- }
359
-
360
- // Fail early so that we don't do complex calculations for no reason
361
- if (!hasTableBeenResized(table.node)) {
362
- return;
363
- }
364
-
365
- const maybeTable = domAtPos(table.start).node;
366
-
367
- const maybeTableElement =
368
- maybeTable instanceof HTMLElement ? maybeTable : null;
369
- const tableRef = getBooleanFF('platform.editor.explicit-html-element-check')
370
- ? maybeTableElement?.closest('table')
371
- : (maybeTable as HTMLElement)?.closest('table');
372
-
373
- if (!tableRef) {
374
- return;
375
- }
376
-
377
- const layout = normaliseTableLayout(tableRef?.dataset.layout);
378
-
379
- const maxSize = getTableMaxWidth({
380
- table: table.node,
381
- tableStart: table.start,
382
- state,
383
- layout,
384
- getEditorContainerWidth,
385
- });
386
-
387
- let resizeState;
388
-
389
- let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
390
- if (
391
- isTableScalingEnabled &&
392
- getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
393
- ) {
394
- isTableScalingEnabledOnCurrentTable =
395
- table.node.attrs.displayMode !== 'fixed';
396
- }
397
-
398
- resizeState = getResizeState({
399
- minWidth: tableCellMinWidth,
400
- maxSize,
401
- table: table.node,
402
- tableRef,
403
- start: table.start,
404
- domAtPos,
405
- isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
406
- });
407
-
408
- const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
409
-
410
- const widthsBefore = resizeState.widths;
411
- const widthsAfter = newResizeState.widths;
412
-
413
- const changed = resizeState.widths.some(
414
- (widthBefore, index) => widthBefore !== widthsAfter[index],
415
- );
416
-
417
- return {
418
- resizeState: newResizeState,
419
- table,
420
- changed,
421
- attributes: {
422
- position: rect.left,
423
- count: rect.right - rect.left,
424
- totalRowCount,
425
- totalColumnCount,
426
- widthsBefore,
427
- widthsAfter,
428
- },
429
- };
321
+ // Fail early so that we don't do complex calculations for no reason
322
+ const numColumnsSelected = rect.right - rect.left;
323
+ if (numColumnsSelected <= 1) {
324
+ return;
325
+ }
326
+
327
+ const { totalRowCount, totalColumnCount, table } = getSelectedTableInfo(state.selection);
328
+
329
+ if (!table) {
330
+ return;
331
+ }
332
+
333
+ // Fail early so that we don't do complex calculations for no reason
334
+ if (!hasTableBeenResized(table.node)) {
335
+ return;
336
+ }
337
+
338
+ const maybeTable = domAtPos(table.start).node;
339
+
340
+ const maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
341
+ const tableRef = getBooleanFF('platform.editor.explicit-html-element-check')
342
+ ? maybeTableElement?.closest('table')
343
+ : (maybeTable as HTMLElement)?.closest('table');
344
+
345
+ if (!tableRef) {
346
+ return;
347
+ }
348
+
349
+ const layout = normaliseTableLayout(tableRef?.dataset.layout);
350
+
351
+ const maxSize = getTableMaxWidth({
352
+ table: table.node,
353
+ tableStart: table.start,
354
+ state,
355
+ layout,
356
+ getEditorContainerWidth,
357
+ });
358
+
359
+ let resizeState;
360
+
361
+ let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
362
+ if (
363
+ isTableScalingEnabled &&
364
+ getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
365
+ ) {
366
+ isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
367
+ }
368
+
369
+ resizeState = getResizeState({
370
+ minWidth: tableCellMinWidth,
371
+ maxSize,
372
+ table: table.node,
373
+ tableRef,
374
+ start: table.start,
375
+ domAtPos,
376
+ isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
377
+ });
378
+
379
+ const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
380
+
381
+ const widthsBefore = resizeState.widths;
382
+ const widthsAfter = newResizeState.widths;
383
+
384
+ const changed = resizeState.widths.some(
385
+ (widthBefore, index) => widthBefore !== widthsAfter[index],
386
+ );
387
+
388
+ return {
389
+ resizeState: newResizeState,
390
+ table,
391
+ changed,
392
+ attributes: {
393
+ position: rect.left,
394
+ count: rect.right - rect.left,
395
+ totalRowCount,
396
+ totalColumnCount,
397
+ widthsBefore,
398
+ widthsAfter,
399
+ },
400
+ };
430
401
  };