@atlaskit/editor-plugin-table 7.23.0 → 7.24.1

package/src/plugin.tsx

@@ -98,6 +98,7 @@ export interface TablePluginOptions {
 	isTableAlignmentEnabled?: boolean;
 	isNewColumnResizingEnabled?: boolean;
 	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -329,6 +330,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableScalingEnabled,
 							isTableAlignmentEnabled,
 							isCommentEditor,
+							isChromelessEditor,
 						} = options || ({} as TablePluginOptions);
 
 						return createPlugin(
@@ -350,6 +352,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableAlignmentEnabled,
 							shouldUseIncreasedScalingPercent,
 							isCommentEditor,
+							isChromelessEditor,
 						);
 					},
 				},
@@ -632,6 +635,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											getEditorFeatureFlags={
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
+											isChromelessEditor={options?.isChromelessEditor}
 										/>
 									)}
 									{options?.allowContextualMenu && (

package/src/pm-plugins/main.ts

@@ -97,6 +97,7 @@ export const createPlugin = (
 	isTableAlignmentEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
 	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
 ) => {
 	const state = createPluginState(dispatch, {
 		pluginConfig,
@@ -294,10 +295,7 @@ export const createPlugin = (
 					slice = transformSliceRemoveCellBackgroundColor(slice, schema);
 				}
 
-				//  If a partial paste of nested expand, paste only nested-expand's content */
-				if (fg('platform.editor.transform-slice-for-nested-expand')) {
-					slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
-				}
+				slice = transformSliceToRemoveOpenNestedExpand(slice, schema);
 
 				return slice;
 			},
@@ -363,6 +361,7 @@ export const createPlugin = (
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
 					isCommentEditor,
+					isChromelessEditor,
 				}),
 				tableRow: lazyTableRowView({ eventDispatcher }),
 				tableCell: lazyTableCellView({ eventDispatcher }),

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,9 +1,11 @@
 // Resize a given column by an amount from the current state
+import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { type EditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import {
 	akEditorFullWidthLayoutWidth,
 	akEditorGutterPaddingDynamic,
+	akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
 
 import { TableCssClassName as ClassName } from '../../../types';
@@ -86,12 +88,13 @@ export const resizeColumnAndTable = ({
 }: ResizeColumnAndTable): ResizeState => {
 	const editorContainerWidth = getEditorContainerWidth(editorWidth);
 	const isTableLeftAligned = tableNode.attrs.layout === ALIGN_START;
+	const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+	const isOverflow = resizeState.tableWidth > resizeState.maxSize;
 	let resizeAmount = isTableLeftAligned ? amount : amount * 2;
-
 	const willTableHitEditorEdge = resizeState.maxSize + resizeAmount > editorContainerWidth;
 
 	const willResizedTableStayInOverflow =
-		resizeState.overflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
+		isOverflow && resizeState.tableWidth + resizeAmount / 2 > resizeState.maxSize;
 
 	// STEP 1: Update col width
 	if (willTableHitEditorEdge || willResizedTableStayInOverflow) {
@@ -100,54 +103,58 @@ export const resizeColumnAndTable = ({
 			amount < 0
 				? amount
 				: resizeAmount - (resizeState.maxSize + resizeAmount - tableContainerWidth!) / 2;
-	}
-
-	if (!willResizedTableStayInOverflow && !willTableHitEditorEdge) {
+	} else {
 		const diff = -(resizeState.tableWidth - resizeState.maxSize);
 		const rest = amount - diff;
 		const final = isTableLeftAligned ? diff + rest : diff + rest * 2;
 		resizeAmount = final;
 	}
 
-	let newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
+	const newState = updateAffectedColumn(resizeState, colIndex, resizeAmount);
 
 	// STEP 2: Update table container width
 	// columns have a min width, so delta !== resizeAmount when this is reached, use this for calculations
 	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
 
 	newState.maxSize = Math.round(
-		resizeState.overflow
+		isOverflow
 			? willResizedTableStayInOverflow
 				? // CASE 1A: table will stay in overflow
 					// do not grow the table because resize is happening in the overflow region
 					// and the overall table container needs to be retained
-					resizeState.maxSize
+					isNumberColumnEnabled
+					? resizeState.maxSize + akEditorTableNumberColumnWidth
+					: resizeState.maxSize
 				: // CASE 1B: table will no longer be in overflow, so adjust container width
 					// ensure the table is resized without any 'big jumps' by working out
 					// the difference between the new table width and the max size and adding the resize
-					resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta)
+					isNumberColumnEnabled
+					? resizeState.maxSize +
+						akEditorTableNumberColumnWidth +
+						(resizeState.tableWidth - resizeState.maxSize + akEditorTableNumberColumnWidth + delta)
+					: resizeState.maxSize + (resizeState.tableWidth - resizeState.maxSize + delta)
 			: willTableHitEditorEdge
 				? // CASE 2: table will hit editor edge
 					editorContainerWidth
 				: // CASE 3: table is being resized from a non-overflow state
-					resizeState.maxSize + delta,
+					isNumberColumnEnabled
+					? resizeState.maxSize + akEditorTableNumberColumnWidth + delta
+					: resizeState.maxSize + delta,
 	);
 
 	// do not apply scaling logic because resize state is already scaled
 	updateColgroup(newState, tableRef, tableNode, false, false);
 
-	if (!willTableHitEditorEdge && !willResizedTableStayInOverflow) {
-		updateTablePreview(
-			tableRef,
+	updateTablePreview(
+		tableRef,
+		newState.maxSize,
+		shouldChangeAlignmentToCenterResized(
+			isTableAlignmentEnabled,
+			tableNode,
+			lineLength,
 			newState.maxSize,
-			shouldChangeAlignmentToCenterResized(
-				isTableAlignmentEnabled,
-				tableNode,
-				lineLength,
-				newState.maxSize,
-			),
-		);
-	}
+		),
+	);
 
 	return newState;
 };
@@ -184,34 +191,55 @@ export const scaleResizeState = ({
 	tableNode,
 	editorWidth,
 }: TableReferences & { resizeState: ResizeState; editorWidth: number }): ResizeState => {
-	// check if table is scaled, if not then avoid applying scaling values down
-	if (resizeState.maxSize < getEditorContainerWidth(editorWidth)) {
+	const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
+	const isTableScaled =
+		isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
+
+	// Tables with number column can cause the table to be in two different states:
+	// 1. The table sum of col widths will be smaller than the max size, which is incorrect. For this
+	// avoid scaling and take the document width
+	// 2. The table sum of col widths will be the same size as max width, which happens when the table
+	// is scaled using preserve table width logic, for this apply a scaled width
+	// return early if table isn't scaled
+	if (!isTableScaled || (isNumberColumnEnabled && resizeState.maxSize > resizeState.tableWidth)) {
 		return resizeState;
 	}
 
 	const scalePercent = getTableScalingPercent(tableNode, tableRef);
-	let cols = resizeState.cols.map((col) => ({
-		...col,
-		width: Math.round(Math.max(col.width * scalePercent, col.minWidth)),
-	}));
-
 	const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
+	let cols = resizeState.cols.map((col) => {
+		return {
+			...col,
+			minWidth: tableCellMinWidth,
+			width: Math.max(Math.round(col.width * scalePercent), tableCellMinWidth),
+		};
+	});
+
 	const calculatedTableWidth = cols.reduce((prev, curr) => prev + curr.width, 0);
 
 	// using Math.round can cause the sum of col widths to be larger than the table width
-	// distribute the difference to the smallest column
+	// distribute the difference to the first column
 	if (calculatedTableWidth > scaledTableWidth) {
 		const diff = calculatedTableWidth - scaledTableWidth;
+		let hasDiffBeenDistributed = false;
 		cols = cols.map((col) => {
-			return col.width - diff >= col.minWidth ? { ...col, width: col.width - diff } : col;
+			if (!hasDiffBeenDistributed && col.width - diff >= col.minWidth) {
+				hasDiffBeenDistributed = true;
+				return { ...col, width: col.width - diff };
+			}
+			return col;
 		});
 	}
 
+	const maxSize = isNumberColumnEnabled
+		? Math.round((resizeState.maxSize + akEditorTableNumberColumnWidth) * scalePercent)
+		: Math.round(resizeState.maxSize * scalePercent);
+
 	return {
 		...resizeState,
 		widths: cols.map((col) => col.width),
 		tableWidth: scaledTableWidth,
-		maxSize: Math.round(resizeState.maxSize * scalePercent),
+		maxSize,
 		cols,
 	};
 };

package/src/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -283,6 +283,7 @@ export function updateAffectedColumn(
 
 	return {
 		...resizeState,
+		tableWidth: updatedCols.reduce((acc, col) => acc + col.width, 0),
 		cols: updatedCols,
 	};
 }

package/src/toolbar.tsx

@@ -292,22 +292,27 @@ export const getToolbarCellOptionsConfig = (
 			selected: false,
 			disabled: false,
 		},
-		{
-			id: 'editor.table.mergeCells',
-			title: formatMessage(messages.mergeCells),
-			onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-			selected: false,
-			disabled: !canMergeCells(editorState.tr),
-		},
-		{
-			id: 'editor.table.splitCell',
-			title: formatMessage(messages.splitCell),
-			onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
-			selected: false,
-			disabled: !splitCell(editorState),
-		},
 	];
 
+	if (pluginState.pluginConfig.allowMergeCells) {
+		options.push(
+			{
+				id: 'editor.table.mergeCells',
+				title: formatMessage(messages.mergeCells),
+				onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+				selected: false,
+				disabled: !canMergeCells(editorState.tr),
+			},
+			{
+				id: 'editor.table.splitCell',
+				title: formatMessage(messages.splitCell),
+				onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
+				selected: false,
+				disabled: !splitCell(editorState),
+			},
+		);
+	}
+
 	if (pluginState?.pluginConfig?.allowDistributeColumns) {
 		const newResizeStateWithAnalytics = editorView
 			? getNewResizeStateFromSelectedColumns(

package/src/types.ts

@@ -369,6 +369,7 @@ export const TableCssClassName = {
 	DRAG_CONTROLS_INSERT_BUTTON_INNER: `${tablePrefixSelector}-controls__drag-insert-button-inner`,
 	DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN: `${tablePrefixSelector}-controls__drag-insert-button-inner-column`,
 	DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW: `${tablePrefixSelector}-controls__drag-insert-button-inner-row`,
+	DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS: `${tablePrefixSelector}-controls__drag-insert-button-inner-row-chromeless`,
 	DRAG_CONTROLS_INSERT_BUTTON_WRAP: `${tablePrefixSelector}-controls__drag-insert-button-wrap`,
 
 	CONTROLS_INSERT_MARKER: `${tablePrefixSelector}-controls__insert-marker`,
@@ -388,6 +389,7 @@ export const TableCssClassName = {
 	/** drag and drop controls */
 	DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
 	DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
+	DRAG_CONTROLS_CHROMELESS: `drag-controls-chromeless`,
 	DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
 	DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
 

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -370,11 +370,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			editorView,
 		} = this.props;
 		const { isDragAndDropEnabled } = getPluginState(editorView.state);
+		const content = formatMessage(
+			isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
+		);
 
 		return {
-			content: formatMessage(
-				isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
-			),
+			content,
 			value: { name: 'insert_column' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
@@ -384,6 +385,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					<AddColRightIcon />
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(addColumnAfter, String(content))
+				: undefined,
 		} as MenuItem;
 	};
 
@@ -393,9 +397,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			editorView,
 		} = this.props;
 		const { isDragAndDropEnabled } = getPluginState(editorView.state);
+		const content = formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow);
 
 		return {
-			content: formatMessage(isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow),
+			content,
 			value: { name: 'insert_row' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
@@ -405,6 +410,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					<AddRowBelowIcon />
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(addRowAfter, String(content))
+				: undefined,
 		} as MenuItem;
 	};
 
@@ -419,10 +427,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const noOfColumns = right - left;
 		const noOfRows = bottom - top;
 
+		const content = formatMessage(messages.clearCells, {
+			0: Math.max(noOfColumns, noOfRows),
+		});
+
 		return {
-			content: formatMessage(messages.clearCells, {
-				0: Math.max(noOfColumns, noOfRows),
-			}),
+			content,
 			value: { name: 'clear' },
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
 			elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
@@ -436,6 +446,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					/>
 				</span>
 			) : undefined,
+			'aria-label': fg('platform_editor_announce_cell_options_hotkeys')
+				? tooltip(backspace, String(content))
+				: undefined,
 		} as MenuItem;
 	};
 

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -23,6 +23,7 @@ export interface ButtonProps {
 	tableRef: HTMLElement;
 	onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
 	hasStickyHeaders: boolean;
+	isChromelessEditor?: boolean;
 }
 
 const getInsertLineHeight = (
@@ -64,12 +65,16 @@ const getNumberColumnWidth = (tableRef: HTMLElement, isDragAndDropEnabled?: bool
 	return 0;
 };
 
-const getInsertLineWidth = (tableRef: HTMLElement, isDragAndDropEnabled?: boolean) => {
+const getInsertLineWidth = (
+	tableRef: HTMLElement,
+	isDragAndDropEnabled?: boolean,
+	isChromelessEditor?: boolean,
+) => {
 	// The line gets width 100% from the table,
 	// but since we have an overflow on the left,
 	// we should add an offset to make up for it.
 	const LINE_OFFSET = 4;
-	const DRAG_LINE_OFFSET = 6;
+	const DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
 	const { parentElement, offsetWidth } = tableRef;
 	const parentOffsetWidth = parentElement!.offsetWidth;
 	const { scrollLeft } = parentElement!;
@@ -97,6 +102,7 @@ export const InsertButtonForDragAndDrop = ({
 	type,
 	intl: { formatMessage },
 	hasStickyHeaders,
+	isChromelessEditor,
 }: ButtonProps & WrappedComponentProps) => {
 	const isRow = type === 'row';
 
@@ -114,8 +120,10 @@ export const InsertButtonForDragAndDrop = ({
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 					className={classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
-						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow,
+						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow && !isChromelessEditor,
 						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow,
+						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS]:
+							isRow && isChromelessEditor,
 					})}
 				>
 					<button
@@ -147,7 +155,7 @@ export const InsertButtonForDragAndDrop = ({
 					style={
 						type === 'row'
 							? {
-									width: getInsertLineWidth(tableRef, true),
+									width: getInsertLineWidth(tableRef, true, isChromelessEditor),
 									left: token('space.150', '12px'),
 								}
 							: {

package/src/ui/FloatingInsertButton/index.tsx

@@ -25,7 +25,7 @@ import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-s
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
@@ -52,6 +52,7 @@ export interface Props {
 	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
+	isChromelessEditor?: boolean;
 }
 
 export class FloatingInsertButton extends React.Component<Props & WrappedComponentProps, any> {
@@ -76,6 +77,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 			isHeaderRowEnabled,
 			isDragAndDropEnabled,
 			dispatchAnalyticsEvent,
+			isChromelessEditor,
 		} = this.props;
 
 		// TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
@@ -199,6 +201,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 						tableRef={tableRef}
 						onMouseDown={type === 'column' ? this.insertColumn : this.insertRow}
 						hasStickyHeaders={this.props.hasStickyHeaders || false}
+						isChromelessEditor={isChromelessEditor}
 					/>
 				) : (
 					<InsertButton
@@ -273,7 +276,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 			const shouldUseIncreasedScalingPercent =
 				isTableScalingEnabled &&
 				tableWithFixedColumnWidthsOption &&
-				getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+				fg('platform.editor.table.use-increased-scaling-percent');
 
 			const { state, dispatch } = editorView;
 			insertColumnWithAnalytics(

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,7 +5,7 @@ import type { 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
@@ -37,6 +37,7 @@ export interface Props {
 	getScrollOffset?: () => number;
 	tableWrapperHeight?: number;
 	api?: PluginInjectionAPI;
+	isChromelessEditor?: boolean;
 }
 
 export const TableFloatingColumnControls = ({
@@ -56,6 +57,7 @@ export const TableFloatingColumnControls = ({
 	getScrollOffset,
 	tableWrapperHeight,
 	api,
+	isChromelessEditor,
 }: Props) => {
 	const [isDragging, setIsDragging] = useState(false);
 	const containerRef = useRef<HTMLDivElement>(null);
@@ -109,7 +111,10 @@ export const TableFloatingColumnControls = ({
 		<div
 			ref={containerRef}
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}
+			className={
+				ClassName.DRAG_COLUMN_CONTROLS_WRAPPER +
+				(isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : '')
+			}
 			data-testid="table-floating-column-controls-wrapper"
 		>
 			<ColumnControls
@@ -128,7 +133,7 @@ export const TableFloatingColumnControls = ({
 				isNumberColumnEnabled={isNumberColumnEnabled}
 				isDragging={isDragging}
 				getScrollOffset={getScrollOffset}
-				api={getBooleanFF('platform.editor.table.use-shared-state-hook') ? api : undefined}
+				api={fg('platform.editor.table.use-shared-state-hook') ? api : undefined}
 			/>
 			{isDragging && (
 				<ColumnDropTargets

package/src/ui/TableFloatingControls/index.tsx

@@ -47,6 +47,7 @@ export interface TableFloatingControlsProps {
 	stickyHeader?: RowStickyState;
 	insertRowButtonIndex?: number;
 	tableWrapperWidth?: number;
+	isChromelessEditor?: boolean;
 }
 
 export const TableFloatingControls = ({
@@ -67,6 +68,7 @@ export const TableFloatingControls = ({
 	isTableHovered,
 	tableWrapperWidth,
 	api,
+	isChromelessEditor,
 }: TableFloatingControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
 	const _selectRow = useCallback(
 		(row: number, expand: boolean) => {
@@ -126,7 +128,9 @@ export const TableFloatingControls = ({
 		stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
 
 	const wrapperClassName = isDragAndDropEnabled
-		? ClassName.DRAG_ROW_CONTROLS_WRAPPER
+		? isChromelessEditor
+			? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS
+			: ClassName.DRAG_ROW_CONTROLS_WRAPPER
 		: ClassName.ROW_CONTROLS_WRAPPER;
 
 	const tablePos = findTable(editorView.state.selection)?.pos;

package/src/ui/common-styles.ts

@@ -514,10 +514,18 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			}
 		}
 
+		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+			left: -4px;
+		}
+
 		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER} {
 			padding: 0 ${tablePadding}px;
 		}
 
+		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+			left: -8px;
+		}
+
 		&.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
 			padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
 		}

package/src/ui/ui-styles.ts

@@ -198,6 +198,10 @@ export const dragInsertButtonWrapper = () => css`
 		left: -3px;
 		bottom: -2px;
 	}
+	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS} {
+		left: 6px;
+		bottom: -2px;
+	}
 
 	.${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
 		${Button(`