@atlaskit/editor-plugin-table 5.7.3 → 5.7.4
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 +6 -0
- package/dist/cjs/commands/insert.js +1 -1
- package/dist/cjs/transforms/column-width.js +3 -105
- package/dist/cjs/transforms/delete-columns.js +2 -5
- package/dist/es2019/commands/insert.js +1 -1
- package/dist/es2019/transforms/column-width.js +4 -102
- package/dist/es2019/transforms/delete-columns.js +2 -5
- package/dist/esm/commands/insert.js +1 -1
- package/dist/esm/transforms/column-width.js +4 -106
- package/dist/esm/transforms/delete-columns.js +2 -5
- package/dist/types/transforms/column-width.d.ts +1 -14
- package/dist/types-ts4.5/transforms/column-width.d.ts +1 -14
- package/package.json +1 -4
- package/src/__tests__/unit/commands/insert.ts +7 -0
- package/src/__tests__/unit/transforms/delete-columns.ts +147 -368
- package/src/commands/insert.ts +1 -3
- package/src/transforms/column-width.ts +4 -137
- package/src/transforms/delete-columns.ts +3 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 5.7.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#63287](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63287) [`8b58c452f126`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b58c452f126) - ED-20334 Cleaned reference for feature flag 'platform.editor.table-update-colwidths-after-column-is-deleted'and refactored code for it.
|
|
8
|
+
|
|
3
9
|
## 5.7.3
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -43,7 +43,7 @@ function addColumnAt(getEditorContainerWidth) {
|
|
|
43
43
|
var table = (0, _utils2.findTable)(updatedTr.selection);
|
|
44
44
|
if (table) {
|
|
45
45
|
// [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
|
|
46
|
-
updatedTr = (0, _columnWidth.rescaleColumns)(
|
|
46
|
+
updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
|
|
47
47
|
}
|
|
48
48
|
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
|
|
49
49
|
updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({
|
|
@@ -4,16 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.updateColumnWidths = exports.
|
|
7
|
+
exports.updateColumnWidths = exports.rescaleColumns = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
10
10
|
var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
11
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
11
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
13
12
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _utils = require("../pm-plugins/table-resizing/utils");
|
|
15
14
|
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
|
|
16
|
-
var _misc = require("../pm-plugins/table-resizing/utils/misc");
|
|
17
15
|
var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
|
|
18
16
|
var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
|
|
19
17
|
var _commonStyles = require("../ui/common-styles");
|
|
@@ -95,7 +93,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
|
|
|
95
93
|
* @param view
|
|
96
94
|
* @returns Updated transaction with rescaled columns for a given table
|
|
97
95
|
*/
|
|
98
|
-
var
|
|
96
|
+
var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
|
|
99
97
|
return function (table, view) {
|
|
100
98
|
return function (tr) {
|
|
101
99
|
var _tableRef$parentEleme, _tableRef$parentEleme2;
|
|
@@ -115,7 +113,7 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
|
|
|
115
113
|
// when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
|
|
116
114
|
width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
|
|
117
115
|
/** the is the width the table can reach before overflowing */
|
|
118
|
-
possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset
|
|
116
|
+
possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset,
|
|
119
117
|
isResized: isResized
|
|
120
118
|
};
|
|
121
119
|
|
|
@@ -175,104 +173,4 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
|
|
|
175
173
|
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
176
174
|
};
|
|
177
175
|
};
|
|
178
|
-
};
|
|
179
|
-
|
|
180
|
-
/**
|
|
181
|
-
* This function is called when user inserts/deletes a column in a table to;
|
|
182
|
-
* - rescale all columns (if the table did not overflow before the insertion)
|
|
183
|
-
* - and update column widths.
|
|
184
|
-
*
|
|
185
|
-
* This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
|
|
186
|
-
* @param table
|
|
187
|
-
* @param view
|
|
188
|
-
* @returns Updated transaction with rescaled columns for a given table
|
|
189
|
-
*/
|
|
190
|
-
var rescaleColumnsOld = exports.rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
|
|
191
|
-
return function (table, view) {
|
|
192
|
-
return function (tr) {
|
|
193
|
-
var _tableRef$parentEleme3;
|
|
194
|
-
if (!view) {
|
|
195
|
-
return tr;
|
|
196
|
-
}
|
|
197
|
-
var pos = table.pos;
|
|
198
|
-
var newTable = tr.doc.nodeAt(pos);
|
|
199
|
-
var state = view.state;
|
|
200
|
-
var domAtPos = view.domAtPos.bind(view);
|
|
201
|
-
var maybeTable = domAtPos(table.start).node;
|
|
202
|
-
var tableRef = maybeTable.closest('table');
|
|
203
|
-
if (!tableRef || !newTable) {
|
|
204
|
-
return tr;
|
|
205
|
-
}
|
|
206
|
-
var layout = (0, _resizeState.normaliseTableLayout)(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
|
|
207
|
-
// The is the width the table can reach before overflowing
|
|
208
|
-
var maxSize = (0, _misc.getTableMaxWidth)({
|
|
209
|
-
table: table.node,
|
|
210
|
-
tableStart: table.start,
|
|
211
|
-
state: state,
|
|
212
|
-
layout: layout,
|
|
213
|
-
getEditorContainerWidth: getEditorContainerWidth
|
|
214
|
-
});
|
|
215
|
-
var tableWidth = tableRef.clientWidth || _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
216
|
-
var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
|
|
217
|
-
tableMaxWidth -= _commonStyles.insertColumnButtonOffset;
|
|
218
|
-
var newTableMap = _tableMap.TableMap.get(newTable);
|
|
219
|
-
var noOfColumns = newTableMap.width;
|
|
220
|
-
if (!noOfColumns || noOfColumns <= 0) {
|
|
221
|
-
return tr;
|
|
222
|
-
}
|
|
223
|
-
var columnWidthUnresized = tableWidth / noOfColumns;
|
|
224
|
-
|
|
225
|
-
// If the table has not been resized, and the column width is bigger than the minimum column width
|
|
226
|
-
// we skip updating the size of columns here.
|
|
227
|
-
if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized > _styles.tableCellMinWidth) {
|
|
228
|
-
return tr;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
// If the table has not been resized, and the column width is smaller than the minimum column width
|
|
232
|
-
// Or if the table has been resized, but each column width is either 48px or null
|
|
233
|
-
// we update the table to have 48px for each column
|
|
234
|
-
if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized <= _styles.tableCellMinWidth || (0, _utils.hasTableBeenResized)(table.node) && (0, _colgroup.isMinCellWidthTable)(table.node)) {
|
|
235
|
-
var widths = new Array(noOfColumns).fill(_styles.tableCellMinWidth);
|
|
236
|
-
var cols = widths.map(function (_, index) {
|
|
237
|
-
return {
|
|
238
|
-
width: _styles.tableCellMinWidth,
|
|
239
|
-
minWidth: _styles.tableCellMinWidth,
|
|
240
|
-
index: index
|
|
241
|
-
};
|
|
242
|
-
});
|
|
243
|
-
var overflow = tableWidth > maxSize;
|
|
244
|
-
var minWidthResizeState = {
|
|
245
|
-
cols: cols,
|
|
246
|
-
widths: widths,
|
|
247
|
-
maxSize: maxSize,
|
|
248
|
-
tableWidth: tableWidth,
|
|
249
|
-
overflow: overflow
|
|
250
|
-
};
|
|
251
|
-
return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
|
|
252
|
-
}
|
|
253
|
-
var resizeState = (0, _resizeState.getResizeState)({
|
|
254
|
-
minWidth: _styles.tableCellMinWidth,
|
|
255
|
-
table: table.node,
|
|
256
|
-
start: table.start,
|
|
257
|
-
tableRef: tableRef,
|
|
258
|
-
domAtPos: domAtPos,
|
|
259
|
-
maxSize: maxSize
|
|
260
|
-
});
|
|
261
|
-
var previousTableWidth = resizeState.tableWidth - _tableMap.tableNewColumnMinWidth;
|
|
262
|
-
var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
|
|
263
|
-
|
|
264
|
-
// If the new table width will result in the table going into an overflow state
|
|
265
|
-
// we resize the cells to avoid the overflow occuring
|
|
266
|
-
if (tableDidntPreviouslyOverflow && resizeState.overflow) {
|
|
267
|
-
resizeState = (0, _scaleTable.scaleTableTo)(resizeState, maxSize);
|
|
268
|
-
}
|
|
269
|
-
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
270
|
-
};
|
|
271
|
-
};
|
|
272
|
-
};
|
|
273
|
-
var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
|
|
274
|
-
if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
|
|
275
|
-
return rescaleColumnsNew();
|
|
276
|
-
}
|
|
277
|
-
return rescaleColumnsOld(getEditorContainerWidth);
|
|
278
176
|
};
|
|
@@ -12,7 +12,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
12
12
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
13
13
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
14
14
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
15
|
var _tableAnalytics = require("../pm-plugins/table-analytics");
|
|
17
16
|
var _columnWidth = require("./column-width");
|
|
18
17
|
var _split = require("./split");
|
|
@@ -224,10 +223,8 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
|
|
|
224
223
|
updatedTr = deleteColumnsLegacy(rect)(updatedTr);
|
|
225
224
|
}
|
|
226
225
|
var table = (0, _utils.findTable)(updatedTr.selection);
|
|
227
|
-
if (
|
|
228
|
-
|
|
229
|
-
updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
|
|
230
|
-
}
|
|
226
|
+
if (table) {
|
|
227
|
+
updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
|
|
231
228
|
}
|
|
232
229
|
return updatedTr;
|
|
233
230
|
};
|
|
@@ -32,7 +32,7 @@ export function addColumnAt(getEditorContainerWidth) {
|
|
|
32
32
|
const table = findTable(updatedTr.selection);
|
|
33
33
|
if (table) {
|
|
34
34
|
// [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
|
|
35
|
-
updatedTr = rescaleColumns(
|
|
35
|
+
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
36
36
|
}
|
|
37
37
|
if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
|
|
38
38
|
updatedTr = updateRowOrColumnMovedTransform({
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
2
2
|
import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
|
|
3
|
-
import {
|
|
4
|
-
import { TableMap, tableNewColumnMinWidth } from '@atlaskit/editor-tables/table-map';
|
|
3
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
5
4
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
|
|
7
6
|
import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
8
|
-
import {
|
|
9
|
-
import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
7
|
+
import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
10
8
|
import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
11
9
|
import { insertColumnButtonOffset } from '../ui/common-styles';
|
|
12
10
|
|
|
@@ -87,7 +85,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
|
|
|
87
85
|
* @param view
|
|
88
86
|
* @returns Updated transaction with rescaled columns for a given table
|
|
89
87
|
*/
|
|
90
|
-
export const
|
|
88
|
+
export const rescaleColumns = () => (table, view) => tr => {
|
|
91
89
|
var _tableRef$parentEleme, _tableRef$parentEleme2;
|
|
92
90
|
if (!view) {
|
|
93
91
|
return tr;
|
|
@@ -105,7 +103,7 @@ export const rescaleColumnsNew = () => (table, view) => tr => {
|
|
|
105
103
|
// when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
|
|
106
104
|
width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
|
|
107
105
|
/** the is the width the table can reach before overflowing */
|
|
108
|
-
possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset
|
|
106
|
+
possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset,
|
|
109
107
|
isResized
|
|
110
108
|
};
|
|
111
109
|
|
|
@@ -161,100 +159,4 @@ export const rescaleColumnsNew = () => (table, view) => tr => {
|
|
|
161
159
|
resizeState = scaleTableTo(resizeState, previousTableInfo.possibleMaxWidth);
|
|
162
160
|
}
|
|
163
161
|
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* This function is called when user inserts/deletes a column in a table to;
|
|
168
|
-
* - rescale all columns (if the table did not overflow before the insertion)
|
|
169
|
-
* - and update column widths.
|
|
170
|
-
*
|
|
171
|
-
* This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
|
|
172
|
-
* @param table
|
|
173
|
-
* @param view
|
|
174
|
-
* @returns Updated transaction with rescaled columns for a given table
|
|
175
|
-
*/
|
|
176
|
-
export const rescaleColumnsOld = getEditorContainerWidth => (table, view) => tr => {
|
|
177
|
-
var _tableRef$parentEleme3;
|
|
178
|
-
if (!view) {
|
|
179
|
-
return tr;
|
|
180
|
-
}
|
|
181
|
-
const pos = table.pos;
|
|
182
|
-
const newTable = tr.doc.nodeAt(pos);
|
|
183
|
-
const {
|
|
184
|
-
state
|
|
185
|
-
} = view;
|
|
186
|
-
const domAtPos = view.domAtPos.bind(view);
|
|
187
|
-
const maybeTable = domAtPos(table.start).node;
|
|
188
|
-
const tableRef = maybeTable.closest('table');
|
|
189
|
-
if (!tableRef || !newTable) {
|
|
190
|
-
return tr;
|
|
191
|
-
}
|
|
192
|
-
const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
|
|
193
|
-
// The is the width the table can reach before overflowing
|
|
194
|
-
const maxSize = getTableMaxWidth({
|
|
195
|
-
table: table.node,
|
|
196
|
-
tableStart: table.start,
|
|
197
|
-
state,
|
|
198
|
-
layout,
|
|
199
|
-
getEditorContainerWidth
|
|
200
|
-
});
|
|
201
|
-
const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
|
|
202
|
-
let tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
|
|
203
|
-
tableMaxWidth -= insertColumnButtonOffset;
|
|
204
|
-
const newTableMap = TableMap.get(newTable);
|
|
205
|
-
const noOfColumns = newTableMap.width;
|
|
206
|
-
if (!noOfColumns || noOfColumns <= 0) {
|
|
207
|
-
return tr;
|
|
208
|
-
}
|
|
209
|
-
const columnWidthUnresized = tableWidth / noOfColumns;
|
|
210
|
-
|
|
211
|
-
// If the table has not been resized, and the column width is bigger than the minimum column width
|
|
212
|
-
// we skip updating the size of columns here.
|
|
213
|
-
if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
|
|
214
|
-
return tr;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
// If the table has not been resized, and the column width is smaller than the minimum column width
|
|
218
|
-
// Or if the table has been resized, but each column width is either 48px or null
|
|
219
|
-
// we update the table to have 48px for each column
|
|
220
|
-
if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
|
|
221
|
-
const widths = new Array(noOfColumns).fill(tableCellMinWidth);
|
|
222
|
-
const cols = widths.map((_, index) => ({
|
|
223
|
-
width: tableCellMinWidth,
|
|
224
|
-
minWidth: tableCellMinWidth,
|
|
225
|
-
index
|
|
226
|
-
}));
|
|
227
|
-
const overflow = tableWidth > maxSize;
|
|
228
|
-
const minWidthResizeState = {
|
|
229
|
-
cols,
|
|
230
|
-
widths,
|
|
231
|
-
maxSize,
|
|
232
|
-
tableWidth,
|
|
233
|
-
overflow
|
|
234
|
-
};
|
|
235
|
-
return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
|
|
236
|
-
}
|
|
237
|
-
let resizeState = getResizeState({
|
|
238
|
-
minWidth: tableCellMinWidth,
|
|
239
|
-
table: table.node,
|
|
240
|
-
start: table.start,
|
|
241
|
-
tableRef,
|
|
242
|
-
domAtPos,
|
|
243
|
-
maxSize
|
|
244
|
-
});
|
|
245
|
-
const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
|
|
246
|
-
const tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
|
|
247
|
-
|
|
248
|
-
// If the new table width will result in the table going into an overflow state
|
|
249
|
-
// we resize the cells to avoid the overflow occuring
|
|
250
|
-
if (tableDidntPreviouslyOverflow && resizeState.overflow) {
|
|
251
|
-
resizeState = scaleTableTo(resizeState, maxSize);
|
|
252
|
-
}
|
|
253
|
-
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
254
|
-
};
|
|
255
|
-
export const rescaleColumns = getEditorContainerWidth => {
|
|
256
|
-
if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
|
|
257
|
-
return rescaleColumnsNew();
|
|
258
|
-
}
|
|
259
|
-
return rescaleColumnsOld(getEditorContainerWidth);
|
|
260
162
|
};
|
|
@@ -3,7 +3,6 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
|
|
|
3
3
|
import { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
5
5
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
6
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { META_KEYS } from '../pm-plugins/table-analytics';
|
|
8
7
|
import { rescaleColumns } from './column-width';
|
|
9
8
|
import { splitCellsInColumns } from './split';
|
|
@@ -204,10 +203,8 @@ export const deleteColumns = (rect, allowCustomStep, view) => tr => {
|
|
|
204
203
|
updatedTr = deleteColumnsLegacy(rect)(updatedTr);
|
|
205
204
|
}
|
|
206
205
|
const table = findTable(updatedTr.selection);
|
|
207
|
-
if (
|
|
208
|
-
|
|
209
|
-
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
210
|
-
}
|
|
206
|
+
if (table) {
|
|
207
|
+
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
211
208
|
}
|
|
212
209
|
return updatedTr;
|
|
213
210
|
};
|
|
@@ -34,7 +34,7 @@ export function addColumnAt(getEditorContainerWidth) {
|
|
|
34
34
|
var table = findTable(updatedTr.selection);
|
|
35
35
|
if (table) {
|
|
36
36
|
// [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
|
|
37
|
-
updatedTr = rescaleColumns(
|
|
37
|
+
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
38
38
|
}
|
|
39
39
|
if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
|
|
40
40
|
updatedTr = updateRowOrColumnMovedTransform({
|
|
@@ -3,13 +3,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
3
3
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
4
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
|
|
6
|
-
import {
|
|
7
|
-
import { TableMap, tableNewColumnMinWidth } from '@atlaskit/editor-tables/table-map';
|
|
6
|
+
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
8
7
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
|
|
10
9
|
import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
11
|
-
import {
|
|
12
|
-
import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
10
|
+
import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
|
|
13
11
|
import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
14
12
|
import { insertColumnButtonOffset } from '../ui/common-styles';
|
|
15
13
|
|
|
@@ -89,7 +87,7 @@ export var updateColumnWidths = function updateColumnWidths(resizeState, table,
|
|
|
89
87
|
* @param view
|
|
90
88
|
* @returns Updated transaction with rescaled columns for a given table
|
|
91
89
|
*/
|
|
92
|
-
export var
|
|
90
|
+
export var rescaleColumns = function rescaleColumns() {
|
|
93
91
|
return function (table, view) {
|
|
94
92
|
return function (tr) {
|
|
95
93
|
var _tableRef$parentEleme, _tableRef$parentEleme2;
|
|
@@ -109,7 +107,7 @@ export var rescaleColumnsNew = function rescaleColumnsNew() {
|
|
|
109
107
|
// when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
|
|
110
108
|
width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
|
|
111
109
|
/** the is the width the table can reach before overflowing */
|
|
112
|
-
possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset
|
|
110
|
+
possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset,
|
|
113
111
|
isResized: isResized
|
|
114
112
|
};
|
|
115
113
|
|
|
@@ -169,104 +167,4 @@ export var rescaleColumnsNew = function rescaleColumnsNew() {
|
|
|
169
167
|
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
170
168
|
};
|
|
171
169
|
};
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
/**
|
|
175
|
-
* This function is called when user inserts/deletes a column in a table to;
|
|
176
|
-
* - rescale all columns (if the table did not overflow before the insertion)
|
|
177
|
-
* - and update column widths.
|
|
178
|
-
*
|
|
179
|
-
* This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
|
|
180
|
-
* @param table
|
|
181
|
-
* @param view
|
|
182
|
-
* @returns Updated transaction with rescaled columns for a given table
|
|
183
|
-
*/
|
|
184
|
-
export var rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
|
|
185
|
-
return function (table, view) {
|
|
186
|
-
return function (tr) {
|
|
187
|
-
var _tableRef$parentEleme3;
|
|
188
|
-
if (!view) {
|
|
189
|
-
return tr;
|
|
190
|
-
}
|
|
191
|
-
var pos = table.pos;
|
|
192
|
-
var newTable = tr.doc.nodeAt(pos);
|
|
193
|
-
var state = view.state;
|
|
194
|
-
var domAtPos = view.domAtPos.bind(view);
|
|
195
|
-
var maybeTable = domAtPos(table.start).node;
|
|
196
|
-
var tableRef = maybeTable.closest('table');
|
|
197
|
-
if (!tableRef || !newTable) {
|
|
198
|
-
return tr;
|
|
199
|
-
}
|
|
200
|
-
var layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
|
|
201
|
-
// The is the width the table can reach before overflowing
|
|
202
|
-
var maxSize = getTableMaxWidth({
|
|
203
|
-
table: table.node,
|
|
204
|
-
tableStart: table.start,
|
|
205
|
-
state: state,
|
|
206
|
-
layout: layout,
|
|
207
|
-
getEditorContainerWidth: getEditorContainerWidth
|
|
208
|
-
});
|
|
209
|
-
var tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
|
|
210
|
-
var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
|
|
211
|
-
tableMaxWidth -= insertColumnButtonOffset;
|
|
212
|
-
var newTableMap = TableMap.get(newTable);
|
|
213
|
-
var noOfColumns = newTableMap.width;
|
|
214
|
-
if (!noOfColumns || noOfColumns <= 0) {
|
|
215
|
-
return tr;
|
|
216
|
-
}
|
|
217
|
-
var columnWidthUnresized = tableWidth / noOfColumns;
|
|
218
|
-
|
|
219
|
-
// If the table has not been resized, and the column width is bigger than the minimum column width
|
|
220
|
-
// we skip updating the size of columns here.
|
|
221
|
-
if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
|
|
222
|
-
return tr;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
// If the table has not been resized, and the column width is smaller than the minimum column width
|
|
226
|
-
// Or if the table has been resized, but each column width is either 48px or null
|
|
227
|
-
// we update the table to have 48px for each column
|
|
228
|
-
if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
|
|
229
|
-
var widths = new Array(noOfColumns).fill(tableCellMinWidth);
|
|
230
|
-
var cols = widths.map(function (_, index) {
|
|
231
|
-
return {
|
|
232
|
-
width: tableCellMinWidth,
|
|
233
|
-
minWidth: tableCellMinWidth,
|
|
234
|
-
index: index
|
|
235
|
-
};
|
|
236
|
-
});
|
|
237
|
-
var overflow = tableWidth > maxSize;
|
|
238
|
-
var minWidthResizeState = {
|
|
239
|
-
cols: cols,
|
|
240
|
-
widths: widths,
|
|
241
|
-
maxSize: maxSize,
|
|
242
|
-
tableWidth: tableWidth,
|
|
243
|
-
overflow: overflow
|
|
244
|
-
};
|
|
245
|
-
return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
|
|
246
|
-
}
|
|
247
|
-
var resizeState = getResizeState({
|
|
248
|
-
minWidth: tableCellMinWidth,
|
|
249
|
-
table: table.node,
|
|
250
|
-
start: table.start,
|
|
251
|
-
tableRef: tableRef,
|
|
252
|
-
domAtPos: domAtPos,
|
|
253
|
-
maxSize: maxSize
|
|
254
|
-
});
|
|
255
|
-
var previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
|
|
256
|
-
var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
|
|
257
|
-
|
|
258
|
-
// If the new table width will result in the table going into an overflow state
|
|
259
|
-
// we resize the cells to avoid the overflow occuring
|
|
260
|
-
if (tableDidntPreviouslyOverflow && resizeState.overflow) {
|
|
261
|
-
resizeState = scaleTableTo(resizeState, maxSize);
|
|
262
|
-
}
|
|
263
|
-
return updateColumnWidths(resizeState, table.node, table.start)(tr);
|
|
264
|
-
};
|
|
265
|
-
};
|
|
266
|
-
};
|
|
267
|
-
export var rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
|
|
268
|
-
if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
|
|
269
|
-
return rescaleColumnsNew();
|
|
270
|
-
}
|
|
271
|
-
return rescaleColumnsOld(getEditorContainerWidth);
|
|
272
170
|
};
|
|
@@ -7,7 +7,6 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
|
|
|
7
7
|
import { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
9
9
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
10
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { META_KEYS } from '../pm-plugins/table-analytics';
|
|
12
11
|
import { rescaleColumns } from './column-width';
|
|
13
12
|
import { splitCellsInColumns } from './split';
|
|
@@ -217,10 +216,8 @@ export var deleteColumns = function deleteColumns(rect, allowCustomStep, view) {
|
|
|
217
216
|
updatedTr = deleteColumnsLegacy(rect)(updatedTr);
|
|
218
217
|
}
|
|
219
218
|
var table = findTable(updatedTr.selection);
|
|
220
|
-
if (
|
|
221
|
-
|
|
222
|
-
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
223
|
-
}
|
|
219
|
+
if (table) {
|
|
220
|
+
updatedTr = rescaleColumns()(table, view)(updatedTr);
|
|
224
221
|
}
|
|
225
222
|
return updatedTr;
|
|
226
223
|
};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
2
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
2
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
4
3
|
import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
@@ -22,16 +21,4 @@ export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNod
|
|
|
22
21
|
* @param view
|
|
23
22
|
* @returns Updated transaction with rescaled columns for a given table
|
|
24
23
|
*/
|
|
25
|
-
export declare const
|
|
26
|
-
/**
|
|
27
|
-
* This function is called when user inserts/deletes a column in a table to;
|
|
28
|
-
* - rescale all columns (if the table did not overflow before the insertion)
|
|
29
|
-
* - and update column widths.
|
|
30
|
-
*
|
|
31
|
-
* This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
|
|
32
|
-
* @param table
|
|
33
|
-
* @param view
|
|
34
|
-
* @returns Updated transaction with rescaled columns for a given table
|
|
35
|
-
*/
|
|
36
|
-
export declare const rescaleColumnsOld: (getEditorContainerWidth: GetEditorContainerWidth) => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
|
37
|
-
export declare const rescaleColumns: (getEditorContainerWidth?: GetEditorContainerWidth) => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
|
24
|
+
export declare const rescaleColumns: () => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
|
|
2
1
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
2
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
4
3
|
import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
|
|
@@ -22,16 +21,4 @@ export declare const updateColumnWidths: (resizeState: ResizeState, table: PMNod
|
|
|
22
21
|
* @param view
|
|
23
22
|
* @returns Updated transaction with rescaled columns for a given table
|
|
24
23
|
*/
|
|
25
|
-
export declare const
|
|
26
|
-
/**
|
|
27
|
-
* This function is called when user inserts/deletes a column in a table to;
|
|
28
|
-
* - rescale all columns (if the table did not overflow before the insertion)
|
|
29
|
-
* - and update column widths.
|
|
30
|
-
*
|
|
31
|
-
* This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
|
|
32
|
-
* @param table
|
|
33
|
-
* @param view
|
|
34
|
-
* @returns Updated transaction with rescaled columns for a given table
|
|
35
|
-
*/
|
|
36
|
-
export declare const rescaleColumnsOld: (getEditorContainerWidth: GetEditorContainerWidth) => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
|
37
|
-
export declare const rescaleColumns: (getEditorContainerWidth?: GetEditorContainerWidth) => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
|
24
|
+
export declare const rescaleColumns: () => (table: ContentNodeWithPos, view: EditorView | undefined) => (tr: Transaction) => Transaction;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "5.7.
|
|
3
|
+
"version": "5.7.4",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -125,9 +125,6 @@
|
|
|
125
125
|
"platform.editor.table.shift-arrowup-fix": {
|
|
126
126
|
"type": "boolean"
|
|
127
127
|
},
|
|
128
|
-
"platform.editor.table-update-colwidths-after-column-is-deleted": {
|
|
129
|
-
"type": "boolean"
|
|
130
|
-
},
|
|
131
128
|
"platform.editor.table.alternative-sticky-header-logic": {
|
|
132
129
|
"type": "boolean"
|
|
133
130
|
},
|
|
@@ -69,6 +69,11 @@ describe('table plugin: insert', () => {
|
|
|
69
69
|
});
|
|
70
70
|
|
|
71
71
|
it('does scale cells in tables which are not overflowing', () => {
|
|
72
|
+
jest
|
|
73
|
+
.spyOn(HTMLElement.prototype, 'clientWidth', 'get')
|
|
74
|
+
.mockImplementationOnce(() => 760)
|
|
75
|
+
.mockImplementationOnce(() => 770);
|
|
76
|
+
|
|
72
77
|
const { editorView } = editor(
|
|
73
78
|
doc(
|
|
74
79
|
table({ localId: TABLE_LOCAL_ID })(
|
|
@@ -97,6 +102,8 @@ describe('table plugin: insert', () => {
|
|
|
97
102
|
expect(updatedLastTableCellNode?.attrs.colwidth[0]).not.toBe(
|
|
98
103
|
lastTableCellNode?.attrs.colwidth[0],
|
|
99
104
|
);
|
|
105
|
+
|
|
106
|
+
jest.restoreAllMocks();
|
|
100
107
|
});
|
|
101
108
|
|
|
102
109
|
it('does not scale cells in tables which are overflowing', () => {
|