@atlaskit/editor-plugin-table 7.5.9 → 7.5.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.11
+
+### Patch Changes
+
+- [#82119](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/82119) [`0358b8d41041`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0358b8d41041) - insert table at full width via shortcut in full width page
+- Updated dependencies
+
+## 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

package/dist/cjs/nodeviews/TableComponent.js

@@ -435,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,
@@ -454,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;
     }
@@ -493,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);
@@ -530,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/plugin.js

@@ -157,8 +157,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _ref6 = options || {},
             dragAndDropEnabled = _ref6.dragAndDropEnabled,
             _ref6$isTableScalingE = _ref6.isTableScalingEnabled,
-            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled);
+            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE,
+            _ref6$fullWidthEnable = _ref6.fullWidthEnabled,
+            fullWidthEnabled = _ref6$fullWidthEnable === void 0 ? false : _ref6$fullWidthEnable;
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',

package/dist/cjs/pm-plugins/keymap.js

@@ -16,7 +16,7 @@ var _columnResize = require("../commands/column-resize");
 var _insert = require("../commands/insert");
 var _commandsWithAnalytics2 = require("../pm-plugins/drag-and-drop/commands-with-analytics");
 var _analytics2 = require("../utils/analytics");
-var createTableWithAnalytics = function createTableWithAnalytics(editorAnalyticsAPI) {
+var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return (0, _analytics2.withEditorAnalyticsAPI)({
     action: _analytics.ACTION.INSERTED,
     actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
@@ -25,14 +25,15 @@ var createTableWithAnalytics = function createTableWithAnalytics(editorAnalytics
       inputMethod: _analytics.INPUT_METHOD.SHORTCUT
     },
     eventType: _analytics.EVENT_TYPE.TRACK
-  })(editorAnalyticsAPI)((0, _commands2.createTable)());
+  })(editorAnalyticsAPI)((0, _commands2.createTable)(isTableScalingEnabled, isFullWidthModeEnabled));
 };
 function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
   var list = {};
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(1), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI)(-1), list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, (0, _commands.chainCommands)((0, _commandsWithAnalytics.deleteTableIfSelectedWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD), (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD)), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, _commands2.moveCursorBackward, list);
 

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/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/cjs/ui/icons/DragHandleDisabledIcon.js

@@ -14,7 +14,8 @@ var DragHandleDisabledIcon = exports.DragHandleDisabledIcon = function DragHandl
     viewBox: "0 0 24 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    style: style
+    style: style,
+    "data-testid": "drag-icon-disabled"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "24",
     height: "16",

package/dist/cjs/ui/icons/DragHandleIcon.js

@@ -11,7 +11,8 @@ var DragHandleIcon = exports.DragHandleIcon = function DragHandleIcon() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "16",
-    fill: "none"
+    fill: "none",
+    "data-testid": "drag-icon-enabled"
   }, /*#__PURE__*/_react.default.createElement("rect", {
     width: "24",
     height: "16",

package/dist/es2019/nodeviews/TableComponent.js

@@ -418,7 +418,6 @@ class TableComponent extends React.Component {
     }
   }
   handleColgroupUpdates(force = false) {
-    var _this$containerWidth;
     const {
       getNode,
       containerWidth,
@@ -436,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;
   }
@@ -474,7 +477,8 @@ class TableComponent extends React.Component {
       allowColumnResizing,
       isResizing,
       options,
-      isTableScalingEnabled
+      isTableScalingEnabled,
+      getPos
     } = this.props;
     const {
       isInDanger
@@ -513,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/plugin.js

@@ -149,9 +149,10 @@ const tablesPlugin = ({
         plugin: () => {
           const {
             dragAndDropEnabled,
-            isTableScalingEnabled = false
+            isTableScalingEnabled = false,
+            fullWidthEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',

package/dist/es2019/pm-plugins/keymap.js

@@ -9,7 +9,7 @@ import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardCol
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
-const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
+const createTableWithAnalytics = (isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) => withEditorAnalyticsAPI({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
   actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -17,12 +17,12 @@ const createTableWithAnalytics = editorAnalyticsAPI => withEditorAnalyticsAPI({
     inputMethod: INPUT_METHOD.SHORTCUT
   },
   eventType: EVENT_TYPE.TRACK
-})(editorAnalyticsAPI)(createTable());
-export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false) {
+})(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
+export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled) {
   const list = {};
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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/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/es2019/ui/icons/DragHandleDisabledIcon.js

@@ -7,7 +7,8 @@ export const DragHandleDisabledIcon = ({
   viewBox: "0 0 24 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
-  style: style
+  style: style,
+  "data-testid": "drag-icon-disabled"
 }, /*#__PURE__*/React.createElement("rect", {
   width: "24",
   height: "16",

package/dist/es2019/ui/icons/DragHandleIcon.js

@@ -3,7 +3,8 @@ export const DragHandleIcon = () => /*#__PURE__*/React.createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "16",
-  fill: "none"
+  fill: "none",
+  "data-testid": "drag-icon-enabled"
 }, /*#__PURE__*/React.createElement("rect", {
   width: "24",
   height: "16",

package/dist/esm/nodeviews/TableComponent.js

@@ -428,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,
@@ -447,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;
     }
@@ -486,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);
@@ -523,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/plugin.js

@@ -150,8 +150,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _ref6 = options || {},
             dragAndDropEnabled = _ref6.dragAndDropEnabled,
             _ref6$isTableScalingE = _ref6.isTableScalingEnabled,
-            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE;
-          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled);
+            isTableScalingEnabled = _ref6$isTableScalingE === void 0 ? false : _ref6$isTableScalingE,
+            _ref6$fullWidthEnable = _ref6.fullWidthEnabled,
+            fullWidthEnabled = _ref6$fullWidthEnable === void 0 ? false : _ref6$fullWidthEnable;
+          return keymapPlugin(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, fullWidthEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',

package/dist/esm/pm-plugins/keymap.js

@@ -9,7 +9,7 @@ import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardCol
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
-var createTableWithAnalytics = function createTableWithAnalytics(editorAnalyticsAPI) {
+var createTableWithAnalytics = function createTableWithAnalytics(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return withEditorAnalyticsAPI({
     action: ACTION.INSERTED,
     actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -18,14 +18,15 @@ var createTableWithAnalytics = function createTableWithAnalytics(editorAnalytics
       inputMethod: INPUT_METHOD.SHORTCUT
     },
     eventType: EVENT_TYPE.TRACK
-  })(editorAnalyticsAPI)(createTable());
+  })(editorAnalyticsAPI)(createTable(isTableScalingEnabled, isFullWidthModeEnabled));
 };
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
   var list = {};
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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/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/dist/esm/ui/icons/DragHandleDisabledIcon.js

@@ -7,7 +7,8 @@ export var DragHandleDisabledIcon = function DragHandleDisabledIcon(_ref) {
     viewBox: "0 0 24 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    style: style
+    style: style,
+    "data-testid": "drag-icon-disabled"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "24",
     height: "16",

package/dist/esm/ui/icons/DragHandleIcon.js

@@ -4,7 +4,8 @@ export var DragHandleIcon = function DragHandleIcon() {
     xmlns: "http://www.w3.org/2000/svg",
     width: "24",
     height: "16",
-    fill: "none"
+    fill: "none",
+    "data-testid": "drag-icon-enabled"
   }, /*#__PURE__*/React.createElement("rect", {
     width: "24",
     height: "16",

package/dist/types/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,5 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.5.9",
+  "version": "7.5.11",
   "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",
@@ -46,7 +46,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.0.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^4.1.0",
+    "@atlaskit/primitives": "^5.0.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.41.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);

package/src/plugin.tsx

@@ -266,14 +266,17 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         {
           name: 'tableKeymap',
           plugin: () => {
-            const { dragAndDropEnabled, isTableScalingEnabled = false } =
-              options || ({} as TablePluginOptions);
-
+            const {
+              dragAndDropEnabled,
+              isTableScalingEnabled = false,
+              fullWidthEnabled = false,
+            } = options || ({} as TablePluginOptions);
             return keymapPlugin(
               defaultGetEditorContainerWidth,
               editorAnalyticsAPI,
               dragAndDropEnabled,
               isTableScalingEnabled,
+              fullWidthEnabled,
             );
           },
         },

package/src/pm-plugins/keymap.ts

@@ -56,6 +56,8 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 import { withEditorAnalyticsAPI } from '../utils/analytics';
 
 const createTableWithAnalytics = (
+  isTableScalingEnabled: boolean,
+  isFullWidthModeEnabled: boolean,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ) =>
   withEditorAnalyticsAPI({
@@ -64,13 +66,16 @@ const createTableWithAnalytics = (
     actionSubjectId: ACTION_SUBJECT_ID.TABLE,
     attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
     eventType: EVENT_TYPE.TRACK,
-  })(editorAnalyticsAPI)(createTable());
+  })(editorAnalyticsAPI)(
+    createTable(isTableScalingEnabled, isFullWidthModeEnabled),
+  );
 
 export function keymapPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
   dragAndDropEnabled?: boolean,
   isTableScalingEnabled = false,
+  isFullWidthEnabled?: boolean,
 ): SafePlugin {
   const list = {};
 
@@ -86,7 +91,11 @@ export function keymapPlugin(
   );
   bindKeymapWithCommand(
     toggleTable.common!,
-    createTableWithAnalytics(editorAnalyticsAPI),
+    createTableWithAnalytics(
+      isTableScalingEnabled,
+      !!isFullWidthEnabled,
+      editorAnalyticsAPI,
+    ),
     list,
   );
   bindKeymapWithCommand(

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/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:

package/src/ui/icons/DragHandleDisabledIcon.tsx

@@ -14,6 +14,7 @@ export const DragHandleDisabledIcon = ({
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
     style={style}
+    data-testid="drag-icon-disabled"
   >
     <rect width="24" height="16" rx="4" />
     <g>

package/src/ui/icons/DragHandleIcon.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
 export const DragHandleIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" fill="none">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="16"
+    fill="none"
+    data-testid="drag-icon-enabled"
+  >
     <rect width="24" height="16" rx="4" />
     <g>
       <path d="M9 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM9 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM17 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 10a1 1 0 1 0-2 0 1 1 0 0 0 2 0ZM13 6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Z" />