@atlaskit/editor-plugin-table 9.3.1 → 9.3.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 9.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.3.2
+
+### Patch Changes
+
+- [#108797](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/108797)
+  [`9a3f165bc940b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a3f165bc940b) -
+  tidy up feature flag confluence_frontend_editor_custom_presets
+- Updated dependencies
+
 ## 9.3.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -813,8 +813,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this5 = this,
-        _this$state$stickyHea2,
-        _this$state$stickyHea3,
         _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -931,7 +929,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = (0, _nodes.isTableNested)(view.state, tablePos);
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
-      var topOffset = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : (_this$state$stickyHea2 = (_this$state$stickyHea3 = this.state.stickyHeader) === null || _this$state$stickyHea3 === void 0 ? void 0 : _this$state$stickyHea3.top) !== null && _this$state$stickyHea2 !== void 0 ? _this$state$stickyHea2 : 0;
+      var topOffset = 0;
       var topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
       var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
         _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,

package/dist/cjs/nodeviews/TableRow.js

@@ -14,7 +14,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -543,11 +542,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
           _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
-      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
-        this.dom.style.top = "0px";
-      } else {
-        this.dom.style.top = "".concat(domTop, "px");
-      }
+      this.dom.style.top = "0px";
       (0, _dom.updateStickyMargins)(table);
       this.dom.scrollLeft = wrapper.scrollLeft;
       this.emitOn(domTop, this.colControlsOffset);

package/dist/cjs/nodeviews/toDOM.js

@@ -12,7 +12,6 @@ var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _consts = require("../pm-plugins/table-resizing/utils/consts");
@@ -27,7 +26,6 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   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);
       var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
         var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
           k = _ref2[0],
@@ -35,15 +33,13 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
       var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
-      var attrs = _objectSpread({
+      var attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
         'data-table-width': node.attrs.width
-      }, (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? {} : {
-        style: "width: ".concat(node.attrs.width, "px;")
-      });
+      };
       var colgroup = '';
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroup)(node)));
@@ -84,10 +80,10 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(node.attrs.width, "px);") : "width: ".concat(node.attrs.width, "px")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(node.attrs.width, "px);")
       }, ['div', {
         class: 'resizer-item display-handle',
-        style: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? (0, _lazyNodeView.convertToInlineCss)({
+        style: (0, _lazyNodeView.convertToInlineCss)({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
@@ -97,14 +93,6 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))",
           width: "min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ".concat(node.attrs.width, ")")
-        }) : (0, _lazyNodeView.convertToInlineCss)({
-          position: 'relative',
-          userSelect: 'auto',
-          boxSizing: 'border-box',
-          height: 'auto',
-          minWidth: "".concat(tableMinWidth, "px"),
-          maxWidth: "".concat(editorWidthFromGetter, "px"),
-          width: "".concat(editorWidthFromGetter, "px;")
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -8,11 +8,13 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _styles = require("@atlaskit/editor-common/styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _columnResize = require("../commands/column-resize");
 var _misc = require("../commands/misc");
 var _pluginFactory = require("../plugin-factory");
 var _tableAnalytics = require("../table-analytics");
 var _columnWidth = require("../transforms/column-width");
+var _nodes = require("../utils/nodes");
 var _selection = require("../utils/selection");
 var _commands = require("./commands");
 var _pluginFactory2 = require("./plugin-factory");
@@ -153,10 +155,13 @@ var handleMouseDown = exports.handleMouseDown = function handleMouseDown(view, e
     if (dragging) {
       var startX = dragging.startX;
 
-      // If the table has changed (via collab for example) don't apply column widths
-      // For example, if a table col is deleted we won't be able to reliably remap the new widths
-      // There may be a more elegant solution to this, to avoid a jarring experience.
-      if (table.eq(originalTable)) {
+      // If the dimensions of the table have changed through a remote modification by another
+      // person for example don't persist the new column widths as we couldn't reliably remap them
+      // For example, if a table col is deleted
+      // There may be a more elegant solution to this, to avoid a jarring experience. This used to
+      // be an equality check but that caused issues when a nested table would change (eg. when it
+      // dynamically updates its width on resize)
+      if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resizing') ? !(0, _nodes.tablesHaveDifferentNoOfColumns)(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         var map = _tableMap.TableMap.get(table);
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

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

@@ -10,6 +10,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _columnWidth = require("../../transforms/column-width");
 var _nodes = require("../../utils/nodes");
 var _misc = require("../utils/misc");
@@ -177,6 +178,11 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
     }
     if (resizeState) {
       tr = (0, _columnWidth.updateColumnWidths)(resizeState, node, start, api)(tr);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resizing')) {
+        // Avoid adding this transaction separately to the history as these are automatic updates
+        // as a consequence of another action
+        tr.setMeta('addToHistory', false);
+      }
       if (tr.docChanged) {
         tr.setMeta('scrollIntoView', false);
         // TODO: ED-8995

package/dist/cjs/pm-plugins/utils/paste.js

@@ -44,7 +44,7 @@ var unwrapContentFromTable = exports.unwrapContentFromTable = function unwrapCon
 // Flattens nested tables after a given nesting depth
 // If this looks familiar, it's a heavily modified version of `mapFragment` which has been
 // adjusted to support tracking nesting depth. This wasn't possible by using `mapFragment` directly
-var unwrapNestedTables = function unwrapNestedTables(content, schema, unwrapNestDepth) {
+var _unwrapNestedTables = function unwrapNestedTables(content, schema, unwrapNestDepth) {
   var currentNestDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var flattenNested = function flattenNested(node, tableDepth) {
     if (node.type === schema.nodes.table) {
@@ -58,7 +58,7 @@ var unwrapNestedTables = function unwrapNestedTables(content, schema, unwrapNest
   var children = [];
   for (var i = 0, size = content.childCount; i < size; i++) {
     var node = content.child(i);
-    var transformed = node.isLeaf ? flattenNested(node, currentNestDepth) : flattenNested(node.copy(_model.Fragment.fromArray(unwrapNestedTables(node.content, schema, unwrapNestDepth, node.type === schema.nodes.table ? currentNestDepth + 1 : currentNestDepth))), currentNestDepth);
+    var transformed = node.isLeaf ? flattenNested(node, currentNestDepth) : flattenNested(node.copy(_model.Fragment.fromArray(_unwrapNestedTables(node.content, schema, unwrapNestDepth, node.type === schema.nodes.table ? currentNestDepth + 1 : currentNestDepth))), currentNestDepth);
     if (transformed) {
       if (Array.isArray(transformed)) {
         children.push.apply(children, (0, _toConsumableArray2.default)(transformed));
@@ -141,7 +141,7 @@ var transformSliceToRemoveNestedTables = exports.transformSliceToRemoveNestedTab
     }
 
     // after we've worked out what the allowed nesting depth is, unwrap nested tables
-    var newChildren = unwrapNestedTables(node.content, schema, allowedTableNesting);
+    var newChildren = _unwrapNestedTables(node.content, schema, allowedTableNesting);
     return node.copy(_model.Fragment.fromArray(newChildren));
   });
   return new _model.Slice(newFragment, slice.openStart, openEnd);

package/dist/cjs/ui/FloatingContextualButton/FixedButton.js

@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactDom = require("react-dom");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("../../types");
 var _commonStyles = require("../common-styles");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -93,11 +92,8 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  var fixedButtonTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  var fixedButtonTop = 0;
   var containerLeft = (0, _react.useMemo)(function () {
-    if (!(0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
-      return 0;
-    }
     var container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
   }, [targetCellRef]);

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -65,7 +65,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
   var selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
   var firstRow = tableRef.querySelector('tr');
   var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-  var rowControlStickyTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 45 : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0];
+  var rowControlStickyTop = 45;
   var marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop !== null && rowControlStickyTop !== void 0 ? rowControlStickyTop : 0 : 0;
   var handleClick = (0, _react.useCallback)(function (event) {
     var state = editorView.state,

package/dist/cjs/ui/TableFloatingColumnControls/index.js

@@ -75,13 +75,9 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
   }
   var colWidths = (0, _columnControls.getColumnsWidths)(editorView);
   if (stickyTop) {
-    var _rowHeights$, _containerRef$current;
+    var _containerRef$current;
     var columnControlTopOffsetFromParent = '-12px';
-    var headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
-    containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.style.setProperty('top', (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? columnControlTopOffsetFromParent : // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    "".concat(stickyTop - headerRowHeight + 33, "px") // 33px is padding and margin applied on tr.sticky
-    );
+    containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 || _containerRef$current.style.setProperty('top', columnControlTopOffsetFromParent);
   } else {
     var _containerRef$current2;
     containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || _containerRef$current2.style.removeProperty('top');

package/dist/cjs/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -18,7 +18,6 @@ var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../pm-plugins/commands");
 var _types = require("../../../types");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -89,7 +88,7 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         }),
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? this.props.stickyTop !== undefined ? "0px" : undefined : this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+          top: this.props.stickyTop !== undefined ? "0px" : undefined
         },
         contentEditable: false
       }, /*#__PURE__*/_react.default.createElement("button", {

package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js

@@ -16,7 +16,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames2 = _interopRequireDefault(require("classnames"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
@@ -76,7 +75,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
         stickyTop = _this$props3.stickyTop,
         hasHeaderRow = _this$props3.hasHeaderRow;
       if (stickyTop && hasHeaderRow && index === 0) {
-        var topOffset = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyTop;
+        var topOffset = 0;
         return {
           height: rowHeight,
           top: "".concat(topOffset, "px")

package/dist/cjs/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../pm-plugins/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
 var _types = require("../../../types");
@@ -90,9 +89,7 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               marginTop: "".concat(marginTop, "px"),
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-              top: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? thisRowSticky ? "3px" : undefined : thisRowSticky ? // Ignored via go/ees005
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+              top: thisRowSticky ? "3px" : undefined,
               // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
               paddingTop: thisRowSticky ? "".concat(_consts.tableControlsSpacing, "px") : undefined
             }

package/dist/es2019/nodeviews/TableComponent.js

@@ -782,7 +782,7 @@ class TableComponent extends React.Component {
     }
   }
   render() {
-    var _this$state$stickyHea2, _this$state$stickyHea3, _this$props$options12;
+    var _this$props$options12;
     const {
       view,
       getNode,
@@ -899,7 +899,7 @@ class TableComponent extends React.Component {
     }
     const isNested = isTableNested(view.state, tablePos);
     const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
-    const topOffset = fg('platform_editor_breakout_use_css') ? 0 : (_this$state$stickyHea2 = (_this$state$stickyHea3 = this.state.stickyHeader) === null || _this$state$stickyHea3 === void 0 ? void 0 : _this$state$stickyHea3.top) !== null && _this$state$stickyHea2 !== void 0 ? _this$state$stickyHea2 : 0;
+    const topOffset = 0;
     const topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
     const {
       tableWithFixedColumnWidthsOption = false

package/dist/es2019/nodeviews/TableRow.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -505,11 +504,7 @@ export default class TableRow extends TableNodeView {
         this.refireIntersectionObservers();
       }, fastScrollThresholdMs);
     }
-    if (fg('platform_editor_breakout_use_css')) {
-      this.dom.style.top = `0px`;
-    } else {
-      this.dom.style.top = `${domTop}px`;
-    }
+    this.dom.style.top = `0px`;
     updateTableMargin(table);
     this.dom.scrollLeft = wrapper.scrollLeft;
     this.emitOn(domTop, this.colControlsOffset);

package/dist/es2019/nodeviews/toDOM.js

@@ -2,7 +2,6 @@ import kebabCase from 'lodash/kebabCase';
 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';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -16,7 +15,6 @@ export const tableNodeSpecWithFixedToDOM = config => {
     ...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);
       const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`).join(';');
       const tableMinWidth = getResizerMinWidth(node);
       const attrs = {
@@ -24,10 +22,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
         'data-layout': node.attrs.layout,
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
-        'data-table-width': node.attrs.width,
-        ...(fg('platform_editor_breakout_use_css') ? {} : {
-          style: `width: ${node.attrs.width}px;`
-        })
+        'data-table-width': node.attrs.width
       };
       let colgroup = '';
       if (config.allowColumnResizing) {
@@ -69,10 +64,10 @@ export const tableNodeSpecWithFixedToDOM = config => {
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: fg('platform_editor_breakout_use_css') ? `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);` : `width: ${node.attrs.width}px`
+        style: `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);`
       }, ['div', {
         class: 'resizer-item display-handle',
-        style: fg('platform_editor_breakout_use_css') ? convertToInlineCss({
+        style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
@@ -82,14 +77,6 @@ export const tableNodeSpecWithFixedToDOM = config => {
           minWidth: 'var(--ak-editor-table-min-width)',
           maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
           width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${node.attrs.width})`
-        }) : convertToInlineCss({
-          position: 'relative',
-          userSelect: 'auto',
-          boxSizing: 'border-box',
-          height: 'auto',
-          minWidth: `${tableMinWidth}px`,
-          maxWidth: `${editorWidthFromGetter}px`,
-          width: `${editorWidthFromGetter}px;`
         })
       }, ['span', {
         class: 'resizer-hover-zone'

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

@@ -2,11 +2,13 @@ import { ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION, TABLE_OVERFLOW_
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
 import { updateResizeHandleDecorations } from '../commands/misc';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { META_KEYS } from '../table-analytics';
 import { updateColumnWidths } from '../transforms/column-width';
+import { tablesHaveDifferentNoOfColumns } from '../utils/nodes';
 import { getSelectedColumnIndexes } from '../utils/selection';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
@@ -161,10 +163,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
         startX
       } = dragging;
 
-      // If the table has changed (via collab for example) don't apply column widths
-      // For example, if a table col is deleted we won't be able to reliably remap the new widths
-      // There may be a more elegant solution to this, to avoid a jarring experience.
-      if (table.eq(originalTable)) {
+      // If the dimensions of the table have changed through a remote modification by another
+      // person for example don't persist the new column widths as we couldn't reliably remap them
+      // For example, if a table col is deleted
+      // There may be a more elegant solution to this, to avoid a jarring experience. This used to
+      // be an equality check but that caused issues when a nested table would change (eg. when it
+      // dynamically updates its width on resize)
+      if (fg('platform_editor_nested_tables_resizing') ? !tablesHaveDifferentNoOfColumns(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         const map = TableMap.get(table);
         const colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

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

@@ -1,6 +1,7 @@
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { updateColumnWidths } from '../../transforms/column-width';
 import { getTableWidth } from '../../utils/nodes';
 import { getLayoutSize } from '../utils/misc';
@@ -163,6 +164,11 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
   }
   if (resizeState) {
     tr = updateColumnWidths(resizeState, node, start, api)(tr);
+    if (fg('platform_editor_nested_tables_resizing')) {
+      // Avoid adding this transaction separately to the history as these are automatic updates
+      // as a consequence of another action
+      tr.setMeta('addToHistory', false);
+    }
     if (tr.docChanged) {
       tr.setMeta('scrollIntoView', false);
       // TODO: ED-8995

package/dist/es2019/ui/FloatingContextualButton/FixedButton.js

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useRef } from 'react';
 import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName } from '../../types';
 import { insertColumnButtonOffset } from '../common-styles';
 const BUTTON_WIDTH = 20;
@@ -85,11 +84,8 @@ export const FixedButton = ({
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  const fixedButtonTop = 0;
   const containerLeft = useMemo(() => {
-    if (!fg('platform_editor_breakout_use_css')) {
-      return 0;
-    }
     const container = targetCellRef.closest('[data-editor-container="true"]');
     return (container === null || container === void 0 ? void 0 : container.getBoundingClientRect().left) || 0;
   }, [targetCellRef]);

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -55,7 +55,7 @@ export const ColumnControls = ({
   const selectedColIndexes = getSelectedColumns((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection) || editorView.state.selection);
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
-  const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0];
+  const rowControlStickyTop = 45;
   const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop !== null && rowControlStickyTop !== void 0 ? rowControlStickyTop : 0 : 0;
   const handleClick = useCallback(event => {
     const {

package/dist/es2019/ui/TableFloatingColumnControls/index.js

@@ -64,14 +64,9 @@ const TableFloatingColumnControls = ({
   }
   const colWidths = getColumnsWidths(editorView);
   if (stickyTop) {
-    var _rowHeights$, _containerRef$current;
+    var _containerRef$current;
     const columnControlTopOffsetFromParent = '-12px';
-    const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
-    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('top', fg('platform_editor_breakout_use_css') ? columnControlTopOffsetFromParent :
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    `${stickyTop - headerRowHeight + 33}px` // 33px is padding and margin applied on tr.sticky
-    );
+    containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.style.setProperty('top', columnControlTopOffsetFromParent);
   } else {
     var _containerRef$current2;
     containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.style.removeProperty('top');

package/dist/es2019/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -5,7 +5,6 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverTable } from '../../../pm-plugins/commands';
 import { TableCssClassName as ClassName } from '../../../types';
 // Ignored via go/ees005
@@ -72,7 +71,7 @@ class CornerControlComponent extends Component {
       }),
       style: {
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        top: fg('platform_editor_breakout_use_css') ? this.props.stickyTop !== undefined ? `0px` : undefined : this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
+        top: this.props.stickyTop !== undefined ? `0px` : undefined
       },
       contentEditable: false
     }, /*#__PURE__*/React.createElement("button", {

package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js

@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { isRowSelected } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowHeights } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -60,7 +59,7 @@ export default class NumberColumn extends Component {
         hasHeaderRow
       } = this.props;
       if (stickyTop && hasHeaderRow && index === 0) {
-        const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
+        const topOffset = 0;
         return {
           height: rowHeight,
           top: `${topOffset}px`

package/dist/es2019/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -2,7 +2,6 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -70,10 +69,7 @@ class RowControlsComponent extends Component {
             // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
             marginTop: `${marginTop}px`,
             // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-            top: fg('platform_editor_breakout_use_css') ? thisRowSticky ? `3px` : undefined : thisRowSticky ?
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            `${this.props.stickyTop + 3}px` : undefined,
+            top: thisRowSticky ? `3px` : undefined,
             // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
             paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined
           }

package/dist/esm/nodeviews/TableComponent.js

@@ -807,8 +807,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this5 = this,
-        _this$state$stickyHea2,
-        _this$state$stickyHea3,
         _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -925,7 +923,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
       var isNested = isTableNested(view.state, tablePos);
       var topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
-      var topOffset = fg('platform_editor_breakout_use_css') ? 0 : (_this$state$stickyHea2 = (_this$state$stickyHea3 = this.state.stickyHeader) === null || _this$state$stickyHea3 === void 0 ? void 0 : _this$state$stickyHea3.top) !== null && _this$state$stickyHea2 !== void 0 ? _this$state$stickyHea2 : 0;
+      var topOffset = 0;
       var topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
       var _getEditorFeatureFlag7 = getEditorFeatureFlags(),
         _getEditorFeatureFlag8 = _getEditorFeatureFlag7.tableWithFixedColumnWidthsOption,

package/dist/esm/nodeviews/TableRow.js

@@ -9,7 +9,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -536,11 +535,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
           _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
-      if (fg('platform_editor_breakout_use_css')) {
-        this.dom.style.top = "0px";
-      } else {
-        this.dom.style.top = "".concat(domTop, "px");
-      }
+      this.dom.style.top = "0px";
       updateTableMargin(table);
       this.dom.scrollLeft = wrapper.scrollLeft;
       this.emitOn(domTop, this.colControlsOffset);