@atlaskit/editor-plugin-table 15.6.6 → 15.6.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 15.6.7
+
+### Patch Changes
+
+- [`fe7b3f29093a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fe7b3f29093a6) -
+  [ux] EDITOR-2990 Disable native sticky header for tables with headers greater than 50% viewport
+  height
+- [`b4a854535b851`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4a854535b851) -
+  [ux] EDITOR-2625 Add missing left border when table controls are showing and header is sticking in
+  table with numbered columns
+- Updated dependencies
+
 ## 15.6.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableRowNativeStickyWithFallback.js

@@ -20,6 +20,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _editorContentAreaHeight = require("../pm-plugins/editor-content-area-height");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -44,6 +45,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     (0, _classCallCheck2.default)(this, TableRowNativeStickyWithFallback);
     _this = _callSuper(this, TableRowNativeStickyWithFallback, [node, view, getPos, eventDispatcher]);
     (0, _defineProperty2.default)(_this, "cleanup", function () {
+      var _this$onEditorContent, _this2;
       if (_this.isStickyHeaderEnabled) {
         _this.unsubscribe();
         _this.nodeVisibilityObserverCleanupFn && _this.nodeVisibilityObserverCleanupFn();
@@ -56,6 +58,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       if (_this.tableContainerObserver) {
         _this.tableContainerObserver.disconnect();
       }
+      (_this$onEditorContent = (_this2 = _this).onEditorContentAreaHeightChange) === null || _this$onEditorContent === void 0 || _this$onEditorContent.call(_this2);
     });
     (0, _defineProperty2.default)(_this, "colControlsOffset", 0);
     (0, _defineProperty2.default)(_this, "focused", false);
@@ -76,7 +79,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     (0, _defineProperty2.default)(_this, "listening", false);
     (0, _defineProperty2.default)(_this, "padding", 0);
     (0, _defineProperty2.default)(_this, "top", 0);
-    (0, _defineProperty2.default)(_this, "isNativeSticky", false);
+    (0, _defineProperty2.default)(_this, "disableNativeSticky", false);
     /**
      * Methods
      */
@@ -92,6 +95,17 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         _this.headerRowMouseScrollEnd();
       }
     }, HEADER_ROW_SCROLL_THROTTLE_TIMEOUT));
+    (0, _defineProperty2.default)(_this, "toggleDisableNativeSticky", function (headerHeight, viewportHeight) {
+      if (!_this.disableNativeSticky && headerHeight > viewportHeight * 0.5) {
+        _this.disableNativeSticky = true;
+        if (_this.isNativeSticky === undefined) {
+          _this.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+        }
+      }
+      if (_this.disableNativeSticky && headerHeight <= viewportHeight * 0.5) {
+        _this.disableNativeSticky = false;
+      }
+    });
     _this.isHeaderRow = (0, _nodes.supportedHeaderRow)(node);
     _this.isLegacySticky = false;
     var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
@@ -118,6 +132,17 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         }
       });
     }
+    if (_this.isHeaderRow && _this.isStickyHeaderEnabled && (0, _platformFeatureFlags.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;
   }
   (0, _inherits2.default)(TableRowNativeStickyWithFallback, _ref);
@@ -181,10 +206,12 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     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 = (0, _dom2.getTree)(this.dom);
         if (tree) {
@@ -227,7 +254,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     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 = (0, _ui.findOverflowScrollParent)(this.view.dom) || window;
@@ -240,33 +267,33 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
               return;
             }
             TableRowNativeStickyWithFallback.hasScrolledSinceLoad = true;
-            if (!_this2.overflowObserver) {
+            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;
+            if (_this3.overflowObserver) {
+              var _this3$overflowObserv;
+              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 = _this2.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
+                var tableWrapper = _this3.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
                 if (tableWrapper && tableWrapper instanceof HTMLElement) {
                   if (entry.isIntersecting) {
                     tableWrapper.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-                    _this2.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
-                    _this2.isNativeSticky = true;
+                    _this3.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
+                    _this3.isNativeSticky = true;
                   } else {
                     tableWrapper.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-                    _this2.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
-                    _this2.isNativeSticky = false;
+                    _this3.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+                    _this3.isNativeSticky = false;
                   }
-                  _this2.refreshLegacyStickyState();
+                  _this3.refreshLegacyStickyState();
                 }
               });
             }
@@ -336,7 +363,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initOverflowObserver",
     value: function initOverflowObserver() {
-      var _this3 = this;
+      var _this4 = this;
       var tableWrapper = this.dom.closest(".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       if (!tableWrapper) {
         return;
@@ -352,19 +379,31 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           }
           // Only apply classes if page has scrolled since load
           if (!TableRowNativeStickyWithFallback.hasScrolledSinceLoad && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_5')) {
-            _this3.overflowObserverEntries = entries;
+            _this4.overflowObserverEntries = entries;
             return;
           }
           if (entry.isIntersecting) {
-            observer.root.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this3.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
-            _this3.isNativeSticky = true;
+            if ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4')) {
+              observer.root.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              if (!_this4.disableNativeSticky) {
+                _this4.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
+              }
+            } else {
+              observer.root.classList.add(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY);
+            }
+            _this4.isNativeSticky = true;
           } else {
-            observer.root.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
-            _this3.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
-            _this3.isNativeSticky = false;
+            if ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4')) {
+              observer.root.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+            } else {
+              observer.root.classList.remove(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW);
+              _this4.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY);
+            }
+            _this4.isNativeSticky = false;
           }
-          _this3.refreshLegacyStickyState();
+          _this4.refreshLegacyStickyState();
         });
       }, options);
     }
@@ -377,7 +416,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initStickyStateObserver",
     value: function initStickyStateObserver() {
-      var _this4 = this;
+      var _this5 = this;
       if (!this.editorScrollableElement || !(this.editorScrollableElement instanceof Element)) {
         return;
       }
@@ -389,14 +428,14 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       this.stickyStateObserver = new IntersectionObserver(function (entries) {
         entries.forEach(function (entry) {
           var _entry$rootBounds;
-          var tableContainer = _this4.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
-          if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top)) {
-            _this4.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+          var tableContainer = _this5.dom.closest(".".concat(_types.TableCssClassName.TABLE_CONTAINER));
+          if (entry.intersectionRect.top === ((_entry$rootBounds = entry.rootBounds) === null || _entry$rootBounds === void 0 ? void 0 : _entry$rootBounds.top) && (!_this5.disableNativeSticky || !(0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4'))) {
+            _this5.dom.classList.add(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               tableContainer.dataset.tableHeaderIsStuck = 'true';
             }
           } else {
-            _this4.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
+            _this5.dom.classList.remove(_types.TableCssClassName.NATIVE_STICKY_ACTIVE);
             if (tableContainer && tableContainer instanceof HTMLElement) {
               if ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_3')) {
                 delete tableContainer.dataset.tableHeaderIsStuck;
@@ -413,7 +452,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     key: "initObservers",
     value: function initObservers() {
-      var _this5 = this;
+      var _this6 = this;
       if (!this.dom || this.dom.dataset.isObserved) {
         return;
       }
@@ -430,10 +469,17 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           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 ((0, _platformFeatureFlags.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 ((0, _platformFeatureFlags.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);
@@ -447,7 +493,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       window.requestAnimationFrame(function () {
         var getTableContainer = function getTableContainer() {
           var _getTree;
-          return (_getTree = (0, _dom2.getTree)(_this5.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
+          return (_getTree = (0, _dom2.getTree)(_this6.dom)) === null || _getTree === void 0 ? void 0 : _getTree.wrapper.closest(".".concat(_types.TableCssClassName.NODEVIEW_WRAPPER));
         };
 
         // we expect tree to be defined after animation frame
@@ -473,16 +519,16 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             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);
               }
             });
           };
@@ -497,7 +543,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
             // 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).
 
@@ -505,14 +551,14 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
                 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
               });
@@ -522,39 +568,69 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
       });
     }
 
+    // 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(_types.TableCssClassName.NATIVE_STICKY);
+          }
+          if (_this7.disableNativeSticky === false) {
+            _this7.dom.classList.add(_types.TableCssClassName.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 = (0, _dom2.getTree)(_this6.dom);
+        var tree = (0, _dom2.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)) > _consts.stickyHeaderBorderBottomWidth) {
-              _this6.stickyRowHeight = newHeight;
-              _this6.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
+            Math.abs(newHeight - (_this8.stickyRowHeight || 0)) > _consts.stickyHeaderBorderBottomWidth) {
+              _this8.stickyRowHeight = newHeight;
+              _this8.sentinels.bottom.style.bottom = "".concat(_consts.tableScrollbarOffset + _consts.stickyRowOffsetTop + newHeight, "px");
               (0, _dom.updateStickyMargins)(table);
             }
+            if ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4')) {
+              var _this8$editorContentA;
+              var viewportHeight = (_this8$editorContentA = _this8.editorContentAreaHeight) !== null && _this8$editorContentA !== void 0 ? _this8$editorContentA : _editorContentAreaHeight.INITIAL_STATIC_VIEWPORT_HEIGHT;
+              _this8.toggleDisableNativeSticky(newHeight, viewportHeight);
+            }
           }
         });
       });
@@ -562,13 +638,13 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     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,
@@ -576,15 +652,15 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
           // 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(_types.TableCssClassName.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
@@ -643,27 +719,27 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     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,
@@ -759,12 +835,12 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
   }, {
     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);
           }
         });
       }
@@ -773,7 +849,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
     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;
@@ -812,7 +888,7 @@ var TableRowNativeStickyWithFallback = exports.default = /*#__PURE__*/function (
         });
         var fastScrollThresholdMs = 500;
         setTimeout(function () {
-          _this9.refireIntersectionObservers();
+          _this1.refireIntersectionObservers();
         }, fastScrollThresholdMs);
       }
       this.dom.style.top = "0px";

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = exports.INITIAL_STATIC_VIEWPORT_HEIGHT = exports.EDITOR_CONTENT_AREA_REGION_CLASSNAME = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+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) { (0, _defineProperty2.default)(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; }
+var pluginKey = exports.pluginKey = new _state.PluginKey('editorContentAreaHeightPlugin');
+var INITIAL_STATIC_VIEWPORT_HEIGHT = exports.INITIAL_STATIC_VIEWPORT_HEIGHT = 1200;
+var EDITOR_CONTENT_AREA_REGION_CLASSNAME = exports.EDITOR_CONTENT_AREA_REGION_CLASSNAME = '.ak-editor-content-area-region';
+var createPlugin = exports.createPlugin = function createPlugin() {
+  return new _safePlugin.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();
+        }
+      };
+    }
+  });
+};

package/dist/cjs/tablePlugin.js

@@ -30,6 +30,7 @@ var _createPluginConfig = require("./pm-plugins/create-plugin-config");
 var _plugin2 = require("./pm-plugins/decorations/plugin");
 var _plugin3 = require("./pm-plugins/drag-and-drop/plugin");
 var _pluginKey = require("./pm-plugins/drag-and-drop/plugin-key");
+var _editorContentAreaHeight = require("./pm-plugins/editor-content-area-height");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _pluginKey2 = require("./pm-plugins/plugin-key");
@@ -103,6 +104,7 @@ var tablePlugin = function tablePlugin(_ref) {
       var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       var dragAndDropState = _pluginKey.pluginKey.getState(editorState);
       var sizeSelectorPluginState = _tableSizeSelector.pluginKey.getState(editorState);
+      var editorContentAreaHeightPluginState = _editorContentAreaHeight.pluginKey.getState(editorState);
       var sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -140,7 +142,8 @@ var tablePlugin = function tablePlugin(_ref) {
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
         isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
         isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
-        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef,
+        editorContentAreaHeight: (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? editorContentAreaHeightPluginState === null || editorContentAreaHeightPluginState === void 0 ? void 0 : editorContentAreaHeightPluginState.height : undefined
       };
       return sharedStateInternal;
     },
@@ -363,8 +366,7 @@ var tablePlugin = function tablePlugin(_ref) {
       }, {
         name: 'tableStickyHeaders',
         plugin: function plugin(_ref1) {
-          var dispatch = _ref1.dispatch,
-            eventDispatcher = _ref1.eventDispatcher;
+          var dispatch = _ref1.dispatch;
           return options && options.tableOptions.stickyHeaders ? (0, _plugin4.createPlugin)(dispatch, function () {
             return [];
           }) : undefined;
@@ -482,8 +484,13 @@ var tablePlugin = function tablePlugin(_ref) {
           var dispatch = _ref18.dispatch;
           return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
         }
+      }, {
+        name: 'editorContentAreaHeightPlugin',
+        plugin: function plugin() {
+          return (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1') ? (0, _editorContentAreaHeight.createPlugin)() : undefined;
+        }
       }];
-      if (!(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_1')) {
+      if (!(0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && (0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_2')) {
         plugins.push({
           name: 'tableAnchorNames',
           plugin: function plugin() {