@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 +14 -0
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +7 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js +2 -3
- package/dist/cjs/ui/ui-styles.js +1 -1
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +7 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-column.js +2 -3
- package/dist/es2019/ui/ui-styles.js +1 -1
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +7 -2
- package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js +2 -3
- package/dist/esm/ui/ui-styles.js +1 -1
- package/package.json +6 -6
- package/src/pm-plugins/table-resizing/event-handlers.ts +9 -6
- package/src/pm-plugins/table-resizing/utils/resize-column.ts +2 -6
- package/src/ui/ui-styles.ts +1 -1
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,
|
|
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,
|
|
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
|
|
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) {
|
package/dist/cjs/ui/ui-styles.js
CHANGED
|
@@ -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
|
|
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,
|
|
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,
|
|
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
|
|
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
|
-
|
|
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,
|
|
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,
|
|
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
|
|
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) {
|
package/dist/esm/ui/ui-styles.js
CHANGED
|
@@ -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
|
|
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.
|
|
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.
|
|
32
|
+
"@atlaskit/button": "^17.22.0",
|
|
33
33
|
"@atlaskit/custom-steps": "^0.2.0",
|
|
34
|
-
"@atlaskit/editor-common": "^82.
|
|
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.
|
|
47
|
-
"@atlaskit/menu": "^2.
|
|
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": "^
|
|
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
|
-
|
|
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
|
-
|
|
216
|
+
resizedDelta,
|
|
213
217
|
dom,
|
|
214
218
|
originalTable,
|
|
215
219
|
resizingSelectedColumns ? selectedColumns : undefined,
|
|
216
220
|
shouldScale,
|
|
217
|
-
|
|
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
|
|
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
|
|
package/src/ui/ui-styles.ts
CHANGED
|
@@ -296,7 +296,7 @@ export const insertRowButtonWrapper = () =>
|
|
|
296
296
|
`
|
|
297
297
|
height: 2px;
|
|
298
298
|
top: -11px;
|
|
299
|
-
|
|
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
|
),
|