@atlaskit/editor-plugin-table 13.0.5 → 13.0.6

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -1,14 +1,28 @@
 import React from 'react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
+/**
+ * Use useSharedPluginState to control re-renders from plugin dependencies
+ */
+export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
+  var view = _ref.view,
+    options = _ref.options,
+    getNode = _ref.getNode,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    api = _ref.api,
+    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
+    eventDispatcher = _ref.eventDispatcher,
+    allowColumnResizing = _ref.allowColumnResizing,
+    allowControls = _ref.allowControls,
+    getPos = _ref.getPos,
+    forwardRef = _ref.forwardRef,
+    allowTableAlignment = _ref.allowTableAlignment,
+    allowTableResizing = _ref.allowTableResizing;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
       var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
       return {
@@ -54,97 +68,7 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     mode = _useSharedPluginState.mode,
     selection = _useSharedPluginState.selection,
     width = _useSharedPluginState.width;
-  return {
-    tableState: undefined,
-    widthState: undefined,
-    isTableResizing: isTableResizing,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    ordering: ordering,
-    isResizing: isResizing,
-    isInDanger: isInDanger,
-    hoveredCell: hoveredCell,
-    hoveredRows: hoveredRows,
-    isTableHovered: isTableHovered,
-    isWholeTableInDanger: isWholeTableInDanger,
-    isFullscreen: isFullscreen,
-    selection: selection,
-    mode: mode,
-    width: width,
-    lineLength: lineLength,
-    interaction: interaction
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode', 'interaction']),
-    widthState = _useSharedPluginState2.widthState,
-    tableState = _useSharedPluginState2.tableState,
-    mediaState = _useSharedPluginState2.mediaState,
-    selectionState = _useSharedPluginState2.selectionState,
-    editorViewModeState = _useSharedPluginState2.editorViewModeState,
-    interactionState = _useSharedPluginState2.interactionState;
-  var tableStateInternal = tableState;
-  return {
-    tableState: tableState,
-    widthState: widthState,
-    isTableResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableResizing,
-    isHeaderColumnEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderColumnEnabled,
-    isHeaderRowEnabled: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isHeaderRowEnabled,
-    ordering: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.ordering,
-    isResizing: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isResizing,
-    isInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isInDanger,
-    hoveredCell: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredCell,
-    hoveredRows: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.hoveredRows,
-    isTableHovered: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isTableHovered,
-    isWholeTableInDanger: tableStateInternal === null || tableStateInternal === void 0 ? void 0 : tableStateInternal.isWholeTableInDanger,
-    isFullscreen: mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen,
-    selection: selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection,
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode,
-    width: widthState === null || widthState === void 0 ? void 0 : widthState.width,
-    lineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
-    interaction: interactionState === null || interactionState === void 0 ? void 0 : interactionState.interactionState
-  };
-});
-
-/**
- * Use useSharedPluginState to control re-renders from plugin dependencies
- */
-export var TableComponentWithSharedState = function TableComponentWithSharedState(_ref) {
-  var view = _ref.view,
-    options = _ref.options,
-    getNode = _ref.getNode,
-    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
-    api = _ref.api,
-    getEditorFeatureFlags = _ref.getEditorFeatureFlags,
-    eventDispatcher = _ref.eventDispatcher,
-    allowColumnResizing = _ref.allowColumnResizing,
-    allowControls = _ref.allowControls,
-    getPos = _ref.getPos,
-    forwardRef = _ref.forwardRef,
-    allowTableAlignment = _ref.allowTableAlignment,
-    allowTableResizing = _ref.allowTableResizing;
-  var _useSharedState = useSharedState(api),
-    tableState = _useSharedState.tableState,
-    widthState = _useSharedState.widthState,
-    mode = _useSharedState.mode,
-    hoveredCell = _useSharedState.hoveredCell,
-    hoveredRows = _useSharedState.hoveredRows,
-    isFullscreen = _useSharedState.isFullscreen,
-    isHeaderColumnEnabled = _useSharedState.isHeaderColumnEnabled,
-    isHeaderRowEnabled = _useSharedState.isHeaderRowEnabled,
-    isInDanger = _useSharedState.isInDanger,
-    isResizing = _useSharedState.isResizing,
-    isTableHovered = _useSharedState.isTableHovered,
-    isTableResizing = _useSharedState.isTableResizing,
-    isWholeTableInDanger = _useSharedState.isWholeTableInDanger,
-    lineLength = _useSharedState.lineLength,
-    ordering = _useSharedState.ordering,
-    selection = _useSharedState.selection,
-    width = _useSharedState.width,
-    interaction = _useSharedState.interaction;
   var isLivePageViewMode = mode === 'view';
-  if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false) && !tableState) {
-    return null;
-  }
 
   /**
    *  ED-19810
@@ -178,13 +102,10 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     ordering: ordering,
     isResizing: isResizing,
     getNode: getNode,
-    containerWidth: editorExperiment('platform_editor_usesharedpluginstatewithselector', true) ? {
+    containerWidth: {
       width: width !== null && width !== void 0 ? width : 0,
       lineLength: lineLength
-    } :
-    // Ignored via go/ees005
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    widthState,
+    },
     contentDOM: forwardRef,
     getEditorFeatureFlags: getEditorFeatureFlags,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,

package/dist/esm/nodeviews/TableContainer.js

@@ -4,7 +4,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -36,7 +36,13 @@ var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-var useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
+  var node = _ref2.node,
+    children = _ref2.children,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    getPos = _ref2.getPos,
+    editorView = _ref2.editorView;
+  var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {
@@ -46,35 +52,7 @@ var useAlignmentTableContainerSharedState = sharedPluginStateHookMigratorFactory
     }),
     isFullWidthModeEnabled = _useSharedPluginState.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _useSharedPluginState.wasFullWidthModeEnabled;
-  return {
-    tableState: undefined,
-    isFullWidthModeEnabled: isFullWidthModeEnabled,
-    wasFullWidthModeEnabled: wasFullWidthModeEnabled
-  };
-}, function (pluginInjectionApi) {
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table']),
-    tableState = _useSharedPluginState2.tableState;
-  return {
-    tableState: tableState,
-    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
-    wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled
-  };
-});
-var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
-  var node = _ref2.node,
-    children = _ref2.children,
-    pluginInjectionApi = _ref2.pluginInjectionApi,
-    getPos = _ref2.getPos,
-    editorView = _ref2.editorView;
-  var alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
-  var _useAlignmentTableCon = useAlignmentTableContainerSharedState(pluginInjectionApi),
-    tableState = _useAlignmentTableCon.tableState,
-    isFullWidthModeEnabled = _useAlignmentTableCon.isFullWidthModeEnabled,
-    wasFullWidthModeEnabled = _useAlignmentTableCon.wasFullWidthModeEnabled;
   useEffect(function () {
-    if (!tableState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
-      return;
-    }
     if (editorView && getPos) {
       var state = editorView.state,
         dispatch = editorView.dispatch;
@@ -91,7 +69,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editorView, tableState, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
+  }, [editorView, isFullWidthModeEnabled, wasFullWidthModeEnabled, node]);
   var style = useMemo(function () {
     return getAlignmentStyle(alignment);
   }, [alignment]);
@@ -137,23 +115,6 @@ var selector = function selector(states) {
     editorViewModeState: states.editorViewModeState
   };
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState3 = useSharedPluginStateWithSelector(api, ['table', 'editorViewMode'], selector),
-    tableState = _useSharedPluginState3.tableState,
-    editorViewModeState = _useSharedPluginState3.editorViewModeState;
-  return {
-    tableState: tableState,
-    editorViewModeState: editorViewModeState
-  };
-}, function (api) {
-  var _useSharedPluginState4 = useSharedPluginState(api, ['table', 'editorViewMode']),
-    tableState = _useSharedPluginState4.tableState,
-    editorViewModeState = _useSharedPluginState4.editorViewModeState;
-  return {
-    tableState: tableState,
-    editorViewModeState: editorViewModeState
-  };
-});
 var getPadding = function getPadding(containerWidth) {
   return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
@@ -181,9 +142,9 @@ var ResizableTableContainerLegacy = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
-  var _useSharedState = useSharedState(pluginInjectionApi),
-    tableState = _useSharedState.tableState,
-    editorViewModeState = _useSharedState.editorViewModeState;
+  var _useSharedPluginState2 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
+    tableState = _useSharedPluginState2.tableState,
+    editorViewModeState = _useSharedPluginState2.editorViewModeState;
   var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var updateContainerHeight = useCallback(function (height) {
@@ -382,9 +343,9 @@ var ResizableTableContainerNext = /*#__PURE__*/React.memo(function (_ref5) {
     _useState6 = _slicedToArray(_useState5, 2),
     tableMaxWidthForFullPageOnLoad = _useState6[0],
     setTableMaxWidthForFullPageOnLoad = _useState6[1];
-  var _useSharedState2 = useSharedState(pluginInjectionApi),
-    tableState = _useSharedState2.tableState,
-    editorViewModeState = _useSharedState2.editorViewModeState;
+  var _useSharedPluginState3 = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector),
+    tableState = _useSharedPluginState3.tableState,
+    editorViewModeState = _useSharedPluginState3.editorViewModeState;
   var isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
   var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   var updateContainerHeight = useCallback(function (height) {

package/dist/esm/nodeviews/TableResizer.js

@@ -8,7 +8,7 @@ import { useIntl } from 'react-intl-next';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -107,19 +107,6 @@ var selector = function selector(states) {
     widthToWidest: (_states$tableState = states.tableState) === null || _states$tableState === void 0 ? void 0 : _states$tableState.widthToWidest
   };
 };
-var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table'], selector),
-    widthToWidest = _useSharedPluginState.widthToWidest;
-  return {
-    widthToWidest: widthToWidest
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['table']),
-    tableState = _useSharedPluginState2.tableState;
-  return {
-    widthToWidest: tableState === null || tableState === void 0 ? void 0 : tableState.widthToWidest
-  };
-});
 export var TableResizer = function TableResizer(_ref) {
   var _editorView$state, _pluginInjectionApi$a2;
   var children = _ref.children,
@@ -152,8 +139,8 @@ export var TableResizer = function TableResizer(_ref) {
   var areResizeMetaKeysPressed = useRef(false);
   var resizerRef = useRef(null);
   var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
-  var _useSharedState = useSharedState(pluginInjectionApi),
-    widthToWidest = _useSharedState.widthToWidest;
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['table'], selector),
+    widthToWidest = _useSharedPluginState.widthToWidest;
 
   // used to reposition tooltip when table is resizing via keyboard
   var updateTooltip = React.useRef();

package/dist/esm/tablePlugin.js

@@ -5,26 +5,19 @@ import React, { useEffect } from 'react';
 import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithLocalId, tableHeaderWithNestedTable, tableRow, tableRowWithNestedTable, tableRowWithLocalId, tableCellWithLocalId, tableCellWithNestedTableWithLocalId, tableRowWithNestedTableWithLocalId, tableHeaderWithNestedTableWithLocalId } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
-import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 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';
-import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
 import { insertTableWithNestingSupport, insertTableWithSize } from './pm-plugins/commands/insert';
 import { pluginConfig } from './pm-plugins/create-plugin-config';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
@@ -41,7 +34,6 @@ import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin';
 import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
-import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
 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';
@@ -49,46 +41,17 @@ import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
-import FloatingContextualButton from './ui/FloatingContextualButton';
-import FloatingContextualMenu from './ui/FloatingContextualMenu';
-import FloatingDeleteButton from './ui/FloatingDeleteButton';
-import FloatingDragMenu from './ui/FloatingDragMenu';
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
-import FloatingInsertButton from './ui/FloatingInsertButton';
-import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
-import { GlobalStylesWrapper } from './ui/global-styles';
-import { SizeSelector } from './ui/SizeSelector';
-import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
-var useTableSharedState = sharedPluginStateHookMigratorFactory(function (api) {
-  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
-      var _states$editorViewMod;
-      return {
-        mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
-      };
-    }),
-    mode = _useSharedPluginState.mode;
-  return {
-    mode: mode
-  };
-}, function (api) {
-  var _useSharedPluginState2 = useSharedPluginState(api, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
-  return {
-    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
-  };
-});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
  */
 var tablePlugin = function tablePlugin(_ref) {
-  var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
+  var _api$analytics, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
   var options = _ref.config,
     api = _ref.api;
   var editorViewRef = {
@@ -101,7 +64,6 @@ var tablePlugin = function tablePlugin(_ref) {
     };
   };
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
-  var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
   var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
   options === null || options === void 0 ? void 0 : options.isCommentEditor));
@@ -472,178 +434,27 @@ var tablePlugin = function tablePlugin(_ref) {
       return plugins;
     },
     contentComponent: function contentComponent(_ref18) {
-      var _api$featureFlags;
       var editorView = _ref18.editorView,
         popupsMountPoint = _ref18.popupsMountPoint,
         popupsBoundariesElement = _ref18.popupsBoundariesElement,
         popupsScrollableElement = _ref18.popupsScrollableElement,
         dispatchAnalyticsEvent = _ref18.dispatchAnalyticsEvent;
-      if (expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', true)) {
-        return /*#__PURE__*/React.createElement(ContentComponent, {
-          api: api,
-          editorView: editorView,
-          dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-          options: options,
-          popupsMountPoint: popupsMountPoint,
-          popupsBoundariesElement: popupsBoundariesElement,
-          popupsScrollableElement: popupsScrollableElement,
-          defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
-          isTableSelectorEnabled: isTableSelectorEnabled
-        });
-      }
-      return /*#__PURE__*/React.createElement(ErrorBoundary, {
-        component: ACTION_SUBJECT.TABLES_PLUGIN,
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        api: api,
+        editorView: editorView,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-        fallbackComponent: null
-      }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
-        featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
-        isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
-        api: api
-      }), /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          tableAnalyticsPluginState: tableAnalyticsPluginKey,
-          tablePluginState: pluginKey,
-          tableWidthPluginState: tableWidthPluginKey,
-          tableResizingPluginState: tableResizingPluginKey,
-          stickyHeadersState: stickyHeadersPluginKey,
-          dragAndDropState: dragAndDropPluginKey,
-          sizeSelectorPluginState: sizeSelectorPluginKey
-        },
-        render: function render(_ref19) {
-          var _sizeSelectorPluginSt, _api$analytics3;
-          var resizingPluginState = _ref19.tableResizingPluginState,
-            stickyHeadersState = _ref19.stickyHeadersState,
-            tablePluginState = _ref19.tablePluginState,
-            tableWidthPluginState = _ref19.tableWidthPluginState,
-            dragAndDropState = _ref19.dragAndDropState,
-            sizeSelectorPluginState = _ref19.sizeSelectorPluginState;
-          // Any changes made inside `<WithPluginState>` need to be reflected in the
-          // `<ContentComponent>` as well.
-          var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
-          var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
-          var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
-          var isResizing = isColumnResizing || isTableResizing;
-          var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
-          var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
-          var _ref20 = tablePluginState,
-            tableNode = _ref20.tableNode,
-            tablePos = _ref20.tablePos,
-            targetCellPosition = _ref20.targetCellPosition,
-            isContextualMenuOpen = _ref20.isContextualMenuOpen,
-            tableRef = _ref20.tableRef,
-            pluginConfig = _ref20.pluginConfig,
-            insertColumnButtonIndex = _ref20.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref20.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref20.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref20.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref20.isDragAndDropEnabled,
-            tableWrapperTarget = _ref20.tableWrapperTarget,
-            isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
-          var allowControls = pluginConfig.allowControls;
-          var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
-          return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
-            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorView: editorView,
-            tableNode: tableNode,
-            mountPoint: popupsMountPoint,
-            targetCellPosition: targetCellPosition,
-            scrollableElement: popupsScrollableElement,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            isContextualMenuOpen: isContextualMenuOpen,
-            stickyHeader: stickyHeader,
-            tableWrapper: tableWrapperTarget,
-            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
-          }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
-            tableNode: tableNode,
-            tableRef: tableRef,
-            insertColumnButtonIndex: insertColumnButtonIndex,
-            insertRowButtonIndex: insertRowButtonIndex,
-            isHeaderColumnEnabled: isHeaderColumnEnabled,
-            isHeaderRowEnabled: isHeaderRowEnabled,
-            isDragAndDropEnabled: isDragAndDropEnabled,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            hasStickyHeaders: stickyHeader && stickyHeader.sticky,
-            dispatchAnalyticsEvent: dispatchAnalyticsEvent,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
-            api: api,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
-          }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            targetCellPosition: targetCellPosition,
-            isOpen: Boolean(isContextualMenuOpen) && !isResizing,
-            pluginConfig: pluginConfig,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
-            api: api
-          }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
-            editorView: editorView,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            tableRef: tableRef,
-            tableNode: tableNode,
-            targetCellPosition: targetCellPosition,
-            direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
-            index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
-            getEditorContainerWidth: defaultGetEditorContainerWidth,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            stickyHeaders: stickyHeader,
-            pluginConfig: pluginConfig,
-            isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-            getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
-            ariaNotifyPlugin: ariaNotifyPlugin,
-            api: api,
-            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
-          }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
-            editorView: editorView,
-            selection: editorView.state.selection,
-            tableRef: tableRef,
-            mountPoint: popupsMountPoint,
-            boundariesElement: popupsBoundariesElement,
-            scrollableElement: popupsScrollableElement,
-            stickyHeaders: stickyHeader,
-            isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
-            editorAnalyticsAPI: editorAnalyticsAPI,
-            api: api
-          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
-            target: resizingTableRef,
-            content: editorExperiment('single_column_layouts', true) ? /*#__PURE__*/React.createElement(ResizerBreakoutModeLabel, {
-              layout: "full-width"
-            }) : /*#__PURE__*/React.createElement(FullWidthDisplay, null),
-            alignX: 'center',
-            alignY: 'bottom',
-            stick: true,
-            forcePlacement: true,
-            zIndex: akEditorFloatingPanelZIndex,
-            offset: [0, 10]
-          }), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
-            api: api,
-            isOpenedByKeyboard: false,
-            popupsMountPoint: popupsMountPoint,
-            target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions),
-            popupsBoundariesElement: popupsBoundariesElement,
-            popupsScrollableElement: popupsScrollableElement
-          }));
-        }
-      }));
+        options: options,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+        defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+        isTableSelectorEnabled: isTableSelectorEnabled
+      });
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref21) {
-        var formatMessage = _ref21.formatMessage;
+      quickInsert: function quickInsert(_ref19) {
+        var formatMessage = _ref19.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),
@@ -714,10 +525,15 @@ var tablePlugin = function tablePlugin(_ref) {
         return editorViewRef.current;
       }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     },
-    usePluginHook: function usePluginHook(_ref22) {
-      var editorView = _ref22.editorView;
-      var _useTableSharedState = useTableSharedState(api),
-        mode = _useTableSharedState.mode;
+    usePluginHook: function usePluginHook(_ref20) {
+      var editorView = _ref20.editorView;
+      var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
+          var _states$editorViewMod;
+          return {
+            mode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+          };
+        }),
+        mode = _useSharedPluginState.mode;
       useEffect(function () {
         var state = editorView.state,
           dispatch = editorView.dispatch;