@atlaskit/editor-plugin-table 24.4.4 → 24.4.6
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 +17 -0
- package/dist/cjs/nodeviews/table.js +6 -1
- package/dist/cjs/ui/toolbar.js +12 -81
- package/dist/es2019/nodeviews/table.js +6 -1
- package/dist/es2019/ui/toolbar.js +12 -82
- package/dist/esm/nodeviews/table.js +6 -1
- package/dist/esm/ui/toolbar.js +12 -81
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 24.4.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`d86bd1324d82b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d86bd1324d82b) -
|
|
8
|
+
Fix table cell selection when moving a table with the keyboard shortcut behind the
|
|
9
|
+
`platform_editor_fix_table_move_shortcut` experiment.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 24.4.5
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`22f3858872f99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22f3858872f99) -
|
|
17
|
+
Clean up experiment `platform_editor_table_toolbar_perf_fix`
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 24.4.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -21,6 +21,7 @@ var _table = require("@atlaskit/editor-common/table");
|
|
|
21
21
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
22
22
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
23
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
|
+
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
24
25
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
25
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
26
27
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
@@ -143,6 +144,10 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
143
144
|
|
|
144
145
|
// Only proceed if we have both a node and table, and the table isn't already inside the node
|
|
145
146
|
if (node && this.table && !node.contains(this.table)) {
|
|
147
|
+
// Patch to prevent selection collapsing when moving the table down with ctrl + shift + down
|
|
148
|
+
var selectionBeforeMove = this.view.state.selection;
|
|
149
|
+
var shouldPreserveCellSelection = (0, _expValEquals.expValEquals)('platform_editor_fix_table_move_shortcut', 'isEnabled', true) && selectionBeforeMove instanceof _cellSelection.CellSelection;
|
|
150
|
+
|
|
146
151
|
// Store the current ignoreMutation handler so we can restore it later
|
|
147
152
|
oldIgnoreMutation = this.ignoreMutation;
|
|
148
153
|
|
|
@@ -154,7 +159,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
154
159
|
if (!isSelectionMutation) {
|
|
155
160
|
mutationsIgnored = true;
|
|
156
161
|
}
|
|
157
|
-
return !isSelectionMutation;
|
|
162
|
+
return !isSelectionMutation || shouldPreserveCellSelection && _this2.view.state.selection.eq(selectionBeforeMove);
|
|
158
163
|
};
|
|
159
164
|
|
|
160
165
|
// Store the current selection state if there is a visible selection
|
package/dist/cjs/ui/toolbar.js
CHANGED
|
@@ -236,42 +236,22 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
|
|
|
236
236
|
});
|
|
237
237
|
}
|
|
238
238
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
|
|
239
|
-
var wouldChange = true; // Default to enabled - show the button.
|
|
240
|
-
var newResizeStateWithAnalytics;
|
|
241
|
-
|
|
242
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
243
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
244
|
-
if (!isLimitedModeEnabled && !(0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
245
|
-
var _newResizeStateWithAn, _newResizeStateWithAn2;
|
|
246
|
-
newResizeStateWithAnalytics = editorView ? (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
|
|
247
|
-
wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
|
|
248
|
-
}
|
|
249
239
|
var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
if (
|
|
253
|
-
|
|
254
|
-
if (resizeState) {
|
|
255
|
-
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
256
|
-
return true;
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
return false;
|
|
260
|
-
} else {
|
|
261
|
-
// Original behavior: use pre-calculated state
|
|
262
|
-
if (newResizeStateWithAnalytics) {
|
|
263
|
-
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
|
|
240
|
+
if (view) {
|
|
241
|
+
var resizeState = (0, _resizeState.getNewResizeStateFromSelectedColumns)(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
242
|
+
if (resizeState) {
|
|
243
|
+
(0, _commandsWithAnalytics.distributeColumnsWidthsWithAnalytics)(editorAnalyticsAPI, api)(_analytics.INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
264
244
|
return true;
|
|
265
245
|
}
|
|
266
|
-
return false;
|
|
267
246
|
}
|
|
247
|
+
return false;
|
|
268
248
|
};
|
|
269
249
|
options.push({
|
|
270
250
|
id: 'editor.table.distributeColumns',
|
|
271
251
|
title: formatMessage(_messages.tableMessages.distributeColumns),
|
|
272
252
|
onClick: distributeColumnWidths,
|
|
273
253
|
selected: false,
|
|
274
|
-
disabled:
|
|
254
|
+
disabled: false
|
|
275
255
|
});
|
|
276
256
|
}
|
|
277
257
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
|
|
@@ -437,24 +417,10 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
|
|
|
437
417
|
var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
|
|
438
418
|
var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
|
|
439
419
|
var editorView = getEditorView();
|
|
440
|
-
var getDomRef =
|
|
420
|
+
var getDomRef = function getDomRef(editorView) {
|
|
441
421
|
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
442
422
|
var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
|
|
443
423
|
return getMemoizedTableWrapperFromParent(parent);
|
|
444
|
-
} : function (editorView) {
|
|
445
|
-
var element;
|
|
446
|
-
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
447
|
-
var parent = (0, _utils2.findParentDomRefOfType)(nodeType, domAtPos)(state.selection);
|
|
448
|
-
if (parent) {
|
|
449
|
-
var tableRef =
|
|
450
|
-
// Ignored via go/ees005
|
|
451
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
452
|
-
parent.querySelector('table') || undefined;
|
|
453
|
-
if (tableRef) {
|
|
454
|
-
element = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
|
|
455
|
-
}
|
|
456
|
-
}
|
|
457
|
-
return element;
|
|
458
424
|
};
|
|
459
425
|
var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
|
|
460
426
|
var alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
|
|
@@ -665,24 +631,8 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
665
631
|
var isLimitedModeEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
|
|
666
632
|
var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
|
|
667
633
|
var items = [];
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
671
|
-
if (!editorView) {
|
|
672
|
-
return [];
|
|
673
|
-
}
|
|
674
|
-
} else {
|
|
675
|
-
var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
676
|
-
if (!selectionOrTableRect || !editorView) {
|
|
677
|
-
return [];
|
|
678
|
-
}
|
|
679
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
680
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
681
|
-
if (!isLimitedModeEnabled) {
|
|
682
|
-
var _newResizeStateWithAn3, _newResizeStateWithAn4;
|
|
683
|
-
newResizeStateWithAnalytics = (0, _resizeState.getNewResizeStateFromSelectedColumns)(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
684
|
-
wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
|
|
685
|
-
}
|
|
634
|
+
if (!editorView) {
|
|
635
|
+
return [];
|
|
686
636
|
}
|
|
687
637
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns) {
|
|
688
638
|
items.push({
|
|
@@ -698,7 +648,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
698
648
|
onClick: function onClick(state, dispatch, view) {
|
|
699
649
|
return getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view);
|
|
700
650
|
},
|
|
701
|
-
disabled:
|
|
651
|
+
disabled: false
|
|
702
652
|
});
|
|
703
653
|
}
|
|
704
654
|
if (items.length !== 0 && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
@@ -810,7 +760,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
|
|
|
810
760
|
value = alignmentIcon.value,
|
|
811
761
|
icon = alignmentIcon.icon;
|
|
812
762
|
var currentLayout = tableObject.node.attrs.layout;
|
|
813
|
-
var shouldDisableLayoutOption =
|
|
763
|
+
var shouldDisableLayoutOption = getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor);
|
|
814
764
|
return _objectSpread({
|
|
815
765
|
id: id,
|
|
816
766
|
type: 'button',
|
|
@@ -884,23 +834,4 @@ var getMemoizedIsLayoutOptionDisabled = (0, _memoizeOne.default)(isLayoutOptionD
|
|
|
884
834
|
return val === nextRest[idx];
|
|
885
835
|
});
|
|
886
836
|
return nodeEqual && restEqual;
|
|
887
|
-
});
|
|
888
|
-
var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
|
|
889
|
-
var _getEditorContainerWi2 = getEditorContainerWidth(),
|
|
890
|
-
lineLength = _getEditorContainerWi2.lineLength;
|
|
891
|
-
var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(selectedNode);
|
|
892
|
-
|
|
893
|
-
// table may be scaled, use the scale percent to calculate the table width
|
|
894
|
-
if (editorView) {
|
|
895
|
-
var tableWrapperWidth = tableContainerWidth;
|
|
896
|
-
var scalePercent = (0, _misc.getStaticTableScalingPercent)(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
|
|
897
|
-
tableContainerWidth = tableContainerWidth * scalePercent;
|
|
898
|
-
}
|
|
899
|
-
|
|
900
|
-
// If fixed-width editor, we disable 'left-alignment' when table width is 760px.
|
|
901
|
-
// tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
|
|
902
|
-
if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
|
|
903
|
-
return true;
|
|
904
|
-
}
|
|
905
|
-
return false;
|
|
906
|
-
};
|
|
837
|
+
});
|
|
@@ -7,6 +7,7 @@ import { isTableInContentMode } from '@atlaskit/editor-common/table';
|
|
|
7
7
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
9
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
10
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
10
11
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
11
12
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
@@ -113,6 +114,10 @@ export default class TableView extends ReactNodeView {
|
|
|
113
114
|
|
|
114
115
|
// Only proceed if we have both a node and table, and the table isn't already inside the node
|
|
115
116
|
if (node && this.table && !node.contains(this.table)) {
|
|
117
|
+
// Patch to prevent selection collapsing when moving the table down with ctrl + shift + down
|
|
118
|
+
const selectionBeforeMove = this.view.state.selection;
|
|
119
|
+
const shouldPreserveCellSelection = expValEquals('platform_editor_fix_table_move_shortcut', 'isEnabled', true) && selectionBeforeMove instanceof CellSelection;
|
|
120
|
+
|
|
116
121
|
// Store the current ignoreMutation handler so we can restore it later
|
|
117
122
|
oldIgnoreMutation = this.ignoreMutation;
|
|
118
123
|
|
|
@@ -124,7 +129,7 @@ export default class TableView extends ReactNodeView {
|
|
|
124
129
|
if (!isSelectionMutation) {
|
|
125
130
|
mutationsIgnored = true;
|
|
126
131
|
}
|
|
127
|
-
return !isSelectionMutation;
|
|
132
|
+
return !isSelectionMutation || shouldPreserveCellSelection && this.view.state.selection.eq(selectionBeforeMove);
|
|
128
133
|
};
|
|
129
134
|
|
|
130
135
|
// Store the current selection state if there is a visible selection
|
|
@@ -218,42 +218,22 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
|
|
|
218
218
|
});
|
|
219
219
|
}
|
|
220
220
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
|
|
221
|
-
let wouldChange = true; // Default to enabled - show the button.
|
|
222
|
-
let newResizeStateWithAnalytics;
|
|
223
|
-
|
|
224
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
225
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
226
|
-
if (!isLimitedModeEnabled && !expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
227
|
-
var _newResizeStateWithAn, _newResizeStateWithAn2;
|
|
228
|
-
newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
|
|
229
|
-
wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
|
|
230
|
-
}
|
|
231
221
|
const distributeColumnWidths = (state, dispatch, view) => {
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
if (
|
|
235
|
-
|
|
236
|
-
if (resizeState) {
|
|
237
|
-
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
238
|
-
return true;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
return false;
|
|
242
|
-
} else {
|
|
243
|
-
// Original behavior: use pre-calculated state
|
|
244
|
-
if (newResizeStateWithAnalytics) {
|
|
245
|
-
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
|
|
222
|
+
if (view) {
|
|
223
|
+
const resizeState = getNewResizeStateFromSelectedColumns(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
224
|
+
if (resizeState) {
|
|
225
|
+
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
246
226
|
return true;
|
|
247
227
|
}
|
|
248
|
-
return false;
|
|
249
228
|
}
|
|
229
|
+
return false;
|
|
250
230
|
};
|
|
251
231
|
options.push({
|
|
252
232
|
id: 'editor.table.distributeColumns',
|
|
253
233
|
title: formatMessage(messages.distributeColumns),
|
|
254
234
|
onClick: distributeColumnWidths,
|
|
255
235
|
selected: false,
|
|
256
|
-
disabled:
|
|
236
|
+
disabled: false
|
|
257
237
|
});
|
|
258
238
|
}
|
|
259
239
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
|
|
@@ -415,24 +395,10 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
|
|
|
415
395
|
const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
|
|
416
396
|
const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
|
|
417
397
|
const editorView = getEditorView();
|
|
418
|
-
const getDomRef =
|
|
398
|
+
const getDomRef = editorView => {
|
|
419
399
|
const domAtPos = editorView.domAtPos.bind(editorView);
|
|
420
400
|
const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
|
|
421
401
|
return getMemoizedTableWrapperFromParent(parent);
|
|
422
|
-
} : editorView => {
|
|
423
|
-
let element;
|
|
424
|
-
const domAtPos = editorView.domAtPos.bind(editorView);
|
|
425
|
-
const parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
|
|
426
|
-
if (parent) {
|
|
427
|
-
const tableRef =
|
|
428
|
-
// Ignored via go/ees005
|
|
429
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
430
|
-
parent.querySelector('table') || undefined;
|
|
431
|
-
if (tableRef) {
|
|
432
|
-
element = closestElement(tableRef, `.${TableCssClassName.TABLE_NODE_WRAPPER}`) || undefined;
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
|
-
return element;
|
|
436
402
|
};
|
|
437
403
|
const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
|
|
438
404
|
const alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
|
|
@@ -623,24 +589,8 @@ const getColumnSettingItems = (editorState, editorView, {
|
|
|
623
589
|
var _pluginState$pluginCo3;
|
|
624
590
|
const pluginState = getPluginState(editorState);
|
|
625
591
|
const items = [];
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
if (expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
629
|
-
if (!editorView) {
|
|
630
|
-
return [];
|
|
631
|
-
}
|
|
632
|
-
} else {
|
|
633
|
-
const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
634
|
-
if (!selectionOrTableRect || !editorView) {
|
|
635
|
-
return [];
|
|
636
|
-
}
|
|
637
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
638
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
639
|
-
if (!isLimitedModeEnabled) {
|
|
640
|
-
var _newResizeStateWithAn3, _newResizeStateWithAn4;
|
|
641
|
-
newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
642
|
-
wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
|
|
643
|
-
}
|
|
592
|
+
if (!editorView) {
|
|
593
|
+
return [];
|
|
644
594
|
}
|
|
645
595
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns) {
|
|
646
596
|
items.push({
|
|
@@ -652,7 +602,7 @@ const getColumnSettingItems = (editorState, editorView, {
|
|
|
652
602
|
label: ''
|
|
653
603
|
}),
|
|
654
604
|
onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view),
|
|
655
|
-
disabled:
|
|
605
|
+
disabled: false
|
|
656
606
|
});
|
|
657
607
|
}
|
|
658
608
|
if (items.length !== 0 && !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
@@ -759,7 +709,7 @@ const getAlignmentOptionsConfig = (editorState, {
|
|
|
759
709
|
icon
|
|
760
710
|
} = alignmentIcon;
|
|
761
711
|
const currentLayout = tableObject.node.attrs.layout;
|
|
762
|
-
const shouldDisableLayoutOption =
|
|
712
|
+
const shouldDisableLayoutOption = getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor);
|
|
763
713
|
return {
|
|
764
714
|
id: id,
|
|
765
715
|
type: 'button',
|
|
@@ -825,24 +775,4 @@ const getMemoizedIsLayoutOptionDisabled = memoizeOne(isLayoutOptionDisabledImpl,
|
|
|
825
775
|
const nodeEqual = isEqual(prevNode.attrs, nextNode.attrs);
|
|
826
776
|
const restEqual = prevRest.every((val, idx) => val === nextRest[idx]);
|
|
827
777
|
return nodeEqual && restEqual;
|
|
828
|
-
});
|
|
829
|
-
const isLayoutOptionDisabled = (selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) => {
|
|
830
|
-
const {
|
|
831
|
-
lineLength
|
|
832
|
-
} = getEditorContainerWidth();
|
|
833
|
-
let tableContainerWidth = getTableContainerWidth(selectedNode);
|
|
834
|
-
|
|
835
|
-
// table may be scaled, use the scale percent to calculate the table width
|
|
836
|
-
if (editorView) {
|
|
837
|
-
const tableWrapperWidth = tableContainerWidth;
|
|
838
|
-
const scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
|
|
839
|
-
tableContainerWidth = tableContainerWidth * scalePercent;
|
|
840
|
-
}
|
|
841
|
-
|
|
842
|
-
// If fixed-width editor, we disable 'left-alignment' when table width is 760px.
|
|
843
|
-
// tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
|
|
844
|
-
if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
|
|
845
|
-
return true;
|
|
846
|
-
}
|
|
847
|
-
return false;
|
|
848
|
-
};
|
|
778
|
+
});
|
|
@@ -17,6 +17,7 @@ import { isTableInContentMode } from '@atlaskit/editor-common/table';
|
|
|
17
17
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
18
18
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
19
19
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
20
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
20
21
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
21
22
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
23
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
@@ -136,6 +137,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
136
137
|
|
|
137
138
|
// Only proceed if we have both a node and table, and the table isn't already inside the node
|
|
138
139
|
if (node && this.table && !node.contains(this.table)) {
|
|
140
|
+
// Patch to prevent selection collapsing when moving the table down with ctrl + shift + down
|
|
141
|
+
var selectionBeforeMove = this.view.state.selection;
|
|
142
|
+
var shouldPreserveCellSelection = expValEquals('platform_editor_fix_table_move_shortcut', 'isEnabled', true) && selectionBeforeMove instanceof CellSelection;
|
|
143
|
+
|
|
139
144
|
// Store the current ignoreMutation handler so we can restore it later
|
|
140
145
|
oldIgnoreMutation = this.ignoreMutation;
|
|
141
146
|
|
|
@@ -147,7 +152,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
147
152
|
if (!isSelectionMutation) {
|
|
148
153
|
mutationsIgnored = true;
|
|
149
154
|
}
|
|
150
|
-
return !isSelectionMutation;
|
|
155
|
+
return !isSelectionMutation || shouldPreserveCellSelection && _this2.view.state.selection.eq(selectionBeforeMove);
|
|
151
156
|
};
|
|
152
157
|
|
|
153
158
|
// Store the current selection state if there is a visible selection
|
package/dist/esm/ui/toolbar.js
CHANGED
|
@@ -229,42 +229,22 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
|
|
|
229
229
|
});
|
|
230
230
|
}
|
|
231
231
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
|
|
232
|
-
var wouldChange = true; // Default to enabled - show the button.
|
|
233
|
-
var newResizeStateWithAnalytics;
|
|
234
|
-
|
|
235
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
236
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
237
|
-
if (!isLimitedModeEnabled && !expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
238
|
-
var _newResizeStateWithAn, _newResizeStateWithAn2;
|
|
239
|
-
newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
|
|
240
|
-
wouldChange = (_newResizeStateWithAn = (_newResizeStateWithAn2 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn2 === void 0 ? void 0 : _newResizeStateWithAn2.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
|
|
241
|
-
}
|
|
242
232
|
var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
if (
|
|
246
|
-
|
|
247
|
-
if (resizeState) {
|
|
248
|
-
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
249
|
-
return true;
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
return false;
|
|
253
|
-
} else {
|
|
254
|
-
// Original behavior: use pre-calculated state
|
|
255
|
-
if (newResizeStateWithAnalytics) {
|
|
256
|
-
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
|
|
233
|
+
if (view) {
|
|
234
|
+
var resizeState = getNewResizeStateFromSelectedColumns(initialSelectionRect, state, view.domAtPos.bind(view), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
235
|
+
if (resizeState) {
|
|
236
|
+
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(INPUT_METHOD.FLOATING_TB, resizeState)(state, dispatch);
|
|
257
237
|
return true;
|
|
258
238
|
}
|
|
259
|
-
return false;
|
|
260
239
|
}
|
|
240
|
+
return false;
|
|
261
241
|
};
|
|
262
242
|
options.push({
|
|
263
243
|
id: 'editor.table.distributeColumns',
|
|
264
244
|
title: formatMessage(messages.distributeColumns),
|
|
265
245
|
onClick: distributeColumnWidths,
|
|
266
246
|
selected: false,
|
|
267
|
-
disabled:
|
|
247
|
+
disabled: false
|
|
268
248
|
});
|
|
269
249
|
}
|
|
270
250
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
|
|
@@ -430,24 +410,10 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
|
|
|
430
410
|
var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
|
|
431
411
|
var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
|
|
432
412
|
var editorView = getEditorView();
|
|
433
|
-
var getDomRef =
|
|
413
|
+
var getDomRef = function getDomRef(editorView) {
|
|
434
414
|
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
435
415
|
var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
|
|
436
416
|
return getMemoizedTableWrapperFromParent(parent);
|
|
437
|
-
} : function (editorView) {
|
|
438
|
-
var element;
|
|
439
|
-
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
440
|
-
var parent = findParentDomRefOfType(nodeType, domAtPos)(state.selection);
|
|
441
|
-
if (parent) {
|
|
442
|
-
var tableRef =
|
|
443
|
-
// Ignored via go/ees005
|
|
444
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
445
|
-
parent.querySelector('table') || undefined;
|
|
446
|
-
if (tableRef) {
|
|
447
|
-
element = closestElement(tableRef, ".".concat(TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
|
|
448
|
-
}
|
|
449
|
-
}
|
|
450
|
-
return element;
|
|
451
417
|
};
|
|
452
418
|
var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
|
|
453
419
|
var alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, areAnyNewToolbarFlagsEnabled, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
|
|
@@ -658,24 +624,8 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
658
624
|
var isLimitedModeEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
|
|
659
625
|
var pluginState = getPluginState(editorState);
|
|
660
626
|
var items = [];
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
if (expValEquals('platform_editor_table_toolbar_perf_fix', 'isEnabled', true)) {
|
|
664
|
-
if (!editorView) {
|
|
665
|
-
return [];
|
|
666
|
-
}
|
|
667
|
-
} else {
|
|
668
|
-
var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
669
|
-
if (!selectionOrTableRect || !editorView) {
|
|
670
|
-
return [];
|
|
671
|
-
}
|
|
672
|
-
// Performance optimization: Skip expensive getTableScalingPercent() DOM query when limited mode is enabled.
|
|
673
|
-
// This avoids layout reflows on every transaction. Instead, button stays enabled and calculates on-demand when clicked.
|
|
674
|
-
if (!isLimitedModeEnabled) {
|
|
675
|
-
var _newResizeStateWithAn3, _newResizeStateWithAn4;
|
|
676
|
-
newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
677
|
-
wouldChange = (_newResizeStateWithAn3 = (_newResizeStateWithAn4 = newResizeStateWithAnalytics) === null || _newResizeStateWithAn4 === void 0 ? void 0 : _newResizeStateWithAn4.changed) !== null && _newResizeStateWithAn3 !== void 0 ? _newResizeStateWithAn3 : false;
|
|
678
|
-
}
|
|
627
|
+
if (!editorView) {
|
|
628
|
+
return [];
|
|
679
629
|
}
|
|
680
630
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo3 = pluginState.pluginConfig) !== null && _pluginState$pluginCo3 !== void 0 && _pluginState$pluginCo3.allowDistributeColumns) {
|
|
681
631
|
items.push({
|
|
@@ -691,7 +641,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
|
|
|
691
641
|
onClick: function onClick(state, dispatch, view) {
|
|
692
642
|
return getDistributeConfig(getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view);
|
|
693
643
|
},
|
|
694
|
-
disabled:
|
|
644
|
+
disabled: false
|
|
695
645
|
});
|
|
696
646
|
}
|
|
697
647
|
if (items.length !== 0 && !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
|
|
@@ -803,7 +753,7 @@ var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState,
|
|
|
803
753
|
value = alignmentIcon.value,
|
|
804
754
|
icon = alignmentIcon.icon;
|
|
805
755
|
var currentLayout = tableObject.node.attrs.layout;
|
|
806
|
-
var shouldDisableLayoutOption =
|
|
756
|
+
var shouldDisableLayoutOption = getMemoizedIsLayoutOptionDisabled(tableObject.node, getEditorContainerWidth, editorView !== null, shouldUseIncreasedScalingPercent, isFullWidthEditor);
|
|
807
757
|
return _objectSpread({
|
|
808
758
|
id: id,
|
|
809
759
|
type: 'button',
|
|
@@ -877,23 +827,4 @@ var getMemoizedIsLayoutOptionDisabled = memoizeOne(isLayoutOptionDisabledImpl, f
|
|
|
877
827
|
return val === nextRest[idx];
|
|
878
828
|
});
|
|
879
829
|
return nodeEqual && restEqual;
|
|
880
|
-
});
|
|
881
|
-
var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, isFullWidthEditor) {
|
|
882
|
-
var _getEditorContainerWi2 = getEditorContainerWidth(),
|
|
883
|
-
lineLength = _getEditorContainerWi2.lineLength;
|
|
884
|
-
var tableContainerWidth = getTableContainerWidth(selectedNode);
|
|
885
|
-
|
|
886
|
-
// table may be scaled, use the scale percent to calculate the table width
|
|
887
|
-
if (editorView) {
|
|
888
|
-
var tableWrapperWidth = tableContainerWidth;
|
|
889
|
-
var scalePercent = getStaticTableScalingPercent(selectedNode, tableWrapperWidth, shouldUseIncreasedScalingPercent);
|
|
890
|
-
tableContainerWidth = tableContainerWidth * scalePercent;
|
|
891
|
-
}
|
|
892
|
-
|
|
893
|
-
// If fixed-width editor, we disable 'left-alignment' when table width is 760px.
|
|
894
|
-
// tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
|
|
895
|
-
if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
|
|
896
|
-
return true;
|
|
897
|
-
}
|
|
898
|
-
return false;
|
|
899
|
-
};
|
|
830
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "24.4.
|
|
3
|
+
"version": "24.4.6",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-insertion": "^12.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "15.0.
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "15.0.26",
|
|
33
33
|
"@atlaskit/editor-plugin-guideline": "^12.0.0",
|
|
34
34
|
"@atlaskit/editor-plugin-interaction": "^22.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-limited-mode": "^9.0.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
54
54
|
"@atlaskit/primitives": "^20.6.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^125.1.0",
|
|
56
56
|
"@atlaskit/toggle": "^17.1.0",
|
|
57
57
|
"@atlaskit/tokens": "^15.8.0",
|
|
58
58
|
"@atlaskit/tooltip": "^23.1.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"uuid": "^3.1.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@atlaskit/editor-common": "^116.
|
|
70
|
+
"@atlaskit/editor-common": "^116.30.0",
|
|
71
71
|
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
73
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|