@atlaskit/editor-plugin-table 9.3.1 → 9.3.3

package/dist/esm/nodeviews/toDOM.js

@@ -7,7 +7,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';
@@ -20,7 +19,6 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
   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);
       var alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           k = _ref2[0],
@@ -28,15 +26,13 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
       }).join(';');
       var tableMinWidth = 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
-      }, fg('platform_editor_breakout_use_css') ? {} : {
-        style: "width: ".concat(node.attrs.width, "px;")
-      });
+      };
       var colgroup = '';
       if (config.allowColumnResizing) {
         colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
@@ -77,10 +73,10 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: 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: fg('platform_editor_breakout_use_css') ? convertToInlineCss({
+        style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
@@ -90,14 +86,6 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
           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, ")")
-        }) : 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/esm/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';
@@ -147,10 +149,13 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     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 (fg('platform_editor_nested_tables_resizing') ? !tablesHaveDifferentNoOfColumns(originalTable, table) : table.eq(originalTable)) {
         var _table$attrs;
         var map = TableMap.get(table);
         var colIndex = map.colCount($cell.pos - start) + ($cell.nodeAfter ? $cell.nodeAfter.attrs.colspan : 1) - 1;

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

@@ -4,6 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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';
@@ -169,6 +170,11 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos, api) {
     }
     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/esm/pm-plugins/utils/paste.js

@@ -37,7 +37,7 @@ export var unwrapContentFromTable = function unwrapContentFromTable(maybeTable)
 // 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) {
@@ -51,7 +51,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(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(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, _toConsumableArray(transformed));
@@ -134,7 +134,7 @@ export var transformSliceToRemoveNestedTables = function transformSliceToRemoveN
     }
 
     // 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(Fragment.fromArray(newChildren));
   });
   return new Slice(newFragment, slice.openStart, openEnd);

package/dist/esm/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';
 var BUTTON_WIDTH = 20;
@@ -83,11 +82,8 @@ export var FixedButton = function FixedButton(_ref2) {
       };
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
-  var fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+  var fixedButtonTop = 0;
   var containerLeft = useMemo(function () {
-    if (!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/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -56,7 +56,7 @@ export var 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 = 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 = useCallback(function (event) {
     var state = editorView.state,

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

@@ -65,13 +65,9 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
   }
   var colWidths = 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', 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/esm/ui/TableFloatingControls/CornerControls/ClassicCornerControls.js

@@ -12,7 +12,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
@@ -79,7 +78,7 @@ var CornerControlComponent = /*#__PURE__*/function (_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 ? "".concat(this.props.stickyTop, "px") : undefined
+          top: this.props.stickyTop !== undefined ? "0px" : undefined
         },
         contentEditable: false
       }, /*#__PURE__*/React.createElement("button", {

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

@@ -10,7 +10,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';
@@ -66,7 +65,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         stickyTop = _this$props3.stickyTop,
         hasHeaderRow = _this$props3.hasHeaderRow;
       if (stickyTop && hasHeaderRow && index === 0) {
-        var topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
+        var topOffset = 0;
         return {
           height: rowHeight,
           top: "".concat(topOffset, "px")

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

@@ -9,7 +9,6 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 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';
@@ -80,9 +79,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: 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(tableControlsSpacing, "px") : undefined
             }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.3.1",
+	"version": "9.3.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/button": "^20.4.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^99.6.0",
+		"@atlaskit/editor-common": "^99.7.0",
 		"@atlaskit/editor-palette": "1.7.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.11.0",
@@ -43,9 +43,9 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^23.5.0",
+		"@atlaskit/icon": "^23.6.0",
 		"@atlaskit/menu": "^2.14.0",
-		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/platform-feature-flags": "^1.0.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
@@ -110,9 +110,6 @@
 		"platform_editor_batch_steps_table": {
 			"type": "boolean"
 		},
-		"platform_editor_breakout_use_css": {
-			"type": "boolean"
-		},
 		"platform_editor_nested_table_in_nested_parent_fix": {
 			"type": "boolean"
 		},
@@ -143,6 +140,9 @@
 		},
 		"platform_editor_nested_tables_paste_dupe_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_resizing": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -908,9 +908,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const isNested = isTableNested(view.state, tablePos);
 
 		const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
-		const topOffset = fg('platform_editor_breakout_use_css')
-			? 0
-			: this.state.stickyHeader?.top ?? 0;
+		const topOffset = 0;
 
 		const topStickyShadowPosition =
 			this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;

package/src/nodeviews/TableRow.ts

@@ -5,7 +5,6 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -611,12 +610,7 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 				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;
 

package/src/nodeviews/toDOM.ts

@@ -5,7 +5,6 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 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';
 
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
@@ -30,9 +29,6 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 		...tableNode,
 		toDOM: (node: PMNode): DOMOutputSpec => {
 			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)}`)
@@ -46,9 +42,6 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 				'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;` }),
 			};
 
 			let colgroup: DOMOutputSpec = '';
@@ -136,35 +129,23 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): NodeSpec => {
 					'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({
-										position: 'relative',
-										userSelect: 'auto',
-										boxSizing: 'border-box',
-										'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
-										'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-										'--ak-editor-table-min-width': `${tableMinWidth}px`,
-										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;`,
-									}),
+							style: convertToInlineCss({
+								position: 'relative',
+								userSelect: 'auto',
+								boxSizing: 'border-box',
+								'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
+								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
+								'--ak-editor-table-min-width': `${tableMinWidth}px`,
+								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})`,
+							}),
 						},
 						[
 							'span',

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

@@ -13,6 +13,7 @@ import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/e
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../types';
 import { stopKeyboardColumnResizing } from '../commands/column-resize';
@@ -20,6 +21,7 @@ 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';
@@ -195,10 +197,17 @@ export const handleMouseDown = (
 		if (dragging) {
 			const { 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)
+			) {
 				const map = TableMap.get(table);
 				const colIndex =
 					map.colCount($cell.pos - start) +

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -4,6 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../../types';
 import { updateColumnWidths } from '../../transforms/column-width';
@@ -267,6 +268,11 @@ export const scaleTable =
 
 		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);

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -4,7 +4,6 @@ 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 { token } from '@atlaskit/tokens';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
@@ -134,13 +133,9 @@ export const FixedButton = ({
 		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?.getBoundingClientRect().left || 0;
 	}, [targetCellRef]);

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -96,7 +96,7 @@ export const ColumnControls = ({
 	const firstRow = tableRef.querySelector('tr');
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
-	const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights?.[0];
+	const rowControlStickyTop = 45;
 	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
 
 	const handleClick = useCallback(

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -101,15 +101,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 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?.current?.style.setProperty('top', columnControlTopOffsetFromParent);
 	} else {
 		containerRef?.current?.style.removeProperty('top');
 	}

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -7,7 +7,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';
@@ -39,13 +38,7 @@ class CornerControlComponent extends Component<CornerControlProps & WrappedCompo
 				})}
 				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}
 			>

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -5,7 +5,6 @@ import classnames from 'classnames';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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';
@@ -123,7 +122,7 @@ export default class NumberColumn extends Component<Props, any> {
 	private getCellStyles = (index: number, rowHeight: number) => {
 		const { stickyTop, hasHeaderRow } = this.props;
 		if (stickyTop && hasHeaderRow && index === 0) {
-			const topOffset = fg('platform_editor_breakout_use_css') ? 0 : stickyTop;
+			const topOffset = 0;
 
 			return {
 				height: rowHeight,

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -6,7 +6,6 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { fg } from '@atlaskit/platform-feature-flags';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import type { RowParams } from '../../../pm-plugins/utils/row-controls';
@@ -85,15 +84,7 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
 									// 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,
 								}}