@atlaskit/editor-plugin-table 2.9.1 → 2.10.0

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -31,11 +31,7 @@ import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
-import { updateOverflowShadows } from './update-overflow-shadows';
 var isIE11 = browser.ie_version === 11;
-var NOOP = function NOOP() {
-  return undefined;
-};
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -46,8 +42,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _this = _super.call(this, props);
     _defineProperty(_assertThisInitialized(_this), "state", (_defineProperty2 = {
       scroll: 0,
-      parentWidth: undefined,
-      isLoading: true
+      parentWidth: undefined
     }, _defineProperty(_defineProperty2, ShadowEvent.SHOW_BEFORE_SHADOW, false), _defineProperty(_defineProperty2, ShadowEvent.SHOW_AFTER_SHADOW, false), _defineProperty2));
     _defineProperty(_assertThisInitialized(_this), "updateShadowState", function (shadowKey, value) {
       if (_this.state[shadowKey] === value) {
@@ -66,8 +61,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "onStickyState", function (state) {
-      var _this$props$getEditor = _this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor.tableOverflowShadowsOptimization;
       var pos = _this.props.getPos();
       if (!isValidPosition(pos, _this.props.view.state)) {
         return;
@@ -77,7 +70,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           stickyHeader: stickyHeader
         });
-        if (tableOverflowShadowsOptimization && _this.overflowShadowsObserver) {
+        if (_this.overflowShadowsObserver) {
           _this.overflowShadowsObserver.updateStickyShadows();
         }
       }
@@ -96,11 +89,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           header.style.marginRight = '2px';
         }
       }
-      var _this$props$getEditor2 = _this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor2.tableOverflowShadowsOptimization;
-      if (!tableOverflowShadowsOptimization) {
-        _this.updateShadows();
-      }
       _this.setState(_defineProperty({}, ShadowEvent.SHOW_BEFORE_SHADOW, _this.wrapper.scrollLeft !== 0));
     });
     _defineProperty(_assertThisInitialized(_this), "handleTableResizing", function () {
@@ -245,8 +233,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleWindowResizeDebounced", rafSchedule(_this.handleWindowResize));
     var _options = props.options,
       _containerWidth = props.containerWidth,
-      _getNode = props.getNode,
-      getEditorFeatureFlags = props.getEditorFeatureFlags;
+      _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
 
@@ -265,16 +252,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      initialRenderOptimization = _getEditorFeatureFlag.initialRenderOptimization;
-    if (!initialRenderOptimization) {
-      // @see ED-7945
-      requestAnimationFrame(function () {
-        _this.setState({
-          isLoading: false
-        });
-      });
-    }
     return _this;
   }
   _createClass(TableComponent, [{
@@ -331,6 +308,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
+      var _this$wrapper;
       var _this$props8 = this.props,
         view = _this$props8.view,
         getNode = _this$props8.getNode,
@@ -342,19 +320,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
-      var _this$props$getEditor3 = this.props.getEditorFeatureFlags(),
-        tableOverflowShadowsOptimization = _this$props$getEditor3.tableOverflowShadowsOptimization;
-      if (!tableOverflowShadowsOptimization) {
-        this.updateShadows();
-      } else {
-        var _this$wrapper;
-        if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-          this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
-        }
-        if (this.overflowShadowsObserver) {
-          var _this$state$stickyHea;
-          this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
-        }
+      if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
+        this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
+      }
+      if (this.overflowShadowsObserver) {
+        var _this$state$stickyHea;
+        this.overflowShadowsObserver.observeShadowSentinels((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky);
       }
       var currentTable = getNode();
       if (currentTable.attrs.__autoSize) {
@@ -370,22 +341,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || tablesHaveDifferentNoOfColumns(currentTable, previousTable)) {
           var _view = this.props.view;
           recreateResizeColsByNode(this.table, currentTable);
-          updateControls(this.props.getEditorFeatureFlags)(_view.state);
+          updateControls()(_view.state);
         }
         this.handleTableResizingDebounced();
       }
     }
-  }, {
-    key: "updateShadows",
-    value: function updateShadows() {
-      var _this$wrapper2;
-      var parent = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : _this$wrapper2.parentElement;
-      if (this.wrapper && parent) {
-        var rightShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_RIGHT_SHADOW));
-        var leftShadows = parent.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
-        updateOverflowShadows(this.props.getEditorFeatureFlags)(this.wrapper, this.table, rightShadows, leftShadows);
-      }
-    }
   }, {
     key: "render",
     value: function render() {
@@ -406,7 +366,6 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getPos = _this$props9.getPos,
         pluginInjectionApi = _this$props9.pluginInjectionApi;
       var _this$state = this.state,
-        isLoading = _this$state.isLoading,
         showBeforeShadow = _this$state.showBeforeShadow,
         showAfterShadow = _this$state.showAfterShadow;
       var node = getNode();
@@ -414,16 +373,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _getPluginState2 = getPluginState(view.state),
         isInDanger = _getPluginState2.isInDanger,
         hoveredRows = _getPluginState2.hoveredRows;
-      var _this$props$getEditor4 = this.props.getEditorFeatureFlags(),
-        stickyHeadersOptimization = _this$props$getEditor4.stickyHeadersOptimization,
-        initialRenderOptimization = _this$props$getEditor4.initialRenderOptimization,
-        tableRenderOptimization = _this$props$getEditor4.tableRenderOptimization,
-        tableOverflowShadowsOptimization = _this$props$getEditor4.tableOverflowShadowsOptimization;
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
-
-      //dont need to change tableHeight with tableRenderOptimization because it will be observed inside floating components
-      var tableHeight = tableRef && !tableRenderOptimization ? tableRef.offsetHeight : undefined;
       var hasHeaderRow = containsHeaderRow(node);
       var rowControls = /*#__PURE__*/React.createElement("div", {
         className: ClassName.ROW_CONTROLS_WRAPPER
@@ -442,17 +393,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // pass `selection` and `tableHeight` to control re-render
         ,
         selection: view.state.selection,
-        tableHeight: tableHeight,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
-      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -tableToolbarSize : tableMarginSides;
-      var shadowStyle = tableOverflowShadowsOptimization ? memoizeOne(function (visible) {
+      var shadowPadding = allowControls && tableActive ? -tableToolbarSize : tableMarginSides;
+      var shadowStyle = memoizeOne(function (visible) {
         return {
           visibility: visible ? 'visible' : 'hidden'
         };
-      }) : NOOP;
+      });
       var isNested = isTableNested(view.state, getPos());
       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)),
@@ -465,16 +415,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
-      }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
+      }), allowControls && rowControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_LEFT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
         style: {
-          visibility: tableOverflowShadowsOptimization ? showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          visibility: showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       }), /*#__PURE__*/React.createElement("div", {
@@ -501,10 +451,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: "".concat(ClassName.TABLE_RIGHT_SHADOW, " ").concat(ClassName.TABLE_STICKY_SHADOW),
         style: {
-          visibility: tableOverflowShadowsOptimization ? showAfterShadow && hasHeaderRow ? 'visible' : 'hidden' : undefined,
+          visibility: showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
-      })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
+      })), /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
       }));

package/dist/esm/plugins/table/nodeviews/table.js

@@ -70,7 +70,6 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     });
     _defineProperty(_assertThisInitialized(_this), "hasHoveredRows", false);
     _this.getPos = props.getPos;
-    _this.tableRenderOptimization = props.tableRenderOptimization;
     _this.eventDispatcher = props.eventDispatcher;
     return _this;
   }
@@ -171,33 +170,30 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "viewShouldUpdate",
     value: function viewShouldUpdate(nextNode) {
-      if (this.tableRenderOptimization) {
-        var _getPluginState = getPluginState(this.view.state),
-          hoveredRows = _getPluginState.hoveredRows;
-        var hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
-        if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
-          this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
-          return true;
-        }
-        var _node = this.getNode();
-        if (_typeof(_node.attrs) !== _typeof(nextNode.attrs)) {
-          return true;
-        }
-        var attrKeys = Object.keys(_node.attrs);
-        var nextAttrKeys = Object.keys(nextNode.attrs);
-        if (attrKeys.length !== nextAttrKeys.length) {
-          return true;
-        }
-        var tableMap = TableMap.get(_node);
-        var nextTableMap = TableMap.get(nextNode);
-        if (tableMap.width !== nextTableMap.width) {
-          return true;
-        }
-        return attrKeys.some(function (key) {
-          return _node.attrs[key] !== nextNode.attrs[key];
-        });
+      var _getPluginState = getPluginState(this.view.state),
+        hoveredRows = _getPluginState.hoveredRows;
+      var hoveredRowsChanged = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length) !== this.hasHoveredRows;
+      if (nextNode.attrs.isNumberColumnEnabled && hoveredRowsChanged) {
+        this.hasHoveredRows = !!(hoveredRows !== null && hoveredRows !== void 0 && hoveredRows.length);
+        return true;
       }
-      return _get(_getPrototypeOf(TableView.prototype), "viewShouldUpdate", this).call(this, nextNode);
+      var node = this.getNode();
+      if (_typeof(node.attrs) !== _typeof(nextNode.attrs)) {
+        return true;
+      }
+      var attrKeys = Object.keys(node.attrs);
+      var nextAttrKeys = Object.keys(nextNode.attrs);
+      if (attrKeys.length !== nextAttrKeys.length) {
+        return true;
+      }
+      var tableMap = TableMap.get(node);
+      var nextTableMap = TableMap.get(nextNode);
+      if (tableMap.width !== nextTableMap.width) {
+        return true;
+      }
+      return attrKeys.some(function (key) {
+        return node.attrs[key] !== nextNode.attrs[key];
+      });
     }
   }, {
     key: "ignoreMutation",
@@ -237,8 +233,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
     pluginConfig = _getPluginState2.pluginConfig;
   var _getPluginConfig = getPluginConfig(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing;
-  var _getEditorFeatureFlag = getEditorFeatureFlags(),
-    tableRenderOptimization = _getEditorFeatureFlag.tableRenderOptimization;
   var hasIntlContext = true;
   return new TableView({
     node: node,
@@ -248,7 +242,6 @@ export var createTableView = function createTableView(node, view, getPos, portal
     eventDispatcher: eventDispatcher,
     getPos: getPos,
     options: options,
-    tableRenderOptimization: tableRenderOptimization,
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
     hasIntlContext: hasIntlContext,

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -7,7 +7,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
 var TableCellNodeView = /*#__PURE__*/function () {
-  function TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer) {
+  function TableCellNodeView(node, view, getPos, observer) {
     _classCallCheck(this, TableCellNodeView);
     this.view = view;
     this.node = node;
@@ -17,11 +17,8 @@ var TableCellNodeView = /*#__PURE__*/function () {
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    var _getEditorFeatureFlag = getEditorFeatureFlags(),
-      mouseMoveOptimization = _getEditorFeatureFlag.mouseMoveOptimization;
-    if (mouseMoveOptimization && observer) {
+    if (observer) {
       this.contentDOM.id = uuid();
-      this.mouseMoveOptimization = mouseMoveOptimization;
       this.observer = observer;
       observer.observe(this.contentDOM);
     }
@@ -86,7 +83,7 @@ var TableCellNodeView = /*#__PURE__*/function () {
   }, {
     key: "destroy",
     value: function destroy() {
-      if (this.mouseMoveOptimization && this.observer) {
+      if (this.observer) {
         this.observer.unobserve(this.contentDOM);
       }
     }

package/dist/esm/plugins/table/nodeviews/update-overflow-shadows.js

@@ -7,41 +7,4 @@ export var updateShadowListForStickyStyles = function updateShadowListForStickyS
       }
     }
   });
-};
-
-/**
- * Update overflow shadows for a given wrapper & table.
- * if `overflowShadowOptimization` is enabled, this will exit early.
- */
-export var updateOverflowShadows = function updateOverflowShadows(getEditorFeatureFlags) {
-  return function (wrapper, table, rightShadows, leftShadows) {
-    var _getEditorFeatureFlag;
-    if (((_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableOverflowShadowsOptimization) === true) {
-      return false;
-    }
-    // Right shadow
-    if (table && wrapper) {
-      var stickyRow = wrapper.querySelector('tr.sticky');
-      var stickyCell = stickyRow && stickyRow.firstElementChild;
-      if (rightShadows) {
-        var diff = table.offsetWidth - wrapper.offsetWidth;
-        for (var i = 0; i < rightShadows.length; i++) {
-          var rightShadow = rightShadows[i];
-          rightShadow.style.display = diff > 0 && diff > wrapper.scrollLeft ? 'block' : 'none';
-          if (rightShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-            rightShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
-          }
-        }
-      }
-      if (leftShadows) {
-        for (var _i = 0; _i < leftShadows.length; _i++) {
-          var leftShadow = leftShadows[_i];
-          leftShadow.style.display = wrapper.scrollLeft > 0 ? 'block' : 'none';
-          if (leftShadow.classList.contains(ClassName.TABLE_STICKY_SHADOW) && stickyCell) {
-            leftShadow.style.height = "".concat(stickyCell.clientHeight + 1, "px");
-          }
-        }
-      }
-    }
-  };
 };

package/dist/esm/plugins/table/pm-plugins/main.js

@@ -50,10 +50,10 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   }) : undefined;
   var tableCellNodeview = {
     tableCell: function tableCell(node, view, getPos) {
-      return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
+      return new TableCellNodeView(node, view, getPos, observer);
     },
     tableHeader: function tableHeader(node, view, getPos) {
-      return new TableCellNodeView(node, view, getPos, getEditorFeatureFlags, observer);
+      return new TableCellNodeView(node, view, getPos, observer);
     }
   };
 
@@ -242,7 +242,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         mouseover: whenTableInFocus(handleMouseOver),
         mouseleave: whenTableInFocus(handleMouseLeave),
         mouseout: whenTableInFocus(handleMouseOut),
-        mousemove: whenTableInFocus(handleMouseMove(getEditorFeatureFlags), elementContentRects),
+        mousemove: whenTableInFocus(handleMouseMove, elementContentRects),
         click: whenTableInFocus(handleClick)
       },
       handleTripleClick: handleTripleClick

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -42,14 +42,13 @@ export var supportedHeaderRow = function supportedHeaderRow(node) {
   return allHeaders && !someMerged;
 };
 export var TableRowNodeView = /*#__PURE__*/function () {
-  function TableRowNodeView(node, view, getPos, eventDispatcher, getEditorFeatureFlags) {
+  function TableRowNodeView(node, view, getPos, eventDispatcher) {
     var _this = this;
     _classCallCheck(this, TableRowNodeView);
     // this is the sticky header table row
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
     _defineProperty(this, "topPosEditorElement", 0);
-    _defineProperty(this, "stickyHeadersOptimization", false);
     _defineProperty(this, "sentinels", {});
     /* external events */
     _defineProperty(this, "listening", false);
@@ -65,62 +64,9 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         _this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
-    _defineProperty(this, "onScroll", function () {
-      if (!_this.tree) {
-        return;
-      }
-      _this.latestDomTop = getTop(_this.tree.wrapper);
-
-      // kick off rAF loop again if it hasn't already happened
-      if (!_this.nextFrame) {
-        _this.loop();
-      }
-    });
-    _defineProperty(this, "loop", function () {
-      _this.nextFrame = window.requestAnimationFrame(function () {
-        if (_this.previousDomTop === _this.latestDomTop && _this.previousPadding === _this.padding) {
-          _this.nextFrame = undefined;
-          return;
-        }
-
-        // can't store these since React might re-render at any time
-        var tree = _this.tree;
-        if (!tree) {
-          _this.nextFrame = undefined;
-          return;
-        }
-        _this.paint(tree);
-
-        // run again on next frame
-        _this.previousPadding = _this.padding;
-        _this.previousDomTop = _this.latestDomTop;
-        _this.loop();
-      });
-    });
-    _defineProperty(this, "paint", function (tree) {
-      var table = tree.table,
-        wrapper = tree.wrapper;
-
-      // If the previous refresh is less than 10ms then don't do anything.
-      // The jumpiness happen under that time and this is to avoid it.
-      var timelapse = Math.abs(performance.now() - _this.lastTimePainted);
-      if (timelapse < 10) {
-        return;
-      }
-      if (_this.shouldHeaderStick(tree)) {
-        _this.makeHeaderRowSticky(tree);
-      } else {
-        _this.makeRowHeaderNotSticky(table);
-      }
-
-      // ensure scroll positions are locked
-      _this.dom.scrollLeft = wrapper.scrollLeft;
-      _this.lastTimePainted = performance.now();
-    });
     /* receive external events */
     _defineProperty(this, "onTablePluginState", function (state) {
       var tableRef = state.tableRef;
-      var focusChanged = false;
       var tree = _this.tree;
       if (!tree) {
         return;
@@ -140,9 +86,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       if (isCurrentTableSelected && !state.isHeaderRowEnabled && _this.tree) {
         _this.makeRowHeaderNotSticky(_this.tree.table);
       }
-      if (isCurrentTableSelected !== _this.focused) {
-        focusChanged = true;
-      }
       _this.focused = isCurrentTableSelected;
       var wrapper = tree.wrapper;
       var tableContainer = wrapper.parentElement;
@@ -164,10 +107,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
       // run after table style changes have been committed
       setTimeout(function () {
-        // if focus changed while header is sticky - still repaint the positions will shift
-        if (!_this.stickyHeadersOptimization || focusChanged && _this.isSticky) {
-          _this.paint(tree);
-        }
         syncStickyRowToTable(tree.table);
       }, 0);
     });
@@ -299,9 +238,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     this.eventDispatcher = eventDispatcher;
     this.dom = document.createElement('tr');
     this.contentDOM = this.dom;
-    var featureFlags = getEditorFeatureFlags();
-    var stickyHeadersOptimization = featureFlags.stickyHeadersOptimization;
-    this.stickyHeadersOptimization = !!stickyHeadersOptimization;
     this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
     this.isSticky = false;
@@ -320,11 +256,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     value: function subscribe() {
       this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
       if (this.editorScrollableElement) {
-        if (this.stickyHeadersOptimization) {
-          this.initObservers();
-        } else {
-          this.editorScrollableElement.addEventListener('scroll', this.onScroll);
-        }
+        this.initObservers();
         this.topPosEditorElement = getTop(this.editorScrollableElement);
       }
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
@@ -352,9 +284,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
-      if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
-        this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
-      }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.off(tablePluginKey.key, this.onTablePluginState);
       this.listening = false;

package/dist/esm/plugins/table/pm-plugins/sticky-headers/plugin.js

@@ -13,7 +13,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
     props: {
       nodeViews: {
         tableRow: function tableRow(node, view, getPos) {
-          return new TableRowNodeView(node, view, getPos, eventDispatcher, getEditorFeatureFlags);
+          return new TableRowNodeView(node, view, getPos, eventDispatcher);
         }
       }
     }

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

@@ -133,7 +133,7 @@ export var handleMouseDown = function handleMouseDown(view, event, localResizeHa
     var map = TableMap.get(table);
     var colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
     resizeColumn(resizeState, colIndex, clientX - dragging.startX, dom);
-    updateControls(getEditorFeatureFlags)(state);
+    updateControls()(state);
     updateResizeHandles(dom);
   }
   window.addEventListener('mouseup', finish);

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

@@ -1,11 +1,10 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
-import { updateOverflowShadows } from '../../../nodeviews/update-overflow-shadows';
 import { TableCssClassName as ClassName } from '../../../types';
 import { colWidthsForRow } from '../../../utils/column-controls';
 import { getRowHeights } from '../../../utils/row-controls';
 import { getPluginState as getMainPluginState } from '../../plugin-factory';
-export var updateControls = function updateControls(getEditorFeatureFlags) {
+export var updateControls = function updateControls() {
   return function (state) {
     var _getMainPluginState = getMainPluginState(state),
       tableRef = _getMainPluginState.tableRef;
@@ -35,9 +34,6 @@ export var updateControls = function updateControls(getEditorFeatureFlags) {
         }
       }
     }
-    var rightShadows = wrapper.parentElement.querySelectorAll(".".concat(ClassName.TABLE_RIGHT_SHADOW));
-    var leftShadows = wrapper.parentElement.querySelectorAll(".".concat(ClassName.TABLE_LEFT_SHADOW));
-    updateOverflowShadows(getEditorFeatureFlags)(wrapper, tableRef, rightShadows, leftShadows);
   };
 };
 export var isClickNear = function isClickNear(event, click) {

package/dist/esm/plugins/table/ui/TableFloatingControls/index.js

@@ -64,9 +64,7 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
       var _window,
         _this2 = this;
       var tableRef = this.props.tableRef;
-      var _this$props$getEditor = this.props.getEditorFeatureFlags(),
-        tableRenderOptimization = _this$props$getEditor.tableRenderOptimization;
-      if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+      if (tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
         this.resizeObserver = new ResizeObserver(function (entries) {
           var _iterator = _createForOfIteratorHelper(entries),
             _step;
@@ -104,10 +102,8 @@ var TableFloatingControls = /*#__PURE__*/function (_Component) {
         ordering = _this$props.ordering,
         headerRowHeight = _this$props.headerRowHeight,
         stickyHeader = _this$props.stickyHeader;
-      var _this$props$getEditor2 = this.props.getEditorFeatureFlags(),
-        tableRenderOptimization = _this$props$getEditor2.tableRenderOptimization;
-      var tableHeight = tableRenderOptimization ? (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight : this.props.tableHeight;
-      var nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight : nextProps.tableHeight;
+      var tableHeight = (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight;
+      var nextTableHeight = nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight;
       return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
     }
   }, {