@atlaskit/editor-plugin-table 5.1.0 → 5.2.1

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

@@ -2,13 +2,18 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
-import { browser, mapChildren } from '@atlaskit/editor-common/utils';
-import { TableCssClassName as ClassName, TableCssClassName } from '../../../types';
-import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../../../ui/consts';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
-import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../../table-resizing/utils/dom';
-import { updateStickyState } from '../commands';
-import { getTop, getTree } from './dom';
+import { browser } from '@atlaskit/editor-common/utils';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { getPluginState } from '../pm-plugins/plugin-factory';
+import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
+import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
+import { syncStickyRowToTable, updateStickyMargins as updateTableMargin } from '../pm-plugins/table-resizing/utils/dom';
+import { TableCssClassName as ClassName, TableCssClassName } from '../types';
+import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableControlsSpacing, tableScrollbarOffset } from '../ui/consts';
+import { getTop, getTree } from '../utils/dom';
+import { supportedHeaderRow } from '../utils/nodes';
+import TableNodeView from './TableNodeViewBase';
 
 // limit scroll event calls
 const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
@@ -16,33 +21,16 @@ const 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.
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => 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
- */
-export const supportedHeaderRow = node => {
-  const allHeaders = mapChildren(node, child => child.type.name === 'tableHeader').every(Boolean);
-  const someMerged = anyChildCellMergedAcrossRow(node);
-  return allHeaders && !someMerged;
-};
-export class TableRowNodeView {
-  get tree() {
-    return getTree(this.dom);
-  }
+export default class TableRow extends TableNodeView {
   constructor(node, view, getPos, eventDispatcher) {
-    // this is the sticky header table row
+    super(node, view, getPos, eventDispatcher);
     _defineProperty(this, "colControlsOffset", 0);
     _defineProperty(this, "focused", false);
     _defineProperty(this, "topPosEditorElement", 0);
     _defineProperty(this, "sentinels", {});
-    /* external events */
     _defineProperty(this, "listening", false);
+    _defineProperty(this, "padding", 0);
+    _defineProperty(this, "top", 0);
     _defineProperty(this, "headerRowMouseScrollEnd", debounce(() => {
       this.dom.classList.remove('no-pointer-events');
     }, HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT));
@@ -55,215 +43,148 @@ export class TableRowNodeView {
         this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
-    /* receive external events */
-    _defineProperty(this, "onTablePluginState", state => {
-      const tableRef = state.tableRef;
-      const tree = this.tree;
-      if (!tree) {
-        return;
+    this.isHeaderRow = supportedHeaderRow(node);
+    this.isSticky = false;
+    const {
+      pluginConfig,
+      isDragAndDropEnabled
+    } = getPluginState(view.state);
+    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);
+    }
+  }
 
-      // when header rows are toggled off - mark sentinels as unobserved
-      if (!state.isHeaderRowEnabled) {
-        [this.sentinels.top, this.sentinels.bottom].forEach(el => {
-          if (el) {
-            delete el.dataset.isObserved;
-          }
-        });
-      }
-      const 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;
-      const {
-        wrapper
-      } = tree;
-      const tableContainer = wrapper.parentElement;
-      const tableContentWrapper = tableContainer.parentElement;
-      const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
-      if (isCurrentTableSelected) {
-        this.colControlsOffset = 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
 
-      // run after table style changes have been committed
-      setTimeout(() => {
-        syncStickyRowToTable(tree.table);
-      }, 0);
-    });
-    _defineProperty(this, "updateStickyHeaderWidth", () => {
-      // table width might have changed, sync that back to sticky row
-      const tree = this.tree;
-      if (!tree) {
-        return;
-      }
-      syncStickyRowToTable(tree.table);
-    });
-    _defineProperty(this, "shouldHeaderStick", tree => {
-      const {
-        wrapper
-      } = tree;
-      const tableWrapperRect = wrapper.getBoundingClientRect();
-      const editorAreaRect = this.editorScrollableElement.getBoundingClientRect();
-      const stickyHeaderRect = this.contentDOM.getBoundingClientRect();
-      const firstHeaderRow = !this.dom.previousElementSibling;
-      const subsequentRows = !!this.dom.nextElementSibling;
-      const isHeaderValid = firstHeaderRow && subsequentRows;
+  /**
+   * Methods: Nodeview Lifecycle
+   */
+  update(node, ..._args) {
+    // do nothing if nodes were identical
+    if (node === this.node) {
+      return true;
+    }
 
-      // 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;
-      }
+    // see if we're changing into a header row or
+    // changing away from one
+    const newNodeIsHeaderRow = supportedHeaderRow(node);
+    if (this.isHeaderRow !== newNodeIsHeaderRow) {
+      return false; // re-create nodeview
+    }
 
-      // if the sticky header is below the editor area make it non-sticky
-      if (stickyHeaderRect.top > editorAreaRect.top) {
-        return false;
+    // node is different but no need to re-create nodeview
+    this.node = node;
+
+    // don't do anything if we're just a regular tr
+    if (!this.isHeaderRow) {
+      return true;
+    }
+
+    // something changed, sync widths
+    if (this.isStickyHeaderEnabled) {
+      const tbody = this.dom.parentElement;
+      const table = tbody && tbody.parentElement;
+      syncStickyRowToTable(table);
+    }
+    return true;
+  }
+  destroy() {
+    var _this$dropTargetClean;
+    if (this.isStickyHeaderEnabled) {
+      this.unsubscribe();
+      const tree = getTree(this.dom);
+      if (tree) {
+        this.makeRowHeaderNotSticky(tree.table, true);
       }
+      this.emitOff(true);
+    }
 
-      // otherwise make it non-sticky
-      return false;
-    });
+    // If a drop target cleanup method has been set then we should call it.
+    (_this$dropTargetClean = this.dropTargetCleanup) === null || _this$dropTargetClean === void 0 ? void 0 : _this$dropTargetClean.call(this);
+  }
+  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
+     * */
+    const isTableSelection = mutationRecord.type === 'selection' && mutationRecord.target.nodeName === 'TR';
     /**
-     * Manually refire the intersection observers.
-     * Useful when the header may have detached from the table.
+     * 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.
      */
-    _defineProperty(this, "refireIntersectionObservers", () => {
-      if (this.isSticky) {
-        [this.sentinels.top, this.sentinels.bottom].forEach(el => {
-          if (el && this.intersectionObserver) {
-            this.intersectionObserver.unobserve(el);
-            this.intersectionObserver.observe(el);
-          }
-        });
-      }
-    });
-    _defineProperty(this, "makeHeaderRowSticky", (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;
-      }
-      const {
-        table,
-        wrapper
-      } = tree;
+    const isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
+    if (isTableSelection || isNodeInsertion) {
+      return false;
+    }
+    return true;
+  }
 
-      // ED-16035 Make sure sticky header is only applied to first row
-      const tbody = this.dom.parentElement;
-      const isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(this.dom);
-      if (!isFirstHeader) {
-        return;
-      }
-      const currentTableTop = this.getCurrentTableTop(tree);
-      if (!scrollTop) {
-        scrollTop = getTop(this.editorScrollableElement);
-      }
-      const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
-      if (!this.isSticky) {
-        var _this$editorScrollabl;
-        syncStickyRowToTable(table);
-        this.dom.classList.add('sticky');
-        table.classList.add(ClassName.TABLE_STICKY);
-        this.isSticky = true;
+  /**
+   * Methods
+   */
 
-        /**
-         * 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 ? void 0 : _this$editorScrollabl.addEventListener('scrollend', this.refireIntersectionObservers, {
-          passive: true,
-          once: true
+  addDropTarget(element) {
+    const pos = this.getPos();
+    if (!Number.isFinite(pos)) {
+      return;
+    }
+    if (this.dropTargetCleanup) {
+      this.dropTargetCleanup();
+    }
+    const resolvedPos = this.view.state.doc.resolve(pos);
+    const targetIndex = resolvedPos.index();
+    const localId = resolvedPos.parent.attrs.localId;
+    this.dropTargetCleanup = dropTargetForElements({
+      element: element,
+      canDrop({
+        source
+      }) {
+        var _data$indexes, _data$indexes2;
+        const 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({
+        input,
+        element
+      }) {
+        const data = {
+          localId,
+          type: 'table-row',
+          targetIndex
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['top', 'bottom']
         });
-        const fastScrollThresholdMs = 500;
-        setTimeout(() => {
-          this.refireIntersectionObservers();
-        }, fastScrollThresholdMs);
       }
-      this.dom.style.top = `${domTop}px`;
-      updateTableMargin(table);
-      this.dom.scrollLeft = wrapper.scrollLeft;
-      this.emitOn(domTop, this.colControlsOffset);
     });
-    _defineProperty(this, "makeRowHeaderNotSticky", (table, isEditorDestroyed = 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", (inverse = false) => {
-      const focusValue = inverse ? !this.focused : this.focused;
-      return focusValue ? 0 : tableControlsSpacing;
-    });
-    _defineProperty(this, "getWrapperRefTop", wrapper => Math.round(getTop(wrapper)) + this.getWrapperoffset());
-    // TODO: rename!
-    _defineProperty(this, "getScrolledTableTop", wrapper => this.getWrapperRefTop(wrapper) - this.topPosEditorElement);
-    _defineProperty(this, "getCurrentTableTop", tree => this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight);
-    /* emit external events */
-    _defineProperty(this, "padding", 0);
-    _defineProperty(this, "top", 0);
-    _defineProperty(this, "emitOn", (top, padding) => {
-      if (top === this.top && padding === this.padding) {
-        return;
-      }
-      this.top = top;
-      this.padding = padding;
-      updateStickyState({
-        pos: this.getPos(),
-        top,
-        sticky: true,
-        padding
-      })(this.view.state, this.view.dispatch, this.view);
-    });
-    _defineProperty(this, "emitOff", isEditorDestroyed => {
-      if (this.top === 0 && this.padding === 0) {
-        return;
-      }
-      this.top = 0;
-      this.padding = 0;
-      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;
-    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();
-    }
   }
   subscribe() {
     this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
@@ -271,8 +192,8 @@ export class TableRowNodeView {
       this.initObservers();
       this.topPosEditorElement = getTop(this.editorScrollableElement);
     }
-    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
-    this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
+    this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth.bind(this));
+    this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState.bind(this));
     this.listening = true;
     this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
       passive: true
@@ -321,9 +242,9 @@ export class TableRowNodeView {
       this.resizeObserver.observe(this.editorScrollableElement);
     }
     window.requestAnimationFrame(() => {
-      var _this$tree;
+      var _getTree;
       // we expect tree to be defined after animation frame
-      const tableContainer = (_this$tree = this.tree) === null || _this$tree === void 0 ? void 0 : _this$tree.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
+      const tableContainer = (_getTree = getTree(this.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(`.${TableCssClassName.NODEVIEW_WRAPPER}`);
       if (tableContainer) {
         this.sentinels.top = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_TOP).item(0);
         this.sentinels.bottom = tableContainer.getElementsByClassName(ClassName.TABLE_STICKY_SENTINEL_BOTTOM).item(0);
@@ -342,17 +263,18 @@ export class TableRowNodeView {
   // to allocate for new header height
   createResizeObserver() {
     this.resizeObserver = new ResizeObserver(entries => {
-      if (!this.tree) {
+      const tree = getTree(this.dom);
+      if (!tree) {
         return;
       }
       const {
         table
-      } = this.tree;
+      } = tree;
       entries.forEach(entry => {
-        var _this$editorScrollabl2;
+        var _this$editorScrollabl;
         // On resize of the parent scroll element we need to adjust the width
         // of the sticky header
-        if (entry.target.className === ((_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : _this$editorScrollabl2.className)) {
+        if (entry.target.className === ((_this$editorScrollabl = this.editorScrollableElement) === null || _this$editorScrollabl === void 0 ? void 0 : _this$editorScrollabl.className)) {
           this.updateStickyHeaderWidth();
         } else {
           const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;
@@ -370,12 +292,13 @@ export class TableRowNodeView {
   }
   createIntersectionObserver() {
     this.intersectionObserver = new IntersectionObserver((entries, _) => {
-      if (!this.tree) {
+      const tree = getTree(this.dom);
+      if (!tree) {
         return;
       }
       const {
         table
-      } = this.tree;
+      } = tree;
       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.
@@ -394,7 +317,7 @@ export class TableRowNodeView {
           const 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;
-            this.tree && this.makeHeaderRowSticky(this.tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
+            tree && this.makeHeaderRowSticky(tree, (_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.top);
             this.lastStickyTimestamp = Date.now();
           } else {
             table && this.makeRowHeaderNotSticky(table);
@@ -414,7 +337,7 @@ export class TableRowNodeView {
             }
           } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
             var _entry$rootBounds5;
-            this.tree && this.makeHeaderRowSticky(this.tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
+            tree && this.makeHeaderRowSticky(tree, entry === null || entry === void 0 ? void 0 : (_entry$rootBounds5 = entry.rootBounds) === null || _entry$rootBounds5 === void 0 ? void 0 : _entry$rootBounds5.top);
             this.lastStickyTimestamp = Date.now();
           }
         }
@@ -424,65 +347,186 @@ export class TableRowNodeView {
       root: this.editorScrollableElement
     });
   }
+  /* receive external events */
 
-  /* paint/update loop */
+  onTablePluginState(state) {
+    const tableRef = state.tableRef;
+    const tree = getTree(this.dom);
+    if (!tree) {
+      return;
+    }
 
-  /* nodeview lifecycle */
-  update(node, ..._args) {
-    // do nothing if nodes were identical
-    if (node === this.node) {
-      return true;
+    // when header rows are toggled off - mark sentinels as unobserved
+    if (!state.isHeaderRowEnabled) {
+      [this.sentinels.top, this.sentinels.bottom].forEach(el => {
+        if (el) {
+          delete el.dataset.isObserved;
+        }
+      });
     }
+    const isCurrentTableSelected = tableRef === tree.table;
 
-    // see if we're changing into a header row or
-    // changing away from one
-    const newNodeIsHeaderRow = supportedHeaderRow(node);
-    if (this.isHeaderRow !== newNodeIsHeaderRow) {
-      return false; // re-create nodeview
+    // 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;
+    const {
+      wrapper
+    } = tree;
+    const tableContainer = wrapper.parentElement;
+    const tableContentWrapper = tableContainer.parentElement;
+    const layoutContainer = tableContentWrapper && tableContentWrapper.parentElement;
+    if (isCurrentTableSelected) {
+      this.colControlsOffset = 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');
+      }
     }
 
-    // node is different but no need to re-create nodeview
-    this.node = node;
+    // run after table style changes have been committed
+    setTimeout(() => {
+      syncStickyRowToTable(tree.table);
+    }, 0);
+  }
+  updateStickyHeaderWidth() {
+    // table width might have changed, sync that back to sticky row
+    const tree = getTree(this.dom);
+    if (!tree) {
+      return;
+    }
+    syncStickyRowToTable(tree.table);
+  }
 
-    // don't do anything if we're just a regular tr
-    if (!this.isHeaderRow) {
-      return true;
+  /**
+   * Manually refire the intersection observers.
+   * Useful when the header may have detached from the table.
+   */
+  refireIntersectionObservers() {
+    if (this.isSticky) {
+      [this.sentinels.top, this.sentinels.bottom].forEach(el => {
+        if (el && this.intersectionObserver) {
+          this.intersectionObserver.unobserve(el);
+          this.intersectionObserver.observe(el);
+        }
+      });
     }
+  }
+  makeHeaderRowSticky(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;
+    }
+    const {
+      table,
+      wrapper
+    } = tree;
 
-    // something changed, sync widths
+    // ED-16035 Make sure sticky header is only applied to first row
     const tbody = this.dom.parentElement;
-    const table = tbody && tbody.parentElement;
-    syncStickyRowToTable(table);
-    return true;
+    const isFirstHeader = tbody === null || tbody === void 0 ? void 0 : (_tbody$firstChild = tbody.firstChild) === null || _tbody$firstChild === void 0 ? void 0 : _tbody$firstChild.isEqualNode(this.dom);
+    if (!isFirstHeader) {
+      return;
+    }
+    const currentTableTop = this.getCurrentTableTop(tree);
+    if (!scrollTop) {
+      scrollTop = getTop(this.editorScrollableElement);
+    }
+    const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
+    if (!this.isSticky) {
+      var _this$editorScrollabl2;
+      syncStickyRowToTable(table);
+      this.dom.classList.add('sticky');
+      table.classList.add(ClassName.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$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : _this$editorScrollabl2.addEventListener('scrollend', this.refireIntersectionObservers, {
+        passive: true,
+        once: true
+      });
+      const fastScrollThresholdMs = 500;
+      setTimeout(() => {
+        this.refireIntersectionObservers();
+      }, fastScrollThresholdMs);
+    }
+    this.dom.style.top = `${domTop}px`;
+    updateTableMargin(table);
+    this.dom.scrollLeft = wrapper.scrollLeft;
+    this.emitOn(domTop, this.colControlsOffset);
   }
-  destroy() {
-    this.unsubscribe();
-    if (this.tree) {
-      this.makeRowHeaderNotSticky(this.tree.table, true);
+  makeRowHeaderNotSticky(table, isEditorDestroyed = false) {
+    if (!this.isSticky || !table || !this.dom) {
+      return;
     }
-    this.emitOff(true);
+    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);
   }
-  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
-     * */
-    const 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.
-     */
-    const isNodeInsertion = mutationRecord.type === 'childList' && mutationRecord.target.nodeName === 'TR' && mutationRecord.addedNodes.length;
-    if (isTableSelection || isNodeInsertion) {
-      return false;
+  getWrapperoffset(inverse = false) {
+    const focusValue = inverse ? !this.focused : this.focused;
+    return focusValue ? 0 : tableControlsSpacing;
+  }
+  getWrapperRefTop(wrapper) {
+    return Math.round(getTop(wrapper)) + this.getWrapperoffset();
+  }
+
+  // TODO: rename!
+  getScrolledTableTop(wrapper) {
+    return this.getWrapperRefTop(wrapper) - this.topPosEditorElement;
+  }
+  getCurrentTableTop(tree) {
+    return this.getScrolledTableTop(tree.wrapper) + tree.table.clientHeight;
+  }
+
+  /* emit external events */
+
+  emitOn(top, padding) {
+    if (top === this.top && padding === this.padding) {
+      return;
+    }
+    this.top = top;
+    this.padding = padding;
+    const pos = this.getPos();
+    if (Number.isFinite(pos)) {
+      updateStickyState({
+        pos,
+        top,
+        sticky: true,
+        padding
+      })(this.view.state, this.view.dispatch, this.view);
+    }
+  }
+  emitOff(isEditorDestroyed) {
+    if (this.top === 0 && this.padding === 0) {
+      return;
+    }
+    this.top = 0;
+    this.padding = 0;
+    const pos = this.getPos();
+    if (!isEditorDestroyed && Number.isFinite(pos)) {
+      updateStickyState({
+        pos,
+        sticky: false,
+        top: this.top,
+        padding: this.padding
+      })(this.view.state, this.view.dispatch, this.view);
     }
-    return true;
   }
 }