@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 12.2.0
+
+### Minor Changes
+
+- [`021fd485e1f83`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/021fd485e1f83) -
+  fix table flicking issue on page load by improving table scailing and table resizer with css
+  instead of js
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.15
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -80,6 +80,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../../pragmatic-drag-and-drop/core/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/nodeviews/TableComponent.js

@@ -94,10 +94,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     var _this;
     (0, _classCallCheck2.default)(this, TableComponent);
     _this = _callSuper(this, TableComponent, [props]);
-    (0, _defineProperty3.default)(_this, "state", (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({
+    (0, _defineProperty3.default)(_this, "state", (0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)((0, _defineProperty3.default)({
       scroll: 0,
       parentWidth: undefined
-    }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined));
+    }, _types.ShadowEvent.SHOW_BEFORE_SHADOW, false), _types.ShadowEvent.SHOW_AFTER_SHADOW, false), "tableWrapperWidth", undefined), "tableWrapperHeight", undefined), "windowResized", false));
     (0, _defineProperty3.default)(_this, "holdCompleted", false);
     (0, _defineProperty3.default)(_this, "dispatchEventName", "tableResized-".concat(generateUniqueTableId()));
     (0, _defineProperty3.default)(_this, "handleMouseOut", function (event) {
@@ -334,6 +334,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         parentWidth: parentWidth
       });
     });
+    // This is a new handler for window resize events that sets the windowResized state immediately
+    // This is needed to update colgroup on window resize, to enforce the table scaling
+    (0, _defineProperty3.default)(_this, "handleWindowResizeNew", function () {
+      // Set resizing to true immediately
+      if (!_this.state.windowResized) {
+        _this.setState({
+          windowResized: true
+        });
+      }
+    });
     (0, _defineProperty3.default)(_this, "getParentNodeWidth", function () {
       var _this$props6 = _this.props,
         getPos = _this$props6.getPos,
@@ -355,11 +365,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)(_this, "tableNodeLayoutSize", function (node, containerWidth, options) {
       return (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
+    (0, _defineProperty3.default)(_this, "shouldUpdateColgroup", function (params) {
+      var _this$props$options, _this$props$options2;
+      var isWindowResized = params.isWindowResized,
+        isWidthChanged = params.isWidthChanged,
+        isTableWidthChanged = params.isTableWidthChanged,
+        isColumnsDistributed = params.isColumnsDistributed,
+        isTableResizedFullWidth = params.isTableResizedFullWidth,
+        isTableDisplayModeChanged = params.isTableDisplayModeChanged,
+        isNumberColumnChanged = params.isNumberColumnChanged,
+        isNumberOfColumnsChanged = params.isNumberOfColumnsChanged,
+        isFullWidthModeAndLineLengthChanged = params.isFullWidthModeAndLineLengthChanged;
+      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);
+      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && isFullPageEditor) {
+        return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
+      }
+      return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
+    });
     (0, _defineProperty3.default)(_this, "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
     (0, _defineProperty3.default)(_this, "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
     (0, _defineProperty3.default)(_this, "handleScrollDebounced", (0, _rafSchd.default)(_this.handleScroll));
     (0, _defineProperty3.default)(_this, "handleAutoSizeDebounced", (0, _rafSchd.default)(_this.handleAutoSize));
     (0, _defineProperty3.default)(_this, "handleWindowResizeDebounced", (0, _rafSchd.default)(_this.handleWindowResize));
+    (0, _defineProperty3.default)(_this, "handleWindowResizeNewDebounced", (0, _rafSchd.default)(_this.handleWindowResizeNew));
     (0, _defineProperty3.default)(_this, "updateShadowStateDebounced", (0, _rafSchd.default)(_this.updateShadowState));
     var _options = props.options,
       _containerWidth = props.containerWidth,
@@ -465,11 +493,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
         _getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
-      if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
-        this.handleColgroupUpdates(true);
-      }
-      if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
-        this.handleColgroupUpdates(true);
+      if (!(0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+        if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
+          this.handleColgroupUpdates(true);
+        }
+        if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
+          this.handleColgroupUpdates(true);
+        }
       }
       if (this.wrapper) {
         this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
@@ -521,6 +551,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
           window.addEventListener('resize', this.handleWindowResizeDebounced);
         }
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.addEventListener('resize', this.handleWindowResizeNewDebounced);
         this.handleTableResizingDebounced();
       }
       var currentStickyState = _pluginKey.pluginKey.getState(this.props.view.state);
@@ -568,11 +600,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!allowTableResizing) {
         this.handleWindowResizeDebounced.cancel();
       }
+      this.handleWindowResizeNewDebounced.cancel();
       if (!allowTableResizing && allowColumnResizing) {
         // Ignored via go/ees005
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
+      if (allowColumnResizing) {
+        // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+        window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
+      }
 
       // Ignored via go/ees005
       // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
@@ -662,22 +699,32 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerLineLength = containerWidth.lineLength;
       var isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
       var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && (0, _platformFeatureFlags.fg)('platform_editor_table_overflow_in_full_width_fix');
-      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged;
+      var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized;
       if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
-        var _this$containerWidth2, _this$props$options, _this$props$options2, _this$props$options3;
+        var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
         var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
         var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
         var isTableResized = (0, _colgroup.hasTableBeenResized)(tableNode);
         var isColumnsDistributed = wasTableResized && !isTableResized;
         var isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-        var shouldUpdateColgroup = isWidthChanged || isColumnsDistributed || isTableResizedFullWidth || isTableWidthChanged || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || isFullWidthModeAndLineLengthChanged;
+        var shouldUpdateColgroup = this.shouldUpdateColgroup({
+          isWindowResized: this.state.windowResized,
+          isWidthChanged: isWidthChanged,
+          isTableWidthChanged: isTableWidthChanged,
+          isColumnsDistributed: isColumnsDistributed,
+          isTableResizedFullWidth: isTableResizedFullWidth,
+          isTableDisplayModeChanged: isTableDisplayModeChanged,
+          isNumberColumnChanged: isNumberColumnChanged,
+          isNumberOfColumnsChanged: isNumberOfColumnsChanged,
+          isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged
+        });
         var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
           _getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
-        var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
+        var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
+        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);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
+          var _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
           var resizeState = (0, _resizeState.getResizeState)({
             minWidth: _consts.COLUMN_MIN_WIDTH,
             // When numbered column enabled, we need to subtract the width of the numbered column
@@ -688,16 +735,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             domAtPos: view.domAtPos.bind(view),
             isTableScalingEnabled: true,
             shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
-            isCommentEditor: !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isCommentEditor)
+            isCommentEditor: !!((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isCommentEditor)
           });
           var shouldScaleOnColgroupUpdate = false;
-          if ((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
+          if ((_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
             shouldScaleOnColgroupUpdate = true;
           }
           if (isTableScalingWithFixedColumnWidthsOptionEnabled && tableNode.attrs.displayMode !== 'fixed') {
             shouldScaleOnColgroupUpdate = true;
           }
-          if ((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isTableScalingEnabled && (_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isCommentEditor) {
+          if ((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isTableScalingEnabled && (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
@@ -746,8 +793,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options8,
-        _this$props$options9,
+      var _this$props$options0,
+        _this$props$options1,
         _this$wrapper,
         _this5 = this;
       var _this$props1 = this.props,
@@ -777,18 +824,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!isTableScalingEnabled && !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
       }
+      if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && this.state.windowResized) {
+        shouldHandleColgroupUpdates = true;
+      }
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
+      if ((_this$props$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -878,7 +928,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this6 = this,
-        _this$props$options0;
+        _this$props$options10;
       var _this$props10 = this.props,
         view = _this$props10.view,
         getNode = _this$props10.getNode,
@@ -999,7 +1049,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
         _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag8 === void 0 ? false : _getEditorFeatureFlag8;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options0 = this.props.options) !== null && _this$props$options0 !== void 0 && _this$props$options0.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
@@ -1017,6 +1067,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableWrapperHeight: this.state.tableWrapperHeight,
         isTableResizingEnabled: allowTableResizing,
         isResizing: isResizing,
+        isWindowResized: this.state.windowResized,
         isTableScalingEnabled: isTableScalingEnabled,
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,