@atlaskit/editor-plugin-table 10.8.3 → 10.9.2

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.3",
+	"version": "10.9.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.12.0",
+		"@atlaskit/editor-common": "^103.15.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@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.5",
+		"@atlaskit/editor-plugin-extension": "5.2.6",
 		"@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",
@@ -203,6 +203,9 @@
 		},
 		"platform_editor_controls_table_picker": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_6": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/table.tsx

@@ -15,7 +15,11 @@ import type {
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, PluginKey, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
+import {
+	type EditorState,
+	type PluginKey,
+	type SelectionBookmark,
+} from '@atlaskit/editor-prosemirror/state';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -177,7 +181,6 @@ export default class TableView extends ReactNodeView<Props> {
 		let oldIgnoreMutation: (mutation: MutationRecord) => boolean;
 
 		let selectionBookmark: SelectionBookmark;
-		let parentOffset = 0;
 		let mutationsIgnored = false;
 
 		// Only proceed if we have both a node and table, and the table isn't already inside the node
@@ -188,8 +191,8 @@ export default class TableView extends ReactNodeView<Props> {
 			// Set up a temporary mutation handler that:
 			// - Ignores all DOM mutations except selection changes
 			// - Tracks when mutations have been ignored via mutationsIgnored flag
-			this.ignoreMutation = (m: MutationRecord) => {
-				const isSelectionMutation = m.target instanceof Selection;
+			this.ignoreMutation = (m: MutationRecord | { type: string; target: Node }) => {
+				const isSelectionMutation = m.type === 'selection';
 				if (!isSelectionMutation) {
 					mutationsIgnored = true;
 				}
@@ -202,14 +205,8 @@ export default class TableView extends ReactNodeView<Props> {
 				selectionBookmark = this.view.state.selection.getBookmark();
 			}
 
-			// Store the current cursor position within the parent node
-			// Used to determine if we need to restore selection later
-			if (this.view.state.selection?.ranges.length > 0) {
-				parentOffset = this.view.state.selection?.ranges[0].$from?.parentOffset ?? 0;
-			}
-
 			// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-			if (this.renderedDOM) {
+			if (this.dom && this.renderedDOM) {
 				this.dom.removeChild(this.renderedDOM);
 			}
 			// Move the table from the ProseMirror table structure into the React rendered table node.
@@ -223,11 +220,13 @@ export default class TableView extends ReactNodeView<Props> {
 				// Restore the selection only if:
 				// - We have a selection bookmark
 				// - Mutations were ignored during the table move
-				// - The cursor wasn't at the start of the node
-				if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-					this.view.dispatch(
-						this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)),
-					);
+				// - The bookmarked selection is different from the current selection.
+				if (selectionBookmark && mutationsIgnored) {
+					const resolvedSelection = selectionBookmark.resolve(this.view.state.tr.doc);
+					// Don't set the selection if it's the same as the current selection.
+					if (!resolvedSelection.eq(this.view.state.selection)) {
+						this.view.dispatch(this.view.state.tr.setSelection(resolvedSelection));
+					}
 				}
 			});
 		}

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

package/src/ui/toolbar.tsx

@@ -672,6 +672,10 @@ export const getToolbarConfig =
 				onBlur: clearHoverSelection(),
 			});
 
+			const shouldGroupWithoutSeparators =
+				editorExperiment('platform_editor_controls', 'variant1') &&
+				fg('platform_editor_controls_patch_6');
+
 			return {
 				title: toolbarTitle,
 				getDomRef,
@@ -681,9 +685,9 @@ export const getToolbarConfig =
 				zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
 				items: [
 					menu,
-					separator(menu.hidden),
+					...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []),
 					...alignmentMenu,
-					separator(alignmentMenu.length === 0),
+					...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []),
 					...cellItems,
 					...columnSettingsItems,
 					...colorPicker,
@@ -698,6 +702,7 @@ export const getToolbarConfig =
 								deleteButton,
 							] as Array<FloatingToolbarItem<Command>>)
 						: [
+								shouldGroupWithoutSeparators && { type: 'separator', fullHeight: true },
 								{
 									type: 'overflow-dropdown',
 									dropdownWidth: 220,
@@ -900,7 +905,11 @@ const getColumnSettingItems = (
 		});
 	}
 
-	if (items.length !== 0) {
+	if (
+		items.length !== 0 &&
+		(!editorExperiment('platform_editor_controls', 'variant1') ||
+			!fg('platform_editor_controls_patch_6'))
+	) {
 		items.push({
 			type: 'separator',
 		});