@atlaskit/editor-plugin-table 7.7.0 → 7.7.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 7.7.2
+
+### Patch Changes
+
+- [#92335](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92335) [`8bdb6ebbad6c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8bdb6ebbad6c) - fix column resize issue when table preserve width enabled.
+- Updated dependencies
+
+## 7.7.1
+
+### Patch Changes
+
+- [#90896](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90896) [`ee5dc6f04816`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee5dc6f04816) - Add new column resize functionality behind LD ff platform.editor.table.colum-resizing-improvements
+- [#91106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91106) [`b6ffa30186b9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6ffa30186b9) - Bump ADF-schema package to version 35.0.0
+- Updated dependencies
+
 ## 7.7.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -13,7 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _types = require("../types");
 var _TableResizer = require("./TableResizer");
@@ -133,12 +132,10 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi
   };
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop
-    });
-  }
+  tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop
+  });
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       display: 'flex',

package/dist/cjs/nodeviews/TableResizer.js

@@ -170,7 +170,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
@@ -274,7 +274,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+    if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;

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

@@ -141,6 +141,9 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         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')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -1,23 +1,50 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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");
 var _resizeState = require("./resize-state");
-// Resize a given column by an amount from the current state
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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;
   var scalePercent = 1;
-  var resizeAmount = amount;
-  if (isTableScalingEnabled) {
+  var resizeAmount = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.colum-resizing-improvements') ? amount * 2 : 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')) {
     scalePercent = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = resizeAmount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  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, _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
+    });
+  }
   return newState;
+};
+var updateTable = function updateTable(resizeAmount, tableRef, tableNode
+// isTableScalingEnabled: boolean,
+) {
+  var currentWidth = (0, _misc.getTableContainerElementWidth)(tableNode);
+  var resizingContainer = tableRef.closest(".".concat(_types.TableCssClassName.TABLE_RESIZER_CONTAINER));
+  var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  if (resizingContainer && resizingItem) {
+    var newWidth = "".concat(currentWidth + resizeAmount, "px");
+    tableRef.style.width = newWidth;
+    resizingContainer.style.width = newWidth;
+    resizingItem.style.width = newWidth;
+  }
 };

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.growColumn = void 0;
 exports.reduceSpace = reduceSpace;
 exports.shrinkColumn = void 0;
+exports.updateAffectedColumn = updateAffectedColumn;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _columnState = require("./column-state");
@@ -224,4 +225,22 @@ function getCandidates(state, destIdx, amount) {
 
   // only consider rows after the selected column in the direction of resize
   return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
+  var updatedCols = resizeState.cols.map(function (col, index) {
+    if (index === colIndex) {
+      var newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return _objectSpread(_objectSpread({}, col), {}, {
+        width: newWidth
+      });
+    }
+    return col;
+  });
+  return _objectSpread(_objectSpread({}, resizeState), {}, {
+    cols: updatedCols
+  });
 }

package/dist/es2019/nodeviews/TableContainer.js

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -119,13 +118,11 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     isWholeTableInDanger,
     pluginInjectionApi
   };
-  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = {
-      ...tableResizerProps,
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop
-    };
-  }
+  tableResizerProps = {
+    ...tableResizerProps,
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop
+  };
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/es2019/nodeviews/TableResizer.js

@@ -165,7 +165,7 @@ export const TableResizer = ({
     dispatch(tr);
     const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
@@ -272,7 +272,7 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+    if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;

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

@@ -148,6 +148,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         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')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -1,16 +1,42 @@
 // Resize a given column by an amount from the current state
 
-import { getTableScalingPercent } from './misc';
-import { growColumn, shrinkColumn } from './resize-logic';
+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) => {
   let scalePercent = 1;
-  let resizeAmount = amount;
-  if (isTableScalingEnabled) {
+  let resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : 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')) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  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;
   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
+    };
+  }
   return newState;
+};
+const updateTable = (resizeAmount, tableRef, tableNode
+// isTableScalingEnabled: boolean,
+) => {
+  const currentWidth = getTableContainerElementWidth(tableNode);
+  const resizingContainer = tableRef.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
+  const resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  if (resizingContainer && resizingItem) {
+    const newWidth = `${currentWidth + resizeAmount}px`;
+    tableRef.style.width = newWidth;
+    resizingContainer.style.width = newWidth;
+    resizingItem.style.width = newWidth;
+  }
 };

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

@@ -193,4 +193,24 @@ function getCandidates(state, destIdx, amount) {
 
   // only consider rows after the selected column in the direction of resize
   return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
+  const updatedCols = resizeState.cols.map((col, index) => {
+    if (index === colIndex) {
+      const newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return {
+        ...col,
+        width: newWidth
+      };
+    }
+    return col;
+  });
+  return {
+    ...resizeState,
+    cols: updatedCols
+  };
 }

package/dist/esm/nodeviews/TableContainer.js

@@ -7,7 +7,6 @@ import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
@@ -123,12 +122,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi
   };
-  if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-    tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
-      onResizeStart: onResizeStart,
-      onResizeStop: onResizeStop
-    });
-  }
+  tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
+    onResizeStart: onResizeStart,
+    onResizeStop: onResizeStop
+  });
   return /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/esm/nodeviews/TableResizer.js

@@ -160,7 +160,7 @@ export var TableResizer = function TableResizer(_ref) {
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [startMeasure, editorView, displayGapCursor, isTableScalingEnabled, containerWidth, displayGuideline, onResizeStart]);
@@ -264,7 +264,7 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     scheduleResize.cancel();
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStop) {
+    if (onResizeStop) {
       onResizeStop();
     }
     return newWidth;

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

@@ -135,6 +135,9 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         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')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           var mouseUpTime = event.timeStamp;
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -1,17 +1,45 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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 { getTableScalingPercent } from './misc';
-import { growColumn, shrinkColumn } from './resize-logic';
+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;
   var scalePercent = 1;
-  var resizeAmount = amount;
-  if (isTableScalingEnabled) {
+  var resizeAmount = getBooleanFF('platform.editor.table.colum-resizing-improvements') ? amount * 2 : 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')) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  var newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
+  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;
   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
+    });
+  }
   return newState;
+};
+var updateTable = function updateTable(resizeAmount, tableRef, tableNode
+// isTableScalingEnabled: boolean,
+) {
+  var currentWidth = getTableContainerElementWidth(tableNode);
+  var resizingContainer = tableRef.closest(".".concat(ClassName.TABLE_RESIZER_CONTAINER));
+  var resizingItem = resizingContainer === null || resizingContainer === void 0 ? void 0 : resizingContainer.querySelector('.resizer-item');
+  if (resizingContainer && resizingItem) {
+    var newWidth = "".concat(currentWidth + resizeAmount, "px");
+    tableRef.style.width = newWidth;
+    resizingContainer.style.width = newWidth;
+    resizingItem.style.width = newWidth;
+  }
 };

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

@@ -215,4 +215,22 @@ function getCandidates(state, destIdx, amount) {
 
   // only consider rows after the selected column in the direction of resize
   return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
+}
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export function updateAffectedColumn(resizeState, colIndex, resizeAmount) {
+  var updatedCols = resizeState.cols.map(function (col, index) {
+    if (index === colIndex) {
+      var newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return _objectSpread(_objectSpread({}, col), {}, {
+        width: newWidth
+      });
+    }
+    return col;
+  });
+  return _objectSpread(_objectSpread({}, resizeState), {}, {
+    cols: updatedCols
+  });
 }

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

@@ -2,3 +2,7 @@ import type { ResizeState } from './types';
 export declare const growColumn: (state: ResizeState, colIndex: number, amount: number, selectedColumns?: number[]) => ResizeState;
 export declare const shrinkColumn: (state: ResizeState, colIndex: number, amount: number, selectedColumns?: number[]) => ResizeState;
 export declare function reduceSpace(state: ResizeState, amount: number, ignoreCols?: number[]): ResizeState;
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export declare function updateAffectedColumn(resizeState: ResizeState, colIndex: number, resizeAmount: number): ResizeState;

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

@@ -2,3 +2,7 @@ import type { ResizeState } from './types';
 export declare const growColumn: (state: ResizeState, colIndex: number, amount: number, selectedColumns?: number[]) => ResizeState;
 export declare const shrinkColumn: (state: ResizeState, colIndex: number, amount: number, selectedColumns?: number[]) => ResizeState;
 export declare function reduceSpace(state: ResizeState, amount: number, ignoreCols?: number[]): ResizeState;
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export declare function updateAffectedColumn(resizeState: ResizeState, colIndex: number, resizeAmount: number): ResizeState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.7.0",
+  "version": "7.7.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,9 +28,9 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.8.0",
-    "@atlaskit/custom-steps": "^0.0.17",
-    "@atlaskit/editor-common": "^78.26.0",
+    "@atlaskit/adf-schema": "^35.9.0",
+    "@atlaskit/custom-steps": "^0.0.18",
+    "@atlaskit/editor-common": "^78.30.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
@@ -112,9 +112,6 @@
     "platform.editor.table.drag-move-options-logic-update_fp7xw": {
       "type": "boolean"
     },
-    "platform.editor.resizing-table-height-improvement": {
-      "type": "boolean"
-    },
     "platform.editor.table.shift-arrowup-fix": {
       "type": "boolean"
     },
@@ -144,6 +141,9 @@
     },
     "platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33": {
       "type": "boolean"
+    },
+    "platform.editor.table.colum-resizing-improvements": {
+      "type": "boolean"
     }
   }
 }

package/src/nodeviews/TableContainer.tsx

@@ -16,7 +16,6 @@ import {
   akEditorMediaResizeHandlerPaddingWide,
   akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import type { PluginInjectionAPI } from '../types';
@@ -201,13 +200,11 @@ export const ResizableTableContainer = React.memo(
       pluginInjectionApi,
     };
 
-    if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
-      tableResizerProps = {
-        ...tableResizerProps,
-        onResizeStart: onResizeStart,
-        onResizeStop: onResizeStop,
-      };
-    }
+    tableResizerProps = {
+      ...tableResizerProps,
+      onResizeStart: onResizeStart,
+      onResizeStop: onResizeStop,
+    };
 
     return (
       <div

package/src/nodeviews/TableResizer.tsx

@@ -270,10 +270,7 @@ export const TableResizer = ({
     );
 
     setSnappingEnabled(displayGuideline(visibleGuidelines));
-    if (
-      getBooleanFF('platform.editor.resizing-table-height-improvement') &&
-      onResizeStart
-    ) {
+    if (onResizeStart) {
       onResizeStart();
     }
   }, [
@@ -443,10 +440,7 @@ export const TableResizer = ({
       updateWidth(newWidth);
       scheduleResize.cancel();
 
-      if (
-        getBooleanFF('platform.editor.resizing-table-height-improvement') &&
-        onResizeStop
-      ) {
+      if (onResizeStop) {
         onResizeStop();
       }
 

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

@@ -195,6 +195,10 @@ export const handleMouseDown = (
         const resizedDelta = clientX - startX;
 
         tr = updateColumnWidths(newResizeState, table, start)(tr);
+
+        if (getBooleanFF('platform.editor.table.colum-resizing-improvements')) {
+          tr.setNodeAttribute(tablePos, 'width', newResizeState.tableWidth);
+        }
         if (colIndex === map.width - 1) {
           const mouseUpTime = event.timeStamp;
 

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

@@ -1,8 +1,11 @@
 // 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 { getTableScalingPercent } from './misc';
-import { growColumn, shrinkColumn } from './resize-logic';
+import { TableCssClassName as ClassName } from '../../../types';
+
+import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
+import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 import type { ResizeState } from './types';
 
@@ -16,20 +19,64 @@ export const resizeColumn = (
   isTableScalingEnabled = false,
 ): ResizeState => {
   let scalePercent = 1;
-  let resizeAmount = amount;
+  let resizeAmount = getBooleanFF(
+    'platform.editor.table.colum-resizing-improvements',
+  )
+    ? amount * 2
+    : amount;
 
-  if (isTableScalingEnabled) {
+  // 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')
+  ) {
     scalePercent = getTableScalingPercent(tableNode, tableRef);
     resizeAmount = amount / scalePercent;
   }
-  const newState =
-    resizeAmount > 0
-      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-      : resizeAmount < 0
-      ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-      : resizeState;
+
+  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;
 
   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,
+    };
+  }
+
   return newState;
 };
+
+const updateTable = (
+  resizeAmount: number,
+  tableRef: HTMLElement,
+  tableNode: PmNode,
+  // isTableScalingEnabled: boolean,
+) => {
+  const currentWidth = getTableContainerElementWidth(tableNode);
+  const resizingContainer = tableRef.closest(
+    `.${ClassName.TABLE_RESIZER_CONTAINER}`,
+  );
+  const resizingItem = resizingContainer?.querySelector('.resizer-item');
+
+  if (resizingContainer && resizingItem) {
+    const newWidth = `${currentWidth + resizeAmount}px`;
+    tableRef.style.width = newWidth;
+    (resizingContainer as HTMLElement).style.width = newWidth;
+    (resizingItem as HTMLElement).style.width = newWidth;
+  }
+};

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

@@ -278,3 +278,28 @@ function getCandidates(
     ? candidates.slice(0, destIdx)
     : candidates.slice(destIdx + 1);
 }
+
+/**
+ * Update the given column based on resizeAmount, maintaining all other columns
+ */
+export function updateAffectedColumn(
+  resizeState: ResizeState,
+  colIndex: number,
+  resizeAmount: number,
+): ResizeState {
+  const updatedCols = resizeState.cols.map((col, index) => {
+    if (index === colIndex) {
+      const newWidth = Math.max(col.width + resizeAmount, col.minWidth);
+      return {
+        ...col,
+        width: newWidth,
+      };
+    }
+    return col;
+  });
+
+  return {
+    ...resizeState,
+    cols: updatedCols,
+  };
+}