@atlaskit/editor-plugin-table 3.2.0 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 4.0.0
+
+### Major Changes
+
+- [`151b0d45db4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/151b0d45db4) - Changed Resizer API. Removed handleComponent, innerPadding & handleMarginTop. Also renamed HandleHeightSizeType to HandleSize. The resizer should be opionated and control the handle component itself. innerPadding & handleMarginTop can also be controlled via the handleStyles override property.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.2.1
+
+### Patch Changes
+
+- [`b1a93f61747`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1a93f61747) - [ED-20091] add logic to refire intersection observers and prevent detached table sticky headers
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -38,15 +38,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 12;
-var tableHandlePosition = 14;
-var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
-  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  var handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+var handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
+  var _tableRef$clientHeigh;
+  var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -55,12 +56,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
@@ -107,7 +109,7 @@ var TableResizer = function TableResizer(_ref) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var resizerMinWidth = getResizerMinWidth(node);
-  var handleHeightSize = getResizerHandleHeight(tableRef);
+  var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
@@ -244,8 +246,8 @@ var TableResizer = function TableResizer(_ref) {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -255,7 +257,6 @@ var TableResizer = function TableResizer(_ref) {
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

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

@@ -149,10 +149,24 @@ 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.
+     */
+    (0, _defineProperty2.default)(this, "refireIntersectionObservers", function () {
+      if (_this.isSticky) {
+        [_this.sentinels.top, _this.sentinels.bottom].forEach(function (el) {
+          if (el && _this.intersectionObserver) {
+            _this.intersectionObserver.unobserve(el);
+            _this.intersectionObserver.observe(el);
+          }
+        });
+      }
+    });
     (0, _defineProperty2.default)(this, "makeHeaderRowSticky", function (tree, scrollTop) {
       var _tbody$firstChild;
       // If header row height is more than 50% of viewport height don't do this
-      if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
+      if (_this.isSticky || _this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
       var table = tree.table,
@@ -170,10 +184,25 @@ var TableRowNodeView = /*#__PURE__*/function () {
       }
       var domTop = currentTableTop > 0 ? scrollTop : scrollTop + currentTableTop;
       if (!_this.isSticky) {
+        var _this$editorScrollabl;
         (0, _dom.syncStickyRowToTable)(table);
         _this.dom.classList.add('sticky');
         table.classList.add(_types.TableCssClassName.TABLE_STICKY);
         _this.isSticky = true;
+
+        /**
+         * The logic below is not desirable, but acts as a fail safe for scenarios where the sticky header
+         * detaches from the table. This typically happens during a fast scroll by the user which causes
+         * the intersection observer logic to not fire as expected.
+         */
+        (_this$editorScrollabl = _this.editorScrollableElement) === null || _this$editorScrollabl === void 0 ? void 0 : _this$editorScrollabl.addEventListener('scrollend', _this.refireIntersectionObservers, {
+          passive: true,
+          once: true
+        });
+        var fastScrollThresholdMs = 500;
+        setTimeout(function () {
+          _this.refireIntersectionObservers();
+        }, fastScrollThresholdMs);
       }
       _this.dom.style.top = "".concat(domTop, "px");
       (0, _dom.updateStickyMargins)(table);
@@ -270,8 +299,12 @@ var TableRowNodeView = /*#__PURE__*/function () {
       this.eventDispatcher.on('widthPlugin', this.updateStickyHeaderWidth);
       this.eventDispatcher.on(_pluginKey.pluginKey.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",
@@ -282,7 +315,7 @@ 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/es2019/plugins/table/nodeviews/TableResizer.js

@@ -24,15 +24,16 @@ const messages = defineMessages({
 const handles = {
   right: true
 };
-const tableHandleMarginTop = 12;
-const tableHandlePosition = 14;
-const getResizerHandleHeight = tableRef => {
-  const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  let handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+const handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+const getResizerHandleHeight = tableRef => {
+  var _tableRef$clientHeigh;
+  const tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -41,12 +42,13 @@ const getResizerHandleHeight = tableRef => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
@@ -92,7 +94,7 @@ export const TableResizer = ({
     formatMessage
   } = useIntl();
   const resizerMinWidth = getResizerMinWidth(node);
-  const handleHeightSize = getResizerHandleHeight(tableRef);
+  const handleSize = getResizerHandleHeight(tableRef);
   const {
     isInDanger
   } = getPluginState(editorView.state);
@@ -239,8 +241,8 @@ export const TableResizer = ({
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -250,7 +252,6 @@ export const TableResizer = ({
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

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/esm/plugins/table/nodeviews/TableResizer.js

@@ -28,15 +28,16 @@ var messages = defineMessages({
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 12;
-var tableHandlePosition = 14;
-var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
-  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  var handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+var handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
+  var _tableRef$clientHeigh;
+  var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -45,12 +46,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = getColgroupChildrenLength(node);
@@ -97,7 +99,7 @@ export var TableResizer = function TableResizer(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var resizerMinWidth = getResizerMinWidth(node);
-  var handleHeightSize = getResizerHandleHeight(tableRef);
+  var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = getPluginState(editorView.state),
     isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
@@ -234,8 +236,8 @@ export var TableResizer = function TableResizer(_ref) {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -245,7 +247,6 @@ export var TableResizer = function TableResizer(_ref) {
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

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/types/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts

@@ -55,6 +55,11 @@ export declare class TableRowNodeView implements NodeView {
     onTablePluginState: (state: TablePluginState) => void;
     updateStickyHeaderWidth: () => void;
     shouldHeaderStick: (tree: TableDOMElements) => boolean;
+    /**
+     * Manually refire the intersection observers.
+     * Useful when the header may have detached from the table.
+     */
+    refireIntersectionObservers: () => void;
     makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number) => void;
     makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
     getWrapperoffset: (inverse?: boolean) => number;

package/dist/types-ts4.5/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.d.ts

@@ -55,6 +55,11 @@ export declare class TableRowNodeView implements NodeView {
     onTablePluginState: (state: TablePluginState) => void;
     updateStickyHeaderWidth: () => void;
     shouldHeaderStick: (tree: TableDOMElements) => boolean;
+    /**
+     * Manually refire the intersection observers.
+     * Useful when the header may have detached from the table.
+     */
+    refireIntersectionObservers: () => void;
     makeHeaderRowSticky: (tree: TableDOMElements, scrollTop?: number) => void;
     makeRowHeaderNotSticky: (table: HTMLElement, isEditorDestroyed?: boolean) => void;
     getWrapperoffset: (inverse?: boolean) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^75.8.0",
+    "@atlaskit/editor-common": "^76.0.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -14,16 +14,14 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import type {
-  HandleHeightSizeType,
-  HandleResize,
-} from '@atlaskit/editor-common/resizer';
+import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { token } from '@atlaskit/tokens';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -77,17 +75,18 @@ const messages = defineMessages({
 });
 
 const handles = { right: true };
-const tableHandleMarginTop = 12;
-const tableHandlePosition = 14;
-
-const getResizerHandleHeight = (tableRef: HTMLTableElement | undefined) => {
-  const tableHeight = tableRef?.clientHeight;
-  let handleHeightSize: HandleHeightSizeType | undefined = 'small';
-
-  if (!tableHeight) {
-    return handleHeightSize;
-  }
+const handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: token('space.150', '12px'),
+  },
+};
 
+const getResizerHandleHeight = (
+  tableRef: HTMLTableElement | undefined,
+): HandleSize | undefined => {
+  const tableHeight = tableRef?.clientHeight ?? 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -97,13 +96,15 @@ const getResizerHandleHeight = (tableRef: HTMLTableElement | undefined) => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+
+  if (tableHeight > 46) {
+    return 'medium';
   }
 
-  return handleHeightSize;
+  return 'small';
 };
 
 const getResizerMinWidth = (node: PMNode) => {
@@ -160,7 +161,7 @@ export const TableResizer = ({
   const { formatMessage } = useIntl();
 
   const resizerMinWidth = getResizerMinWidth(node);
-  const handleHeightSize = getResizerHandleHeight(tableRef);
+  const handleSize = getResizerHandleHeight(tableRef);
   const { isInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
@@ -389,8 +390,8 @@ export const TableResizer = ({
       enable={handles}
       width={width}
       handleAlignmentMethod="sticky"
-      handleHeightSize={handleHeightSize}
-      handleMarginTop={tableHandleMarginTop}
+      handleSize={handleSize}
+      handleStyles={handleStyles}
       handleResizeStart={handleResizeStart}
       handleResize={scheduleResize}
       handleResizeStop={handleResizeStop}
@@ -400,7 +401,6 @@ export const TableResizer = ({
       snapGap={TABLE_SNAP_GAP}
       snap={guidelineSnaps}
       handlePositioning="adjacent"
-      innerPadding={tableHandlePosition}
       isHandleVisible={isTableSelected}
       appearance={isInDanger && isTableSelected ? 'danger' : undefined}
       handleHighlight="shadow"

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -150,10 +150,13 @@ export class TableRowNodeView implements NodeView {
 
     this.listening = true;
 
-    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this));
+    this.dom.addEventListener('wheel', this.headerRowMouseScroll.bind(this), {
+      passive: true,
+    });
     this.dom.addEventListener(
       'touchmove',
       this.headerRowMouseScroll.bind(this),
+      { passive: true },
     );
   }
 
@@ -164,7 +167,7 @@ export class TableRowNodeView implements NodeView {
     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;
@@ -522,9 +525,27 @@ export class TableRowNodeView implements NodeView {
     return false;
   };
 
+  /**
+   * 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: TableDOMElements, scrollTop?: number) => {
     // 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;
     }
 
@@ -552,6 +573,22 @@ export class TableRowNodeView implements NodeView {
       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.editorScrollableElement?.addEventListener(
+        'scrollend',
+        this.refireIntersectionObservers,
+        { passive: true, once: true },
+      );
+
+      const fastScrollThresholdMs = 500;
+      setTimeout(() => {
+        this.refireIntersectionObservers();
+      }, fastScrollThresholdMs);
     }
 
     this.dom.style.top = `${domTop}px`;