@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

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 (204) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/package.json +4 -4
  3. package/afm-cc/tsconfig.json +0 -123
  4. package/afm-dev-agents/tsconfig.json +0 -123
  5. package/afm-jira/tsconfig.json +0 -123
  6. package/afm-passionfruit/tsconfig.json +0 -123
  7. package/afm-post-office/tsconfig.json +0 -123
  8. package/afm-rovo-extension/tsconfig.json +0 -123
  9. package/afm-townsquare/tsconfig.json +0 -123
  10. package/afm-volt/tsconfig.json +0 -114
  11. package/build/tsconfig.json +0 -23
  12. package/docs/0-intro.tsx +0 -57
  13. package/src/index.ts +0 -21
  14. package/src/nodeviews/ExternalDropTargets.tsx +0 -91
  15. package/src/nodeviews/OverflowShadowsObserver.ts +0 -156
  16. package/src/nodeviews/TableCell.ts +0 -134
  17. package/src/nodeviews/TableComponent.tsx +0 -1590
  18. package/src/nodeviews/TableComponentWithSharedState.tsx +0 -278
  19. package/src/nodeviews/TableContainer.tsx +0 -926
  20. package/src/nodeviews/TableNodeViewBase.ts +0 -29
  21. package/src/nodeviews/TableResizer.tsx +0 -884
  22. package/src/nodeviews/TableRow.ts +0 -830
  23. package/src/nodeviews/TableStickyScrollbar.ts +0 -211
  24. package/src/nodeviews/__mocks__/OverflowShadowsObserver.ts +0 -15
  25. package/src/nodeviews/__mocks__/OverridableMock.ts +0 -26
  26. package/src/nodeviews/table-container-styles.ts +0 -9
  27. package/src/nodeviews/table-node-views.ts +0 -76
  28. package/src/nodeviews/table.tsx +0 -530
  29. package/src/nodeviews/toDOM.ts +0 -244
  30. package/src/nodeviews/types.ts +0 -36
  31. package/src/nodeviews/update-overflow-shadows.ts +0 -11
  32. package/src/pm-plugins/analytics/actions.ts +0 -21
  33. package/src/pm-plugins/analytics/commands.ts +0 -47
  34. package/src/pm-plugins/analytics/plugin-factory.ts +0 -9
  35. package/src/pm-plugins/analytics/plugin-key.ts +0 -5
  36. package/src/pm-plugins/analytics/plugin.ts +0 -80
  37. package/src/pm-plugins/analytics/reducer.ts +0 -27
  38. package/src/pm-plugins/analytics/types.ts +0 -20
  39. package/src/pm-plugins/analytics/utils/moved-event.ts +0 -51
  40. package/src/pm-plugins/commands/clear.ts +0 -43
  41. package/src/pm-plugins/commands/collapse.ts +0 -17
  42. package/src/pm-plugins/commands/column-resize.ts +0 -478
  43. package/src/pm-plugins/commands/commands-with-analytics.ts +0 -715
  44. package/src/pm-plugins/commands/delete.ts +0 -42
  45. package/src/pm-plugins/commands/display-mode.ts +0 -18
  46. package/src/pm-plugins/commands/go-to-next-cell.ts +0 -198
  47. package/src/pm-plugins/commands/hover.ts +0 -242
  48. package/src/pm-plugins/commands/index.ts +0 -51
  49. package/src/pm-plugins/commands/insert.ts +0 -438
  50. package/src/pm-plugins/commands/misc.ts +0 -811
  51. package/src/pm-plugins/commands/referentiality.ts +0 -15
  52. package/src/pm-plugins/commands/selection.ts +0 -537
  53. package/src/pm-plugins/commands/sort.ts +0 -102
  54. package/src/pm-plugins/commands/split-cell.ts +0 -28
  55. package/src/pm-plugins/commands/toggle.ts +0 -109
  56. package/src/pm-plugins/create-plugin-config.ts +0 -17
  57. package/src/pm-plugins/decorations/plugin.ts +0 -107
  58. package/src/pm-plugins/decorations/utils/column-controls.ts +0 -91
  59. package/src/pm-plugins/decorations/utils/column-resizing.ts +0 -71
  60. package/src/pm-plugins/decorations/utils/compose-decorations.ts +0 -9
  61. package/src/pm-plugins/decorations/utils/types.ts +0 -16
  62. package/src/pm-plugins/default-table-selection.ts +0 -14
  63. package/src/pm-plugins/drag-and-drop/actions.ts +0 -48
  64. package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts +0 -222
  65. package/src/pm-plugins/drag-and-drop/commands.ts +0 -194
  66. package/src/pm-plugins/drag-and-drop/consts.ts +0 -7
  67. package/src/pm-plugins/drag-and-drop/plugin-factory.ts +0 -33
  68. package/src/pm-plugins/drag-and-drop/plugin-key.ts +0 -5
  69. package/src/pm-plugins/drag-and-drop/plugin.ts +0 -398
  70. package/src/pm-plugins/drag-and-drop/reducer.ts +0 -38
  71. package/src/pm-plugins/drag-and-drop/types.ts +0 -18
  72. package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +0 -49
  73. package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts +0 -9
  74. package/src/pm-plugins/drag-and-drop/utils/monitor.ts +0 -73
  75. package/src/pm-plugins/handlers.ts +0 -161
  76. package/src/pm-plugins/keymap.ts +0 -436
  77. package/src/pm-plugins/main.ts +0 -433
  78. package/src/pm-plugins/plugin-factory.ts +0 -42
  79. package/src/pm-plugins/plugin-key.ts +0 -8
  80. package/src/pm-plugins/reducer.ts +0 -145
  81. package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts +0 -102
  82. package/src/pm-plugins/sticky-headers/commands.ts +0 -8
  83. package/src/pm-plugins/sticky-headers/plugin-key.ts +0 -5
  84. package/src/pm-plugins/sticky-headers/plugin-state.ts +0 -52
  85. package/src/pm-plugins/sticky-headers/plugin.ts +0 -12
  86. package/src/pm-plugins/sticky-headers/types.ts +0 -20
  87. package/src/pm-plugins/sticky-headers/util.ts +0 -18
  88. package/src/pm-plugins/table-analytics.ts +0 -100
  89. package/src/pm-plugins/table-local-id.ts +0 -213
  90. package/src/pm-plugins/table-resizing/commands.ts +0 -116
  91. package/src/pm-plugins/table-resizing/event-handlers.ts +0 -352
  92. package/src/pm-plugins/table-resizing/plugin-factory.ts +0 -29
  93. package/src/pm-plugins/table-resizing/plugin-key.ts +0 -5
  94. package/src/pm-plugins/table-resizing/plugin.ts +0 -94
  95. package/src/pm-plugins/table-resizing/reducer.ts +0 -37
  96. package/src/pm-plugins/table-resizing/utils/colgroup.ts +0 -306
  97. package/src/pm-plugins/table-resizing/utils/column-state.ts +0 -120
  98. package/src/pm-plugins/table-resizing/utils/consts.ts +0 -11
  99. package/src/pm-plugins/table-resizing/utils/content-width.ts +0 -118
  100. package/src/pm-plugins/table-resizing/utils/dom.ts +0 -132
  101. package/src/pm-plugins/table-resizing/utils/misc.ts +0 -282
  102. package/src/pm-plugins/table-resizing/utils/resize-column.ts +0 -34
  103. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +0 -289
  104. package/src/pm-plugins/table-resizing/utils/resize-state.ts +0 -417
  105. package/src/pm-plugins/table-resizing/utils/scale-table.ts +0 -290
  106. package/src/pm-plugins/table-resizing/utils/types.ts +0 -25
  107. package/src/pm-plugins/table-resizing/utils/unit-to-number.ts +0 -1
  108. package/src/pm-plugins/table-selection-keymap.ts +0 -64
  109. package/src/pm-plugins/table-size-selector.ts +0 -39
  110. package/src/pm-plugins/table-width-in-comment-fix.ts +0 -113
  111. package/src/pm-plugins/table-width.ts +0 -153
  112. package/src/pm-plugins/transforms/column-width.ts +0 -249
  113. package/src/pm-plugins/transforms/delete-columns.ts +0 -281
  114. package/src/pm-plugins/transforms/delete-rows.ts +0 -154
  115. package/src/pm-plugins/transforms/fix-tables.ts +0 -249
  116. package/src/pm-plugins/transforms/merge.ts +0 -301
  117. package/src/pm-plugins/transforms/replace-table.ts +0 -38
  118. package/src/pm-plugins/transforms/split.ts +0 -90
  119. package/src/pm-plugins/utils/alignment.ts +0 -33
  120. package/src/pm-plugins/utils/analytics.ts +0 -238
  121. package/src/pm-plugins/utils/collapse.ts +0 -93
  122. package/src/pm-plugins/utils/column-controls.ts +0 -250
  123. package/src/pm-plugins/utils/create.ts +0 -64
  124. package/src/pm-plugins/utils/decoration.ts +0 -672
  125. package/src/pm-plugins/utils/dom.ts +0 -251
  126. package/src/pm-plugins/utils/drag-menu.tsx +0 -491
  127. package/src/pm-plugins/utils/get-allow-add-column-custom-step.ts +0 -10
  128. package/src/pm-plugins/utils/guidelines.ts +0 -30
  129. package/src/pm-plugins/utils/merged-cells.ts +0 -239
  130. package/src/pm-plugins/utils/nodes.ts +0 -162
  131. package/src/pm-plugins/utils/paste.ts +0 -386
  132. package/src/pm-plugins/utils/row-controls.ts +0 -211
  133. package/src/pm-plugins/utils/selection.ts +0 -17
  134. package/src/pm-plugins/utils/snapping.ts +0 -136
  135. package/src/pm-plugins/utils/table.ts +0 -60
  136. package/src/pm-plugins/utils/update-plugin-state-decorations.ts +0 -13
  137. package/src/pm-plugins/view-mode-sort/consts.ts +0 -3
  138. package/src/pm-plugins/view-mode-sort/index.ts +0 -291
  139. package/src/pm-plugins/view-mode-sort/plugin-key.ts +0 -7
  140. package/src/pm-plugins/view-mode-sort/types.ts +0 -23
  141. package/src/pm-plugins/view-mode-sort/utils.ts +0 -136
  142. package/src/tablePlugin.tsx +0 -971
  143. package/src/tablePluginType.ts +0 -102
  144. package/src/types/index.ts +0 -592
  145. package/src/ui/ColumnResizeWidget/index.tsx +0 -61
  146. package/src/ui/ContentComponent.tsx +0 -311
  147. package/src/ui/DragHandle/HandleIconComponent.tsx +0 -21
  148. package/src/ui/DragHandle/index.tsx +0 -391
  149. package/src/ui/DragPreview/index.tsx +0 -51
  150. package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx +0 -59
  151. package/src/ui/FloatingContextualButton/FixedButton.tsx +0 -203
  152. package/src/ui/FloatingContextualButton/index.tsx +0 -168
  153. package/src/ui/FloatingContextualButton/styles.ts +0 -69
  154. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +0 -931
  155. package/src/ui/FloatingContextualMenu/index.tsx +0 -141
  156. package/src/ui/FloatingContextualMenu/styles.ts +0 -77
  157. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +0 -54
  158. package/src/ui/FloatingDeleteButton/getPopUpOptions.ts +0 -65
  159. package/src/ui/FloatingDeleteButton/index.tsx +0 -383
  160. package/src/ui/FloatingDeleteButton/types.ts +0 -3
  161. package/src/ui/FloatingDragMenu/DragMenu.tsx +0 -668
  162. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +0 -221
  163. package/src/ui/FloatingDragMenu/index.tsx +0 -136
  164. package/src/ui/FloatingDragMenu/styles.ts +0 -83
  165. package/src/ui/FloatingInsertButton/InsertButton.tsx +0 -263
  166. package/src/ui/FloatingInsertButton/getPopupOptions.ts +0 -131
  167. package/src/ui/FloatingInsertButton/index.tsx +0 -314
  168. package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx +0 -31
  169. package/src/ui/SizeSelector/index.tsx +0 -74
  170. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +0 -397
  171. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +0 -105
  172. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +0 -63
  173. package/src/ui/TableFloatingColumnControls/index.tsx +0 -151
  174. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +0 -106
  175. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +0 -143
  176. package/src/ui/TableFloatingControls/CornerControls/types.ts +0 -12
  177. package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx +0 -88
  178. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +0 -175
  179. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +0 -131
  180. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +0 -429
  181. package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +0 -96
  182. package/src/ui/TableFloatingControls/index.tsx +0 -275
  183. package/src/ui/TableFullWidthLabel/index.tsx +0 -38
  184. package/src/ui/common-styles.ts +0 -1218
  185. package/src/ui/consts.ts +0 -109
  186. package/src/ui/event-handlers.ts +0 -662
  187. package/src/ui/global-styles.tsx +0 -55
  188. package/src/ui/hooks/useInternalTablePluginStateSelector.ts +0 -38
  189. package/src/ui/icons/AddColLeftIcon.tsx +0 -37
  190. package/src/ui/icons/AddColRightIcon.tsx +0 -37
  191. package/src/ui/icons/AddRowAboveIcon.tsx +0 -22
  192. package/src/ui/icons/AddRowBelowIcon.tsx +0 -39
  193. package/src/ui/icons/DragHandleDisabledIcon.tsx +0 -25
  194. package/src/ui/icons/DragHandleIcon.tsx +0 -16
  195. package/src/ui/icons/DragInMotionIcon.tsx +0 -54
  196. package/src/ui/icons/MergeCellsIcon.tsx +0 -26
  197. package/src/ui/icons/MinimisedHandle.tsx +0 -15
  198. package/src/ui/icons/SortingIconWrapper.tsx +0 -43
  199. package/src/ui/icons/SplitCellIcon.tsx +0 -34
  200. package/src/ui/toolbar.tsx +0 -1153
  201. package/src/ui/ui-styles.ts +0 -960
  202. package/tsconfig.app.json +0 -135
  203. package/tsconfig.dev.json +0 -54
  204. package/tsconfig.json +0 -18
@@ -1,417 +0,0 @@
1
- import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
2
- import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
3
- import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
4
- import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
5
- import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
6
- import type { EditorState } from '@atlaskit/editor-prosemirror/state';
7
- import type { Rect } from '@atlaskit/editor-tables/table-map';
8
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
-
10
- import { getSelectedTableInfo } from '../../utils/analytics';
11
-
12
- import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
13
- import type { ColumnState } from './column-state';
14
- import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
15
- import { syncStickyRowToTable } from './dom';
16
- import { getTableMaxWidth, getTableScalingPercent } from './misc';
17
- import type { ResizeState, ResizeStateWithAnalytics } from './types';
18
-
19
- export const getResizeState = ({
20
- minWidth,
21
- maxSize,
22
- table,
23
- tableRef,
24
- start,
25
- domAtPos,
26
- isTableScalingEnabled = false,
27
- shouldUseIncreasedScalingPercent = false,
28
- isCommentEditor = false,
29
- }: {
30
- minWidth: number;
31
- maxSize: number;
32
- table: PMNode;
33
- tableRef: HTMLTableElement | null;
34
- start: number;
35
- domAtPos: (pos: number) => { node: Node; offset: number };
36
- isTableScalingEnabled: boolean;
37
- shouldUseIncreasedScalingPercent: boolean;
38
- isCommentEditor: boolean;
39
- }): ResizeState => {
40
- if (
41
- (isTableScalingEnabled && !isCommentEditor) ||
42
- (isTableScalingEnabled && isCommentEditor && table.attrs?.width)
43
- ) {
44
- const scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
45
- minWidth = Math.ceil(minWidth / scalePercent);
46
- }
47
-
48
- if (hasTableBeenResized(table)) {
49
- // If the table has been resized, we can use the column widths from the table node
50
- const cols = calcTableColumnWidths(table).map((width, index) => ({
51
- width: width === 0 ? tableNewColumnMinWidth : width,
52
- minWidth: width === 0 ? tableNewColumnMinWidth : minWidth,
53
- index,
54
- }));
55
-
56
- const widths = cols.map((col) => col.width);
57
- const tableWidth = widths.reduce((sum, width) => sum + width, 0);
58
- const overflow = tableWidth > maxSize;
59
-
60
- return {
61
- cols,
62
- widths,
63
- maxSize,
64
- tableWidth,
65
- overflow,
66
- isScaled: isTableScalingEnabled,
67
- };
68
- }
69
-
70
- const shouldReinsertColgroup = !isTableScalingEnabled;
71
-
72
- // Getting the resize state from DOM
73
- const colgroupChildren = insertColgroupFromNode(
74
- tableRef,
75
- table,
76
- isTableScalingEnabled,
77
- shouldReinsertColgroup, // don't reinsert colgroup when preserving table width - this causes widths to jump
78
- shouldUseIncreasedScalingPercent,
79
- isCommentEditor,
80
- );
81
- const cols = Array.from(colgroupChildren).map((_, index) => {
82
- // If the table hasn't been resized and we have a table width attribute, we can use it
83
- // to calculate the widths of the columns
84
- if (isTableScalingEnabled) {
85
- // isCommentEditor when table cols were not resized,
86
- // we want to use tableRef.parentElement.clientWidth, which is the same as maxSize
87
- const tableNodeWidth =
88
- isCommentEditor && !table.attrs?.width ? maxSize : getTableContainerWidth(table);
89
- return {
90
- index,
91
- width: tableNodeWidth / colgroupChildren.length,
92
- minWidth,
93
- };
94
- }
95
- const cellsRefs = getCellsRefsInColumn(index, table, start, domAtPos);
96
- return getColumnStateFromDOM(cellsRefs, index, minWidth);
97
- });
98
-
99
- const widths = cols.map((col) => col.width);
100
- const tableWidth = widths.reduce((sum, width) => sum + width, 0);
101
-
102
- const overflow = tableWidth > maxSize;
103
-
104
- return {
105
- cols,
106
- widths,
107
- maxSize,
108
- tableWidth,
109
- overflow,
110
- isScaled: isTableScalingEnabled,
111
- };
112
- };
113
-
114
- // updates Colgroup DOM node with new widths
115
- export const updateColgroup = (
116
- state: ResizeState,
117
- tableRef: HTMLElement | null,
118
- tableNode?: PMNode,
119
- isTableScalingEnabled?: boolean,
120
- scalePercent?: number,
121
- ): void => {
122
- const cols = expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
123
- ? (tableRef?.querySelectorAll(':scope > colgroup > col') as NodeListOf<HTMLElement> | undefined)
124
- : (tableRef?.querySelectorAll('col') as NodeListOf<HTMLElement> | undefined);
125
- const columnsCount = cols?.length;
126
- /**
127
- 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.
128
- We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
129
- We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
130
- * */
131
- if (isTableScalingEnabled && tableNode) {
132
- state.cols
133
- .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
134
- .forEach((column, i) => {
135
- const fixedColWidth = getColWidthFix(column.width, columnsCount ?? 0);
136
- const scaledWidth = fixedColWidth * (scalePercent || 1);
137
- const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
138
- // we aren't handling the remaining pixels here when the 48px min width is reached
139
- if (cols?.[i]) {
140
- cols[i].style.width = `${finalWidth}px`;
141
- }
142
- });
143
- } else {
144
- state.cols
145
- .filter((column) => column && !!column.width) // if width is 0, we dont want to apply that.
146
- .forEach((column, i) => {
147
- if (cols?.[i]) {
148
- cols[i].style.width = `${getColWidthFix(column.width, columnsCount ?? 0)}px`;
149
- }
150
- });
151
- }
152
-
153
- // colgroup has updated, reflect new widths in sticky header
154
- syncStickyRowToTable(tableRef);
155
- };
156
-
157
- export const getTotalWidth = ({ cols }: ResizeState): number => {
158
- return cols.reduce((totalWidth, col) => totalWidth + col.width, 0);
159
- };
160
-
161
- // adjust columns to take up the total width
162
- // difference in total columns widths vs table width happens due to the "Math.floor"
163
- export const adjustColumnsWidths = (resizeState: ResizeState, maxSize: number): ResizeState => {
164
- const totalWidth = getTotalWidth(resizeState);
165
- const diff = maxSize - totalWidth;
166
- if (diff > 0 || (diff < 0 && Math.abs(diff) < tableCellMinWidth)) {
167
- let updated = false;
168
- return {
169
- ...resizeState,
170
- cols: resizeState.cols.map((col) => {
171
- if (!updated && col.width + diff > col.minWidth) {
172
- updated = true;
173
- return { ...col, width: col.width + diff };
174
- }
175
- return col;
176
- }),
177
- };
178
- }
179
-
180
- return resizeState;
181
- };
182
-
183
- export const evenAllColumnsWidths = (resizeState: ResizeState): ResizeState => {
184
- const maxSize = getTotalWidth(resizeState);
185
- const evenWidth = Math.floor(maxSize / resizeState.cols.length);
186
- const cols = resizeState.cols.map((col) => ({ ...col, width: evenWidth }));
187
-
188
- return adjustColumnsWidths({ ...resizeState, cols }, maxSize);
189
- };
190
-
191
- const getSpace = (columns: ColumnState[], start: number, end: number) =>
192
- columns
193
- .slice(start, end)
194
- .map((col) => col.width)
195
- .reduce((sum, width) => sum + width, 0);
196
-
197
- const evenSelectedColumnsWidths = (resizeState: ResizeState, rect: Rect): ResizeState => {
198
- const cols = resizeState.cols;
199
- const selectedSpace = getSpace(cols, rect.left, rect.right);
200
- const allSpace = getSpace(cols, 0, cols.length);
201
-
202
- const allWidth = allSpace / cols.length;
203
- const width = selectedSpace / (rect.right - rect.left);
204
-
205
- // Result equals even distribution of all columns -
206
- // unset widths of all columns
207
- if (allWidth === width) {
208
- return {
209
- ...resizeState,
210
- widths: cols.map(() => width),
211
- cols: resizeState.cols.map((col) => ({
212
- ...col,
213
- width: 0,
214
- })),
215
- };
216
- }
217
-
218
- return {
219
- ...resizeState,
220
- widths: cols.map((col, i) => (i >= rect.left && i < rect.right ? width : col.width)),
221
- cols: cols.map((col, i) => ({
222
- ...col,
223
- width: i >= rect.left && i < rect.right ? width : col.width,
224
- })),
225
- };
226
- };
227
-
228
- export const bulkColumnsResize = (
229
- resizeState: ResizeState,
230
- columnsIndexes: number[],
231
- sourceColumnIndex: number,
232
- ) => {
233
- const currentTableWidth = getTotalWidth(resizeState);
234
- const colIndex =
235
- columnsIndexes.indexOf(sourceColumnIndex) > -1 ? sourceColumnIndex : sourceColumnIndex + 1;
236
- const sourceCol = resizeState.cols[colIndex];
237
- const seenColumns: {
238
- [key: number]: { width: number; minWidth: number; index: number };
239
- } = {};
240
- const widthsDiffs: number[] = [];
241
- const cols = resizeState.cols.map((col) => {
242
- if (columnsIndexes.indexOf(col.index) > -1) {
243
- const diff = col.width - sourceCol.width;
244
- if (diff !== 0) {
245
- widthsDiffs.push(diff);
246
- }
247
- return { ...col, width: sourceCol.width };
248
- }
249
- return col;
250
- });
251
-
252
- let newState = {
253
- ...resizeState,
254
- cols: cols.map((col) => {
255
- if (
256
- columnsIndexes.indexOf(col.index) > -1 ||
257
- // take from prev columns only if dragging the first handle to the left
258
- (columnsIndexes.indexOf(sourceColumnIndex) > -1 && col.index < colIndex)
259
- ) {
260
- return col;
261
- }
262
- while (widthsDiffs.length) {
263
- const diff = widthsDiffs.shift() || 0;
264
- const column = seenColumns[col.index] || col;
265
- const maybeWidth = column.width + diff;
266
-
267
- if (maybeWidth > column.minWidth) {
268
- seenColumns[column.index] = { ...column, width: maybeWidth };
269
- } else {
270
- widthsDiffs.push(maybeWidth - column.minWidth);
271
- seenColumns[column.index] = { ...column, width: column.minWidth };
272
- break;
273
- }
274
- }
275
- return seenColumns[col.index] || col;
276
- }),
277
- };
278
-
279
- // minimum possible table widths at the current layout
280
- const minTableWidth = resizeState.maxSize;
281
- // new table widths after bulk resize
282
- const newTotalWidth = getTotalWidth(newState);
283
- // when all columns are selected, what do we do when sum of columns widths is lower than min possible table widths?
284
- if (columnsIndexes.length === resizeState.cols.length && newTotalWidth < minTableWidth) {
285
- // table is not in overflow -> normal resize of a single column
286
- if (currentTableWidth === minTableWidth) {
287
- return resizeState;
288
- }
289
- // table is in overflow: keep the dragged column at its widths and evenly distribute columns
290
- // to recover from overflow state
291
- else {
292
- const columnWidth = Math.floor(
293
- (minTableWidth - sourceCol.width) / (newState.cols.length - 1),
294
- );
295
- newState = {
296
- ...resizeState,
297
- cols: newState.cols.map((col) => {
298
- if (col.index === sourceCol.index) {
299
- return col;
300
- }
301
-
302
- return { ...col, width: columnWidth };
303
- }),
304
- };
305
- }
306
- }
307
-
308
- // fixes total table widths by adding missing pixels to columns widths here and there
309
- return adjustColumnsWidths(newState, resizeState.maxSize);
310
- };
311
-
312
- // Get the layout
313
- const normaliseTableLayout = (input: string | undefined | null) => {
314
- switch (input) {
315
- case 'wide':
316
- return input;
317
- case 'full-width':
318
- return input;
319
- default:
320
- return 'default';
321
- }
322
- };
323
-
324
- export const getNewResizeStateFromSelectedColumns = (
325
- rect: Rect,
326
- state: EditorState,
327
- domAtPos: (pos: number) => { node: Node; offset: number },
328
- getEditorContainerWidth: GetEditorContainerWidth,
329
- isTableScalingEnabled = false,
330
- isTableFixedColumnWidthsOptionEnabled = false,
331
- isCommentEditor = false,
332
- ): ResizeStateWithAnalytics | undefined => {
333
- // Fail early so that we don't do complex calculations for no reason
334
- const numColumnsSelected = rect.right - rect.left;
335
- if (numColumnsSelected <= 1) {
336
- return;
337
- }
338
-
339
- const { totalRowCount, totalColumnCount, table } = getSelectedTableInfo(state.selection);
340
-
341
- if (!table) {
342
- return;
343
- }
344
-
345
- // Fail early so that we don't do complex calculations for no reason
346
- if (!hasTableBeenResized(table.node)) {
347
- return;
348
- }
349
-
350
- const maybeTable = domAtPos(table.start).node;
351
-
352
- const maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
353
- const tableRef = maybeTableElement?.closest('table');
354
-
355
- if (!tableRef) {
356
- return;
357
- }
358
-
359
- const layout = normaliseTableLayout(tableRef?.dataset.layout);
360
-
361
- const maxSize = getTableMaxWidth({
362
- table: table.node,
363
- tableStart: table.start,
364
- state,
365
- layout,
366
- getEditorContainerWidth,
367
- });
368
-
369
- let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
370
- const isTableScalingWithFixedColumnWidthsOptionEnabled =
371
- isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
372
- if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
373
- isTableScalingEnabledOnCurrentTable = table.node.attrs.displayMode !== 'fixed';
374
- }
375
-
376
- let shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled;
377
-
378
- if (isTableScalingEnabled && isCommentEditor) {
379
- isTableScalingEnabledOnCurrentTable = true;
380
- shouldUseIncreasedScalingPercent = true;
381
- }
382
-
383
- const resizeState = getResizeState({
384
- minWidth: tableCellMinWidth,
385
- maxSize,
386
- table: table.node,
387
- tableRef,
388
- start: table.start,
389
- domAtPos,
390
- isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
391
- shouldUseIncreasedScalingPercent,
392
- isCommentEditor,
393
- });
394
-
395
- const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
396
-
397
- const widthsBefore = resizeState.widths;
398
- const widthsAfter = newResizeState.widths;
399
-
400
- const changed = resizeState.widths.some(
401
- (widthBefore, index) => widthBefore !== widthsAfter[index],
402
- );
403
-
404
- return {
405
- resizeState: newResizeState,
406
- table,
407
- changed,
408
- attributes: {
409
- position: rect.left,
410
- count: rect.right - rect.left,
411
- totalRowCount,
412
- totalColumnCount,
413
- widthsBefore,
414
- widthsAfter,
415
- },
416
- };
417
- };
@@ -1,290 +0,0 @@
1
- import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
2
- import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
3
- import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
4
- import type { Transaction } from '@atlaskit/editor-prosemirror/state';
5
- import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
6
- import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
-
9
- import type { PluginInjectionAPI } from '../../../types';
10
- import { updateColumnWidths } from '../../transforms/column-width';
11
- import { getTableWidth } from '../../utils/nodes';
12
- import { getLayoutSize } from '../utils/misc';
13
- import { reduceSpace } from '../utils/resize-logic';
14
- import {
15
- adjustColumnsWidths,
16
- getResizeState,
17
- getTotalWidth,
18
- updateColgroup,
19
- } from '../utils/resize-state';
20
- import type { ResizeState } from '../utils/types';
21
-
22
- import { hasTableBeenResized, insertColgroupFromNode } from './colgroup';
23
- import { syncStickyRowToTable } from './dom';
24
-
25
- interface ScaleOptions {
26
- node: PMNode;
27
- prevNode: PMNode;
28
- start: number;
29
- containerWidth?: number;
30
- previousContainerWidth?: number;
31
- parentWidth?: number;
32
- layoutChanged?: boolean;
33
- isFullWidthModeEnabled?: boolean;
34
- isTableResizingEnabled?: boolean;
35
- }
36
-
37
- // Base function to trigger the actual scale on a table node.
38
- // Will only resize/scale if a table has been previously resized.
39
- const scale = (
40
- tableRef: HTMLTableElement,
41
- options: ScaleOptions,
42
- domAtPos: DomAtPos,
43
- isTableScalingEnabledOnCurrentTable = false,
44
- shouldUseIncreasedScalingPercent = false,
45
- isCommentEditor = false,
46
- ): ResizeState | undefined => {
47
- const {
48
- node,
49
- containerWidth,
50
- previousContainerWidth,
51
- prevNode,
52
- start,
53
- layoutChanged,
54
- isTableResizingEnabled,
55
- } = options;
56
-
57
- const maxSize = isTableResizingEnabled
58
- ? getTableContainerWidth(node)
59
- : getLayoutSize(node.attrs.layout, containerWidth, {});
60
-
61
- const prevTableWidth = getTableWidth(prevNode);
62
- const previousMaxSize = isTableResizingEnabled
63
- ? getTableContainerWidth(node)
64
- : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {});
65
-
66
- let newWidth = maxSize;
67
-
68
- // adjust table width if layout is updated
69
- const hasOverflow = prevTableWidth > previousMaxSize;
70
-
71
- if (layoutChanged && hasOverflow) {
72
- // No keep overflow if the old content can be in the new size
73
- const canFitInNewSize = prevTableWidth < maxSize;
74
- if (canFitInNewSize) {
75
- newWidth = maxSize;
76
- } else {
77
- // Keep the same scale.
78
- const overflowScale = prevTableWidth / previousMaxSize;
79
- newWidth = Math.floor(newWidth * overflowScale);
80
- }
81
- }
82
-
83
- if (node.attrs.isNumberColumnEnabled) {
84
- newWidth -= akEditorTableNumberColumnWidth;
85
- }
86
-
87
- const resizeState = getResizeState({
88
- minWidth: tableCellMinWidth,
89
- maxSize,
90
- table: node,
91
- tableRef,
92
- start,
93
- domAtPos,
94
- isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
95
- shouldUseIncreasedScalingPercent,
96
- isCommentEditor,
97
- });
98
-
99
- return scaleTableTo(resizeState, newWidth);
100
- };
101
-
102
- const scaleWithParent = (
103
- tableRef: HTMLTableElement,
104
- parentWidth: number,
105
- table: PMNode,
106
- start: number,
107
- domAtPos: DomAtPos,
108
- isTableScalingEnabledOnCurrentTable = false,
109
- shouldUseIncreasedScalingPercent = false,
110
- isCommentEditor = false,
111
- ) => {
112
- const resizeState = getResizeState({
113
- minWidth: tableCellMinWidth,
114
- maxSize: parentWidth,
115
- table,
116
- tableRef,
117
- start,
118
- domAtPos,
119
- isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
120
- shouldUseIncreasedScalingPercent,
121
- isCommentEditor,
122
- });
123
-
124
- if (table.attrs.isNumberColumnEnabled) {
125
- parentWidth -= akEditorTableNumberColumnWidth;
126
- }
127
-
128
- return scaleTableTo(resizeState, Math.floor(parentWidth));
129
- };
130
-
131
- // Scales the table to a given size and updates its colgroup DOM node
132
- export function scaleTableTo(state: ResizeState, maxSize: number): ResizeState {
133
- const scaleFactor = maxSize / getTotalWidth(state);
134
-
135
- let newState = {
136
- ...state,
137
- maxSize,
138
- cols: state.cols.map((col) => {
139
- const { minWidth, width } = col;
140
- let newColWidth = Math.floor(width * scaleFactor);
141
- if (newColWidth < minWidth) {
142
- newColWidth = minWidth;
143
- }
144
- return { ...col, width: newColWidth };
145
- }),
146
- };
147
-
148
- const newTotalWidth = getTotalWidth(newState);
149
- if (newTotalWidth > maxSize) {
150
- newState = reduceSpace(newState, newTotalWidth - maxSize);
151
- }
152
-
153
- return adjustColumnsWidths(newState, maxSize);
154
- }
155
-
156
- export const previewScaleTable = (
157
- tableRef: HTMLTableElement | null | undefined,
158
- options: ScaleOptions,
159
- domAtPos: DomAtPos,
160
- isTableScalingEnabled: boolean = false,
161
- isTableWithFixedColumnWidthsOptionEnabled: boolean = false,
162
- isCommentEditor: boolean = false,
163
- ) => {
164
- const { node, start, parentWidth } = options;
165
-
166
- if (!tableRef) {
167
- return;
168
- }
169
-
170
- if (parentWidth) {
171
- const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
172
- const width = isNumberColumnEnabled
173
- ? parentWidth - akEditorTableNumberColumnWidth
174
- : parentWidth;
175
- tableRef.style.width = `${width}px`;
176
- }
177
-
178
- let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
179
- const isTableScalingWithFixedColumnWidthsOptionEnabled =
180
- isTableScalingEnabled && isTableWithFixedColumnWidthsOptionEnabled;
181
-
182
- if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
183
- isTableScalingEnabledOnCurrentTable =
184
- isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
185
- }
186
- // If the table hasn't been resize, the colgroup 48px width values will gracefully scale down.
187
- // If we are scaling the table down with isTableScalingEnabled, the colgroup widths may be scaled to a value that is not 48px.
188
- if (!hasTableBeenResized(node) && !isTableScalingEnabledOnCurrentTable) {
189
- syncStickyRowToTable(tableRef);
190
- return;
191
- }
192
-
193
- const shouldUseIncreasedScalingPercent =
194
- isTableScalingWithFixedColumnWidthsOptionEnabled || (isTableScalingEnabled && isCommentEditor);
195
-
196
- const resizeState = parentWidth
197
- ? scaleWithParent(
198
- tableRef,
199
- parentWidth,
200
- node,
201
- start,
202
- domAtPos,
203
- false, // Here isTableScalingEnabled = false
204
- shouldUseIncreasedScalingPercent,
205
- )
206
- : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
207
-
208
- if (resizeState) {
209
- updateColgroup(resizeState, tableRef, node, false, 1);
210
- }
211
- };
212
-
213
- // Scale the table to meet new requirements (col, layout change etc)
214
- export const scaleTable =
215
- (
216
- tableRef: HTMLTableElement | null | undefined,
217
- options: ScaleOptions,
218
- domAtPos: DomAtPos,
219
- api: PluginInjectionAPI | undefined | null,
220
- isTableScalingEnabledOnCurrentTable = false,
221
- shouldUseIncreasedScalingPercent = false,
222
- isCommentEditor = false,
223
- ) =>
224
- (tr: Transaction) => {
225
- if (!tableRef) {
226
- return tr;
227
- }
228
- const { node, start, parentWidth, layoutChanged } = options;
229
- // If a table has not been resized yet, columns should be auto.
230
- if (hasTableBeenResized(node) === false) {
231
- // If its not a re-sized table, we still want to re-create cols
232
- // To force reflow of columns upon delete.
233
- if (!isTableScalingEnabledOnCurrentTable) {
234
- const isTableScalingEnabled = false;
235
- insertColgroupFromNode(
236
- tableRef,
237
- node,
238
- isTableScalingEnabled,
239
- undefined,
240
- shouldUseIncreasedScalingPercent,
241
- isCommentEditor,
242
- );
243
- }
244
- tr.setMeta('scrollIntoView', false);
245
- return tr;
246
- }
247
-
248
- let resizeState;
249
- if (parentWidth) {
250
- resizeState = scaleWithParent(
251
- tableRef,
252
- parentWidth,
253
- node,
254
- start,
255
- domAtPos,
256
- isTableScalingEnabledOnCurrentTable,
257
- shouldUseIncreasedScalingPercent,
258
- );
259
- } else {
260
- resizeState = scale(
261
- tableRef,
262
- options,
263
- domAtPos,
264
- isTableScalingEnabledOnCurrentTable,
265
- shouldUseIncreasedScalingPercent,
266
- );
267
- }
268
-
269
- if (resizeState) {
270
- tr = updateColumnWidths(resizeState, node, start, api)(tr);
271
-
272
- if (!fg('platform_editor_fix_table_resizing_undo')) {
273
- tr.setMeta('addToHistory', false);
274
- }
275
-
276
- if (tr.docChanged) {
277
- tr.setMeta('scrollIntoView', false);
278
- // TODO: ED-8995 - We need to do this check to reduce the number of race conditions when working with tables.
279
- // This metadata is been used in the sendTransaction function in the Collab plugin
280
- /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
281
- scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
282
- Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
283
- */
284
- !layoutChanged && tr.setMeta('scaleTable', true);
285
- return tr;
286
- }
287
- }
288
-
289
- return tr;
290
- };