@atlaskit/editor-plugin-table 5.7.3 → 5.7.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.5
+
+### Patch Changes
+
+- [#64179](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64179) [`3754cce9321d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3754cce9321d) - setup table resizing performance experiment
+- [#63857](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63857) [`9f15ea30d592`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9f15ea30d592) - [ux] fix zindex for sticky scrollbar
+- Updated dependencies
+
+## 5.7.4
+
+### Patch Changes
+
+- [#63287](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63287) [`8b58c452f126`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b58c452f126) - ED-20334 Cleaned reference for feature flag 'platform.editor.table-update-colwidths-after-column-is-deleted'and refactored code for it.
+
 ## 5.7.3
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -43,7 +43,7 @@ function addColumnAt(getEditorContainerWidth) {
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = (0, _columnWidth.rescaleColumns)(getEditorContainerWidth)(table, view)(updatedTr);
+        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
       }
       if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({

package/dist/cjs/nodeviews/TableComponent.js

@@ -605,7 +605,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNested = (0, _utils4.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 _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar,
+        tableResizePerformance = _getEditorFeatureFlag3.tableResizePerformance;
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer, {
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_CONTAINER, (_classnames = {}, (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.WITH_CONTROLS, allowControls && tableActive), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.HOVERED_DELETE_BUTTON, isInDanger), (0, _defineProperty3.default)(_classnames, _types.TableCssClassName.TABLE_SELECTED, (0, _utils2.isTableSelected)(view.state.selection)), _classnames)),
         editorView: view,
@@ -617,7 +618,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-        isResizing: isResizing
+        isResizing: isResizing,
+        tableResizePerformance: tableResizePerformance
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/cjs/nodeviews/TableContainer.js

@@ -53,7 +53,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi;
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    tableResizePerformance = _ref2.tableResizePerformance;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
@@ -134,7 +135,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     tableRef: tableRef,
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    tableResizePerformance: tableResizePerformance
   };
   if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -146,7 +148,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     style: {
       display: 'flex',
       justifyContent: 'center'
-    }
+    },
+    contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: tableWidthRef.current
@@ -172,7 +175,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
     tableRef = _ref3.tableRef,
     isNested = _ref3.isNested,
     isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi;
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    tableResizePerformance = _ref3.tableResizePerformance;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer, {
       className: className,
@@ -182,7 +186,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref3) {
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tableResizePerformance: tableResizePerformance
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? (0, _styles.calcTableWidth)(node.attrs.layout, editorWidth) : 'inherit';

package/dist/cjs/nodeviews/TableResizer.js

@@ -97,7 +97,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef,
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
-    displayGapCursor = _ref.displayGapCursor;
+    displayGapCursor = _ref.displayGapCursor,
+    tableResizePerformance = _ref.tableResizePerformance;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
@@ -227,7 +228,10 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({
         docSize: state.doc.nodeSize,
         frameRateSamples: frameRateSamples,
-        originalNode: node
+        originalNode: node,
+        experiments: {
+          tableResizePerformance: tableResizePerformance
+        }
       });
       resizeFrameRatePayloads.forEach(function (payload) {
         var _attachAnalyticsEvent;
@@ -263,7 +267,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tableResizePerformance]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/cjs/transforms/column-width.js

@@ -4,16 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateColumnWidths = exports.rescaleColumnsOld = exports.rescaleColumnsNew = exports.rescaleColumns = void 0;
+exports.updateColumnWidths = exports.rescaleColumns = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
-var _misc = require("../pm-plugins/table-resizing/utils/misc");
 var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
 var _scaleTable = require("../pm-plugins/table-resizing/utils/scale-table");
 var _commonStyles = require("../ui/common-styles");
@@ -95,7 +93,7 @@ var updateColumnWidths = exports.updateColumnWidths = function updateColumnWidth
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew() {
+var rescaleColumns = exports.rescaleColumns = function rescaleColumns() {
   return function (table, view) {
     return function (tr) {
       var _tableRef$parentEleme, _tableRef$parentEleme2;
@@ -115,7 +113,7 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
         // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
         width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
         /** the is the width the table can reach before overflowing */
-        possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset - 1,
+        possibleMaxWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 || (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - _commonStyles.insertColumnButtonOffset,
         isResized: isResized
       };
 
@@ -175,104 +173,4 @@ var rescaleColumnsNew = exports.rescaleColumnsNew = function rescaleColumnsNew()
       return updateColumnWidths(resizeState, table.node, table.start)(tr);
     };
   };
-};
-
-/**
- * This function is called when user inserts/deletes a column in a table to;
- * - rescale all columns (if the table did not overflow before the insertion)
- * - and update column widths.
- *
- * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
- * @param table
- * @param view
- * @returns Updated transaction with rescaled columns for a given table
- */
-var rescaleColumnsOld = exports.rescaleColumnsOld = function rescaleColumnsOld(getEditorContainerWidth) {
-  return function (table, view) {
-    return function (tr) {
-      var _tableRef$parentEleme3;
-      if (!view) {
-        return tr;
-      }
-      var pos = table.pos;
-      var newTable = tr.doc.nodeAt(pos);
-      var state = view.state;
-      var domAtPos = view.domAtPos.bind(view);
-      var maybeTable = domAtPos(table.start).node;
-      var tableRef = maybeTable.closest('table');
-      if (!tableRef || !newTable) {
-        return tr;
-      }
-      var layout = (0, _resizeState.normaliseTableLayout)(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
-      // The is the width the table can reach before overflowing
-      var maxSize = (0, _misc.getTableMaxWidth)({
-        table: table.node,
-        tableStart: table.start,
-        state: state,
-        layout: layout,
-        getEditorContainerWidth: getEditorContainerWidth
-      });
-      var tableWidth = tableRef.clientWidth || _editorSharedStyles.akEditorDefaultLayoutWidth;
-      var tableMaxWidth = (tableRef === null || tableRef === void 0 || (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
-      tableMaxWidth -= _commonStyles.insertColumnButtonOffset;
-      var newTableMap = _tableMap.TableMap.get(newTable);
-      var noOfColumns = newTableMap.width;
-      if (!noOfColumns || noOfColumns <= 0) {
-        return tr;
-      }
-      var columnWidthUnresized = tableWidth / noOfColumns;
-
-      // If the table has not been resized, and the column width is bigger than the minimum column width
-      // we skip updating the size of columns here.
-      if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized > _styles.tableCellMinWidth) {
-        return tr;
-      }
-
-      // If the table has not been resized, and the column width is smaller than the minimum column width
-      // Or if the table has been resized, but each column width is either 48px or null
-      // we update the table to have 48px for each column
-      if (!(0, _utils.hasTableBeenResized)(table.node) && columnWidthUnresized <= _styles.tableCellMinWidth || (0, _utils.hasTableBeenResized)(table.node) && (0, _colgroup.isMinCellWidthTable)(table.node)) {
-        var widths = new Array(noOfColumns).fill(_styles.tableCellMinWidth);
-        var cols = widths.map(function (_, index) {
-          return {
-            width: _styles.tableCellMinWidth,
-            minWidth: _styles.tableCellMinWidth,
-            index: index
-          };
-        });
-        var overflow = tableWidth > maxSize;
-        var minWidthResizeState = {
-          cols: cols,
-          widths: widths,
-          maxSize: maxSize,
-          tableWidth: tableWidth,
-          overflow: overflow
-        };
-        return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
-      }
-      var resizeState = (0, _resizeState.getResizeState)({
-        minWidth: _styles.tableCellMinWidth,
-        table: table.node,
-        start: table.start,
-        tableRef: tableRef,
-        domAtPos: domAtPos,
-        maxSize: maxSize
-      });
-      var previousTableWidth = resizeState.tableWidth - _tableMap.tableNewColumnMinWidth;
-      var tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
-
-      // If the new table width will result in the table going into an overflow state
-      // we resize the cells to avoid the overflow occuring
-      if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-        resizeState = (0, _scaleTable.scaleTableTo)(resizeState, maxSize);
-      }
-      return updateColumnWidths(resizeState, table.node, table.start)(tr);
-    };
-  };
-};
-var rescaleColumns = exports.rescaleColumns = function rescaleColumns(getEditorContainerWidth) {
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-    return rescaleColumnsNew();
-  }
-  return rescaleColumnsOld(getEditorContainerWidth);
 };

package/dist/cjs/transforms/delete-columns.js

@@ -12,7 +12,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _columnWidth = require("./column-width");
 var _split = require("./split");
@@ -224,10 +223,8 @@ var deleteColumns = exports.deleteColumns = function deleteColumns(rect, allowCu
       updatedTr = deleteColumnsLegacy(rect)(updatedTr);
     }
     var table = (0, _utils.findTable)(updatedTr.selection);
-    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-      if (table) {
-        updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
-      }
+    if (table) {
+      updatedTr = (0, _columnWidth.rescaleColumns)()(table, view)(updatedTr);
     }
     return updatedTr;
   };

package/dist/cjs/ui/common-styles.js

@@ -30,7 +30,7 @@ var tableRowHeight = exports.tableRowHeight = 44;
 var rangeSelectionStyles = "\n.".concat(_types.TableCssClassName.NODEVIEW_WRAPPER, ".").concat(_editorSharedStyles.akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat((0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), "\n  }\n}\n");
 var sentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(_consts.columnControlsDecorationHeight, "px;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + _consts.tablePadding * 2 + 23, "px;\n  }\n  &.").concat(_types.TableCssClassName.WITH_CONTROLS, " {\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(_consts.columnControlsDecorationHeight, "px;\n    }\n  }\n}");
 var stickyScrollbarSentinelStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n    top: ").concat(_consts.columnControlsDecorationHeight + tableRowHeight * 3, "px;\n  }\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n    bottom: ").concat(_editorSharedStyles.MAX_BROWSER_SCROLLBAR_HEIGHT, "px;\n  }\n}");
-var stickyScrollbarContainerStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n    width: 100%;\n    display: none;\n    overflow-x: auto;\n    position: sticky;\n    bottom: 0;\n  }\n}");
+var stickyScrollbarContainerStyles = ".".concat(_types.TableCssClassName.TABLE_CONTAINER, " {\n  > .").concat(_types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n    width: 100%;\n    display: none;\n    overflow-x: auto;\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n  }\n}");
 var stickyScrollbarStyles = function stickyScrollbarStyles(featureFlags) {
   return featureFlags !== null && featureFlags !== void 0 && featureFlags.stickyScrollbar ? "".concat(stickyScrollbarContainerStyles, " ").concat(stickyScrollbarSentinelStyles) : '';
 };

package/dist/cjs/utils/analytics.js

@@ -116,7 +116,8 @@ var generateResizeFrameRatePayloads = exports.generateResizeFrameRatePayloads =
         frameRate: frameRateSample,
         nodeSize: props.originalNode.nodeSize,
         docSize: props.docSize,
-        isInitialSample: index === 0
+        isInitialSample: index === 0,
+        experiments: props.experiments
       }
     };
   });

package/dist/es2019/commands/insert.js

@@ -32,7 +32,7 @@ export function addColumnAt(getEditorContainerWidth) {
       const table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns()(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({

package/dist/es2019/nodeviews/TableComponent.js

@@ -608,7 +608,8 @@ class TableComponent extends React.Component {
     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 {
-      stickyScrollbar
+      stickyScrollbar,
+      tableResizePerformance
     } = getEditorFeatureFlags();
     return /*#__PURE__*/React.createElement(TableContainer, {
       className: classnames(ClassName.TABLE_CONTAINER, {
@@ -626,7 +627,8 @@ class TableComponent extends React.Component {
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-      isResizing: isResizing
+      isResizing: isResizing,
+      tableResizePerformance: tableResizePerformance
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableContainer.js

@@ -41,7 +41,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   getPos,
   tableRef,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tableResizePerformance
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -123,7 +124,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     tableRef,
     displayGuideline,
     attachAnalyticsEvent,
-    displayGapCursor
+    displayGapCursor,
+    tableResizePerformance
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = {
@@ -136,7 +138,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     style: {
       display: 'flex',
       justifyContent: 'center'
-    }
+    },
+    contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current
@@ -163,7 +166,8 @@ export const TableContainer = ({
   tableRef,
   isNested,
   isResizing,
-  pluginInjectionApi
+  pluginInjectionApi,
+  tableResizePerformance
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -174,7 +178,8 @@ export const TableContainer = ({
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tableResizePerformance: tableResizePerformance
     }, children);
   }
   const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/es2019/nodeviews/TableResizer.js

@@ -82,7 +82,8 @@ export const TableResizer = ({
   tableRef,
   displayGuideline,
   attachAnalyticsEvent,
-  displayGapCursor
+  displayGapCursor,
+  tableResizePerformance
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -218,7 +219,10 @@ export const TableResizer = ({
       const resizeFrameRatePayloads = generateResizeFrameRatePayloads({
         docSize: state.doc.nodeSize,
         frameRateSamples,
-        originalNode: node
+        originalNode: node,
+        experiments: {
+          tableResizePerformance
+        }
       });
       resizeFrameRatePayloads.forEach(payload => {
         var _attachAnalyticsEvent;
@@ -255,7 +259,7 @@ export const TableResizer = ({
       onResizeStop();
     }
     return newWidth;
-  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop]);
+  }, [displayGapCursor, updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure, onResizeStop, tableResizePerformance]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

package/dist/es2019/transforms/column-width.js

@@ -1,12 +1,10 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-import { TableMap, tableNewColumnMinWidth } from '@atlaskit/editor-tables/table-map';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
-import { getTableMaxWidth } from '../pm-plugins/table-resizing/utils/misc';
-import { getResizeState, normaliseTableLayout } from '../pm-plugins/table-resizing/utils/resize-state';
+import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
 import { insertColumnButtonOffset } from '../ui/common-styles';
 
@@ -87,7 +85,7 @@ export const updateColumnWidths = (resizeState, table, start) => tr => {
  * @param view
  * @returns Updated transaction with rescaled columns for a given table
  */
-export const rescaleColumnsNew = () => (table, view) => tr => {
+export const rescaleColumns = () => (table, view) => tr => {
   var _tableRef$parentEleme, _tableRef$parentEleme2;
   if (!view) {
     return tr;
@@ -105,7 +103,7 @@ export const rescaleColumnsNew = () => (table, view) => tr => {
     // when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
     width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
     /** the is the width the table can reach before overflowing */
-    possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset - 1,
+    possibleMaxWidth: getBooleanFF('platform.editor.custom-table-width') ? (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || 0 : ((tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme2 = tableRef.parentElement) === null || _tableRef$parentEleme2 === void 0 ? void 0 : _tableRef$parentEleme2.clientWidth) || 0) - insertColumnButtonOffset,
     isResized
   };
 
@@ -161,100 +159,4 @@ export const rescaleColumnsNew = () => (table, view) => tr => {
     resizeState = scaleTableTo(resizeState, previousTableInfo.possibleMaxWidth);
   }
   return updateColumnWidths(resizeState, table.node, table.start)(tr);
-};
-
-/**
- * This function is called when user inserts/deletes a column in a table to;
- * - rescale all columns (if the table did not overflow before the insertion)
- * - and update column widths.
- *
- * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
- * @param table
- * @param view
- * @returns Updated transaction with rescaled columns for a given table
- */
-export const rescaleColumnsOld = getEditorContainerWidth => (table, view) => tr => {
-  var _tableRef$parentEleme3;
-  if (!view) {
-    return tr;
-  }
-  const pos = table.pos;
-  const newTable = tr.doc.nodeAt(pos);
-  const {
-    state
-  } = view;
-  const domAtPos = view.domAtPos.bind(view);
-  const maybeTable = domAtPos(table.start).node;
-  const tableRef = maybeTable.closest('table');
-  if (!tableRef || !newTable) {
-    return tr;
-  }
-  const layout = normaliseTableLayout(tableRef === null || tableRef === void 0 ? void 0 : tableRef.dataset.layout);
-  // The is the width the table can reach before overflowing
-  const maxSize = getTableMaxWidth({
-    table: table.node,
-    tableStart: table.start,
-    state,
-    layout,
-    getEditorContainerWidth
-  });
-  const tableWidth = tableRef.clientWidth || akEditorDefaultLayoutWidth;
-  let tableMaxWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme3 = tableRef.parentElement) === null || _tableRef$parentEleme3 === void 0 ? void 0 : _tableRef$parentEleme3.clientWidth) || 0;
-  tableMaxWidth -= insertColumnButtonOffset;
-  const newTableMap = TableMap.get(newTable);
-  const noOfColumns = newTableMap.width;
-  if (!noOfColumns || noOfColumns <= 0) {
-    return tr;
-  }
-  const columnWidthUnresized = tableWidth / noOfColumns;
-
-  // If the table has not been resized, and the column width is bigger than the minimum column width
-  // we skip updating the size of columns here.
-  if (!hasTableBeenResized(table.node) && columnWidthUnresized > tableCellMinWidth) {
-    return tr;
-  }
-
-  // If the table has not been resized, and the column width is smaller than the minimum column width
-  // Or if the table has been resized, but each column width is either 48px or null
-  // we update the table to have 48px for each column
-  if (!hasTableBeenResized(table.node) && columnWidthUnresized <= tableCellMinWidth || hasTableBeenResized(table.node) && isMinCellWidthTable(table.node)) {
-    const widths = new Array(noOfColumns).fill(tableCellMinWidth);
-    const cols = widths.map((_, index) => ({
-      width: tableCellMinWidth,
-      minWidth: tableCellMinWidth,
-      index
-    }));
-    const overflow = tableWidth > maxSize;
-    const minWidthResizeState = {
-      cols,
-      widths,
-      maxSize,
-      tableWidth,
-      overflow
-    };
-    return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
-  }
-  let resizeState = getResizeState({
-    minWidth: tableCellMinWidth,
-    table: table.node,
-    start: table.start,
-    tableRef,
-    domAtPos,
-    maxSize
-  });
-  const previousTableWidth = resizeState.tableWidth - tableNewColumnMinWidth;
-  const tableDidntPreviouslyOverflow = previousTableWidth <= Math.max(maxSize, tableMaxWidth);
-
-  // If the new table width will result in the table going into an overflow state
-  // we resize the cells to avoid the overflow occuring
-  if (tableDidntPreviouslyOverflow && resizeState.overflow) {
-    resizeState = scaleTableTo(resizeState, maxSize);
-  }
-  return updateColumnWidths(resizeState, table.node, table.start)(tr);
-};
-export const rescaleColumns = getEditorContainerWidth => {
-  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-    return rescaleColumnsNew();
-  }
-  return rescaleColumnsOld(getEditorContainerWidth);
 };

package/dist/es2019/transforms/delete-columns.js

@@ -3,7 +3,6 @@ import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from './column-width';
 import { splitCellsInColumns } from './split';
@@ -204,10 +203,8 @@ export const deleteColumns = (rect, allowCustomStep, view) => tr => {
     updatedTr = deleteColumnsLegacy(rect)(updatedTr);
   }
   const table = findTable(updatedTr.selection);
-  if (getBooleanFF('platform.editor.table-update-colwidths-after-column-is-deleted')) {
-    if (table) {
-      updatedTr = rescaleColumns()(table, view)(updatedTr);
-    }
+  if (table) {
+    updatedTr = rescaleColumns()(table, view)(updatedTr);
   }
   return updatedTr;
 };

package/dist/es2019/ui/common-styles.js

@@ -75,6 +75,7 @@ const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
     overflow-x: auto;
     position: sticky;
     bottom: 0;
+    z-index: 1;
   }
 }`;
 const stickyScrollbarStyles = featureFlags => {

package/dist/es2019/utils/analytics.js

@@ -101,7 +101,8 @@ export const generateResizeFrameRatePayloads = props => {
       frameRate: frameRateSample,
       nodeSize: props.originalNode.nodeSize,
       docSize: props.docSize,
-      isInitialSample: index === 0
+      isInitialSample: index === 0,
+      experiments: props.experiments
     }
   }));
 };

package/dist/esm/commands/insert.js

@@ -34,7 +34,7 @@ export function addColumnAt(getEditorContainerWidth) {
       var table = findTable(updatedTr.selection);
       if (table) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
-        updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
+        updatedTr = rescaleColumns()(table, view)(updatedTr);
       }
       if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
         updatedTr = updateRowOrColumnMovedTransform({

package/dist/esm/nodeviews/TableComponent.js

@@ -598,7 +598,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       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 _getEditorFeatureFlag3 = getEditorFeatureFlags(),
-        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar;
+        stickyScrollbar = _getEditorFeatureFlag3.stickyScrollbar,
+        tableResizePerformance = _getEditorFeatureFlag3.tableResizePerformance;
       return /*#__PURE__*/React.createElement(TableContainer, {
         className: classnames(ClassName.TABLE_CONTAINER, (_classnames = {}, _defineProperty(_classnames, ClassName.WITH_CONTROLS, allowControls && tableActive), _defineProperty(_classnames, ClassName.TABLE_STICKY, this.state.stickyHeader && hasHeaderRow), _defineProperty(_classnames, ClassName.HOVERED_DELETE_BUTTON, isInDanger), _defineProperty(_classnames, ClassName.TABLE_SELECTED, isTableSelected(view.state.selection)), _classnames)),
         editorView: view,
@@ -610,7 +611,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
-        isResizing: isResizing
+        isResizing: isResizing,
+        tableResizePerformance: tableResizePerformance
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"