@atlaskit/editor-plugin-table 3.1.3 → 3.2.1

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

@@ -0,0 +1,112 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { TableCssClassName as ClassName } from '../types';
+export class TableStickyScrollbar {
+  constructor(wrapper, view) {
+    _defineProperty(this, "sentinels", {});
+    _defineProperty(this, "handleScroll", event => {
+      if (!this.stickyScrollbarContainerElement || !this.wrapper || event.target !== this.stickyScrollbarContainerElement) {
+        return;
+      }
+      this.wrapper.scrollLeft = this.stickyScrollbarContainerElement.scrollLeft;
+    });
+    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
+    this.wrapper = wrapper;
+    this.view = view;
+    this.init();
+  }
+  dispose() {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
+      this.handleScrollDebounced.cancel();
+    }
+    this.deleteIntesactionObserver();
+  }
+  scrollLeft(left) {
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.scrollLeft = left;
+    }
+  }
+  init() {
+    var _this$wrapper$parentE;
+    if (!this.wrapper) {
+      return;
+    }
+    this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(`.${ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}`);
+    if (this.stickyScrollbarContainerElement) {
+      this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScrollDebounced, {
+        passive: true
+      });
+    }
+    this.createIntersectionObserver();
+  }
+  createIntersectionObserver() {
+    var _this$wrapper, _this$wrapper$parentE2, _this$wrapper$parentE3, _this$wrapper2, _this$wrapper2$parent, _this$wrapper2$parent2;
+    this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window.document;
+    if (!this.editorScrollableElement || !this.wrapper) {
+      return;
+    }
+    this.intersectionObserver = new IntersectionObserver((entries, _) => {
+      if (!this.stickyScrollbarContainerElement) {
+        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) {
+          return;
+        }
+        if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
+          this.sentenialBottomCallback(entry);
+        }
+        if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+          this.sentenialTopCallback(entry);
+        }
+      });
+    }, {
+      root: this.editorScrollableElement
+    });
+    this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE2 = _this$wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper$parentE2.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.item(0);
+    this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
+    [this.sentinels.bottom, this.sentinels.top].forEach(el => this.intersectionObserver.observe(el));
+  }
+  deleteIntesactionObserver() {
+    if (this.intersectionObserver) {
+      if (this.sentinels.bottom) {
+        this.intersectionObserver.unobserve(this.sentinels.bottom);
+      }
+      this.intersectionObserver.disconnect();
+    }
+  }
+  sentenialBottomCallback(entry) {
+    var _entry$rootBounds2;
+    const sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+    this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
+    this.toggle();
+  }
+  sentenialTopCallback(entry) {
+    var _entry$rootBounds3;
+    const sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+    this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
+    this.toggle();
+  }
+  toggle() {
+    if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
+      this.show();
+    } else {
+      this.hide();
+    }
+  }
+  hide() {
+    if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
+      this.stickyScrollbarContainerElement.style.display = 'none';
+    }
+  }
+  show() {
+    if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
+      this.stickyScrollbarContainerElement.style.display = 'block';
+    }
+  }
+}

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

@@ -137,10 +137,24 @@ export class TableRowNodeView {
       // otherwise make it non-sticky
       return false;
     });
+    /**
+     * Manually refire the intersection observers.
+     * Useful when the header may have detached from the table.
+     */
+    _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.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
+      if (this.isSticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
       const {
@@ -160,10 +174,25 @@ export class TableRowNodeView {
       }
       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;
+
+        /**
+         * 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
+        });
+        const fastScrollThresholdMs = 500;
+        setTimeout(() => {
+          this.refireIntersectionObservers();
+        }, fastScrollThresholdMs);
       }
       this.dom.style.top = `${domTop}px`;
       updateTableMargin(table);
@@ -245,8 +274,12 @@ export class TableRowNodeView {
     this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
     this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
     this.listening = true;
-    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
-    this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this));
+    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
+      passive: true
+    });
+    this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this), {
+      passive: true
+    });
   }
   unsubscribe() {
     if (!this.listening) {
@@ -255,7 +288,7 @@ export class TableRowNodeView {
     if (this.intersectionObserver) {
       this.intersectionObserver.disconnect();
       // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
-      // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+      // Otherwise when newer intersection observer is created it will not observe because it thinks its already being observed
       [this.sentinels.top, this.sentinels.bottom].forEach(el => {
         if (el) {
           delete el.dataset.isObserved;
@@ -316,10 +349,10 @@ export class TableRowNodeView {
         table
       } = this.tree;
       entries.forEach(entry => {
-        var _this$editorScrollabl;
+        var _this$editorScrollabl2;
         // On resize of the parent scroll element we need to adjust the width
         // of the sticky header
-        if (entry.target.className === ((_this$editorScrollabl = this.editorScrollableElement) === null || _this$editorScrollabl === void 0 ? void 0 : _this$editorScrollabl.className)) {
+        if (entry.target.className === ((_this$editorScrollabl2 = this.editorScrollableElement) === null || _this$editorScrollabl2 === void 0 ? void 0 : _this$editorScrollabl2.className)) {
           this.updateStickyHeaderWidth();
         } else {
           const newHeight = entry.contentRect ? entry.contentRect.height : entry.target.offsetHeight;

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

@@ -12,6 +12,7 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -337,6 +338,11 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       getDomRef,
       nodeType,
       offset: [0, 18],
+      absoluteOffset: getBooleanFF('platform.editor.table-sticky-scrollbar') ? {
+        top: -6
+      } : {
+        top: 0
+      },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
       items: [menu, separator(menu.hidden), ...cellItems, ...colorPicker, {

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

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
-import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, relativeFontSizeToBase16, SelectionStyle } from '@atlaskit/editor-shared-styles';
+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';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
@@ -16,6 +16,7 @@ const cornerControlHeight = tableToolbarSize + 1;
   its center should be aligned with the edge
 */
 export const insertColumnButtonOffset = tableInsertColumnButtonSize / 2;
+export const tableRowHeight = 44;
 const rangeSelectionStyles = `
 .${ClassName.NODEVIEW_WRAPPER}.${akEditorSelectedNodeClassName} table tbody tr {
   th,td {
@@ -48,6 +49,36 @@ const sentinelStyles = `.${ClassName.TABLE_CONTAINER} {
     }
   }
 }`;
+const stickyScrollbarSentinelStyles = `.${ClassName.TABLE_CONTAINER} {
+ > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM},
+ > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    margin-top: -1px;
+    // need this to avoid sentinel being focused via keyboard
+    // this still allows it to be detected by intersection observer
+    visibility: hidden;
+  }
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP} {
+    top: ${columnControlsDecorationHeight + tableRowHeight * 3}px;
+  }
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM} {
+    bottom: ${MAX_BROWSER_SCROLLBAR_HEIGHT}px;
+  }
+}`;
+const stickyScrollbarContainerStyles = `.${ClassName.TABLE_CONTAINER} {
+  > .${ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER} {
+    width: 100%;
+    display: none;
+    overflow-x: auto;
+    position: sticky;
+    bottom: 0;
+  }
+}`;
+const stickyScrollbarStyles = () => {
+  return getBooleanFF('platform.editor.table-sticky-scrollbar') ? `${stickyScrollbarContainerStyles} ${stickyScrollbarSentinelStyles}` : '';
+};
 const shadowSentinelStyles = `
   .${ClassName.TABLE_SHADOW_SENTINEL_LEFT},
   .${ClassName.TABLE_SHADOW_SENTINEL_RIGHT} {
@@ -349,6 +380,7 @@ export const tableStyles = props => {
 
     ${sentinelStyles}
     ${OverflowShadow(props)}
+    ${stickyScrollbarStyles()}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
       height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts

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

@@ -18,7 +18,7 @@ import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-common/utils';
-import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
+import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
@@ -34,6 +34,7 @@ import TableFloatingControls from '../ui/TableFloatingControls';
 import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns } from '../utils';
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
+import { TableStickyScrollbar } from './TableStickyScrollbar';
 var isIE11 = browser.ie_version === 11;
 // When table is inserted via paste, keyboard shortcut or quickInsert,
 // componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
@@ -87,6 +88,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!_this.wrapper || event.target !== _this.wrapper) {
         return;
       }
+      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+        if (_this.stickyScrollbar) {
+          _this.stickyScrollbar.scrollLeft(_this.wrapper.scrollLeft);
+        }
+      }
       if (_this.table) {
         // sync sticky header row to table scroll
         var headers = _this.table.querySelectorAll('tr[data-header-row]');
@@ -297,7 +303,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         eventDispatcher = _this$props7.eventDispatcher,
         options = _this$props7.options;
       if (allowColumnResizing && this.wrapper && !isIE11) {
-        this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
+        this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
+          passive: true
+        });
+        if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+          if (this.table) {
+            this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
+          }
+        }
       }
       if (allowColumnResizing) {
         /**
@@ -329,6 +342,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
+      if (getBooleanFF('platform.editor.table-sticky-scrollbar')) {
+        if (this.stickyScrollbar) {
+          this.stickyScrollbar.dispose();
+        }
+      }
       this.handleScrollDebounced.cancel();
       this.scaleTableDebounced.cancel();
       this.handleTableResizingDebounced.cancel();
@@ -501,6 +519,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
+      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
+        "data-testid": "sticky-scrollbar-sentinel-top"
       }), allowControls && rowControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
@@ -523,7 +544,17 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }), /*#__PURE__*/React.createElement("div", {
+      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
+        style: {
+          height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+          display: 'none'
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth
+        }
+      })), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showAfterShadow),
         className: ClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
@@ -540,6 +571,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
+      }), getBooleanFF('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/React.createElement("div", {
+        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
+        "data-testid": "sticky-scrollbar-sentinel-bottom"
       }));
     }
   }]);

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

@@ -0,0 +1,146 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { TableCssClassName as ClassName } from '../types';
+export var TableStickyScrollbar = /*#__PURE__*/function () {
+  function TableStickyScrollbar(wrapper, view) {
+    var _this = this;
+    _classCallCheck(this, TableStickyScrollbar);
+    _defineProperty(this, "sentinels", {});
+    _defineProperty(this, "handleScroll", function (event) {
+      if (!_this.stickyScrollbarContainerElement || !_this.wrapper || event.target !== _this.stickyScrollbarContainerElement) {
+        return;
+      }
+      _this.wrapper.scrollLeft = _this.stickyScrollbarContainerElement.scrollLeft;
+    });
+    _defineProperty(this, "handleScrollDebounced", rafSchedule(this.handleScroll));
+    this.wrapper = wrapper;
+    this.view = view;
+    this.init();
+  }
+  _createClass(TableStickyScrollbar, [{
+    key: "dispose",
+    value: function dispose() {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.removeEventListener('scroll', this.handleScrollDebounced);
+        this.handleScrollDebounced.cancel();
+      }
+      this.deleteIntesactionObserver();
+    }
+  }, {
+    key: "scrollLeft",
+    value: function scrollLeft(left) {
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.scrollLeft = left;
+      }
+    }
+  }, {
+    key: "init",
+    value: function init() {
+      var _this$wrapper$parentE;
+      if (!this.wrapper) {
+        return;
+      }
+      this.stickyScrollbarContainerElement = (_this$wrapper$parentE = this.wrapper.parentElement) === null || _this$wrapper$parentE === void 0 ? void 0 : _this$wrapper$parentE.querySelector(".".concat(ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER));
+      if (this.stickyScrollbarContainerElement) {
+        this.stickyScrollbarContainerElement.addEventListener('scroll', this.handleScrollDebounced, {
+          passive: true
+        });
+      }
+      this.createIntersectionObserver();
+    }
+  }, {
+    key: "createIntersectionObserver",
+    value: function createIntersectionObserver() {
+      var _this2 = this,
+        _this$wrapper,
+        _this$wrapper$parentE2,
+        _this$wrapper$parentE3,
+        _this$wrapper2,
+        _this$wrapper2$parent,
+        _this$wrapper2$parent2;
+      this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window.document;
+      if (!this.editorScrollableElement || !this.wrapper) {
+        return;
+      }
+      this.intersectionObserver = new IntersectionObserver(function (entries, _) {
+        if (!_this2.stickyScrollbarContainerElement) {
+          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) {
+            return;
+          }
+          if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) {
+            _this2.sentenialBottomCallback(entry);
+          }
+          if (target.classList.contains(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) {
+            _this2.sentenialTopCallback(entry);
+          }
+        });
+      }, {
+        root: this.editorScrollableElement
+      });
+      this.sentinels.bottom = (_this$wrapper = this.wrapper) === null || _this$wrapper === void 0 ? void 0 : (_this$wrapper$parentE2 = _this$wrapper.parentElement) === null || _this$wrapper$parentE2 === void 0 ? void 0 : (_this$wrapper$parentE3 = _this$wrapper$parentE2.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM)) === null || _this$wrapper$parentE3 === void 0 ? void 0 : _this$wrapper$parentE3.item(0);
+      this.sentinels.top = (_this$wrapper2 = this.wrapper) === null || _this$wrapper2 === void 0 ? void 0 : (_this$wrapper2$parent = _this$wrapper2.parentElement) === null || _this$wrapper2$parent === void 0 ? void 0 : (_this$wrapper2$parent2 = _this$wrapper2$parent.getElementsByClassName(ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP)) === null || _this$wrapper2$parent2 === void 0 ? void 0 : _this$wrapper2$parent2.item(0);
+      [this.sentinels.bottom, this.sentinels.top].forEach(function (el) {
+        return _this2.intersectionObserver.observe(el);
+      });
+    }
+  }, {
+    key: "deleteIntesactionObserver",
+    value: function deleteIntesactionObserver() {
+      if (this.intersectionObserver) {
+        if (this.sentinels.bottom) {
+          this.intersectionObserver.unobserve(this.sentinels.bottom);
+        }
+        this.intersectionObserver.disconnect();
+      }
+    }
+  }, {
+    key: "sentenialBottomCallback",
+    value: function sentenialBottomCallback(entry) {
+      var _entry$rootBounds2;
+      var sentinelIsAboveScrollArea = entry.boundingClientRect.top < (((_entry$rootBounds2 = entry.rootBounds) === null || _entry$rootBounds2 === void 0 ? void 0 : _entry$rootBounds2.top) || 0);
+      this.bottomSentinelState = sentinelIsAboveScrollArea ? 'above' : entry.isIntersecting ? 'visible' : 'below';
+      this.toggle();
+    }
+  }, {
+    key: "sentenialTopCallback",
+    value: function sentenialTopCallback(entry) {
+      var _entry$rootBounds3;
+      var sentinelIsBelowScrollArea = (((_entry$rootBounds3 = entry.rootBounds) === null || _entry$rootBounds3 === void 0 ? void 0 : _entry$rootBounds3.bottom) || 0) < entry.boundingClientRect.top;
+      this.topSentinelState = sentinelIsBelowScrollArea ? 'below' : entry.isIntersecting ? 'visible' : 'above';
+      this.toggle();
+    }
+  }, {
+    key: "toggle",
+    value: function toggle() {
+      if ((this.topSentinelState === 'visible' || this.topSentinelState === 'above') && this.bottomSentinelState === 'below') {
+        this.show();
+      } else {
+        this.hide();
+      }
+    }
+  }, {
+    key: "hide",
+    value: function hide() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
+        this.stickyScrollbarContainerElement.style.display = 'none';
+      }
+    }
+  }, {
+    key: "show",
+    value: function show() {
+      if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
+        this.stickyScrollbarContainerElement.style.display = 'block';
+      }
+    }
+  }]);
+  return TableStickyScrollbar;
+}();

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

@@ -142,10 +142,24 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       // otherwise make it non-sticky
       return false;
     });
+    /**
+     * Manually refire the intersection observers.
+     * Useful when the header may have detached from the table.
+     */
+    _defineProperty(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);
+          }
+        });
+      }
+    });
     _defineProperty(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.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
+      if (_this.isSticky || _this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
       var table = tree.table,
@@ -163,10 +177,25 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       }
       var 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;
+
+        /**
+         * 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
+        });
+        var fastScrollThresholdMs = 500;
+        setTimeout(function () {
+          _this.refireIntersectionObservers();
+        }, fastScrollThresholdMs);
       }
       _this.dom.style.top = "".concat(domTop, "px");
       updateTableMargin(table);
@@ -263,8 +292,12 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.on(tablePluginKey.key, this.onTablePluginState);
       this.listening = true;
-      this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
-      this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this));
+      this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
+        passive: true
+      });
+      this.dom.addEventListener('touchmove', this.headerRowMouseScroll.bind(this), {
+        passive: true
+      });
     }
   }, {
     key: "unsubscribe",
@@ -275,7 +308,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       if (this.intersectionObserver) {
         this.intersectionObserver.disconnect();
         // ED-16211 Once intersection observer is disconnected, we need to remove the isObserved from the sentinels
-        // Otherwise when new intersection observer is created it will not observe because it thinks its already being observed
+        // Otherwise when newer intersection observer is created it will not observe because it thinks its already being observed
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
           if (el) {
             delete el.dataset.isObserved;

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

@@ -12,6 +12,7 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
@@ -343,6 +344,11 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 18],
+          absoluteOffset: getBooleanFF('platform.editor.table-sticky-scrollbar') ? {
+            top: -6
+          } : {
+            top: 0
+          },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
           items: [menu, separator(menu.hidden)].concat(cellItems, colorPicker, [{