@atlaskit/editor-plugin-table 5.3.39 → 5.4.0

package/dist/es2019/plugins/table/nodeviews/TableRow.js

@@ -3,6 +3,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -12,7 +13,6 @@ import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stick
 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;
 
@@ -26,6 +26,18 @@ export default class TableRow extends TableNodeView {
     _defineProperty(this, "focused", false);
     _defineProperty(this, "topPosEditorElement", 0);
     _defineProperty(this, "sentinels", {});
+    _defineProperty(this, "sentinelData", {
+      top: {
+        isIntersecting: false,
+        boundingClientRect: null,
+        rootBounds: null
+      },
+      bottom: {
+        isIntersecting: false,
+        boundingClientRect: null,
+        rootBounds: null
+      }
+    });
     _defineProperty(this, "listening", false);
     _defineProperty(this, "padding", 0);
     _defineProperty(this, "top", 0);
@@ -232,62 +244,163 @@ export default class TableRow extends TableNodeView {
     });
   }
   createIntersectionObserver() {
-    this.intersectionObserver = new IntersectionObserver((entries, _) => {
-      const tree = getTree(this.dom);
-      if (!tree) {
-        return;
-      }
-      const {
-        table
-      } = 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.
-        return;
-      }
-      entries.forEach(entry => {
-        var _entry$rootBounds;
-        const target = entry.target;
-
-        // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
-        if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+    if (getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
+      this.intersectionObserver = new IntersectionObserver((entries, _) => {
+        var _this$editorScrollabl2, _this$editorScrollabl3;
+        // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
+        // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
+        // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
+        const rootBounds = (_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : (_this$editorScrollabl3 = _this$editorScrollabl2.getBoundingClientRect) === null || _this$editorScrollabl3 === void 0 ? void 0 : _this$editorScrollabl3.call(_this$editorScrollabl2);
+        entries.forEach(entry => {
+          const {
+            target,
+            isIntersecting,
+            boundingClientRect
+          } = entry;
+          // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
+          const targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
+          // Cache the latest sentinel information
+          this.sentinelData[targetKey] = {
+            isIntersecting,
+            boundingClientRect,
+            rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
+          };
+          // Keep the other sentinels rootBounds in sync with this latest one
+          this.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+        });
+        this.refreshStickyState();
+      }, {
+        threshold: 0,
+        root: this.editorScrollableElement
+      });
+    } else {
+      this.intersectionObserver = new IntersectionObserver((entries, _) => {
+        const tree = getTree(this.dom);
+        if (!tree) {
           return;
         }
-        if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
-          var _entry$rootBounds2;
-          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;
-            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);
-          }
+        const {
+          table
+        } = 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.
+          return;
         }
-        if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-          var _entry$rootBounds4;
-          const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
-          if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-            // Not a perfect solution, but need to this code specific for FireFox ED-19177
-            if (browser.gecko) {
-              if (this.lastStickyTimestamp && Date.now() - this.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+        entries.forEach(entry => {
+          var _entry$rootBounds;
+          const target = entry.target;
+
+          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+          if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+            return;
+          }
+          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
+            var _entry$rootBounds2;
+            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;
+              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);
+            }
+          }
+          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
+            var _entry$rootBounds4;
+            const sentinelIsAboveScrollArea = entry.boundingClientRect.top - this.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
+            if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
+              // Not a perfect solution, but need to this code specific for FireFox ED-19177
+              if (browser.gecko) {
+                if (this.lastStickyTimestamp && Date.now() - this.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                  this.makeRowHeaderNotSticky(table);
+                }
+              } else {
                 this.makeRowHeaderNotSticky(table);
               }
-            } else {
-              this.makeRowHeaderNotSticky(table);
+            } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
+              var _entry$rootBounds5;
+              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();
             }
-          } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-            var _entry$rootBounds5;
-            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();
           }
-        }
-        return;
+          return;
+        });
+      }, {
+        root: this.editorScrollableElement
       });
-    }, {
-      root: this.editorScrollableElement
-    });
+    }
   }
+  refreshStickyState() {
+    const tree = getTree(this.dom);
+    if (!tree) {
+      return;
+    }
+    const {
+      table
+    } = tree;
+    const shouldStick = this.isHeaderSticky();
+    if (this.isSticky !== shouldStick) {
+      if (shouldStick) {
+        var _this$sentinelData$to;
+        // The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
+        const rootRect = (_this$sentinelData$to = this.sentinelData.top.rootBounds) !== null && _this$sentinelData$to !== void 0 ? _this$sentinelData$to : this.sentinelData.bottom.rootBounds;
+        this.makeHeaderRowSticky(tree, rootRect === null || rootRect === void 0 ? void 0 : rootRect.top);
+      } else {
+        this.makeRowHeaderNotSticky(table);
+      }
+    }
+  }
+  isHeaderSticky() {
+    var _sentinelTop$rootBoun;
+    /*
+    # Overview
+      I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
+      The format of the states are;    {top|bottom}:{in|above|below}
+      ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
+       For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
+      above and out of the viewport
+       This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
+     # States
+      top:in / bottom:in - NOT sticky
+      top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
+      top:in / bottom:below - NOT sticky
+      top:above / bottom:in - STICKY
+      top:above / bottom:above - NOT sticky
+      top:above / bottom:below - STICKY
+      top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
+      top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
+      top:below / bottom:below - NOT sticky
+     # Summary
+      The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
+      is in or below it.
+    */
+
+    const {
+      top: sentinelTop,
+      bottom: sentinelBottom
+    } = this.sentinelData;
+    // The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
+    const rootBounds = (_sentinelTop$rootBoun = sentinelTop.rootBounds) !== null && _sentinelTop$rootBoun !== void 0 ? _sentinelTop$rootBoun : sentinelBottom.rootBounds;
+    if (!rootBounds || !sentinelTop.boundingClientRect || !sentinelBottom.boundingClientRect) {
+      return false;
+    }
+
+    // Normalize the sentinels to y points
+    // Since the sentinels are actually rects 1px high we want make sure we normalise the inner most values closest to the table.
+    const sentinelTopY = sentinelTop.boundingClientRect.bottom;
+    const sentinelBottomY = sentinelBottom.boundingClientRect.top;
+
+    // If header row height is more than 50% of viewport height don't do this
+    const isRowHeaderTooLarge = this.stickyRowHeight && this.stickyRowHeight > window.innerHeight * 0.5;
+    const isTopSentinelAboveScrollArea = !sentinelTop.isIntersecting && sentinelTopY <= rootBounds.top;
+    const isBottomSentinelInOrBelowScrollArea = sentinelBottom.isIntersecting || sentinelBottomY > rootBounds.bottom;
+
+    // This makes sure that the top sentinel is actually above the bottom sentinel, and that they havn't inverted.
+    const isTopSentinelAboveBottomSentinel = sentinelTopY < sentinelBottomY;
+    return isTopSentinelAboveScrollArea && isBottomSentinelInOrBelowScrollArea && isTopSentinelAboveBottomSentinel && !isRowHeaderTooLarge;
+  }
+
   /* receive external events */
 
   onTablePluginState(state) {
@@ -383,7 +496,7 @@ export default class TableRow extends TableNodeView {
     }
     const domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
     if (!this.isSticky) {
-      var _this$editorScrollabl2;
+      var _this$editorScrollabl4;
       syncStickyRowToTable(table);
       this.dom.classList.add('sticky');
       table.classList.add(ClassName.TABLE_STICKY);
@@ -394,7 +507,7 @@ export default class TableRow extends TableNodeView {
        * 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, {
+      (_this$editorScrollabl4 = this.editorScrollableElement) === null || _this$editorScrollabl4 === void 0 ? void 0 : _this$editorScrollabl4.addEventListener('scrollend', this.refireIntersectionObservers, {
         passive: true,
         once: true
       });

package/dist/es2019/plugins/table/ui/TableFloatingControls/CornerControls/DragCornerControls.js

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
-import { clearHoverSelection, hoverTable } from '../../../commands';
+import { clearHoverSelection } from '../../../commands';
 import { TableCssClassName as ClassName } from '../../../types';
 const DragCornerControlsComponent = ({
   editorView,
@@ -19,13 +19,6 @@ const DragCornerControlsComponent = ({
     } = editorView;
     dispatch(selectTable(state.tr).setMeta('addToHistory', false));
   };
-  const handleMouseOver = () => {
-    const {
-      state,
-      dispatch
-    } = editorView;
-    hoverTable()(state, dispatch);
-  };
   const handleMouseOut = () => {
     const {
       state,
@@ -51,7 +44,6 @@ const DragCornerControlsComponent = ({
     "aria-label": formatMessage(messages.cornerControl),
     type: "button",
     onClick: handleOnClick,
-    onMouseOver: handleMouseOver,
     onMouseOut: handleMouseOut,
     contentEditable: false
   }, /*#__PURE__*/React.createElement("div", {

package/dist/es2019/plugins/table/ui/TableFloatingControls/RowDropTarget/index.js

@@ -27,6 +27,7 @@ const RowDropTarget = ({
           !!((_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(index)) === -1
         );
       },
+      getIsSticky: () => true,
       getData({
         input,
         element

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -1,5 +1,6 @@
 import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { browser } from '@atlaskit/editor-common/utils';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -158,6 +159,20 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
     `;
   }
 };
+const tableStickyHeaderFirefoxFixStyle = props => {
+  /*
+    This is MAGIC!
+    This fixes a bug which occurs in firefox when the first row becomes sticky.
+    see https://product-fabric.atlassian.net/browse/ED-19177
+  */
+  if (browser.gecko && getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
+    return css`
+      .${ClassName.TABLE_STICKY} > tbody::before {
+        content: '';
+      }
+    `;
+  }
+};
 const tableRowControlStyles = () => {
   return getBooleanFF('platform.editor.table.drag-and-drop') ? css`
         .${ClassName.ROW_CONTROLS_WRAPPER} {
@@ -311,6 +326,8 @@ export const tableStyles = props => {
 
     ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
 
+    ${tableStickyHeaderFirefoxFixStyle(props)}
+
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
       .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -165,16 +165,15 @@ export const dragInsertButtonWrapper = props => css`
 `;
 export const dragCornerControlButton = props => css`
   .${ClassName.DRAG_CORNER_BUTTON} {
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-end;
+    align-items: flex-end;
     position: absolute;
-    top: ${"var(--ds-space-negative-075, -6px)"};
-    left: ${"var(--ds-space-075, 6px)"};
-    background-color: ${"var(--ds-surface, #FFF)"};
-    border-radius: 50%;
+    top: ${"var(--ds-space-negative-250, -20px)"};
+    left: ${"var(--ds-space-negative-100, -8px)"};
+    background-color: transparent;
     border: none;
     padding: 0;
     outline: none;
@@ -182,24 +181,35 @@ export const dragCornerControlButton = props => css`
 
     &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
       background-color: ${"var(--ds-border-selected, #0C66E4)"};
-      border-color: ${"var(--ds-border-selected, #0C66E4)"};
+      width: 10px;
+      height: 10px;
+      border-width: 2px;
+      border-radius: 4px;
+      top: ${"var(--ds-space-075, 6px)"};
+      left: ${"var(--ds-space-075, 6px)"};
     }
 
     &:hover {
       cursor: pointer;
 
       .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-        border-color: ${"var(--ds-border-selected, #0C66E4)"};
+        width: 10px;
+        height: 10px;
+        border-width: 2px;
+        border-radius: 4px;
+        top: ${"var(--ds-space-075, 6px)"};
+        left: ${"var(--ds-space-075, 6px)"};
       }
     }
   }
 
   .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-    border: 1px solid
-      ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
-    border-radius: 50%;
-    width: 6px;
-    height: 6px;
+    border: 1px solid ${"var(--ds-border-inverse, #FFF)"};
+    background-color: ${"var(--ds-background-accent-gray-subtler, #DCDFE4)"};
+    border-radius: 2px;
+    width: 5px;
+    height: 5px;
+    position: relative;
   }
 `;
 export const insertColumnButtonWrapper = props => css`

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

@@ -11,6 +11,7 @@ import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -20,7 +21,6 @@ import { STICKY_HEADER_TOGGLE_TOLERANCE_MS, stickyHeaderBorderBottomWidth, stick
 import { getTop, getTree } from '../utils/dom';
 import { supportedHeaderRow } from '../utils/nodes';
 import TableNodeView from './TableNodeViewBase';
-
 // limit scroll event calls
 var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 
@@ -38,6 +38,18 @@ var TableRow = /*#__PURE__*/function (_ref) {
     _defineProperty(_assertThisInitialized(_this), "focused", false);
     _defineProperty(_assertThisInitialized(_this), "topPosEditorElement", 0);
     _defineProperty(_assertThisInitialized(_this), "sentinels", {});
+    _defineProperty(_assertThisInitialized(_this), "sentinelData", {
+      top: {
+        isIntersecting: false,
+        boundingClientRect: null,
+        rootBounds: null
+      },
+      bottom: {
+        isIntersecting: false,
+        boundingClientRect: null,
+        rootBounds: null
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "listening", false);
     _defineProperty(_assertThisInitialized(_this), "padding", 0);
     _defineProperty(_assertThisInitialized(_this), "top", 0);
@@ -261,60 +273,160 @@ var TableRow = /*#__PURE__*/function (_ref) {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
       var _this4 = this;
-      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var tree = getTree(_this4.dom);
-        if (!tree) {
-          return;
-        }
-        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.
-          return;
-        }
-        entries.forEach(function (entry) {
-          var _entry$rootBounds;
-          var target = entry.target;
-
-          // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
-          if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+      if (getBooleanFF('platform.editor.table.alternative-sticky-header-logic')) {
+        this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+          var _this4$editorScrollab, _this4$editorScrollab2;
+          // IMPORTANT: please try and avoid using entry.rootBounds it's terribly inconsistent. For example; sometimes it may return
+          // 0 height. In safari it will multiply all values by the window scale factor, however chrome & firfox won't.
+          // This is why i just get the scroll view bounding rect here and use it, and fallback to the entry.rootBounds if needed.
+          var rootBounds = (_this4$editorScrollab = _this4.editorScrollableElement) === null || _this4$editorScrollab === void 0 || (_this4$editorScrollab2 = _this4$editorScrollab.getBoundingClientRect) === null || _this4$editorScrollab2 === void 0 ? void 0 : _this4$editorScrollab2.call(_this4$editorScrollab);
+          entries.forEach(function (entry) {
+            var target = entry.target,
+              isIntersecting = entry.isIntersecting,
+              boundingClientRect = entry.boundingClientRect;
+            // This observer only every looks at the top/bottom sentinels, we can assume if it's not one then it's the other.
+            var targetKey = target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP) ? 'top' : 'bottom';
+            // Cache the latest sentinel information
+            _this4.sentinelData[targetKey] = {
+              isIntersecting: isIntersecting,
+              boundingClientRect: boundingClientRect,
+              rootBounds: rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds
+            };
+            // Keep the other sentinels rootBounds in sync with this latest one
+            _this4.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          });
+          _this4.refreshStickyState();
+        }, {
+          threshold: 0,
+          root: this.editorScrollableElement
+        });
+      } else {
+        this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+          var tree = getTree(_this4.dom);
+          if (!tree) {
             return;
           }
-          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
-            var _entry$rootBounds2;
-            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;
-              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);
-            }
+          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.
+            return;
           }
-          if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
-            var _entry$rootBounds4;
-            var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
-            if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
-              // Not a perfect solution, but need to this code specific for FireFox ED-19177
-              if (browser.gecko) {
-                if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+          entries.forEach(function (entry) {
+            var _entry$rootBounds;
+            var target = entry.target;
+
+            // if the rootBounds has 0 height, e.g. confluence preview mode, we do nothing.
+            if (((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.height) === 0) {
+              return;
+            }
+            if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_TOP)) {
+              var _entry$rootBounds2;
+              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;
+                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);
+              }
+            }
+            if (target.classList.contains(ClassName.TABLE_STICKY_SENTINEL_BOTTOM)) {
+              var _entry$rootBounds4;
+              var sentinelIsAboveScrollArea = entry.boundingClientRect.top - _this4.dom.offsetHeight < (((_entry$rootBounds4 = entry.rootBounds) === null || _entry$rootBounds4 === void 0 ? void 0 : _entry$rootBounds4.top) || 0);
+              if (table && !entry.isIntersecting && sentinelIsAboveScrollArea) {
+                // Not a perfect solution, but need to this code specific for FireFox ED-19177
+                if (browser.gecko) {
+                  if (_this4.lastStickyTimestamp && Date.now() - _this4.lastStickyTimestamp > STICKY_HEADER_TOGGLE_TOLERANCE_MS) {
+                    _this4.makeRowHeaderNotSticky(table);
+                  }
+                } else {
                   _this4.makeRowHeaderNotSticky(table);
                 }
-              } else {
-                _this4.makeRowHeaderNotSticky(table);
+              } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
+                var _entry$rootBounds5;
+                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();
               }
-            } else if (entry.isIntersecting && sentinelIsAboveScrollArea) {
-              var _entry$rootBounds5;
-              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();
             }
-          }
-          return;
+            return;
+          });
+        }, {
+          root: this.editorScrollableElement
         });
-      }, {
-        root: this.editorScrollableElement
-      });
+      }
+    }
+  }, {
+    key: "refreshStickyState",
+    value: function refreshStickyState() {
+      var tree = getTree(this.dom);
+      if (!tree) {
+        return;
+      }
+      var table = tree.table;
+      var shouldStick = this.isHeaderSticky();
+      if (this.isSticky !== shouldStick) {
+        if (shouldStick) {
+          var _this$sentinelData$to;
+          // The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
+          var rootRect = (_this$sentinelData$to = this.sentinelData.top.rootBounds) !== null && _this$sentinelData$to !== void 0 ? _this$sentinelData$to : this.sentinelData.bottom.rootBounds;
+          this.makeHeaderRowSticky(tree, rootRect === null || rootRect === void 0 ? void 0 : rootRect.top);
+        } else {
+          this.makeRowHeaderNotSticky(table);
+        }
+      }
     }
+  }, {
+    key: "isHeaderSticky",
+    value: function isHeaderSticky() {
+      var _sentinelTop$rootBoun;
+      /*
+      # Overview
+        I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
+        The format of the states are;    {top|bottom}:{in|above|below}
+        ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
+         For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
+        above and out of the viewport
+         This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
+       # States
+        top:in / bottom:in - NOT sticky
+        top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:in / bottom:below - NOT sticky
+        top:above / bottom:in - STICKY
+        top:above / bottom:above - NOT sticky
+        top:above / bottom:below - STICKY
+        top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
+        top:below / bottom:below - NOT sticky
+       # Summary
+        The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
+        is in or below it.
+      */
+
+      var _this$sentinelData = this.sentinelData,
+        sentinelTop = _this$sentinelData.top,
+        sentinelBottom = _this$sentinelData.bottom;
+      // The rootRect is kept in sync across sentinels so it doesn't matter which one we use.
+      var rootBounds = (_sentinelTop$rootBoun = sentinelTop.rootBounds) !== null && _sentinelTop$rootBoun !== void 0 ? _sentinelTop$rootBoun : sentinelBottom.rootBounds;
+      if (!rootBounds || !sentinelTop.boundingClientRect || !sentinelBottom.boundingClientRect) {
+        return false;
+      }
+
+      // Normalize the sentinels to y points
+      // Since the sentinels are actually rects 1px high we want make sure we normalise the inner most values closest to the table.
+      var sentinelTopY = sentinelTop.boundingClientRect.bottom;
+      var sentinelBottomY = sentinelBottom.boundingClientRect.top;
+
+      // If header row height is more than 50% of viewport height don't do this
+      var isRowHeaderTooLarge = this.stickyRowHeight && this.stickyRowHeight > window.innerHeight * 0.5;
+      var isTopSentinelAboveScrollArea = !sentinelTop.isIntersecting && sentinelTopY <= rootBounds.top;
+      var isBottomSentinelInOrBelowScrollArea = sentinelBottom.isIntersecting || sentinelBottomY > rootBounds.bottom;
+
+      // This makes sure that the top sentinel is actually above the bottom sentinel, and that they havn't inverted.
+      var isTopSentinelAboveBottomSentinel = sentinelTopY < sentinelBottomY;
+      return isTopSentinelAboveScrollArea && isBottomSentinelInOrBelowScrollArea && isTopSentinelAboveBottomSentinel && !isRowHeaderTooLarge;
+    }
+
     /* receive external events */
   }, {
     key: "onTablePluginState",