@atlaskit/editor-core 153.1.4 → 156.0.0

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import styled from 'styled-components';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { Popup } from '@atlaskit/editor-common';
+import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { StatusPicker as AkStatusPicker } from '@atlaskit/status/picker';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
@@ -227,8 +227,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
           target = _this$props.target;
       var _this$state3 = this.state,
           color = _this$state3.color,
-          text = _this$state3.text,
-          localId = _this$state3.localId;
+          text = _this$state3.text;
       return target && /*#__PURE__*/React.createElement(PopupWithListeners, {
         target: target,
         offset: [0, 8],
@@ -245,8 +244,7 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
         onColorClick: this.onColorClick,
         onColorHover: this.onColorHover,
         onTextChanged: this.onTextChanged,
-        onEnter: this.onEnter,
-        localId: localId
+        onEnter: this.onEnter
       })));
     }
   }]);

package/dist/esm/plugins/table/commands/collapse.js

@@ -1,13 +1,13 @@
 import { collapseSelectedTable } from '../utils/collapse';
 export var wrapTableInExpand = function wrapTableInExpand(state, dispatch) {
-  var canCollapseTr = collapseSelectedTable(state.tr);
+  var collapseTr = collapseSelectedTable(state.tr);
 
-  if (!canCollapseTr) {
+  if (!collapseTr) {
     return false;
   }
 
   if (dispatch) {
-    dispatch(canCollapseTr);
+    dispatch(collapseTr);
   }
 
   return true;

package/dist/esm/plugins/table/commands/misc.js

@@ -259,8 +259,19 @@ export var moveCursorBackward = function moveCursorBackward(state, dispatch) {
   // it doesn't join node before (last cell) with node after (content after the cursor)
   // due to ridiculous amount of PM code that would have been required to overwrite
 
+  tr.setSelection(new TextSelection(state.doc.resolve(pos))); // if we are inside an empty paragraph not at the end of the doc we delete it
+
+  var cursorNode = $cursor.node();
+  var docEnd = state.doc.content.size;
+  var paragraphWrapStart = $cursor.pos - 1;
+  var paragraphWrapEnd = $cursor.pos + 1;
+
+  if (cursorNode.content.size === 0 && $cursor.pos + 1 !== docEnd) {
+    tr.delete(paragraphWrapStart, paragraphWrapEnd);
+  }
+
   if (dispatch) {
-    dispatch(tr.setSelection(new TextSelection(state.doc.resolve(pos))));
+    dispatch(tr);
   }
 
   return true;

package/dist/esm/plugins/table/commands/sort.js

@@ -2,7 +2,7 @@ import { Selection } from 'prosemirror-state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos } from '@atlaskit/editor-tables/utils';
 import { convertArrayOfRowsToTableNode, convertTableNodeToArrayOfRows, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import { createCompareNodes } from '@atlaskit/editor-common';
+import { createCompareNodes } from '@atlaskit/editor-common/utils';
 import { pluginKey } from '../../card/pm-plugins/main';
 import { createCommand, getPluginState } from '../pm-plugins/plugin-factory';
 import { TableSortStep, TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';

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

@@ -3,8 +3,7 @@ import { Selection, TextSelection } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
-import rafSchedule from 'raf-schd';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '../../utils';
 import { closestElement } from '../../utils/dom';
 import { ACTION_SUBJECT, addAnalytics, EVENT_TYPE, TABLE_ACTION } from '../analytics';
@@ -76,7 +75,6 @@ export var handleClick = function handleClick(view, event) {
   var rowElement = closestElement(element, 'tr');
   var rowIndex = rowElement && rowElement.rowIndex;
   var cellIndex = map.width * rowIndex + colIndex;
-  var posInTable = map.map[cellIndex + 1];
   var dispatch = view.dispatch,
       _view$state = view.state,
       tr = _view$state.tr,
@@ -85,6 +83,7 @@ export var handleClick = function handleClick(view, event) {
   /** Only if the last item is media group, insert a paragraph */
 
   if (isLastItemMediaGroup(editorElement)) {
+    var posInTable = map.map[cellIndex] + editorElement.nodeSize;
     tr.insert(posInTable + table.pos, paragraph.create());
     dispatch(tr);
     setNodeSelection(view, posInTable + table.pos);
@@ -374,9 +373,8 @@ export var whenTableInFocus = function whenTableInFocus(eventHandler, elementCon
 
     if (!hasTableNode || isDragging) {
       return false;
-    } // debounce event handler
-
+    }
 
-    return rafSchedule(eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects));
+    return eventHandler(view, mouseEvent, tableCellOptimization, elementContentRects);
   };
 };

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

@@ -8,7 +8,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { isTextInput } from '../../utils/is-text-input';
-import { collapseSelectedTable } from './utils/collapse';
+import { isTableCollapsible } from './utils/collapse';
 import { defaultTableSelection } from './pm-plugins/default-table-selection';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableSortStep } from '@atlaskit/adf-schema/steps';
@@ -94,9 +94,8 @@ var updateCollapseHandler = function updateCollapseHandler(_ref3) {
     }
 
     var expandNodeType = schema.nodes.expand;
-    var isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection); // check result of wrapping without applying it
-
-    var trCanBeCollapsed = collapseSelectedTable(tr); // We're focused on a table + we're not inside an expand
+    var isTableCollapsed = expandNodeType && !!findParentNodeOfType(expandNodeType)(tr.selection);
+    var trCanBeCollapsed = 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/esm/plugins/table/index.js

@@ -222,7 +222,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/esm/plugins/table/nodeviews/TableComponent.js

@@ -18,7 +18,8 @@ import React from 'react';
 import classnames from 'classnames';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import rafSchedule from 'raf-schd';
-import { browser, calcTableWidth, tableMarginSides } from '@atlaskit/editor-common';
+import { calcTableWidth, tableMarginSides } from '@atlaskit/editor-common/styles';
+import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorMobileBreakoutPoint, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { isValidPosition } from '../../../utils';
 import { getParentNodeWidth } from '../../../utils/node-width';
@@ -42,24 +43,6 @@ 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.createElement("div", {
-    style: {
-      position: 'absolute',
-      top: '30px'
-    }
-  }, ' ');
-};
-
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   _inherits(TableComponent, _React$Component);
 
@@ -223,9 +206,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var domAtPos = view.domAtPos.bind(view);
       var width = containerWidth.width;
 
-      if (_this.frameId && window) {
-        window.cancelAnimationFrame(_this.frameId);
-      }
+      _this.scaleTableDebounced.cancel();
 
       scaleTable(_this.table, _objectSpread(_objectSpread({}, scaleOptions), {}, {
         node: node,
@@ -271,7 +252,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
 
       var parentWidth = _this.getParentNodeWidth();
 
-      _this.frameId = _this.scaleTableDebounced(parentWidth);
+      _this.scaleTableDebounced(parentWidth);
     });
 
     _defineProperty(_assertThisInitialized(_this), "updateTableContainerWidth", function () {
@@ -395,7 +376,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          */
         window.addEventListener('resize', this.handleWindowResizeDebounced);
         this.updateTableContainerWidth();
-        this.frameId = this.handleTableResizingDebounced(this.props);
+        this.handleTableResizingDebounced();
       }
 
       var currentStickyState = stickyHeadersPluginKey.getState(this.props.view.state);
@@ -414,15 +395,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();
       }
@@ -471,7 +452,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           updateControls(_view2.state);
         }
 
-        this.frameId = this.handleTableResizingDebounced(prevProps);
+        this.handleTableResizingDebounced();
       }
     }
   }, {
@@ -563,7 +544,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP
-      }), /*#__PURE__*/React.createElement(FloatingPlaceholder, null), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
+      }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {

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

@@ -28,6 +28,7 @@ import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState, pluginKey } from '../pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing';
 import { generateColgroup } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import TableComponent from './TableComponent';
 import { setTableSize } from '../commands';
 import { getFeatureFlags } from '../../feature-flags-context';
@@ -189,6 +190,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           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];
         });

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

@@ -1,4 +1,5 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { DecorationSet } from 'prosemirror-view';
 import { pluginKey as tablePluginKey } from '../plugin-factory';
@@ -27,7 +28,7 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   return decorationSet;
 };
 export var createPlugin = function createPlugin() {
-  return new Plugin({
+  return new SafePlugin({
     state: {
       init: function init() {
         return DecorationSet.empty;

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

@@ -4,10 +4,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { findParentDomRefOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { browser } from '@atlaskit/editor-common';
+import { browser } from '@atlaskit/editor-common/utils';
 import { closestElement } from '../../../utils/dom';
 import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseLeave, handleMouseMove, handleMouseOut, handleMouseOver, handleTripleClick, whenTableInFocus } from '../event-handlers';
@@ -59,7 +59,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
   } : {}; // Used to prevent invalid table cell spans being reported more than once per editor/document
 
   var invalidTableIds = [];
-  return new Plugin({
+  return new SafePlugin({
     state: state,
     key: pluginKey,
     appendTransaction: function appendTransaction(transactions, oldState, newState) {

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

@@ -1,4 +1,5 @@
-import { PluginKey, Plugin } from 'prosemirror-state';
+import { PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 export var tableSafariDelayedDomSelectionSyncingWorkaroundKey = new PluginKey('tableSafariDelayedDomSelectionSyncingWorkaround');
 export var createPlugin = function createPlugin() {
   // From a review of the prosemirror-view source code,
@@ -11,7 +12,7 @@ export var createPlugin = function createPlugin() {
   // Because we are manually wiping the view.mouseDown,
   // we manage this custom cleanup ourselves
   var prevMouseDownDone = null;
-  return new Plugin({
+  return new SafePlugin({
     key: tableSafariDelayedDomSelectionSyncingWorkaroundKey,
     props: {
       handleDOMEvents: {

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

@@ -1,7 +1,7 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { findOverflowScrollParent } from '@atlaskit/editor-common';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { pluginKey as widthPluginKey } from '../../../../../plugins/width';
 import { mapChildren } from '../../../../../utils/slice';
 import { TableCssClassName as ClassName, TableCssClassName } from '../../../types';
@@ -32,9 +32,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(this, "focused", false);
 
-    _defineProperty(this, "scrollElementTop", 0);
-
-    _defineProperty(this, "isSticky", false);
+    _defineProperty(this, "topPosEditorElement", 0);
 
     _defineProperty(this, "stickyHeadersOptimization", false);
 
@@ -81,7 +79,14 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(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);
@@ -91,6 +96,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
 
       _this.dom.scrollLeft = wrapper.scrollLeft;
+      _this.lastTimePainted = performance.now();
     });
 
     _defineProperty(this, "onTablePluginState", function (state) {
@@ -100,6 +106,15 @@ export 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
 
 
@@ -163,25 +178,42 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
     _defineProperty(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;
     });
 
     _defineProperty(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) {
         syncStickyRowToTable(table);
@@ -198,6 +230,25 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       _this.emitOn(domTop, _this.colControlsOffset);
     });
 
+    _defineProperty(this, "makeRowHeaderNotSticky", function (table) {
+      var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+      if (!_this.isSticky || !table || !_this.dom) {
+        return;
+      }
+
+      _this.dom.style.removeProperty('width');
+
+      _this.dom.classList.remove('sticky');
+
+      table.classList.remove(ClassName.TABLE_STICKY);
+      _this.isSticky = false;
+      _this.dom.style.top = '';
+      table.style.removeProperty('margin-top');
+
+      _this.emitOff(isEditorDestroyed);
+    });
+
     _defineProperty(this, "getWrapperoffset", function () {
       var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var focusValue = inverse ? !_this.focused : _this.focused;
@@ -209,30 +260,13 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     });
 
     _defineProperty(this, "getScrolledTableTop", function (wrapper) {
-      return _this.getWrapperRefTop(wrapper) - _this.scrollElementTop;
+      return _this.getWrapperRefTop(wrapper) - _this.topPosEditorElement;
     });
 
     _defineProperty(this, "getCurrentTableTop", function (tree) {
       return _this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
     });
 
-    _defineProperty(this, "makeRowHeaderNotSticky", function (table) {
-      if (!_this.isSticky) {
-        return;
-      }
-
-      _this.dom.style.removeProperty('width');
-
-      _this.dom.classList.remove('sticky');
-
-      table.classList.remove(ClassName.TABLE_STICKY);
-      _this.isSticky = false;
-      _this.dom.style.top = '';
-      table.style.removeProperty('margin-top');
-
-      _this.emitOff();
-    });
-
     _defineProperty(this, "padding", 0);
 
     _defineProperty(this, "top", 0);
@@ -252,19 +286,22 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       })(_this.view.state, _this.view.dispatch, _this.view);
     });
 
-    _defineProperty(this, "emitOff", function () {
+    _defineProperty(this, "emitOff", function (isEditorDestroyed) {
       if (_this.top === 0 && _this.padding === 0) {
         return;
       }
 
       _this.top = 0;
       _this.padding = 0;
-      updateStickyState({
-        pos: _this.getPos(),
-        sticky: false,
-        top: _this.top,
-        padding: _this.padding
-      })(_this.view.state, _this.view.dispatch, _this.view);
+
+      if (!isEditorDestroyed) {
+        updateStickyState({
+          pos: _this.getPos(),
+          sticky: false,
+          top: _this.top,
+          padding: _this.padding
+        })(_this.view.state, _this.view.dispatch, _this.view);
+      }
     });
 
     this.view = view;
@@ -276,7 +313,10 @@ export var TableRowNodeView = /*#__PURE__*/function () {
     var featureFlags = 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');
@@ -288,22 +328,23 @@ export var TableRowNodeView = /*#__PURE__*/function () {
 
   _createClass(TableRowNodeView, [{
     key: "tree",
-    get: function get() {
+    get: // this is the sticky header table row
+    function get() {
       return getTree(this.dom);
     }
   }, {
     key: "subscribe",
     value: function subscribe() {
-      this.scrollElement = findOverflowScrollParent(this.view.dom) || window;
+      this.editorScrollableElement = 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 = getTop(this.scrollElement);
+        this.topPosEditorElement = getTop(this.editorScrollableElement);
       }
 
       this.eventDispatcher.on(widthPluginKey.key, this.onWidthPluginState);
@@ -325,8 +366,8 @@ export 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(widthPluginKey.key, this.onWidthPluginState);
@@ -443,7 +484,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
           }
         });
       }, {
-        root: this.scrollElement
+        root: this.editorScrollableElement
       });
     }
     /* paint/update loop */
@@ -485,10 +526,10 @@ export 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/esm/plugins/table/pm-plugins/sticky-headers/plugin.js

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TableRowNodeView } from './nodeviews/tableRow';
 import { pluginKey } from './plugin-key';
 import { createPluginState } from './plugin-state';
@@ -6,7 +6,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
   var initialState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
     return [];
   };
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, initialState),
     key: pluginKey,
     props: {

package/dist/esm/plugins/table/pm-plugins/table-local-id.js

@@ -16,10 +16,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
 import { uuid } from '@atlaskit/adf-schema';
-import { stepAdds } from '../../../utils/step';
+import { stepAddsOneOf } from '../../../utils/step';
 var pluginKey = new PluginKey('tableLocalIdPlugin');
 
 var getPluginState = function getPluginState(state) {
@@ -32,7 +33,7 @@ var getPluginState = function getPluginState(state) {
 
 var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
   return transaction.steps.some(function (step) {
-    return stepAdds(step, nodeType);
+    return stepAddsOneOf(step, new Set([nodeType]));
   });
 };
 /**
@@ -41,7 +42,7 @@ var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
 
 
 var createPlugin = function createPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

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

@@ -1,6 +1,6 @@
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { tableCellMinWidth } from '@atlaskit/editor-common';
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { getParentNodeWidth } from '../../../../utils/node-width';
 import { pluginKey as editorDisabledPluginKey } from '../../../editor-disabled';