@atlaskit/editor-plugin-table 7.13.1 → 7.13.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.13.2
+
+### Patch Changes
+
+-   [#97570](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/97570)
+    [`d53d6981c3ce`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d53d6981c3ce) -
+    Clean up resizing logic and stop growing table container when overflowed
+
 ## 7.13.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/table-resizing/event-handlers.js

@@ -141,11 +141,14 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
         if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = (0, _transforms.updateColumnWidths)(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -215,7 +218,11 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+      (0, _utils3.resizeColumnAndTable)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     (0, _utils3.updateControls)()(state);
   }
   window.addEventListener('mouseup', finish);

package/dist/cjs/pm-plugins/table-resizing/utils/index.js

@@ -207,6 +207,12 @@ Object.defineProperty(exports, "resizeColumn", {
     return _resizeColumn.resizeColumn;
   }
 });
+Object.defineProperty(exports, "resizeColumnAndTable", {
+  enumerable: true,
+  get: function get() {
+    return _resizeColumn.resizeColumnAndTable;
+  }
+});
 Object.defineProperty(exports, "scale", {
   enumerable: true,
   get: function get() {

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

@@ -7,7 +7,7 @@ exports.currentColWidth = currentColWidth;
 exports.domCellAround = domCellAround;
 exports.getDefaultLayoutMaxWidth = getDefaultLayoutMaxWidth;
 exports.getLayoutSize = getLayoutSize;
-exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = void 0;
+exports.getTableScalingPercent = exports.getTableMaxWidth = exports.getTableElementWidth = exports.getTableContainerElementWidth = exports.getStaticTableScalingPercent = void 0;
 exports.pointsAtCell = pointsAtCell;
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
@@ -108,4 +108,11 @@ var getTableScalingPercent = exports.getTableScalingPercent = function getTableS
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+var getStaticTableScalingPercent = exports.getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - _consts.MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

package/dist/cjs/pm-plugins/table-resizing/utils/resize-column.js

@@ -4,9 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resizeColumn = void 0;
+exports.resizeColumnAndTable = exports.resizeColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../../types");
 var _misc = require("./misc");
 var _resizeLogic = require("./resize-logic");
@@ -15,47 +14,65 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // Resize a given column by an amount from the current state
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false) : (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return _objectSpread(_objectSpread({}, newState), {}, {
-      tableWidth: resizeState.tableWidth + delta
-    });
-  }
+  var newState = resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
+
+// try not scale table during resize
+var resizeColumnAndTable = exports.resizeColumnAndTable = function resizeColumnAndTable(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
+  var _tableRef$closest;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  // TODO: can we use document state, and apply scaling factor?
+  var tableWidth = tableRef.clientWidth;
+  var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  var resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  var newState = (0, _resizeLogic.updateAffectedColumn)(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return _objectSpread(_objectSpread({}, newState), {}, {
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  });
+};
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
   var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) => {
   const {
     state,
@@ -148,11 +148,14 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          const newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
@@ -228,7 +231,11 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export const getTableScalingPercent = (table, tableRef) => {
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export const getStaticTableScalingPercent = (table, tableRenderWidth) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

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

@@ -1,53 +1,68 @@
 // Resize a given column by an amount from the current state
 
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount;
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    const tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    const tableContainerWidth = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+  let resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return {
-      ...newState,
-      tableWidth: resizeState.tableWidth + delta
-    };
-  }
+  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-const updateTable = (resizeAmount, tableRef, tableNode) => {
+
+// try not scale table during resize
+export const resizeColumnAndTable = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false, originalTableWidth) => {
+  var _tableRef$closest;
+  // TODO: can we use document state, and apply scaling factor?
+  const tableWidth = tableRef.clientWidth;
+  const tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  const isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  let resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return {
+    ...newState,
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  };
+};
+const updateTablePreview = (resizeAmount, tableRef, tableNode) => {
   const currentWidth = getTableContainerElementWidth(tableNode);
   const resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
   const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/esm/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
 export var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI) {
   var state = view.state,
     dispatch = view.dispatch;
@@ -135,11 +135,14 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
           _shouldScale = _shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
-        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          var newResizeState = resizeColumnAndTable(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          var _newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
+          tr = updateColumnWidths(_newResizeState, table, start)(tr);
         }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
@@ -209,7 +212,11 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     if (isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')) {
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    } else {
+      resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
+    }
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

package/dist/esm/pm-plugins/table-resizing/utils/index.js

@@ -6,5 +6,5 @@ export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bu
 export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth, getTableElementWidth, getTableContainerElementWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT } from './consts';

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

@@ -98,4 +98,11 @@ export var getTableScalingPercent = function getTableScalingPercent(table, table
   var scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
+};
+export var getStaticTableScalingPercent = function getStaticTableScalingPercent(table, tableRenderWidth) {
+  var tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  var scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
 };

package/dist/esm/pm-plugins/table-resizing/utils/resize-column.js

@@ -3,54 +3,71 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Resize a given column by an amount from the current state
 
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export var resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   var scalePercent = 1;
-  var resizeAmount;
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    var _tableRef$closest;
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    var tableWidth = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth;
-    var tableContainerWidth = tableRef === null || tableRef === void 0 || (_tableRef$closest = tableRef.closest('.resizer-item')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
-    var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
-    resizeAmount = amount * 2;
-    if (isOverflowed) {
-      resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
-
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (isTableScalingEnabled && !getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateAffectedColumn(resizeState, colIndex, resizeAmount) : resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
-  getBooleanFF('platform.editor.table.colum-resizing-improvements') ? updateColgroup(newState, tableRef, tableNode, false) : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-    updateTable(delta, tableRef, tableNode);
-    return _objectSpread(_objectSpread({}, newState), {}, {
-      tableWidth: resizeState.tableWidth + delta
-    });
-  }
+  var newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };
-var updateTable = function updateTable(resizeAmount, tableRef, tableNode) {
+
+// try not scale table during resize
+export var resizeColumnAndTable = function resizeColumnAndTable(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
+  var _tableRef$closest;
+  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var originalTableWidth = arguments.length > 7 ? arguments[7] : undefined;
+  // TODO: can we use document state, and apply scaling factor?
+  var tableWidth = tableRef.clientWidth;
+  var tableContainerWidth = (_tableRef$closest = tableRef.closest('.pm-table-container')) === null || _tableRef$closest === void 0 ? void 0 : _tableRef$closest.clientWidth;
+  var isOverflowed = !!(tableWidth && tableContainerWidth && tableWidth > tableContainerWidth);
+  var resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount = amount < 0 ? amount : resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount = amount > 0 && tableContainerWidth ? resizeAmount - (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2 : resizeAmount;
+  }
+  var newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  var delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+  return _objectSpread(_objectSpread({}, newState), {}, {
+    tableWidth: isOverflowed ? tableContainerWidth : resizeState.tableWidth + delta
+  });
+};
+var updateTablePreview = function updateTablePreview(resizeAmount, tableRef, tableNode) {
   var currentWidth = getTableContainerElementWidth(tableNode);
   var resizingContainer = tableRef === null || tableRef === void 0 ? void 0 : tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
   var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     var newWidth = "".concat(currentWidth + resizeAmount, "px");
     if (tableRef) {
       tableRef.style.width = newWidth;

package/dist/types/pm-plugins/table-resizing/utils/index.d.ts

@@ -9,5 +9,5 @@ export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, } from './consts';

package/dist/types/pm-plugins/table-resizing/utils/misc.d.ts

@@ -25,4 +25,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
+export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number) => number;
 export {};

package/dist/types/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number) => ResizeState;

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/index.d.ts

@@ -9,5 +9,5 @@ export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable, } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_DEFAULT_WIDTH, MAX_SCALING_PERCENT, } from './consts';

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/misc.d.ts

@@ -25,4 +25,5 @@ export declare const getTableMaxWidth: ({ table, tableStart, state, layout, getE
 export declare const getTableElementWidth: (table: PMNode) => number;
 export declare const getTableContainerElementWidth: (table: PMNode) => number;
 export declare const getTableScalingPercent: (table: PMNode, tableRef: HTMLElement | null) => number;
+export declare const getStaticTableScalingPercent: (table: PMNode, tableRenderWidth: number) => number;
 export {};

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-column.d.ts

@@ -1,3 +1,4 @@
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ResizeState } from './types';
 export declare const resizeColumn: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement | null, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean) => ResizeState;
+export declare const resizeColumnAndTable: (resizeState: ResizeState, colIndex: number, amount: number, tableRef: HTMLElement, tableNode: PmNode, selectedColumns?: number[], isTableScalingEnabled?: boolean, originalTableWidth?: number) => ResizeState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.13.1",
+  "version": "7.13.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -51,7 +51,7 @@
     "@atlaskit/primitives": "^6.1.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
-    "@atlaskit/tokens": "^1.46.0",
+    "@atlaskit/tokens": "^1.47.0",
     "@atlaskit/tooltip": "^18.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -32,6 +32,7 @@ import {
   getTableMaxWidth,
   pointsAtCell,
   resizeColumn,
+  resizeColumnAndTable,
   updateControls,
 } from './utils';
 
@@ -197,22 +198,31 @@ export const handleMouseDown = (
             shouldScale && originalTable.attrs.displayMode !== 'fixed';
         }
 
-        const newResizeState = resizeColumn(
-          resizeState,
-          colIndex,
-          clientX - startX,
-          dom,
-          originalTable,
-          resizingSelectedColumns ? selectedColumns : undefined,
-          shouldScale,
-        );
-
         const resizedDelta = clientX - startX;
 
-        tr = updateColumnWidths(newResizeState, table, start)(tr);
-
         if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          const newResizeState = resizeColumnAndTable(
+            resizeState,
+            colIndex,
+            clientX - startX,
+            dom,
+            originalTable,
+            resizingSelectedColumns ? selectedColumns : undefined,
+            shouldScale,
+          );
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
           tr.setNodeAttribute(start - 1, 'width', newResizeState.tableWidth);
+        } else {
+          const newResizeState = resizeColumn(
+            resizeState,
+            colIndex,
+            clientX - startX,
+            dom,
+            originalTable,
+            resizingSelectedColumns ? selectedColumns : undefined,
+            shouldScale,
+          );
+          tr = updateColumnWidths(newResizeState, table, start)(tr);
         }
 
         if (colIndex === map.width - 1) {
@@ -300,15 +310,27 @@ export const handleMouseDown = (
       shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
     }
 
-    resizeColumn(
-      resizeState,
-      colIndex,
-      clientX - dragging.startX,
-      dom,
-      table,
-      undefined,
-      shouldScale,
-    );
+    if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+      resizeColumnAndTable(
+        resizeState,
+        colIndex,
+        clientX - dragging.startX,
+        dom,
+        table,
+        undefined,
+        shouldScale,
+      );
+    } else {
+      resizeColumn(
+        resizeState,
+        colIndex,
+        clientX - dragging.startX,
+        dom,
+        table,
+        undefined,
+        shouldScale,
+      );
+    }
 
     updateControls()(state);
   }

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

@@ -42,7 +42,7 @@ export {
 } from './scale-table';
 export type { ScaleOptions } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
-export { resizeColumn } from './resize-column';
+export { resizeColumn, resizeColumnAndTable } from './resize-column';
 export {
   COLUMN_MIN_WIDTH,
   TABLE_MAX_WIDTH,

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

@@ -167,3 +167,14 @@ export const getTableScalingPercent = (
   scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
   return Math.min(scalePercent, 1);
 };
+
+export const getStaticTableScalingPercent = (
+  table: PMNode,
+  tableRenderWidth: number,
+) => {
+  const tableWidth = getTableContainerElementWidth(table);
+  // minus 1 here to avoid any 1px scroll in Firefox
+  let scalePercent = (tableRenderWidth - 1) / tableWidth;
+  scalePercent = Math.max(scalePercent, 1 - MAX_SCALING_PERCENT);
+  return Math.min(scalePercent, 1);
+};

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,6 +1,5 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TableCssClassName as ClassName } from '../../../types';
 
@@ -18,79 +17,100 @@ export const resizeColumn = (
   selectedColumns?: number[],
   isTableScalingEnabled = false,
 ): ResizeState => {
-  // If table resize to show overflowed content, we need to re calculate the resize amount because now offset = amount amount instead of amount * 2
   let scalePercent = 1;
-  let resizeAmount: number;
-
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    // when table initially not overflow, but enter overflow, we need to calculate the resize amount by two part, before and after overflow, before overflow should be double, after should not be double.
-    const tableWidth = tableRef?.clientWidth;
-    const tableContainerWidth = tableRef?.closest('.resizer-item')?.clientWidth;
-
-    const isOverflowed = !!(
-      tableWidth &&
-      tableContainerWidth &&
-      tableWidth > tableContainerWidth
-    );
-
-    resizeAmount = amount * 2;
-
-    if (isOverflowed) {
-      resizeAmount =
-        amount < 0
-          ? amount
-          : resizeAmount -
-            (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
-    } else {
-      resizeAmount =
-        amount > 0 && tableContainerWidth
-          ? resizeAmount -
-            (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
-          : resizeAmount;
-    }
-  } else {
-    resizeAmount = amount;
-  }
+  let resizeAmount = amount;
 
-  // This need to be clean up if clean up the FF, we will not need this scale logic because now full table width changed/updated in resizeColumn
-  if (
-    isTableScalingEnabled &&
-    !getBooleanFF('platform.editor.table.colum-resizing-improvements')
-  ) {
+  if (isTableScalingEnabled) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
 
-  const newState = getBooleanFF(
-    'platform.editor.table.colum-resizing-improvements',
-  )
-    ? updateAffectedColumn(resizeState, colIndex, resizeAmount)
-    : resizeAmount > 0
-    ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-    : resizeAmount < 0
-    ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-    : resizeState;
-
-  getBooleanFF('platform.editor.table.colum-resizing-improvements')
-    ? updateColgroup(newState, tableRef, tableNode, false)
-    : updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
-
-  if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
-    // use the difference in width from affected column to update overall table width
-    const delta =
-      newState.cols[colIndex].width - resizeState.cols[colIndex].width;
-
-    updateTable(delta, tableRef, tableNode);
-    return {
-      ...newState,
-      tableWidth: resizeState.tableWidth + delta,
-    };
-  }
+  const newState =
+    resizeAmount > 0
+      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+      : resizeAmount < 0
+        ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+        : resizeState;
+
+  updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
 
   return newState;
 };
 
-const updateTable = (
+// try not scale table during resize
+export const resizeColumnAndTable = (
+  resizeState: ResizeState,
+  colIndex: number,
+  amount: number,
+  tableRef: HTMLElement,
+  tableNode: PmNode,
+  selectedColumns?: number[],
+  isTableScalingEnabled = false,
+  originalTableWidth?: number,
+): ResizeState => {
+  // TODO: can we use document state, and apply scaling factor?
+  const tableWidth = tableRef.clientWidth;
+  const tableContainerWidth = tableRef.closest(
+    '.pm-table-container',
+  )?.clientWidth;
+
+  const isOverflowed = !!(
+    tableWidth &&
+    tableContainerWidth &&
+    tableWidth > tableContainerWidth
+  );
+
+  let resizeAmount = amount * 2;
+
+  // todo: reimplement - use getTableScalingPercentFrozen to get scaled percent before table width changes dynamically
+  // let scalePercent = 1;
+  // if (isTableScalingEnabled) {
+  // import from ./misc
+  //   scalePercent = getStaticTableScalingPercent(
+  //     tableNode,
+  //     originalTableWidth || resizeState.maxSize,
+  //   );
+  //   resizeAmount = amount / scalePercent;
+  // }
+
+  // need to look at the resize amount and try to adjust the colgroups
+  if (isOverflowed) {
+    resizeAmount =
+      amount < 0
+        ? amount
+        : resizeAmount -
+          (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2;
+  } else {
+    resizeAmount =
+      amount > 0 && tableContainerWidth
+        ? resizeAmount -
+          (tableNode.attrs.width + resizeAmount - tableContainerWidth) / 2
+        : resizeAmount;
+  }
+
+  const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+
+  // this function only updates the colgroup in DOM, it reverses the scalePercent
+  // todo: change isScalingEnabled to true when reimplementing scaling
+  updateColgroup(newState, tableRef, tableNode, false);
+
+  // use the difference in width from affected column to update overall table width
+  const delta =
+    newState.cols[colIndex].width - resizeState.cols[colIndex].width;
+
+  if (!isOverflowed) {
+    updateTablePreview(delta, tableRef, tableNode);
+  }
+
+  return {
+    ...newState,
+    tableWidth: isOverflowed
+      ? tableContainerWidth
+      : resizeState.tableWidth + delta,
+  };
+};
+
+const updateTablePreview = (
   resizeAmount: number,
   tableRef: HTMLElement | null,
   tableNode: PmNode,
@@ -101,7 +121,7 @@ const updateTable = (
   );
   const resizingItem = resizingContainer?.querySelector('.resizer-item');
 
-  if (resizingContainer && resizingItem) {
+  if (resizingItem) {
     const newWidth = `${currentWidth + resizeAmount}px`;
     if (tableRef) {
       tableRef.style.width = newWidth;