@atlaskit/editor-plugin-table 14.2.7 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-table
 
+## 14.3.0
+
+### Minor Changes
+
+- [`f3461c712ac67`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3461c712ac67) -
+  Remove platform_editor_table_use_shared_state_hook_fg FG, add
+  platform_editor_table_drag_handle_hover experiments
+- [`687c1b8fa7801`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/687c1b8fa7801) -
+  EDITOR-1566 bump adf-schema + update validator
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.2.7
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -33,7 +33,6 @@ var _loadHold = _interopRequireDefault(require("@atlaskit/react-ufo/load-hold"))
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _commands = require("../pm-plugins/commands");
 var _autoscrollers = require("../pm-plugins/drag-and-drop/utils/autoscrollers");
-var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _pluginKey = require("../pm-plugins/sticky-headers/plugin-key");
 var _util = require("../pm-plugins/sticky-headers/util");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
@@ -529,14 +528,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced, {
           passive: true
         });
-        if ((0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables')) {
-          if (this.table && !this.isNestedInTable) {
-            this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
-          }
-        } else {
-          if (this.table) {
-            this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
-          }
+        if (this.table && !this.isNestedInTable) {
+          this.stickyScrollbar = new _TableStickyScrollbar.TableStickyScrollbar(this.wrapper, this.props.view);
         }
         if (isDragAndDropEnabled) {
           this.dragAndDropCleanupFn = _combine.combine.apply(void 0, (0, _toConsumableArray2.default)((0, _autoscrollers.autoScrollerFactory)({
@@ -809,13 +802,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 = (0, _utils2.findTable)(view.state.selection);
-      if (!(0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
-        var pluginState = (0, _pluginFactory.getPluginState)(view.state);
-        isInDanger = pluginState.isInDanger;
-      }
       var shouldScale = false;
       var shouldHandleColgroupUpdates = false;
       var _getEditorFeatureFlag5 = getEditorFeatureFlags(),
@@ -837,14 +826,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (shouldHandleColgroupUpdates) {
         this.handleColgroupUpdates();
       }
-      if (isInDanger && !table) {
-        (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
+
+      // table is always defined so this never runs
+      if (!(0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
+        if (isInDanger && !table) {
+          (0, _commands.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 || (0, _expValEquals.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
@@ -950,25 +946,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 (!(0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
-        var pluginState = (0, _pluginFactory.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 = (0, _nodes.containsHeaderRow)(node);
@@ -1082,11 +1069,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"
-      }), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
-        "data-testid": "sticky-scrollbar-sentinel-top"
-      }) : /*#__PURE__*/_react.default.createElement("div", {
+      }), !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
@@ -1132,7 +1115,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             }
           }
         }
-      }, allowControls && colControls), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
+      }, allowControls && colControls), !this.isNestedInTable ? /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER,
         "data-vc-nvs": "true",
@@ -1159,27 +1142,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           height: '100%'
         },
         "data-vc-nvs": "true"
-      }) : /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _types.TableCssClassName.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.default.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.default.createElement("div", {
+      }), /*#__PURE__*/_react.default.createElement("div", {
         contentEditable: false
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
@@ -1206,11 +1169,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
         "data-testid": "sticky-sentinel-bottom"
-      }), (0, _platformFeatureFlags.fg)('disable-sticky-scrollbar-for-nested-tables') ? !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
-        "data-testid": "sticky-scrollbar-sentinel-bottom"
-      }) : /*#__PURE__*/_react.default.createElement("div", {
+      }), !this.isNestedInTable && /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
         "data-testid": "sticky-scrollbar-sentinel-bottom"

package/dist/cjs/nodeviews/table.js

@@ -16,20 +16,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _createPluginConfig = require("../pm-plugins/create-plugin-config");
-var _pluginKey = require("../pm-plugins/drag-and-drop/plugin-key");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
-var _pluginKey2 = require("../pm-plugins/plugin-key");
-var _pluginKey3 = require("../pm-plugins/table-resizing/plugin-key");
 var _tableWidth = require("../pm-plugins/table-width");
 var _nodes = require("../pm-plugins/utils/nodes");
-var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 var _TableComponentWithSharedState = require("./TableComponentWithSharedState");
 var _toDOM = require("./toDOM");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -218,129 +213,20 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "render",
     value: function render(props, forwardRef) {
-      var _props$pluginInjectio,
-        _this4 = this;
-      if ((0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg')) {
-        return /*#__PURE__*/_react.default.createElement(_TableComponentWithSharedState.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.default.createElement(_withPluginState.WithPluginState, {
-        plugins: {
-          pluginState: _pluginKey2.pluginKey,
-          tableResizingPluginState: _pluginKey3.pluginKey,
-          tableWidthPluginState: _tableWidth.pluginKey,
-          widthPlugin: fakePluginKey,
-          mediaState: fakeMediaPluginKey,
-          tableDragAndDropState: _pluginKey.pluginKey,
-          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.default.createElement(_TableComponent.default, {
-            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.default.createElement(_TableComponentWithSharedState.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/cjs/pm-plugins/utils/analytics.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.generateResizedPayload = exports.generateResizeFrameRatePayloads = void 0;
 exports.getSelectedCellInfo = getSelectedCellInfo;
 exports.getSelectedTableInfo = getSelectedTableInfo;
-exports.withEditorAnalyticsAPI = exports.useMeasureFramerate = exports.reduceResizeFrameRateSamples = void 0;
+exports.withEditorAnalyticsAPI = exports.useMeasureFramerate = exports.reduceResizeFrameRateSamples = exports.getWidthInfoPayload = void 0;
 var _react = require("react");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
@@ -207,4 +207,36 @@ var useMeasureFramerate = exports.useMeasureFramerate = function useMeasureFrame
     endMeasure: endMeasure,
     countFrames: countFrames
   };
+};
+var tableContainerNodes = new Set(['layoutSection', 'layoutColumn', 'expand', 'nestedExpand', 'extension', 'bodiedExtension', 'multiBodiedExtension', 'extensionFrame', 'table', 'tableCell', 'tableHeader', 'tableRow']);
+var getWidthInfoPayload = exports.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: _analytics.TABLE_ACTION.TABLE_WIDTH_INFO,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    attributes: {
+      editorWidth: editorWidth,
+      tableWidthInfo: tablesInfo,
+      mode: 'editor'
+    },
+    eventType: _analytics.EVENT_TYPE.OPERATIONAL
+  };
 };

package/dist/cjs/tablePlugin.js

@@ -21,6 +21,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _toDOM = require("./nodeviews/toDOM");
 var _plugin = require("./pm-plugins/analytics/plugin");
@@ -44,6 +45,7 @@ var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
 var _tableSizeSelector = require("./pm-plugins/table-size-selector");
 var _tableWidth = require("./pm-plugins/table-width");
 var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
+var _analytics2 = require("./pm-plugins/utils/analytics");
 var _create = require("./pm-plugins/utils/create");
 var _viewModeSort = require("./pm-plugins/view-mode-sort");
 var _ContentComponent = require("./ui/ContentComponent");
@@ -55,6 +57,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`.
@@ -410,13 +415,45 @@ var tablePlugin = function tablePlugin(_ref) {
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
-        plugin: function plugin() {
+        plugin: function plugin(_ref17) {
+          var dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
           return new _safePlugin.SafePlugin({
             view: function view(editorView) {
               editorViewRef.current = editorView;
+              var setTimeoutID;
+              var rafID;
+              var ricID;
+              if ((0, _expValEquals.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((0, _analytics2.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);
+                  }
                 }
               };
             }
@@ -424,8 +461,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 ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
         }
       }];
@@ -442,12 +479,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.default.createElement(_ContentComponent.ContentComponent, {
         api: api,
         editorView: editorView,
@@ -462,8 +499,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.toolbarInsertBlockMessages.table),
@@ -534,8 +571,8 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.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 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
           var _states$editorViewMod;
           return {

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DragHandleWithSharedState = exports.DragHandle = void 0;
+exports.DragHandle = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -42,8 +42,8 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     forceDefaultHandle = _ref$forceDefaultHand === void 0 ? false : _ref$forceDefaultHand,
     previewWidth = _ref.previewWidth,
     previewHeight = _ref.previewHeight,
-    onMouseOver = _ref.onMouseOver,
-    onMouseOut = _ref.onMouseOut,
+    _onMouseOver = _ref.onMouseOver,
+    _onMouseOut = _ref.onMouseOut,
     toggleDragMenu = _ref.toggleDragMenu,
     hoveredCell = _ref.hoveredCell,
     onClick = _ref.onClick,
@@ -68,6 +68,10 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   var _getDnDPluginState = (0, _pluginFactory.getPluginState)(state),
     _getDnDPluginState$is = _getDnDPluginState.isDragMenuOpen,
     isDragMenuOpen = _getDnDPluginState$is === void 0 ? false : _getDnDPluginState$is;
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHovered = _useState4[0],
+    setIsHovered = _useState4[1];
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
 
@@ -109,7 +113,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   }, [indexes, selection, direction, hoveredCell]);
   var handleIconProps = {
     forceDefaultHandle: forceDefaultHandle,
-    isHandleHovered: isColumnHandleHovered || isRowHandleHovered,
+    isHandleHovered: (0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true) ? isHovered : isColumnHandleHovered || isRowHandleHovered,
     hasMergedCells: hasMergedCells
   };
   (0, _react.useEffect)(function () {
@@ -216,10 +220,20 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     "aria-haspopup": "menu"
     // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
     ,
-    onMouseOver: onMouseOver
+    onMouseOver: function onMouseOver(e) {
+      if ((0, _expValEquals.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: function onMouseOut(e) {
+      if ((0, _expValEquals.expValEquals)('platform_editor_table_drag_handle_hover', 'isEnabled', true)) {
+        setIsHovered(false);
+      }
+      _onMouseOut && _onMouseOut(e);
+    },
     onMouseUp: function 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
@@ -300,5 +314,4 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     hoveredRows: hoveredRows
   });
 };
-var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponent);
-var DragHandleWithSharedState = exports.DragHandleWithSharedState = (0, _reactIntlNext.injectIntl)(DragHandleComponentWithSharedState);
+var DragHandle = exports.DragHandle = (0, _reactIntlNext.injectIntl)(DragHandleComponentWithSharedState);

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

@@ -11,7 +11,6 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../../pm-plugins/commands");
 var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _rowControls = require("../../../pm-plugins/utils/row-controls");
@@ -176,23 +175,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
         position: 'relative'
       },
       "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
-    }, (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/_react.default.createElement(_DragHandle.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.default.createElement(_DragHandle.DragHandle, {
+    }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
       tableLocalId: localId || '',

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _columnControls = require("../../pm-plugins/utils/column-controls");
 var _nodes = require("../../pm-plugins/utils/nodes");
@@ -103,7 +102,7 @@ var TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
     isNumberColumnEnabled: isNumberColumnEnabled,
     isDragging: isDragging,
     getScrollOffset: getScrollOffset,
-    api: (0, _platformFeatureFlags.fg)('platform_editor_table_use_shared_state_hook_fg') ? api : undefined
+    api: api
   }), isDragging && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     isHeaderSticky: (stickyHeader === null || stickyHeader === void 0 ? void 0 : stickyHeader.sticky) && hasHeaderRow,