@atlaskit/editor-plugin-table 7.25.14 → 7.25.15

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.15
+
+### Patch Changes
+
+- [`be687d5675114`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be687d5675114) -
+  [ux] Fixes a bug where scaled table viewed on a narrow screen loses scaling.
+- Updated dependencies
+
 ## 7.25.14
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -548,7 +548,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_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);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -571,14 +571,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = (0, _misc.getTableScalingPercent)(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = (0, _misc.getTableScalingPercent)(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -590,8 +594,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -620,7 +624,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -631,7 +635,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -718,7 +722,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -837,7 +841,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_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
       , {

package/dist/es2019/nodeviews/TableComponent.js

@@ -529,7 +529,7 @@ class TableComponent extends React.Component {
       // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
       !!((_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);
       if (force || !isResizing && shouldUpdateColgroup) {
-        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -552,14 +552,18 @@ class TableComponent extends React.Component {
           shouldScaleOnColgroupUpdate = true;
         }
         let scalePercent = 1;
-        if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-          scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-        } else {
-          scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-        }
-
-        // Request animation frame required for Firefox
         requestAnimationFrame(() => {
+          var _this$props$options8, _this$props$options9;
+          // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+          // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+          // inside of getTableScalingPercent returns 0.
+          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
+            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
+          } else {
+            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
+          }
+
+          // Request animation frame required for Firefox
           updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
         });
       }

package/dist/es2019/pm-plugins/table-resizing/utils/misc.js

@@ -82,7 +82,7 @@ export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalin
   var _tableRef$parentEleme;
   const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  const renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);

package/dist/esm/nodeviews/TableComponent.js

@@ -541,7 +541,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_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);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -564,14 +564,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = getTableScalingPercent(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             updateColgroup(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -583,8 +587,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -613,7 +617,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -624,7 +628,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -711,7 +715,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -830,7 +834,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.14",
+	"version": "7.25.15",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.3.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",

package/src/nodeviews/TableComponent.tsx

@@ -483,21 +483,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				}
 
 				let scalePercent = 1;
-				if (
-					!this.props.options?.isCommentEditor ||
-					(this.props.options?.isCommentEditor && tableNode.attrs.width)
-				) {
-					scalePercent = getTableScalingPercent(
-						tableNode,
-						this.table!,
-						shouldUseIncreasedScalingPercent,
-					);
-				} else {
-					scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
-				}
-
-				// Request animation frame required for Firefox
 				requestAnimationFrame(() => {
+					// Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+					// renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+					// inside of getTableScalingPercent returns 0.
+					if (
+						!this.props.options?.isCommentEditor ||
+						(this.props.options?.isCommentEditor && tableNode.attrs.width)
+					) {
+						scalePercent = getTableScalingPercent(
+							tableNode,
+							this.table!,
+							shouldUseIncreasedScalingPercent,
+						);
+					} else {
+						scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
+					}
+
+					// Request animation frame required for Firefox
 					updateColgroup(
 						resizeState,
 						this.table!,

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -135,7 +135,7 @@ export const getTableScalingPercent = (
 		: MAX_SCALING_PERCENT;
 
 	const tableWidth = getTableContainerElementWidth(table);
-	let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
+	const renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
 	// minus 1 here to avoid any 1px scroll in Firefox
 	let scalePercent = (renderWidth - 1) / tableWidth;
 	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);