@atlaskit/editor-plugin-table 42.0.2 → 42.1.0

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.
Files changed (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/cjs/nodeviews/TableComponent.js +31 -15
  3. package/dist/cjs/pm-plugins/view-mode-sort/utils.js +2 -4
  4. package/dist/es2019/nodeviews/TableComponent.js +30 -15
  5. package/dist/es2019/pm-plugins/view-mode-sort/utils.js +3 -5
  6. package/dist/esm/nodeviews/TableComponent.js +31 -15
  7. package/dist/esm/pm-plugins/view-mode-sort/utils.js +2 -4
  8. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 42.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`5eff440523b45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5eff440523b45) -
8
+ Rescale full-page tables with measured column widths when the editor container width changes
9
+ without a window resize (for example, a side panel opening), behind
10
+ platform_editor_table_scale_on_container_resize
11
+
12
+ ## 42.0.3
13
+
14
+ ### Patch Changes
15
+
16
+ - [`4cdaf1f75d6ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4cdaf1f75d6ad) -
17
+ Use const for stable local bindings
18
+ - Updated dependencies
19
+
3
20
  ## 42.0.2
4
21
 
5
22
  ### Patch Changes
package/dist/cjs/nodeviews/TableComponent.js CHANGED
@@ -61,6 +61,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
61
61
  // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
62
62
  var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
63
63
  var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
64
+ var MEASURED_COLUMN_WIDTH = /^[\.0-9]+px$/;
64
65
  // eslint-disable-next-line @repo/internal/react/no-class-components
65
66
  var TableComponent = /*#__PURE__*/function (_React$Component) {
66
67
  function TableComponent(props) {
@@ -336,6 +337,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
336
337
  (0, _defineProperty2.default)(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
337
338
  return (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
338
339
  });
340
+ /**
341
+ * Full-page tables scale with their container through CSS `calc()` column widths. Once a
342
+ * colgroup has been rewritten with measured px widths (column resize, collab, column add or
343
+ * delete, window resize), CSS can no longer scale it and the colgroup must be updated in JS.
344
+ */
345
+ (0, _defineProperty2.default)(_this, "hasMeasuredColumnWidths", function () {
346
+ var _this$table;
347
+ var firstColumn = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(':scope > colgroup > col');
348
+ return !!firstColumn && MEASURED_COLUMN_WIDTH.test(firstColumn.style.width);
349
+ });
339
350
  (0, _defineProperty2.default)(_this, "shouldUpdateColgroup", function (params) {
340
351
  var _this$props$options, _this$props$options2;
341
352
  var isWindowResized = params.isWindowResized,
@@ -429,9 +440,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
429
440
  }, {
430
441
  key: "initialiseEventListenersAfterMount",
431
442
  value: function initialiseEventListenersAfterMount() {
432
- var _this$table,
433
- _this$table2,
443
+ var _this$table2,
434
444
  _this$table3,
445
+ _this$table4,
435
446
  _this3 = this;
436
447
  var _this$props6 = this.props,
437
448
  allowColumnResizing = _this$props6.allowColumnResizing,
@@ -444,15 +455,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
444
455
 
445
456
  // Ignored via go/ees005
446
457
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
447
- this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
458
+ this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseenter', this.handleMouseEnter);
448
459
 
449
460
  // Ignored via go/ees005
450
461
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
451
- this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
462
+ this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseout', this.handleMouseOut);
452
463
 
453
464
  // Ignored via go/ees005
454
465
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
455
- this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
466
+ this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.addEventListener('mouseover', this.handleMouseOver);
456
467
  if (this.wrapper) {
457
468
  this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
458
469
  var _iterator2 = _createForOfIteratorHelper(entries),
@@ -511,7 +522,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
511
522
  }, {
512
523
  key: "componentWillUnmount",
513
524
  value: function componentWillUnmount() {
514
- var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
525
+ var _this$resizeObserver, _this$wrapperReisizeO, _this$table5, _this$table6, _this$table7;
515
526
  var _this$props7 = this.props,
516
527
  allowColumnResizing = _this$props7.allowColumnResizing,
517
528
  allowTableResizing = _this$props7.allowTableResizing,
@@ -559,15 +570,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
559
570
 
560
571
  // Ignored via go/ees005
561
572
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
562
- this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
573
+ this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseenter', this.handleMouseEnter);
563
574
 
564
575
  // Ignored via go/ees005
565
576
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
566
- this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
577
+ this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseout', this.handleMouseOut);
567
578
 
568
579
  // Ignored via go/ees005
569
580
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
570
- this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseover', this.handleMouseOver);
581
+ this === null || this === void 0 || (_this$table7 = this.table) === null || _this$table7 === void 0 || _this$table7.removeEventListener('mouseover', this.handleMouseOver);
571
582
 
572
583
  // Ignored via go/ees005
573
584
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -605,6 +616,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
605
616
  key: "handleColgroupUpdates",
606
617
  value: function handleColgroupUpdates() {
607
618
  var _this$containerWidth,
619
+ _this$containerWidth2,
608
620
  _this4 = this;
609
621
  var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
610
622
  var _this$props9 = this.props,
@@ -641,16 +653,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
641
653
  containerLineLength = containerWidth.lineLength;
642
654
  var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
643
655
  var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged;
644
- var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
656
+ var previousContainerWidth = (_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width;
657
+ var isFullPageEditor = !(options !== null && options !== void 0 && options.isCommentEditor) && !(options !== null && options !== void 0 && options.isChromelessEditor);
658
+ var isContainerResized = (0, _fg.fg)('platform_editor_table_scale_on_container_resize') && isFullPageEditor && !!previousContainerWidth && previousContainerWidth !== containerWidthValue && this.hasMeasuredColumnWidths();
659
+ var isWindowOrContainerResized = this.state.windowResized || isContainerResized;
660
+ var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || isWindowOrContainerResized;
645
661
  if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
646
- var _this$containerWidth2, _this$props0, _this$props$options3, _this$props$options4, _this$props$options5;
647
- var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
662
+ var _this$containerWidth3, _this$props0, _this$props$options3, _this$props$options4, _this$props$options5;
663
+ var isWidthChanged = ((_this$containerWidth3 = this.containerWidth) === null || _this$containerWidth3 === void 0 ? void 0 : _this$containerWidth3.width) !== containerWidthValue;
648
664
  var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
649
665
  var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
650
666
  var isColumnsDistributed = wasTableResized && !isTableResized;
651
667
  var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
652
668
  var shouldUpdateColgroup = this.shouldUpdateColgroup({
653
- isWindowResized: this.state.windowResized,
669
+ isWindowResized: isWindowOrContainerResized,
654
670
  isWidthChanged: isWidthChanged,
655
671
  isTableWidthChanged: isTableWidthChanged,
656
672
  isColumnsDistributed: isColumnsDistributed,
@@ -779,14 +795,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
779
795
  var view = this.props.view;
780
796
  var shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
781
797
  if (shouldRecreateResizeCols) {
782
- var _this$table7, _this$props$options10, _this$props$options11;
798
+ var _this$table8, _this$props$options10, _this$props$options11;
783
799
  var start = getPos() || 0;
784
800
  var depth = view.state.doc.resolve(start).depth;
785
801
  shouldScale = depth === 0 && shouldScale;
786
802
  (0, _colgroup.insertColgroupFromNode)(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
787
803
 
788
804
  // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
789
- if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !(0, _contentMode.isTableInContentMode)({
805
+ if ((_this$table8 = this.table) !== null && _this$table8 !== void 0 && _this$table8.hasAttribute('data-initial-width-mode') && !(0, _contentMode.isTableInContentMode)({
790
806
  tableNode: currentTable,
791
807
  isSupported: (0, _isContentModeSupported.isContentModeSupported)({
792
808
  allowColumnResizing: !!allowColumnResizing,
package/dist/cjs/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -75,13 +75,11 @@ var toggleSort = exports.toggleSort = function toggleSort(view, event, pluginSta
75
75
  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 || (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
76
76
  return;
77
77
  }
78
-
79
- // Ignored via go/ees005
80
- // eslint-disable-next-line prefer-const
81
78
  var _ref = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {},
82
79
  index = _ref.index,
83
- direction = _ref.direction,
80
+ initialDirection = _ref.direction,
84
81
  oldOrder = _ref.order;
82
+ var direction = initialDirection;
85
83
 
86
84
  // Unsort if there was already a sort
87
85
  if (direction !== _types.SortOrder.NO_ORDER && oldOrder !== undefined) {
package/dist/es2019/nodeviews/TableComponent.js CHANGED
@@ -42,6 +42,7 @@ import { TableStickyScrollbar } from './TableStickyScrollbar';
42
42
  // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
43
43
  const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
44
44
  const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
45
+ const MEASURED_COLUMN_WIDTH = /^[\d.]+px$/u;
45
46
  // eslint-disable-next-line @repo/internal/react/no-class-components
46
47
  class TableComponent extends React.Component {
47
48
  constructor(props) {
@@ -325,6 +326,16 @@ class TableComponent extends React.Component {
325
326
  });
326
327
  });
327
328
  _defineProperty(this, "tableNodeLayoutSize", (node, containerWidth, options) => getLayoutSize(node.attrs.layout, containerWidth || this.props.containerWidth.width, options || this.props.options || {}));
329
+ /**
330
+ * Full-page tables scale with their container through CSS `calc()` column widths. Once a
331
+ * colgroup has been rewritten with measured px widths (column resize, collab, column add or
332
+ * delete, window resize), CSS can no longer scale it and the colgroup must be updated in JS.
333
+ */
334
+ _defineProperty(this, "hasMeasuredColumnWidths", () => {
335
+ var _this$table;
336
+ const firstColumn = (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(':scope > colgroup > col');
337
+ return !!firstColumn && MEASURED_COLUMN_WIDTH.test(firstColumn.style.width);
338
+ });
328
339
  _defineProperty(this, "shouldUpdateColgroup", params => {
329
340
  var _this$props$options, _this$props$options2;
330
341
  const {
@@ -405,7 +416,7 @@ class TableComponent extends React.Component {
405
416
  this.dispatchTableRefUpdate();
406
417
  }
407
418
  initialiseEventListenersAfterMount() {
408
- var _this$table, _this$table2, _this$table3;
419
+ var _this$table2, _this$table3, _this$table4;
409
420
  const {
410
421
  allowColumnResizing,
411
422
  allowTableResizing,
@@ -418,15 +429,15 @@ class TableComponent extends React.Component {
418
429
 
419
430
  // Ignored via go/ees005
420
431
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
421
- this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
432
+ this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseenter', this.handleMouseEnter);
422
433
 
423
434
  // Ignored via go/ees005
424
435
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
425
- this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
436
+ this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseout', this.handleMouseOut);
426
437
 
427
438
  // Ignored via go/ees005
428
439
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
429
- this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
440
+ this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.addEventListener('mouseover', this.handleMouseOver);
430
441
  if (this.wrapper) {
431
442
  this.wrapperReisizeObserver = new ResizeObserver(entries => {
432
443
  for (const entry of entries) {
@@ -474,7 +485,7 @@ class TableComponent extends React.Component {
474
485
  eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
475
486
  }
476
487
  componentWillUnmount() {
477
- var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
488
+ var _this$resizeObserver, _this$wrapperReisizeO, _this$table5, _this$table6, _this$table7;
478
489
  const {
479
490
  allowColumnResizing,
480
491
  allowTableResizing,
@@ -523,15 +534,15 @@ class TableComponent extends React.Component {
523
534
 
524
535
  // Ignored via go/ees005
525
536
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
526
- this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
537
+ this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseenter', this.handleMouseEnter);
527
538
 
528
539
  // Ignored via go/ees005
529
540
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
530
- this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseout', this.handleMouseOut);
541
+ this === null || this === void 0 ? void 0 : (_this$table6 = this.table) === null || _this$table6 === void 0 ? void 0 : _this$table6.removeEventListener('mouseout', this.handleMouseOut);
531
542
 
532
543
  // Ignored via go/ees005
533
544
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
534
- this === null || this === void 0 ? void 0 : (_this$table6 = this.table) === null || _this$table6 === void 0 ? void 0 : _this$table6.removeEventListener('mouseover', this.handleMouseOver);
545
+ this === null || this === void 0 ? void 0 : (_this$table7 = this.table) === null || _this$table7 === void 0 ? void 0 : _this$table7.removeEventListener('mouseover', this.handleMouseOver);
535
546
 
536
547
  // Ignored via go/ees005
537
548
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -564,7 +575,7 @@ class TableComponent extends React.Component {
564
575
  }
565
576
  }
566
577
  handleColgroupUpdates(force = false) {
567
- var _this$containerWidth;
578
+ var _this$containerWidth, _this$containerWidth2;
568
579
  const {
569
580
  getNode,
570
581
  containerWidth,
@@ -602,16 +613,20 @@ class TableComponent extends React.Component {
602
613
  } = containerWidth;
603
614
  const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
604
615
  const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged;
605
- const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
616
+ const previousContainerWidth = (_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width;
617
+ const isFullPageEditor = !(options !== null && options !== void 0 && options.isCommentEditor) && !(options !== null && options !== void 0 && options.isChromelessEditor);
618
+ const isContainerResized = fg('platform_editor_table_scale_on_container_resize') && isFullPageEditor && !!previousContainerWidth && previousContainerWidth !== containerWidthValue && this.hasMeasuredColumnWidths();
619
+ const isWindowOrContainerResized = this.state.windowResized || isContainerResized;
620
+ const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || isWindowOrContainerResized;
606
621
  if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
607
- var _this$containerWidth2, _this$props, _this$props$options3, _this$props$options4, _this$props$options5;
608
- const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
622
+ var _this$containerWidth3, _this$props, _this$props$options3, _this$props$options4, _this$props$options5;
623
+ const isWidthChanged = ((_this$containerWidth3 = this.containerWidth) === null || _this$containerWidth3 === void 0 ? void 0 : _this$containerWidth3.width) !== containerWidthValue;
609
624
  const wasTableResized = hasTableBeenResized(this.node);
610
625
  const isTableResized = hasTableBeenResized(tableNode);
611
626
  const isColumnsDistributed = wasTableResized && !isTableResized;
612
627
  const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
613
628
  const shouldUpdateColgroup = this.shouldUpdateColgroup({
614
- isWindowResized: this.state.windowResized,
629
+ isWindowResized: isWindowOrContainerResized,
615
630
  isWidthChanged,
616
631
  isTableWidthChanged,
617
632
  isColumnsDistributed,
@@ -742,14 +757,14 @@ class TableComponent extends React.Component {
742
757
  } = this.props;
743
758
  const shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
744
759
  if (shouldRecreateResizeCols) {
745
- var _this$table7, _this$props$options12, _this$props$options13;
760
+ var _this$table8, _this$props$options12, _this$props$options13;
746
761
  const start = getPos() || 0;
747
762
  const depth = view.state.doc.resolve(start).depth;
748
763
  shouldScale = depth === 0 && shouldScale;
749
764
  insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
750
765
 
751
766
  // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
752
- if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
767
+ if ((_this$table8 = this.table) !== null && _this$table8 !== void 0 && _this$table8.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
753
768
  tableNode: currentTable,
754
769
  isSupported: isContentModeSupported({
755
770
  allowColumnResizing: !!allowColumnResizing,
package/dist/es2019/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -60,14 +60,12 @@ export const toggleSort = (view, event, pluginState) => {
60
60
  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 ? void 0 : (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
61
61
  return;
62
62
  }
63
-
64
- // Ignored via go/ees005
65
- // eslint-disable-next-line prefer-const
66
- let {
63
+ const {
67
64
  index,
68
- direction,
65
+ direction: initialDirection,
69
66
  order: oldOrder
70
67
  } = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {};
68
+ let direction = initialDirection;
71
69
 
72
70
  // Unsort if there was already a sort
73
71
  if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
package/dist/esm/nodeviews/TableComponent.js CHANGED
@@ -55,6 +55,7 @@ import { TableStickyScrollbar } from './TableStickyScrollbar';
55
55
  // Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
56
56
  var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
57
57
  var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
58
+ var MEASURED_COLUMN_WIDTH = /^[\.0-9]+px$/;
58
59
  // eslint-disable-next-line @repo/internal/react/no-class-components
59
60
  var TableComponent = /*#__PURE__*/function (_React$Component) {
60
61
  function TableComponent(props) {
@@ -330,6 +331,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
330
331
  _defineProperty(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
331
332
  return getLayoutSize(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
332
333
  });
334
+ /**
335
+ * Full-page tables scale with their container through CSS `calc()` column widths. Once a
336
+ * colgroup has been rewritten with measured px widths (column resize, collab, column add or
337
+ * delete, window resize), CSS can no longer scale it and the colgroup must be updated in JS.
338
+ */
339
+ _defineProperty(_this, "hasMeasuredColumnWidths", function () {
340
+ var _this$table;
341
+ var firstColumn = (_this$table = _this.table) === null || _this$table === void 0 ? void 0 : _this$table.querySelector(':scope > colgroup > col');
342
+ return !!firstColumn && MEASURED_COLUMN_WIDTH.test(firstColumn.style.width);
343
+ });
333
344
  _defineProperty(_this, "shouldUpdateColgroup", function (params) {
334
345
  var _this$props$options, _this$props$options2;
335
346
  var isWindowResized = params.isWindowResized,
@@ -423,9 +434,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
423
434
  }, {
424
435
  key: "initialiseEventListenersAfterMount",
425
436
  value: function initialiseEventListenersAfterMount() {
426
- var _this$table,
427
- _this$table2,
437
+ var _this$table2,
428
438
  _this$table3,
439
+ _this$table4,
429
440
  _this3 = this;
430
441
  var _this$props6 = this.props,
431
442
  allowColumnResizing = _this$props6.allowColumnResizing,
@@ -438,15 +449,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
438
449
 
439
450
  // Ignored via go/ees005
440
451
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
441
- this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
452
+ this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseenter', this.handleMouseEnter);
442
453
 
443
454
  // Ignored via go/ees005
444
455
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
445
- this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
456
+ this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseout', this.handleMouseOut);
446
457
 
447
458
  // Ignored via go/ees005
448
459
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
449
- this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
460
+ this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.addEventListener('mouseover', this.handleMouseOver);
450
461
  if (this.wrapper) {
451
462
  this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
452
463
  var _iterator2 = _createForOfIteratorHelper(entries),
@@ -505,7 +516,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
505
516
  }, {
506
517
  key: "componentWillUnmount",
507
518
  value: function componentWillUnmount() {
508
- var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
519
+ var _this$resizeObserver, _this$wrapperReisizeO, _this$table5, _this$table6, _this$table7;
509
520
  var _this$props7 = this.props,
510
521
  allowColumnResizing = _this$props7.allowColumnResizing,
511
522
  allowTableResizing = _this$props7.allowTableResizing,
@@ -553,15 +564,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
553
564
 
554
565
  // Ignored via go/ees005
555
566
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
556
- this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
567
+ this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseenter', this.handleMouseEnter);
557
568
 
558
569
  // Ignored via go/ees005
559
570
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
560
- this === null || this === void 0 || (_this$table5 = this.table) === null || _this$table5 === void 0 || _this$table5.removeEventListener('mouseout', this.handleMouseOut);
571
+ this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseout', this.handleMouseOut);
561
572
 
562
573
  // Ignored via go/ees005
563
574
  // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
564
- this === null || this === void 0 || (_this$table6 = this.table) === null || _this$table6 === void 0 || _this$table6.removeEventListener('mouseover', this.handleMouseOver);
575
+ this === null || this === void 0 || (_this$table7 = this.table) === null || _this$table7 === void 0 || _this$table7.removeEventListener('mouseover', this.handleMouseOver);
565
576
 
566
577
  // Ignored via go/ees005
567
578
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -599,6 +610,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
599
610
  key: "handleColgroupUpdates",
600
611
  value: function handleColgroupUpdates() {
601
612
  var _this$containerWidth,
613
+ _this$containerWidth2,
602
614
  _this4 = this;
603
615
  var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
604
616
  var _this$props9 = this.props,
@@ -635,16 +647,20 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
635
647
  containerLineLength = containerWidth.lineLength;
636
648
  var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
637
649
  var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged;
638
- var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
650
+ var previousContainerWidth = (_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width;
651
+ var isFullPageEditor = !(options !== null && options !== void 0 && options.isCommentEditor) && !(options !== null && options !== void 0 && options.isChromelessEditor);
652
+ var isContainerResized = fg('platform_editor_table_scale_on_container_resize') && isFullPageEditor && !!previousContainerWidth && previousContainerWidth !== containerWidthValue && this.hasMeasuredColumnWidths();
653
+ var isWindowOrContainerResized = this.state.windowResized || isContainerResized;
654
+ var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || isWindowOrContainerResized;
639
655
  if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
640
- var _this$containerWidth2, _this$props0, _this$props$options3, _this$props$options4, _this$props$options5;
641
- var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
656
+ var _this$containerWidth3, _this$props0, _this$props$options3, _this$props$options4, _this$props$options5;
657
+ var isWidthChanged = ((_this$containerWidth3 = this.containerWidth) === null || _this$containerWidth3 === void 0 ? void 0 : _this$containerWidth3.width) !== containerWidthValue;
642
658
  var wasTableResized = hasTableBeenResized(this.node);
643
659
  var isTableResized = hasTableBeenResized(tableNode);
644
660
  var isColumnsDistributed = wasTableResized && !isTableResized;
645
661
  var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
646
662
  var shouldUpdateColgroup = this.shouldUpdateColgroup({
647
- isWindowResized: this.state.windowResized,
663
+ isWindowResized: isWindowOrContainerResized,
648
664
  isWidthChanged: isWidthChanged,
649
665
  isTableWidthChanged: isTableWidthChanged,
650
666
  isColumnsDistributed: isColumnsDistributed,
@@ -773,14 +789,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
773
789
  var view = this.props.view;
774
790
  var shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
775
791
  if (shouldRecreateResizeCols) {
776
- var _this$table7, _this$props$options10, _this$props$options11;
792
+ var _this$table8, _this$props$options10, _this$props$options11;
777
793
  var start = getPos() || 0;
778
794
  var depth = view.state.doc.resolve(start).depth;
779
795
  shouldScale = depth === 0 && shouldScale;
780
796
  insertColgroupFromNode(this.table, currentTable, shouldScale, undefined, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
781
797
 
782
798
  // Deferred from setDomAttrs — remove only once colgroup is updated and table has left content mode.
783
- if ((_this$table7 = this.table) !== null && _this$table7 !== void 0 && _this$table7.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
799
+ if ((_this$table8 = this.table) !== null && _this$table8 !== void 0 && _this$table8.hasAttribute('data-initial-width-mode') && !isTableInContentMode({
784
800
  tableNode: currentTable,
785
801
  isSupported: isContentModeSupported({
786
802
  allowColumnResizing: !!allowColumnResizing,
package/dist/esm/pm-plugins/view-mode-sort/utils.js CHANGED
@@ -68,13 +68,11 @@ export var toggleSort = function toggleSort(view, event, pluginState) {
68
68
  if (!tableId || !tableNode || (tableNode === null || tableNode === void 0 || (_tableNode$type = tableNode.type) === null || _tableNode$type === void 0 ? void 0 : _tableNode$type.name) !== 'table') {
69
69
  return;
70
70
  }
71
-
72
- // Ignored via go/ees005
73
- // eslint-disable-next-line prefer-const
74
71
  var _ref = (pluginState === null || pluginState === void 0 ? void 0 : pluginState[tableId]) || {},
75
72
  index = _ref.index,
76
- direction = _ref.direction,
73
+ initialDirection = _ref.direction,
77
74
  oldOrder = _ref.order;
75
+ var direction = initialDirection;
78
76
 
79
77
  // Unsort if there was already a sort
80
78
  if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "42.0.2",
3
+ "version": "42.1.0",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.2.0",
54
54
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^3.0.0",
55
55
  "@atlaskit/primitives": "^22.6.0",
56
- "@atlaskit/tmp-editor-statsig": "^248.0.0",
56
+ "@atlaskit/tmp-editor-statsig": "^248.1.0",
57
57
  "@atlaskit/toggle": "^17.3.0",
58
58
  "@atlaskit/tokens": "^20.8.0",
59
59
  "@atlaskit/tooltip": "^24.4.0",
@@ -68,7 +68,7 @@
68
68
  "uuid": "^11.1.1"
69
69
  },
70
70
  "peerDependencies": {
71
- "@atlaskit/editor-common": "^134.1.0",
71
+ "@atlaskit/editor-common": "^134.2.0",
72
72
  "react": "^18.2.0 || ^19.2.0",
73
73
  "react-dom": "^18.2.0 || ^19.2.0",
74
74
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -99,6 +99,9 @@
99
99
  "platform_editor_table_view_mode_scaling_fix": {
100
100
  "type": "boolean"
101
101
  },
102
+ "platform_editor_table_scale_on_container_resize": {
103
+ "type": "boolean"
104
+ },
102
105
  "platform-dst-top-layer-tooltip": {
103
106
  "type": "boolean"
104
107
  }