@atlaskit/editor-plugin-table 9.1.2 → 9.2.0

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/tablePluginType.ts

@@ -57,32 +57,38 @@ type MediaPlugin = NextEditorPlugin<
 	}
 >;
 
+export type TablePluginActions = {
+	insertTable: InsertTableAction;
+};
+
+export type TablePluginCommands = {
+	insertTableWithSize: (
+		rowsCount: number,
+		colsCount: number,
+		inputMethod?: INPUT_METHOD.PICKER,
+	) => EditorCommand;
+};
+
+export type TablePluginDependencies = [
+	AnalyticsPlugin,
+	ContentInsertionPlugin,
+	WidthPlugin,
+	SelectionPlugin,
+	OptionalPlugin<GuidelinePlugin>,
+	OptionalPlugin<BatchAttributeUpdatesPlugin>,
+	OptionalPlugin<AccessibilityUtilsPlugin>,
+	OptionalPlugin<MediaPlugin>,
+	OptionalPlugin<EditorViewModePlugin>,
+	OptionalPlugin<FeatureFlagsPlugin>,
+];
+
 export type TablePlugin = NextEditorPlugin<
 	'table',
 	{
 		pluginConfiguration: TablePluginOptions | undefined;
-		actions: {
-			insertTable: InsertTableAction;
-		};
+		actions: TablePluginActions;
 		sharedState?: TableSharedState;
-		commands: {
-			insertTableWithSize: (
-				rowsCount: number,
-				colsCount: number,
-				inputMethod?: INPUT_METHOD.PICKER,
-			) => EditorCommand;
-		};
-		dependencies: [
-			AnalyticsPlugin,
-			ContentInsertionPlugin,
-			WidthPlugin,
-			SelectionPlugin,
-			OptionalPlugin<GuidelinePlugin>,
-			OptionalPlugin<BatchAttributeUpdatesPlugin>,
-			OptionalPlugin<AccessibilityUtilsPlugin>,
-			OptionalPlugin<MediaPlugin>,
-			OptionalPlugin<EditorViewModePlugin>,
-			OptionalPlugin<FeatureFlagsPlugin>,
-		];
+		commands: TablePluginCommands;
+		dependencies: TablePluginDependencies;
 	}
 >;

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);

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -27,7 +27,7 @@ import type { TablePlugin } from '../../../tablePluginType';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import type { DragHandleAppearance } from '../../DragHandle';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 
 interface ColumnControlsProps {
 	editorView: EditorView;
@@ -68,7 +68,6 @@ export const ColumnControls = ({
 	isInDanger,
 	rowHeights,
 	colWidths,
-	hasHeaderColumn,
 	isTableHovered,
 	tableContainerWidth,
 	isNumberColumnEnabled,
@@ -98,7 +97,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights?.[0];
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {
@@ -238,22 +237,42 @@ export const ColumnControls = ({
 					isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]
 				}-drag-handle`}
 			>
-				<DragHandle
-					isDragMenuTarget={!isHover}
-					direction="column"
-					tableLocalId={localId || ''}
-					indexes={indexes}
-					hoveredCell={hoveredCell}
-					previewWidth={previewWidth}
-					forceDefaultHandle={!isHover}
-					previewHeight={previewHeight}
-					appearance={appearance}
-					onClick={handleClick}
-					onMouseOver={handleMouseOver}
-					onMouseOut={handleMouseOut}
-					toggleDragMenu={toggleDragMenuHandler}
-					editorView={editorView}
-				/>
+				{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+					<DragHandleWithSharedState
+						isDragMenuTarget={!isHover}
+						direction="column"
+						tableLocalId={localId || ''}
+						indexes={indexes}
+						hoveredCell={hoveredCell}
+						previewWidth={previewWidth}
+						forceDefaultHandle={!isHover}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+						api={api}
+					/>
+				) : (
+					<DragHandle
+						isDragMenuTarget={!isHover}
+						direction="column"
+						tableLocalId={localId || ''}
+						indexes={indexes}
+						hoveredCell={hoveredCell}
+						previewWidth={previewWidth}
+						forceDefaultHandle={!isHover}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+					/>
+				)}
 			</div>
 		);
 	};

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -7,7 +7,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
@@ -102,7 +101,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (rowHeights?.[0] ?? 0) : 0;
 		containerRef?.current?.style.setProperty(
 			'top',
 			fg('platform_editor_breakout_use_css')
@@ -141,9 +140,7 @@ const TableFloatingColumnControls = ({
 				isNumberColumnEnabled={isNumberColumnEnabled}
 				isDragging={isDragging}
 				getScrollOffset={getScrollOffset}
-				api={
-					editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
-				}
+				api={fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined}
 			/>
 			{isDragging && (
 				<ColumnDropTargets

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -2,14 +2,14 @@
 import type { MouseEvent } from 'react';
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { injectIntl } from 'react-intl-next';
-import type { WrappedComponentProps } from 'react-intl-next';
-
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+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 { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { token } from '@atlaskit/tokens';
 
@@ -19,11 +19,12 @@ import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
+import type { TablePlugin } from '../../../tablePluginType';
 import { TableCssClassName as ClassName } from '../../../types';
 import type { CellHoverMeta, DraggableSourceData, HandleTypes } from '../../../types';
 import { dropTargetExtendedWidth } from '../../consts';
 import type { DragHandleAppearance } from '../../DragHandle';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 
 type DragControlsProps = {
@@ -40,6 +41,8 @@ type DragControlsProps = {
 	selectRow: (row: number, expand: boolean) => void;
 	selectRows: (rowIndexes: number[]) => void;
 	updateCellHoverLocation: (rowIndex: number) => void;
+	api?: ExtractInjectionAPI<TablePlugin>;
+	selection?: Selection;
 };
 
 const getSelectedRows = (selection: Selection) => {
@@ -53,7 +56,7 @@ const getSelectedRows = (selection: Selection) => {
 	return [];
 };
 
-const DragControlsComponent = ({
+export const DragControls = ({
 	tableRef,
 	tableNode,
 	tableWidth,
@@ -67,13 +70,14 @@ const DragControlsComponent = ({
 	selectRow,
 	selectRows,
 	updateCellHoverLocation,
-}: DragControlsProps & WrappedComponentProps) => {
+	api,
+	selection,
+}: DragControlsProps) => {
 	const [isDragging, setIsDragging] = useState(false);
-
 	const rowHeights = getRowHeights(tableRef);
 	const rowsParams = getRowsParams(rowHeights);
 	const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
-	const selectedRowIndexes = getSelectedRows(editorView.state.selection);
+	const selectedRowIndexes = getSelectedRows(selection ?? editorView.state.selection);
 	const currentNodeLocalId = tableNode?.attrs?.localId ?? '';
 
 	useEffect(() => {
@@ -213,22 +217,42 @@ const DragControlsComponent = ({
 				}}
 				data-testid={`table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`}
 			>
-				<DragHandle
-					isDragMenuTarget={!isHover}
-					direction="row"
-					tableLocalId={currentNodeLocalId}
-					indexes={indexes}
-					forceDefaultHandle={!isHover}
-					previewWidth={tableWidth}
-					previewHeight={previewHeight}
-					appearance={appearance}
-					hoveredCell={hoveredCell}
-					onClick={handleClick}
-					onMouseOver={handleMouseOver}
-					onMouseOut={handleMouseOut}
-					toggleDragMenu={toggleDragMenuHandler}
-					editorView={editorView}
-				/>
+				{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+					<DragHandleWithSharedState
+						isDragMenuTarget={!isHover}
+						direction="row"
+						tableLocalId={currentNodeLocalId}
+						indexes={indexes}
+						forceDefaultHandle={!isHover}
+						previewWidth={tableWidth}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						hoveredCell={hoveredCell}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+						api={api}
+					/>
+				) : (
+					<DragHandle
+						isDragMenuTarget={!isHover}
+						direction="row"
+						tableLocalId={currentNodeLocalId}
+						indexes={indexes}
+						forceDefaultHandle={!isHover}
+						previewWidth={tableWidth}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						hoveredCell={hoveredCell}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+					/>
+				)}
 			</div>
 		);
 	};
@@ -347,4 +371,41 @@ const DragControlsComponent = ({
 	);
 };
 
-export const DragControls = injectIntl(DragControlsComponent);
+export const DragControlsWithSelection = ({
+	editorView,
+	tableRef,
+	tableNode,
+	tableWidth,
+	tableActive,
+	hoveredCell,
+	isInDanger,
+	isTableHovered,
+	isResizing,
+	hoverRows,
+	selectRow,
+	selectRows,
+	updateCellHoverLocation,
+	api,
+}: Exclude<DragControlsProps, 'selection'>) => {
+	const { selectionState } = useSharedPluginState(api, ['selection']);
+
+	return (
+		<DragControls
+			editorView={editorView}
+			tableRef={tableRef}
+			tableNode={tableNode}
+			tableWidth={tableWidth}
+			tableActive={tableActive}
+			hoveredCell={hoveredCell}
+			isInDanger={isInDanger}
+			isTableHovered={isTableHovered}
+			isResizing={isResizing}
+			hoverRows={hoverRows}
+			selectRow={selectRow}
+			selectRows={selectRows}
+			updateCellHoverLocation={updateCellHoverLocation}
+			api={api}
+			selection={selectionState?.selection}
+		/>
+	);
+};

package/src/ui/TableFloatingControls/index.tsx

@@ -8,6 +8,7 @@ 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 { 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';
@@ -25,7 +26,7 @@ import {
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls/ClassicControls';
-import { DragControls } from './RowControls/DragControls';
+import { DragControls, DragControlsWithSelection } from './RowControls/DragControls';
 
 interface TableFloatingControlsProps {
 	editorView: EditorView;
@@ -51,6 +52,7 @@ interface TableFloatingControlsProps {
 	isChromelessEditor?: boolean;
 }
 
+// Row controls
 export const TableFloatingControls = ({
 	editorView,
 	tableRef,
@@ -171,42 +173,67 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{shouldShowCornerControls &&
-									(editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
-										<DragCornerControlsWithSelection
-											editorView={editorView}
+								{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+									<>
+										{shouldShowCornerControls && (
+											<DragCornerControlsWithSelection
+												editorView={editorView}
+												tableRef={tableRef}
+												isInDanger={isInDanger}
+												isResizing={isResizing}
+												api={api}
+											/>
+										)}
+										<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}
 										/>
-									) : (
-										<DragCornerControls
-											editorView={editorView}
+									</>
+								) : (
+									<>
+										{shouldShowCornerControls && (
+											<DragCornerControls
+												editorView={editorView}
+												tableRef={tableRef}
+												isInDanger={isInDanger}
+												isResizing={isResizing}
+											/>
+										)}
+										<DragControls
 											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}
 										/>
-									))}
-								<DragControls
-									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}
-								/>
+									</>
+								)}
 							</>
-						) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
+						) : fg('platform_editor_table_use_shared_state_hook_fg') ? (
 							<FloatingControlsWithSelection
 								editorView={editorView}
 								tableRef={tableRef}

package/src/ui/common-styles.ts

@@ -25,7 +25,6 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { N0, N40A, R500 } from '@atlaskit/theme/colors';
-import { fontSize } from '@atlaskit/theme/constants';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
@@ -850,7 +849,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		padding-bottom: 2px;
 		padding: 10px 2px;
 		text-align: center;
-		font-size: ${relativeFontSizeToBase16(fontSize())};
+		font-size: ${relativeFontSizeToBase16(14)};
 		background-color: ${tableHeaderCellBackgroundColor};
 		color: ${tableTextColor};
 		border-color: ${tableBorderColor};