@atlaskit/editor-plugin-table 7.5.8 → 7.5.10

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.10
+
+### Patch Changes
+
+- [#81527](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81527) [`f54438c79095`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f54438c79095) - prevent nested tables from scaling
+
+## 7.5.9
+
+### Patch Changes
+
+- [#81302](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81302) [`969e899b8844`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/969e899b8844) - Update column resize logic to match mouse movement
+- [#81427](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81427) [`8adea3fa8973`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8adea3fa8973) - [ux] When number column toggled and preserve table widths ff enabled, the table oveflow state should align with current behaviour.
+
 ## 7.5.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -185,8 +185,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props2.getNode,
         getPos = _this$props2.getPos,
         containerWidth = _this$props2.containerWidth,
-        options = _this$props2.options,
-        isTableScalingEnabled = _this$props2.isTableScalingEnabled;
+        options = _this$props2.options;
       var node = getNode();
       var state = view.state,
         dispatch = view.dispatch;
@@ -203,7 +202,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos, isTableScalingEnabled)(state.tr);
+      }, options), domAtPos, false)(state.tr);
       dispatch(tr);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -436,8 +435,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this$containerWidth,
-        _this2 = this;
+      var _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
@@ -455,30 +453,34 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tableNode = getNode();
       var start = getPos() || 0;
       var depth = view.state.doc.resolve(start).depth;
-
-      // TODO - remove this when support is added for nested tables
       if (depth !== 0) {
         return;
       }
       var tableNodeWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      var containerWidthValue = containerWidth.width;
-      var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-      if (force || shouldTableScale && !isResizing && isWidthChanged) {
-        var resizeState = (0, _utils4.getResizeState)({
-          minWidth: _utils4.COLUMN_MIN_WIDTH,
-          maxSize: tableRenderWidth,
-          table: tableNode,
-          tableRef: this.table,
-          start: start,
-          domAtPos: view.domAtPos,
-          isTableScalingEnabled: true
-        });
+      if (force || shouldTableScale) {
+        var _this$containerWidth;
+        var containerWidthValue = containerWidth.width;
+        var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+        var wasTableResized = (0, _colgroup.hasTableBeenResized)(this.node);
+        var isTableResied = (0, _colgroup.hasTableBeenResized)(tableNode);
+        var isColumnsDistributed = wasTableResized && !isTableResied;
+        if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+          var resizeState = (0, _utils4.getResizeState)({
+            minWidth: _utils4.COLUMN_MIN_WIDTH,
+            maxSize: tableRenderWidth,
+            table: tableNode,
+            tableRef: this.table,
+            start: start,
+            domAtPos: view.domAtPos,
+            isTableScalingEnabled: true
+          });
 
-        // Request animation frame required for Firefox
-        requestAnimationFrame(function () {
-          (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, true);
-        });
+          // Request animation frame required for Firefox
+          requestAnimationFrame(function () {
+            (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, true);
+          });
+        }
       }
       this.containerWidth = containerWidth;
     }
@@ -494,7 +496,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowColumnResizing = _this$props10.allowColumnResizing,
         isResizing = _this$props10.isResizing,
         options = _this$props10.options,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled;
+        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
+        getPos = _this$props10.getPos;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
@@ -531,11 +534,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
         var previousTable = this.node;
-        if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
+        var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
+        if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
-          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable) && isResizing;
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
           if (shouldRecreateResizeCols) {
-            (0, _utils4.insertColgroupFromNode)(this.table, currentTable, isTableScalingEnabled);
+            var start = getPos() || 0;
+            var depth = _view.state.doc.resolve(start).depth;
+            var shouldScale = depth === 0 && isTableScalingEnabled;
+            (0, _utils4.insertColgroupFromNode)(this.table, currentTable, shouldScale);
           }
           (0, _dom.updateControls)()(_view.state);
         }

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

@@ -44,6 +44,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
   var $cell = state.doc.resolve(localResizeHandlePos);
   var originalTable = $cell.node(-1);
   var start = $cell.start(-1);
+  var tablePos = state.doc.resolve(start).start(-1);
+  var tableDepth = state.doc.resolve(tablePos).depth;
   var dom = domAtPos(start).node;
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
@@ -67,6 +69,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
       getEditorContainerWidth: getEditorContainerWidth
     });
   }
+  var shouldScale = tableDepth === 0 && isTableScalingEnabled;
   var resizeState = (0, _utils3.getResizeState)({
     minWidth: _styles.tableCellMinWidth,
     maxSize: maxSize,
@@ -74,7 +77,7 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     tableRef: dom,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: shouldScale
   });
   if ((0, _commands.evenColumns)({
     resizeState: resizeState,
@@ -116,6 +119,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     var $cell = state.doc.resolve(resizeHandlePos);
     var start = $cell.start(-1);
     var table = $cell.node(-1);
+    var tablePos = state.doc.resolve(start).start(-1);
+    var tableDepth = state.doc.resolve(tablePos).depth;
 
     // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
@@ -146,7 +151,8 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
         var selectedColumns = selectionRect ? (0, _utils2.getSelectedColumnIndexes)(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        var newResizeState = (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
+        var _shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        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 (colIndex === map.width - 1) {
@@ -207,9 +213,12 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     }
     var $cell = state.doc.resolve(resizeHandlePos);
     var table = $cell.node(-1);
+    var tablePos = state.doc.resolve(start).start(-1);
+    var tableDepth = state.doc.resolve(tablePos).depth;
     var map = _tableMap.TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    (0, _utils3.resizeColumn)(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, isTableScalingEnabled);
+    var shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    (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/resize-column.js

@@ -4,13 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.resizeColumn = void 0;
+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
 
 var resizeColumn = exports.resizeColumn = function resizeColumn(resizeState, colIndex, amount, tableRef, tableNode, selectedColumns) {
   var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
-  var newState = amount > 0 ? (0, _resizeLogic.growColumn)(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? (0, _resizeLogic.shrinkColumn)(resizeState, colIndex, amount, selectedColumns) : resizeState;
+  var scalePercent = 1;
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
+    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;
   (0, _resizeState.updateColgroup)(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };

package/dist/cjs/transforms/column-width.js

@@ -113,9 +113,10 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
         possibleMaxWidth: 0,
         isResized: isResized
       };
-      if (isTableScalingEnabled) {
+      var tableDepth = view.state.doc.resolve(table.pos).depth;
+      var shouldScale = isTableScalingEnabled && tableDepth === 0;
+      if (shouldScale) {
         previousTableInfo = {
-          // TODO - ensure correct width is returned when table doesn't have a width value
           width: (0, _utils.getTableElementWidth)(table.node),
           possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _utils.getTableContainerElementWidth)(table.node) : (0, _utils.getTableContainerElementWidth)(table.node) - _commonStyles.insertColumnButtonOffset,
           isResized: isResized
@@ -175,7 +176,7 @@ var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
         tableRef: tableRef,
         domAtPos: domAtPos,
         maxSize: previousTableInfo.possibleMaxWidth,
-        isTableScalingEnabled: isTableScalingEnabled
+        isTableScalingEnabled: shouldScale
       });
 
       // Two scenarios that require scaling:

package/dist/es2019/nodeviews/TableComponent.js

@@ -169,8 +169,7 @@ class TableComponent extends React.Component {
         getNode,
         getPos,
         containerWidth,
-        options,
-        isTableScalingEnabled
+        options
       } = this.props;
       const node = getNode();
       const {
@@ -194,7 +193,7 @@ class TableComponent extends React.Component {
         containerWidth: width,
         previousContainerWidth: this.containerWidth.width || width,
         ...options
-      }, domAtPos, isTableScalingEnabled)(state.tr);
+      }, domAtPos, false)(state.tr);
       dispatch(tr);
     });
     _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
@@ -419,7 +418,6 @@ class TableComponent extends React.Component {
     }
   }
   handleColgroupUpdates(force = false) {
-    var _this$containerWidth;
     const {
       getNode,
       containerWidth,
@@ -437,32 +435,36 @@ class TableComponent extends React.Component {
     const tableNode = getNode();
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
-
-    // TODO - remove this when support is added for nested tables
     if (depth !== 0) {
       return;
     }
     const tableNodeWidth = getTableContainerWidth(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
-    const {
-      width: containerWidthValue
-    } = containerWidth;
-    const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-    if (force || shouldTableScale && !isResizing && isWidthChanged) {
-      const resizeState = getResizeState({
-        minWidth: COLUMN_MIN_WIDTH,
-        maxSize: tableRenderWidth,
-        table: tableNode,
-        tableRef: this.table,
-        start,
-        domAtPos: view.domAtPos,
-        isTableScalingEnabled: true
-      });
+    if (force || shouldTableScale) {
+      var _this$containerWidth;
+      const {
+        width: containerWidthValue
+      } = containerWidth;
+      const isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+      const wasTableResized = hasTableBeenResized(this.node);
+      const isTableResied = hasTableBeenResized(tableNode);
+      const isColumnsDistributed = wasTableResized && !isTableResied;
+      if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+        const resizeState = getResizeState({
+          minWidth: COLUMN_MIN_WIDTH,
+          maxSize: tableRenderWidth,
+          table: tableNode,
+          tableRef: this.table,
+          start,
+          domAtPos: view.domAtPos,
+          isTableScalingEnabled: true
+        });
 
-      // Request animation frame required for Firefox
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table, tableNode, true);
-      });
+        // Request animation frame required for Firefox
+        requestAnimationFrame(() => {
+          updateColgroup(resizeState, this.table, tableNode, true);
+        });
+      }
     }
     this.containerWidth = containerWidth;
   }
@@ -475,7 +477,8 @@ class TableComponent extends React.Component {
       allowColumnResizing,
       isResizing,
       options,
-      isTableScalingEnabled
+      isTableScalingEnabled,
+      getPos
     } = this.props;
     const {
       isInDanger
@@ -514,13 +517,17 @@ class TableComponent extends React.Component {
       // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
       // re-draw colgroup.
       const previousTable = this.node;
-      if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
+      const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
+      if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
         const {
           view
         } = this.props;
-        const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+        const shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(this.table, currentTable, isTableScalingEnabled);
+          const start = getPos() || 0;
+          const depth = view.state.doc.resolve(start).depth;
+          const shouldScale = depth === 0 && isTableScalingEnabled;
+          insertColgroupFromNode(this.table, currentTable, shouldScale);
         }
         updateControls()(view.state);
       }

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

@@ -41,6 +41,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   const $cell = state.doc.resolve(localResizeHandlePos);
   const originalTable = $cell.node(-1);
   const start = $cell.start(-1);
+  const tablePos = state.doc.resolve(start).start(-1);
+  const tableDepth = state.doc.resolve(tablePos).depth;
   let dom = domAtPos(start).node;
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
@@ -64,6 +66,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
       getEditorContainerWidth
     });
   }
+  const shouldScale = tableDepth === 0 && isTableScalingEnabled;
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -71,7 +74,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     tableRef: dom,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: shouldScale
   });
   if (evenColumns({
     resizeState,
@@ -119,6 +122,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     const $cell = state.doc.resolve(resizeHandlePos);
     const start = $cell.start(-1);
     const table = $cell.node(-1);
+    const tablePos = state.doc.resolve(start).start(-1);
+    const tableDepth = state.doc.resolve(tablePos).depth;
 
     // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
@@ -153,7 +158,8 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         const selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         const resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
+        const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        const newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, shouldScale);
         const resizedDelta = clientX - startX;
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
@@ -220,9 +226,12 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     }
     const $cell = state.doc.resolve(resizeHandlePos);
     const table = $cell.node(-1);
+    const tablePos = state.doc.resolve(start).start(-1);
+    const tableDepth = state.doc.resolve(tablePos).depth;
     const map = TableMap.get(table);
     const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, isTableScalingEnabled);
+    const shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -1,9 +1,16 @@
 // Resize a given column by an amount from the current state
 
+import { getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 export const resizeColumn = (resizeState, colIndex, amount, tableRef, tableNode, selectedColumns, isTableScalingEnabled = false) => {
-  const newState = amount > 0 ? growColumn(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? shrinkColumn(resizeState, colIndex, amount, selectedColumns) : resizeState;
+  let scalePercent = 1;
+  let resizeAmount = amount;
+  if (isTableScalingEnabled) {
+    scalePercent = getTableScalingPercent(tableNode, tableRef);
+    resizeAmount = amount / scalePercent;
+  }
+  const newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };

package/dist/es2019/transforms/column-width.js

@@ -102,9 +102,10 @@ export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) =
     possibleMaxWidth: 0,
     isResized
   };
-  if (isTableScalingEnabled) {
+  const tableDepth = view.state.doc.resolve(table.pos).depth;
+  const shouldScale = isTableScalingEnabled && tableDepth === 0;
+  if (shouldScale) {
     previousTableInfo = {
-      // TODO - ensure correct width is returned when table doesn't have a width value
       width: getTableElementWidth(table.node),
       possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? getTableContainerElementWidth(table.node) : getTableContainerElementWidth(table.node) - insertColumnButtonOffset,
       isResized
@@ -162,7 +163,7 @@ export const rescaleColumns = (isTableScalingEnabled = false) => (table, view) =
     tableRef,
     domAtPos,
     maxSize: previousTableInfo.possibleMaxWidth,
-    isTableScalingEnabled
+    isTableScalingEnabled: shouldScale
   });
 
   // Two scenarios that require scaling:

package/dist/esm/nodeviews/TableComponent.js

@@ -178,8 +178,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props2.getNode,
         getPos = _this$props2.getPos,
         containerWidth = _this$props2.containerWidth,
-        options = _this$props2.options,
-        isTableScalingEnabled = _this$props2.isTableScalingEnabled;
+        options = _this$props2.options;
       var node = getNode();
       var state = view.state,
         dispatch = view.dispatch;
@@ -196,7 +195,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         start: pos + 1,
         containerWidth: width,
         previousContainerWidth: _this.containerWidth.width || width
-      }, options), domAtPos, isTableScalingEnabled)(state.tr);
+      }, options), domAtPos, false)(state.tr);
       dispatch(tr);
     });
     _defineProperty(_assertThisInitialized(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
@@ -429,8 +428,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this$containerWidth,
-        _this2 = this;
+      var _this2 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props9 = this.props,
         getNode = _this$props9.getNode,
@@ -448,30 +446,34 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tableNode = getNode();
       var start = getPos() || 0;
       var depth = view.state.doc.resolve(start).depth;
-
-      // TODO - remove this when support is added for nested tables
       if (depth !== 0) {
         return;
       }
       var tableNodeWidth = getTableContainerWidth(tableNode);
       var shouldTableScale = tableRenderWidth < tableNodeWidth;
-      var containerWidthValue = containerWidth.width;
-      var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
-      if (force || shouldTableScale && !isResizing && isWidthChanged) {
-        var resizeState = getResizeState({
-          minWidth: COLUMN_MIN_WIDTH,
-          maxSize: tableRenderWidth,
-          table: tableNode,
-          tableRef: this.table,
-          start: start,
-          domAtPos: view.domAtPos,
-          isTableScalingEnabled: true
-        });
+      if (force || shouldTableScale) {
+        var _this$containerWidth;
+        var containerWidthValue = containerWidth.width;
+        var isWidthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.width) !== containerWidthValue;
+        var wasTableResized = hasTableBeenResized(this.node);
+        var isTableResied = hasTableBeenResized(tableNode);
+        var isColumnsDistributed = wasTableResized && !isTableResied;
+        if (force || !isResizing && (isWidthChanged || isColumnsDistributed)) {
+          var resizeState = getResizeState({
+            minWidth: COLUMN_MIN_WIDTH,
+            maxSize: tableRenderWidth,
+            table: tableNode,
+            tableRef: this.table,
+            start: start,
+            domAtPos: view.domAtPos,
+            isTableScalingEnabled: true
+          });
 
-        // Request animation frame required for Firefox
-        requestAnimationFrame(function () {
-          updateColgroup(resizeState, _this2.table, tableNode, true);
-        });
+          // Request animation frame required for Firefox
+          requestAnimationFrame(function () {
+            updateColgroup(resizeState, _this2.table, tableNode, true);
+          });
+        }
       }
       this.containerWidth = containerWidth;
     }
@@ -487,7 +489,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         allowColumnResizing = _this$props10.allowColumnResizing,
         isResizing = _this$props10.isResizing,
         options = _this$props10.options,
-        isTableScalingEnabled = _this$props10.isTableScalingEnabled;
+        isTableScalingEnabled = _this$props10.isTableScalingEnabled,
+        getPos = _this$props10.getPos;
       var _getPluginState = getPluginState(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = findTable(view.state.selection);
@@ -524,11 +527,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
         // re-draw colgroup.
         var previousTable = this.node;
-        if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
+        var isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(currentTable, previousTable);
+        if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
-          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || tablesHaveDifferentNoOfColumns(currentTable, previousTable) && isResizing;
+          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
           if (shouldRecreateResizeCols) {
-            insertColgroupFromNode(this.table, currentTable, isTableScalingEnabled);
+            var start = getPos() || 0;
+            var depth = _view.state.doc.resolve(start).depth;
+            var shouldScale = depth === 0 && isTableScalingEnabled;
+            insertColgroupFromNode(this.table, currentTable, shouldScale);
           }
           updateControls()(_view.state);
         }

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

@@ -38,6 +38,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
   var $cell = state.doc.resolve(localResizeHandlePos);
   var originalTable = $cell.node(-1);
   var start = $cell.start(-1);
+  var tablePos = state.doc.resolve(start).start(-1);
+  var tableDepth = state.doc.resolve(tablePos).depth;
   var dom = domAtPos(start).node;
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
@@ -61,6 +63,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
       getEditorContainerWidth: getEditorContainerWidth
     });
   }
+  var shouldScale = tableDepth === 0 && isTableScalingEnabled;
   var resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize: maxSize,
@@ -68,7 +71,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     tableRef: dom,
     start: start,
     domAtPos: domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled
+    isTableScalingEnabled: shouldScale
   });
   if (evenColumns({
     resizeState: resizeState,
@@ -110,6 +113,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var $cell = state.doc.resolve(resizeHandlePos);
     var start = $cell.start(-1);
     var table = $cell.node(-1);
+    var tablePos = state.doc.resolve(start).start(-1);
+    var tableDepth = state.doc.resolve(tablePos).depth;
 
     // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
@@ -140,7 +145,8 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
         var selectedColumns = selectionRect ? getSelectedColumnIndexes(selectionRect) : [];
         // only selected (or selected - 1) columns should be distributed
         var resizingSelectedColumns = selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
-        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, isTableScalingEnabled);
+        var _shouldScale = tableDepth === 0 && isTableScalingEnabled;
+        var newResizeState = resizeColumn(resizeState, colIndex, clientX - startX, dom, originalTable, resizingSelectedColumns ? selectedColumns : undefined, _shouldScale);
         var resizedDelta = clientX - startX;
         tr = updateColumnWidths(newResizeState, table, start)(tr);
         if (colIndex === map.width - 1) {
@@ -201,9 +207,12 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     }
     var $cell = state.doc.resolve(resizeHandlePos);
     var table = $cell.node(-1);
+    var tablePos = state.doc.resolve(start).start(-1);
+    var tableDepth = state.doc.resolve(tablePos).depth;
     var map = TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
-    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, isTableScalingEnabled);
+    var shouldScale = tableDepth === 0 && isTableScalingEnabled;
+    resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom, table, undefined, shouldScale);
     updateControls()(state);
   }
   window.addEventListener('mouseup', finish);

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

@@ -1,10 +1,17 @@
 // Resize a given column by an amount from the current state
 
+import { getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn } 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 newState = amount > 0 ? growColumn(resizeState, colIndex, amount, selectedColumns) : amount < 0 ? shrinkColumn(resizeState, colIndex, amount, selectedColumns) : resizeState;
+  var scalePercent = 1;
+  var resizeAmount = amount;
+  if (isTableScalingEnabled) {
+    scalePercent = getTableScalingPercent(tableNode, tableRef);
+    resizeAmount = amount / scalePercent;
+  }
+  var newState = resizeAmount > 0 ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeAmount < 0 ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns) : resizeState;
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);
   return newState;
 };

package/dist/esm/transforms/column-width.js

@@ -107,9 +107,10 @@ export var rescaleColumns = function rescaleColumns() {
         possibleMaxWidth: 0,
         isResized: isResized
       };
-      if (isTableScalingEnabled) {
+      var tableDepth = view.state.doc.resolve(table.pos).depth;
+      var shouldScale = isTableScalingEnabled && tableDepth === 0;
+      if (shouldScale) {
         previousTableInfo = {
-          // TODO - ensure correct width is returned when table doesn't have a width value
           width: getTableElementWidth(table.node),
           possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? getTableContainerElementWidth(table.node) : getTableContainerElementWidth(table.node) - insertColumnButtonOffset,
           isResized: isResized
@@ -169,7 +170,7 @@ export var rescaleColumns = function rescaleColumns() {
         tableRef: tableRef,
         domAtPos: domAtPos,
         maxSize: previousTableInfo.possibleMaxWidth,
-        isTableScalingEnabled: isTableScalingEnabled
+        isTableScalingEnabled: shouldScale
       });
 
       // Two scenarios that require scaling:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.8",
+  "version": "7.5.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.6.0",
     "@atlaskit/custom-steps": "^0.0.15",
-    "@atlaskit/editor-common": "^78.12.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-content-insertion": "^1.0.0",

package/src/nodeviews/TableComponent.tsx

@@ -333,32 +333,36 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     const start = getPos() || 0;
     const depth = view.state.doc.resolve(start).depth;
 
-    // TODO - remove this when support is added for nested tables
     if (depth !== 0) {
       return;
     }
 
     const tableNodeWidth = getTableContainerWidth(tableNode);
     const shouldTableScale = tableRenderWidth < tableNodeWidth;
+    if (force || shouldTableScale) {
+      const { width: containerWidthValue } = containerWidth;
+      const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
+
+      const wasTableResized = hasTableBeenResized(this.node);
+      const isTableResied = hasTableBeenResized(tableNode);
+      const isColumnsDistributed = wasTableResized && !isTableResied;
+
+      if (force || (!isResizing && (isWidthChanged || isColumnsDistributed))) {
+        const resizeState = getResizeState({
+          minWidth: COLUMN_MIN_WIDTH,
+          maxSize: tableRenderWidth,
+          table: tableNode,
+          tableRef: this.table,
+          start,
+          domAtPos: view.domAtPos,
+          isTableScalingEnabled: true,
+        });
 
-    const { width: containerWidthValue } = containerWidth;
-    const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
-
-    if (force || (shouldTableScale && !isResizing && isWidthChanged)) {
-      const resizeState = getResizeState({
-        minWidth: COLUMN_MIN_WIDTH,
-        maxSize: tableRenderWidth,
-        table: tableNode,
-        tableRef: this.table,
-        start,
-        domAtPos: view.domAtPos,
-        isTableScalingEnabled: true,
-      });
-
-      // Request animation frame required for Firefox
-      requestAnimationFrame(() => {
-        updateColgroup(resizeState, this.table!, tableNode, true);
-      });
+        // Request animation frame required for Firefox
+        requestAnimationFrame(() => {
+          updateColgroup(resizeState, this.table!, tableNode, true);
+        });
+      }
     }
     this.containerWidth = containerWidth;
   }
@@ -372,6 +376,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isResizing,
       options,
       isTableScalingEnabled,
+      getPos,
     } = this.props;
     const { isInDanger } = getPluginState(view.state);
     const table = findTable(view.state.selection);
@@ -426,24 +431,26 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       // If col widths (e.g. via collab) or number of columns (e.g. delete a column) have changed,
       // re-draw colgroup.
       const previousTable = this.node;
+      const isNoOfColumnsChanged = tablesHaveDifferentNoOfColumns(
+        currentTable,
+        previousTable,
+      );
       if (
         tablesHaveDifferentColumnWidths(currentTable, previousTable) ||
-        tablesHaveDifferentNoOfColumns(currentTable, previousTable)
+        isNoOfColumnsChanged
       ) {
         const { view } = this.props;
 
         const shouldRecreateResizeCols =
           !options?.isTableResizingEnabled ||
           !isResizing ||
-          (tablesHaveDifferentNoOfColumns(currentTable, previousTable) &&
-            isResizing);
+          (isNoOfColumnsChanged && isResizing);
 
         if (shouldRecreateResizeCols) {
-          insertColgroupFromNode(
-            this.table,
-            currentTable,
-            isTableScalingEnabled,
-          );
+          const start = getPos() || 0;
+          const depth = view.state.doc.resolve(start).depth;
+          const shouldScale = depth === 0 && isTableScalingEnabled;
+          insertColgroupFromNode(this.table, currentTable, shouldScale);
         }
 
         updateControls()(view.state);
@@ -888,14 +895,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
     layoutChanged: boolean;
     parentWidth?: number;
   }) => {
-    const {
-      view,
-      getNode,
-      getPos,
-      containerWidth,
-      options,
-      isTableScalingEnabled,
-    } = this.props;
+    const { view, getNode, getPos, containerWidth, options } = this.props;
     const node = getNode();
     const { state, dispatch } = view;
     const pos = getPos();
@@ -920,7 +920,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         ...options,
       },
       domAtPos,
-      isTableScalingEnabled,
+      false,
     )(state.tr);
 
     dispatch(tr);

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

@@ -72,6 +72,8 @@ export const handleMouseDown = (
   const $cell = state.doc.resolve(localResizeHandlePos);
   const originalTable = $cell.node(-1);
   const start = $cell.start(-1);
+  const tablePos = state.doc.resolve(start).start(-1);
+  const tableDepth = state.doc.resolve(tablePos).depth;
 
   let dom: HTMLTableElement = domAtPos(start).node as HTMLTableElement;
   if (dom && dom.nodeName !== 'TABLE') {
@@ -112,6 +114,7 @@ export const handleMouseDown = (
     });
   }
 
+  const shouldScale = tableDepth === 0 && isTableScalingEnabled;
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,
     maxSize,
@@ -119,7 +122,7 @@ export const handleMouseDown = (
     tableRef: dom,
     start,
     domAtPos,
-    isTableScalingEnabled: isTableScalingEnabled,
+    isTableScalingEnabled: shouldScale,
   });
 
   if (
@@ -166,6 +169,8 @@ export const handleMouseDown = (
     const $cell = state.doc.resolve(resizeHandlePos);
     const start = $cell.start(-1);
     const table = $cell.node(-1);
+    const tablePos = state.doc.resolve(start).start(-1);
+    const tableDepth = state.doc.resolve(tablePos).depth;
 
     // If we let go in the same place we started, don't need to do anything.
     if (dragging && clientX === dragging.startX) {
@@ -204,6 +209,8 @@ export const handleMouseDown = (
         const resizingSelectedColumns =
           selectedColumns.indexOf(colIndex) > -1 ||
           selectedColumns.indexOf(colIndex + 1) > -1;
+
+        const shouldScale = tableDepth === 0 && isTableScalingEnabled;
         const newResizeState = resizeColumn(
           resizeState,
           colIndex,
@@ -211,7 +218,7 @@ export const handleMouseDown = (
           dom,
           originalTable,
           resizingSelectedColumns ? selectedColumns : undefined,
-          isTableScalingEnabled,
+          shouldScale,
         );
 
         const resizedDelta = clientX - startX;
@@ -282,12 +289,15 @@ export const handleMouseDown = (
 
     const $cell = state.doc.resolve(resizeHandlePos);
     const table = $cell.node(-1);
+    const tablePos = state.doc.resolve(start).start(-1);
+    const tableDepth = state.doc.resolve(tablePos).depth;
     const map = TableMap.get(table);
     const colIndex =
       map.colCount($cell.pos - $cell.start(-1)) +
       $cell.nodeAfter!.attrs.colspan -
       1;
 
+    const shouldScale = tableDepth === 0 && isTableScalingEnabled;
     resizeColumn(
       resizeState,
       colIndex,
@@ -295,7 +305,7 @@ export const handleMouseDown = (
       dom,
       table,
       undefined,
-      isTableScalingEnabled,
+      shouldScale,
     );
 
     updateControls()(state);

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

@@ -1,6 +1,7 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 
+import { getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn } from './resize-logic';
 import { updateColgroup } from './resize-state';
 import type { ResizeState } from './types';
@@ -14,11 +15,18 @@ export const resizeColumn = (
   selectedColumns?: number[],
   isTableScalingEnabled = false,
 ): ResizeState => {
+  let scalePercent = 1;
+  let resizeAmount = amount;
+
+  if (isTableScalingEnabled) {
+    scalePercent = getTableScalingPercent(tableNode, tableRef);
+    resizeAmount = amount / scalePercent;
+  }
   const newState =
-    amount > 0
-      ? growColumn(resizeState, colIndex, amount, selectedColumns)
-      : amount < 0
-      ? shrinkColumn(resizeState, colIndex, amount, selectedColumns)
+    resizeAmount > 0
+      ? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
+      : resizeAmount < 0
+      ? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
       : resizeState;
 
   updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled);

package/src/transforms/column-width.ts

@@ -132,9 +132,10 @@ export const rescaleColumns =
       isResized,
     };
 
-    if (isTableScalingEnabled) {
+    const tableDepth = view.state.doc.resolve(table.pos).depth;
+    const shouldScale = isTableScalingEnabled && tableDepth === 0;
+    if (shouldScale) {
       previousTableInfo = {
-        // TODO - ensure correct width is returned when table doesn't have a width value
         width: getTableElementWidth(table.node),
         possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width')
           ? getTableContainerElementWidth(table.node)
@@ -217,7 +218,7 @@ export const rescaleColumns =
       tableRef,
       domAtPos,
       maxSize: previousTableInfo.possibleMaxWidth,
-      isTableScalingEnabled,
+      isTableScalingEnabled: shouldScale,
     });
 
     // Two scenarios that require scaling: