@atlaskit/editor-plugin-table 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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/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/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": "3.2.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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`;