@atlaskit/editor-plugin-table 15.6.6 → 15.6.8

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -15,6 +15,7 @@ import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { INITIAL_STATIC_VIEWPORT_HEIGHT } from '../pm-plugins/editor-content-area-height';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -37,6 +38,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     _classCallCheck(this, TableRowNativeStickyWithFallback);
     _this = _callSuper(this, TableRowNativeStickyWithFallback, [node, view, getPos, eventDispatcher]);
     _defineProperty(_this, "cleanup", function () {
+      var _this$onEditorContent, _this2;
       if (_this.isStickyHeaderEnabled) {
         _this.unsubscribe();
         _this.nodeVisibilityObserverCleanupFn && _this.nodeVisibilityObserverCleanupFn();
@@ -49,6 +51,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       if (_this.tableContainerObserver) {
         _this.tableContainerObserver.disconnect();
       }
+      (_this$onEditorContent = (_this2 = _this).onEditorContentAreaHeightChange) === null || _this$onEditorContent === void 0 || _this$onEditorContent.call(_this2);
     });
     _defineProperty(_this, "colControlsOffset", 0);
     _defineProperty(_this, "focused", false);
@@ -69,7 +72,8 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     _defineProperty(_this, "listening", false);
     _defineProperty(_this, "padding", 0);
     _defineProperty(_this, "top", 0);
-    _defineProperty(_this, "isNativeSticky", false);
+    _defineProperty(_this, "hasScrolledSinceLoad", false);
+    _defineProperty(_this, "disableNativeSticky", false);
     /**
      * Methods
      */
@@ -85,6 +89,17 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
         _this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
+    _defineProperty(_this, "toggleDisableNativeSticky", function (headerHeight, viewportHeight) {
+      if (!_this.disableNativeSticky && headerHeight > viewportHeight * 0.5) {
+        _this.disableNativeSticky = true;
+        if (_this.isNativeSticky === undefined) {
+          _this.dom.classList.remove(ClassName.NATIVE_STICKY);
+        }
+      }
+      if (_this.disableNativeSticky && headerHeight <= viewportHeight * 0.5) {
+        _this.disableNativeSticky = false;
+      }
+    });
     _this.isHeaderRow = supportedHeaderRow(node);
     _this.isLegacySticky = false;
     var _getPluginState = getPluginState(view.state),
@@ -111,6 +126,17 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
         }
       });
     }
+    if (_this.isHeaderRow && _this.isStickyHeaderEnabled && fg('platform_editor_table_sticky_header_patch_4')) {
+      var _api$table;
+      _this.onEditorContentAreaHeightChange = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.onChange(function (_ref2) {
+        var nextSharedState = _ref2.nextSharedState;
+        if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.editorContentAreaHeight && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.editorContentAreaHeight) !== _this.editorContentAreaHeight) {
+          var _this$stickyRowHeight;
+          _this.editorContentAreaHeight = nextSharedState.editorContentAreaHeight;
+          _this.toggleDisableNativeSticky((_this$stickyRowHeight = _this.stickyRowHeight) !== null && _this$stickyRowHeight !== void 0 ? _this$stickyRowHeight : 0, nextSharedState.editorContentAreaHeight);
+        }
+      });
+    }
     return _this;
   }
   _inherits(TableRowNativeStickyWithFallback, _ref);
@@ -174,10 +200,12 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     key: "destroy",
     value: function destroy() {
       if (this.isStickyHeaderEnabled) {
+        var _this$nodeVisibilityO;
         this.unsubscribe();
         this.overflowObserver && this.overflowObserver.disconnect();
         this.overflowObserverEntries = undefined;
         this.stickyStateObserver && this.stickyStateObserver.disconnect();
+        (_this$nodeVisibilityO = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO === void 0 || _this$nodeVisibilityO.disconnect();
         this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = getTree(this.dom);
         if (tree) {
@@ -220,52 +248,50 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "subscribe",
     value: function subscribe() {
-      var _this2 = this;
+      var _this3 = this;
       // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       this.editorScrollableElement = findOverflowScrollParent(this.view.dom) || window;
       if (this.editorScrollableElement) {
         this.initObservers();
         this.topPosEditorElement = getTop(this.editorScrollableElement);
-        if (!TableRowNativeStickyWithFallback.scrollListener && fg('platform_editor_table_sticky_header_patch_5')) {
-          TableRowNativeStickyWithFallback.scrollListener = function () {
-            if (TableRowNativeStickyWithFallback.hasScrolledSinceLoad) {
+        if (fg('platform_editor_table_sticky_header_patch_5')) {
+          this.scrollListener = function () {
+            var _this3$overflowObserv;
+            if (_this3.hasScrolledSinceLoad) {
               return;
             }
-            TableRowNativeStickyWithFallback.hasScrolledSinceLoad = true;
-            if (!_this2.overflowObserver) {
+            _this3.hasScrolledSinceLoad = true;
+            if (!_this3.overflowObserver) {
               return;
             }
 
             // Re-check intersection state now that scrolling has occurred
-            if (_this2.overflowObserver) {
-              var _this2$overflowObserv;
-              var entries = (_this2$overflowObserv = _this2.overflowObserverEntries) !== null && _this2$overflowObserv !== void 0 ? _this2$overflowObserv : _this2.overflowObserver.takeRecords();
-              _this2.overflowObserverEntries = undefined;
-
-              /** NOTE: This logic is duplicated in the overflowObserver callback
-               *  to avoid conflicting with a follow up refactor where this will
-               *  be cleaned up.
-               */
-              entries.forEach(function (entry) {
-                var tableWrapper = _this2.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
-                if (tableWrapper && tableWrapper instanceof HTMLElement) {
-                  if (entry.isIntersecting) {
-                    tableWrapper.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-                    _this2.dom.classList.add(ClassName.NATIVE_STICKY);
-                    _this2.isNativeSticky = true;
-                  } else {
-                    tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-                    _this2.dom.classList.remove(ClassName.NATIVE_STICKY);
-                    _this2.isNativeSticky = false;
-                  }
-                  _this2.refreshLegacyStickyState();
+            var entries = (_this3$overflowObserv = _this3.overflowObserverEntries) !== null && _this3$overflowObserv !== void 0 ? _this3$overflowObserv : _this3.overflowObserver.takeRecords();
+            _this3.overflowObserverEntries = undefined;
+
+            /** NOTE: This logic is duplicated in the overflowObserver callback
+             *  to avoid conflicting with a follow up refactor where this will
+             *  be cleaned up.
+             */
+            entries.forEach(function (entry) {
+              var tableWrapper = _this3.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
+              if (tableWrapper && tableWrapper instanceof HTMLElement) {
+                if (entry.isIntersecting) {
+                  tableWrapper.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                  _this3.dom.classList.add(ClassName.NATIVE_STICKY);
+                  _this3.isNativeSticky = true;
+                } else {
+                  tableWrapper.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+                  _this3.dom.classList.remove(ClassName.NATIVE_STICKY);
+                  _this3.isNativeSticky = false;
                 }
-              });
-            }
+                _this3.refreshLegacyStickyState();
+              }
+            });
           };
           // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-          this.editorScrollableElement.addEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener, {
+          this.editorScrollableElement.addEventListener('scroll', this.scrollListener, {
             passive: true,
             once: true
           });
@@ -308,10 +334,10 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       if (this.resizeObserver) {
         this.resizeObserver.disconnect();
       }
-      if (TableRowNativeStickyWithFallback.scrollListener && this.editorScrollableElement) {
+      if (this.scrollListener && this.editorScrollableElement) {
         // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-        this.editorScrollableElement.removeEventListener('scroll', TableRowNativeStickyWithFallback.scrollListener);
-        TableRowNativeStickyWithFallback.scrollListener = undefined;
+        this.editorScrollableElement.removeEventListener('scroll', this.scrollListener);
+        this.scrollListener = undefined;
       }
       this.eventDispatcher.off('widthPlugin', this.updateStickyHeaderWidth);
       // Ignored via go/ees005
@@ -329,7 +355,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initOverflowObserver",
     value: function initOverflowObserver() {
-      var _this3 = this;
+      var _this4 = this;
       var tableWrapper = this.dom.closest(".".concat(ClassName.TABLE_NODE_WRAPPER));
       if (!tableWrapper) {
         return;
@@ -344,20 +370,32 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
             return;
           }
           // Only apply classes if page has scrolled since load
-          if (!TableRowNativeStickyWithFallback.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_5')) {
-            _this3.overflowObserverEntries = entries;
+          if (!_this4.hasScrolledSinceLoad && fg('platform_editor_table_sticky_header_patch_5')) {
+            _this4.overflowObserverEntries = entries;
             return;
           }
           if (entry.isIntersecting) {
-            observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this3.dom.classList.add(ClassName.NATIVE_STICKY);
-            _this3.isNativeSticky = true;
+            if (fg('platform_editor_table_sticky_header_patch_4')) {
+              observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              if (!_this4.disableNativeSticky) {
+                _this4.dom.classList.add(ClassName.NATIVE_STICKY);
+              }
+            } else {
+              observer.root.classList.add(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.add(ClassName.NATIVE_STICKY);
+            }
+            _this4.isNativeSticky = true;
           } else {
-            observer.root.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this3.dom.classList.remove(ClassName.NATIVE_STICKY);
-            _this3.isNativeSticky = false;
+            if (fg('platform_editor_table_sticky_header_patch_4')) {
+              observer.root.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.remove(ClassName.NATIVE_STICKY);
+            } else {
+              observer.root.classList.remove(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.remove(ClassName.NATIVE_STICKY);
+            }
+            _this4.isNativeSticky = false;
           }
-          _this3.refreshLegacyStickyState();
+          _this4.refreshLegacyStickyState();
         });
       }, options);
     }
@@ -370,7 +408,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initStickyStateObserver",
     value: function initStickyStateObserver() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.editorScrollableElement || !(this.editorScrollableElement instanceof Element)) {
         return;
       }
@@ -382,14 +420,14 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
-          var tableContainer = _this4.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
-          if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top)) {
-            _this4.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
+          var tableContainer = _this5.dom.closest(".".concat(ClassName.TABLE_CONTAINER));
+          if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) && (!_this5.disableNativeSticky || !fg('platform_editor_table_sticky_header_patch_4'))) {
+            _this5.dom.classList.add(ClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               tableContainer.dataset.tableHeaderIsStuck = 'true';
             }
           } else {
-            _this4.dom.classList.remove(ClassName.NATIVE_STICKY_ACTIVE);
+            _this5.dom.classList.remove(ClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               if (fg('platform_editor_table_sticky_header_patch_3')) {
                 delete tableContainer.dataset.tableHeaderIsStuck;
@@ -406,7 +444,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -423,10 +461,17 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
           this.dom.style.setProperty('anchor-name', (_this$dom$getAttribut = this.dom.getAttribute('data-node-anchor')) !== null && _this$dom$getAttribut !== void 0 ? _this$dom$getAttribut : '');
         }
         this.initOverflowObserver();
+        if (fg('platform_editor_table_sticky_header_patch_4')) {
+          this.initNodeVisibilityObserver();
+        }
         var closestTable = this.dom.closest('table');
         if (closestTable) {
           var _this$overflowObserve;
           (_this$overflowObserve = this.overflowObserver) === null || _this$overflowObserve === void 0 || _this$overflowObserve.observe(closestTable);
+          if (fg('platform_editor_table_sticky_header_patch_4')) {
+            var _this$nodeVisibilityO2;
+            (_this$nodeVisibilityO2 = this.nodeVisibilityObserver) === null || _this$nodeVisibilityO2 === void 0 || _this$nodeVisibilityO2.observe(closestTable);
+          }
         }
         this.initStickyStateObserver();
         (_this$stickyStateObse = this.stickyStateObserver) === null || _this$stickyStateObse === void 0 || _this$stickyStateObse.observe(this.dom);
@@ -440,7 +485,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = getTree(_this5.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = getTree(_this6.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -466,16 +511,16 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
             return getSentinelTop() !== null && getSentinelBottom() !== null;
           };
           var observeStickySentinels = function observeStickySentinels() {
-            _this5.sentinels.top = getSentinelTop();
-            _this5.sentinels.bottom = getSentinelBottom();
-            [_this5.sentinels.top, _this5.sentinels.bottom].forEach(function (el) {
+            _this6.sentinels.top = getSentinelTop();
+            _this6.sentinels.bottom = getSentinelBottom();
+            [_this6.sentinels.top, _this6.sentinels.bottom].forEach(function (el) {
               // skip if already observed for another row on this table
               if (el && !el.dataset.isObserved) {
                 el.dataset.isObserved = 'true';
 
                 // Ignored via go/ees005
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                _this5.intersectionObserver.observe(el);
+                _this6.intersectionObserver.observe(el);
               }
             });
           };
@@ -490,7 +535,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
             // observe sentinels before they are in the DOM, use MutationObserver
             // to wait for sentinels to be added to the parent Table node DOM
             // then attach the IntersectionObserver
-            _this5.tableContainerObserver = new MutationObserver(function () {
+            _this6.tableContainerObserver = new MutationObserver(function () {
               // Check if the tableContainer is still connected to the DOM. It can become disconnected when the placholder
               // prosemirror node is replaced with the fully rendered React node (see _handleTableRef).
 
@@ -498,14 +543,14 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
                 tableContainer = getTableContainer();
               }
               if (sentinelsInDom()) {
-                var _this5$tableContainer;
+                var _this6$tableContainer;
                 observeStickySentinels();
-                (_this5$tableContainer = _this5.tableContainerObserver) === null || _this5$tableContainer === void 0 || _this5$tableContainer.disconnect();
+                (_this6$tableContainer = _this6.tableContainerObserver) === null || _this6$tableContainer === void 0 || _this6$tableContainer.disconnect();
               }
             });
             var mutatingNode = tableContainer;
-            if (mutatingNode && _this5.tableContainerObserver) {
-              _this5.tableContainerObserver.observe(mutatingNode, {
+            if (mutatingNode && _this6.tableContainerObserver) {
+              _this6.tableContainerObserver.observe(mutatingNode, {
                 subtree: true,
                 childList: true
               });
@@ -515,39 +560,69 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
       });
     }
 
+    // initialise intersection observer to track whether table is in scroll area
+  }, {
+    key: "initNodeVisibilityObserver",
+    value: function initNodeVisibilityObserver() {
+      var _this7 = this;
+      this.nodeVisibilityObserver = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (!_this7.isNativeSticky) {
+            return;
+          }
+          if (entry.intersectionRatio !== 0 && entry.intersectionRatio !== 1) {
+            return;
+          }
+          if (_this7.disableNativeSticky === true) {
+            _this7.dom.classList.remove(ClassName.NATIVE_STICKY);
+          }
+          if (_this7.disableNativeSticky === false) {
+            _this7.dom.classList.add(ClassName.NATIVE_STICKY);
+          }
+        });
+      }, {
+        threshold: [0, 0.05, 0.95, 1]
+      });
+    }
+
     // updating bottom sentinel position if sticky header height changes
     // to allocate for new header height
   }, {
     key: "createResizeObserver",
     value: function createResizeObserver() {
-      var _this6 = this;
+      var _this8 = this;
       this.resizeObserver = new ResizeObserver(function (entries) {
-        var tree = getTree(_this6.dom);
+        var tree = getTree(_this8.dom);
         if (!tree) {
           return;
         }
         var table = tree.table;
         entries.forEach(function (entry) {
-          var _this6$editorScrollab;
+          var _this8$editorScrollab;
           // On resize of the parent scroll element we need to adjust the width
           // of the sticky header
           // Ignored via go/ees005
           // eslint-disable-next-line @atlaskit/editor/no-as-casting
-          if (entry.target.className === ((_this6$editorScrollab = _this6.editorScrollableElement) === null || _this6$editorScrollab === void 0 ? void 0 : _this6$editorScrollab.className)) {
-            _this6.updateStickyHeaderWidth();
+          if (entry.target.className === ((_this8$editorScrollab = _this8.editorScrollableElement) === null || _this8$editorScrollab === void 0 ? void 0 : _this8$editorScrollab.className)) {
+            _this8.updateStickyHeaderWidth();
           } else {
             var newHeight = entry.contentRect ? entry.contentRect.height :
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
             entry.target.offsetHeight;
-            if (_this6.sentinels.bottom &&
+            if (_this8.sentinels.bottom &&
             // When the table header is sticky, it would be taller by a 1px (border-bottom),
             // So we adding this check to allow a 1px difference.
-            Math.abs(newHeight - (_this6.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
-              _this6.stickyRowHeight = newHeight;
-              _this6.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this8.stickyRowHeight || 0)) > stickyHeaderBorderBottomWidth) {
+              _this8.stickyRowHeight = newHeight;
+              _this8.sentinels.bottom.style.bottom = "".concat(tableScrollbarOffset + stickyRowOffsetTop + newHeight, "px");
               updateTableMargin(table);
             }
+            if (fg('platform_editor_table_sticky_header_patch_4')) {
+              var _this8$editorContentA;
+              var viewportHeight = (_this8$editorContentA = _this8.editorContentAreaHeight) !== null && _this8$editorContentA !== void 0 ? _this8$editorContentA : INITIAL_STATIC_VIEWPORT_HEIGHT;
+              _this8.toggleDisableNativeSticky(newHeight, viewportHeight);
+            }
           }
         });
       });
@@ -555,13 +630,13 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "createIntersectionObserver",
     value: function createIntersectionObserver() {
-      var _this7 = this;
+      var _this9 = this;
       this.intersectionObserver = new IntersectionObserver(function (entries, _) {
-        var _this7$editorScrollab, _this7$editorScrollab2;
+        var _this9$editorScrollab, _this9$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 = (_this7$editorScrollab = _this7.editorScrollableElement) === null || _this7$editorScrollab === void 0 || (_this7$editorScrollab2 = _this7$editorScrollab.getBoundingClientRect) === null || _this7$editorScrollab2 === void 0 ? void 0 : _this7$editorScrollab2.call(_this7$editorScrollab);
+        var rootBounds = (_this9$editorScrollab = _this9.editorScrollableElement) === null || _this9$editorScrollab === void 0 || (_this9$editorScrollab2 = _this9$editorScrollab.getBoundingClientRect) === null || _this9$editorScrollab2 === void 0 ? void 0 : _this9$editorScrollab2.call(_this9$editorScrollab);
         entries.forEach(function (entry) {
           var target = entry.target,
             isIntersecting = entry.isIntersecting,
@@ -569,15 +644,15 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
           // 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
-          _this7.sentinelData[targetKey] = {
+          _this9.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
-          _this7.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
+          _this9.sentinelData[targetKey === 'top' ? 'bottom' : targetKey].rootBounds = rootBounds !== null && rootBounds !== void 0 ? rootBounds : entry.rootBounds;
         });
-        _this7.refreshLegacyStickyState();
+        _this9.refreshLegacyStickyState();
       }, {
         threshold: 0,
         root: this.editorScrollableElement
@@ -636,27 +711,27 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     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.
-        */
+      # 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,
@@ -752,12 +827,12 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
   }, {
     key: "refireIntersectionObservers",
     value: function refireIntersectionObservers() {
-      var _this8 = this;
+      var _this0 = this;
       if (this.isLegacySticky) {
         [this.sentinels.top, this.sentinels.bottom].forEach(function (el) {
-          if (el && _this8.intersectionObserver) {
-            _this8.intersectionObserver.unobserve(el);
-            _this8.intersectionObserver.observe(el);
+          if (el && _this0.intersectionObserver) {
+            _this0.intersectionObserver.unobserve(el);
+            _this0.intersectionObserver.observe(el);
           }
         });
       }
@@ -766,7 +841,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     key: "makeHeaderRowLegacySticky",
     value: function makeHeaderRowLegacySticky(tree, scrollTop) {
       var _tbody$firstChild,
-        _this9 = this;
+        _this1 = this;
       // If header row height is more than 50% of viewport height don't do this
       if (this.isLegacySticky || this.stickyRowHeight && this.stickyRowHeight > window.innerHeight / 2 || this.isInNestedTable) {
         return;
@@ -805,7 +880,7 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this9.refireIntersectionObservers();
+          _this1.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";
@@ -894,5 +969,4 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_ref) {
     }
   }]);
 }(TableNodeView);
-_defineProperty(TableRowNativeStickyWithFallback, "hasScrolledSinceLoad", false);
 export { TableRowNativeStickyWithFallback as default };

package/dist/esm/pm-plugins/editor-content-area-height.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('editorContentAreaHeightPlugin');
+export var INITIAL_STATIC_VIEWPORT_HEIGHT = 1200;
+export var EDITOR_CONTENT_AREA_REGION_CLASSNAME = '.ak-editor-content-area-region';
+var createPlugin = function createPlugin() {
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          height: INITIAL_STATIC_VIEWPORT_HEIGHT
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(pluginKey);
+        if (meta) {
+          return _objectSpread(_objectSpread({}, pluginState), meta);
+        }
+        return pluginState;
+      }
+    },
+    view: function view(_view) {
+      var editorContentAreaEl = _view.dom.closest(EDITOR_CONTENT_AREA_REGION_CLASSNAME);
+      var resizeObserver;
+      if (editorContentAreaEl) {
+        resizeObserver = new ResizeObserver(function (entries) {
+          var _iterator = _createForOfIteratorHelper(entries),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var entry = _step.value;
+              var height = entry.contentRect.height;
+              var tr = _view.state.tr.setMeta(pluginKey, {
+                height: height,
+                isObserved: true
+              });
+              _view.dispatch(tr);
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        });
+        resizeObserver.observe(editorContentAreaEl);
+      }
+      return {
+        destroy: function destroy() {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) === null || _resizeObserver === void 0 || _resizeObserver.disconnect();
+        }
+      };
+    }
+  });
+};
+export { createPlugin };