@atlaskit/editor-plugin-table 10.9.20 → 10.9.22

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -9,6 +9,80 @@ import TableComponent from './TableComponent';
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+const useSharedState = sharedPluginStateHookMigratorFactory(api => {
+  // tableState
+  const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing');
+  const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+  const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled');
+  const ordering = useInternalTablePluginStateSelector(api, 'ordering');
+  const isResizing = useInternalTablePluginStateSelector(api, 'isResizing');
+  const isInDanger = useInternalTablePluginStateSelector(api, 'isInDanger');
+  const hoveredCell = useInternalTablePluginStateSelector(api, 'hoveredCell');
+  const hoveredRows = useInternalTablePluginStateSelector(api, 'hoveredRows');
+  const isTableHovered = useInternalTablePluginStateSelector(api, 'isTableHovered');
+  const isWholeTableInDanger = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger');
+
+  // mediaState
+  const isFullscreen = useSharedPluginStateSelector(api, 'media.isFullscreen');
+
+  // selectionState
+  const selection = useSharedPluginStateSelector(api, 'selection.selection');
+
+  // editorViewModeState
+  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+
+  // widthState
+  const width = useSharedPluginStateSelector(api, 'width.width');
+  const lineLength = useSharedPluginStateSelector(api, 'width.lineLength');
+  return {
+    tableState: undefined,
+    widthState: undefined,
+    isTableResizing,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    ordering,
+    isResizing,
+    isInDanger,
+    hoveredCell,
+    hoveredRows,
+    isTableHovered,
+    isWholeTableInDanger,
+    isFullscreen,
+    selection,
+    mode,
+    width,
+    lineLength
+  };
+}, api => {
+  const {
+    widthState,
+    tableState,
+    mediaState,
+    selectionState,
+    editorViewModeState
+  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+  const tableStateInternal = tableState;
+  return {
+    tableState,
+    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
+  };
+});
+
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -28,89 +102,29 @@ export const TableComponentWithSharedState = ({
   allowTableResizing
 }) => {
   const {
-    widthState,
     tableState,
-    mediaState,
-    selectionState,
-    editorViewModeState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-  const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isWholeTableInDangerSelector = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-
-  // mediaState
-  const isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullscreen = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullscreenSelector : mediaState === null || mediaState === void 0 ? void 0 : mediaState.isFullscreen;
-
-  // selectionState
-  const selectionSelector = useSharedPluginStateSelector(api, 'selection.selection', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? selectionSelector : selectionState === null || selectionState === void 0 ? void 0 : selectionState.selection;
-
-  // editorViewModeState
-  const editorViewModeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? editorViewModeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+    widthState,
+    mode,
+    hoveredCell,
+    hoveredRows,
+    isFullscreen,
+    isHeaderColumnEnabled,
+    isHeaderRowEnabled,
+    isInDanger,
+    isResizing,
+    isTableHovered,
+    isTableResizing,
+    isWholeTableInDanger,
+    lineLength,
+    ordering,
+    selection,
+    width
+  } = useSharedState(api);
   const isLivePageViewMode = mode === 'view';
-
-  // widthState
-  const widthSelector = useSharedPluginStateSelector(api, 'width.width', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const width = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.width;
-  const lineLengthSelector = useSharedPluginStateSelector(api, 'width.lineLength', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const lineLength = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? lineLengthSelector : widthState === null || widthState === void 0 ? void 0 : widthState.lineLength;
   if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
     return null;
   }
 
-  // tableState
-  const isTableResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableResizingSelector : tableState.isTableResizing;
-  const isHeaderColumnEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderColumnEnabledSelector : tableState.isHeaderColumnEnabled;
-  const isHeaderRowEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isHeaderRowEnabledSelector : tableState.isHeaderRowEnabled;
-  const ordering = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? orderingSelector : tableState.ordering;
-  const isResizing = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isResizingSelector : tableState.isResizing;
-  const isInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isInDangerSelector : tableState.isInDanger;
-  const hoveredCell = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredCellSelector : tableState.hoveredCell;
-  const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState.hoveredRows;
-  const isTableHovered = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableHoveredSelector : tableState.isTableHovered;
-  const isWholeTableInDanger = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isWholeTableInDangerSelector : tableState.isWholeTableInDanger;
-
   /**
    *  ED-19810
    *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
@@ -34,6 +34,24 @@ const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-testid": "table-container"
   }, children);
 });
+const useAlignmentStableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
+  const wasFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled');
+  return {
+    tableState: undefined,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  return {
+    tableState,
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    wasFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled
+  };
+});
 const AlignmentTableContainer = ({
   node,
   children,
@@ -43,22 +61,10 @@ const AlignmentTableContainer = ({
 }) => {
   const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // isFullWidthModeEnabled
-  const isTableFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isTableFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
-
-  // wasFullWidthModeEnabled
-  const wasFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.wasFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
+    tableState,
+    isFullWidthModeEnabled,
+    wasFullWidthModeEnabled
+  } = useAlignmentStableContainerSharedState(pluginInjectionApi);
   useEffect(() => {
     if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
@@ -120,6 +126,23 @@ const AlignmentTableContainerWrapper = ({
     editorView: editorView
   }, children);
 };
+const useResizeableTableContainerSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const isFullWidthModeEnabled = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled');
+  const mode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  return {
+    isFullWidthModeEnabled,
+    mode
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState,
+    editorViewModeState
+  } = useSharedPluginState(pluginInjectionApi, ['table', 'editorViewMode']);
+  return {
+    isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
@@ -143,16 +166,9 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // isFullWidthModeEnabled
-  const isFullWidthModeEnabledSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.isFullWidthModeEnabled', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const isFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
+    isFullWidthModeEnabled,
+    mode
+  } = useResizeableTableContainerSharedState(pluginInjectionApi);
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -206,17 +222,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
-  const {
-    editorViewModeState
-  } = useSharedPluginState(pluginInjectionApi, ['editorViewMode'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // mode
-  const modeSelector = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
   let responsiveContainerWidth = 0;
   const resizeHandleSpacing = 12;
   // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
@@ -267,7 +272,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     onResizeStop,
     isCommentEditor
   };
-  const isLivePageViewMode = (editorExperiment('platform_editor_usesharedpluginstateselector', true) ? mode : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
+  const isLivePageViewMode = mode === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
     node: node,

package/dist/es2019/nodeviews/TableResizer.js

@@ -4,7 +4,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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
@@ -13,7 +13,6 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -92,6 +91,20 @@ const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableSca
     return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
+const useSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const widthToWidest = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest');
+  return {
+    widthToWidest
+  };
+}, pluginInjectionApi => {
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const tableStateInternal = tableState;
+  return {
+    widthToWidest: tableStateInternal.widthToWidest
+  };
+});
 export const TableResizer = ({
   children,
   width,
@@ -125,16 +138,8 @@ export const TableResizer = ({
   const areResizeMetaKeysPressed = useRef(false);
   const resizerRef = useRef(null);
   const {
-    tableState
-  } = useSharedPluginState(pluginInjectionApi, ['table'], {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-  });
-
-  // widthToWidest
-  const widthToWidestSelector = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest', {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;
+    widthToWidest
+  } = useSharedState(pluginInjectionApi);
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef();

package/dist/es2019/pm-plugins/main.js

@@ -210,19 +210,11 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
 
         // transformSliceToRemoveOpenTable() transforms based on the depth of the root node, assuming that the tables will be at the root
         // Bodied extensions will contribute to the depth of the table selection so we need to remove them first
-        if (fg('platform_editor_nested_tables_bodied_extension_fix')) {
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
+        /** If a partial paste of bodied extension, paste only text */
+        slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
 
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-        } else {
-          /** If a partial paste of table, paste only table's content */
-          slice = transformSliceToRemoveOpenTable(slice, schema);
-
-          /** If a partial paste of bodied extension, paste only text */
-          slice = transformSliceToRemoveOpenBodiedExtension(slice, schema);
-        }
+        /** If a partial paste of table, paste only table's content */
+        slice = transformSliceToRemoveOpenTable(slice, schema);
 
         /** If a partial paste of multi bodied extension, paste only children */
         slice = transformSliceToRemoveOpenMultiBodiedExtension(slice, schema);

package/dist/es2019/tablePlugin.js

@@ -4,7 +4,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TA
 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 { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState } 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';
@@ -59,6 +59,19 @@ import { SizeSelector } from './ui/SizeSelector';
 import { FullWidthDisplay } from './ui/TableFullWidthLabel';
 import { getToolbarConfig } from './ui/toolbar';
 const defaultGetEditorFeatureFlags = () => ({});
+const useTableSharedState = sharedPluginStateHookMigratorFactory(api => {
+  const mode = useSharedPluginStateSelector(api, 'editorViewMode.mode');
+  return {
+    mode
+  };
+}, api => {
+  const {
+    editorViewModeState
+  } = useSharedPluginState(api, ['editorViewMode']);
+  return {
+    mode: editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode
+  };
+});
 
 /**
  * Table plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -103,6 +116,7 @@ const tablePlugin = ({
       const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
       const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
       const dragAndDropState = dragAndDropPluginKey.getState(editorState);
+      const sizeSelectorPluginState = sizeSelectorPluginKey.getState(editorState);
       const sharedStateInternal = {
         isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
         wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
@@ -136,7 +150,9 @@ const tablePlugin = ({
         stickyHeader,
         dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
         dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
+        isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen,
+        isSizeSelectorOpen: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen,
+        sizeSelectorTargetRef: sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef
       };
       return sharedStateInternal;
     },
@@ -450,7 +466,8 @@ const tablePlugin = ({
           popupsBoundariesElement: popupsBoundariesElement,
           popupsScrollableElement: popupsScrollableElement,
           defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
-          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+          defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags,
+          isTableSelectorEnabled: isTableSelectorEnabled
         });
       }
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
@@ -480,6 +497,8 @@ const tablePlugin = ({
           sizeSelectorPluginState
         }) => {
           var _sizeSelectorPluginSt, _api$analytics3;
+          // Any changes made inside `<WithPluginState>` need to be reflected in the
+          // `<ContentComponent>` as well.
           const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           const resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
@@ -681,16 +700,8 @@ const tablePlugin = ({
       editorView
     }) {
       const {
-        editorViewModeState
-      } = useSharedPluginState(api, ['editorViewMode'], {
-        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
-      });
-
-      // mode
-      const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
-        disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-      });
-      const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? modeSelector : editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
+        mode
+      } = useTableSharedState(api);
       useEffect(() => {
         const {
           state,