@atlaskit/editor-plugin-table 7.27.2 → 7.28.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.0
+
+### Minor Changes
+
+- [#144162](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144162)
+  [`2b2233eed311a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2b2233eed311a) -
+  ED-24858: fixes layout shifts for tables under SSR
+
 ## 7.27.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -721,6 +721,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
+        _this$state$stickyHea2,
+        _this$state$stickyHea3,
         _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
@@ -835,7 +837,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tablePos = undefined;
       }
       var isNested = (0, _utils5.isTableNested)(view.state, tablePos);
-      var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+      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 topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
       var _getEditorFeatureFlag8 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,

package/dist/cjs/nodeviews/TableRow.js

@@ -15,6 +15,7 @@ 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");
@@ -496,7 +497,11 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
           _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
-      this.dom.style.top = "".concat(domTop, "px");
+      if ((0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css')) {
+        this.dom.style.top = "0px";
+      } else {
+        this.dom.style.top = "".concat(domTop, "px");
+      }
       (0, _dom.updateStickyMargins)(table);
       this.dom.scrollLeft = wrapper.scrollLeft;
       this.emitOn(domTop, this.colControlsOffset);

package/dist/cjs/toDOM.js

@@ -10,10 +10,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _tableContainerStyles = require("./nodeviews/table-container-styles");
 var _colgroup = require("./pm-plugins/table-resizing/utils/colgroup");
+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) {
@@ -22,21 +25,23 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
   }
   return _objectSpread(_objectSpread({}, _adfSchema.table), {}, {
     toDOM: function toDOM(node) {
-      var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, node.attrs.width);
+      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],
           v = _ref2[1];
         return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
       }).join(';');
-      var attrs = {
+      var attrs = _objectSpread({
         '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,
+        '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)));
@@ -77,10 +82,28 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: ".concat(node.attrs.width, "px")
+        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")
       }, ['div', {
         class: 'resizer-item display-handle',
-        style: "position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ".concat(editorWidthFromGetter, "px; width: ").concat(editorWidthFromGetter, "px;")
+        style: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? (0, _lazyNodeView.convertToInlineCss)({
+          position: 'relative',
+          userSelect: 'auto',
+          boxSizing: 'border-box',
+          '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
+          '--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
+          '--ak-editor-table-min-width': "145px",
+          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: '145px',
+          maxWidth: "".concat(editorWidthFromGetter, "px"),
+          width: "".concat(editorWidthFromGetter, "px;")
+        })
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

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

@@ -10,6 +10,7 @@ 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); }
@@ -89,6 +90,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   var targetCellRect = targetCellRef.getBoundingClientRect();
+  var fixedButtonTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -119,7 +121,7 @@ var FixedButton = exports.FixedButton = function FixedButton(_ref2) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      top: fixedButtonTop + stickyHeader.padding + offset * 2,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

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

@@ -11,6 +11,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _types = require("../../../types");
@@ -31,7 +32,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -64,7 +65,8 @@ 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 marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  var rowControlStickyTop = (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? 45 : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0];
+  var marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop !== null && rowControlStickyTop !== void 0 ? rowControlStickyTop : 0 : 0;
   var handleClick = (0, _react.useCallback)(function (event) {
     var state = editorView.state,
       dispatch = editorView.dispatch;

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

@@ -74,8 +74,9 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
   if (stickyTop) {
     var _rowHeights$, _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', "".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', (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? columnControlTopOffsetFromParent : "".concat(stickyTop - headerRowHeight + 33, "px") // 33px is padding and margin applied on tr.sticky
     );
   } else {
     var _containerRef$current2;

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

@@ -19,6 +19,7 @@ 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("../../../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); }
@@ -88,7 +89,7 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         }),
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+          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
         },
         contentEditable: false
       }, /*#__PURE__*/_react.default.createElement("button", {

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

@@ -16,6 +16,7 @@ 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("../../../commands");
 var _types = require("../../../types");
 var _utils = require("../../../utils");
@@ -89,7 +90,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: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+              top: (0, _platformFeatureFlags.fg)('platform_editor_breakout_use_css') ? thisRowSticky ? "3px" : undefined : thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : 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

@@ -701,7 +701,7 @@ class TableComponent extends React.Component {
     }
   }
   render() {
-    var _this$props$options12;
+    var _this$state$stickyHea2, _this$state$stickyHea3, _this$props$options12;
     const {
       view,
       getNode,
@@ -815,7 +815,9 @@ class TableComponent extends React.Component {
       tablePos = undefined;
     }
     const isNested = isTableNested(view.state, tablePos);
-    const topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+    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;
+    let topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
     const {
       stickyScrollbar,
       tableWithFixedColumnWidthsOption = false

package/dist/es2019/nodeviews/TableRow.js

@@ -2,6 +2,7 @@ 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';
@@ -456,7 +457,11 @@ export default class TableRow extends TableNodeView {
         this.refireIntersectionObservers();
       }, fastScrollThresholdMs);
     }
-    this.dom.style.top = `${domTop}px`;
+    if (fg('platform_editor_breakout_use_css')) {
+      this.dom.style.top = `0px`;
+    } else {
+      this.dom.style.top = `${domTop}px`;
+    }
     updateTableMargin(table);
     this.dom.scrollLeft = wrapper.scrollLeft;
     this.emitOn(domTop, this.colControlsOffset);

package/dist/es2019/toDOM.js

@@ -1,9 +1,12 @@
 import kebabCase from 'lodash/kebabCase';
 import { table } 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 { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export const tableNodeSpecWithFixedToDOM = config => {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
     return table;
@@ -11,7 +14,8 @@ export const tableNodeSpecWithFixedToDOM = config => {
   return {
     ...table,
     toDOM: node => {
-      const editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
+      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 attrs = {
         'data-number-column': node.attrs.isNumberColumnEnabled,
@@ -19,7 +23,9 @@ export const tableNodeSpecWithFixedToDOM = config => {
         'data-autosize': node.attrs.__autoSize,
         'data-table-local-id': node.attrs.localId,
         'data-table-width': node.attrs.width,
-        style: `width: ${node.attrs.width}px;`
+        ...(fg('platform_editor_breakout_use_css') ? {} : {
+          style: `width: ${node.attrs.width}px;`
+        })
       };
       let colgroup = '';
       if (config.allowColumnResizing) {
@@ -61,10 +67,28 @@ export const tableNodeSpecWithFixedToDOM = config => {
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: `width: ${node.attrs.width}px`
+        style: fg('platform_editor_breakout_use_css') ? `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);` : `width: ${node.attrs.width}px`
       }, ['div', {
         class: 'resizer-item display-handle',
-        style: `position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ${editorWidthFromGetter}px; width: ${editorWidthFromGetter}px;`
+        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': `145px`,
+          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: '145px',
+          maxWidth: `${editorWidthFromGetter}px`,
+          width: `${editorWidthFromGetter}px;`
+        })
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

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

@@ -2,6 +2,7 @@ import React, { useEffect, 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;
@@ -81,6 +82,7 @@ export const FixedButton = ({
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   const targetCellRect = targetCellRef.getBoundingClientRect();
+  const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -111,7 +113,7 @@ export const FixedButton = ({
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      top: fixedButtonTop + stickyHeader.padding + offset * 2,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

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

@@ -6,6 +6,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -39,7 +40,7 @@ export const ColumnControls = ({
   getScrollOffset,
   api
 }) => {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join;
   const columnControlsRef = useRef(null);
   const {
     selectionState
@@ -54,7 +55,8 @@ 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 marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0];
+  const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop !== null && rowControlStickyTop !== void 0 ? rowControlStickyTop : 0 : 0;
   const handleClick = useCallback(event => {
     const {
       state,

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

@@ -63,8 +63,9 @@ const TableFloatingColumnControls = ({
   const colWidths = getColumnsWidths(editorView);
   if (stickyTop) {
     var _rowHeights$, _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', `${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', fg('platform_editor_breakout_use_css') ? columnControlTopOffsetFromParent : `${stickyTop - headerRowHeight + 33}px` // 33px is padding and margin applied on tr.sticky
     );
   } else {
     var _containerRef$current2;

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

@@ -5,6 +5,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 class CornerControlComponent extends Component {
@@ -69,7 +70,7 @@ class CornerControlComponent extends Component {
       }),
       style: {
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
+        top: fg('platform_editor_breakout_use_css') ? this.props.stickyTop !== undefined ? `0px` : undefined : this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined
       },
       contentEditable: false
     }, /*#__PURE__*/React.createElement("button", {

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

@@ -2,6 +2,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
@@ -67,7 +68,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: thisRowSticky ? `${this.props.stickyTop + 3}px` : undefined,
+            top: fg('platform_editor_breakout_use_css') ? thisRowSticky ? `3px` : undefined : thisRowSticky ? `${this.props.stickyTop + 3}px` : 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

@@ -714,6 +714,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
+        _this$state$stickyHea2,
+        _this$state$stickyHea3,
         _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
@@ -828,7 +830,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tablePos = undefined;
       }
       var isNested = isTableNested(view.state, tablePos);
-      var topStickyShadowPosition = isDragAndDropEnabled ? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2 : this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+      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 topStickyShadowPosition = this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
       var _getEditorFeatureFlag8 = getEditorFeatureFlags(),
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,

package/dist/esm/nodeviews/TableRow.js

@@ -10,6 +10,7 @@ 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';
@@ -489,7 +490,11 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
           _this6.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
-      this.dom.style.top = "".concat(domTop, "px");
+      if (fg('platform_editor_breakout_use_css')) {
+        this.dom.style.top = "0px";
+      } else {
+        this.dom.style.top = "".concat(domTop, "px");
+      }
       updateTableMargin(table);
       this.dom.scrollLeft = wrapper.scrollLeft;
       this.emitOn(domTop, this.colControlsOffset);

package/dist/esm/toDOM.js

@@ -5,31 +5,36 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { 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 { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(config) {
   if (editorExperiment('platform_editor_exp_lazy_node_views', false)) {
     return table;
   }
   return _objectSpread(_objectSpread({}, table), {}, {
     toDOM: function toDOM(node) {
-      var editorWidthFromGetter = Math.min(config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2, node.attrs.width);
+      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],
           v = _ref2[1];
         return "".concat(kebabCase(k), ": ").concat(kebabCase(v));
       }).join(';');
-      var attrs = {
+      var attrs = _objectSpread({
         '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,
+        '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)));
@@ -70,10 +75,28 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: ".concat(node.attrs.width, "px")
+        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")
       }, ['div', {
         class: 'resizer-item display-handle',
-        style: "position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ".concat(editorWidthFromGetter, "px; width: ").concat(editorWidthFromGetter, "px;")
+        style: fg('platform_editor_breakout_use_css') ? convertToInlineCss({
+          position: 'relative',
+          userSelect: 'auto',
+          boxSizing: 'border-box',
+          '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
+          '--ak-editor-table-max-width': "".concat(TABLE_MAX_WIDTH, "px"),
+          '--ak-editor-table-min-width': "145px",
+          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: '145px',
+          maxWidth: "".concat(editorWidthFromGetter, "px"),
+          width: "".concat(editorWidthFromGetter, "px;")
+        })
       }, ['span', {
         class: 'resizer-hover-zone'
       }, tableContainerDiv]]]];

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

@@ -2,6 +2,7 @@ import React, { useEffect, 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;
@@ -79,6 +80,7 @@ export var FixedButton = function FixedButton(_ref2) {
     }
   }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
   var targetCellRect = targetCellRef.getBoundingClientRect();
+  var fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
 
   // Using a portal here to ensure wrapperRef has the tableWrapper as an
   // ancestor. This is required to make the Intersection Observer work.
@@ -109,7 +111,7 @@ export var FixedButton = function FixedButton(_ref2) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       position: 'fixed',
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-      top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      top: fixedButtonTop + stickyHeader.padding + offset * 2,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       zIndex: akEditorTableCellOnStickyHeaderZIndex,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

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

@@ -6,6 +6,7 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -22,7 +23,7 @@ var getSelectedColumns = function getSelectedColumns(selection) {
   return [];
 };
 export var ColumnControls = function ColumnControls(_ref) {
-  var _colWidths$map$join, _rowHeights$;
+  var _colWidths$map$join;
   var editorView = _ref.editorView,
     tableActive = _ref.tableActive,
     tableRef = _ref.tableRef,
@@ -55,7 +56,8 @@ 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 marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  var rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0];
+  var marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop !== null && rowControlStickyTop !== void 0 ? rowControlStickyTop : 0 : 0;
   var handleClick = useCallback(function (event) {
     var state = editorView.state,
       dispatch = editorView.dispatch;

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

@@ -64,8 +64,9 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
   var colWidths = getColumnsWidths(editorView);
   if (stickyTop) {
     var _rowHeights$, _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', "".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', fg('platform_editor_breakout_use_css') ? columnControlTopOffsetFromParent : "".concat(stickyTop - headerRowHeight + 33, "px") // 33px is padding and margin applied on tr.sticky
     );
   } else {
     var _containerRef$current2;

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

@@ -13,6 +13,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 var CornerControlComponent = /*#__PURE__*/function (_Component) {
@@ -78,7 +79,7 @@ var CornerControlComponent = /*#__PURE__*/function (_Component) {
         }),
         style: {
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top: this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
+          top: fg('platform_editor_breakout_use_css') ? this.props.stickyTop !== undefined ? "0px" : undefined : this.props.stickyTop !== undefined ? "".concat(this.props.stickyTop, "px") : undefined
         },
         contentEditable: false
       }, /*#__PURE__*/React.createElement("button", {

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

@@ -10,6 +10,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
@@ -79,7 +80,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: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+              top: fg('platform_editor_breakout_use_css') ? thisRowSticky ? "3px" : undefined : thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : 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": "7.27.2",
+	"version": "7.28.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -117,6 +117,9 @@
 		},
 		"platform_editor_announce_cell_options_hotkeys": {
 			"type": "boolean"
+		},
+		"platform_editor_breakout_use_css": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -838,10 +838,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const isNested = isTableNested(view.state, tablePos);
 
-		const topStickyShadowPosition = isDragAndDropEnabled
-			? this.state.stickyHeader && this.state.stickyHeader.top + this.state.stickyHeader.padding + 2
-			: this.state.stickyHeader &&
-				this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2;
+		const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
+		const topOffset = fg('platform_editor_breakout_use_css')
+			? 0
+			: this.state.stickyHeader?.top ?? 0;
+
+		let topStickyShadowPosition =
+			this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
 
 		const { stickyScrollbar, tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 

package/src/nodeviews/TableRow.ts

@@ -5,6 +5,7 @@ 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';
@@ -557,7 +558,11 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 			}, fastScrollThresholdMs);
 		}
 
-		this.dom.style.top = `${domTop}px`;
+		if (fg('platform_editor_breakout_use_css')) {
+			this.dom.style.top = `0px`;
+		} else {
+			this.dom.style.top = `${domTop}px`;
+		}
 		updateTableMargin(table);
 		this.dom.scrollLeft = wrapper.scrollLeft;
 

package/src/toDOM.ts

@@ -1,13 +1,16 @@
 import kebabCase from 'lodash/kebabCase';
 
 import { table } 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 { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
+import { TABLE_MAX_WIDTH } from './pm-plugins/table-resizing/utils/consts';
 
 type Config = {
 	allowColumnResizing: boolean;
@@ -22,10 +25,11 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 	return {
 		...table,
 		toDOM: (node: PMNode): DOMOutputSpec => {
-			const editorWidthFromGetter = Math.min(
-				config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2,
-				node.attrs.width,
-			);
+			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(';');
@@ -36,7 +40,9 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				'data-autosize': node.attrs.__autoSize,
 				'data-table-local-id': node.attrs.localId,
 				'data-table-width': node.attrs.width,
-				style: `width: ${node.attrs.width}px;`,
+				...(fg('platform_editor_breakout_use_css')
+					? {}
+					: { style: `width: ${node.attrs.width}px;` }),
 			};
 
 			let colgroup: DOMOutputSpec = '';
@@ -124,13 +130,35 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: ${node.attrs.width}px`,
+						style: fg('platform_editor_breakout_use_css')
+							? `width: min(calc(100cqw - ${gutterPadding}px), ${node.attrs.width}px);`
+							: `width: ${node.attrs.width}px`,
 					},
 					[
 						'div',
 						{
 							class: 'resizer-item display-handle',
-							style: `position: relative; user-select: auto;  height: auto;  min-width: 145px; box-sizing: border-box; max-width: ${editorWidthFromGetter}px; width: ${editorWidthFromGetter}px;`,
+							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': `145px`,
+										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: '145px',
+										maxWidth: `${editorWidthFromGetter}px`,
+										width: `${editorWidthFromGetter}px;`,
+									}),
 						},
 						[
 							'span',

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -4,6 +4,7 @@ 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';
@@ -131,6 +132,8 @@ export const FixedButton = ({
 
 	const targetCellRect = targetCellRef.getBoundingClientRect();
 
+	const fixedButtonTop = fg('platform_editor_breakout_use_css') ? 0 : stickyHeader.top;
+
 	// Using a portal here to ensure wrapperRef has the tableWrapper as an
 	// ancestor. This is required to make the Intersection Observer work.
 	return createPortal(
@@ -159,7 +162,7 @@ export const FixedButton = ({
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 					position: 'fixed',
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					top: stickyHeader.top + stickyHeader.padding + offset * 2,
+					top: fixedButtonTop + stickyHeader.padding + offset * 2,
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 					zIndex: akEditorTableCellOnStickyHeaderZIndex,
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

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

@@ -10,6 +10,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import {
 	clearHoverSelection,
@@ -95,7 +96,8 @@ export const ColumnControls = ({
 	const firstRow = tableRef.querySelector('tr');
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+	const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights?.[0];
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -98,10 +98,13 @@ const TableFloatingColumnControls = ({
 	const colWidths = getColumnsWidths(editorView);
 
 	if (stickyTop) {
+		const columnControlTopOffsetFromParent = '-12px';
 		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
 		containerRef?.current?.style.setProperty(
 			'top',
-			`${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
+			fg('platform_editor_breakout_use_css')
+				? columnControlTopOffsetFromParent
+				: `${stickyTop! - headerRowHeight + 33}px`, // 33px is padding and margin applied on tr.sticky
 		);
 	} else {
 		containerRef?.current?.style.removeProperty('top');

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

@@ -7,6 +7,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -36,7 +37,13 @@ class CornerControlComponent extends Component<CornerControlProps & WrappedCompo
 				})}
 				style={{
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					top: this.props.stickyTop !== undefined ? `${this.props.stickyTop}px` : undefined,
+					top: fg('platform_editor_breakout_use_css')
+						? this.props.stickyTop !== undefined
+							? `0px`
+							: undefined
+						: this.props.stickyTop !== undefined
+							? `${this.props.stickyTop}px`
+							: undefined,
 				}}
 				contentEditable={false}
 			>

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

@@ -6,6 +6,7 @@ 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 '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
@@ -78,7 +79,13 @@ 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: thisRowSticky ? `${this.props.stickyTop! + 3}px` : undefined,
+									top: fg('platform_editor_breakout_use_css')
+										? thisRowSticky
+											? `3px`
+											: undefined
+										: thisRowSticky
+											? `${this.props.stickyTop! + 3}px`
+											: 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,
 								}}