@atlaskit/editor-plugin-table 7.24.0 → 7.24.2

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(`