@atlaskit/editor-plugin-table 8.4.14 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +9 -84
  3. package/dist/cjs/pm-plugins/table-resizing/plugin.js +2 -2
  4. package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +3 -144
  5. package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +1 -2
  6. package/dist/cjs/pm-plugins/view-mode-sort/utils.js +3 -0
  7. package/dist/cjs/tablePlugin.js +3 -5
  8. package/dist/cjs/ui/DragPreview/index.js +1 -0
  9. package/dist/cjs/ui/FloatingContextualButton/index.js +1 -2
  10. package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +2 -4
  11. package/dist/cjs/ui/toolbar.js +1 -4
  12. package/dist/es2019/nodeviews/TableContainer.js +1 -1
  13. package/dist/es2019/pm-plugins/commands/column-resize.js +1 -1
  14. package/dist/es2019/pm-plugins/commands/insert.js +3 -3
  15. package/dist/es2019/pm-plugins/commands/misc.js +1 -1
  16. package/dist/es2019/pm-plugins/drag-and-drop/commands.js +1 -1
  17. package/dist/es2019/pm-plugins/table-analytics.js +1 -1
  18. package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +12 -84
  19. package/dist/es2019/pm-plugins/table-resizing/plugin.js +2 -2
  20. package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +2 -2
  21. package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +2 -139
  22. package/dist/es2019/pm-plugins/table-resizing/utils/resize-logic.js +1 -1
  23. package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +1 -2
  24. package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +1 -1
  25. package/dist/es2019/pm-plugins/transforms/delete-columns.js +1 -1
  26. package/dist/es2019/pm-plugins/transforms/fix-tables.js +1 -1
  27. package/dist/es2019/pm-plugins/transforms/replace-table.js +1 -1
  28. package/dist/es2019/pm-plugins/transforms/split.js +2 -2
  29. package/dist/es2019/pm-plugins/utils/analytics.js +4 -4
  30. package/dist/es2019/pm-plugins/utils/column-controls.js +1 -1
  31. package/dist/es2019/pm-plugins/utils/drag-menu.js +1 -1
  32. package/dist/es2019/pm-plugins/utils/merged-cells.js +4 -4
  33. package/dist/es2019/pm-plugins/utils/nodes.js +3 -3
  34. package/dist/es2019/pm-plugins/utils/row-controls.js +2 -2
  35. package/dist/es2019/pm-plugins/view-mode-sort/index.js +2 -2
  36. package/dist/es2019/pm-plugins/view-mode-sort/utils.js +4 -1
  37. package/dist/es2019/tablePlugin.js +3 -5
  38. package/dist/es2019/ui/DragPreview/index.js +4 -3
  39. package/dist/es2019/ui/FloatingContextualButton/index.js +1 -2
  40. package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +4 -6
  41. package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +4 -4
  42. package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js +2 -2
  43. package/dist/es2019/ui/toolbar.js +1 -4
  44. package/dist/esm/pm-plugins/table-resizing/event-handlers.js +11 -85
  45. package/dist/esm/pm-plugins/table-resizing/plugin.js +2 -2
  46. package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +2 -143
  47. package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +1 -2
  48. package/dist/esm/pm-plugins/view-mode-sort/utils.js +3 -0
  49. package/dist/esm/tablePlugin.js +3 -5
  50. package/dist/esm/ui/DragPreview/index.js +1 -0
  51. package/dist/esm/ui/FloatingContextualButton/index.js +1 -2
  52. package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +2 -4
  53. package/dist/esm/ui/toolbar.js +1 -4
  54. package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
  55. package/dist/types/pm-plugins/table-resizing/plugin.d.ts +1 -1
  56. package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts +0 -24
  57. package/dist/types/tablePluginType.d.ts +0 -1
  58. package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
  59. package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts +1 -1
  60. package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts +0 -24
  61. package/dist/types-ts4.5/tablePluginType.d.ts +0 -1
  62. package/package.json +4 -4
  63. package/src/nodeviews/TableContainer.tsx +1 -1
  64. package/src/pm-plugins/commands/column-resize.ts +1 -1
  65. package/src/pm-plugins/commands/insert.ts +3 -3
  66. package/src/pm-plugins/commands/misc.ts +1 -1
  67. package/src/pm-plugins/drag-and-drop/commands.ts +1 -1
  68. package/src/pm-plugins/table-analytics.ts +1 -1
  69. package/src/pm-plugins/table-resizing/event-handlers.ts +35 -121
  70. package/src/pm-plugins/table-resizing/plugin.ts +0 -4
  71. package/src/pm-plugins/table-resizing/utils/misc.ts +2 -2
  72. package/src/pm-plugins/table-resizing/utils/resize-column.ts +1 -219
  73. package/src/pm-plugins/table-resizing/utils/resize-logic.ts +1 -1
  74. package/src/pm-plugins/table-resizing/utils/resize-state.ts +1 -3
  75. package/src/pm-plugins/table-resizing/utils/scale-table.ts +1 -1
  76. package/src/pm-plugins/transforms/delete-columns.ts +1 -1
  77. package/src/pm-plugins/transforms/fix-tables.ts +1 -1
  78. package/src/pm-plugins/transforms/replace-table.ts +1 -1
  79. package/src/pm-plugins/transforms/split.ts +2 -2
  80. package/src/pm-plugins/utils/analytics.ts +4 -4
  81. package/src/pm-plugins/utils/column-controls.ts +1 -1
  82. package/src/pm-plugins/utils/drag-menu.ts +1 -1
  83. package/src/pm-plugins/utils/merged-cells.ts +4 -4
  84. package/src/pm-plugins/utils/nodes.ts +3 -3
  85. package/src/pm-plugins/utils/row-controls.ts +2 -2
  86. package/src/pm-plugins/view-mode-sort/index.ts +2 -2
  87. package/src/pm-plugins/view-mode-sort/utils.ts +3 -1
  88. package/src/tablePlugin.tsx +3 -10
  89. package/src/tablePluginType.ts +0 -1
  90. package/src/ui/DragPreview/index.tsx +4 -3
  91. package/src/ui/FloatingContextualButton/index.tsx +1 -2
  92. package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +4 -6
  93. package/src/ui/FloatingDragMenu/DragMenu.tsx +4 -4
  94. package/src/ui/FloatingDragMenu/DropdownMenu.tsx +2 -2
  95. package/src/ui/toolbar.tsx +1 -11
  96. package/tsconfig.app.json +0 -1
  97. package/tsconfig.dev.json +0 -1
@@ -1,4 +1,4 @@
1
- import { ACTION_SUBJECT, CHANGE_ALIGNMENT_REASON, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
1
+ import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
2
2
  import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
3
3
  import { TableMap } from '@atlaskit/editor-tables/table-map';
4
4
  import { getSelectionRect } from '@atlaskit/editor-tables/utils';
@@ -7,17 +7,15 @@ import { updateResizeHandleDecorations } from '../commands/misc';
7
7
  import { getPluginState as getTablePluginState } from '../plugin-factory';
8
8
  import { META_KEYS } from '../table-analytics';
9
9
  import { updateColumnWidths } from '../transforms/column-width';
10
- import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../utils/alignment';
11
- import { isTableNested } from '../utils/nodes';
12
10
  import { getSelectedColumnIndexes } from '../utils/selection';
13
11
  import { evenColumns, setDragging, stopResizing } from './commands';
14
12
  import { getPluginState } from './plugin-factory';
15
13
  import { TABLE_OFFSET_IN_COMMENT_EDITOR } from './utils/consts';
16
14
  import { updateControls } from './utils/dom';
17
15
  import { currentColWidth, getTableMaxWidth, pointsAtCell, getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './utils/misc';
18
- import { resizeColumn, resizeColumnAndTable, scaleResizeState } from './utils/resize-column';
16
+ import { resizeColumn } from './utils/resize-column';
19
17
  import { getResizeState } from './utils/resize-state';
20
- export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor
18
+ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isCommentEditor
21
19
  // Ignored via go/ees005
22
20
  // eslint-disable-next-line @typescript-eslint/max-params
23
21
  ) => {
@@ -29,7 +27,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
29
27
  const editorDisabled = !view.editable;
30
28
  const domAtPos = view.domAtPos.bind(view);
31
29
  const {
32
- lineLength,
33
30
  width: editorWidth
34
31
  } = getEditorContainerWidth();
35
32
  if (editorDisabled || localResizeHandlePos === null || !pointsAtCell(state.doc.resolve(localResizeHandlePos))) {
@@ -80,7 +77,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
80
77
  shouldScale = tableDepth === 0;
81
78
  shouldUseIncreasedScalingPercent = true;
82
79
  }
83
- let resizeState = getResizeState({
80
+ const resizeState = getResizeState({
84
81
  minWidth: tableCellMinWidth,
85
82
  maxSize,
86
83
  table: originalTable,
@@ -113,18 +110,6 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
113
110
  // When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
114
111
  // unnecessary tooltips being displayed during drag.
115
112
  updateResizeHandleDecorations(nodeViewPortalProviderAPI, undefined, undefined, false)(state, dispatch);
116
-
117
- // for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
118
- // implication: the scaled version of the table becomes the source of truth
119
- if (isNewColumnResizingEnabled && shouldScale) {
120
- resizeState = scaleResizeState({
121
- resizeState,
122
- tableRef: dom,
123
- tableNode: originalTable,
124
- editorWidth,
125
- shouldUseIncreasedScalingPercent
126
- });
127
- }
128
113
  function finish(event) {
129
114
  // Ignored via go/ees005
130
115
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -183,9 +168,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
183
168
  // For example, if a table col is deleted we won't be able to reliably remap the new widths
184
169
  // There may be a more elegant solution to this, to avoid a jarring experience.
185
170
  if (table.eq(originalTable)) {
171
+ var _table$attrs;
186
172
  const map = TableMap.get(table);
187
- const totalRowCount = map.height;
188
- const totalColumnCount = map.width;
189
173
  const colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;
190
174
  const selectionRect = getSelectionRect(state.selection);
191
175
  const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
@@ -197,51 +181,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
197
181
  }
198
182
  const resizedDelta = clientX - startX;
199
183
  const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && !!isCommentEditor;
200
- if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
201
- const newResizeState = resizeColumnAndTable({
202
- resizeState,
203
- colIndex,
204
- amount: resizedDelta,
205
- tableRef: dom,
206
- tableNode: originalTable,
207
- width: editorWidth,
208
- lineLength,
209
- isTableAlignmentEnabled
210
- });
211
- tr = updateColumnWidths(newResizeState, table, start, api)(tr);
212
-
213
- // If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
214
- const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, originalTable, lineLength, newResizeState.maxSize);
215
- if (shouldChangeAlignment) {
216
- tr = tr.setNodeMarkup(start - 1, state.schema.nodes.table, {
217
- ...table.attrs,
218
- width: newResizeState.maxSize,
219
- layout: ALIGN_CENTER
220
- });
221
- editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
222
- action: TABLE_ACTION.CHANGED_ALIGNMENT,
223
- actionSubject: ACTION_SUBJECT.TABLE,
224
- actionSubjectId: null,
225
- attributes: {
226
- tableWidth: newResizeState.maxSize,
227
- newAlignment: ALIGN_CENTER,
228
- previousAlignment: ALIGN_START,
229
- totalRowCount: totalRowCount,
230
- totalColumnCount: totalColumnCount,
231
- inputMethod: INPUT_METHOD.AUTO,
232
- reason: CHANGE_ALIGNMENT_REASON.TABLE_COLUMN_RESIZED
233
- },
234
- eventType: EVENT_TYPE.TRACK
235
- })(tr);
236
- } else {
237
- tr.setNodeAttribute(start - 1, 'width', newResizeState.maxSize);
238
- }
239
- } else {
240
- var _table$attrs;
241
- const scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width) ? getScalingPercentForTableWithoutWidth(originalTable, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
242
- const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, scalePercent);
243
- tr = updateColumnWidths(newResizeState, table, start, api)(tr);
244
- }
184
+ const scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width) ? getScalingPercentForTableWithoutWidth(originalTable, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
185
+ const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, scalePercent);
186
+ tr = updateColumnWidths(newResizeState, table, start, api)(tr);
245
187
  if (colIndex === map.width - 1) {
246
188
  const mouseUpTime = event.timeStamp;
247
189
  editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
@@ -285,6 +227,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
285
227
  }
286
228
  }
287
229
  function move(event) {
230
+ var _table$attrs2;
288
231
  const {
289
232
  clientX,
290
233
  which
@@ -300,12 +243,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
300
243
  isTableHovered
301
244
  } = getTablePluginState(state);
302
245
  const tablePos = state.doc.resolve(start).start(-1);
303
- if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || (!isNewColumnResizingEnabled || isTableNested(state, tablePos)) && !isTableHovered) {
246
+ if (!which || !dragging || resizeHandlePos === null || !pointsAtCell(state.doc.resolve(resizeHandlePos)) || !isTableHovered) {
304
247
  return finish(event);
305
248
  }
306
249
  const $cell = state.doc.resolve(resizeHandlePos);
307
250
  const table = $cell.node(-1);
308
- // const tablePos = state.doc.resolve(start).start(-1);
309
251
  const tableDepth = state.doc.resolve(tablePos).depth;
310
252
  const map = TableMap.get(table);
311
253
  // Ignored via go/ees005
@@ -317,22 +259,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
317
259
  shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
318
260
  }
319
261
  const resizedDelta = clientX - dragging.startX;
320
- if (isNewColumnResizingEnabled && !isTableNested(state, tablePos) && !isCommentEditor) {
321
- resizeColumnAndTable({
322
- resizeState,
323
- colIndex,
324
- amount: resizedDelta,
325
- tableRef: dom,
326
- tableNode: originalTable,
327
- width: editorWidth,
328
- lineLength,
329
- isTableAlignmentEnabled
330
- });
331
- } else {
332
- var _table$attrs2;
333
- const scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? getScalingPercentForTableWithoutWidth(table, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
334
- resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
335
- }
262
+ const scalePercent = isTableScalingEnabled && isCommentEditor && !((_table$attrs2 = table.attrs) !== null && _table$attrs2 !== void 0 && _table$attrs2.width) ? getScalingPercentForTableWithoutWidth(table, dom) : getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
263
+ resizeColumn(resizeState, colIndex, resizedDelta, dom, table, undefined, shouldScale, scalePercent);
336
264
  updateControls()(state);
337
265
  }
338
266
 
@@ -12,7 +12,7 @@ import { getResizeCellPos } from './utils/dom';
12
12
  // eslint-disable-next-line @typescript-eslint/max-params
13
13
  export function createPlugin(dispatch, {
14
14
  lastColumnResizable = true
15
- }, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
15
+ }, getEditorContainerWidth, getEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled, isCommentEditor) {
16
16
  return new SafePlugin({
17
17
  key: pluginKey,
18
18
  state: createPluginState(dispatch, {
@@ -54,7 +54,7 @@ export function createPlugin(dispatch, {
54
54
  isColumnKeyboardResizeStarted = isKeyboardResize;
55
55
  }
56
56
  if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
57
- if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
57
+ if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isCommentEditor)) {
58
58
  const {
59
59
  state,
60
60
  dispatch
@@ -30,7 +30,7 @@ export function currentColWidth(view, cellPos, {
30
30
  colspan,
31
31
  colwidth
32
32
  }) {
33
- let width = colwidth && colwidth[colwidth.length - 1];
33
+ const width = colwidth && colwidth[colwidth.length - 1];
34
34
  if (width) {
35
35
  return width;
36
36
  }
@@ -100,7 +100,7 @@ export const getScalingPercentForTableWithoutWidth = (table, tableRef) => {
100
100
  if (hasTableColumnBeenResized(table)) {
101
101
  var _tableRef$parentEleme2;
102
102
  const tableWidth = calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
103
- let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || tableWidth;
103
+ const renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || tableWidth;
104
104
 
105
105
  // minus 1 here to avoid any 1px scroll in Firefox
106
106
  return (renderWidth - 1) / tableWidth;
@@ -1,10 +1,6 @@
1
1
  // Resize a given column by an amount from the current state
2
- import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
3
- import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
4
- import { TableCssClassName as ClassName } from '../../../types';
5
- import { ALIGN_CENTER, ALIGN_START, shouldChangeAlignmentToCenterResized } from '../../utils/alignment';
6
- import { getTableScalingPercent } from './misc';
7
- import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
2
+
3
+ import { growColumn, shrinkColumn } from './resize-logic';
8
4
  import { updateColgroup } from './resize-state';
9
5
  export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, scalePercent = 1
10
6
  // Ignored via go/ees005
@@ -17,137 +13,4 @@ export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode,
17
13
  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
18
14
  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, scalePercent);
19
15
  return newState;
20
- };
21
- export const resizeColumnAndTable = ({
22
- resizeState,
23
- colIndex,
24
- amount,
25
- tableRef,
26
- tableNode,
27
- lineLength,
28
- width: editorWidth,
29
- isTableAlignmentEnabled
30
- }) => {
31
- const editorContainerWidth = getEditorContainerWidth(editorWidth);
32
- const isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
33
- const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
34
- const isOverflow = resizeState.tableWidth > resizeState.maxSize;
35
- let resizeAmount = isTableLeftAligned ? amount : amount * 2;
36
- const willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
37
- const willResizedTableStayInOverflow = isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
38
-
39
- // STEP 1: Update col width
40
- if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
41
- var _tableRef$closest;
42
- const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
43
- resizeAmount = amount < 0 ? amount :
44
- // Ignored via go/ees005
45
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
46
- resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth) / 2;
47
- } else {
48
- const diff = -(resizeState.tableWidth - resizeState.maxSize);
49
- const rest = amount - diff;
50
- const final = isTableLeftAligned ? diff + rest : diff + rest * 2;
51
- resizeAmount = final;
52
- }
53
- const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
54
-
55
- // STEP 2: Update table container width
56
- // columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
57
- const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
58
- newState.maxSize = Math.round(isOverflow ? willResizedTableStayInOverflow ?
59
- // CASE 1A: table will stay in overflow
60
- // do not grow the table because resize is happening in the overflow region
61
- // and the overall table container needs to be retained
62
- isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth : resizeState.maxSize :
63
- // CASE 1B: table will no longer be in overflow, so adjust container width
64
- // ensure the table is resized without any 'big jumps' by working out
65
- // the difference between the new table width and the max size and adding the resize
66
- isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + (resizeState.tableWidth - resizeState.maxSize + akEditorTableNumberColumnWidth + delta) : resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta) : willTableHitEditorEdge ?
67
- // CASE 2: table will hit editor edge
68
- editorContainerWidth :
69
- // CASE 3: table is being resized from a non-overflow state
70
- isNumberColumnEnabled ? resizeState.maxSize + akEditorTableNumberColumnWidth + delta : resizeState.maxSize + delta);
71
-
72
- // do not apply scaling logic because resize state is already scaled
73
- updateColgroup(newState, tableRef, tableNode, false, 1);
74
- updateTablePreview(tableRef, newState.maxSize, shouldChangeAlignmentToCenterResized(isTableAlignmentEnabled, tableNode, lineLength, newState.maxSize));
75
- return newState;
76
- };
77
- const updateTablePreview = (tableRef, newTableWidth, shouldChangeAlignment) => {
78
- const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
79
- const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
80
- const alignmentContainer = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.parentElement;
81
- if (resizingItem) {
82
- const newWidth = `${newTableWidth}px`;
83
- // Ignored via go/ees005
84
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
85
- resizingContainer.style.width = newWidth;
86
- // Ignored via go/ees005
87
- // eslint-disable-next-line @atlaskit/editor/no-as-casting
88
- resizingItem.style.width = newWidth;
89
- if (shouldChangeAlignment && alignmentContainer) {
90
- alignmentContainer.style.justifyContent = ALIGN_CENTER;
91
- }
92
- }
93
- };
94
- const getEditorContainerWidth = editorWidth => Math.min(editorWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth);
95
-
96
- /**
97
- * Apply a scaling factor to resize state
98
- */
99
- export const scaleResizeState = ({
100
- resizeState,
101
- tableRef,
102
- tableNode,
103
- editorWidth,
104
- shouldUseIncreasedScalingPercent
105
- }) => {
106
- const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
107
- const isTableScaled = isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
108
-
109
- // Tables with number column can cause the table to be in two different states:
110
- // 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
111
- // avoid scaling and take the document width
112
- // 2. The table sum of col widths will be the same size as max width, which happens when the table
113
- // is scaled using preserve table width logic, for this apply a scaled width
114
- // return early if table isn't scaled
115
- if (!isTableScaled || isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth) {
116
- return resizeState;
117
- }
118
- const scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
119
- const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
120
- let cols = resizeState.cols.map(col => {
121
- return {
122
- ...col,
123
- minWidth: tableCellMinWidth,
124
- width: Math.max(Math.round(col.width * scalePercent), tableCellMinWidth)
125
- };
126
- });
127
- const calculatedTableWidth = cols.reduce((prev, curr) => prev + curr.width, 0);
128
-
129
- // using Math.round can cause the sum of col widths to be larger than the table width
130
- // distribute the difference to the first column
131
- if (calculatedTableWidth > scaledTableWidth) {
132
- const diff = calculatedTableWidth - scaledTableWidth;
133
- let hasDiffBeenDistributed = false;
134
- cols = cols.map(col => {
135
- if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
136
- hasDiffBeenDistributed = true;
137
- return {
138
- ...col,
139
- width: col.width - diff
140
- };
141
- }
142
- return col;
143
- });
144
- }
145
- const maxSize = isNumberColumnEnabled ? Math.round((resizeState.maxSize + akEditorTableNumberColumnWidth) * scalePercent) : Math.round(resizeState.maxSize * scalePercent);
146
- return {
147
- ...resizeState,
148
- widths: cols.map(col => col.width),
149
- tableWidth: scaledTableWidth,
150
- maxSize,
151
- cols
152
- };
153
16
  };
@@ -137,7 +137,7 @@ function stackSpace(state, destIdx, amount) {
137
137
  let candidates = getCandidates(state, destIdx, amount);
138
138
  while (candidates.length && amount) {
139
139
  // search for most (or least) free space in candidates
140
- let candidateIdx = findNextFreeColumn(candidates, amount);
140
+ const candidateIdx = findNextFreeColumn(candidates, amount);
141
141
  if (candidateIdx === -1) {
142
142
  // stack to the right -> growing the dragging column and go overflow
143
143
  if (amount > 0) {
@@ -311,7 +311,6 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
311
311
  layout,
312
312
  getEditorContainerWidth
313
313
  });
314
- let resizeState;
315
314
  let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
316
315
  const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled;
317
316
  if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
@@ -322,7 +321,7 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
322
321
  isTableScalingEnabledOnCurrentTable = true;
323
322
  shouldUseIncreasedScalingPercent = true;
324
323
  }
325
- resizeState = getResizeState({
324
+ const resizeState = getResizeState({
326
325
  minWidth: tableCellMinWidth,
327
326
  maxSize,
328
327
  table: table.node,
@@ -99,7 +99,7 @@ export function scaleTableTo(state, maxSize) {
99
99
  };
100
100
  })
101
101
  };
102
- let newTotalWidth = getTotalWidth(newState);
102
+ const newTotalWidth = getTotalWidth(newState);
103
103
  if (newTotalWidth > maxSize) {
104
104
  newState = reduceSpace(newState, newTotalWidth - maxSize);
105
105
  }
@@ -18,7 +18,7 @@ const deleteColumnsCustomStep = rect => tr => {
18
18
  splitCellsInColumns(tr, table.pos, rect.left, rect.right);
19
19
 
20
20
  // Delete the columns
21
- let mapStart = tr.mapping.maps.length;
21
+ const mapStart = tr.mapping.maps.length;
22
22
  const originalDoc = tr.doc;
23
23
  const deletedColumns = [];
24
24
  for (let i = rect.left; i < rect.right; i++) {
@@ -146,7 +146,7 @@ function parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef) {
146
146
  if (!row) {
147
147
  return [];
148
148
  }
149
- let cols = [];
149
+ const cols = [];
150
150
  for (let col = 0; col < row.childElementCount; col++) {
151
151
  const currentCol = row.children[col];
152
152
  const colspan = Number(currentCol.getAttribute('colspan') || 1);
@@ -11,7 +11,7 @@ export const replaceSelectedTable = (state, content, inputMethod, editorAnalytic
11
11
  const table = findTable(state.selection);
12
12
  if (table) {
13
13
  const slice = typeof content === 'string' ? new Slice(Fragment.from(state.schema.text(content)), 0, 0) : content;
14
- let tr = state.tr.replace(table.pos, table.pos + table.node.nodeSize, slice);
14
+ const tr = state.tr.replace(table.pos, table.pos + table.node.nodeSize, slice);
15
15
  tr.setSelection(TextSelection.create(tr.doc, table.pos + slice.size + 1));
16
16
  const {
17
17
  totalRowCount,
@@ -10,7 +10,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
10
10
  // Ignored via go/ees005
11
11
  // eslint-disable-next-line @typescript-eslint/max-params
12
12
  export function splitCellsInColumns(tr, tablePos, columnStart, columnEnd) {
13
- let mapStart = tr.mapping.maps.length;
13
+ const mapStart = tr.mapping.maps.length;
14
14
  const table = tr.doc.nodeAt(tablePos);
15
15
  if (!table) {
16
16
  return tr;
@@ -48,7 +48,7 @@ export function splitCellsInColumns(tr, tablePos, columnStart, columnEnd) {
48
48
  // Add the new cells
49
49
  for (let cellRowIndex = rowIndex; cellRowIndex < rowIndex + rowspan; cellRowIndex++) {
50
50
  for (let i = 0; i < colspan; i++) {
51
- let mapping = tr.mapping.slice(mapStart);
51
+ const mapping = tr.mapping.slice(mapStart);
52
52
  const cellPos = map.positionAt(cellRowIndex, column + i, table);
53
53
  tr.insert(mapping.map(cellPos + tableStart),
54
54
  // Ignored via go/ees005
@@ -117,10 +117,10 @@ export const useMeasureFramerate = (config = {}) => {
117
117
  sampleRateMs = 1000,
118
118
  timeoutMs = 200
119
119
  } = config;
120
- let frameCount = useRef(0);
121
- let lastTime = useRef(0);
122
- let timeoutId = useRef();
123
- let frameRateSamples = useRef([]);
120
+ const frameCount = useRef(0);
121
+ const lastTime = useRef(0);
122
+ const timeoutId = useRef();
123
+ const frameRateSamples = useRef([]);
124
124
  useEffect(() => {
125
125
  return () => {
126
126
  if (timeoutId.current) {
@@ -130,7 +130,7 @@ export const colWidthsForRow = tr => {
130
130
  }));
131
131
 
132
132
  // reverse engineer cell widths from table widths
133
- let domBasedCellWidths = [];
133
+ const domBasedCellWidths = [];
134
134
  cellInfos.map(cell => {
135
135
  domBasedCellWidths.push(...getRelativeDomCellWidths(cell));
136
136
  });
@@ -270,7 +270,7 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
270
270
  },
271
271
  keymap: keymap && tooltip(keymap)
272
272
  }))];
273
- let allConfigs = [...restConfigs];
273
+ const allConfigs = [...restConfigs];
274
274
  allConfigs.unshift(...sortConfigs);
275
275
  return allConfigs.filter(Boolean);
276
276
  };
@@ -160,8 +160,8 @@ export const checkEdgeHasMergedCells = (indexes, tableMap, direction) => {
160
160
  } = tableMap;
161
161
  const map = 'row' === direction ? mapByRow : mapByColumn;
162
162
  const lengthLimiter = direction === 'row' ? tableMap.width : tableMap.height;
163
- let minIndex = Math.min(...indexes);
164
- let maxIndex = Math.max(...indexes);
163
+ const minIndex = Math.min(...indexes);
164
+ const maxIndex = Math.max(...indexes);
165
165
  let isTopSideHaveMergedCells = false;
166
166
  let isBottomSideHaveMergedCells = false;
167
167
 
@@ -169,8 +169,8 @@ export const checkEdgeHasMergedCells = (indexes, tableMap, direction) => {
169
169
  * this is to check if the cell position from last focused table is overflow. since if you selection from a cell in 6th row and 7th column cell in a 7x8 table to 3x3 table, the cell position will be overflow because new table dont have this cell at all.
170
170
  TODO: ED-22335 this should better called only when hover over the drag handle.
171
171
  */
172
- let isOldMinIndex = !map[minIndex - 1] || !map[minIndex];
173
- let isOldMaxIndex = !map[maxIndex + 1] || !map[maxIndex];
172
+ const isOldMinIndex = !map[minIndex - 1] || !map[minIndex];
173
+ const isOldMaxIndex = !map[maxIndex + 1] || !map[maxIndex];
174
174
  if (minIndex > 0 && !isOldMinIndex) {
175
175
  const prevSelectionSet = map[minIndex - 1];
176
176
  const minSelectionSet = map[minIndex];
@@ -42,8 +42,8 @@ export const getTableWidth = node => {
42
42
  return getTableWidths(node).reduce((acc, current) => acc + current, 0);
43
43
  };
44
44
  export const tablesHaveDifferentColumnWidths = (currentTable, previousTable) => {
45
- let currentTableWidths = getTableWidths(currentTable);
46
- let previousTableWidths = getTableWidths(previousTable);
45
+ const currentTableWidths = getTableWidths(currentTable);
46
+ const previousTableWidths = getTableWidths(previousTable);
47
47
  if (currentTableWidths.length !== previousTableWidths.length) {
48
48
  return true;
49
49
  }
@@ -76,7 +76,7 @@ function getTableWidths(node) {
76
76
  if (!node.content.firstChild) {
77
77
  return [];
78
78
  }
79
- let tableWidths = [];
79
+ const tableWidths = [];
80
80
  node.content.firstChild.content.forEach(cell => {
81
81
  if (Array.isArray(cell.attrs.colwidth)) {
82
82
  const colspan = cell.attrs.colspan || 1;
@@ -116,8 +116,8 @@ export const copyPreviousRow = schema => insertNewRowIndex => tr => {
116
116
  const offsetNextLineIndexPosition = insertNewRowIndex * map.width;
117
117
  const cellsPositionsInOriginalRow = map.map.slice(offsetIndexPosition, offsetIndexPosition + map.width);
118
118
  const cellsPositionsInNextRow = map.map.slice(offsetNextLineIndexPosition, offsetNextLineIndexPosition + map.width);
119
- let cells = [];
120
- let fixRowspans = [];
119
+ const cells = [];
120
+ const fixRowspans = [];
121
121
  for (let i = 0; i < cellsPositionsInOriginalRow.length;) {
122
122
  const pos = cellsPositionsInOriginalRow[i];
123
123
  const documentCellPos = pos + table.start;
@@ -42,8 +42,8 @@ export const createPlugin = (api, nodeViewPortalProviderAPI) => {
42
42
  allTables
43
43
  } = pluginState;
44
44
  const sortMeta = tr.getMeta('tableSortMeta');
45
- let hoverTableMeta = tr.getMeta('mouseEnterTable');
46
- let removeTableMeta = tr.getMeta('removeTable');
45
+ const hoverTableMeta = tr.getMeta('mouseEnterTable');
46
+ const removeTableMeta = tr.getMeta('removeTable');
47
47
  let tableId = '';
48
48
 
49
49
  // Remove the table from the state
@@ -47,7 +47,7 @@ export const toggleSort = (view, event, pluginState) => {
47
47
  if (widget !== null && widget !== void 0 && widget.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
48
48
  return;
49
49
  }
50
- let dataSortIndex = target === null || target === void 0 ? void 0 : (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
50
+ const dataSortIndex = target === null || target === void 0 ? void 0 : (_target$closest = target.closest('.ProseMirror-widget')) === null || _target$closest === void 0 ? void 0 : _target$closest.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
51
51
  const tr = view.state.tr;
52
52
  const tableElement = target.closest('table');
53
53
  if (!tableElement || !dataSortIndex) {
@@ -59,6 +59,9 @@ export const toggleSort = (view, event, pluginState) => {
59
59
  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
60
60
  return;
61
61
  }
62
+
63
+ // Ignored via go/ees005
64
+ // eslint-disable-next-line prefer-const
62
65
  let {
63
66
  index,
64
67
  direction,
@@ -245,16 +245,14 @@ const tablesPlugin = ({
245
245
  fullWidthEnabled,
246
246
  tableOptions,
247
247
  getEditorFeatureFlags,
248
- isTableScalingEnabled,
249
- isNewColumnResizingEnabled
248
+ isTableScalingEnabled
250
249
  } = options || {};
251
250
  const {
252
- allowColumnResizing,
253
- allowTableAlignment
251
+ allowColumnResizing
254
252
  } = pluginConfig(tableOptions);
255
253
  return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
256
254
  lastColumnResizable: !fullWidthEnabled
257
- }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, allowTableAlignment, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
255
+ }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
258
256
  }
259
257
  }, {
260
258
  name: 'tableEditing',
@@ -13,9 +13,9 @@ export const DragPreview = ({
13
13
  width,
14
14
  height
15
15
  }) => {
16
- let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
17
- let marginTop = direction === 'row' ? height / 2 - 14 : -10;
18
- let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
16
+ const marginLeft = direction === 'row' ? -14 : width / 2 - 14;
17
+ const marginTop = direction === 'row' ? height / 2 - 14 : -10;
18
+ const transform = direction === 'row' ? 'rotate(90deg)' : 'none';
19
19
  return /*#__PURE__*/React.createElement(Box, {
20
20
  xcss: boxStyles,
21
21
  style: {
@@ -30,6 +30,7 @@ export const DragPreview = ({
30
30
  marginLeft: `${marginLeft}px`,
31
31
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
32
32
  marginTop: `${marginTop}px`,
33
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
33
34
  transform: transform
34
35
  }
35
36
  }));
@@ -54,8 +54,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
54
54
  }
55
55
  };
56
56
  const domAtPos = editorView.domAtPos.bind(editorView);
57
- let targetCellRef;
58
- targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
57
+ const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
59
58
  useEffect(() => {
60
59
  if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
61
60
  const {