@atlaskit/editor-plugin-table 14.2.7 → 14.3.0

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -4,7 +4,6 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
@@ -13,7 +12,7 @@ import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-cont
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
 import { dropTargetExtendedWidth } from '../../consts';
-import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
+import { DragHandle } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 const getSelectedRows = selection => {
   if (selection instanceof CellSelection && selection.isRowSelection()) {
@@ -155,23 +154,7 @@ export const DragControls = ({
         pointerEvents: 'none'
       },
       "data-testid": `table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`
-    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
-      isDragMenuTarget: !isHover,
-      direction: "row",
-      tableLocalId: currentNodeLocalId,
-      indexes: indexes,
-      forceDefaultHandle: !isHover,
-      previewWidth: tableWidth,
-      previewHeight: previewHeight,
-      appearance: appearance,
-      hoveredCell: hoveredCell,
-      onClick: handleClick,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
-      toggleDragMenu: toggleDragMenuHandler,
-      editorView: editorView,
-      api: api
-    }) : /*#__PURE__*/React.createElement(DragHandle, {
+    }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,

package/dist/es2019/ui/TableFloatingControls/index.js

@@ -5,12 +5,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
 import { isTableNested } from '../../pm-plugins/utils/nodes';
 import { TableCssClassName as ClassName } from '../../types';
-import { CornerControls } from './CornerControls/ClassicCornerControls';
-import { DragCornerControls, DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
+import { DragCornerControlsWithSelection } from './CornerControls/DragCornerControls';
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
-import { RowControls } from './RowControls/ClassicControls';
-import { DragControls, DragControlsWithSelection } from './RowControls/DragControls';
+import { DragControlsWithSelection } from './RowControls/DragControls';
 // Row controls
 export const TableFloatingControls = ({
   editorView,
@@ -109,7 +107,7 @@ export const TableFloatingControls = ({
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -133,29 +131,7 @@ export const TableFloatingControls = ({
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation,
       api: api
-    })) : /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing
-    }), /*#__PURE__*/React.createElement(DragControls, {
-      tableRef: tableRef,
-      tableNode: tableNode,
-      hoveredCell: hoveredCell,
-      isTableHovered: isTableHovered,
-      editorView: editorView,
-      tableActive: tableActive,
-      isInDanger: isInDanger,
-      isResizing: isResizing
-      // Ignored via go/ees005
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      ,
-      tableWidth: tableWrapperWidth,
-      hoverRows: _hoverRows,
-      selectRow: _selectRow,
-      selectRows: _selectRows,
-      updateCellHoverLocation: updateCellHoverLocation
-    }))) : fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    })) : /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -168,25 +144,7 @@ export const TableFloatingControls = ({
       hoverRows: _hoverRows,
       selectRow: _selectRow,
       api: api
-    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      isHeaderRowEnabled: isHeaderRowEnabled,
-      isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hoveredRows: hoveredRows,
-      stickyTop: tableActive ? stickyTop : undefined
-    }), /*#__PURE__*/React.createElement(RowControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      hoverRows: _hoverRows,
-      hoveredRows: hoveredRows,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      selectRow: _selectRow,
-      stickyTop: tableActive ? stickyTop : undefined
-    })))))
+    }))))
   );
 };
 export default TableFloatingControls;

package/dist/esm/nodeviews/TableComponent.js

@@ -33,7 +33,6 @@ import UFOLoadHold from '@atlaskit/react-ufo/load-hold';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils/autoscrollers';
-import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers/plugin-key';
 import { findStickyHeaderForTable } from '../pm-plugins/sticky-headers/util';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -523,14 +522,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        if (fg('disable-sticky-scrollbar-for-nested-tables')) {
-          if (this.table && !this.isNestedInTable) {
-            this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
-          }
-        } else {
-          if (this.table) {
-            this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
-          }
+        if (this.table && !this.isNestedInTable) {
+          this.stickyScrollbar = new TableStickyScrollbar(this.wrapper, this.props.view);
         }
         if (isDragAndDropEnabled) {
           this.dragAndDropCleanupFn = combine.apply(void 0, _toConsumableArray(autoScrollerFactory({
@@ -803,13 +796,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         options = _this$props1.options,
         isTableScalingEnabled = _this$props1.isTableScalingEnabled,
         getPos = _this$props1.getPos,
-        getEditorFeatureFlags = _this$props1.getEditorFeatureFlags;
-      var isInDanger = this.props.isInDanger;
+        getEditorFeatureFlags = _this$props1.getEditorFeatureFlags,
+        isInDanger = _this$props1.isInDanger;
       var table = findTable(view.state.selection);
-      if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
-        var pluginState = getPluginState(view.state);
-        isInDanger = pluginState.isInDanger;
-      }
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
       var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
@@ -831,14 +820,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
-      if (isInDanger && !table) {
-        clearHoverSelection()(view.state, view.dispatch);
+
+      // table is always defined so this never runs
+      if (!expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
+        if (isInDanger && !table) {
+          clearHoverSelection()(view.state, view.dispatch);
+        }
       }
       if ((_this$props$options1 = this.props.options) !== null && _this$props$options1 !== void 0 && _this$props$options1.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
-        if (this.props.isDragAndDropEnabled) {
+        // isDragAndDropEnabled will be false when the editorViewMode is 'live' and so the fix below is never triggered
+        // but the shadow observer must run async so its initial state is correct.
+        // note: when cleaning up platform_editor_table_drag_handle_hover entirely remove this nested if check incl. this.props.isDragAndDropEnabled
+        if (this.props.isDragAndDropEnabled || expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
           // requestAnimationFrame is used here to fix a race condition issue
           // that happens when a table is nested in expand and expand's width is
           // changed via breakout button
@@ -944,25 +940,16 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableScalingEnabled = _this$props10.isTableScalingEnabled,
         allowTableResizing = _this$props10.allowTableResizing,
         allowTableAlignment = _this$props10.allowTableAlignment,
-        selection = _this$props10.selection;
-      var _this$props11 = this.props,
-        isInDanger = _this$props11.isInDanger,
-        hoveredRows = _this$props11.hoveredRows,
-        hoveredCell = _this$props11.hoveredCell,
-        isTableHovered = _this$props11.isTableHovered,
-        isWholeTableInDanger = _this$props11.isWholeTableInDanger;
+        selection = _this$props10.selection,
+        isInDanger = _this$props10.isInDanger,
+        hoveredRows = _this$props10.hoveredRows,
+        hoveredCell = _this$props10.hoveredCell,
+        isTableHovered = _this$props10.isTableHovered,
+        isWholeTableInDanger = _this$props10.isWholeTableInDanger;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
-        var pluginState = getPluginState(view.state);
-        isInDanger = pluginState.isInDanger;
-        hoveredRows = pluginState.hoveredRows;
-        hoveredCell = pluginState.hoveredCell;
-        isTableHovered = pluginState.isTableHovered;
-        isWholeTableInDanger = pluginState.isWholeTableInDanger;
-      }
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
@@ -1076,11 +1063,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
-        "data-testid": "sticky-scrollbar-sentinel-top"
-      }) : /*#__PURE__*/React.createElement("div", {
+      }), !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
@@ -1126,7 +1109,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }, allowControls && colControls), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
+      }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         "data-vc-nvs": "true",
@@ -1153,27 +1136,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           height: '100%'
         },
         "data-vc-nvs": "true"
-      }) : /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
-        style: {
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: "var(--ds-space-250, 20px)",
-          // MAX_BROWSER_SCROLLBAR_HEIGHT
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          display: 'none',
-          // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-          width: isResizing ? "var(--ds-space-0, 0px)" : '100%'
-        },
-        "data-vc-nvs": "true"
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
-          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-          height: '100%'
-        },
-        "data-vc-nvs": "true"
-      })), /*#__PURE__*/React.createElement("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         contentEditable: false
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -1200,11 +1163,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
-      }), fg('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
-        "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }) : /*#__PURE__*/React.createElement("div", {
+      }), !this.isNestedInTable && /*#__PURE__*/React.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"

package/dist/esm/nodeviews/table.js

@@ -12,20 +12,15 @@ function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prot
 import React from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
-import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop/plugin-key';
 import { getPluginState } from '../pm-plugins/plugin-factory';
-import { pluginKey } from '../pm-plugins/plugin-key';
-import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../pm-plugins/utils/nodes';
-import TableComponent from './TableComponent';
 import { TableComponentWithSharedState } from './TableComponentWithSharedState';
 import { tableNodeSpecWithFixedToDOM } from './toDOM';
 var tableAttributes = function tableAttributes(node) {
@@ -211,129 +206,20 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _props$pluginInjectio,
-        _this4 = this;
-      if (fg('platform_editor_table_use_shared_state_hook_fg')) {
-        return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
-          forwardRef: forwardRef,
-          getNode: this.getNode,
-          view: props.view,
-          options: props.options,
-          eventDispatcher: props.eventDispatcher,
-          api: props.pluginInjectionApi,
-          allowColumnResizing: props.allowColumnResizing,
-          allowTableAlignment: props.allowTableAlignment,
-          allowTableResizing: props.allowTableResizing,
-          allowControls: props.allowControls,
-          getPos: props.getPos,
-          getEditorFeatureFlags: props.getEditorFeatureFlags,
-          dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
-        });
-      }
-      // Please, do not copy or use this kind of code below
-      // @ts-ignore
-      var fakePluginKey = {
-        key: 'widthPlugin$',
-        getState: function getState(state) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          return state['widthPlugin$'];
-        }
-      };
-
-      // Please, do not copy or use this kind of code below
-      // @ts-ignore
-      var fakeMediaPluginKey = {
-        key: 'mediaPlugin$',
-        getState: function getState(state) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          return state['mediaPlugin$'];
-        }
-      };
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          pluginState: pluginKey,
-          tableResizingPluginState: tableResizingPluginKey,
-          tableWidthPluginState: tableWidthPluginKey,
-          widthPlugin: fakePluginKey,
-          mediaState: fakeMediaPluginKey,
-          tableDragAndDropState: tableDragAndDropPluginKey,
-          limitedModePlugin: (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 || (_props$pluginInjectio = _props$pluginInjectio.limitedMode) === null || _props$pluginInjectio === void 0 || (_props$pluginInjectio = _props$pluginInjectio.sharedState.currentState()) === null || _props$pluginInjectio === void 0 ? void 0 : _props$pluginInjectio.limitedModePluginKey
-        },
-        editorView: props.view,
-        render: function render(pluginStates) {
-          var _props$options, _pluginStates$limited, _pluginStates$limited2;
-          var tableResizingPluginState = pluginStates.tableResizingPluginState,
-            tableWidthPluginState = pluginStates.tableWidthPluginState,
-            pluginState = pluginStates.pluginState,
-            mediaState = pluginStates.mediaState;
-          var containerWidth = props.getEditorContainerWidth();
-          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
-          var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
-
-          /**
-           *  ED-19810
-           *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
-           *  directly to confluence since this bug is now in production.
-           */
-          var tablePos;
-          try {
-            tablePos = props.getPos ? props.getPos() : undefined;
-          } catch (e) {
-            tablePos = undefined;
-          }
-
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          var tableActive = tablePos === pluginState.tablePos && !isTableResizing;
-          return /*#__PURE__*/React.createElement(TableComponent, {
-            view: props.view,
-            allowColumnResizing: props.allowColumnResizing,
-            eventDispatcher: props.eventDispatcher,
-            getPos: props.getPos,
-            isMediaFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
-            options: props.options
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            allowControls: pluginState.pluginConfig.allowControls
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            isHeaderRowEnabled: pluginState.isHeaderRowEnabled
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
-            isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
-            ,
-            allowTableAlignment: props.allowTableAlignment,
-            allowTableResizing: props.allowTableResizing,
-            tableActive: tableActive
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            ordering: pluginState.ordering,
-            isResizing: isResizing,
-            getNode: _this4.getNode
-            // Ignored via go/ees005
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            ,
-            containerWidth: containerWidth,
-            contentDOM: forwardRef,
-            getEditorFeatureFlags: props.getEditorFeatureFlags,
-            dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
-            pluginInjectionApi: props.pluginInjectionApi,
-            limitedMode: (_pluginStates$limited = (_pluginStates$limited2 = pluginStates.limitedModePlugin) === null || _pluginStates$limited2 === void 0 ? void 0 : _pluginStates$limited2.documentSizeBreachesThreshold) !== null && _pluginStates$limited !== void 0 ? _pluginStates$limited : false
-          });
-        }
+      return /*#__PURE__*/React.createElement(TableComponentWithSharedState, {
+        forwardRef: forwardRef,
+        getNode: this.getNode,
+        view: props.view,
+        options: props.options,
+        eventDispatcher: props.eventDispatcher,
+        api: props.pluginInjectionApi,
+        allowColumnResizing: props.allowColumnResizing,
+        allowTableAlignment: props.allowTableAlignment,
+        allowTableResizing: props.allowTableResizing,
+        allowControls: props.allowControls,
+        getPos: props.getPos,
+        getEditorFeatureFlags: props.getEditorFeatureFlags,
+        dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
       });
     }
   }, {

package/dist/esm/pm-plugins/utils/analytics.js

@@ -198,4 +198,36 @@ export var useMeasureFramerate = function useMeasureFramerate() {
     endMeasure: endMeasure,
     countFrames: countFrames
   };
+};
+var tableContainerNodes = new Set(['layoutSection', 'layoutColumn', 'expand', 'nestedExpand', 'extension', 'bodiedExtension', 'multiBodiedExtension', 'extensionFrame', 'table', 'tableCell', 'tableHeader', 'tableRow']);
+export var getWidthInfoPayload = function getWidthInfoPayload(editorView, editorWidth) {
+  var tablesInfo = [];
+  editorView.state.doc.nodesBetween(0, editorView.state.doc.content.size, function (node, pos, parent) {
+    if (!tableContainerNodes.has(node.type.name)) {
+      return false;
+    }
+    if (node.type.name === 'table') {
+      var _domAtPos$node;
+      var domAtPos = editorView.domAtPos(pos + 1);
+      var table = (_domAtPos$node = domAtPos.node) === null || _domAtPos$node === void 0 ? void 0 : _domAtPos$node.parentElement;
+      var isNestedTable = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableCell' || (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableHeader';
+      if (table instanceof HTMLTableElement) {
+        tablesInfo.push({
+          tableWidth: table.scrollWidth,
+          isNestedTable: isNestedTable,
+          hasScrollbar: table.parentElement ? (table === null || table === void 0 ? void 0 : table.parentElement.clientWidth) < table.scrollWidth : false
+        });
+      }
+    }
+  });
+  return {
+    action: TABLE_ACTION.TABLE_WIDTH_INFO,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    attributes: {
+      editorWidth: editorWidth,
+      tableWidthInfo: tablesInfo,
+      mode: 'editor'
+    },
+    eventType: EVENT_TYPE.OPERATIONAL
+  };
 };

package/dist/esm/tablePlugin.js

@@ -15,6 +15,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { tableNodeSpecWithFixedToDOM } from './nodeviews/toDOM';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
@@ -38,6 +39,7 @@ import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap'
 import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
+import { getWidthInfoPayload } from './pm-plugins/utils/analytics';
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
@@ -46,6 +48,9 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
 
+// we want to calculate all the table widths (which causes reflows) after the editor has finished loading to mitigate performance impact
+var TABLE_WIDTH_INFO_TIMEOUT = 10000;
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -401,13 +406,45 @@ var tablePlugin = function tablePlugin(_ref) {
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
-        plugin: function plugin() {
+        plugin: function plugin(_ref17) {
+          var dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return new SafePlugin({
             view: function view(editorView) {
               editorViewRef.current = editorView;
+              var setTimeoutID;
+              var rafID;
+              var ricID;
+              if (expValEquals('platform_editor_editor_width_analytics', 'isEnabled', true)) {
+                // send statistics about the widths of the tables on the page for alerting
+                // only send this event once, after the editorView is first initialised
+                setTimeoutID = setTimeout(function () {
+                  var requestIdleCallbackFn = function requestIdleCallbackFn() {
+                    var _api$width$sharedStat2;
+                    var editorWidth = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width;
+                    if (editorWidth && editorViewRef.current) {
+                      dispatchAnalyticsEvent(getWidthInfoPayload(editorViewRef.current, editorWidth));
+                    }
+                  };
+                  if (window && typeof window.requestIdleCallback === 'function') {
+                    ricID = window.requestIdleCallback(requestIdleCallbackFn);
+                  } else if (window && typeof window.requestAnimationFrame === 'function') {
+                    // requestIdleCallback is not supported in safari, fallback to requestAnimationFrame
+                    rafID = window.requestAnimationFrame(requestIdleCallbackFn);
+                  }
+                }, TABLE_WIDTH_INFO_TIMEOUT);
+              }
               return {
                 destroy: function destroy() {
                   editorViewRef.current = null;
+                  if (setTimeoutID) {
+                    clearTimeout(setTimeoutID);
+                  }
+                  if (rafID) {
+                    window.cancelAnimationFrame(rafID);
+                  }
+                  if (ricID) {
+                    window.cancelIdleCallback(ricID);
+                  }
                 }
               };
             }
@@ -415,8 +452,8 @@ var tablePlugin = function tablePlugin(_ref) {
         }
       }, {
         name: 'tableSizeSelectorPlugin',
-        plugin: function plugin(_ref17) {
-          var dispatch = _ref17.dispatch;
+        plugin: function plugin(_ref18) {
+          var dispatch = _ref18.dispatch;
           return isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined;
         }
       }];
@@ -433,12 +470,12 @@ var tablePlugin = function tablePlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref18) {
-      var editorView = _ref18.editorView,
-        popupsMountPoint = _ref18.popupsMountPoint,
-        popupsBoundariesElement = _ref18.popupsBoundariesElement,
-        popupsScrollableElement = _ref18.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref19) {
+      var editorView = _ref19.editorView,
+        popupsMountPoint = _ref19.popupsMountPoint,
+        popupsBoundariesElement = _ref19.popupsBoundariesElement,
+        popupsScrollableElement = _ref19.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref19.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ContentComponent, {
         api: api,
         editorView: editorView,
@@ -453,8 +490,8 @@ var tablePlugin = function tablePlugin(_ref) {
       });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref19) {
-        var formatMessage = _ref19.formatMessage;
+      quickInsert: function quickInsert(_ref20) {
+        var formatMessage = _ref20.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),
@@ -525,8 +562,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref20) {
-      var editorView = _ref20.editorView;
+    usePluginHook: function usePluginHook(_ref21) {
+      var editorView = _ref21.editorView;
       var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
           var _states$editorViewMod;
           return {