@atlaskit/editor-plugin-table 10.10.7 → 10.11.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 10.11.0
+
+### Minor Changes
+
+- [#156919](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/156919)
+  [`379f5c27f4939`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/379f5c27f4939) -
+  delay table sticky headers until table is in viewport
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.10.7
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -20,6 +20,7 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _collab = require("@atlaskit/editor-common/collab");
 var _nesting = require("@atlaskit/editor-common/nesting");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -27,6 +28,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../pm-plugins/commands");
 var _autoscrollers = require("../pm-plugins/drag-and-drop/utils/autoscrollers");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -400,10 +402,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', false)) {
+        this.initialiseEventListenersAfterMount();
+        return;
+      }
+      var _nodeVisibilityManage = (0, _nodeVisibility.nodeVisibilityManager)(this.props.view.dom),
+        observe = _nodeVisibilityManage.observe;
+      if (this.table) {
+        this.nodeVisibilityObserverCleanupFn = observe({
+          element: this.table,
+          onFirstVisible: function onFirstVisible() {
+            _this2.initialiseEventListenersAfterMount();
+          }
+        });
+      }
+    }
+  }, {
+    key: "initialiseEventListenersAfterMount",
+    value: function initialiseEventListenersAfterMount() {
       var _this$table,
         _this$table2,
         _this$table3,
-        _this2 = this;
+        _this3 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         allowTableResizing = _this$props7.allowTableResizing,
@@ -441,7 +462,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var _entry$contentRect3;
               var entry = _step2.value;
-              _this2.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
+              _this3.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
             }
           } catch (err) {
             _iterator2.e(err);
@@ -515,6 +536,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
+      if (this.nodeVisibilityObserverCleanupFn) {
+        this.nodeVisibilityObserverCleanupFn();
+      }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
       (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
       if (this.stickyScrollbar) {
@@ -584,7 +608,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this$containerWidth,
-        _this3 = this;
+        _this4 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -661,26 +685,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
           var scalePercent = 1;
           requestAnimationFrame(function () {
-            var _this3$props$options, _this3$props$options2;
+            var _this4$props$options, _this4$props$options2;
             // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
             // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
             // inside of getTableScalingPercent returns 0.
-            if (!((_this3$props$options = _this3.props.options) !== null && _this3$props$options !== void 0 && _this3$props$options.isCommentEditor) || (_this3$props$options2 = _this3.props.options) !== null && _this3$props$options2 !== void 0 && _this3$props$options2.isCommentEditor && tableNode.attrs.width) {
+            if (!((_this4$props$options = _this4.props.options) !== null && _this4$props$options !== void 0 && _this4$props$options.isCommentEditor) || (_this4$props$options2 = _this4.props.options) !== null && _this4$props$options2 !== void 0 && _this4$props$options2.isCommentEditor && tableNode.attrs.width) {
               scalePercent = (0, _misc.getTableScalingPercent)(tableNode,
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              _this3.table, shouldUseIncreasedScalingPercent);
+              _this4.table, shouldUseIncreasedScalingPercent);
             } else {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this3.table);
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this4.table);
             }
 
             // Request animation frame required for Firefox
             (0, _resizeState.updateColgroup)(resizeState,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            _this3.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            _this4.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
       }
@@ -700,7 +724,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props$options8,
         _this$props$options9,
         _this$wrapper,
-        _this4 = this;
+        _this5 = this;
       var _this$props11 = this.props,
         view = _this$props11.view,
         getNode = _this$props11.getNode,
@@ -748,10 +772,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this4.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
+            _this5.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_view_mode_sort') ? _this5.updateShadowStateDebounced : _this5.updateShadowState,
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            _this4.table, _this4.wrapper);
+            _this5.table, _this5.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new _OverflowShadowsObserver.OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -828,7 +852,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this,
+      var _this6 = this,
         _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -918,8 +942,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper;
-          return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
+          var _this6$wrapper;
+          return ((_this6$wrapper = _this6.wrapper) === null || _this6$wrapper === void 0 ? void 0 : _this6$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
@@ -991,12 +1015,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper2;
-          return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
+          var _this6$wrapper2;
+          return ((_this6$wrapper2 = _this6.wrapper) === null || _this6$wrapper2 === void 0 ? void 0 : _this6$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this5$wrapper3;
-          return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
+          var _this6$wrapper3;
+          return ((_this6$wrapper3 = _this6.wrapper) === null || _this6$wrapper3 === void 0 ? void 0 : _this6$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
         contentEditable: false
@@ -1018,14 +1042,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: (0, _classnames2.default)(_types.TableCssClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this5.wrapper = elem;
+          _this6.wrapper = elem;
           if (elem) {
-            _this5.props.contentDOM(elem);
+            _this6.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this5.table) {
-              _this5.table = tableElement;
-              _this5.createShadowSentinels(_this5.table);
-              _this5.observeTable(_this5.table);
+            if (tableElement !== _this6.table) {
+              _this6.table = tableElement;
+              _this6.createShadowSentinels(_this6.table);
+              _this6.observeTable(_this6.table);
             }
           }
         }

package/dist/cjs/nodeviews/TableRow.js

@@ -14,9 +14,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _throttle = _interopRequireDefault(require("lodash/throttle"));
 var _nesting = require("@atlaskit/editor-common/nesting");
+var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _commands = require("../pm-plugins/sticky-headers/commands");
@@ -84,19 +86,38 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
       _this.isInNestedTable = (0, _nesting.getParentOfTypeCount)(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
     }
     if (_this.isHeaderRow) {
-      _this.dom.setAttribute('data-header-row', 'true');
-      if (_this.isStickyHeaderEnabled) {
-        _this.subscribe();
+      if ((0, _experiments.editorExperiment)('platform_editor_nodevisibility', false)) {
+        _this.subscribeWhenRowVisible();
+      } else {
+        var _nodeVisibilityManage = (0, _nodeVisibility.nodeVisibilityManager)(view.dom),
+          observe = _nodeVisibilityManage.observe;
+        _this.nodeVisibilityObserverCleanupFn = observe({
+          element: _this.contentDOM,
+          onFirstVisible: function onFirstVisible() {
+            _this.subscribeWhenRowVisible();
+          }
+        });
       }
     }
     return _this;
   }
-
-  /**
-   * Variables
-   */
   (0, _inherits2.default)(TableRow, _TableNodeView);
   return (0, _createClass2.default)(TableRow, [{
+    key: "subscribeWhenRowVisible",
+    value: function subscribeWhenRowVisible() {
+      if (this.listening) {
+        return;
+      }
+      this.dom.setAttribute('data-header-row', 'true');
+      if (this.isStickyHeaderEnabled) {
+        this.subscribe();
+      }
+    }
+
+    /**
+     * Variables
+     */
+  }, {
     key: "update",
     value:
     /**
@@ -138,6 +159,7 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
     value: function destroy() {
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
+        this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = (0, _dom2.getTree)(this.dom);
         if (tree) {
           this.makeRowHeaderNotSticky(tree.table, true);

package/dist/es2019/nodeviews/TableComponent.js

@@ -7,6 +7,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
@@ -14,6 +15,7 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -385,6 +387,23 @@ class TableComponent extends React.Component {
     }
   }
   componentDidMount() {
+    if (editorExperiment('platform_editor_nodevisibility', false)) {
+      this.initialiseEventListenersAfterMount();
+      return;
+    }
+    const {
+      observe
+    } = nodeVisibilityManager(this.props.view.dom);
+    if (this.table) {
+      this.nodeVisibilityObserverCleanupFn = observe({
+        element: this.table,
+        onFirstVisible: () => {
+          this.initialiseEventListenersAfterMount();
+        }
+      });
+    }
+  }
+  initialiseEventListenersAfterMount() {
     var _this$table, _this$table2, _this$table3;
     const {
       allowColumnResizing,
@@ -488,6 +507,9 @@ class TableComponent extends React.Component {
     if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
       this.dragAndDropCleanupFn();
     }
+    if (this.nodeVisibilityObserverCleanupFn) {
+      this.nodeVisibilityObserverCleanupFn();
+    }
     (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
     (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 ? void 0 : _this$wrapperReisizeO.disconnect();
     if (this.stickyScrollbar) {

package/dist/es2019/nodeviews/TableRow.js

@@ -2,9 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -69,12 +71,30 @@ export default class TableRow extends TableNodeView {
       this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
     }
     if (this.isHeaderRow) {
-      this.dom.setAttribute('data-header-row', 'true');
-      if (this.isStickyHeaderEnabled) {
-        this.subscribe();
+      if (editorExperiment('platform_editor_nodevisibility', false)) {
+        this.subscribeWhenRowVisible();
+      } else {
+        const {
+          observe
+        } = nodeVisibilityManager(view.dom);
+        this.nodeVisibilityObserverCleanupFn = observe({
+          element: this.contentDOM,
+          onFirstVisible: () => {
+            this.subscribeWhenRowVisible();
+          }
+        });
       }
     }
   }
+  subscribeWhenRowVisible() {
+    if (this.listening) {
+      return;
+    }
+    this.dom.setAttribute('data-header-row', 'true');
+    if (this.isStickyHeaderEnabled) {
+      this.subscribe();
+    }
+  }
 
   /**
    * Variables
@@ -117,6 +137,7 @@ export default class TableRow extends TableNodeView {
   destroy() {
     if (this.isStickyHeaderEnabled) {
       this.unsubscribe();
+      this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
       const tree = getTree(this.dom);
       if (tree) {
         this.makeRowHeaderNotSticky(tree.table, true);

package/dist/esm/nodeviews/TableComponent.js

@@ -20,6 +20,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
@@ -27,6 +28,7 @@ import { akEditorTableNumberColumnWidth, akEditorTableToolbarSize as tableToolba
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -394,10 +396,29 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   return _createClass(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      var _this2 = this;
+      if (editorExperiment('platform_editor_nodevisibility', false)) {
+        this.initialiseEventListenersAfterMount();
+        return;
+      }
+      var _nodeVisibilityManage = nodeVisibilityManager(this.props.view.dom),
+        observe = _nodeVisibilityManage.observe;
+      if (this.table) {
+        this.nodeVisibilityObserverCleanupFn = observe({
+          element: this.table,
+          onFirstVisible: function onFirstVisible() {
+            _this2.initialiseEventListenersAfterMount();
+          }
+        });
+      }
+    }
+  }, {
+    key: "initialiseEventListenersAfterMount",
+    value: function initialiseEventListenersAfterMount() {
       var _this$table,
         _this$table2,
         _this$table3,
-        _this2 = this;
+        _this3 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         allowTableResizing = _this$props7.allowTableResizing,
@@ -435,7 +456,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var _entry$contentRect3;
               var entry = _step2.value;
-              _this2.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
+              _this3.wrapperWidth = (_entry$contentRect3 = entry.contentRect) === null || _entry$contentRect3 === void 0 ? void 0 : _entry$contentRect3.width;
             }
           } catch (err) {
             _iterator2.e(err);
@@ -509,6 +530,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isDragAndDropEnabled && this.dragAndDropCleanupFn) {
         this.dragAndDropCleanupFn();
       }
+      if (this.nodeVisibilityObserverCleanupFn) {
+        this.nodeVisibilityObserverCleanupFn();
+      }
       (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
       (_this$wrapperReisizeO = this.wrapperReisizeObserver) === null || _this$wrapperReisizeO === void 0 || _this$wrapperReisizeO.disconnect();
       if (this.stickyScrollbar) {
@@ -578,7 +602,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "handleColgroupUpdates",
     value: function handleColgroupUpdates() {
       var _this$containerWidth,
-        _this3 = this;
+        _this4 = this;
       var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       var _this$props10 = this.props,
         getNode = _this$props10.getNode,
@@ -655,26 +679,26 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           }
           var scalePercent = 1;
           requestAnimationFrame(function () {
-            var _this3$props$options, _this3$props$options2;
+            var _this4$props$options, _this4$props$options2;
             // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
             // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
             // inside of getTableScalingPercent returns 0.
-            if (!((_this3$props$options = _this3.props.options) !== null && _this3$props$options !== void 0 && _this3$props$options.isCommentEditor) || (_this3$props$options2 = _this3.props.options) !== null && _this3$props$options2 !== void 0 && _this3$props$options2.isCommentEditor && tableNode.attrs.width) {
+            if (!((_this4$props$options = _this4.props.options) !== null && _this4$props$options !== void 0 && _this4$props$options.isCommentEditor) || (_this4$props$options2 = _this4.props.options) !== null && _this4$props$options2 !== void 0 && _this4$props$options2.isCommentEditor && tableNode.attrs.width) {
               scalePercent = getTableScalingPercent(tableNode,
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              _this3.table, shouldUseIncreasedScalingPercent);
+              _this4.table, shouldUseIncreasedScalingPercent);
             } else {
               // Ignored via go/ees005
               // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this3.table);
+              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this4.table);
             }
 
             // Request animation frame required for Firefox
             updateColgroup(resizeState,
             // Ignored via go/ees005
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            _this3.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
+            _this4.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
       }
@@ -694,7 +718,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props$options8,
         _this$props$options9,
         _this$wrapper,
-        _this4 = this;
+        _this5 = this;
       var _this$props11 = this.props,
         view = _this$props11.view,
         getNode = _this$props11.getNode,
@@ -742,10 +766,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
           window.requestAnimationFrame(function () {
-            _this4.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? _this4.updateShadowStateDebounced : _this4.updateShadowState,
+            _this5.overflowShadowsObserver = new OverflowShadowsObserver(fg('platform_editor_nested_tables_view_mode_sort') ? _this5.updateShadowStateDebounced : _this5.updateShadowState,
             // Ignored via go/ees005
             // eslint-disable-next-line @atlaskit/editor/no-as-casting
-            _this4.table, _this4.wrapper);
+            _this5.table, _this5.wrapper);
           });
         } else {
           this.overflowShadowsObserver = new OverflowShadowsObserver(this.updateShadowState, this.table, this.wrapper);
@@ -822,7 +846,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this5 = this,
+      var _this6 = this,
         _this$props$options10;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -912,8 +936,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         tableContainerWidth: tableContainerWidth,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper;
-          return ((_this5$wrapper = _this5.wrapper) === null || _this5$wrapper === void 0 ? void 0 : _this5$wrapper.scrollLeft) || 0;
+          var _this6$wrapper;
+          return ((_this6$wrapper = _this6.wrapper) === null || _this6$wrapper === void 0 ? void 0 : _this6$wrapper.scrollLeft) || 0;
         },
         tableWrapperHeight: this.state.tableWrapperHeight,
         api: pluginInjectionApi,
@@ -985,12 +1009,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         editorView: view,
         node: node,
         getScrollOffset: function getScrollOffset() {
-          var _this5$wrapper2;
-          return ((_this5$wrapper2 = _this5.wrapper) === null || _this5$wrapper2 === void 0 ? void 0 : _this5$wrapper2.scrollLeft) || 0;
+          var _this6$wrapper2;
+          return ((_this6$wrapper2 = _this6.wrapper) === null || _this6$wrapper2 === void 0 ? void 0 : _this6$wrapper2.scrollLeft) || 0;
         },
         getTableWrapperWidth: function getTableWrapperWidth() {
-          var _this5$wrapper3;
-          return ((_this5$wrapper3 = _this5.wrapper) === null || _this5$wrapper3 === void 0 ? void 0 : _this5$wrapper3.clientWidth) || 760;
+          var _this6$wrapper3;
+          return ((_this6$wrapper3 = _this6.wrapper) === null || _this6$wrapper3 === void 0 ? void 0 : _this6$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
         contentEditable: false
@@ -1012,14 +1036,14 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: classnames(ClassName.TABLE_NODE_WRAPPER),
         ref: function ref(elem) {
-          _this5.wrapper = elem;
+          _this6.wrapper = elem;
           if (elem) {
-            _this5.props.contentDOM(elem);
+            _this6.props.contentDOM(elem);
             var tableElement = elem.querySelector('table');
-            if (tableElement !== _this5.table) {
-              _this5.table = tableElement;
-              _this5.createShadowSentinels(_this5.table);
-              _this5.observeTable(_this5.table);
+            if (tableElement !== _this6.table) {
+              _this6.table = tableElement;
+              _this6.createShadowSentinels(_this6.table);
+              _this6.observeTable(_this6.table);
             }
           }
         }

package/dist/esm/nodeviews/TableRow.js

@@ -9,9 +9,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -77,19 +79,38 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
       _this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
     }
     if (_this.isHeaderRow) {
-      _this.dom.setAttribute('data-header-row', 'true');
-      if (_this.isStickyHeaderEnabled) {
-        _this.subscribe();
+      if (editorExperiment('platform_editor_nodevisibility', false)) {
+        _this.subscribeWhenRowVisible();
+      } else {
+        var _nodeVisibilityManage = nodeVisibilityManager(view.dom),
+          observe = _nodeVisibilityManage.observe;
+        _this.nodeVisibilityObserverCleanupFn = observe({
+          element: _this.contentDOM,
+          onFirstVisible: function onFirstVisible() {
+            _this.subscribeWhenRowVisible();
+          }
+        });
       }
     }
     return _this;
   }
-
-  /**
-   * Variables
-   */
   _inherits(TableRow, _TableNodeView);
   return _createClass(TableRow, [{
+    key: "subscribeWhenRowVisible",
+    value: function subscribeWhenRowVisible() {
+      if (this.listening) {
+        return;
+      }
+      this.dom.setAttribute('data-header-row', 'true');
+      if (this.isStickyHeaderEnabled) {
+        this.subscribe();
+      }
+    }
+
+    /**
+     * Variables
+     */
+  }, {
     key: "update",
     value:
     /**
@@ -131,6 +152,7 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
     value: function destroy() {
       if (this.isStickyHeaderEnabled) {
         this.unsubscribe();
+        this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
         var tree = getTree(this.dom);
         if (tree) {
           this.makeRowHeaderNotSticky(tree.table, true);

package/dist/types/nodeviews/TableRow.d.ts

@@ -3,7 +3,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
+    private nodeVisibilityObserverCleanupFn?;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    subscribeWhenRowVisible(): void;
     /**
      * Variables
      */

package/dist/types-ts4.5/nodeviews/TableRow.d.ts

@@ -3,7 +3,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import TableNodeView from './TableNodeViewBase';
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
+    private nodeVisibilityObserverCleanupFn?;
     constructor(node: PMNode, view: EditorView, getPos: () => number | undefined, eventDispatcher: EventDispatcher);
+    subscribeWhenRowVisible(): void;
     /**
      * Variables
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.10.7",
+	"version": "10.11.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,21 +32,21 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^105.9.0",
+		"@atlaskit/editor-common": "^105.10.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.4.1",
+		"@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
+		"@atlaskit/editor-plugin-extension": "5.4.2",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.2.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^26.2.0",
+		"@atlaskit/icon": "^26.3.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
 		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.25.0",
+		"@atlaskit/tmp-editor-statsig": "^5.0.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.0.0",

package/src/nodeviews/TableComponent.tsx

@@ -13,6 +13,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { tintDirtyTransaction } from '@atlaskit/editor-common/collab';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
@@ -28,6 +29,7 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
@@ -180,6 +182,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private updateColGroupFromFullWidthChange?: boolean;
 
 	private dragAndDropCleanupFn?: CleanupFn;
+	private nodeVisibilityObserverCleanupFn?: CleanupFn;
 
 	constructor(props: ComponentProps) {
 		super(props);
@@ -249,6 +252,23 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	componentDidMount() {
+		if (editorExperiment('platform_editor_nodevisibility', false)) {
+			this.initialiseEventListenersAfterMount();
+			return;
+		}
+
+		const { observe } = nodeVisibilityManager(this.props.view.dom);
+		if (this.table) {
+			this.nodeVisibilityObserverCleanupFn = observe({
+				element: this.table,
+				onFirstVisible: () => {
+					this.initialiseEventListenersAfterMount();
+				},
+			});
+		}
+	}
+
+	initialiseEventListenersAfterMount() {
 		const {
 			allowColumnResizing,
 			allowTableResizing,
@@ -366,6 +386,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			this.dragAndDropCleanupFn();
 		}
 
+		if (this.nodeVisibilityObserverCleanupFn) {
+			this.nodeVisibilityObserverCleanupFn();
+		}
+
 		this.resizeObserver?.disconnect();
 		this.wrapperReisizeObserver?.disconnect();
 

package/src/nodeviews/TableRow.ts

@@ -3,11 +3,13 @@ import throttle from 'lodash/throttle';
 
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
+import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
@@ -44,6 +46,8 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
+	private nodeVisibilityObserverCleanupFn?: () => void;
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
@@ -66,13 +70,31 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		}
 
 		if (this.isHeaderRow) {
-			this.dom.setAttribute('data-header-row', 'true');
-			if (this.isStickyHeaderEnabled) {
-				this.subscribe();
+			if (editorExperiment('platform_editor_nodevisibility', false)) {
+				this.subscribeWhenRowVisible();
+			} else {
+				const { observe } = nodeVisibilityManager(view.dom);
+				this.nodeVisibilityObserverCleanupFn = observe({
+					element: this.contentDOM,
+					onFirstVisible: () => {
+						this.subscribeWhenRowVisible();
+					},
+				});
 			}
 		}
 	}
 
+	subscribeWhenRowVisible() {
+		if (this.listening) {
+			return;
+		}
+
+		this.dom.setAttribute('data-header-row', 'true');
+		if (this.isStickyHeaderEnabled) {
+			this.subscribe();
+		}
+	}
+
 	/**
 	 * Variables
 	 */
@@ -151,6 +173,8 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		if (this.isStickyHeaderEnabled) {
 			this.unsubscribe();
 
+			this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
+
 			const tree = getTree(this.dom);
 			if (tree) {
 				this.makeRowHeaderNotSticky(tree.table, true);