@atlaskit/editor-plugin-table 7.17.5 → 7.17.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 7.17.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 7.17.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [#111968](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111968)
14
+ [`c01dd34bc8e6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c01dd34bc8e6c) -
15
+ Fixes 2px difference issue for internal column resizing
16
+
3
17
  ## 7.17.5
4
18
 
5
19
  ### Patch Changes
@@ -147,12 +147,17 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
147
147
  _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
148
148
  }
149
149
  var resizedDelta = clientX - startX;
150
+ var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
150
151
  if (isNewColumnResizingEnabled && !(0, _utils2.isTableNested)(state, tablePos)) {
151
- var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
152
+ var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale,
153
+ // isTableScalingEnabled
154
+ undefined,
155
+ // originalTableWidth
156
+ shouldUseIncreasedScalingPercent);
152
157
  tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
153
158
  tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
154
159
  } else {
155
- var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent'));
160
+ var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
156
161
  tr = (0, _transforms.updateColumnWidths)(_newResizeState, table, start)(tr);
157
162
  }
158
163
  if (colIndex === map.width - 1) {
@@ -53,8 +53,6 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
53
53
  // need to look at the resize amount and try to adjust the colgroups
54
54
  if (isOverflowed) {
55
55
  resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
56
- } else {
57
- resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
58
56
  }
59
57
  var newState = (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount);
60
58
 
@@ -68,7 +66,8 @@ var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnA
68
66
  updateTablePreview(delta, tableRef, tableNode);
69
67
  }
70
68
  return _objectSpread(_objectSpread({}, newState), {}, {
71
- tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
69
+ // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
70
+ tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
72
71
  });
73
72
  };
74
73
  var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
@@ -80,7 +80,7 @@ var insertRowButtonWrapper = exports.insertRowButtonWrapper = function insertRow
80
80
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
81
81
  InsertButtonHover(),
82
82
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
83
- InsertLine("\n height: 2px;\n top: -11px;\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766\n left: ".concat(_consts.tableInsertColumnButtonSize - 1, "px;\n ")));
83
+ InsertLine("\n height: 2px;\n top: -11px;\n\t".concat("\n left: ", _consts.tableInsertColumnButtonSize - 1, "px;\n ")));
84
84
  };
85
85
  var columnControlsLineMarker = exports.columnControlsLineMarker = function columnControlsLineMarker() {
86
86
  return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_CONTROLS);
@@ -154,12 +154,17 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
154
154
  shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
155
155
  }
156
156
  const resizedDelta = clientX - startX;
157
+ const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
157
158
  if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
158
- const newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
159
+ const newResizeState = resizeColumnAndTable(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale,
160
+ // isTableScalingEnabled
161
+ undefined,
162
+ // originalTableWidth
163
+ shouldUseIncreasedScalingPercent);
159
164
  tr = updateColumnWidths(newResizeState, table, start)(tr);
160
165
  tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
161
166
  } else {
162
- const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
167
+ const newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale, shouldUseIncreasedScalingPercent);
163
168
  tr = updateColumnWidths(newResizeState, table, start)(tr);
164
169
  }
165
170
  if (colIndex === map.width - 1) {
@@ -40,8 +40,6 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
40
40
  // need to look at the resize amount and try to adjust the colgroups
41
41
  if (isOverflowed) {
42
42
  resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
43
- } else {
44
- resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
45
43
  }
46
44
  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
47
45
 
@@ -56,7 +54,8 @@ export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, ta
56
54
  }
57
55
  return {
58
56
  ...newState,
59
- tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
57
+ // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
58
+ tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
60
59
  };
61
60
  };
62
61
  const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
@@ -240,7 +240,7 @@ InsertButtonHover(),
240
240
  InsertLine(`
241
241
  height: 2px;
242
242
  top: -11px;
243
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
243
+ ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */''}
244
244
  left: ${tableInsertColumnButtonSize - 1}px;
245
245
  `));
246
246
  export const columnControlsLineMarker = () => css`
@@ -141,12 +141,17 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
141
141
  _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
142
142
  }
143
143
  var resizedDelta = clientX - startX;
144
+ var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
144
145
  if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
145
- var newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
146
+ var newResizeState = resizeColumnAndTable(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale,
147
+ // isTableScalingEnabled
148
+ undefined,
149
+ // originalTableWidth
150
+ shouldUseIncreasedScalingPercent);
146
151
  tr = updateColumnWidths(newResizeState, table, start)(tr);
147
152
  tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
148
153
  } else {
149
- var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent'));
154
+ var _newResizeState = resizeColumn(resizeState, colIndex, resizedDelta, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale, shouldUseIncreasedScalingPercent);
150
155
  tr = updateColumnWidths(_newResizeState, table, start)(tr);
151
156
  }
152
157
  if (colIndex === map.width - 1) {
@@ -48,8 +48,6 @@ export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, col
48
48
  // need to look at the resize amount and try to adjust the colgroups
49
49
  if (isOverflowed) {
50
50
  resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
51
- } else {
52
- resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
53
51
  }
54
52
  var newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
55
53
 
@@ -63,7 +61,8 @@ export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, col
63
61
  updateTablePreview(delta, tableRef, tableNode);
64
62
  }
65
63
  return _objectSpread(_objectSpread({}, newState), {}, {
66
- tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
64
+ // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
65
+ tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta
67
66
  });
68
67
  };
69
68
  var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
@@ -73,7 +73,7 @@ export var insertRowButtonWrapper = function insertRowButtonWrapper() {
73
73
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
74
74
  InsertButtonHover(),
75
75
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
76
- InsertLine("\n height: 2px;\n top: -11px;\n// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766\n left: ".concat(tableInsertColumnButtonSize - 1, "px;\n ")));
76
+ InsertLine("\n height: 2px;\n top: -11px;\n\t".concat("\n left: ", tableInsertColumnButtonSize - 1, "px;\n ")));
77
77
  };
78
78
  export var columnControlsLineMarker = function columnControlsLineMarker() {
79
79
  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t.", ".", " table tr:first-of-type td,\n\t.", ".", " table tr:first-of-type th {\n\t\tposition: relative;\n\t}\n"])), ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS, ClassName.TABLE_CONTAINER, ClassName.WITH_CONTROLS);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "7.17.5",
3
+ "version": "7.17.7",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/adf-schema": "^36.10.7",
32
- "@atlaskit/button": "^17.17.0",
32
+ "@atlaskit/button": "^17.22.0",
33
33
  "@atlaskit/custom-steps": "^0.2.0",
34
- "@atlaskit/editor-common": "^82.8.0",
34
+ "@atlaskit/editor-common": "^82.9.0",
35
35
  "@atlaskit/editor-palette": "1.6.0",
36
36
  "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -43,13 +43,13 @@
43
43
  "@atlaskit/editor-prosemirror": "4.0.1",
44
44
  "@atlaskit/editor-shared-styles": "^2.12.0",
45
45
  "@atlaskit/editor-tables": "^2.7.0",
46
- "@atlaskit/icon": "^22.3.0",
47
- "@atlaskit/menu": "^2.4.0",
46
+ "@atlaskit/icon": "^22.4.0",
47
+ "@atlaskit/menu": "^2.5.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.2.1",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
52
- "@atlaskit/primitives": "^7.3.0",
52
+ "@atlaskit/primitives": "^8.0.0",
53
53
  "@atlaskit/theme": "^12.10.0",
54
54
  "@atlaskit/toggle": "^13.2.0",
55
55
  "@atlaskit/tokens": "^1.51.0",
@@ -192,16 +192,20 @@ export const handleMouseDown = (
192
192
  }
193
193
 
194
194
  const resizedDelta = clientX - startX;
195
-
195
+ const shouldUseIncreasedScalingPercent =
196
+ isTableScalingWithFixedColumnWidthsOptionEnabled &&
197
+ getBooleanFF('platform.editor.table.use-increased-scaling-percent');
196
198
  if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
197
199
  const newResizeState = resizeColumnAndTable(
198
200
  resizeState,
199
201
  colIndex,
200
- clientX - startX,
202
+ resizedDelta,
201
203
  dom,
202
204
  originalTable,
203
205
  resizingSelectedColumns ? selectedColumns : undefined,
204
- shouldScale,
206
+ shouldScale, // isTableScalingEnabled
207
+ undefined, // originalTableWidth
208
+ shouldUseIncreasedScalingPercent,
205
209
  );
206
210
  tr = updateColumnWidths(newResizeState, table, start)(tr);
207
211
  tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
@@ -209,13 +213,12 @@ export const handleMouseDown = (
209
213
  const newResizeState = resizeColumn(
210
214
  resizeState,
211
215
  colIndex,
212
- clientX - startX,
216
+ resizedDelta,
213
217
  dom,
214
218
  originalTable,
215
219
  resizingSelectedColumns ? selectedColumns : undefined,
216
220
  shouldScale,
217
- isTableScalingWithFixedColumnWidthsOptionEnabled &&
218
- getBooleanFF('platform.editor.table.use-increased-scaling-percent'),
221
+ shouldUseIncreasedScalingPercent,
219
222
  );
220
223
  tr = updateColumnWidths(newResizeState, table, start)(tr);
221
224
  }
@@ -81,11 +81,6 @@ export const resizeColumnAndTable = (
81
81
  amount < 0
82
82
  ? amount
83
83
  : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
84
- } else {
85
- resizeAmount =
86
- amount > 0 && tableContainerWidth
87
- ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
88
- : resizeAmount;
89
84
  }
90
85
 
91
86
  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
@@ -103,7 +98,8 @@ export const resizeColumnAndTable = (
103
98
 
104
99
  return {
105
100
  ...newState,
106
- tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta,
101
+ // resizeState.tableWidth sometimes is off by ~3px on load on resized table when !isOverflowed, using resizeState.maxSize instead
102
+ tableWidth: isOverflowed ? tableContainerWidth : resizeState.maxSize + delta,
107
103
  };
108
104
  };
109
105
 
@@ -296,7 +296,7 @@ export const insertRowButtonWrapper = () =>
296
296
  `
297
297
  height: 2px;
298
298
  top: -11px;
299
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
299
+ ${/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */ ''}
300
300
  left: ${tableInsertColumnButtonSize - 1}px;
301
301
  `,
302
302
  ),