@atlaskit/editor-plugin-table 14.2.7 → 14.3.0

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

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
@@ -166,23 +165,7 @@ var DragControls = exports.DragControls = function DragControls(_ref) {
         pointerEvents: 'none'
       },
       "data-testid": "table-floating-row-".concat(isHover ? rowIndex : selectedRowIndexes[0], "-drag-handle")
-    }, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_DragHandle.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.default.createElement(_DragHandle.DragHandle, {
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",
       tableLocalId: currentNodeLocalId,

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

@@ -13,11 +13,9 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../pm-plugins/commands");
 var _nodes = require("../../pm-plugins/utils/nodes");
 var _types = require("../../types");
-var _ClassicCornerControls = require("./CornerControls/ClassicCornerControls");
 var _DragCornerControls = require("./CornerControls/DragCornerControls");
 var _FloatingControlsWithSelection = require("./FloatingControlsWithSelection");
 var _NumberColumn = _interopRequireDefault(require("./NumberColumn"));
-var _ClassicControls = require("./RowControls/ClassicControls");
 var _DragControls = require("./RowControls/DragControls");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // Row controls
@@ -111,7 +109,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -135,29 +133,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation,
       api: api
-    })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, shouldShowCornerControls && /*#__PURE__*/_react.default.createElement(_DragCornerControls.DragCornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing
-    }), /*#__PURE__*/_react.default.createElement(_DragControls.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
-    }))) : (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
+    })) : /*#__PURE__*/_react.default.createElement(_FloatingControlsWithSelection.FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
@@ -170,25 +146,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
       hoverRows: _hoverRows,
       selectRow: _selectRow,
       api: api
-    }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ClassicCornerControls.CornerControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      isHeaderRowEnabled: isHeaderRowEnabled,
-      isHeaderColumnEnabled: isHeaderColumnEnabled,
-      hoveredRows: hoveredRows,
-      stickyTop: tableActive ? stickyTop : undefined
-    }), /*#__PURE__*/_react.default.createElement(_ClassicControls.RowControls, {
-      editorView: editorView,
-      tableRef: tableRef,
-      hoverRows: _hoverRows,
-      hoveredRows: hoveredRows,
-      isInDanger: isInDanger,
-      isResizing: isResizing,
-      selectRow: _selectRow,
-      stickyTop: tableActive ? stickyTop : undefined
-    })))))
+    }))))
   );
 };
 var _default = exports.default = TableFloatingControls;

package/dist/es2019/nodeviews/TableComponent.js

@@ -19,7 +19,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';
@@ -503,14 +502,8 @@ class TableComponent extends 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(...autoScrollerFactory({
@@ -775,16 +768,10 @@ class TableComponent extends React.Component {
       isTableScalingEnabled,
       // we could use options.isTableScalingEnabled here
       getPos,
-      getEditorFeatureFlags
-    } = this.props;
-    let {
+      getEditorFeatureFlags,
       isInDanger
     } = this.props;
     const table = findTable(view.state.selection);
-    if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
-      const pluginState = getPluginState(view.state);
-      isInDanger = pluginState.isInDanger;
-    }
     let shouldScale = false;
     let shouldHandleColgroupUpdates = false;
     const {
@@ -806,14 +793,21 @@ class TableComponent extends 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$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
       this.removeInlineTableWidth();
     }
     if ((_this$wrapper2 = this.wrapper) !== null && _this$wrapper2 !== void 0 && _this$wrapper2.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
@@ -919,9 +913,7 @@ class TableComponent extends React.Component {
       // here we can use options.isTableScalingEnabled
       allowTableResizing,
       allowTableAlignment,
-      selection
-    } = this.props;
-    let {
+      selection,
       isInDanger,
       hoveredRows,
       hoveredCell,
@@ -933,14 +925,6 @@ class TableComponent extends React.Component {
       showAfterShadow
     } = this.state;
     const node = getNode();
-    if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
-      const pluginState = getPluginState(view.state);
-      isInDanger = pluginState.isInDanger;
-      hoveredRows = pluginState.hoveredRows;
-      hoveredCell = pluginState.hoveredCell;
-      isTableHovered = pluginState.isTableHovered;
-      isWholeTableInDanger = pluginState.isWholeTableInDanger;
-    }
     const tableRef = this.table || undefined;
     const headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
     const hasHeaderRow = containsHeaderRow(node);
@@ -1058,11 +1042,7 @@ class TableComponent extends 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"
@@ -1108,7 +1088,7 @@ class TableComponent extends 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",
@@ -1135,27 +1115,7 @@ class TableComponent extends 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
       ,
@@ -1182,11 +1142,7 @@ class TableComponent extends 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/es2019/nodeviews/table.js

@@ -2,20 +2,15 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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';
 const tableAttributes = node => {
@@ -183,130 +178,20 @@ export default class TableView extends ReactNodeView {
     }
   }
   render(props, forwardRef) {
-    var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3;
-    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
-    const fakePluginKey = {
-      key: 'widthPlugin$',
-      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
-    const fakeMediaPluginKey = {
-      key: 'mediaPlugin$',
-      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 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.limitedMode) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.sharedState.currentState()) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.limitedModePluginKey
-      },
-      editorView: props.view,
-      render: pluginStates => {
-        var _props$options, _pluginStates$limited, _pluginStates$limited2;
-        const {
-          tableResizingPluginState,
-          tableWidthPluginState,
-          pluginState,
-          mediaState
-        } = pluginStates;
-        const containerWidth = props.getEditorContainerWidth();
-        const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
-        const 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.
-         */
-        let 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
-        const 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: this.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
     });
   }
   viewShouldUpdate(nextNode) {

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

@@ -184,4 +184,36 @@ export const useMeasureFramerate = (config = {}) => {
     endMeasure,
     countFrames
   };
+};
+const tableContainerNodes = new Set(['layoutSection', 'layoutColumn', 'expand', 'nestedExpand', 'extension', 'bodiedExtension', 'multiBodiedExtension', 'extensionFrame', 'table', 'tableCell', 'tableHeader', 'tableRow']);
+export const getWidthInfoPayload = (editorView, editorWidth) => {
+  const tablesInfo = [];
+  editorView.state.doc.nodesBetween(0, editorView.state.doc.content.size, (node, pos, parent) => {
+    if (!tableContainerNodes.has(node.type.name)) {
+      return false;
+    }
+    if (node.type.name === 'table') {
+      var _domAtPos$node;
+      const domAtPos = editorView.domAtPos(pos + 1);
+      const table = (_domAtPos$node = domAtPos.node) === null || _domAtPos$node === void 0 ? void 0 : _domAtPos$node.parentElement;
+      const 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/es2019/tablePlugin.js

@@ -12,6 +12,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';
@@ -35,12 +36,16 @@ 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';
 import { getToolbarConfig } from './ui/toolbar';
 const defaultGetEditorFeatureFlags = () => ({});
 
+// we want to calculate all the table widths (which causes reflows) after the editor has finished loading to mitigate performance impact
+const TABLE_WIDTH_INFO_TIMEOUT = 10000;
+
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -398,13 +403,46 @@ const tablePlugin = ({
         }) => createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent)
       }, {
         name: 'tableGetEditorViewReferencePlugin',
-        plugin: () => {
+        plugin: ({
+          dispatchAnalyticsEvent
+        }) => {
           return new SafePlugin({
             view: editorView => {
               editorViewRef.current = editorView;
+              let setTimeoutID;
+              let rafID;
+              let 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(() => {
+                  const requestIdleCallbackFn = () => {
+                    var _api$width$sharedStat2;
+                    const editorWidth = api === null || api === void 0 ? 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: () => {
                   editorViewRef.current = null;
+                  if (setTimeoutID) {
+                    clearTimeout(setTimeoutID);
+                  }
+                  if (rafID) {
+                    window.cancelAnimationFrame(rafID);
+                  }
+                  if (ricID) {
+                    window.cancelIdleCallback(ricID);
+                  }
                 }
               };
             }

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

@@ -59,6 +59,7 @@ const DragHandleComponent = ({
   const {
     isDragMenuOpen = false
   } = getDnDPluginState(state);
+  const [isHovered, setIsHovered] = useState(false);
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
 
@@ -100,7 +101,7 @@ const DragHandleComponent = ({
   }, [indexes, selection, direction, hoveredCell]);
   const handleIconProps = {
     forceDefaultHandle,
-    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
+    isHandleHovered: expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true) ? isHovered : isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells
   };
   useEffect(() => {
@@ -212,10 +213,20 @@ const DragHandleComponent = ({
     "aria-haspopup": "menu"
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ,
-    onMouseOver: onMouseOver
+    onMouseOver: e => {
+      if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
+        setIsHovered(true);
+      }
+      onMouseOver && onMouseOver(e);
+    }
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ,
-    onMouseOut: onMouseOut,
+    onMouseOut: e => {
+      if (expValEquals('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
+        setIsHovered(false);
+      }
+      onMouseOut && onMouseOut(e);
+    },
     onMouseUp: e => {
       // return focus to editor so copying table selections whilst still works, i cannot call e.preventDefault in a mousemove event as this stops dragstart events from firing
       // -> this is bad for a11y but is the current standard new copy/paste keyboard shortcuts should be introduced instead
@@ -298,5 +309,4 @@ const DragHandleComponentWithSharedState = ({
     hoveredRows: hoveredRows
   });
 };
-export const DragHandle = injectIntl(DragHandleComponent);
-export const DragHandleWithSharedState = injectIntl(DragHandleComponentWithSharedState);
+export const DragHandle = injectIntl(DragHandleComponentWithSharedState);

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -6,13 +6,12 @@ import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverCell, hoverColumns, selectColumn, selectColumns } from '../../../pm-plugins/commands';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import { getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedColumnIndexes } from '../../../pm-plugins/utils/selection';
 import { TableCssClassName as ClassName } from '../../../types';
-import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
+import { DragHandle } from '../../DragHandle';
 const getSelectedColumns = selection => {
   if (selection instanceof CellSelection && selection.isColSelection()) {
     const rect = getSelectionRect(selection);
@@ -173,23 +172,7 @@ export const ColumnControls = ({
         position: 'relative'
       },
       "data-testid": `table-floating-column-${isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]}-drag-handle`
-    }, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(DragHandleWithSharedState, {
-      isDragMenuTarget: !isHover,
-      direction: "column",
-      tableLocalId: localId || '',
-      indexes: indexes,
-      hoveredCell: hoveredCell,
-      previewWidth: previewWidth,
-      forceDefaultHandle: !isHover,
-      previewHeight: previewHeight,
-      appearance: appearance,
-      onClick: handleClick,
-      onMouseOver: handleMouseOver,
-      onMouseOut: handleMouseOut,
-      toggleDragMenu: toggleDragMenuHandler,
-      editorView: editorView,
-      api: api
-    }) : /*#__PURE__*/React.createElement(DragHandle, {
+    }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
 import { containsHeaderColumn } from '../../pm-plugins/utils/nodes';
@@ -93,7 +92,7 @@ const TableFloatingColumnControls = ({
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined
+    api: api
   }), isDragging && /*#__PURE__*/React.createElement(ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,