@atlaskit/editor-plugin-table 10.9.7 → 10.9.8

package/dist/es2019/ui/hooks/useInternalTablePluginStateSelector.js

@@ -0,0 +1,21 @@
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export const useInternalTablePluginStateSelector = (api, key, options) => {
+  // Need to disable the eslint rule here because the key is for the TableSharedStateInternal type
+  // and we are using it as a string to access the value in the useSharedPluginStateSelector
+  // which is typed only for the public TableSharedState type.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const value = useSharedPluginStateSelector(api, `table.${key}`, options);
+  return value;
+};

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -3,18 +3,12 @@ import { 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';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 import TableComponent from './TableComponent';
 
 // Ignored via go/ees005
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
-var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
-  var value = useSharedPluginStateSelector(api, "table.".concat(key), {
-    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
-  });
-  return value;
-};
-
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -40,16 +34,36 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     mediaState = _useSharedPluginState.mediaState,
     selectionState = _useSharedPluginState.selectionState,
     editorViewModeState = _useSharedPluginState.editorViewModeState;
-  var isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
-  var isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-  var orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
-  var isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
-  var isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
-  var hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
-  var hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
-  var isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
-  var isWholeTableInDangerSelector = useSharedTablePluginStateSelector(api, 'isWholeTableInDanger');
+  var isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isWholeTableInDangerSelector = useInternalTablePluginStateSelector(api, 'isWholeTableInDanger', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
 
   // mediaState
   var isFullscreenSelector = useSharedPluginStateSelector(api, 'media.isFullscreen', {
@@ -117,8 +131,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     isMediaFullscreen: isFullscreen,
     options: options,
     allowControls: allowControls,
-    isHeaderRowEnabled: isHeaderRowEnabled,
-    isHeaderColumnEnabled: isHeaderColumnEnabled,
+    isHeaderRowEnabled: isHeaderRowEnabled !== null && isHeaderRowEnabled !== void 0 ? isHeaderRowEnabled : false,
+    isHeaderColumnEnabled: isHeaderColumnEnabled !== null && isHeaderColumnEnabled !== void 0 ? isHeaderColumnEnabled : false,
     isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,

package/dist/esm/nodeviews/TableContainer.js

@@ -58,7 +58,7 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   });
   var wasFullWidthModeEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? wasFullWidthModeEnabledSelector : tableState === null || tableState === void 0 ? void 0 : tableState.wasFullWidthModeEnabled;
   useEffect(function () {
-    if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+    if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
       return;
     }
     if (editorView && getPos) {

package/dist/esm/nodeviews/TableResizer.js

@@ -13,7 +13,6 @@ import { focusTableResizer, ToolTipContent } from '@atlaskit/editor-common/keyma
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -31,6 +30,7 @@ import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFram
 import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../pm-plugins/utils/guidelines';
 import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../pm-plugins/utils/snapping';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 var RESIZE_STEP_VALUE = 10;
 var handles = {
   right: true
@@ -133,7 +133,7 @@ export var TableResizer = function TableResizer(_ref) {
     tableState = _useSharedPluginState.tableState;
 
   // widthToWidest
-  var widthToWidestSelector = useSharedPluginStateSelector(pluginInjectionApi, 'table.widthToWidest', {
+  var widthToWidestSelector = useInternalTablePluginStateSelector(pluginInjectionApi, 'widthToWidest', {
     disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
   });
   var widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? widthToWidestSelector : tableState.widthToWidest;

package/dist/esm/ui/ContentComponent.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
 import FloatingDeleteButton from './FloatingDeleteButton';
@@ -12,11 +12,8 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
+import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
-var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
-  var value = useSharedPluginStateSelector(api, "table.".concat(key));
-  return value;
-};
 var ContentComponentInternal = function ContentComponentInternal(_ref) {
   var _api$analytics, _api$accessibilityUti;
   var api = _ref.api,
@@ -30,28 +27,71 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
   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 resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
-  var resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
-  var isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
-  var isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
-  var widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
-  var tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
-  var targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
-  var isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
-  var tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
-  var pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
-  var insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
-  var insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
-  var isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-  var isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-  var isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
-  var tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
-  var isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
-  var allowControls = pluginConfig.allowControls;
-  var stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
-  var dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
-  var dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
-  var isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
+  var resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var insertColumnButtonIndex = useInternalTablePluginStateSelector(api, 'insertColumnButtonIndex', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var _ref2 = pluginConfig !== null && pluginConfig !== void 0 ? pluginConfig : {},
+    allowControls = _ref2.allowControls;
+  var stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
+  var isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
+    disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
+  });
   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,
@@ -139,17 +179,17 @@ var ContentComponentInternal = function ContentComponentInternal(_ref) {
     offset: [0, 10]
   }));
 };
-export var ContentComponent = function ContentComponent(_ref2) {
+export var ContentComponent = function ContentComponent(_ref3) {
   var _api$featureFlags;
-  var api = _ref2.api,
-    editorView = _ref2.editorView,
-    dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
-    options = _ref2.options,
-    popupsMountPoint = _ref2.popupsMountPoint,
-    popupsBoundariesElement = _ref2.popupsBoundariesElement,
-    popupsScrollableElement = _ref2.popupsScrollableElement,
-    defaultGetEditorContainerWidth = _ref2.defaultGetEditorContainerWidth,
-    defaultGetEditorFeatureFlags = _ref2.defaultGetEditorFeatureFlags;
+  var api = _ref3.api,
+    editorView = _ref3.editorView,
+    dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent,
+    options = _ref3.options,
+    popupsMountPoint = _ref3.popupsMountPoint,
+    popupsBoundariesElement = _ref3.popupsBoundariesElement,
+    popupsScrollableElement = _ref3.popupsScrollableElement,
+    defaultGetEditorContainerWidth = _ref3.defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags = _ref3.defaultGetEditorFeatureFlags;
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     component: ACTION_SUBJECT.TABLES_PLUGIN,
     dispatchAnalyticsEvent: dispatchAnalyticsEvent,

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

@@ -9,7 +9,6 @@ import { injectIntl } from 'react-intl-next';
 import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -21,6 +20,7 @@ import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugi
 import { TableCssClassName as ClassName } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
+import { useInternalTablePluginStateSelector } from '../hooks/useInternalTablePluginStateSelector';
 import { HandleIconComponent } from './HandleIconComponent';
 var DragHandleComponent = function DragHandleComponent(_ref) {
   var isDragMenuTarget = _ref.isDragMenuTarget,
@@ -268,13 +268,13 @@ var DragHandleComponentWithSharedState = function DragHandleComponentWithSharedS
     tableState = _ref6.tableState;
 
   // hoveredColumns
-  var hoveredColumnsSelector = useSharedPluginStateSelector(api, 'table.hoveredColumns', {
+  var hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
     disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
   });
   var hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredColumnsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredColumns;
 
   // hoveredRows
-  var hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows', {
+  var hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
     disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
   });
   var hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? hoveredRowsSelector : tableState === null || tableState === void 0 ? void 0 : tableState.hoveredRows;

package/dist/esm/ui/hooks/useInternalTablePluginStateSelector.js

@@ -0,0 +1,21 @@
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export var useInternalTablePluginStateSelector = function useInternalTablePluginStateSelector(api, key, options) {
+  // Need to disable the eslint rule here because the key is for the TableSharedStateInternal type
+  // and we are using it as a string to access the value in the useSharedPluginStateSelector
+  // which is typed only for the public TableSharedState type.
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var value = useSharedPluginStateSelector(api, "table.".concat(key), options);
+  return value;
+};

package/dist/types/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -0,0 +1,20 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TablePlugin } from '../../tablePluginType';
+import { TableSharedStateInternal } from '../../types';
+type Options = {
+    disabled?: boolean;
+};
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export {};

package/dist/types-ts4.5/ui/hooks/useInternalTablePluginStateSelector.d.ts

@@ -0,0 +1,20 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { TablePlugin } from '../../tablePluginType';
+import { TableSharedStateInternal } from '../../types';
+type Options = {
+    disabled?: boolean;
+};
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export declare const useInternalTablePluginStateSelector: <K extends "isFullWidthModeEnabled" | "wasFullWidthModeEnabled" | "isHeaderRowEnabled" | "isHeaderColumnEnabled" | "ordering" | "isInDanger" | "hoveredRows" | "hoveredColumns" | "hoveredCell" | "isTableHovered" | "tableNode" | "widthToWidest" | "tableRef" | "tablePos" | "targetCellPosition" | "isContextualMenuOpen" | "pluginConfig" | "insertColumnButtonIndex" | "insertRowButtonIndex" | "isDragAndDropEnabled" | "tableWrapperTarget" | "isCellMenuOpenByKeyboard" | "isWholeTableInDanger" | "isDragMenuOpen" | "dragMenuDirection" | "dragMenuIndex" | "isResizing" | "isTableResizing" | "resizingTableRef" | "resizingTableLocalId" | "stickyHeader">(api: ExtractInjectionAPI<TablePlugin> | undefined, key: K, options?: Options) => TableSharedStateInternal[K] | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.7",
+	"version": "10.9.8",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.17.0",
+		"@atlaskit/editor-common": "^103.18.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/menu": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.6.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -3,19 +3,15 @@ import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import type {
-	ExtractInjectionAPI,
-	GetEditorFeatureFlags,
-	getPosHandlerNode,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorFeatureFlags, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
-import { TablePlugin } from '../tablePluginType';
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 import TableComponent from './TableComponent';
 import type { TableOptions } from './types';
@@ -40,16 +36,6 @@ type TableComponentWithSharedStateProps = {
 	allowTableResizing?: boolean;
 };
 
-const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
-	api: ExtractInjectionAPI<TablePlugin> | undefined,
-	key: K,
-) => {
-	const value = useSharedPluginStateSelector(api, `table.${key}` as never, {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	}) as TableSharedStateInternal[K];
-	return value;
-};
-
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -73,21 +59,47 @@ export const TableComponentWithSharedState = ({
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
 		});
 
-	const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
-	const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(
+	const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(
 		api,
 		'isHeaderColumnEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
-	const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-	const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
-	const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
-	const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
-	const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
-	const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
-	const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
-	const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(
+	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
@@ -203,8 +215,8 @@ export const TableComponentWithSharedState = ({
 			isMediaFullscreen={isFullscreen}
 			options={options}
 			allowControls={allowControls}
-			isHeaderRowEnabled={isHeaderRowEnabled}
-			isHeaderColumnEnabled={isHeaderColumnEnabled}
+			isHeaderRowEnabled={isHeaderRowEnabled ?? false}
+			isHeaderColumnEnabled={isHeaderColumnEnabled ?? false}
 			isDragAndDropEnabled={options?.isDragAndDropEnabled && !isLivePageViewMode}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}

package/src/nodeviews/TableContainer.tsx

@@ -114,7 +114,7 @@ const AlignmentTableContainer = ({
 		: tableState?.wasFullWidthModeEnabled;
 
 	useEffect(() => {
-		if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
 			return;
 		}
 

package/src/nodeviews/TableResizer.tsx

@@ -19,7 +19,6 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -70,6 +69,7 @@ import {
 	TABLE_HIGHLIGHT_TOLERANCE,
 	TABLE_SNAP_GAP,
 } from '../ui/consts';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 interface TableResizerProps {
 	width: number;
@@ -218,13 +218,13 @@ export const TableResizer = ({
 	});
 
 	// widthToWidest
-	const widthToWidestSelector = useSharedPluginStateSelector(
+	const widthToWidestSelector = useInternalTablePluginStateSelector(
 		pluginInjectionApi,
-		'table.widthToWidest' as never,
+		'widthToWidest',
 		{
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
 		},
-	) as TableSharedStateInternal['widthToWidest'];
+	);
 	const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? widthToWidestSelector
 		: (tableState as TableSharedStateInternal).widthToWidest;