@atlaskit/editor-plugin-table 15.2.0 → 15.2.2
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 +16 -0
- package/dist/cjs/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/cjs/nodeviews/TableComponentNext.js +19 -34
- package/dist/cjs/nodeviews/TableContainer.js +31 -215
- package/dist/cjs/nodeviews/TableResizer.js +3 -10
- package/dist/cjs/nodeviews/table.js +1 -2
- package/dist/cjs/nodeviews/toDOM.js +9 -27
- package/dist/cjs/pm-plugins/main.js +0 -31
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/cjs/ui/common-styles.js +1 -1
- package/dist/es2019/nodeviews/TableComponentLegacy.js +9 -25
- package/dist/es2019/nodeviews/TableComponentNext.js +10 -25
- package/dist/es2019/nodeviews/TableContainer.js +9 -190
- package/dist/es2019/nodeviews/TableResizer.js +3 -10
- package/dist/es2019/nodeviews/table.js +1 -2
- package/dist/es2019/nodeviews/toDOM.js +9 -28
- package/dist/es2019/pm-plugins/main.js +1 -32
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +2 -5
- package/dist/es2019/ui/common-styles.js +4 -3
- package/dist/esm/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/esm/nodeviews/TableComponentNext.js +19 -34
- package/dist/esm/nodeviews/TableContainer.js +31 -215
- package/dist/esm/nodeviews/TableResizer.js +3 -10
- package/dist/esm/nodeviews/table.js +1 -2
- package/dist/esm/nodeviews/toDOM.js +10 -28
- package/dist/esm/pm-plugins/main.js +1 -32
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/esm/ui/common-styles.js +2 -2
- package/dist/types/nodeviews/TableContainer.d.ts +1 -3
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +1 -3
- package/package.json +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 15.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`5f70b8e74f5f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f70b8e74f5f3) -
|
|
8
|
+
tidy up feature flag platform_editor_tables_scaling_css
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 15.2.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`668649eea2f53`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/668649eea2f53) -
|
|
16
|
+
[ux] EDITOR-2261 Toggles number column numbering sizing to match editor contentMode
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 15.2.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -363,7 +363,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
363
363
|
isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
|
|
364
364
|
isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
|
|
365
365
|
var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
366
|
-
if (
|
|
366
|
+
if (isFullPageEditor) {
|
|
367
367
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
368
368
|
}
|
|
369
369
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -447,10 +447,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
447
447
|
}
|
|
448
448
|
}
|
|
449
449
|
});
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
453
|
-
}
|
|
450
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
451
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
454
452
|
}
|
|
455
453
|
}
|
|
456
454
|
}, {
|
|
@@ -465,9 +463,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
465
463
|
allowTableResizing = _this$props7.allowTableResizing,
|
|
466
464
|
eventDispatcher = _this$props7.eventDispatcher,
|
|
467
465
|
isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
|
|
468
|
-
getNode = _this$props7.getNode
|
|
469
|
-
getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
|
|
470
|
-
isTableScalingEnabled = _this$props7.isTableScalingEnabled;
|
|
466
|
+
getNode = _this$props7.getNode;
|
|
471
467
|
|
|
472
468
|
// Ignored via go/ees005
|
|
473
469
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -480,17 +476,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
480
476
|
// Ignored via go/ees005
|
|
481
477
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
482
478
|
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
483
|
-
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
484
|
-
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
485
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
486
|
-
if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
487
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
488
|
-
this.handleColgroupUpdates(true);
|
|
489
|
-
}
|
|
490
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
491
|
-
this.handleColgroupUpdates(true);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
479
|
if (this.wrapper) {
|
|
495
480
|
this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
|
|
496
481
|
var _iterator2 = _createForOfIteratorHelper(entries),
|
|
@@ -595,10 +580,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
595
580
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
596
581
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
597
582
|
}
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
}
|
|
583
|
+
|
|
584
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
585
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
602
586
|
|
|
603
587
|
// Ignored via go/ees005
|
|
604
588
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -688,7 +672,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
688
672
|
containerLineLength = containerWidth.lineLength;
|
|
689
673
|
var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
690
674
|
var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
|
|
691
|
-
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
675
|
+
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
692
676
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
693
677
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
694
678
|
var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -707,9 +691,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
707
691
|
isNumberOfColumnsChanged: isNumberOfColumnsChanged,
|
|
708
692
|
isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
|
|
709
693
|
});
|
|
710
|
-
var
|
|
711
|
-
|
|
712
|
-
tableWithFixedColumnWidthsOption =
|
|
694
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
695
|
+
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
696
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
713
697
|
var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
714
698
|
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
715
699
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
@@ -793,9 +777,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
793
777
|
var table = (0, _utils2.findTable)(view.state.selection);
|
|
794
778
|
var shouldScale = false;
|
|
795
779
|
var shouldHandleColgroupUpdates = false;
|
|
796
|
-
var
|
|
797
|
-
|
|
798
|
-
tableWithFixedColumnWidthsOption =
|
|
780
|
+
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
781
|
+
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
782
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
799
783
|
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
800
784
|
shouldScale = true;
|
|
801
785
|
shouldHandleColgroupUpdates = true;
|
|
@@ -806,7 +790,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
806
790
|
shouldScale = true;
|
|
807
791
|
shouldHandleColgroupUpdates = true;
|
|
808
792
|
}
|
|
809
|
-
if (
|
|
793
|
+
if (this.state.windowResized) {
|
|
810
794
|
shouldHandleColgroupUpdates = true;
|
|
811
795
|
}
|
|
812
796
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -1021,9 +1005,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
1021
1005
|
var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
|
|
1022
1006
|
var topOffset = 0;
|
|
1023
1007
|
var topStickyShadowPosition = !this.props.limitedMode && this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
|
|
1024
|
-
var
|
|
1025
|
-
|
|
1026
|
-
tableWithFixedColumnWidthsOption =
|
|
1008
|
+
var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
|
|
1009
|
+
_getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
|
|
1010
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
|
|
1027
1011
|
var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
|
|
1028
1012
|
return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
|
|
1029
1013
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -306,7 +306,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
306
306
|
isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
|
|
307
307
|
isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
|
|
308
308
|
var isFullPageEditor = !((_this$props$options = _this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = _this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
309
|
-
if (
|
|
309
|
+
if (isFullPageEditor) {
|
|
310
310
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
311
311
|
}
|
|
312
312
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -388,10 +388,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
388
388
|
}
|
|
389
389
|
}
|
|
390
390
|
});
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
}
|
|
391
|
+
|
|
392
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
393
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
395
394
|
}
|
|
396
395
|
}
|
|
397
396
|
}, {
|
|
@@ -406,9 +405,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
406
405
|
allowTableResizing = _this$props6.allowTableResizing,
|
|
407
406
|
eventDispatcher = _this$props6.eventDispatcher,
|
|
408
407
|
isDragAndDropEnabled = _this$props6.isDragAndDropEnabled,
|
|
409
|
-
getNode = _this$props6.getNode
|
|
410
|
-
getEditorFeatureFlags = _this$props6.getEditorFeatureFlags,
|
|
411
|
-
isTableScalingEnabled = _this$props6.isTableScalingEnabled;
|
|
408
|
+
getNode = _this$props6.getNode;
|
|
412
409
|
|
|
413
410
|
// Ignored via go/ees005
|
|
414
411
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -421,17 +418,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
421
418
|
// Ignored via go/ees005
|
|
422
419
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
423
420
|
this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
424
|
-
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
425
|
-
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
426
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
427
|
-
if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
428
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
429
|
-
this.handleColgroupUpdates(true);
|
|
430
|
-
}
|
|
431
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
432
|
-
this.handleColgroupUpdates(true);
|
|
433
|
-
}
|
|
434
|
-
}
|
|
435
421
|
if (this.wrapper) {
|
|
436
422
|
this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
|
|
437
423
|
var _iterator2 = _createForOfIteratorHelper(entries),
|
|
@@ -532,10 +518,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
532
518
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
533
519
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
534
520
|
}
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
}
|
|
521
|
+
|
|
522
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
523
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
539
524
|
|
|
540
525
|
// Ignored via go/ees005
|
|
541
526
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -622,7 +607,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
622
607
|
containerLineLength = containerWidth.lineLength;
|
|
623
608
|
var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
624
609
|
var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
|
|
625
|
-
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
610
|
+
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
626
611
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
627
612
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
628
613
|
var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -641,9 +626,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
641
626
|
isNumberOfColumnsChanged: isNumberOfColumnsChanged,
|
|
642
627
|
isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
|
|
643
628
|
});
|
|
644
|
-
var
|
|
645
|
-
|
|
646
|
-
tableWithFixedColumnWidthsOption =
|
|
629
|
+
var _getEditorFeatureFlag = getEditorFeatureFlags(),
|
|
630
|
+
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
631
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
647
632
|
var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
648
633
|
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
649
634
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
@@ -724,9 +709,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
724
709
|
var table = (0, _utils2.findTable)(view.state.selection);
|
|
725
710
|
var shouldScale = false;
|
|
726
711
|
var shouldHandleColgroupUpdates = false;
|
|
727
|
-
var
|
|
728
|
-
|
|
729
|
-
tableWithFixedColumnWidthsOption =
|
|
712
|
+
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
713
|
+
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
714
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
730
715
|
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
731
716
|
shouldScale = true;
|
|
732
717
|
shouldHandleColgroupUpdates = true;
|
|
@@ -737,7 +722,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
737
722
|
shouldScale = true;
|
|
738
723
|
shouldHandleColgroupUpdates = true;
|
|
739
724
|
}
|
|
740
|
-
if (
|
|
725
|
+
if (this.state.windowResized) {
|
|
741
726
|
shouldHandleColgroupUpdates = true;
|
|
742
727
|
}
|
|
743
728
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -895,9 +880,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
895
880
|
tablePos = undefined;
|
|
896
881
|
}
|
|
897
882
|
var isNested = (0, _nodes.isTableNested)(view.state, tablePos);
|
|
898
|
-
var
|
|
899
|
-
|
|
900
|
-
tableWithFixedColumnWidthsOption =
|
|
883
|
+
var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
|
|
884
|
+
_getEditorFeatureFlag6 = _getEditorFeatureFlag5.tableWithFixedColumnWidthsOption,
|
|
885
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag6 === void 0 ? false : _getEditorFeatureFlag6;
|
|
901
886
|
var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
|
|
902
887
|
return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
|
|
903
888
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -15,8 +15,6 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
15
15
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
16
16
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
17
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
-
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
19
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
18
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
21
19
|
var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
|
|
22
20
|
var _pluginFactory = require("../pm-plugins/plugin-factory");
|
|
@@ -84,8 +82,8 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
|
|
|
84
82
|
}, [alignment]);
|
|
85
83
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
86
84
|
"data-testid": "table-alignment-container",
|
|
87
|
-
"data-ssr-placeholder":
|
|
88
|
-
"data-ssr-placeholder-replace":
|
|
85
|
+
"data-ssr-placeholder": "table-".concat(node.attrs.localId),
|
|
86
|
+
"data-ssr-placeholder-replace": "table-".concat(node.attrs.localId)
|
|
89
87
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
90
88
|
,
|
|
91
89
|
style: style
|
|
@@ -101,8 +99,8 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
|
|
|
101
99
|
if (!isTableAlignmentEnabled) {
|
|
102
100
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
103
101
|
"data-testid": "table-alignment-container",
|
|
104
|
-
"data-ssr-placeholder":
|
|
105
|
-
"data-ssr-placeholder-replace":
|
|
102
|
+
"data-ssr-placeholder": "table-".concat(node.attrs.localId),
|
|
103
|
+
"data-ssr-placeholder-replace": "table-".concat(node.attrs.localId),
|
|
106
104
|
style: {
|
|
107
105
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
108
106
|
display: 'flex',
|
|
@@ -129,7 +127,7 @@ var getPadding = function getPadding(containerWidth) {
|
|
|
129
127
|
exposure: true
|
|
130
128
|
}) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
|
|
131
129
|
};
|
|
132
|
-
var
|
|
130
|
+
var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
|
|
133
131
|
var children = _ref4.children,
|
|
134
132
|
className = _ref4.className,
|
|
135
133
|
node = _ref4.node,
|
|
@@ -146,7 +144,9 @@ var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_
|
|
|
146
144
|
isTableWithFixedColumnWidthsOptionEnabled = _ref4.isTableWithFixedColumnWidthsOptionEnabled,
|
|
147
145
|
isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
|
|
148
146
|
shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
|
|
149
|
-
isCommentEditor = _ref4.isCommentEditor
|
|
147
|
+
isCommentEditor = _ref4.isCommentEditor,
|
|
148
|
+
isChromelessEditor = _ref4.isChromelessEditor;
|
|
149
|
+
var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
|
|
150
150
|
var containerRef = (0, _react.useRef)(null);
|
|
151
151
|
var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
|
|
152
152
|
var _useState = (0, _react.useState)(false),
|
|
@@ -210,186 +210,6 @@ var ResizableTableContainerLegacy = /*#__PURE__*/_react.default.memo(function (_
|
|
|
210
210
|
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
|
|
211
211
|
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
|
|
212
212
|
}, [pluginInjectionApi]);
|
|
213
|
-
var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
|
|
214
|
-
var responsiveContainerWidth = 0;
|
|
215
|
-
var resizeHandleSpacing = 12;
|
|
216
|
-
var padding = getPadding(containerWidth);
|
|
217
|
-
// When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
|
|
218
|
-
// updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
|
|
219
|
-
// issues when viwport width is less than full width Editor's width. To detect avoid them
|
|
220
|
-
// we need to use lineLength to defined responsiveWidth instead of containerWidth
|
|
221
|
-
// (which does not get updated when Mac setting changes) in Full-width editor.
|
|
222
|
-
if (isFullWidthModeEnabled) {
|
|
223
|
-
// When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
|
|
224
|
-
// When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
|
|
225
|
-
// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
|
|
226
|
-
responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
|
|
227
|
-
|
|
228
|
-
// platform_editor_table_fw_numcol_overflow_fix:
|
|
229
|
-
// lineLength is undefined on first paint → width: NaN → wrapper expands to page
|
|
230
|
-
// width. rAF col-sizing then runs before the number-column padding and
|
|
231
|
-
// the final shrink, so column widths are locked in wrong.
|
|
232
|
-
// With the flag ON, if the value isn’t finite we fall back to gutterWidth
|
|
233
|
-
// for that first frame—no flash, no premature rAF.
|
|
234
|
-
//
|
|
235
|
-
// Type clean-up comes later:
|
|
236
|
-
// 1) ship this runtime guard (quick fix, no breakage);
|
|
237
|
-
// 2) TODO: widen lineLength to `number|undefined` and remove this block.
|
|
238
|
-
if ((0, _platformFeatureFlags.fg)('platform_editor_table_fw_numcol_overflow_fix')) {
|
|
239
|
-
if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
|
|
240
|
-
responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
|
|
241
|
-
}
|
|
242
|
-
}
|
|
243
|
-
} else if (isCommentEditor) {
|
|
244
|
-
responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
|
|
245
|
-
} else {
|
|
246
|
-
// 76 is currently an accepted padding value considering the spacing for resizer handle
|
|
247
|
-
// containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
|
|
248
|
-
// a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
|
|
249
|
-
// padding left = padding right = akEditorGutterPadding = 32
|
|
250
|
-
responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
|
|
251
|
-
}
|
|
252
|
-
// Fix for HOT-119925: Ensure table width is properly constrained and responsive
|
|
253
|
-
// For wide tables, ensure they don't exceed container width and can be scrolled
|
|
254
|
-
var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
|
|
255
|
-
|
|
256
|
-
// Ensure minimum width for usability while respecting container constraints
|
|
257
|
-
var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
|
|
258
|
-
if (!isResizing) {
|
|
259
|
-
tableWidthRef.current = width;
|
|
260
|
-
}
|
|
261
|
-
var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
|
|
262
|
-
var tableResizerProps = {
|
|
263
|
-
width: width,
|
|
264
|
-
maxWidth: maxResizerWidth,
|
|
265
|
-
containerWidth: containerWidth,
|
|
266
|
-
lineLength: lineLength,
|
|
267
|
-
updateWidth: updateWidth,
|
|
268
|
-
editorView: editorView,
|
|
269
|
-
getPos: getPos,
|
|
270
|
-
node: node,
|
|
271
|
-
tableRef: tableRef,
|
|
272
|
-
displayGuideline: displayGuideline,
|
|
273
|
-
attachAnalyticsEvent: attachAnalyticsEvent,
|
|
274
|
-
displayGapCursor: displayGapCursor,
|
|
275
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
276
|
-
isFullWidthModeEnabled: isFullWidthModeEnabled,
|
|
277
|
-
isTableScalingEnabled: isTableScalingEnabled,
|
|
278
|
-
isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
|
|
279
|
-
isWholeTableInDanger: isWholeTableInDanger,
|
|
280
|
-
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
281
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
282
|
-
onResizeStart: onResizeStart,
|
|
283
|
-
onResizeStop: onResizeStop,
|
|
284
|
-
isCommentEditor: isCommentEditor
|
|
285
|
-
};
|
|
286
|
-
var isLivePageViewMode = mode === 'view';
|
|
287
|
-
return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
|
|
288
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
289
|
-
node: node,
|
|
290
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
291
|
-
getPos: getPos,
|
|
292
|
-
editorView: editorView
|
|
293
|
-
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
294
|
-
style: {
|
|
295
|
-
width: tableWidthRef.current,
|
|
296
|
-
height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
|
|
297
|
-
position: isLivePageViewMode ? 'relative' : 'unset'
|
|
298
|
-
}
|
|
299
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
300
|
-
,
|
|
301
|
-
className: _types.TableCssClassName.TABLE_RESIZER_CONTAINER,
|
|
302
|
-
ref: containerRef
|
|
303
|
-
}, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, (0, _extends2.default)({}, tableResizerProps, {
|
|
304
|
-
disabled: isLivePageViewMode
|
|
305
|
-
}), /*#__PURE__*/_react.default.createElement(InnerContainer, {
|
|
306
|
-
className: className,
|
|
307
|
-
node: node
|
|
308
|
-
}, children))));
|
|
309
|
-
});
|
|
310
|
-
var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_ref5) {
|
|
311
|
-
var children = _ref5.children,
|
|
312
|
-
className = _ref5.className,
|
|
313
|
-
node = _ref5.node,
|
|
314
|
-
containerWidth = _ref5.containerWidth,
|
|
315
|
-
lineLength = _ref5.lineLength,
|
|
316
|
-
editorView = _ref5.editorView,
|
|
317
|
-
getPos = _ref5.getPos,
|
|
318
|
-
tableRef = _ref5.tableRef,
|
|
319
|
-
isResizing = _ref5.isResizing,
|
|
320
|
-
pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
321
|
-
tableWrapperHeight = _ref5.tableWrapperHeight,
|
|
322
|
-
isWholeTableInDanger = _ref5.isWholeTableInDanger,
|
|
323
|
-
isTableScalingEnabled = _ref5.isTableScalingEnabled,
|
|
324
|
-
isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
|
|
325
|
-
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
|
|
326
|
-
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
|
|
327
|
-
isCommentEditor = _ref5.isCommentEditor,
|
|
328
|
-
isChromelessEditor = _ref5.isChromelessEditor;
|
|
329
|
-
var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
|
|
330
|
-
var containerRef = (0, _react.useRef)(null);
|
|
331
|
-
var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
|
|
332
|
-
var _useState3 = (0, _react.useState)(false),
|
|
333
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
334
|
-
resizing = _useState4[0],
|
|
335
|
-
setIsResizing = _useState4[1];
|
|
336
|
-
var _useSharedPluginState3 = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['table', 'editorViewMode'], selector),
|
|
337
|
-
tableState = _useSharedPluginState3.tableState,
|
|
338
|
-
editorViewModeState = _useSharedPluginState3.editorViewModeState;
|
|
339
|
-
var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
|
|
340
|
-
var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
341
|
-
var updateContainerHeight = (0, _react.useCallback)(function (height) {
|
|
342
|
-
var _containerRef$current3;
|
|
343
|
-
// current StickyHeader State is not stable to be fetch.
|
|
344
|
-
// we need to update stickyHeader plugin to make sure state can be
|
|
345
|
-
// consistently fetch and refactor below
|
|
346
|
-
var stickyHeaders = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByClassName('pm-table-sticky');
|
|
347
|
-
if (!stickyHeaders || stickyHeaders.length < 1) {
|
|
348
|
-
// when starting to drag, we need to keep the original space,
|
|
349
|
-
// -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
|
|
350
|
-
// 1px is border width but collapse make it 0.5.
|
|
351
|
-
// -- When sticky header appear, we should add first row height but reduce
|
|
352
|
-
// collapsed border
|
|
353
|
-
return typeof height === 'number' ? "".concat(height + 40.5, "px") : 'auto';
|
|
354
|
-
} else {
|
|
355
|
-
var _containerRef$current4;
|
|
356
|
-
var stickyHeaderHeight = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
|
|
357
|
-
return typeof height === 'number' ? "".concat(height + stickyHeaderHeight + 39.5, "px") : 'auto';
|
|
358
|
-
}
|
|
359
|
-
}, []);
|
|
360
|
-
var onResizeStart = (0, _react.useCallback)(function () {
|
|
361
|
-
setIsResizing(true);
|
|
362
|
-
}, []);
|
|
363
|
-
var onResizeStop = (0, _react.useCallback)(function () {
|
|
364
|
-
setIsResizing(false);
|
|
365
|
-
}, []);
|
|
366
|
-
var updateWidth = (0, _react.useCallback)(function (width) {
|
|
367
|
-
if (!containerRef.current) {
|
|
368
|
-
return;
|
|
369
|
-
}
|
|
370
|
-
|
|
371
|
-
// make sure during resizing
|
|
372
|
-
// the pm-table-resizer-container width is the same as its child div resizer-item
|
|
373
|
-
// otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
|
|
374
|
-
// and cause the fabric-editor-popup-scroll-parent to overflow
|
|
375
|
-
if (containerRef.current.style.width !== "".concat(width, "px")) {
|
|
376
|
-
containerRef.current.style.width = "".concat(width, "px");
|
|
377
|
-
}
|
|
378
|
-
}, []);
|
|
379
|
-
var displayGuideline = (0, _react.useCallback)(function (guidelines) {
|
|
380
|
-
var _pluginInjectionApi$g3, _pluginInjectionApi$g4;
|
|
381
|
-
return (_pluginInjectionApi$g3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g4 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g4 === void 0 || (_pluginInjectionApi$g4 = _pluginInjectionApi$g4.actions) === null || _pluginInjectionApi$g4 === void 0 ? void 0 : _pluginInjectionApi$g4.displayGuideline(editorView)({
|
|
382
|
-
guidelines: guidelines
|
|
383
|
-
})) !== null && _pluginInjectionApi$g3 !== void 0 ? _pluginInjectionApi$g3 : false;
|
|
384
|
-
}, [pluginInjectionApi, editorView]);
|
|
385
|
-
var attachAnalyticsEvent = (0, _react.useCallback)(function (payload) {
|
|
386
|
-
var _pluginInjectionApi$a3;
|
|
387
|
-
return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent(payload);
|
|
388
|
-
}, [pluginInjectionApi]);
|
|
389
|
-
var displayGapCursor = (0, _react.useCallback)(function (toggle) {
|
|
390
|
-
var _pluginInjectionApi$c3, _pluginInjectionApi$c4, _pluginInjectionApi$s2;
|
|
391
|
-
return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
|
|
392
|
-
}, [pluginInjectionApi]);
|
|
393
213
|
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
394
214
|
var _useMemo = (0, _react.useMemo)(function () {
|
|
395
215
|
var responsiveContainerWidth = 0;
|
|
@@ -519,32 +339,28 @@ var ResizableTableContainerNext = /*#__PURE__*/_react.default.memo(function (_re
|
|
|
519
339
|
node: node
|
|
520
340
|
}, children))));
|
|
521
341
|
});
|
|
522
|
-
var
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
|
|
545
|
-
shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
|
|
546
|
-
isCommentEditor = _ref6.isCommentEditor,
|
|
547
|
-
isChromelessEditor = _ref6.isChromelessEditor;
|
|
342
|
+
var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
|
|
343
|
+
var children = _ref5.children,
|
|
344
|
+
node = _ref5.node,
|
|
345
|
+
className = _ref5.className,
|
|
346
|
+
_ref5$containerWidth = _ref5.containerWidth,
|
|
347
|
+
editorWidth = _ref5$containerWidth.width,
|
|
348
|
+
lineLength = _ref5$containerWidth.lineLength,
|
|
349
|
+
editorView = _ref5.editorView,
|
|
350
|
+
getPos = _ref5.getPos,
|
|
351
|
+
tableRef = _ref5.tableRef,
|
|
352
|
+
isNested = _ref5.isNested,
|
|
353
|
+
tableWrapperHeight = _ref5.tableWrapperHeight,
|
|
354
|
+
isResizing = _ref5.isResizing,
|
|
355
|
+
pluginInjectionApi = _ref5.pluginInjectionApi,
|
|
356
|
+
isWholeTableInDanger = _ref5.isWholeTableInDanger,
|
|
357
|
+
isTableResizingEnabled = _ref5.isTableResizingEnabled,
|
|
358
|
+
isTableScalingEnabled = _ref5.isTableScalingEnabled,
|
|
359
|
+
isTableWithFixedColumnWidthsOptionEnabled = _ref5.isTableWithFixedColumnWidthsOptionEnabled,
|
|
360
|
+
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
|
|
361
|
+
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
|
|
362
|
+
isCommentEditor = _ref5.isCommentEditor,
|
|
363
|
+
isChromelessEditor = _ref5.isChromelessEditor;
|
|
548
364
|
if (isTableResizingEnabled && !isNested) {
|
|
549
365
|
return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
|
|
550
366
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -577,7 +393,7 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
|
|
|
577
393
|
var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
578
394
|
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
|
|
579
395
|
var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
580
|
-
var resizableTableWidth =
|
|
396
|
+
var resizableTableWidth = isFullPageAppearance ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
|
|
581
397
|
return /*#__PURE__*/_react.default.createElement(InnerContainer, {
|
|
582
398
|
node: node
|
|
583
399
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -418,15 +418,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
418
418
|
}, [editorView, getPos, node, isCommentEditor, widthToWidest, isToolbarAIFCEnabled, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
|
|
419
419
|
var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
|
|
420
420
|
var newWidth = width + step;
|
|
421
|
-
if (
|
|
422
|
-
|
|
423
|
-
return;
|
|
424
|
-
}
|
|
425
|
-
} else {
|
|
426
|
-
// maxWidth when platform_editor_tables_scaling_css off is always a number
|
|
427
|
-
if (newWidth > maxWidth || newWidth < resizerMinWidth) {
|
|
428
|
-
return;
|
|
429
|
-
}
|
|
421
|
+
if (newWidth < resizerMinWidth) {
|
|
422
|
+
return;
|
|
430
423
|
}
|
|
431
424
|
handleResizeStop({
|
|
432
425
|
width: width,
|
|
@@ -437,7 +430,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
437
430
|
width: step,
|
|
438
431
|
height: 0
|
|
439
432
|
});
|
|
440
|
-
}, [width, handleResizeStop,
|
|
433
|
+
}, [width, handleResizeStop, resizerMinWidth]);
|
|
441
434
|
var handleEscape = (0, _react.useCallback)(function () {
|
|
442
435
|
editorView === null || editorView === void 0 || editorView.focus();
|
|
443
436
|
}, [editorView]);
|
|
@@ -20,7 +20,6 @@ var _model = require("@atlaskit/editor-prosemirror/model");
|
|
|
20
20
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
21
21
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
22
22
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
24
23
|
var _createPluginConfig = require("../pm-plugins/create-plugin-config");
|
|
25
24
|
var _pluginFactory = require("../pm-plugins/plugin-factory");
|
|
26
25
|
var _tableWidth = require("../pm-plugins/table-width");
|
|
@@ -149,7 +148,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
149
148
|
if (this.view.state.selection.visible) {
|
|
150
149
|
selectionBookmark = this.view.state.selection.getBookmark();
|
|
151
150
|
}
|
|
152
|
-
if (this.dom
|
|
151
|
+
if (this.dom) {
|
|
153
152
|
this.dom.setAttribute('data-ssr-placeholder', "table-nodeview-".concat(this.node.attrs.localId));
|
|
154
153
|
this.dom.setAttribute('data-ssr-placeholder-replace', "table-nodeview-".concat(this.node.attrs.localId));
|
|
155
154
|
}
|