@atlaskit/editor-plugin-table 24.4.4 → 24.4.5
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 +8 -0
- package/dist/cjs/ui/toolbar.js +12 -81
- package/dist/es2019/ui/toolbar.js +12 -82
- package/dist/esm/ui/toolbar.js +12 -81
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 24.4.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`22f3858872f99`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22f3858872f99) -
|
|
8
|
+
Clean up experiment `platform_editor_table_toolbar_perf_fix`
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 24.4.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
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
|
+
});
|
|
@@ -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
|
+
});
|
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.5",
|
|
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.0.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"
|