@atlaskit/editor-plugin-table 10.8.2 → 10.9.0

package/dist/esm/ui/ContentComponent.js

@@ -0,0 +1,172 @@
+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 FloatingContextualButton from './FloatingContextualButton';
+import FloatingContextualMenu from './FloatingContextualMenu';
+import FloatingDeleteButton from './FloatingDeleteButton';
+import FloatingDragMenu from './FloatingDragMenu';
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+import FloatingInsertButton from './FloatingInsertButton';
+import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './global-styles';
+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,
+    editorView = _ref.editorView,
+    dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
+    options = _ref.options,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
+    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');
+  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: dragMenuDirection,
+    index: dragMenuIndex,
+    isOpen: !!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: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
+    alignX: 'center',
+    alignY: 'bottom',
+    stick: true,
+    forcePlacement: true,
+    zIndex: akEditorFloatingPanelZIndex,
+    offset: [0, 10]
+  }));
+};
+export var ContentComponent = function ContentComponent(_ref2) {
+  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;
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.TABLES_PLUGIN,
+    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(ContentComponentInternal, {
+    api: api,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    options: options,
+    popupsMountPoint: popupsMountPoint,
+    popupsBoundariesElement: popupsBoundariesElement,
+    popupsScrollableElement: popupsScrollableElement,
+    defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
+    defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
+  }));
+};

package/dist/types/types/index.d.ts

@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
+    resizingTableRef?: HTMLTableElement;
+    resizingTableLocalId?: string;
+    stickyHeader?: RowStickyState;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex?: number;
+    isDragMenuOpen?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

package/dist/types/ui/ContentComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+export type ContentComponentProps = {
+    api: ExtractInjectionAPI<TablePlugin> | undefined;
+    editorView: EditorView;
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
+    options?: TablePluginOptions;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    defaultGetEditorContainerWidth: GetEditorContainerWidth;
+    defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
+};
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

package/dist/types-ts4.5/types/index.d.ts

@@ -8,6 +8,7 @@ import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 export declare const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,10 +34,16 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest' | 'tableRef' | 'tablePos' | 'targetCellPosition' | 'isContextualMenuOpen' | 'pluginConfig' | 'insertColumnButtonIndex' | 'insertRowButtonIndex' | 'isDragAndDropEnabled' | 'tableWrapperTarget' | 'isCellMenuOpenByKeyboard'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;
+    resizingTableRef?: HTMLTableElement;
+    resizingTableLocalId?: string;
+    stickyHeader?: RowStickyState;
+    dragMenuDirection?: TableDirection;
+    dragMenuIndex?: number;
+    isDragMenuOpen?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
 export type AlignmentOptions = 'center' | 'align-start';

package/dist/types-ts4.5/ui/ContentComponent.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ExtractInjectionAPI, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+export type ContentComponentProps = {
+    api: ExtractInjectionAPI<TablePlugin> | undefined;
+    editorView: EditorView;
+    dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
+    options?: TablePluginOptions;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    defaultGetEditorContainerWidth: GetEditorContainerWidth;
+    defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
+};
+export declare const ContentComponent: ({ api, editorView, dispatchAnalyticsEvent, options, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, defaultGetEditorContainerWidth, defaultGetEditorFeatureFlags, }: ContentComponentProps) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.8.2",
+	"version": "10.9.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,7 +39,7 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.2.4",
+		"@atlaskit/editor-plugin-extension": "5.2.5",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tmp-editor-statsig": "^4.13.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",

package/src/tablePlugin.tsx

@@ -50,7 +50,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
 import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin } from './pm-plugins/main';
-import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -74,7 +73,8 @@ 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 type { TablePlugin, TablePluginOptions } from './tablePluginType';
-import type { ColumnResizingPluginState } from './types';
+import type { ColumnResizingPluginState, TableSharedStateInternal } from './types';
+import { ContentComponent } from './ui/ContentComponent';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -133,11 +133,19 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				return undefined;
 			}
 
-			const tablePluginState = getPluginState(editorState);
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			const tablePluginState = pluginKey.getState(editorState)!;
 			const tableResizingPluginState = getFlexiResizingPlugin(editorState);
 			const tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
 
-			return {
+			const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
+			const stickyHeader = stickyHeadersState
+				? findStickyHeaderForTable(stickyHeadersState, tablePluginState?.tablePos)
+				: undefined;
+
+			const dragAndDropState = dragAndDropPluginKey.getState(editorState);
+
+			const sharedStateInternal: TableSharedStateInternal = {
 				isFullWidthModeEnabled: !!options?.fullWidthEnabled,
 				wasFullWidthModeEnabled: !!options?.wasFullWidthEnabled,
 				isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -157,7 +165,25 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 				// TableComponent listens for node attribute changes to update colgroups
 				tableNode: tablePluginState.tableNode,
 				widthToWidest: tablePluginState.widthToWidest,
+				resizingTableLocalId: tableWidthResizingPluginState?.tableLocalId,
+				tableRef: tablePluginState?.tableRef ?? undefined,
+				resizingTableRef: tableWidthResizingPluginState?.tableRef ?? undefined,
+				tablePos: tablePluginState.tablePos,
+				targetCellPosition: tablePluginState.targetCellPosition,
+				isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
+				pluginConfig: tablePluginState.pluginConfig,
+				insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
+				insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
+				isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
+				tableWrapperTarget: tablePluginState.tableWrapperTarget,
+				isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
+				stickyHeader,
+				dragMenuDirection: dragAndDropState?.dragMenuDirection,
+				dragMenuIndex: dragAndDropState?.dragMenuIndex,
+				isDragMenuOpen: dragAndDropState?.isDragMenuOpen,
 			};
+
+			return sharedStateInternal;
 		},
 
 		actions: {
@@ -529,6 +555,22 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			popupsScrollableElement,
 			dispatchAnalyticsEvent,
 		}) {
+			if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
+				return (
+					<ContentComponent
+						api={api}
+						editorView={editorView}
+						dispatchAnalyticsEvent={dispatchAnalyticsEvent}
+						options={options}
+						popupsMountPoint={popupsMountPoint}
+						popupsBoundariesElement={popupsBoundariesElement}
+						popupsScrollableElement={popupsScrollableElement}
+						defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
+						defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
+					/>
+				);
+			}
+
 			return (
 				<ErrorBoundary
 					component={ACTION_SUBJECT.TABLES_PLUGIN}

package/src/types/index.ts

@@ -15,6 +15,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
+import { RowStickyState } from '../pm-plugins/sticky-headers/types';
 import type { TablePlugin } from '../tablePluginType';
 
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
@@ -58,10 +59,26 @@ export type TableSharedStateInternal = Pick<
 	| 'isTableHovered'
 	| 'tableNode'
 	| 'widthToWidest'
+	| 'tableRef'
+	| 'tablePos'
+	| 'targetCellPosition'
+	| 'isContextualMenuOpen'
+	| 'pluginConfig'
+	| 'insertColumnButtonIndex'
+	| 'insertRowButtonIndex'
+	| 'isDragAndDropEnabled'
+	| 'tableWrapperTarget'
+	| 'isCellMenuOpenByKeyboard'
 > & {
 	isResizing: boolean;
 	isTableResizing?: boolean;
 	isWholeTableInDanger?: boolean;
+	resizingTableRef?: HTMLTableElement;
+	resizingTableLocalId?: string;
+	stickyHeader?: RowStickyState;
+	dragMenuDirection?: TableDirection;
+	dragMenuIndex?: number;
+	isDragMenuOpen?: boolean;
 };
 
 export type TableSharedState = Pick<

package/src/ui/ContentComponent.tsx

@@ -0,0 +1,249 @@
+import React from 'react';
+
+import { ACTION_SUBJECT, DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import {
+	ExtractInjectionAPI,
+	GetEditorContainerWidth,
+	GetEditorFeatureFlags,
+} from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+
+import { TablePlugin, TablePluginOptions } from '../tablePluginType';
+import { TableSharedStateInternal } from '../types';
+
+import FloatingContextualButton from './FloatingContextualButton';
+import FloatingContextualMenu from './FloatingContextualMenu';
+import FloatingDeleteButton from './FloatingDeleteButton';
+import FloatingDragMenu from './FloatingDragMenu';
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+import FloatingInsertButton from './FloatingInsertButton';
+import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
+import { GlobalStylesWrapper } from './global-styles';
+import { FullWidthDisplay } from './TableFullWidthLabel';
+
+const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
+	api: ExtractInjectionAPI<TablePlugin> | undefined,
+	key: K,
+) => {
+	const value = useSharedPluginStateSelector(
+		api,
+		`table.${key}` as never,
+	) as TableSharedStateInternal[K];
+	return value;
+};
+
+export type ContentComponentProps = {
+	api: ExtractInjectionAPI<TablePlugin> | undefined;
+	editorView: EditorView;
+	dispatchAnalyticsEvent: DispatchAnalyticsEvent | undefined;
+	options?: TablePluginOptions;
+	popupsMountPoint?: HTMLElement;
+	popupsBoundariesElement?: HTMLElement;
+	popupsScrollableElement?: HTMLElement;
+	defaultGetEditorContainerWidth: GetEditorContainerWidth;
+	defaultGetEditorFeatureFlags: GetEditorFeatureFlags;
+};
+
+const ContentComponentInternal = ({
+	api,
+	editorView,
+	dispatchAnalyticsEvent,
+	options,
+	popupsMountPoint,
+	popupsBoundariesElement,
+	popupsScrollableElement,
+	defaultGetEditorContainerWidth,
+	defaultGetEditorFeatureFlags,
+}: ContentComponentProps) => {
+	const editorAnalyticsAPI = api?.analytics?.actions;
+	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
+
+	const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
+	const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
+	const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
+	const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
+	const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
+
+	const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
+	const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
+	const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
+	const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
+	const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
+	const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
+	const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
+	const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
+	const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
+	const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
+	const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
+	const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(
+		api,
+		'isCellMenuOpenByKeyboard',
+	);
+
+	const { allowControls } = pluginConfig;
+
+	const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
+
+	const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
+	const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
+	const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
+
+	return (
+		<>
+			{targetCellPosition &&
+				(tableRef || isCellMenuOpenByKeyboard) &&
+				!isResizing &&
+				options &&
+				options.allowContextualMenu && (
+					<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 && (
+				<FloatingInsertButton
+					tableNode={tableNode}
+					tableRef={tableRef}
+					insertColumnButtonIndex={insertColumnButtonIndex}
+					insertRowButtonIndex={insertRowButtonIndex}
+					isHeaderColumnEnabled={isHeaderColumnEnabled}
+					isHeaderRowEnabled={isHeaderRowEnabled}
+					isDragAndDropEnabled={isDragAndDropEnabled}
+					isTableScalingEnabled={options?.isTableScalingEnabled}
+					editorView={editorView}
+					mountPoint={popupsMountPoint}
+					boundariesElement={popupsBoundariesElement}
+					scrollableElement={popupsScrollableElement}
+					hasStickyHeaders={stickyHeader && stickyHeader.sticky}
+					dispatchAnalyticsEvent={dispatchAnalyticsEvent}
+					editorAnalyticsAPI={editorAnalyticsAPI}
+					getEditorContainerWidth={defaultGetEditorContainerWidth}
+					getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
+					isChromelessEditor={options?.isChromelessEditor}
+					api={api}
+					isCommentEditor={options?.isCommentEditor}
+				/>
+			)}
+			{options?.allowContextualMenu && (
+				<FloatingContextualMenu
+					editorView={editorView}
+					mountPoint={popupsMountPoint}
+					boundariesElement={popupsBoundariesElement}
+					targetCellPosition={targetCellPosition}
+					isOpen={Boolean(isContextualMenuOpen) && !isResizing}
+					pluginConfig={pluginConfig}
+					editorAnalyticsAPI={editorAnalyticsAPI}
+					getEditorContainerWidth={defaultGetEditorContainerWidth}
+					getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
+					isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
+					isCommentEditor={options?.isCommentEditor}
+					api={api}
+				/>
+			)}
+			{isDragAndDropEnabled && (
+				<FloatingDragMenu
+					editorView={editorView}
+					mountPoint={popupsMountPoint}
+					boundariesElement={popupsBoundariesElement}
+					tableRef={tableRef as HTMLTableElement}
+					tableNode={tableNode}
+					targetCellPosition={targetCellPosition}
+					direction={dragMenuDirection}
+					index={dragMenuIndex}
+					isOpen={!!isDragMenuOpen && !isResizing}
+					getEditorContainerWidth={defaultGetEditorContainerWidth}
+					editorAnalyticsAPI={editorAnalyticsAPI}
+					stickyHeaders={stickyHeader}
+					pluginConfig={pluginConfig}
+					isTableScalingEnabled={options?.isTableScalingEnabled}
+					getEditorFeatureFlags={options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags}
+					ariaNotifyPlugin={ariaNotifyPlugin}
+					api={api}
+					isCommentEditor={options?.isCommentEditor}
+				/>
+			)}
+			{allowControls && !isDragAndDropEnabled && !isResizing && (
+				<FloatingDeleteButton
+					editorView={editorView}
+					selection={editorView.state.selection}
+					tableRef={tableRef as HTMLTableElement}
+					mountPoint={popupsMountPoint}
+					boundariesElement={popupsBoundariesElement}
+					scrollableElement={popupsScrollableElement}
+					stickyHeaders={stickyHeader}
+					isNumberColumnEnabled={tableNode && tableNode.attrs.isNumberColumnEnabled}
+					editorAnalyticsAPI={editorAnalyticsAPI}
+					api={api}
+				/>
+			)}
+			{(options?.isTableScalingEnabled ||
+				(options?.tableOptions.allowTableResizing && options.isCommentEditor)) &&
+				isTableResizing &&
+				widthToWidest &&
+				resizingTableLocalId &&
+				resizingTableRef &&
+				widthToWidest[resizingTableLocalId] && (
+					<FloatingToolbarLabel
+						target={resizingTableRef}
+						content={<FullWidthDisplay />}
+						alignX={'center'}
+						alignY={'bottom'}
+						stick={true}
+						forcePlacement={true}
+						zIndex={akEditorFloatingPanelZIndex}
+						offset={[0, 10]}
+					/>
+				)}
+		</>
+	);
+};
+
+export const ContentComponent = ({
+	api,
+	editorView,
+	dispatchAnalyticsEvent,
+	options,
+	popupsMountPoint,
+	popupsBoundariesElement,
+	popupsScrollableElement,
+	defaultGetEditorContainerWidth,
+	defaultGetEditorFeatureFlags,
+}: ContentComponentProps) => {
+	return (
+		<ErrorBoundary
+			component={ACTION_SUBJECT.TABLES_PLUGIN}
+			dispatchAnalyticsEvent={dispatchAnalyticsEvent}
+			fallbackComponent={null}
+		>
+			<GlobalStylesWrapper
+				featureFlags={api?.featureFlags?.sharedState.currentState()}
+				isDragAndDropEnabledOption={options?.dragAndDropEnabled}
+				api={api}
+			/>
+			<ContentComponentInternal
+				api={api}
+				editorView={editorView}
+				dispatchAnalyticsEvent={dispatchAnalyticsEvent}
+				options={options}
+				popupsMountPoint={popupsMountPoint}
+				popupsBoundariesElement={popupsBoundariesElement}
+				popupsScrollableElement={popupsScrollableElement}
+				defaultGetEditorContainerWidth={defaultGetEditorContainerWidth}
+				defaultGetEditorFeatureFlags={defaultGetEditorFeatureFlags}
+			/>
+		</ErrorBoundary>
+	);
+};