@atlaskit/editor-plugin-table 10.10.7 → 10.11.1

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/TableComponentWithSharedState.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 import TableComponent from './TableComponent';
@@ -36,6 +37,9 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
   // widthState
   var width = useSharedPluginStateSelector(api, 'width.width');
   var lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+
+  // interactionState
+  var interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
   return {
     tableState: undefined,
     widthState: undefined,
@@ -53,15 +57,17 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     selection: selection,
     mode: mode,
     width: width,
-    lineLength: lineLength
+    lineLength: lineLength,
+    interaction: interaction
   };
 }, function (api) {
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
     selectionState = _useSharedPluginState.selectionState,
-    editorViewModeState = _useSharedPluginState.editorViewModeState;
+    editorViewModeState = _useSharedPluginState.editorViewModeState,
+    interactionState = _useSharedPluginState.interactionState;
   var tableStateInternal = tableState;
   return {
     tableState: tableState,
@@ -80,7 +86,8 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
     mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
     width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
-    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength
+    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
+    interaction: interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState
   };
 });
 
@@ -118,7 +125,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     lineLength = _useSharedState.lineLength,
     ordering = _useSharedState.ordering,
     selection = _useSharedState.selection,
-    width = _useSharedState.width;
+    width = _useSharedState.width,
+    interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
@@ -152,7 +160,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,
-    tableActive: tableActive && !isLivePageViewMode,
+    tableActive: tableActive && !isLivePageViewMode && (interaction !== 'hasNotHadInteraction' || !fg('platform_editor_hide_expand_selection_states')),
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,

package/dist/esm/nodeviews/TableResizer.js

@@ -13,6 +13,7 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -139,6 +140,7 @@ export var TableResizer = function TableResizer(_ref) {
   var isResizing = useRef(false);
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
+  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
   var _useSharedState = useSharedState(pluginInjectionApi),
     widthToWidest = _useSharedState.widthToWidest;
 
@@ -160,6 +162,9 @@ export var TableResizer = function TableResizer(_ref) {
     if (typeof tableFromSelectionPosition !== 'number') {
       return false;
     }
+    if (interactionState === 'hasNotHadInteraction' && fg('platform_editor_hide_expand_selection_states')) {
+      return false;
+    }
     var currentNodePosition;
     try {
       // The React Table and the ProseMirror can endup out-of-sync
@@ -172,7 +177,7 @@ export var TableResizer = function TableResizer(_ref) {
       return false;
     }
     return tableFromSelectionPosition === currentNodePosition;
-  }, [tableFromSelectionPosition, getPos]);
+  }, [tableFromSelectionPosition, interactionState, getPos]);
   var resizerMinWidth = getResizerMinWidth(node);
   var handleSize = getResizerHandleHeight(tableRef);
   var _useMeasureFramerate = useMeasureFramerate(),

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/tablePluginType.d.ts

@@ -8,6 +8,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig, TableSharedState } from './types';
@@ -47,7 +48,8 @@ export type TablePluginDependencies = [
     OptionalPlugin<MediaPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ExtensionPlugin>
+    OptionalPlugin<ExtensionPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type TablePlugin = NextEditorPlugin<'table', {
     pluginConfiguration: TablePluginOptions | undefined;

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/dist/types-ts4.5/tablePluginType.d.ts

@@ -8,6 +8,7 @@ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmo
 import type { ExtensionPlugin } from '@atlaskit/editor-plugin-extension';
 import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
+import type { InteractionPlugin } from '@atlaskit/editor-plugin-interaction';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { PluginConfig, TableSharedState } from './types';
@@ -47,7 +48,8 @@ export type TablePluginDependencies = [
     OptionalPlugin<MediaPlugin>,
     OptionalPlugin<EditorViewModePlugin>,
     OptionalPlugin<FeatureFlagsPlugin>,
-    OptionalPlugin<ExtensionPlugin>
+    OptionalPlugin<ExtensionPlugin>,
+    OptionalPlugin<InteractionPlugin>
 ];
 export type TablePlugin = NextEditorPlugin<'table', {
     pluginConfiguration: TablePluginOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.10.7",
+	"version": "10.11.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,21 +32,22 @@
 		"@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.11.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-interaction": "^1.1.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 +55,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.1.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@atlaskit/tooltip": "^20.0.0",
@@ -218,6 +219,9 @@
 		},
 		"platform_editor_table_fw_numcol_overflow_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_hide_expand_selection_states": {
+			"type": "boolean"
 		}
 	}
 }

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/TableComponentWithSharedState.tsx

@@ -11,6 +11,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
@@ -68,6 +69,9 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 		const width = useSharedPluginStateSelector(api, 'width.width');
 		const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
 
+		// interactionState
+		const interaction = useSharedPluginStateSelector(api, 'interaction.interactionState');
+
 		return {
 			tableState: undefined,
 			widthState: undefined,
@@ -86,11 +90,25 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 			mode,
 			width,
 			lineLength,
+			interaction,
 		};
 	},
 	(api: PluginInjectionAPI | undefined) => {
-		const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
-			useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+		const {
+			widthState,
+			tableState,
+			mediaState,
+			selectionState,
+			editorViewModeState,
+			interactionState,
+		} = useSharedPluginState(api, [
+			'width',
+			'table',
+			'media',
+			'selection',
+			'editorViewMode',
+			'interaction',
+		]);
 		const tableStateInternal = tableState as TableSharedStateInternal | undefined;
 
 		return {
@@ -111,6 +129,7 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 			mode: editorViewModeState?.mode,
 			width: widthState?.width,
 			lineLength: widthState?.lineLength,
+			interaction: interactionState?.interactionState,
 		};
 	},
 );
@@ -151,7 +170,9 @@ export const TableComponentWithSharedState = ({
 		ordering,
 		selection,
 		width,
+		interaction,
 	} = useSharedState(api);
+
 	const isLivePageViewMode = mode === 'view';
 
 	if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
@@ -195,7 +216,12 @@ export const TableComponentWithSharedState = ({
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}
 			allowTableResizing={allowTableResizing}
-			tableActive={tableActive && !isLivePageViewMode}
+			tableActive={
+				tableActive &&
+				!isLivePageViewMode &&
+				(interaction !== 'hasNotHadInteraction' ||
+					!fg('platform_editor_hide_expand_selection_states'))
+			}
 			ordering={ordering}
 			isResizing={isResizing}
 			getNode={getNode}

package/src/nodeviews/TableResizer.tsx

@@ -22,6 +22,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -231,6 +232,12 @@ export const TableResizer = ({
 	const isResizing = useRef(false);
 	const areResizeMetaKeysPressed = useRef(false);
 	const resizerRef = useRef<ResizerNextHandler>(null);
+
+	const interactionState = useSharedPluginStateSelector(
+		pluginInjectionApi,
+		'interaction.interactionState',
+	);
+
 	const { widthToWidest } = useSharedState(pluginInjectionApi);
 
 	// used to reposition tooltip when table is resizing via keyboard
@@ -250,6 +257,13 @@ export const TableResizer = ({
 			return false;
 		}
 
+		if (
+			interactionState === 'hasNotHadInteraction' &&
+			fg('platform_editor_hide_expand_selection_states')
+		) {
+			return false;
+		}
+
 		let currentNodePosition: number | undefined;
 		try {
 			// The React Table and the ProseMirror can endup out-of-sync
@@ -263,7 +277,7 @@ export const TableResizer = ({
 		}
 
 		return tableFromSelectionPosition === currentNodePosition;
-	}, [tableFromSelectionPosition, getPos]);
+	}, [tableFromSelectionPosition, interactionState, getPos]);
 
 	const resizerMinWidth = getResizerMinWidth(node);
 	const handleSize = getResizerHandleHeight(tableRef);