@atlaskit/editor-plugin-table 5.7.4 → 5.7.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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/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/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/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/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"

package/dist/esm/nodeviews/TableContainer.js

@@ -43,7 +43,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     getPos = _ref2.getPos,
     tableRef = _ref2.tableRef,
     isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi;
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    tableResizePerformance = _ref2.tableResizePerformance;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var updateContainerHeight = useCallback(function (height) {
@@ -124,7 +125,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     tableRef: tableRef,
     displayGuideline: displayGuideline,
     attachAnalyticsEvent: attachAnalyticsEvent,
-    displayGapCursor: displayGapCursor
+    displayGapCursor: displayGapCursor,
+    tableResizePerformance: tableResizePerformance
   };
   if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
     tableResizerProps = _objectSpread(_objectSpread({}, tableResizerProps), {}, {
@@ -136,7 +138,8 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     style: {
       display: 'flex',
       justifyContent: 'center'
-    }
+    },
+    contentEditable: tableResizePerformance && isResizing ? 'false' : undefined
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current
@@ -162,7 +165,8 @@ export var 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.createElement(ResizableTableContainer, {
       className: className,
@@ -172,7 +176,8 @@ export var TableContainer = function TableContainer(_ref3) {
       getPos: getPos,
       tableRef: tableRef,
       isResizing: isResizing,
-      pluginInjectionApi: pluginInjectionApi
+      pluginInjectionApi: pluginInjectionApi,
+      tableResizePerformance: tableResizePerformance
     }, children);
   }
   var tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';

package/dist/esm/nodeviews/TableResizer.js

@@ -87,7 +87,8 @@ export var TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef,
     displayGuideline = _ref.displayGuideline,
     attachAnalyticsEvent = _ref.attachAnalyticsEvent,
-    displayGapCursor = _ref.displayGapCursor;
+    displayGapCursor = _ref.displayGapCursor,
+    tableResizePerformance = _ref.tableResizePerformance;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -217,7 +218,10 @@ export var TableResizer = function TableResizer(_ref) {
       var resizeFrameRatePayloads = generateResizeFrameRatePayloads({
         docSize: state.doc.nodeSize,
         frameRateSamples: frameRateSamples,
-        originalNode: node
+        originalNode: node,
+        experiments: {
+          tableResizePerformance: tableResizePerformance
+        }
       });
       resizeFrameRatePayloads.forEach(function (payload) {
         var _attachAnalyticsEvent;
@@ -253,7 +257,7 @@ export var 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 = useCallback(function (step) {
     var newWidth = width + step;
     if (newWidth > maxWidth || newWidth < resizerMinWidth) {

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

@@ -23,7 +23,7 @@ export var tableRowHeight = 44;
 var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n  }\n}\n");
 var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.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(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}");
 var stickyScrollbarSentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n > .").concat(ClassName.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(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight + tableRowHeight * 3, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n    bottom: ").concat(MAX_BROWSER_SCROLLBAR_HEIGHT, "px;\n  }\n}");
-var stickyScrollbarContainerStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.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(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.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/esm/utils/analytics.js

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

package/dist/types/nodeviews/TableContainer.d.ts

@@ -24,8 +24,9 @@ type ResizableTableContainerProps = {
     tableRef: HTMLTableElement;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tableResizePerformance?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableResizePerformance, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -38,6 +39,7 @@ type TableContainerProps = {
     isNested: boolean;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tableResizePerformance?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, tableResizePerformance, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types/nodeviews/TableResizer.d.ts

@@ -16,10 +16,11 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    tableResizePerformance?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, tableResizePerformance, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

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

@@ -33,6 +33,7 @@ export declare const generateResizeFrameRatePayloads: (props: {
     docSize: number;
     frameRateSamples: number[];
     originalNode: PMNode;
+    experiments?: Record<string, boolean | undefined>;
 }) => TableEventPayload[];
 /**
  * Measures the framerate of a component over a given time period.

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -24,8 +24,9 @@ type ResizableTableContainerProps = {
     tableRef: HTMLTableElement;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tableResizePerformance?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableResizePerformance, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -38,6 +39,7 @@ type TableContainerProps = {
     isNested: boolean;
     isResizing?: boolean;
     pluginInjectionApi?: PluginInjectionAPI;
+    tableResizePerformance?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { lineLength, width: editorWidth }, isTableResizingEnabled, isBreakoutEnabled, editorView, getPos, tableRef, isNested, isResizing, pluginInjectionApi, tableResizePerformance, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -16,10 +16,11 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
     displayGapCursor: (toggle: boolean) => boolean;
+    tableResizePerformance?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, tableResizePerformance, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

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

@@ -33,6 +33,7 @@ export declare const generateResizeFrameRatePayloads: (props: {
     docSize: number;
     frameRateSamples: number[];
     originalNode: PMNode;
+    experiments?: Record<string, boolean | undefined>;
 }) => TableEventPayload[];
 /**
  * Measures the framerate of a component over a given time period.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.4",
+  "version": "5.7.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.30.0",
+    "@atlaskit/editor-common": "^76.31.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -302,6 +302,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
               analytics: { actions: { attachAnalyticsEvent: analyticsMock } },
             } as any
           }
+          tableResizePerformance={true}
         />,
       );
 
@@ -326,6 +327,9 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           frameRate: 51,
           isInitialSample: true,
           nodeSize: 20,
+          experiments: {
+            tableResizePerformance: true,
+          },
         },
       });
 
@@ -338,6 +342,9 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           frameRate: 53,
           isInitialSample: false,
           nodeSize: 20,
+          experiments: {
+            tableResizePerformance: true,
+          },
         },
       });
 

package/src/nodeviews/TableComponent.tsx

@@ -569,7 +569,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           shadowPadding +
           2;
 
-    const { stickyScrollbar } = getEditorFeatureFlags();
+    const { stickyScrollbar, tableResizePerformance } = getEditorFeatureFlags();
 
     return (
       <TableContainer
@@ -589,6 +589,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         pluginInjectionApi={pluginInjectionApi}
         isTableResizingEnabled={options?.isTableResizingEnabled}
         isResizing={isResizing}
+        tableResizePerformance={tableResizePerformance}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

package/src/nodeviews/TableContainer.tsx

@@ -75,6 +75,7 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tableResizePerformance?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -88,6 +89,7 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
+    tableResizePerformance,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -207,6 +209,7 @@ export const ResizableTableContainer = React.memo(
       displayGuideline,
       attachAnalyticsEvent,
       displayGapCursor,
+      tableResizePerformance,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {
@@ -223,6 +226,9 @@ export const ResizableTableContainer = React.memo(
           display: 'flex',
           justifyContent: 'center',
         }}
+        contentEditable={
+          tableResizePerformance && isResizing ? 'false' : undefined
+        }
       >
         <div
           style={{
@@ -254,6 +260,7 @@ type TableContainerProps = {
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
+  tableResizePerformance?: boolean;
 };
 
 export const TableContainer = ({
@@ -269,6 +276,7 @@ export const TableContainer = ({
   isNested,
   isResizing,
   pluginInjectionApi,
+  tableResizePerformance,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -281,6 +289,7 @@ export const TableContainer = ({
         tableRef={tableRef}
         isResizing={isResizing}
         pluginInjectionApi={pluginInjectionApi}
+        tableResizePerformance={tableResizePerformance}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/TableResizer.tsx

@@ -68,6 +68,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  tableResizePerformance?: boolean;
 }
 
 export interface TableResizerImprovementProps extends TableResizerProps {
@@ -162,6 +163,7 @@ export const TableResizer = ({
   displayGuideline,
   attachAnalyticsEvent,
   displayGapCursor,
+  tableResizePerformance,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
@@ -354,6 +356,9 @@ export const TableResizer = ({
           docSize: state.doc.nodeSize,
           frameRateSamples,
           originalNode: node,
+          experiments: {
+            tableResizePerformance,
+          },
         });
         resizeFrameRatePayloads.forEach((payload) => {
           attachAnalyticsEvent(payload)?.(tr);
@@ -416,6 +421,7 @@ export const TableResizer = ({
       attachAnalyticsEvent,
       endMeasure,
       onResizeStop,
+      tableResizePerformance,
     ],
   );
 

package/src/ui/common-styles.ts

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

package/src/utils/analytics.ts

@@ -144,6 +144,7 @@ export const generateResizeFrameRatePayloads = (props: {
   docSize: number;
   frameRateSamples: number[];
   originalNode: PMNode;
+  experiments?: Record<string, boolean | undefined>;
 }): TableEventPayload[] => {
   const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(
     props.frameRateSamples,
@@ -157,6 +158,7 @@ export const generateResizeFrameRatePayloads = (props: {
       nodeSize: props.originalNode.nodeSize,
       docSize: props.docSize,
       isInitialSample: index === 0,
+      experiments: props.experiments,
     },
   }));
 };