@atlaskit/editor-plugin-table 7.29.9 → 7.30.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 7.30.0
+
+### Minor Changes
+
+- [#159340](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159340)
+  [`aa03078fd0c80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa03078fd0c80) -
+  [ux] [ED-25398] This change is enabling nested tables behind a feature gate.
+
+### Patch Changes
+
+- [`9546839a5b527`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9546839a5b527) -
+  [ux] Fix comically wide table columns widths when table nested inside a nested node.
+- Updated dependencies
+
+## 7.29.10
+
+### Patch Changes
+
+- [#159176](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159176)
+  [`8f1d77592a9dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8f1d77592a9dc) -
+  Bump adf-schema to 44.2.0
+- Updated dependencies
+
 ## 7.29.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -65,6 +65,10 @@ var initialOverflowCaptureTimeroutDelay = 300;
 // the current collected data becomes stale and we want to start collecting fresh data again in future.
 // PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
 var isOverflowAnalyticsEnabled = false;
+
+// Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
+var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
+var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -157,6 +161,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevAttrs = prevNode.attrs;
       var isNested = (0, _utils5.isTableNested)(_this.props.view.state, _this.props.getPos());
       var parentWidth = _this.getParentNodeWidth();
+      if (isNested && (0, _utils5.isTableNestedInMoreThanOneNode)(_this.props.view.state, _this.props.getPos()) && (0, _platformFeatureFlags.fg)('platform_editor_nested_table_in_nested_parent_fix')) {
+        var resizeObsWrapperWidth = _this.wrapperWidth || 0;
+        var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
+        var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
+        // 1. Check isOusideOfThreshold is added to prevent undersired state update.
+        // When table is nested in the extenstion and the table column is being resized,
+        // space available within extension can change and cause undesirable state update.
+        // MIN_THRESNESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLDHOLD value is required
+        // as the resizeObsWrapperWidth can differ between page reloads by 2px.
+
+        // 2. Check resizeObsWrapperWidth > 1 is added to prevent parentWidth update when table unmounts.
+        // When a is nested table in a nested expand and the expand collabses, the table unmounts and
+        // resizeObsWrapperWidth becomes 1.
+        parentWidth = isOusideOfThreshold && resizeObsWrapperWidth > 1 ? resizeObsWrapperWidth : _this.state.parentWidth;
+      }
       var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
@@ -358,7 +377,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$table, _this$table2, _this$table3;
+      var _this$table,
+        _this$table2,
+        _this$table3,
+        _this2 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -379,6 +401,23 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
         this.handleColgroupUpdates(true);
       }
+      if (this.wrapper && (0, _platformFeatureFlags.fg)('platform_editor_nested_table_in_nested_parent_fix')) {
+        this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
+          var _iterator2 = _createForOfIteratorHelper(entries),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var entry = _step2.value;
+              _this2.wrapperWidth = entry.contentRect.width;
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        });
+        this.wrapperReisizeObserver.observe(this.wrapper);
+      }
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
@@ -416,7 +455,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$resizeObserver, _this$table4, _this$table5, _this$table6;
+      var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -429,6 +468,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.dragAndDropCleanupFn();
       }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
+      (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
       if (this.stickyScrollbar) {
         this.stickyScrollbar.dispose();
       }
@@ -481,7 +521,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this2 = this;
+      var _this3 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -555,18 +595,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
           var scalePercent = 1;
           requestAnimationFrame(function () {
-            var _this2$props$options, _this2$props$options2;
+            var _this3$props$options, _this3$props$options2;
             // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
             // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
             // inside of getTableScalingPercent returns 0.
-            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
-              scalePercent = (0, _misc.getTableScalingPercent)(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            if (!((_this3$props$options = _this3.props.options) !== null && _this3$props$options !== void 0 && _this3$props$options.isCommentEditor) || (_this3$props$options2 = _this3.props.options) !== null && _this3$props$options2 !== void 0 && _this3$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = (0, _misc.getTableScalingPercent)(tableNode, _this3.table, shouldUseIncreasedScalingPercent);
             } else {
-              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this2.table);
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this3.table);
             }
 
             // Request animation frame required for Firefox
-            (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            (0, _utils4.updateColgroup)(resizeState, _this3.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
       }
@@ -580,7 +620,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props$options8,
         _this$props$options9,
         _this$wrapper,
-        _this3 = this;
+        _this4 = this;
       var _this$props11 = this.props,
         view = _this$props11.view,
         getNode = _this$props11.getNode,
@@ -627,7 +667,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this3.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
+            _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(_this4.updateShadowState, _this4.table, _this4.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -704,7 +744,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this,
+      var _this5 = this,
         _this$state$stickyHea2,
         _this$state$stickyHea3,
         _this$props$options10,
@@ -795,8 +835,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper;
-          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
+          var _this5$wrapper;
+          return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
@@ -861,12 +901,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper2;
-          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
+          var _this5$wrapper2;
+          return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this4$wrapper3;
-          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
+          var _this5$wrapper3;
+          return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         contentEditable: false
@@ -888,14 +928,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this4.wrapper = elem;
+          _this5.wrapper = elem;
           if (elem) {
-            _this4.props.contentDOM(elem);
+            _this5.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this4.table) {
-              _this4.table = tableElement;
-              _this4.createShadowSentinels(_this4.table);
-              _this4.observeTable(_this4.table);
+            if (tableElement !== _this5.table) {
+              _this5.table = tableElement;
+              _this5.createShadowSentinels(_this5.table);
+              _this5.observeTable(_this5.table);
             }
           }
         }

package/dist/cjs/plugin.js

@@ -18,6 +18,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _insert = require("./commands/insert");
 var _createPluginConfig = require("./create-plugin-config");
 var _plugin = require("./pm-plugins/analytics/plugin");
@@ -143,12 +144,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
     nodes: function nodes() {
       var _pluginConfig = (0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions),
         allowColumnResizing = _pluginConfig.allowColumnResizing;
-      return [{
+      var isNestingSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes');
+      return isNestingSupported ? [{
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
-          getEditorContainerWidth: defaultGetEditorContainerWidth
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported: isNestingSupported
+        })
+      }, {
+        name: 'tableHeader',
+        node: _adfSchema.tableHeaderWithNestedTable
+      }, {
+        name: 'tableRow',
+        node: _adfSchema.tableRowWithNestedTable
+      }, {
+        name: 'tableCell',
+        node: _adfSchema.tableCellWithNestedTable
+      }] : [{
+        name: 'table',
+        node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported: isNestingSupported
         })
       }, {
         name: 'tableHeader',

package/dist/cjs/toDOM.js

@@ -20,10 +20,11 @@ var _consts = require("./pm-plugins/table-resizing/utils/consts");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
+  var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
   if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
-    return _adfSchema.table;
+    return tableNode;
   }
-  return _objectSpread(_objectSpread({}, _adfSchema.table), {}, {
+  return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
       var gutterPadding = (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
       var editorWidthFromGetter = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? undefined : Math.min(config.getEditorContainerWidth().width - gutterPadding, node.attrs.width);

package/dist/cjs/utils/index.js

@@ -291,6 +291,12 @@ Object.defineProperty(exports, "isTableNested", {
     return _nodes.isTableNested;
   }
 });
+Object.defineProperty(exports, "isTableNestedInMoreThanOneNode", {
+  enumerable: true,
+  get: function get() {
+    return _nodes.isTableNestedInMoreThanOneNode;
+  }
+});
 Object.defineProperty(exports, "tablesHaveDifferentColumnWidths", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/nodes.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = void 0;
+exports.tablesHaveDifferentNoOfRows = exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNestedInMoreThanOneNode = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -106,6 +106,10 @@ var isTableNested = exports.isTableNested = function isTableNested(state) {
   var nodeTypes = state.schema.nodes;
   return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
+var isTableNestedInMoreThanOneNode = exports.isTableNestedInMoreThanOneNode = function isTableNestedInMoreThanOneNode(state) {
+  var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return state.doc.resolve(tablePos).depth > 2;
+};
 var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   return (0, _utils.mapChildren)(node, function (child) {
     return child.attrs.rowspan || 0;

package/dist/es2019/nodeviews/TableComponent.js

@@ -28,7 +28,7 @@ import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '.
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, getAssistiveMessage, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
+import { containsHeaderRow, getAssistiveMessage, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
 import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -44,6 +44,10 @@ const initialOverflowCaptureTimeroutDelay = 300;
 // the current collected data becomes stale and we want to start collecting fresh data again in future.
 // PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
 const isOverflowAnalyticsEnabled = false;
+
+// Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
+const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
+const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -139,7 +143,22 @@ class TableComponent extends React.Component {
       const node = getNode();
       const prevAttrs = prevNode.attrs;
       const isNested = isTableNested(this.props.view.state, this.props.getPos());
-      const parentWidth = this.getParentNodeWidth();
+      let parentWidth = this.getParentNodeWidth();
+      if (isNested && isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos()) && fg('platform_editor_nested_table_in_nested_parent_fix')) {
+        const resizeObsWrapperWidth = this.wrapperWidth || 0;
+        const wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (this.state.parentWidth || 0));
+        const isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
+        // 1. Check isOusideOfThreshold is added to prevent undersired state update.
+        // When table is nested in the extenstion and the table column is being resized,
+        // space available within extension can change and cause undesirable state update.
+        // MIN_THRESNESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLDHOLD value is required
+        // as the resizeObsWrapperWidth can differ between page reloads by 2px.
+
+        // 2. Check resizeObsWrapperWidth > 1 is added to prevent parentWidth update when table unmounts.
+        // When a is nested table in a nested expand and the expand collabses, the table unmounts and
+        // resizeObsWrapperWidth becomes 1.
+        parentWidth = isOusideOfThreshold && resizeObsWrapperWidth > 1 ? resizeObsWrapperWidth : this.state.parentWidth;
+      }
       const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
       const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
       const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
@@ -361,6 +380,14 @@ class TableComponent extends React.Component {
     if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
       this.handleColgroupUpdates(true);
     }
+    if (this.wrapper && fg('platform_editor_nested_table_in_nested_parent_fix')) {
+      this.wrapperReisizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          this.wrapperWidth = entry.contentRect.width;
+        }
+      });
+      this.wrapperReisizeObserver.observe(this.wrapper);
+    }
     if (allowColumnResizing && this.wrapper && !isIE11) {
       this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
         passive: true
@@ -396,7 +423,7 @@ class TableComponent extends React.Component {
     }
   }
   componentWillUnmount() {
-    var _this$resizeObserver, _this$table4, _this$table5, _this$table6;
+    var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
     const {
       allowColumnResizing,
       eventDispatcher,
@@ -410,6 +437,7 @@ class TableComponent extends React.Component {
       this.dragAndDropCleanupFn();
     }
     (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
+    (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 ? void 0 : _this$wrapperReisizeO.disconnect();
     if (this.stickyScrollbar) {
       this.stickyScrollbar.dispose();
     }

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -10,6 +10,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
@@ -133,12 +134,31 @@ const tablesPlugin = ({
       const {
         allowColumnResizing
       } = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions);
-      return [{
+      const isNestingSupported = fg('platform_editor_use_nested_table_pm_nodes');
+      return isNestingSupported ? [{
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
-          getEditorContainerWidth: defaultGetEditorContainerWidth
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported
+        })
+      }, {
+        name: 'tableHeader',
+        node: tableHeaderWithNestedTable
+      }, {
+        name: 'tableRow',
+        node: tableRowWithNestedTable
+      }, {
+        name: 'tableCell',
+        node: tableCellWithNestedTable
+      }] : [{
+        name: 'table',
+        node: tableNodeSpecWithFixedToDOM({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported
         })
       }, {
         name: 'tableHeader',

package/dist/es2019/toDOM.js

@@ -1,5 +1,5 @@
 import kebabCase from 'lodash/kebabCase';
-import { table } from '@atlaskit/adf-schema';
+import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -8,11 +8,12 @@ import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export const tableNodeSpecWithFixedToDOM = config => {
+  const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-    return table;
+    return tableNode;
   }
   return {
-    ...table,
+    ...tableNode,
     toDOM: node => {
       const gutterPadding = akEditorGutterPaddingDynamic() * 2;
       const editorWidthFromGetter = fg('platform_editor_breakout_use_css') ? undefined : Math.min(config.getEditorContainerWidth().width - gutterPadding, node.attrs.width);

package/dist/es2019/utils/index.js

@@ -1,6 +1,6 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createCellHoverDecoration, updateDecorations, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
-export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested } from './nodes';
+export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, isTableNestedInMoreThanOneNode } from './nodes';
 export { transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, getColumnDeleteButtonParams, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';

package/dist/es2019/utils/nodes.js

@@ -87,6 +87,9 @@ export const isTableNested = (state, tablePos = 0) => {
   const nodeTypes = state.schema.nodes;
   return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
+export const isTableNestedInMoreThanOneNode = (state, tablePos = 0) => {
+  return state.doc.resolve(tablePos).depth > 2;
+};
 const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
 
 /**

package/dist/esm/nodeviews/TableComponent.js

@@ -42,7 +42,7 @@ import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from '.
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
-import { containsHeaderRow, getAssistiveMessage, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
+import { containsHeaderRow, getAssistiveMessage, isTableNested, isTableNestedInMoreThanOneNode, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows } from '../utils';
 import { ExternalDropTargets } from './ExternalDropTargets';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
@@ -58,6 +58,10 @@ var initialOverflowCaptureTimeroutDelay = 300;
 // the current collected data becomes stale and we want to start collecting fresh data again in future.
 // PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
 var isOverflowAnalyticsEnabled = false;
+
+// Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
+var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
+var NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -150,6 +154,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var prevAttrs = prevNode.attrs;
       var isNested = isTableNested(_this.props.view.state, _this.props.getPos());
       var parentWidth = _this.getParentNodeWidth();
+      if (isNested && isTableNestedInMoreThanOneNode(_this.props.view.state, _this.props.getPos()) && fg('platform_editor_nested_table_in_nested_parent_fix')) {
+        var resizeObsWrapperWidth = _this.wrapperWidth || 0;
+        var wrapperWidthDiffBetweenRerenders = Math.abs(resizeObsWrapperWidth - (_this.state.parentWidth || 0));
+        var isOusideOfThreshold = wrapperWidthDiffBetweenRerenders <= NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD || wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
+        // 1. Check isOusideOfThreshold is added to prevent undersired state update.
+        // When table is nested in the extenstion and the table column is being resized,
+        // space available within extension can change and cause undesirable state update.
+        // MIN_THRESNESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLDHOLD value is required
+        // as the resizeObsWrapperWidth can differ between page reloads by 2px.
+
+        // 2. Check resizeObsWrapperWidth > 1 is added to prevent parentWidth update when table unmounts.
+        // When a is nested table in a nested expand and the expand collabses, the table unmounts and
+        // resizeObsWrapperWidth becomes 1.
+        parentWidth = isOusideOfThreshold && resizeObsWrapperWidth > 1 ? resizeObsWrapperWidth : _this.state.parentWidth;
+      }
       var parentWidthChanged = parentWidth && parentWidth !== _this.state.parentWidth;
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
@@ -351,7 +370,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$table, _this$table2, _this$table3;
+      var _this$table,
+        _this$table2,
+        _this$table3,
+        _this2 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -372,6 +394,23 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
         this.handleColgroupUpdates(true);
       }
+      if (this.wrapper && fg('platform_editor_nested_table_in_nested_parent_fix')) {
+        this.wrapperReisizeObserver = new ResizeObserver(function (entries) {
+          var _iterator2 = _createForOfIteratorHelper(entries),
+            _step2;
+          try {
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var entry = _step2.value;
+              _this2.wrapperWidth = entry.contentRect.width;
+            }
+          } catch (err) {
+            _iterator2.e(err);
+          } finally {
+            _iterator2.f();
+          }
+        });
+        this.wrapperReisizeObserver.observe(this.wrapper);
+      }
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
@@ -409,7 +448,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$resizeObserver, _this$table4, _this$table5, _this$table6;
+      var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
         eventDispatcher = _this$props8.eventDispatcher,
@@ -422,6 +461,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.dragAndDropCleanupFn();
       }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
+      (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
       if (this.stickyScrollbar) {
         this.stickyScrollbar.dispose();
       }
@@ -474,7 +514,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
-      var _this2 = this;
+      var _this3 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -548,18 +588,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
           var scalePercent = 1;
           requestAnimationFrame(function () {
-            var _this2$props$options, _this2$props$options2;
+            var _this3$props$options, _this3$props$options2;
             // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
             // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
             // inside of getTableScalingPercent returns 0.
-            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
-              scalePercent = getTableScalingPercent(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            if (!((_this3$props$options = _this3.props.options) !== null && _this3$props$options !== void 0 && _this3$props$options.isCommentEditor) || (_this3$props$options2 = _this3.props.options) !== null && _this3$props$options2 !== void 0 && _this3$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = getTableScalingPercent(tableNode, _this3.table, shouldUseIncreasedScalingPercent);
             } else {
-              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this2.table);
+              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this3.table);
             }
 
             // Request animation frame required for Firefox
-            updateColgroup(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            updateColgroup(resizeState, _this3.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
       }
@@ -573,7 +613,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props$options8,
         _this$props$options9,
         _this$wrapper,
-        _this3 = this;
+        _this4 = this;
       var _this$props11 = this.props,
         view = _this$props11.view,
         getNode = _this$props11.getNode,
@@ -620,7 +660,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this3.overflowShadowsObserver = new OverflowShadowsObserver(_this3.updateShadowState, _this3.table, _this3.wrapper);
+            _this4.overflowShadowsObserver = new OverflowShadowsObserver(_this4.updateShadowState, _this4.table, _this4.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -697,7 +737,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this4 = this,
+      var _this5 = this,
         _this$state$stickyHea2,
         _this$state$stickyHea3,
         _this$props$options10,
@@ -788,8 +828,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper;
-          return ((_this4$wrapper = _this4.wrapper) === null || _this4$wrapper === void 0 ? void 0 : _this4$wrapper.scrollLeft) || 0;
+          var _this5$wrapper;
+          return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
@@ -854,12 +894,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this4$wrapper2;
-          return ((_this4$wrapper2 = _this4.wrapper) === null || _this4$wrapper2 === void 0 ? void 0 : _this4$wrapper2.scrollLeft) || 0;
+          var _this5$wrapper2;
+          return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this4$wrapper3;
-          return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
+          var _this5$wrapper3;
+          return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         contentEditable: false
@@ -881,14 +921,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this4.wrapper = elem;
+          _this5.wrapper = elem;
           if (elem) {
-            _this4.props.contentDOM(elem);
+            _this5.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this4.table) {
-              _this4.table = tableElement;
-              _this4.createShadowSentinels(_this4.table);
-              _this4.observeTable(_this4.table);
+            if (tableElement !== _this5.table) {
+              _this5.table = tableElement;
+              _this5.createShadowSentinels(_this5.table);
+              _this5.observeTable(_this5.table);
             }
           }
         }

package/dist/esm/plugin.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -13,6 +13,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
@@ -136,12 +137,31 @@ var tablesPlugin = function tablesPlugin(_ref) {
     nodes: function nodes() {
       var _pluginConfig = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions),
         allowColumnResizing = _pluginConfig.allowColumnResizing;
-      return [{
+      var isNestingSupported = fg('platform_editor_use_nested_table_pm_nodes');
+      return isNestingSupported ? [{
         name: 'table',
         node: tableNodeSpecWithFixedToDOM({
           allowColumnResizing: Boolean(allowColumnResizing),
           tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
-          getEditorContainerWidth: defaultGetEditorContainerWidth
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported: isNestingSupported
+        })
+      }, {
+        name: 'tableHeader',
+        node: tableHeaderWithNestedTable
+      }, {
+        name: 'tableRow',
+        node: tableRowWithNestedTable
+      }, {
+        name: 'tableCell',
+        node: tableCellWithNestedTable
+      }] : [{
+        name: 'table',
+        node: tableNodeSpecWithFixedToDOM({
+          allowColumnResizing: Boolean(allowColumnResizing),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          getEditorContainerWidth: defaultGetEditorContainerWidth,
+          isNestingSupported: isNestingSupported
         })
       }, {
         name: 'tableHeader',

package/dist/esm/toDOM.js

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import kebabCase from 'lodash/kebabCase';
-import { table } from '@atlaskit/adf-schema';
+import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -13,10 +13,11 @@ import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup, getResizerMinWidth } from './pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
+  var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-    return table;
+    return tableNode;
   }
-  return _objectSpread(_objectSpread({}, table), {}, {
+  return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
       var gutterPadding = akEditorGutterPaddingDynamic() * 2;
       var editorWidthFromGetter = fg('platform_editor_breakout_use_css') ? undefined : Math.min(config.getEditorContainerWidth().width - gutterPadding, node.attrs.width);

package/dist/esm/utils/index.js

@@ -1,6 +1,6 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createCellHoverDecoration, updateDecorations, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
-export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested } from './nodes';
+export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, isTableNestedInMoreThanOneNode } from './nodes';
 export { transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, getColumnDeleteButtonParams, getColumnIndexMappedToColumnIndexInFirstRow } from './column-controls';

package/dist/esm/utils/nodes.js

@@ -99,6 +99,10 @@ export var isTableNested = function isTableNested(state) {
   var nodeTypes = state.schema.nodes;
   return parent.type === nodeTypes.layoutColumn || parent.type === nodeTypes.expand || parent.type === nodeTypes.bodiedExtension || parent.type === nodeTypes.extensionFrame;
 };
+export var isTableNestedInMoreThanOneNode = function isTableNestedInMoreThanOneNode(state) {
+  var tablePos = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return state.doc.resolve(tablePos).depth > 2;
+};
 var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   return mapChildren(node, function (child) {
     return child.attrs.rowspan || 0;

package/dist/types/toDOM.d.ts

@@ -1,9 +1,10 @@
-import { table } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
+    isNestingSupported?: boolean;
 };
-export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec;
 export {};

package/dist/types/utils/index.d.ts

@@ -1,6 +1,6 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createCellHoverDecoration, updateDecorations, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
-export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, } from './nodes';
+export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, isTableNestedInMoreThanOneNode, } from './nodes';
 export { transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, getColumnDeleteButtonParams, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';

package/dist/types/utils/nodes.d.ts

@@ -11,6 +11,7 @@ export declare const tablesHaveDifferentColumnWidths: (currentTable: PmNode, pre
 export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const tablesHaveDifferentNoOfRows: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
+export declare const isTableNestedInMoreThanOneNode: (state: EditorState, tablePos?: number) => boolean;
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells

package/dist/types-ts4.5/toDOM.d.ts

@@ -1,9 +1,10 @@
-import { table } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
+import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
 type Config = {
     allowColumnResizing: boolean;
     tableResizingEnabled: boolean;
     getEditorContainerWidth: GetEditorContainerWidth;
+    isNestingSupported?: boolean;
 };
-export declare const tableNodeSpecWithFixedToDOM: (config: Config) => typeof table;
+export declare const tableNodeSpecWithFixedToDOM: (config: Config) => NodeSpec;
 export {};

package/dist/types-ts4.5/utils/index.d.ts

@@ -1,6 +1,6 @@
 export { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
 export { findControlsHoverDecoration, createControlsHoverDecoration, createCellHoverDecoration, updateDecorations, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
-export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, } from './nodes';
+export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, isTableNestedInMoreThanOneNode, } from './nodes';
 export { transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
 export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
 export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, getColumnDeleteButtonParams, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';

package/dist/types-ts4.5/utils/nodes.d.ts

@@ -11,6 +11,7 @@ export declare const tablesHaveDifferentColumnWidths: (currentTable: PmNode, pre
 export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const tablesHaveDifferentNoOfRows: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
+export declare const isTableNestedInMoreThanOneNode: (state: EditorState, tablePos?: number) => boolean;
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.29.9",
+	"version": "7.30.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,14 +27,14 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^42.3.1",
+		"@atlaskit/adf-schema": "^44.2.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.8.0",
-		"@atlaskit/editor-common": "^94.8.0",
+		"@atlaskit/editor-common": "^94.10.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
-		"@atlaskit/editor-plugin-batch-attribute-updates": "1.1.3",
+		"@atlaskit/editor-plugin-batch-attribute-updates": "1.1.4",
 		"@atlaskit/editor-plugin-content-insertion": "^1.9.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.0.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.10.0",
+		"@atlaskit/tmp-editor-statsig": "^2.11.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.0.0",
 		"@atlaskit/tooltip": "^18.8.0",
@@ -112,8 +112,14 @@
 		"platform_editor_breakout_use_css": {
 			"type": "boolean"
 		},
+		"platform_editor_nested_table_in_nested_parent_fix": {
+			"type": "boolean"
+		},
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
+		},
+		"platform_editor_use_nested_table_pm_nodes": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -70,6 +70,7 @@ import {
 	containsHeaderRow,
 	getAssistiveMessage,
 	isTableNested,
+	isTableNestedInMoreThanOneNode,
 	tablesHaveDifferentColumnWidths,
 	tablesHaveDifferentNoOfColumns,
 	tablesHaveDifferentNoOfRows,
@@ -93,6 +94,10 @@ const initialOverflowCaptureTimeroutDelay = 300;
 // PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
 const isOverflowAnalyticsEnabled = false;
 
+// Prevent unnecessary parentWidth updates when table is nested inside of a node that is nested itself.
+const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD = 2;
+const NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD = 20;
+
 interface ComponentProps {
 	view: EditorView;
 	getNode: () => PmNode;
@@ -162,6 +167,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private initialOverflowCaptureTimerId?: ReturnType<typeof setTimeout>;
 	private resizeObserver?: ResizeObserver;
 
+	private wrapperWidth?: number;
+	private wrapperReisizeObserver?: ResizeObserver;
+
 	private dragAndDropCleanupFn?: CleanupFn;
 
 	constructor(props: ComponentProps) {
@@ -248,6 +256,16 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			this.handleColgroupUpdates(true);
 		}
 
+		if (this.wrapper && fg('platform_editor_nested_table_in_nested_parent_fix')) {
+			this.wrapperReisizeObserver = new ResizeObserver((entries) => {
+				for (const entry of entries) {
+					this.wrapperWidth = entry.contentRect.width;
+				}
+			});
+
+			this.wrapperReisizeObserver.observe(this.wrapper);
+		}
+
 		if (allowColumnResizing && this.wrapper && !isIE11) {
 			this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
 				passive: true,
@@ -305,6 +323,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		}
 
 		this.resizeObserver?.disconnect();
+		this.wrapperReisizeObserver?.disconnect();
 
 		if (this.stickyScrollbar) {
 			this.stickyScrollbar.dispose();
@@ -1025,7 +1044,37 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const isNested = isTableNested(this.props.view.state, this.props.getPos());
 
-		const parentWidth = this.getParentNodeWidth();
+		let parentWidth = this.getParentNodeWidth();
+
+		if (
+			isNested &&
+			isTableNestedInMoreThanOneNode(this.props.view.state, this.props.getPos()) &&
+			fg('platform_editor_nested_table_in_nested_parent_fix')
+		) {
+			const resizeObsWrapperWidth = this.wrapperWidth || 0;
+
+			const wrapperWidthDiffBetweenRerenders = Math.abs(
+				resizeObsWrapperWidth - (this.state.parentWidth || 0),
+			);
+			const isOusideOfThreshold =
+				wrapperWidthDiffBetweenRerenders <=
+					NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLD ||
+				wrapperWidthDiffBetweenRerenders > NESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MAX_THRESHOLD;
+			// 1. Check isOusideOfThreshold is added to prevent undersired state update.
+			// When table is nested in the extenstion and the table column is being resized,
+			// space available within extension can change and cause undesirable state update.
+			// MIN_THRESNESTED_TABLE_IN_NESTED_PARENT_WIDTH_DIFF_MIN_THRESHOLDHOLD value is required
+			// as the resizeObsWrapperWidth can differ between page reloads by 2px.
+
+			// 2. Check resizeObsWrapperWidth > 1 is added to prevent parentWidth update when table unmounts.
+			// When a is nested table in a nested expand and the expand collabses, the table unmounts and
+			// resizeObsWrapperWidth becomes 1.
+			parentWidth =
+				isOusideOfThreshold && resizeObsWrapperWidth > 1
+					? resizeObsWrapperWidth
+					: this.state.parentWidth;
+		}
+
 		const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
 
 		const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);

package/src/plugin.tsx

@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
+import {
+	tableCell,
+	tableCellWithNestedTable,
+	tableHeader,
+	tableHeaderWithNestedTable,
+	tableRow,
+	tableRowWithNestedTable,
+} from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
 	ACTION,
@@ -39,6 +46,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
@@ -258,20 +266,37 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
 		nodes() {
 			const { allowColumnResizing } = pluginConfig(options?.tableOptions);
-
-			return [
-				{
-					name: 'table',
-					node: tableNodeSpecWithFixedToDOM({
-						allowColumnResizing: Boolean(allowColumnResizing),
-						tableResizingEnabled: Boolean(options?.tableResizingEnabled),
-						getEditorContainerWidth: defaultGetEditorContainerWidth,
-					}),
-				},
-				{ name: 'tableHeader', node: tableHeader },
-				{ name: 'tableRow', node: tableRow },
-				{ name: 'tableCell', node: tableCell },
-			];
+			const isNestingSupported = fg('platform_editor_use_nested_table_pm_nodes');
+
+			return isNestingSupported
+				? [
+						{
+							name: 'table',
+							node: tableNodeSpecWithFixedToDOM({
+								allowColumnResizing: Boolean(allowColumnResizing),
+								tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+								getEditorContainerWidth: defaultGetEditorContainerWidth,
+								isNestingSupported,
+							}),
+						},
+						{ name: 'tableHeader', node: tableHeaderWithNestedTable },
+						{ name: 'tableRow', node: tableRowWithNestedTable },
+						{ name: 'tableCell', node: tableCellWithNestedTable },
+					]
+				: [
+						{
+							name: 'table',
+							node: tableNodeSpecWithFixedToDOM({
+								allowColumnResizing: Boolean(allowColumnResizing),
+								tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+								getEditorContainerWidth: defaultGetEditorContainerWidth,
+								isNestingSupported,
+							}),
+						},
+						{ name: 'tableHeader', node: tableHeader },
+						{ name: 'tableRow', node: tableRow },
+						{ name: 'tableCell', node: tableCell },
+					];
 		},
 
 		pmPlugins() {

package/src/toDOM.ts

@@ -1,9 +1,9 @@
 import kebabCase from 'lodash/kebabCase';
 
-import { table } from '@atlaskit/adf-schema';
+import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
-import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -16,14 +16,17 @@ type Config = {
 	allowColumnResizing: boolean;
 	tableResizingEnabled: boolean;
 	getEditorContainerWidth: GetEditorContainerWidth;
+	isNestingSupported?: boolean;
 };
-export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
+export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
+	const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
+
 	if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
-		return table;
+		return tableNode;
 	}
 
 	return {
-		...table,
+		...tableNode,
 		toDOM: (node: PMNode): DOMOutputSpec => {
 			const gutterPadding = akEditorGutterPaddingDynamic() * 2;
 			const editorWidthFromGetter = fg('platform_editor_breakout_use_css')

package/src/utils/index.ts

@@ -19,6 +19,7 @@ export {
 	tablesHaveDifferentNoOfColumns,
 	tablesHaveDifferentNoOfRows,
 	isTableNested,
+	isTableNestedInMoreThanOneNode,
 } from './nodes';
 export {
 	transformSliceToRemoveOpenTable,

package/src/utils/nodes.ts

@@ -136,6 +136,10 @@ export const isTableNested = (state: EditorState, tablePos = 0): boolean => {
 	);
 };
 
+export const isTableNestedInMoreThanOneNode = (state: EditorState, tablePos = 0) => {
+	return state.doc.resolve(tablePos).depth > 2;
+};
+
 const anyChildCellMergedAcrossRow = (node: PmNode): boolean =>
 	mapChildren(node, (child) => child.attrs.rowspan || 0).some((rowspan) => rowspan > 1);