@atlaskit/editor-core 153.1.5 → 157.0.0

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -40,16 +38,10 @@ var _element = require("@atlaskit/status/element");
 
 var _nodeviews = require("../../../nodeviews");
 
-var _InlineNodeWrapper = _interopRequireWildcard(require("../../../ui/InlineNodeWrapper"));
-
 var _messages = require("./messages");
 
 var _templateObject;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
@@ -120,10 +112,6 @@ var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
   (0, _createClass2.default)(StatusNodeView, [{
     key: "createDomRef",
     value: function createDomRef() {
-      if (this.reactComponentProps.options && this.reactComponentProps.options.useInlineWrapper) {
-        return (0, _InlineNodeWrapper.createMobileInlineDomRef)();
-      }
-
       return (0, _get2.default)((0, _getPrototypeOf2.default)(StatusNodeView.prototype), "createDomRef", this).call(this);
     }
   }, {
@@ -146,9 +134,7 @@ var StatusNodeView = /*#__PURE__*/function (_ReactNodeView) {
           color = _this$node$attrs.color,
           localId = _this$node$attrs.localId,
           style = _this$node$attrs.style;
-      return /*#__PURE__*/_react.default.createElement(_InlineNodeWrapper.default, {
-        useInlineWrapper: options && options.useInlineWrapper
-      }, options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE, /*#__PURE__*/_react.default.createElement(IntlStatusContainerView, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE, /*#__PURE__*/_react.default.createElement(IntlStatusContainerView, {
         view: this.view,
         text: text,
         color: color,

package/dist/cjs/plugins/status/plugin.js

@@ -21,6 +21,8 @@ Object.defineProperty(exports, "pluginKeyName", {
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _status = _interopRequireDefault(require("./nodeviews/status"));
@@ -34,7 +36,7 @@ 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) { (0, _defineProperty2.default)(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; }
 
 var createPlugin = function createPlugin(dispatch, portalProviderAPI, eventDispatcher, options) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
         return {

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

@@ -248,8 +248,7 @@ 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.default.createElement(PopupWithListeners, {
         target: target,
         offset: [0, 8],
@@ -266,8 +265,7 @@ 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/cjs/plugins/table/commands/misc.js

@@ -314,8 +314,19 @@ 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 _prosemirrorState.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 _prosemirrorState.TextSelection(state.doc.resolve(pos))));
+    dispatch(tr);
   }
 
   return true;

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

@@ -81,24 +81,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.default.createElement("div", {
-    style: {
-      position: 'absolute',
-      top: '30px'
-    }
-  }, ' ');
-};
-
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
 
@@ -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/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,7 +9,7 @@ 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");
 
@@ -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) {

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

@@ -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,20 +241,6 @@ 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) {
       var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
@@ -240,6 +259,20 @@ var TableRowNodeView = /*#__PURE__*/function () {
 
       _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);
     (0, _defineProperty2.default)(this, "emitOn", function (top, padding) {
@@ -282,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');
@@ -294,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, _ui.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);
@@ -331,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);
@@ -449,7 +486,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
           }
         });
       }, {
-        root: this.scrollElement
+        root: this.editorScrollableElement
       });
     }
     /* paint/update loop */

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: {

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

@@ -9,6 +9,8 @@ exports.createPlugin = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -42,7 +44,7 @@ var checkIsAddingTable = function checkIsAddingTable(transaction, nodeType) {
 
 
 var createPlugin = function createPlugin(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
       init: function init() {

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

@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _types = require("../../types");
 
@@ -30,7 +30,7 @@ function createPlugin(dispatch, _ref) {
       lastColumnResizable = _ref$lastColumnResiza === void 0 ? true : _ref$lastColumnResiza,
       _ref$dynamicTextSizin = _ref.dynamicTextSizing,
       dynamicTextSizing = _ref$dynamicTextSizin === void 0 ? false : _ref$dynamicTextSizin;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _pluginKey.pluginKey,
     state: (0, _pluginFactory.createPluginState)(dispatch, {
       lastColumnResizable: lastColumnResizable,

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

@@ -49,6 +49,7 @@ 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) { (0, _defineProperty2.default)(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; }
 
+// TODO: ED-14403 investigate why these translations don't work
 var messages = (0, _reactIntlNext.defineMessages)({
   tableOptions: {
     id: 'fabric.editor.tableOptions',

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

@@ -41,6 +41,8 @@ var _commandsWithAnalytics = require("../../commands-with-analytics");
 
 var _types = require("../../types");
 
+var _prosemirrorUtils = require("prosemirror-utils");
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
 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; } }
@@ -51,13 +53,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var addPopupOffset = function addPopupOffset(pos) {
   return _objectSpread(_objectSpread({}, pos), {}, {
-    // add 22 pixels to align y position with
+    // add 12 pixels to align y position with
     //the columns controls
-    top: pos.top ? pos.top + 22 : undefined
+    top: pos.top ? pos.top + 12 : undefined
   });
 };
 
-var getTitle = function getTitle(layout) {
+var getMessage = function getMessage(layout) {
   switch (layout) {
     case 'default':
       return _messages.default.layoutWide;
@@ -95,23 +97,75 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
   }
 
   (0, _createClass2.default)(LayoutButton, [{
-    key: "render",
-    value: function render() {
+    key: "getTitle",
+    value: function getTitle() {
       var _this$props = this.props,
           formatMessage = _this$props.intl.formatMessage,
-          mountPoint = _this$props.mountPoint,
-          boundariesElement = _this$props.boundariesElement,
-          scrollableElement = _this$props.scrollableElement,
-          targetRef = _this$props.targetRef,
-          isResizing = _this$props.isResizing,
           _this$props$layout = _this$props.layout,
           layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
+      return formatMessage(getMessage(layout));
+    }
+  }, {
+    key: "toolbarButton",
+    value: function toolbarButton() {
+      var _this$props2 = this.props,
+          isResizing = _this$props2.isResizing,
+          _this$props2$layout = _this$props2.layout,
+          layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
+      var title = this.getTitle();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames2.default)(_types.TableCssClassName.LAYOUT_BUTTON, (0, _defineProperty2.default)({}, _types.TableCssClassName.IS_RESIZING, isResizing))
+      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
+        title: title,
+        onClick: this.handleClick,
+        iconBefore: layout === 'full-width' ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
+          label: title
+        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
+          label: title
+        })
+      }));
+    }
+  }, {
+    key: "getStickyTargetRef",
+    value: function getStickyTargetRef(pos) {
+      var editorView = this.props.editorView;
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var node = (0, _prosemirrorUtils.findDomRefAtPos)(pos, domAtPos);
+      return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
+    }
+  }, {
+    key: "renderSticky",
+    value: function renderSticky(button, targetRef) {
+      var title = this.getTitle();
+
+      if (!targetRef || !(targetRef instanceof HTMLElement)) {
+        return null;
+      }
+
+      var pos = targetRef.getBoundingClientRect();
+      return /*#__PURE__*/_react.default.createElement("div", {
+        "aria-label": title,
+        style: {
+          position: 'fixed',
+          top: pos.top + 22,
+          left: pos.right + 10
+        }
+      }, button);
+    }
+  }, {
+    key: "renderPopup",
+    value: function renderPopup(button) {
+      var _this$props3 = this.props,
+          mountPoint = _this$props3.mountPoint,
+          boundariesElement = _this$props3.boundariesElement,
+          scrollableElement = _this$props3.scrollableElement,
+          targetRef = _this$props3.targetRef;
 
       if (!targetRef) {
         return null;
       }
 
-      var title = formatMessage(getTitle(layout));
+      var title = this.getTitle();
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
         ariaLabel: title,
         target: targetRef,
@@ -123,27 +177,31 @@ var LayoutButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
         forcePlacement: true
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames2.default)(_types.TableCssClassName.LAYOUT_BUTTON, (0, _defineProperty2.default)({}, _types.TableCssClassName.IS_RESIZING, isResizing))
-      }, /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
-        title: title,
-        onClick: this.handleClick,
-        iconBefore: layout === 'full-width' ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
-          label: title
-        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
-          label: title
-        })
-      })));
+      }, button);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var stickyHeader = this.props.stickyHeader;
+      var button = this.toolbarButton();
+      var stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
+
+      if (stickyTargetRef) {
+        return this.renderSticky(button, stickyTargetRef);
+      } else {
+        return this.renderPopup(button);
+      }
     }
   }, {
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
-      var _this$props2 = this.props,
-          targetRef = _this$props2.targetRef,
-          layout = _this$props2.layout,
-          isResizing = _this$props2.isResizing,
-          tableWidth = _this$props2.tableWidth;
-      return targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
+      var _this$props4 = this.props,
+          targetRef = _this$props4.targetRef,
+          layout = _this$props4.layout,
+          isResizing = _this$props4.isResizing,
+          tableWidth = _this$props4.tableWidth,
+          stickyHeader = _this$props4.stickyHeader;
+      return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing || tableWidth !== nextProps.tableWidth;
     }
   }]);
   return LayoutButton;