@atlaskit/editor-plugin-table 12.2.5 → 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 (207) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +24 -2
  3. package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +23 -1
  4. package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +24 -2
  5. package/package.json +4 -4
  6. package/afm-cc/tsconfig.json +0 -123
  7. package/afm-dev-agents/tsconfig.json +0 -123
  8. package/afm-jira/tsconfig.json +0 -123
  9. package/afm-passionfruit/tsconfig.json +0 -123
  10. package/afm-post-office/tsconfig.json +0 -123
  11. package/afm-rovo-extension/tsconfig.json +0 -123
  12. package/afm-townsquare/tsconfig.json +0 -123
  13. package/afm-volt/tsconfig.json +0 -114
  14. package/build/tsconfig.json +0 -23
  15. package/docs/0-intro.tsx +0 -57
  16. package/src/index.ts +0 -21
  17. package/src/nodeviews/ExternalDropTargets.tsx +0 -91
  18. package/src/nodeviews/OverflowShadowsObserver.ts +0 -156
  19. package/src/nodeviews/TableCell.ts +0 -134
  20. package/src/nodeviews/TableComponent.tsx +0 -1590
  21. package/src/nodeviews/TableComponentWithSharedState.tsx +0 -278
  22. package/src/nodeviews/TableContainer.tsx +0 -926
  23. package/src/nodeviews/TableNodeViewBase.ts +0 -29
  24. package/src/nodeviews/TableResizer.tsx +0 -884
  25. package/src/nodeviews/TableRow.ts +0 -830
  26. package/src/nodeviews/TableStickyScrollbar.ts +0 -211
  27. package/src/nodeviews/__mocks__/OverflowShadowsObserver.ts +0 -15
  28. package/src/nodeviews/__mocks__/OverridableMock.ts +0 -26
  29. package/src/nodeviews/table-container-styles.ts +0 -9
  30. package/src/nodeviews/table-node-views.ts +0 -76
  31. package/src/nodeviews/table.tsx +0 -530
  32. package/src/nodeviews/toDOM.ts +0 -244
  33. package/src/nodeviews/types.ts +0 -36
  34. package/src/nodeviews/update-overflow-shadows.ts +0 -11
  35. package/src/pm-plugins/analytics/actions.ts +0 -21
  36. package/src/pm-plugins/analytics/commands.ts +0 -47
  37. package/src/pm-plugins/analytics/plugin-factory.ts +0 -9
  38. package/src/pm-plugins/analytics/plugin-key.ts +0 -5
  39. package/src/pm-plugins/analytics/plugin.ts +0 -80
  40. package/src/pm-plugins/analytics/reducer.ts +0 -27
  41. package/src/pm-plugins/analytics/types.ts +0 -20
  42. package/src/pm-plugins/analytics/utils/moved-event.ts +0 -51
  43. package/src/pm-plugins/commands/clear.ts +0 -43
  44. package/src/pm-plugins/commands/collapse.ts +0 -17
  45. package/src/pm-plugins/commands/column-resize.ts +0 -478
  46. package/src/pm-plugins/commands/commands-with-analytics.ts +0 -715
  47. package/src/pm-plugins/commands/delete.ts +0 -42
  48. package/src/pm-plugins/commands/display-mode.ts +0 -18
  49. package/src/pm-plugins/commands/go-to-next-cell.ts +0 -198
  50. package/src/pm-plugins/commands/hover.ts +0 -242
  51. package/src/pm-plugins/commands/index.ts +0 -51
  52. package/src/pm-plugins/commands/insert.ts +0 -438
  53. package/src/pm-plugins/commands/misc.ts +0 -811
  54. package/src/pm-plugins/commands/referentiality.ts +0 -15
  55. package/src/pm-plugins/commands/selection.ts +0 -537
  56. package/src/pm-plugins/commands/sort.ts +0 -102
  57. package/src/pm-plugins/commands/split-cell.ts +0 -28
  58. package/src/pm-plugins/commands/toggle.ts +0 -109
  59. package/src/pm-plugins/create-plugin-config.ts +0 -17
  60. package/src/pm-plugins/decorations/plugin.ts +0 -107
  61. package/src/pm-plugins/decorations/utils/column-controls.ts +0 -91
  62. package/src/pm-plugins/decorations/utils/column-resizing.ts +0 -71
  63. package/src/pm-plugins/decorations/utils/compose-decorations.ts +0 -9
  64. package/src/pm-plugins/decorations/utils/types.ts +0 -16
  65. package/src/pm-plugins/default-table-selection.ts +0 -14
  66. package/src/pm-plugins/drag-and-drop/actions.ts +0 -48
  67. package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts +0 -222
  68. package/src/pm-plugins/drag-and-drop/commands.ts +0 -194
  69. package/src/pm-plugins/drag-and-drop/consts.ts +0 -7
  70. package/src/pm-plugins/drag-and-drop/plugin-factory.ts +0 -33
  71. package/src/pm-plugins/drag-and-drop/plugin-key.ts +0 -5
  72. package/src/pm-plugins/drag-and-drop/plugin.ts +0 -398
  73. package/src/pm-plugins/drag-and-drop/reducer.ts +0 -38
  74. package/src/pm-plugins/drag-and-drop/types.ts +0 -18
  75. package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +0 -49
  76. package/src/pm-plugins/drag-and-drop/utils/getDragBehaviour.ts +0 -9
  77. package/src/pm-plugins/drag-and-drop/utils/monitor.ts +0 -73
  78. package/src/pm-plugins/handlers.ts +0 -161
  79. package/src/pm-plugins/keymap.ts +0 -436
  80. package/src/pm-plugins/main.ts +0 -433
  81. package/src/pm-plugins/plugin-factory.ts +0 -42
  82. package/src/pm-plugins/plugin-key.ts +0 -8
  83. package/src/pm-plugins/reducer.ts +0 -145
  84. package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts +0 -102
  85. package/src/pm-plugins/sticky-headers/commands.ts +0 -8
  86. package/src/pm-plugins/sticky-headers/plugin-key.ts +0 -5
  87. package/src/pm-plugins/sticky-headers/plugin-state.ts +0 -52
  88. package/src/pm-plugins/sticky-headers/plugin.ts +0 -12
  89. package/src/pm-plugins/sticky-headers/types.ts +0 -20
  90. package/src/pm-plugins/sticky-headers/util.ts +0 -18
  91. package/src/pm-plugins/table-analytics.ts +0 -100
  92. package/src/pm-plugins/table-local-id.ts +0 -213
  93. package/src/pm-plugins/table-resizing/commands.ts +0 -116
  94. package/src/pm-plugins/table-resizing/event-handlers.ts +0 -352
  95. package/src/pm-plugins/table-resizing/plugin-factory.ts +0 -29
  96. package/src/pm-plugins/table-resizing/plugin-key.ts +0 -5
  97. package/src/pm-plugins/table-resizing/plugin.ts +0 -94
  98. package/src/pm-plugins/table-resizing/reducer.ts +0 -37
  99. package/src/pm-plugins/table-resizing/utils/colgroup.ts +0 -306
  100. package/src/pm-plugins/table-resizing/utils/column-state.ts +0 -120
  101. package/src/pm-plugins/table-resizing/utils/consts.ts +0 -11
  102. package/src/pm-plugins/table-resizing/utils/content-width.ts +0 -118
  103. package/src/pm-plugins/table-resizing/utils/dom.ts +0 -132
  104. package/src/pm-plugins/table-resizing/utils/misc.ts +0 -282
  105. package/src/pm-plugins/table-resizing/utils/resize-column.ts +0 -34
  106. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +0 -289
  107. package/src/pm-plugins/table-resizing/utils/resize-state.ts +0 -417
  108. package/src/pm-plugins/table-resizing/utils/scale-table.ts +0 -290
  109. package/src/pm-plugins/table-resizing/utils/types.ts +0 -25
  110. package/src/pm-plugins/table-resizing/utils/unit-to-number.ts +0 -1
  111. package/src/pm-plugins/table-selection-keymap.ts +0 -64
  112. package/src/pm-plugins/table-size-selector.ts +0 -39
  113. package/src/pm-plugins/table-width-in-comment-fix.ts +0 -113
  114. package/src/pm-plugins/table-width.ts +0 -153
  115. package/src/pm-plugins/transforms/column-width.ts +0 -249
  116. package/src/pm-plugins/transforms/delete-columns.ts +0 -281
  117. package/src/pm-plugins/transforms/delete-rows.ts +0 -154
  118. package/src/pm-plugins/transforms/fix-tables.ts +0 -249
  119. package/src/pm-plugins/transforms/merge.ts +0 -301
  120. package/src/pm-plugins/transforms/replace-table.ts +0 -38
  121. package/src/pm-plugins/transforms/split.ts +0 -90
  122. package/src/pm-plugins/utils/alignment.ts +0 -33
  123. package/src/pm-plugins/utils/analytics.ts +0 -238
  124. package/src/pm-plugins/utils/collapse.ts +0 -93
  125. package/src/pm-plugins/utils/column-controls.ts +0 -250
  126. package/src/pm-plugins/utils/create.ts +0 -64
  127. package/src/pm-plugins/utils/decoration.ts +0 -672
  128. package/src/pm-plugins/utils/dom.ts +0 -251
  129. package/src/pm-plugins/utils/drag-menu.tsx +0 -491
  130. package/src/pm-plugins/utils/get-allow-add-column-custom-step.ts +0 -10
  131. package/src/pm-plugins/utils/guidelines.ts +0 -30
  132. package/src/pm-plugins/utils/merged-cells.ts +0 -239
  133. package/src/pm-plugins/utils/nodes.ts +0 -162
  134. package/src/pm-plugins/utils/paste.ts +0 -386
  135. package/src/pm-plugins/utils/row-controls.ts +0 -211
  136. package/src/pm-plugins/utils/selection.ts +0 -17
  137. package/src/pm-plugins/utils/snapping.ts +0 -136
  138. package/src/pm-plugins/utils/table.ts +0 -60
  139. package/src/pm-plugins/utils/update-plugin-state-decorations.ts +0 -13
  140. package/src/pm-plugins/view-mode-sort/consts.ts +0 -3
  141. package/src/pm-plugins/view-mode-sort/index.ts +0 -291
  142. package/src/pm-plugins/view-mode-sort/plugin-key.ts +0 -7
  143. package/src/pm-plugins/view-mode-sort/types.ts +0 -23
  144. package/src/pm-plugins/view-mode-sort/utils.ts +0 -136
  145. package/src/tablePlugin.tsx +0 -971
  146. package/src/tablePluginType.ts +0 -102
  147. package/src/types/index.ts +0 -592
  148. package/src/ui/ColumnResizeWidget/index.tsx +0 -61
  149. package/src/ui/ContentComponent.tsx +0 -311
  150. package/src/ui/DragHandle/HandleIconComponent.tsx +0 -21
  151. package/src/ui/DragHandle/index.tsx +0 -391
  152. package/src/ui/DragPreview/index.tsx +0 -51
  153. package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx +0 -59
  154. package/src/ui/FloatingContextualButton/FixedButton.tsx +0 -203
  155. package/src/ui/FloatingContextualButton/index.tsx +0 -168
  156. package/src/ui/FloatingContextualButton/styles.ts +0 -69
  157. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +0 -931
  158. package/src/ui/FloatingContextualMenu/index.tsx +0 -141
  159. package/src/ui/FloatingContextualMenu/styles.ts +0 -77
  160. package/src/ui/FloatingDeleteButton/DeleteButton.tsx +0 -54
  161. package/src/ui/FloatingDeleteButton/getPopUpOptions.ts +0 -65
  162. package/src/ui/FloatingDeleteButton/index.tsx +0 -383
  163. package/src/ui/FloatingDeleteButton/types.ts +0 -3
  164. package/src/ui/FloatingDragMenu/DragMenu.tsx +0 -668
  165. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +0 -221
  166. package/src/ui/FloatingDragMenu/index.tsx +0 -136
  167. package/src/ui/FloatingDragMenu/styles.ts +0 -83
  168. package/src/ui/FloatingInsertButton/InsertButton.tsx +0 -263
  169. package/src/ui/FloatingInsertButton/getPopupOptions.ts +0 -131
  170. package/src/ui/FloatingInsertButton/index.tsx +0 -314
  171. package/src/ui/FloatingToolbarLabel/FloatingToolbarLabel.tsx +0 -31
  172. package/src/ui/SizeSelector/index.tsx +0 -74
  173. package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx +0 -397
  174. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx +0 -105
  175. package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx +0 -63
  176. package/src/ui/TableFloatingColumnControls/index.tsx +0 -151
  177. package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx +0 -106
  178. package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx +0 -143
  179. package/src/ui/TableFloatingControls/CornerControls/types.ts +0 -12
  180. package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx +0 -88
  181. package/src/ui/TableFloatingControls/NumberColumn/index.tsx +0 -150
  182. package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx +0 -131
  183. package/src/ui/TableFloatingControls/RowControls/DragControls.tsx +0 -429
  184. package/src/ui/TableFloatingControls/RowDropTarget/index.tsx +0 -96
  185. package/src/ui/TableFloatingControls/index.tsx +0 -275
  186. package/src/ui/TableFullWidthLabel/index.tsx +0 -38
  187. package/src/ui/common-styles.ts +0 -1218
  188. package/src/ui/consts.ts +0 -109
  189. package/src/ui/event-handlers.ts +0 -662
  190. package/src/ui/global-styles.tsx +0 -55
  191. package/src/ui/hooks/useInternalTablePluginStateSelector.ts +0 -38
  192. package/src/ui/icons/AddColLeftIcon.tsx +0 -37
  193. package/src/ui/icons/AddColRightIcon.tsx +0 -37
  194. package/src/ui/icons/AddRowAboveIcon.tsx +0 -22
  195. package/src/ui/icons/AddRowBelowIcon.tsx +0 -39
  196. package/src/ui/icons/DragHandleDisabledIcon.tsx +0 -25
  197. package/src/ui/icons/DragHandleIcon.tsx +0 -16
  198. package/src/ui/icons/DragInMotionIcon.tsx +0 -54
  199. package/src/ui/icons/MergeCellsIcon.tsx +0 -26
  200. package/src/ui/icons/MinimisedHandle.tsx +0 -15
  201. package/src/ui/icons/SortingIconWrapper.tsx +0 -43
  202. package/src/ui/icons/SplitCellIcon.tsx +0 -34
  203. package/src/ui/toolbar.tsx +0 -1153
  204. package/src/ui/ui-styles.ts +0 -960
  205. package/tsconfig.app.json +0 -135
  206. package/tsconfig.dev.json +0 -54
  207. 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
- };