@atlaskit/editor-plugin-table 5.1.0 → 5.2.1

package/dist/cjs/plugins/table/{pm-plugins/sticky-headers/nodeviews/tableRow.js → nodeviews/TableRow.js}

@@ -4,288 +4,210 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.supportedHeaderRow = exports.TableRowNodeView = void 0;
+exports.default = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
-var _types = require("../../../types");
-var _consts = require("../../../ui/consts");
-var _pluginKey = require("../../plugin-key");
-var _dom = require("../../table-resizing/utils/dom");
-var _commands = require("../commands");
-var _dom2 = require("./dom");
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _pluginKey = require("../pm-plugins/plugin-key");
+var _commands = require("../pm-plugins/sticky-headers/commands");
+var _dom = require("../pm-plugins/table-resizing/utils/dom");
+var _types = require("../types");
+var _consts = require("../ui/consts");
+var _dom2 = require("../utils/dom");
+var _nodes = require("../utils/nodes");
+var _TableNodeViewBase = _interopRequireDefault(require("./TableNodeViewBase"));
+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; } }
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
 // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
-  return (0, _utils.mapChildren)(node, function (child) {
-    return child.attrs.rowspan || 0;
-  }).some(function (rowspan) {
-    return rowspan > 1;
-  });
-};
-
-/**
- * Check if a given node is a header row with this definition:
- *  - all children are tableHeader cells
- *  - no table cells have been have merged with other table row cells
- *
- * @param node ProseMirror node
- * @return boolean if it meets definition
- */
-var supportedHeaderRow = exports.supportedHeaderRow = function supportedHeaderRow(node) {
-  var allHeaders = (0, _utils.mapChildren)(node, function (child) {
-    return child.type.name === 'tableHeader';
-  }).every(Boolean);
-  var someMerged = anyChildCellMergedAcrossRow(node);
-  return allHeaders && !someMerged;
-};
-var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
-  function TableRowNodeView(node, view, getPos, eventDispatcher) {
-    var _this = this;
-    (0, _classCallCheck2.default)(this, TableRowNodeView);
-    // this is the sticky header table row
-    (0, _defineProperty2.default)(this, "colControlsOffset", 0);
-    (0, _defineProperty2.default)(this, "focused", false);
-    (0, _defineProperty2.default)(this, "topPosEditorElement", 0);
-    (0, _defineProperty2.default)(this, "sentinels", {});
-    /* external events */
-    (0, _defineProperty2.default)(this, "listening", false);
-    (0, _defineProperty2.default)(this, "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
+var TableRow = exports.default = /*#__PURE__*/function (_ref) {
+  (0, _inherits2.default)(TableRow, _ref);
+  var _super = _createSuper(TableRow);
+  function TableRow(node, view, getPos, eventDispatcher) {
+    var _this;
+    (0, _classCallCheck2.default)(this, TableRow);
+    _this = _super.call(this, node, view, getPos, eventDispatcher);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "colControlsOffset", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focused", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "topPosEditorElement", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "sentinels", {});
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "listening", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "padding", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "top", 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScrollEnd", (0, _debounce.default)(function () {
       _this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
     // When the header is sticky, the header row is set to position: fixed
     // This prevents mouse wheel scrolling on the scroll-parent div when user's mouse is hovering the header row.
     // This fix sets pointer-events: none on the header row briefly to avoid this behaviour
-    (0, _defineProperty2.default)(this, "headerRowMouseScroll", (0, _throttle.default)(function () {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "headerRowMouseScroll", (0, _throttle.default)(function () {
       if (_this.isSticky) {
         _this.dom.classList.add('no-pointer-events');
         _this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
-    /* receive external events */
-    (0, _defineProperty2.default)(this, "onTablePluginState", function (state) {
-      var tableRef = state.tableRef;
-      var tree = _this.tree;
-      if (!tree) {
-        return;
+    _this.isHeaderRow = (0, _nodes.supportedHeaderRow)(node);
+    _this.isSticky = false;
+    var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
+      pluginConfig = _getPluginState.pluginConfig,
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
+    _this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+    _this.isDragAndDropEnabled = !!isDragAndDropEnabled;
+    if (_this.isHeaderRow) {
+      _this.dom.setAttribute('data-header-row', 'true');
+      if (_this.isStickyHeaderEnabled) {
+        _this.subscribe();
       }
+    }
+    if (_this.isDragAndDropEnabled) {
+      _this.addDropTarget(_this.contentDOM);
+    }
+    return _this;
+  }
 
-      // when header rows are toggled off - mark sentinels as unobserved
-      if (!state.isHeaderRowEnabled) {
-        [_this.sentinels.top, _this.sentinels.bottom].forEach(function (el) {
-          if (el) {
-            delete el.dataset.isObserved;
-          }
-        });
-      }
-      var isCurrentTableSelected = tableRef === tree.table;
+  /**
+   * Variables
+   */
 
-      // If current table selected and header row is toggled off, turn off sticky header
-      if (isCurrentTableSelected && !state.isHeaderRowEnabled && _this.tree) {
-        _this.makeRowHeaderNotSticky(_this.tree.table);
-      }
-      _this.focused = isCurrentTableSelected;
-      var wrapper = tree.wrapper;
-      var tableContainer = wrapper.parentElement;
-      var tableContentWrapper = tableContainer.parentElement;
-      var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-      if (isCurrentTableSelected) {
-        _this.colControlsOffset = _consts.tableControlsSpacing;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-          // move table a little out of the way
-          // to provide spacing for table controls
-          tableContentWrapper.style.paddingLeft = '11px';
-        }
-      } else {
-        _this.colControlsOffset = 0;
-        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
-          tableContentWrapper.style.removeProperty('padding-left');
-        }
+  // @ts-ignore
+  (0, _createClass2.default)(TableRow, [{
+    key: "update",
+    value:
+    /**
+     * Methods: Nodeview Lifecycle
+     */
+    function update(node) {
+      // do nothing if nodes were identical
+      if (node === this.node) {
+        return true;
       }
 
-      // run after table style changes have been committed
-      setTimeout(function () {
-        (0, _dom.syncStickyRowToTable)(tree.table);
-      }, 0);
-    });
-    (0, _defineProperty2.default)(this, "updateStickyHeaderWidth", function () {
-      // table width might have changed, sync that back to sticky row
-      var tree = _this.tree;
-      if (!tree) {
-        return;
+      // see if we're changing into a header row or
+      // changing away from one
+      var newNodeIsHeaderRow = (0, _nodes.supportedHeaderRow)(node);
+      if (this.isHeaderRow !== newNodeIsHeaderRow) {
+        return false; // re-create nodeview
       }
-      (0, _dom.syncStickyRowToTable)(tree.table);
-    });
-    (0, _defineProperty2.default)(this, "shouldHeaderStick", function (tree) {
-      var wrapper = tree.wrapper;
-      var tableWrapperRect = wrapper.getBoundingClientRect();
-      var editorAreaRect = _this.editorScrollableElement.getBoundingClientRect();
-      var stickyHeaderRect = _this.contentDOM.getBoundingClientRect();
-      var firstHeaderRow = !_this.dom.previousElementSibling;
-      var subsequentRows = !!_this.dom.nextElementSibling;
-      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;
-      }
+      // node is different but no need to re-create nodeview
+      this.node = node;
 
-      // if the sticky header is below the editor area make it non-sticky
-      if (stickyHeaderRect.top > editorAreaRect.top) {
-        return false;
+      // don't do anything if we're just a regular tr
+      if (!this.isHeaderRow) {
+        return true;
       }
 
-      // otherwise make it non-sticky
-      return false;
-    });
-    /**
-     * Manually refire the intersection observers.
-     * Useful when the header may have detached from the table.
-     */
-    (0, _defineProperty2.default)(this, "refireIntersectionObservers", function () {
-      if (_this.isSticky) {
-        [_this.sentinels.top, _this.sentinels.bottom].forEach(function (el) {
-          if (el && _this.intersectionObserver) {
-            _this.intersectionObserver.unobserve(el);
-            _this.intersectionObserver.observe(el);
-          }
-        });
+      // something changed, sync widths
+      if (this.isStickyHeaderEnabled) {
+        var tbody = this.dom.parentElement;
+        var table = tbody && tbody.parentElement;
+        (0, _dom.syncStickyRowToTable)(table);
       }
-    });
-    (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree, scrollTop) {
-      var _tbody$firstChild;
-      // If header row height is more than 50% of viewport height don't do this
-      if (_this.isSticky || _this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
-        return;
+      return true;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$dropTargetClean;
+      if (this.isStickyHeaderEnabled) {
+        this.unsubscribe();
+        var tree = (0, _dom2.getTree)(this.dom);
+        if (tree) {
+          this.makeRowHeaderNotSticky(tree.table, true);
+        }
+        this.emitOff(true);
       }
-      var table = tree.table,
-        wrapper = tree.wrapper;
 
-      // ED-16035 Make sure sticky header is only applied to first row
-      var tbody = _this.dom.parentElement;
-      var isFirstHeader = tbody === null || tbody === void 0 || (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(_this.dom);
-      if (!isFirstHeader) {
-        return;
-      }
-      var currentTableTop = _this.getCurrentTableTop(tree);
-      if (!scrollTop) {
-        scrollTop = (0, _dom2.getTop)(_this.editorScrollableElement);
+      // If a drop target cleanup method has been set then we should call it.
+      (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 || _this$dropTargetClean.call(this);
+    }
+  }, {
+    key: "ignoreMutation",
+    value: function ignoreMutation(mutationRecord) {
+      /* tableRows are not directly editable by the user
+       * so it should be safe to ignore mutations that we cause
+       * by updating styles and classnames on this DOM element
+       *
+       * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
+       * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
+       * */
+      var isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
+      /**
+       * Update: should not ignore mutations when an node is added, as this interferes with
+       * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
+       *
+       * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
+       * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
+       * selection and insertion.
+       */
+      var isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
+      if (isTableSelection || isNodeInsertion) {
+        return false;
       }
-      var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
-      if (!_this.isSticky) {
-        var _this$editorScrollabl;
-        (0, _dom.syncStickyRowToTable)(table);
-        _this.dom.classList.add('sticky');
-        table.classList.add(_types.TableCssClassName.TABLE_STICKY);
-        _this.isSticky = true;
+      return true;
+    }
 
-        /**
-         * The logic below is not desirable, but acts as a fail safe for scenarios where the sticky header
-         * detaches from the table. This typically happens during a fast scroll by the user which causes
-         * the intersection observer logic to not fire as expected.
-         */
-        (_this$editorScrollabl = _this.editorScrollableElement) === null || _this$editorScrollabl === void 0 || _this$editorScrollabl.addEventListener('scrollend', _this.refireIntersectionObservers, {
-          passive: true,
-          once: true
-        });
-        var fastScrollThresholdMs = 500;
-        setTimeout(function () {
-          _this.refireIntersectionObservers();
-        }, fastScrollThresholdMs);
-      }
-      _this.dom.style.top = "".concat(domTop, "px");
-      (0, _dom.updateStickyMargins)(table);
-      _this.dom.scrollLeft = wrapper.scrollLeft;
-      _this.emitOn(domTop, _this.colControlsOffset);
-    });
-    (0, _defineProperty2.default)(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(_types.TableCssClassName.TABLE_STICKY);
-      _this.isSticky = false;
-      _this.dom.style.top = '';
-      table.style.removeProperty('margin-top');
-      _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();
-    });
-    // TODO: rename!
-    (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;
-    });
-    /* emit external events */
-    (0, _defineProperty2.default)(this, "padding", 0);
-    (0, _defineProperty2.default)(this, "top", 0);
-    (0, _defineProperty2.default)(this, "emitOn", function (top, padding) {
-      if (top === _this.top && padding === _this.padding) {
+    /**
+     * Methods
+     */
+  }, {
+    key: "addDropTarget",
+    value: function addDropTarget(element) {
+      var pos = this.getPos();
+      if (!Number.isFinite(pos)) {
         return;
       }
-      _this.top = top;
-      _this.padding = padding;
-      (0, _commands.updateStickyState)({
-        pos: _this.getPos(),
-        top: top,
-        sticky: true,
-        padding: padding
-      })(_this.view.state, _this.view.dispatch, _this.view);
-    });
-    (0, _defineProperty2.default)(this, "emitOff", function (isEditorDestroyed) {
-      if (_this.top === 0 && _this.padding === 0) {
-        return;
+      if (this.dropTargetCleanup) {
+        this.dropTargetCleanup();
       }
-      _this.top = 0;
-      _this.padding = 0;
-      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;
-    this.getPos = getPos;
-    this.eventDispatcher = eventDispatcher;
-    this.dom = document.createElement('tr');
-    this.contentDOM = this.dom;
-    this.lastTimePainted = 0;
-    this.isHeaderRow = supportedHeaderRow(node);
-    this.isSticky = false;
-    this.lastStickyTimestamp = undefined;
-    if (this.isHeaderRow) {
-      this.dom.setAttribute('data-header-row', 'true');
-      this.subscribe();
-    }
-  }
-  (0, _createClass2.default)(TableRowNodeView, [{
-    key: "tree",
-    get: function get() {
-      return (0, _dom2.getTree)(this.dom);
+      var resolvedPos = this.view.state.doc.resolve(pos);
+      var targetIndex = resolvedPos.index();
+      var localId = resolvedPos.parent.attrs.localId;
+      this.dropTargetCleanup = (0, _element.dropTargetForElements)({
+        element: element,
+        canDrop: function canDrop(_ref2) {
+          var _data$indexes, _data$indexes2;
+          var source = _ref2.source;
+          var data = source.data;
+          return (
+            // Only draggables of row type can be dropped on this target
+            data.type === 'table-row' &&
+            // Only draggables which came from the same table can be dropped on this target
+            data.localId === localId &&
+            // Only draggables which DO NOT include this drop targets index can be dropped
+            !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(targetIndex)) === -1
+          );
+        },
+        getData: function getData(_ref3) {
+          var input = _ref3.input,
+            element = _ref3.element;
+          var data = {
+            localId: localId,
+            type: 'table-row',
+            targetIndex: targetIndex
+          };
+          return (0, _closestEdge.attachClosestEdge)(data, {
+            input: input,
+            element: element,
+            allowedEdges: ['top', 'bottom']
+          });
+        }
+      });
     }
   }, {
     key: "subscribe",
@@ -295,8 +217,8 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
         this.initObservers();
         this.topPosEditorElement = (0, _dom2.getTop)(this.editorScrollableElement);
       }
-      this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
-      this.eventDispatcher.on(_pluginKey.pluginKey.key, this.onTablePluginState);
+      this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
+      this.eventDispatcher.on(_pluginKey.pluginKey.key, this.onTablePluginState.bind(this));
       this.listening = true;
       this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
         passive: true
@@ -350,9 +272,9 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
         this.resizeObserver.observe(this.editorScrollableElement);
       }
       window.requestAnimationFrame(function () {
-        var _this2$tree;
+        var _getTree;
         // we expect tree to be defined after animation frame
-        var tableContainer = (_this2$tree = _this2.tree) === null || _this2$tree === void 0 ? void 0 : _this2$tree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+        var tableContainer = (_getTree = (0, _dom2.getTree)(_this2.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         if (tableContainer) {
           _this2.sentinels.top = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
           _this2.sentinels.bottom = tableContainer.getElementsByClassName(_types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
@@ -374,10 +296,11 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
     value: function createResizeObserver() {
       var _this3 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        if (!_this3.tree) {
+        var tree = (0, _dom2.getTree)(_this3.dom);
+        if (!tree) {
           return;
         }
-        var table = _this3.tree.table;
+        var table = tree.table;
         entries.forEach(function (entry) {
           var _this3$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
@@ -403,10 +326,11 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
     value: function createIntersectionObserver() {
       var _this4 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        if (!_this4.tree) {
+        var tree = (0, _dom2.getTree)(_this4.dom);
+        if (!tree) {
           return;
         }
-        var table = _this4.tree.table;
+        var table = tree.table;
         if (table.rows.length < 2) {
           // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
           // toggling side-effects because the intersection observers gets confused.
@@ -425,7 +349,7 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
             var sentinelIsBelowScrollArea = (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.bottom) || 0) < entry.boundingClientRect.bottom;
             if (!entry.isIntersecting && !sentinelIsBelowScrollArea) {
               var _entry$rootBounds3;
-              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+              tree && _this4.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
               _this4.lastStickyTimestamp = Date.now();
             } else {
               table && _this4.makeRowHeaderNotSticky(table);
@@ -445,7 +369,7 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
               }
             } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
               var _entry$rootBounds5;
-              _this4.tree && _this4.makeHeaderRowSticky(_this4.tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+              tree && _this4.makeHeaderRowSticky(tree, entry === null || entry === void 0 || (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
               _this4.lastStickyTimestamp = Date.now();
             }
           }
@@ -455,72 +379,208 @@ var TableRowNodeView = exports.TableRowNodeView = /*#__PURE__*/function () {
         root: this.editorScrollableElement
       });
     }
-
-    /* paint/update loop */
+    /* receive external events */
   }, {
-    key: "update",
-    value: /* nodeview lifecycle */
-    function update(node) {
-      // do nothing if nodes were identical
-      if (node === this.node) {
-        return true;
+    key: "onTablePluginState",
+    value: function onTablePluginState(state) {
+      var tableRef = state.tableRef;
+      var tree = (0, _dom2.getTree)(this.dom);
+      if (!tree) {
+        return;
       }
 
-      // see if we're changing into a header row or
-      // changing away from one
-      var newNodeIsHeaderRow = supportedHeaderRow(node);
-      if (this.isHeaderRow !== newNodeIsHeaderRow) {
-        return false; // re-create nodeview
+      // when header rows are toggled off - mark sentinels as unobserved
+      if (!state.isHeaderRowEnabled) {
+        [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
+          if (el) {
+            delete el.dataset.isObserved;
+          }
+        });
       }
+      var isCurrentTableSelected = tableRef === tree.table;
 
-      // node is different but no need to re-create nodeview
-      this.node = node;
+      // If current table selected and header row is toggled off, turn off sticky header
+      if (isCurrentTableSelected && !state.isHeaderRowEnabled && tree) {
+        this.makeRowHeaderNotSticky(tree.table);
+      }
+      this.focused = isCurrentTableSelected;
+      var wrapper = tree.wrapper;
+      var tableContainer = wrapper.parentElement;
+      var tableContentWrapper = tableContainer.parentElement;
+      var layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
+      if (isCurrentTableSelected) {
+        this.colControlsOffset = _consts.tableControlsSpacing;
+        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+          // move table a little out of the way
+          // to provide spacing for table controls
+          tableContentWrapper.style.paddingLeft = '11px';
+        }
+      } else {
+        this.colControlsOffset = 0;
+        if (layoutContainer && layoutContainer.getAttribute('data-layout-content')) {
+          tableContentWrapper.style.removeProperty('padding-left');
+        }
+      }
 
-      // don't do anything if we're just a regular tr
-      if (!this.isHeaderRow) {
-        return true;
+      // run after table style changes have been committed
+      setTimeout(function () {
+        (0, _dom.syncStickyRowToTable)(tree.table);
+      }, 0);
+    }
+  }, {
+    key: "updateStickyHeaderWidth",
+    value: function updateStickyHeaderWidth() {
+      // table width might have changed, sync that back to sticky row
+      var tree = (0, _dom2.getTree)(this.dom);
+      if (!tree) {
+        return;
       }
+      (0, _dom.syncStickyRowToTable)(tree.table);
+    }
 
-      // something changed, sync widths
+    /**
+     * Manually refire the intersection observers.
+     * Useful when the header may have detached from the table.
+     */
+  }, {
+    key: "refireIntersectionObservers",
+    value: function refireIntersectionObservers() {
+      var _this5 = this;
+      if (this.isSticky) {
+        [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
+          if (el && _this5.intersectionObserver) {
+            _this5.intersectionObserver.unobserve(el);
+            _this5.intersectionObserver.observe(el);
+          }
+        });
+      }
+    }
+  }, {
+    key: "makeHeaderRowSticky",
+    value: function makeHeaderRowSticky(tree, scrollTop) {
+      var _tbody$firstChild,
+        _this6 = this;
+      // If header row height is more than 50% of viewport height don't do this
+      if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
+        return;
+      }
+      var table = tree.table,
+        wrapper = tree.wrapper;
+
+      // ED-16035 Make sure sticky header is only applied to first row
       var tbody = this.dom.parentElement;
-      var table = tbody && tbody.parentElement;
-      (0, _dom.syncStickyRowToTable)(table);
-      return true;
+      var isFirstHeader = tbody === null || tbody === void 0 || (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(this.dom);
+      if (!isFirstHeader) {
+        return;
+      }
+      var currentTableTop = this.getCurrentTableTop(tree);
+      if (!scrollTop) {
+        scrollTop = (0, _dom2.getTop)(this.editorScrollableElement);
+      }
+      var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
+      if (!this.isSticky) {
+        var _this$editorScrollabl;
+        (0, _dom.syncStickyRowToTable)(table);
+        this.dom.classList.add('sticky');
+        table.classList.add(_types.TableCssClassName.TABLE_STICKY);
+        this.isSticky = true;
+
+        /**
+         * The logic below is not desirable, but acts as a fail safe for scenarios where the sticky header
+         * detaches from the table. This typically happens during a fast scroll by the user which causes
+         * the intersection observer logic to not fire as expected.
+         */
+        (_this$editorScrollabl = this.editorScrollableElement) === null || _this$editorScrollabl === void 0 || _this$editorScrollabl.addEventListener('scrollend', this.refireIntersectionObservers, {
+          passive: true,
+          once: true
+        });
+        var fastScrollThresholdMs = 500;
+        setTimeout(function () {
+          _this6.refireIntersectionObservers();
+        }, fastScrollThresholdMs);
+      }
+      this.dom.style.top = "".concat(domTop, "px");
+      (0, _dom.updateStickyMargins)(table);
+      this.dom.scrollLeft = wrapper.scrollLeft;
+      this.emitOn(domTop, this.colControlsOffset);
     }
   }, {
-    key: "destroy",
-    value: function destroy() {
-      this.unsubscribe();
-      if (this.tree) {
-        this.makeRowHeaderNotSticky(this.tree.table, true);
+    key: "makeRowHeaderNotSticky",
+    value: function makeRowHeaderNotSticky(table) {
+      var isEditorDestroyed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      if (!this.isSticky || !table || !this.dom) {
+        return;
       }
-      this.emitOff(true);
+      this.dom.style.removeProperty('width');
+      this.dom.classList.remove('sticky');
+      table.classList.remove(_types.TableCssClassName.TABLE_STICKY);
+      this.isSticky = false;
+      this.dom.style.top = '';
+      table.style.removeProperty('margin-top');
+      this.emitOff(isEditorDestroyed);
     }
   }, {
-    key: "ignoreMutation",
-    value: function ignoreMutation(mutationRecord) {
-      /* tableRows are not directly editable by the user
-       * so it should be safe to ignore mutations that we cause
-       * by updating styles and classnames on this DOM element
-       *
-       * Update: should not ignore mutations for row selection to avoid known issue with table selection highlight in firefox
-       * Related bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1289673
-       * */
-      var isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
-      /**
-       * Update: should not ignore mutations when an node is added, as this interferes with
-       * prosemirrors handling of some language inputs in Safari (ie. Pinyin, Hiragana).
-       *
-       * In paticular, when a composition occurs at the start of the first node inside a table cell, if the resulting mutation
-       * from the composition end is ignored than prosemirror will end up with; invalid table markup nesting and a misplaced
-       * selection and insertion.
-       */
-      var isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
-      if (isTableSelection || isNodeInsertion) {
-        return false;
+    key: "getWrapperoffset",
+    value: function getWrapperoffset() {
+      var inverse = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      var focusValue = inverse ? !this.focused : this.focused;
+      return focusValue ? 0 : _consts.tableControlsSpacing;
+    }
+  }, {
+    key: "getWrapperRefTop",
+    value: function getWrapperRefTop(wrapper) {
+      return Math.round((0, _dom2.getTop)(wrapper)) + this.getWrapperoffset();
+    }
+
+    // TODO: rename!
+  }, {
+    key: "getScrolledTableTop",
+    value: function getScrolledTableTop(wrapper) {
+      return this.getWrapperRefTop(wrapper) - this.topPosEditorElement;
+    }
+  }, {
+    key: "getCurrentTableTop",
+    value: function getCurrentTableTop(tree) {
+      return this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
+    }
+
+    /* emit external events */
+  }, {
+    key: "emitOn",
+    value: function emitOn(top, padding) {
+      if (top === this.top && padding === this.padding) {
+        return;
+      }
+      this.top = top;
+      this.padding = padding;
+      var pos = this.getPos();
+      if (Number.isFinite(pos)) {
+        (0, _commands.updateStickyState)({
+          pos: pos,
+          top: top,
+          sticky: true,
+          padding: padding
+        })(this.view.state, this.view.dispatch, this.view);
+      }
+    }
+  }, {
+    key: "emitOff",
+    value: function emitOff(isEditorDestroyed) {
+      if (this.top === 0 && this.padding === 0) {
+        return;
+      }
+      this.top = 0;
+      this.padding = 0;
+      var pos = this.getPos();
+      if (!isEditorDestroyed && Number.isFinite(pos)) {
+        (0, _commands.updateStickyState)({
+          pos: pos,
+          sticky: false,
+          top: this.top,
+          padding: this.padding
+        })(this.view.state, this.view.dispatch, this.view);
       }
-      return true;
     }
   }]);
-  return TableRowNodeView;
-}();
+  return TableRow;
+}(_TableNodeViewBase.default);