@atlaskit/editor-plugin-table 9.1.3 → 9.2.0

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

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
 import { isTableNested } from '../../pm-plugins/utils/nodes';
@@ -11,7 +12,8 @@ import { DragCornerControls, DragCornerControlsWithSelection } from './CornerCon
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls/ClassicControls';
-import { DragControls } from './RowControls/DragControls';
+import { DragControls, DragControlsWithSelection } from './RowControls/DragControls';
+// Row controls
 export var TableFloatingControls = function TableFloatingControls(_ref) {
   var _findTable;
   var editorView = _ref.editorView,
@@ -106,18 +108,36 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
       updateCellHoverLocation: updateCellHoverLocation,
       stickyTop: stickyTop,
       isDragAndDropEnabled: isDragAndDropEnabled
-    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && (editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
+    }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/React.createElement(React.Fragment, null, fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing,
       api: api
-    }) : /*#__PURE__*/React.createElement(DragCornerControls, {
+    }), /*#__PURE__*/React.createElement(DragControlsWithSelection, {
+      tableRef: tableRef,
+      tableNode: tableNode,
+      hoveredCell: hoveredCell,
+      isTableHovered: isTableHovered,
+      editorView: editorView,
+      tableActive: tableActive,
+      isInDanger: isInDanger,
+      isResizing: isResizing
+      // Ignored via go/ees005
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      ,
+      tableWidth: tableWrapperWidth,
+      hoverRows: _hoverRows,
+      selectRow: _selectRow,
+      selectRows: _selectRows,
+      updateCellHoverLocation: updateCellHoverLocation,
+      api: api
+    })) : /*#__PURE__*/React.createElement(React.Fragment, null, shouldShowCornerControls && /*#__PURE__*/React.createElement(DragCornerControls, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,
       isResizing: isResizing
-    })), /*#__PURE__*/React.createElement(DragControls, {
+    }), /*#__PURE__*/React.createElement(DragControls, {
       tableRef: tableRef,
       tableNode: tableNode,
       hoveredCell: hoveredCell,
@@ -134,7 +154,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
       selectRow: _selectRow,
       selectRows: _selectRows,
       updateCellHoverLocation: updateCellHoverLocation
-    })) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
+    }))) : fg('platform_editor_table_use_shared_state_hook_fg') ? /*#__PURE__*/React.createElement(FloatingControlsWithSelection, {
       editorView: editorView,
       tableRef: tableRef,
       isInDanger: isInDanger,

package/dist/types/nodeviews/TableComponent.d.ts

@@ -5,6 +5,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import type { TableOptions } from './types';
@@ -17,7 +18,7 @@ interface ComponentProps {
     options?: TableOptions;
     contentDOM: (node: HTMLElement | null) => void;
     containerWidth: EditorContainerWidth;
-    allowControls: boolean;
+    allowControls?: boolean;
     allowTableResizing?: boolean;
     allowTableAlignment?: boolean;
     isHeaderRowEnabled: boolean;
@@ -37,6 +38,7 @@ interface ComponentProps {
     hoveredCell?: CellHoverMeta;
     isTableHovered?: boolean;
     isWholeTableInDanger?: boolean;
+    selection?: Selection;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ComponentProps>> & {
     WrappedComponent: React.ComponentType<ComponentProps>;

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

@@ -33,7 +33,7 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;

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

@@ -20,8 +20,29 @@ type DragHandleProps = {
     toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     editorView: EditorView;
     isDragMenuTarget: boolean;
+    hoveredColumns?: number[];
+    hoveredRows?: number[];
 };
 export declare const DragHandle: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps>;
 };
+export declare const DragHandleWithSharedState: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
+        pluginConfiguration: import("../../tablePluginType").TablePluginOptions | undefined;
+        actions: import("../../tablePluginType").TablePluginActions;
+        sharedState?: import("../../types").TableSharedState | undefined;
+        commands: import("../../tablePluginType").TablePluginCommands;
+        dependencies: import("../../tablePluginType").TablePluginDependencies;
+    }> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<DragHandleProps & {
+        api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
+            pluginConfiguration: import("../../tablePluginType").TablePluginOptions | undefined;
+            actions: import("../../tablePluginType").TablePluginActions;
+            sharedState?: import("../../types").TableSharedState | undefined;
+            commands: import("../../tablePluginType").TablePluginCommands;
+            dependencies: import("../../tablePluginType").TablePluginDependencies;
+        }> | undefined;
+    } & WrappedComponentProps>;
+};
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -20,7 +20,7 @@ interface ColumnControlsProps {
     isDragging?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
     api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
         pluginConfiguration: import("../../../tablePluginType").TablePluginOptions | undefined;
         actions: import("../../../tablePluginType").TablePluginActions;

package/dist/types/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TablePlugin } from '../../../tablePluginType';
 import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
@@ -17,8 +19,9 @@ type DragControlsProps = {
     selectRow: (row: number, expand: boolean) => void;
     selectRows: (rowIndexes: number[]) => void;
     updateCellHoverLocation: (rowIndex: number) => void;
+    api?: ExtractInjectionAPI<TablePlugin>;
+    selection?: Selection;
 };
-export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<DragControlsProps & WrappedComponentProps>;
-};
+export declare const DragControls: ({ tableRef, tableNode, tableWidth, hoveredCell, tableActive, editorView, isInDanger, isResizing, isTableHovered, hoverRows, selectRow, selectRows, updateCellHoverLocation, api, selection, }: DragControlsProps) => JSX.Element | null;
+export declare const DragControlsWithSelection: ({ editorView, tableRef, tableNode, tableWidth, tableActive, hoveredCell, isInDanger, isTableHovered, isResizing, hoverRows, selectRow, selectRows, updateCellHoverLocation, api, }: Exclude<DragControlsProps, 'selection'>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableComponent.d.ts

@@ -5,6 +5,7 @@ import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import type { TableOptions } from './types';
@@ -17,7 +18,7 @@ interface ComponentProps {
     options?: TableOptions;
     contentDOM: (node: HTMLElement | null) => void;
     containerWidth: EditorContainerWidth;
-    allowControls: boolean;
+    allowControls?: boolean;
     allowTableResizing?: boolean;
     allowTableAlignment?: boolean;
     isHeaderRowEnabled: boolean;
@@ -37,6 +38,7 @@ interface ComponentProps {
     hoveredCell?: CellHoverMeta;
     isTableHovered?: boolean;
     isWholeTableInDanger?: boolean;
+    selection?: Selection;
 }
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<ComponentProps>> & {
     WrappedComponent: React.ComponentType<ComponentProps>;

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

@@ -33,7 +33,7 @@ export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
         };
     };
 };
-export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
+export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled' | 'isHeaderRowEnabled' | 'isHeaderColumnEnabled' | 'ordering' | 'isInDanger' | 'hoveredRows' | 'hoveredColumns' | 'hoveredCell' | 'isTableHovered' | 'tableNode' | 'widthToWidest'> & {
     isResizing: boolean;
     isTableResizing?: boolean;
     isWholeTableInDanger?: boolean;

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

@@ -20,8 +20,29 @@ type DragHandleProps = {
     toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     editorView: EditorView;
     isDragMenuTarget: boolean;
+    hoveredColumns?: number[];
+    hoveredRows?: number[];
 };
 export declare const DragHandle: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps>;
 };
+export declare const DragHandleWithSharedState: React.FC<import("react-intl-next").WithIntlProps<DragHandleProps & {
+    api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
+        pluginConfiguration: import("../../tablePluginType").TablePluginOptions | undefined;
+        actions: import("../../tablePluginType").TablePluginActions;
+        sharedState?: import("../../types").TableSharedState | undefined;
+        commands: import("../../tablePluginType").TablePluginCommands;
+        dependencies: import("../../tablePluginType").TablePluginDependencies;
+    }> | undefined;
+} & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<DragHandleProps & {
+        api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
+            pluginConfiguration: import("../../tablePluginType").TablePluginOptions | undefined;
+            actions: import("../../tablePluginType").TablePluginActions;
+            sharedState?: import("../../types").TableSharedState | undefined;
+            commands: import("../../tablePluginType").TablePluginCommands;
+            dependencies: import("../../tablePluginType").TablePluginDependencies;
+        }> | undefined;
+    } & WrappedComponentProps>;
+};
 export {};

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts

@@ -20,7 +20,7 @@ interface ColumnControlsProps {
     isDragging?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, hasHeaderColumn, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
+export declare const ColumnControls: ({ editorView, tableActive, tableRef, hoveredCell, stickyTop, localId, isInDanger, rowHeights, colWidths, isTableHovered, tableContainerWidth, isNumberColumnEnabled, isDragging, getScrollOffset, api, }: ColumnControlsProps & {
     api?: import("@atlaskit/editor-common/types").EditorInjectionAPI<"table", {
         pluginConfiguration: import("../../../tablePluginType").TablePluginOptions | undefined;
         actions: import("../../../tablePluginType").TablePluginActions;

package/dist/types-ts4.5/ui/TableFloatingControls/RowControls/DragControls.d.ts

@@ -1,7 +1,9 @@
-import React from 'react';
-import type { WrappedComponentProps } from 'react-intl-next';
+/// <reference types="react" />
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TablePlugin } from '../../../tablePluginType';
 import type { CellHoverMeta } from '../../../types';
 type DragControlsProps = {
     editorView: EditorView;
@@ -17,8 +19,9 @@ type DragControlsProps = {
     selectRow: (row: number, expand: boolean) => void;
     selectRows: (rowIndexes: number[]) => void;
     updateCellHoverLocation: (rowIndex: number) => void;
+    api?: ExtractInjectionAPI<TablePlugin>;
+    selection?: Selection;
 };
-export declare const DragControls: React.FC<import("react-intl-next").WithIntlProps<DragControlsProps & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<DragControlsProps & WrappedComponentProps>;
-};
+export declare const DragControls: ({ tableRef, tableNode, tableWidth, hoveredCell, tableActive, editorView, isInDanger, isResizing, isTableHovered, hoverRows, selectRow, selectRows, updateCellHoverLocation, api, selection, }: DragControlsProps) => JSX.Element | null;
+export declare const DragControlsWithSelection: ({ editorView, tableRef, tableNode, tableWidth, tableActive, hoveredCell, isInDanger, isTableHovered, isResizing, hoverRows, selectRow, selectRows, updateCellHoverLocation, api, }: Exclude<DragControlsProps, 'selection'>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "9.1.3",
+	"version": "9.2.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^99.1.0",
+		"@atlaskit/editor-common": "^99.3.0",
 		"@atlaskit/editor-palette": "1.6.4",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -43,7 +43,7 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^23.3.0",
+		"@atlaskit/icon": "^23.4.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
@@ -51,9 +51,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.34.0",
+		"@atlaskit/tmp-editor-statsig": "^2.36.0",
 		"@atlaskit/toggle": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.1.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -134,6 +134,9 @@
 		},
 		"platform_editor_table_overflow_in_full_width_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_table_use_shared_state_hook_fg": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponent.tsx

@@ -17,6 +17,7 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorTableNumberColumnWidth,
@@ -26,7 +27,6 @@ import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../pm-plugins/commands';
@@ -107,7 +107,7 @@ interface ComponentProps {
 
 	contentDOM: (node: HTMLElement | null) => void;
 	containerWidth: EditorContainerWidth;
-	allowControls: boolean;
+	allowControls?: boolean;
 
 	allowTableResizing?: boolean;
 	allowTableAlignment?: boolean;
@@ -125,12 +125,13 @@ interface ComponentProps {
 	pluginInjectionApi?: PluginInjectionAPI;
 	intl: IntlShape;
 
-	// marking props as option to ensure backward compatibility when platform_editor_table_use_shared_state_hook disabled
+	// marking props as optional to ensure backward compatibility when platform_editor_table_use_shared_state_hook_fg disabled
 	isInDanger?: boolean;
 	hoveredRows?: number[];
 	hoveredCell?: CellHoverMeta;
 	isTableHovered?: boolean;
 	isWholeTableInDanger?: boolean;
+	selection?: Selection;
 }
 
 interface TableState {
@@ -598,7 +599,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const table = findTable(view.state.selection);
 
-		if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
+		if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 		}
@@ -809,6 +810,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled, // here we can use options.isTableScalingEnabled
 			allowTableResizing,
 			allowTableAlignment,
+			selection,
 		} = this.props;
 
 		let { isInDanger, hoveredRows, hoveredCell, isTableHovered, isWholeTableInDanger } = this.props;
@@ -816,7 +818,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const { showBeforeShadow, showAfterShadow } = this.state;
 		const node = getNode();
 
-		if (editorExperiment('platform_editor_table_use_shared_state_hook', false)) {
+		if (!fg('platform_editor_table_use_shared_state_hook_fg')) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 			hoveredRows = pluginState.hoveredRows;
@@ -908,7 +910,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const topShadowPadding = isDragAndDropEnabled ? 0 : shadowPadding;
 		const topOffset = fg('platform_editor_breakout_use_css')
 			? 0
-			: this.state.stickyHeader?.top ?? 0;
+			: (this.state.stickyHeader?.top ?? 0);
 
 		const topStickyShadowPosition =
 			this.state.stickyHeader && topOffset + this.state.stickyHeader.padding + topShadowPadding + 2;
@@ -926,7 +928,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					[ClassName.WITH_CONTROLS]: allowControls && tableActive,
 					[ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
 					[ClassName.HOVERED_DELETE_BUTTON]: isInDanger,
-					[ClassName.TABLE_SELECTED]: isTableSelected(view.state.selection),
+					[ClassName.TABLE_SELECTED]: isTableSelected(selection ?? view.state.selection),
 				})}
 				editorView={view}
 				getPos={getPos}

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -51,10 +51,11 @@ export const TableComponentWithSharedState = ({
 	allowTableAlignment,
 	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
-	const { widthState, tableState, mediaState } = useSharedPluginState(api, [
+	const { widthState, tableState, mediaState, selectionState } = useSharedPluginState(api, [
 		'width',
 		'table',
 		'media',
+		'selection',
 	]);
 
 	if (!tableState) {
@@ -104,7 +105,7 @@ export const TableComponentWithSharedState = ({
 			getPos={getPos}
 			isMediaFullscreen={mediaState?.isFullscreen}
 			options={options}
-			allowControls={!!allowControls}
+			allowControls={allowControls}
 			isHeaderRowEnabled={isHeaderRowEnabled}
 			isHeaderColumnEnabled={isHeaderColumnEnabled}
 			isDragAndDropEnabled={options?.isDragAndDropEnabled}
@@ -127,6 +128,7 @@ export const TableComponentWithSharedState = ({
 			hoveredCell={hoveredCell}
 			isTableHovered={isTableHovered}
 			isWholeTableInDanger={isWholeTableInDanger}
+			selection={selectionState?.selection}
 		/>
 	);
 };

package/src/nodeviews/table.tsx

@@ -20,7 +20,6 @@ import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
 import { pluginKey as tableDragAndDropPluginKey } from '../pm-plugins/drag-and-drop/plugin-key';
@@ -190,7 +189,7 @@ export default class TableView extends ReactNodeView<Props> {
 	};
 
 	render(props: Props, forwardRef: ForwardRef) {
-		if (editorExperiment('platform_editor_table_use_shared_state_hook', true)) {
+		if (fg('platform_editor_table_use_shared_state_hook_fg')) {
 			return (
 				<TableComponentWithSharedState
 					forwardRef={forwardRef}

package/src/tablePlugin.tsx

@@ -133,6 +133,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				isTableResizing: tableWidthResizingPluginState?.resizing,
 				isInDanger: tablePluginState.isInDanger,
 				hoveredRows: tablePluginState.hoveredRows,
+				hoveredColumns: tablePluginState.hoveredColumns,
 				hoveredCell: tablePluginState.hoveredCell,
 				isTableHovered: tablePluginState.isTableHovered,
 				isWholeTableInDanger: tablePluginState.isWholeTableInDanger,

package/src/types/index.ts

@@ -53,6 +53,7 @@ export type TableSharedStateInternal = Pick<
 	| 'ordering'
 	| 'isInDanger'
 	| 'hoveredRows'
+	| 'hoveredColumns'
 	| 'hoveredCell'
 	| 'isTableHovered'
 	| 'tableNode'

package/src/ui/DragHandle/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-html-button */
 import type { MouseEventHandler } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -7,7 +8,9 @@ import type { WrappedComponentProps } from 'react-intl-next';
 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 type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -22,8 +25,9 @@ import {
 	findDuplicatePosition,
 	hasMergedCellsInSelection,
 } from '../../pm-plugins/utils/merged-cells';
+import type { TablePlugin } from '../../tablePluginType';
 import { TableCssClassName as ClassName } from '../../types';
-import type { CellHoverMeta, TableDirection } from '../../types';
+import type { CellHoverMeta, TableDirection, TableSharedStateInternal } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
@@ -49,6 +53,12 @@ type DragHandleProps = {
 	) => void;
 	editorView: EditorView;
 	isDragMenuTarget: boolean; // this is identify which current handle component is
+	hoveredColumns?: number[];
+	hoveredRows?: number[];
+};
+
+type DragHandleWithSharedStateProps = Exclude<DragHandleProps, 'hoveredColumns' | 'hoveredRows'> & {
+	api?: ExtractInjectionAPI<TablePlugin>;
 };
 
 const DragHandleComponent = ({
@@ -67,6 +77,8 @@ const DragHandleComponent = ({
 	onClick,
 	editorView,
 	intl: { formatMessage },
+	hoveredColumns,
+	hoveredRows,
 }: DragHandleProps & WrappedComponentProps) => {
 	const dragHandleDivRef = useRef<HTMLButtonElement>(null);
 	const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(null);
@@ -74,7 +86,13 @@ const DragHandleComponent = ({
 		state,
 		state: { selection },
 	} = editorView;
-	const { hoveredColumns, hoveredRows } = getPluginState(state);
+
+	if (hoveredColumns === undefined || hoveredRows === undefined) {
+		const { hoveredColumns: hoveredColumnsState, hoveredRows: hoveredRowsState } =
+			getPluginState(state);
+		hoveredColumns = hoveredColumnsState;
+		hoveredRows = hoveredRowsState;
+	}
 	const { isDragMenuOpen = false } = getDnDPluginState(state);
 
 	const isRow = direction === 'row';
@@ -291,4 +309,51 @@ const DragHandleComponent = ({
 	);
 };
 
+const DragHandleComponentWithSharedState = ({
+	isDragMenuTarget,
+	tableLocalId,
+	direction,
+	appearance,
+	indexes,
+	forceDefaultHandle,
+	previewHeight,
+	previewWidth,
+	onMouseOver,
+	onMouseOut,
+	toggleDragMenu,
+	hoveredCell,
+	onClick,
+	editorView,
+	intl,
+	api,
+}: DragHandleWithSharedStateProps & WrappedComponentProps) => {
+	const { tableState } = useSharedPluginState(api, ['table']) as {
+		tableState?: TableSharedStateInternal;
+	};
+
+	return (
+		<DragHandleComponent
+			isDragMenuTarget={isDragMenuTarget}
+			tableLocalId={tableLocalId}
+			direction={direction}
+			appearance={appearance}
+			indexes={indexes}
+			forceDefaultHandle={forceDefaultHandle}
+			previewWidth={previewWidth}
+			previewHeight={previewHeight}
+			onMouseOver={onMouseOver}
+			onMouseOut={onMouseOut}
+			toggleDragMenu={toggleDragMenu}
+			hoveredCell={hoveredCell}
+			onClick={onClick}
+			editorView={editorView}
+			intl={intl}
+			hoveredColumns={tableState?.hoveredColumns}
+			hoveredRows={tableState?.hoveredRows}
+		/>
+	);
+};
+
 export const DragHandle = injectIntl(DragHandleComponent);
+
+export const DragHandleWithSharedState = injectIntl(DragHandleComponentWithSharedState);