@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/cjs/plugins/table/handlers.js

@@ -108,9 +108,8 @@ var updateCollapseHandler = function updateCollapseHandler(_ref3) {
     }
 
     var expandNodeType = schema.nodes.expand;
-    var isTableCollapsed = expandNodeType && !!(0, _prosemirrorUtils.findParentNodeOfType)(expandNodeType)(tr.selection); // check result of wrapping without applying it
-
-    var trCanBeCollapsed = (0, _collapse.collapseSelectedTable)(tr); // We're focused on a table + we're not inside an expand
+    var isTableCollapsed = expandNodeType && !!(0, _prosemirrorUtils.findParentNodeOfType)(expandNodeType)(tr.selection);
+    var trCanBeCollapsed = (0, _collapse.isTableCollapsible)(tr).tableIsCollapsible; // We're focused on a table + we're not inside an expand
 
     var canCollapseTable = !!pluginState.tableNode && // is it already collapsed?
     !isTableCollapsed && !!trCanBeCollapsed;

package/dist/cjs/plugins/table/index.js

@@ -259,7 +259,8 @@ var tablesPlugin = function tablesPlugin(options) {
             targetRef: tableWrapperTarget,
             layout: layout,
             isResizing: !!resizingPluginState && !!resizingPluginState.dragging,
-            tableWidth: tableRenderOptimization ? tableWidth : undefined
+            tableWidth: tableRenderOptimization ? tableWidth : undefined,
+            stickyHeader: stickyHeader
           }));
         }
       }));

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

@@ -29,11 +29,13 @@ var _utils = require("@atlaskit/editor-tables/utils");
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _utils2 = require("@atlaskit/editor-common/utils");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _utils2 = require("../../../utils");
+var _utils3 = require("../../../utils");
 
 var _nodeWidth = require("../../../utils/node-width");
 
@@ -47,7 +49,7 @@ var _stickyHeaders = require("../pm-plugins/sticky-headers");
 
 var _tableResizing = require("../pm-plugins/table-resizing");
 
-var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _utils4 = require("../pm-plugins/table-resizing/utils");
 
 var _dom2 = require("../pm-plugins/table-resizing/utils/dom");
 
@@ -55,7 +57,7 @@ var _types = require("../types");
 
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 
-var _utils4 = require("../utils");
+var _utils5 = require("../utils");
 
 var _updateOverflowShadows = require("./update-overflow-shadows");
 
@@ -73,30 +75,12 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var isIE11 = _editorCommon.browser.ie_version === 11;
+var isIE11 = _utils2.browser.ie_version === 11;
 
 var NOOP = function NOOP() {
   return undefined;
 };
 
-// in Chrome, if none of the parent elements
-// have content, then it will auto-scroll the container
-// which interferes with us applying padding to the
-// sticky header to make up for us taking it out of
-// the layout flow.
-//
-// this is only an issue when scrolling down the
-// page without row controls active, and doesn't
-// occur in other browsers afaik
-var FloatingPlaceholder = function FloatingPlaceholder() {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: 'absolute',
-      top: '30px'
-    }
-  }, ' ');
-};
-
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
 
@@ -133,7 +117,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
 
       var pos = _this.props.getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, _this.props.view.state)) {
+      if (!(0, _utils3.isValidPosition)(pos, _this.props.view.state)) {
         return;
       }
 
@@ -206,7 +190,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var layoutSize = _this.tableNodeLayoutSize(node, containerWidth.width, options);
 
       var hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
-      var noOfColumnsChanged = (0, _utils4.tablesHaveDifferentNoOfColumns)(node, prevNode);
+      var noOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(node, prevNode);
 
       if ( // Breakout mode/layout changed
       layoutChanged || // We need to react if our parent changes
@@ -244,16 +228,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           dispatch = view.dispatch;
       var pos = getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, state)) {
+      if (!(0, _utils3.isValidPosition)(pos, state)) {
         return;
       }
 
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
 
-      if (_this.frameId && window) {
-        window.cancelAnimationFrame(_this.frameId);
-      }
+      _this.scaleTableDebounced.cancel();
 
       (0, _tableResizing.scaleTable)(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
@@ -274,7 +256,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         var node = getNode();
         var pos = getPos();
 
-        if (!(0, _utils2.isValidPosition)(pos, view.state)) {
+        if (!(0, _utils3.isValidPosition)(pos, view.state)) {
           return;
         }
 
@@ -297,7 +279,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
 
       var parentWidth = _this.getParentNodeWidth();
 
-      _this.frameId = _this.scaleTableDebounced(parentWidth);
+      _this.scaleTableDebounced(parentWidth);
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "updateTableContainerWidth", function () {
       var _this$props5 = _this.props,
@@ -310,7 +292,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         return;
       }
 
-      var tableContainerWidth = (0, _editorCommon.calcTableWidth)(node.attrs.layout, containerWidth.width);
+      var tableContainerWidth = (0, _styles.calcTableWidth)(node.attrs.layout, containerWidth.width);
 
       if (_this.state.tableContainerWidth === tableContainerWidth) {
         return null;
@@ -336,7 +318,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           state = _this$props6.view.state;
       var pos = getPos();
 
-      if (!(0, _utils2.isValidPosition)(pos, state)) {
+      if (!(0, _utils3.isValidPosition)(pos, state)) {
         return;
       }
 
@@ -348,7 +330,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "tableNodeLayoutSize", function (node, containerWidth, options) {
-      return (0, _utils3.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
+      return (0, _utils4.getLayoutSize)(node.attrs.layout, containerWidth || _this.props.containerWidth.width, options || _this.props.options || {});
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "scaleTableDebounced", (0, _rafSchd.default)(_this.scaleTable));
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleTableResizingDebounced", (0, _rafSchd.default)(_this.handleTableResizing));
@@ -411,7 +393,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          */
         window.addEventListener('resize', this.handleWindowResizeDebounced);
         this.updateTableContainerWidth();
-        this.frameId = this.handleTableResizingDebounced(this.props);
+        this.handleTableResizingDebounced();
       }
 
       var currentStickyState = _stickyHeaders.pluginKey.getState(this.props.view.state);
@@ -430,15 +412,15 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }
 
       this.handleScrollDebounced.cancel();
+      this.scaleTableDebounced.cancel();
+      this.handleTableResizingDebounced.cancel();
+      this.handleAutoSizeDebounced.cancel();
+      this.handleWindowResizeDebounced.cancel();
 
       if (this.props.allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
 
-      if (this.frameId && window) {
-        window.cancelAnimationFrame(this.frameId);
-      }
-
       if (this.overflowShadowsObserver) {
         this.overflowShadowsObserver.dispose();
       }
@@ -467,7 +449,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (this.overflowShadowsObserver) {
           var _this$state$stickyHea;
 
-          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils4.containsHeaderRow)(view.state, getNode()));
+          this.overflowShadowsObserver.observeCells((_this$state$stickyHea = this.state.stickyHeader) === null || _this$state$stickyHea === void 0 ? void 0 : _this$state$stickyHea.sticky, (0, _utils5.containsHeaderRow)(view.state, getNode()));
         }
       }
 
@@ -481,13 +463,13 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // re-draw colgroup.
         var previousTable = this.node;
 
-        if ((0, _utils4.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils4.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
+        if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable)) {
           var _view2 = this.props.view;
-          (0, _utils3.insertColgroupFromNode)(this.table, currentTable);
+          (0, _utils4.insertColgroupFromNode)(this.table, currentTable);
           (0, _dom2.updateControls)(_view2.state);
         }
 
-        this.frameId = this.handleTableResizingDebounced(prevProps);
+        this.handleTableResizingDebounced();
       }
     }
   }, {
@@ -542,7 +524,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       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 = (0, _utils4.containsHeaderRow)(view.state, node);
+      var hasHeaderRow = (0, _utils5.containsHeaderRow)(view.state, node);
 
       var rowControls = /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
@@ -565,7 +547,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader
       }));
 
-      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _editorCommon.tableMarginSides;
+      var shadowPadding = allowControls && (!isLoading || initialRenderOptimization) && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = tableOverflowShadowsOptimization ? (0, _memoizeOne.default)(function (visible) {
         return {
           visibility: visible ? 'visible' : 'hidden'
@@ -581,7 +563,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP
-      }), /*#__PURE__*/_react.default.createElement(FloatingPlaceholder, null), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
+      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -45,6 +45,8 @@ var _tableResizing = require("../pm-plugins/table-resizing");
 
 var _utils = require("../pm-plugins/table-resizing/utils");
 
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 
 var _commands = require("../commands");
@@ -215,6 +217,14 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           return true;
         }
 
+        var tableMap = _tableMap.TableMap.get(node);
+
+        var nextTableMap = _tableMap.TableMap.get(nextNode);
+
+        if (tableMap.width !== nextTableMap.width) {
+          return true;
+        }
+
         return attrKeys.some(function (key) {
           return node.attrs[key] !== nextNode.attrs[key];
         });

package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.pluginKey = exports.handleDocOrSelectionChanged = exports.getDecorations = exports.createPlugin = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -47,7 +49,7 @@ var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decor
 exports.handleDocOrSelectionChanged = handleDocOrSelectionChanged;
 
 var createPlugin = function createPlugin() {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
         return _prosemirrorView.DecorationSet.empty;

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

@@ -9,13 +9,13 @@ exports.createPlugin = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils2 = require("@atlaskit/editor-common/utils");
 
 var _dom = require("../../../utils/dom");
 
@@ -31,7 +31,7 @@ var _transforms = require("../transforms");
 
 var _types = require("../types");
 
-var _utils2 = require("../utils");
+var _utils3 = require("../utils");
 
 var _analytics = require("../../analytics");
 
@@ -85,7 +85,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
   } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   var invalidTableIds = [];
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: state,
     key: _pluginFactory.pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {
@@ -152,7 +152,7 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
           }
 
           if (pluginState.tableNode !== tableNode) {
-            (0, _utils2.updateResizeHandles)(tableRef);
+            (0, _utils3.updateResizeHandles)(tableRef);
           }
 
           if (pluginState.editorHasFocus && pluginState.tableRef) {
@@ -183,14 +183,14 @@ var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, porta
 
         var decorationSet = _plugin.pluginKey.getState(state);
 
-        if ((0, _utils2.findControlsHoverDecoration)(decorationSet).length) {
+        if ((0, _utils3.findControlsHoverDecoration)(decorationSet).length) {
           (0, _commands.clearHoverSelection)()(state, dispatch);
         } // ED-6069: workaround for Chrome given a regression introduced in prosemirror-view@1.6.8
         // Returning true prevents that updateSelection() is getting called in the commit below:
         // @see https://github.com/ProseMirror/prosemirror-view/commit/33fe4a8b01584f6b4103c279033dcd33e8047b95
 
 
-        if (_editorCommon.browser.chrome && event.target) {
+        if (_utils2.browser.chrome && event.target) {
           var targetClassList = event.target.classList;
 
           if (targetClassList.contains(_types.TableCssClassName.CONTROLS_BUTTON) || targetClassList.contains(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON)) {

package/dist/cjs/plugins/table/pm-plugins/safari-delayed-dom-selection-syncing-workaround.js

@@ -7,6 +7,8 @@ exports.tableSafariDelayedDomSelectionSyncingWorkaroundKey = exports.createPlugi
 
 var _prosemirrorState = require("prosemirror-state");
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var tableSafariDelayedDomSelectionSyncingWorkaroundKey = new _prosemirrorState.PluginKey('tableSafariDelayedDomSelectionSyncingWorkaround');
 exports.tableSafariDelayedDomSelectionSyncingWorkaroundKey = tableSafariDelayedDomSelectionSyncingWorkaroundKey;
 
@@ -21,7 +23,7 @@ var createPlugin = function createPlugin() {
   // Because we are manually wiping the view.mouseDown,
   // we manage this custom cleanup ourselves
   var prevMouseDownDone = null;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: tableSafariDelayedDomSelectionSyncingWorkaroundKey,
     props: {
       handleDOMEvents: {

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

@@ -13,7 +13,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _width = require("../../../../../plugins/width");
 
@@ -54,8 +54,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
     (0, _classCallCheck2.default)(this, TableRowNodeView);
     (0, _defineProperty2.default)(this, "colControlsOffset", 0);
     (0, _defineProperty2.default)(this, "focused", false);
-    (0, _defineProperty2.default)(this, "scrollElementTop", 0);
-    (0, _defineProperty2.default)(this, "isSticky", false);
+    (0, _defineProperty2.default)(this, "topPosEditorElement", 0);
     (0, _defineProperty2.default)(this, "stickyHeadersOptimization", false);
     (0, _defineProperty2.default)(this, "sentinels", {});
     (0, _defineProperty2.default)(this, "listening", false);
@@ -96,7 +95,14 @@ var TableRowNodeView = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "paint", function (tree) {
       var table = tree.table,
-          wrapper = tree.wrapper;
+          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);
@@ -106,6 +112,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
 
 
       _this.dom.scrollLeft = wrapper.scrollLeft;
+      _this.lastTimePainted = performance.now();
     });
     (0, _defineProperty2.default)(this, "onTablePluginState", function (state) {
       var tableRef = state.tableRef;
@@ -114,6 +121,15 @@ var TableRowNodeView = /*#__PURE__*/function () {
 
       if (!tree) {
         return;
+      } // make it non-sticky initially to avoid making it look separated
+
+
+      if (!_this.isTableInit) {
+        if (_this.tree) {
+          _this.makeRowHeaderNotSticky(_this.tree.table);
+
+          _this.isTableInit = true;
+        }
       } // when header rows are toggled off - mark sentinels as unobserved
 
 
@@ -175,24 +191,41 @@ var TableRowNodeView = /*#__PURE__*/function () {
     });
     (0, _defineProperty2.default)(this, "shouldHeaderStick", function (tree) {
       var wrapper = tree.wrapper;
-      var scrollTop = _this.scrollElementTop;
+      var tableWrapperRect = wrapper.getBoundingClientRect();
 
-      var refTop = _this.getWrapperRefTop(wrapper);
+      var editorAreaRect = _this.editorScrollableElement.getBoundingClientRect();
 
-      var wrapperRect = wrapper.getBoundingClientRect(); // we don't have parent information in via the node,
-      // so we need to look this up on scroll
+      var stickyHeaderRect = _this.contentDOM.getBoundingClientRect();
 
       var firstHeaderRow = !_this.dom.previousElementSibling;
       var subsequentRows = !!_this.dom.nextElementSibling;
-      var bottomVisible = scrollTop - wrapperRect.bottom < _this.dom.clientHeight;
-      return refTop <= scrollTop && bottomVisible && firstHeaderRow && subsequentRows;
+      var isHeaderValid = firstHeaderRow && subsequentRows; // if the table wrapper is less than the editor top pos then make it sticky
+      // Make header sticky if table wrapper top is outside viewport
+      //  but bottom is still in the viewport.
+
+      if (tableWrapperRect.top < editorAreaRect.top && tableWrapperRect.bottom > editorAreaRect.top && isHeaderValid) {
+        return true;
+      } // if the sticky header is below the editor area make it non-sticky
+
+
+      if (stickyHeaderRect.top > editorAreaRect.top) {
+        return false;
+      } // otherwise make it non-sticky
+
+
+      return false;
     });
     (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree) {
+      // If header row height is more than 50% of viewport height don't do this
+      if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
+        return;
+      }
+
       var table = tree.table;
 
       var currentTableTop = _this.getCurrentTableTop(tree);
 
-      var domTop = currentTableTop > 0 ? _this.scrollElementTop : _this.scrollElementTop + currentTableTop;
+      var domTop = currentTableTop > 0 ? _this.topPosEditorElement : _this.topPosEditorElement + currentTableTop;
 
       if (!_this.isSticky) {
         (0, _dom.syncStickyRowToTable)(table);
@@ -208,22 +241,10 @@ var TableRowNodeView = /*#__PURE__*/function () {
 
       _this.emitOn(domTop, _this.colControlsOffset);
     });
-    (0, _defineProperty2.default)(this, "getWrapperoffset", function () {
-      var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-      var focusValue = inverse ? !_this.focused : _this.focused;
-      return focusValue ? 0 : _consts.tableControlsSpacing;
-    });
-    (0, _defineProperty2.default)(this, "getWrapperRefTop", function (wrapper) {
-      return Math.round((0, _dom2.getTop)(wrapper)) + _this.getWrapperoffset();
-    });
-    (0, _defineProperty2.default)(this, "getScrolledTableTop", function (wrapper) {
-      return _this.getWrapperRefTop(wrapper) - _this.scrollElementTop;
-    });
-    (0, _defineProperty2.default)(this, "getCurrentTableTop", function (tree) {
-      return _this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
-    });
     (0, _defineProperty2.default)(this, "makeRowHeaderNotSticky", function (table) {
-      if (!_this.isSticky) {
+      var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!_this.isSticky || !table || !_this.dom) {
         return;
       }
 
@@ -236,7 +257,21 @@ var TableRowNodeView = /*#__PURE__*/function () {
       _this.dom.style.top = '';
       table.style.removeProperty('margin-top');
 
-      _this.emitOff();
+      _this.emitOff(isEditorDestroyed);
+    });
+    (0, _defineProperty2.default)(this, "getWrapperoffset", function () {
+      var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var focusValue = inverse ? !_this.focused : _this.focused;
+      return focusValue ? 0 : _consts.tableControlsSpacing;
+    });
+    (0, _defineProperty2.default)(this, "getWrapperRefTop", function (wrapper) {
+      return Math.round((0, _dom2.getTop)(wrapper)) + _this.getWrapperoffset();
+    });
+    (0, _defineProperty2.default)(this, "getScrolledTableTop", function (wrapper) {
+      return _this.getWrapperRefTop(wrapper) - _this.topPosEditorElement;
+    });
+    (0, _defineProperty2.default)(this, "getCurrentTableTop", function (tree) {
+      return _this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
     });
     (0, _defineProperty2.default)(this, "padding", 0);
     (0, _defineProperty2.default)(this, "top", 0);
@@ -254,19 +289,22 @@ var TableRowNodeView = /*#__PURE__*/function () {
         padding: padding
       })(_this.view.state, _this.view.dispatch, _this.view);
     });
-    (0, _defineProperty2.default)(this, "emitOff", function () {
+    (0, _defineProperty2.default)(this, "emitOff", function (isEditorDestroyed) {
       if (_this.top === 0 && _this.padding === 0) {
         return;
       }
 
       _this.top = 0;
       _this.padding = 0;
-      (0, _commands.updateStickyState)({
-        pos: _this.getPos(),
-        sticky: false,
-        top: _this.top,
-        padding: _this.padding
-      })(_this.view.state, _this.view.dispatch, _this.view);
+
+      if (!isEditorDestroyed) {
+        (0, _commands.updateStickyState)({
+          pos: _this.getPos(),
+          sticky: false,
+          top: _this.top,
+          padding: _this.padding
+        })(_this.view.state, _this.view.dispatch, _this.view);
+      }
     });
     this.view = view;
     this.node = node;
@@ -277,7 +315,10 @@ var TableRowNodeView = /*#__PURE__*/function () {
     var featureFlags = (0, _featureFlagsContext.getFeatureFlags)(view.state) || {};
     var stickyHeadersOptimization = featureFlags.stickyHeadersOptimization;
     this.stickyHeadersOptimization = !!stickyHeadersOptimization;
+    this.lastTimePainted = 0;
     this.isHeaderRow = supportedHeaderRow(node);
+    this.isSticky = false;
+    this.isTableInit = false;
 
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-header-row', 'true');
@@ -289,22 +330,23 @@ var TableRowNodeView = /*#__PURE__*/function () {
 
   (0, _createClass2.default)(TableRowNodeView, [{
     key: "tree",
-    get: function get() {
+    get: // this is the sticky header table row
+    function get() {
       return (0, _dom2.getTree)(this.dom);
     }
   }, {
     key: "subscribe",
     value: function subscribe() {
-      this.scrollElement = (0, _editorCommon.findOverflowScrollParent)(this.view.dom) || window;
+      this.editorScrollableElement = (0, _ui.findOverflowScrollParent)(this.view.dom) || window;
 
-      if (this.scrollElement) {
+      if (this.editorScrollableElement) {
         if (this.stickyHeadersOptimization) {
           this.initObservers();
         } else {
-          this.scrollElement.addEventListener('scroll', this.onScroll);
+          this.editorScrollableElement.addEventListener('scroll', this.onScroll);
         }
 
-        this.scrollElementTop = (0, _dom2.getTop)(this.scrollElement);
+        this.topPosEditorElement = (0, _dom2.getTop)(this.editorScrollableElement);
       }
 
       this.eventDispatcher.on(_width.pluginKey.key, this.onWidthPluginState);
@@ -326,8 +368,8 @@ var TableRowNodeView = /*#__PURE__*/function () {
         this.resizeObserver.disconnect();
       }
 
-      if (this.scrollElement && !this.stickyHeadersOptimization) {
-        this.scrollElement.removeEventListener('scroll', this.onScroll);
+      if (this.editorScrollableElement && !this.stickyHeadersOptimization) {
+        this.editorScrollableElement.removeEventListener('scroll', this.onScroll);
       }
 
       this.eventDispatcher.off(_width.pluginKey.key, this.onWidthPluginState);
@@ -444,7 +486,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
           }
         });
       }, {
-        root: this.scrollElement
+        root: this.editorScrollableElement
       });
     }
     /* paint/update loop */
@@ -486,10 +528,10 @@ var TableRowNodeView = /*#__PURE__*/function () {
       this.unsubscribe();
 
       if (this.tree) {
-        this.makeRowHeaderNotSticky(this.tree.table);
+        this.makeRowHeaderNotSticky(this.tree.table, true);
       }
 
-      this.emitOff();
+      this.emitOff(true);
     }
   }, {
     key: "ignoreMutation",

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _tableRow = require("./nodeviews/tableRow");
 
@@ -17,7 +17,7 @@ var createPlugin = function createPlugin(dispatch, eventDispatcher) {
   var initialState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
     return [];
   };
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: (0, _pluginState.createPluginState)(dispatch, initialState),
     key: _pluginKey.pluginKey,
     props: {