@atlaskit/editor-plugin-table 8.2.2 → 8.3.0

package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts

@@ -28,7 +28,6 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                 actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
             }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
             import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
-                actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
                 dependencies: [
                     import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                         pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -46,7 +45,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                         actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
                     }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
                 ];
-            }, undefined>,
+            } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
             import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
                 sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
             }, undefined>,
@@ -136,7 +135,6 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                     actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
                 }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
                 import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
-                    actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
                     dependencies: [
                         import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                             pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -154,7 +152,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                             actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
                         }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
                     ];
-                }, undefined>,
+                } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
                 import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
                     sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
                 }, undefined>,

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

@@ -57,7 +57,6 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                 actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
             }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
             import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
-                actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
                 dependencies: [
                     import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
                         pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -75,7 +74,7 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                         actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
                     }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
                 ];
-            }, undefined>,
+            } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
             import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
                 sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
             }, undefined>,

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -5,15 +5,15 @@ import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessib
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
-import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
+import type { NewIconProps } from '@atlaskit/icon/types';
 import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
 export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
-    iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+    icon?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
+    iconFallback?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "8.2.2",
+	"version": "8.3.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "1.1.6",
-		"@atlaskit/editor-plugin-content-insertion": "^1.10.0",
+		"@atlaskit/editor-plugin-content-insertion": "^1.11.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
 		"@atlaskit/editor-plugin-selection": "^1.5.0",
@@ -43,15 +43,15 @@
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/editor-shared-styles": "^3.2.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/icon": "^23.0.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
+		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.21.0",
+		"@atlaskit/tmp-editor-statsig": "^2.22.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",

package/src/commands/insert.ts

@@ -1,6 +1,6 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
 	ACTION,
 	ACTION_SUBJECT,
@@ -9,10 +9,14 @@ import {
 	INPUT_METHOD,
 	TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
+import {
+	getParentOfTypeCount,
+	getPositionAfterTopParentNodeOfType,
+} from '@atlaskit/editor-common/nesting';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import {
@@ -21,6 +25,8 @@ import {
 	findTable,
 	selectedRect,
 } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -29,6 +35,23 @@ import type { PluginInjectionAPI } from '../types';
 import { checkIfHeaderRowEnabled, copyPreviousRow, createTableWithWidth } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
+type InsertTableWithNestingSupportCommand = (
+	options: {
+		isTableScalingEnabled?: boolean;
+		isTableAlignmentEnabled?: boolean;
+		isFullWidthModeEnabled?: boolean;
+		isCommentEditor?: boolean;
+		isChromelessEditor?: boolean;
+		isTableResizingEnabled?: boolean;
+		createTableProps?: {
+			rowsCount?: number;
+			colsCount?: number;
+		};
+	},
+	api: PluginInjectionAPI | undefined | null,
+	analyticsPayload?: AnalyticsEventPayload,
+) => EditorCommand;
+
 function addColumnAtCustomStep(column: number) {
 	return (tr: Transaction) => {
 		const table = findTable(tr.selection);
@@ -235,6 +258,11 @@ export const insertRow =
 		return true;
 	};
 
+/**
+ * @private
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
+ */
 export const createTable =
 	(
 		isTableScalingEnabled?: boolean,
@@ -272,6 +300,11 @@ export const createTable =
 		return true;
 	};
 
+/**
+ * @private
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
+ */
 export const insertTableWithSize =
 	(
 		isFullWidthModeEnabled?: boolean,
@@ -312,3 +345,86 @@ export const insertTableWithSize =
 			return newTr;
 		};
 	};
+
+/**
+ * Unified command to insert a new table into the editor.
+ *
+ * @param {Object} options - Configuration options for table insertion.
+ * @param {boolean} [options.isTableScalingEnabled=false] - Flag to enable table scaling.
+ * @param {boolean} [options.isTableAlignmentEnabled=false] - Flag to enable table alignment.
+ * @param {boolean} [options.isFullWidthModeEnabled=false] - Flag to enable full-width mode for the table.
+ * @param {boolean} [options.isCommentEditor=false] - Flag to indicate if the editor is in comment mode.
+ * @param {boolean} [options.isChromelessEditor=false] - Flag to indicate if the editor is chromeless.
+ * @param {boolean} [options.isTableResizingEnabled=false] - Flag to enable table resizing.
+ * @param {Object} [options.createTableProps={}] - Additional properties for table creation, including table size.
+ * @param {Object} api - PluginInjectinoApi object for content insertion commands.
+ * @param {Object} analyticsPayload - Payload for analytics tracking.
+ *
+ * @returns {Function} A function that takes a transaction and inserts a table.
+ */
+export const insertTableWithNestingSupport: InsertTableWithNestingSupportCommand =
+	(
+		{
+			isTableScalingEnabled = false,
+			isTableAlignmentEnabled = false,
+			isFullWidthModeEnabled = false,
+			isCommentEditor = false,
+			isChromelessEditor = false,
+			isTableResizingEnabled = false,
+			createTableProps = {},
+		},
+		api,
+		analyticsPayload,
+	) =>
+	({ tr }) => {
+		const { schema } = tr.doc.type;
+		const node = createTableWithWidth({
+			isTableScalingEnabled,
+			isTableAlignmentEnabled,
+			isFullWidthModeEnabled,
+			isCommentEditor,
+			isChromelessEditor,
+			isTableResizingEnabled,
+			createTableProps,
+		})(schema);
+
+		// If the cursor is inside a table
+		let insertAt: Selection | undefined;
+		if (
+			hasParentNodeOfType(schema.nodes.table)(tr.selection) &&
+			fg('platform_editor_use_nested_table_pm_nodes')
+		) {
+			// If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
+			if (
+				editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
+				getParentOfTypeCount(schema.nodes.table)(tr.selection) > 1
+			) {
+				const positionAfterTopTable = getPositionAfterTopParentNodeOfType(schema.nodes.table)(
+					tr.selection,
+				);
+				if (!positionAfterTopTable) {
+					return tr;
+				}
+				insertAt = TextSelection.create(tr.doc, positionAfterTopTable);
+			}
+		}
+
+		api?.contentInsertion?.commands?.insert({
+			node,
+			options: {
+				selectNodeInserted: false,
+				analyticsPayload: analyticsPayload
+					? {
+							...analyticsPayload,
+							attributes: {
+								...analyticsPayload.attributes,
+								localId: node.attrs.localId,
+							},
+						}
+					: undefined,
+				insertAt,
+			},
+		})({ tr });
+
+		return tr;
+	};

package/src/plugin.tsx

@@ -26,6 +26,7 @@ import {
 	getParentOfTypeCount,
 	getPositionAfterTopParentNodeOfType,
 } from '@atlaskit/editor-common/nesting';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type {
 	Command,
@@ -46,7 +47,6 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
 import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
-import { type Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -55,7 +55,7 @@ import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
-import { insertTableWithSize } from './commands/insert';
+import { insertTableWithNestingSupport, insertTableWithSize } from './commands/insert';
 import { pluginConfig } from './create-plugin-config';
 import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
 import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
@@ -228,69 +228,93 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 			insertTable:
 				(analyticsPayload): Command =>
 				(state, dispatch) => {
-					const node = createTableWithWidth({
-						isTableScalingEnabled: options?.isTableScalingEnabled,
-						isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
-						isFullWidthModeEnabled: options?.fullWidthEnabled,
-						isCommentEditor: options?.isCommentEditor,
-						isChromelessEditor: options?.isChromelessEditor,
-						isTableResizingEnabled: options?.tableOptions.allowTableResizing,
-					})(state.schema);
-
-					// If the cursor is inside a table
-					let insertAt: Selection | undefined;
-					if (
-						hasParentNodeOfType(state.schema.nodes.table)(state.selection) &&
-						fg('platform_editor_use_nested_table_pm_nodes')
-					) {
-						// If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
-						if (
-							editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
-							getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1
-						) {
-							const positionAfterTopTable = getPositionAfterTopParentNodeOfType(
-								state.schema.nodes.table,
-							)(state.selection);
-							if (!positionAfterTopTable) {
-								return false;
-							}
-							insertAt = TextSelection.create(state.doc, positionAfterTopTable);
-						}
-					}
+					if (fg('platform_editor_use_nested_table_pm_nodes')) {
+						return editorCommandToPMCommand(
+							insertTableWithNestingSupport(
+								{
+									isTableScalingEnabled: options?.isTableScalingEnabled,
+									isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
+									isFullWidthModeEnabled: options?.fullWidthEnabled,
+									isCommentEditor: options?.isCommentEditor,
+									isChromelessEditor: options?.isChromelessEditor,
+									isTableResizingEnabled: options?.tableOptions.allowTableResizing,
+								},
+								api,
+								analyticsPayload,
+							),
+						)(state, dispatch);
+					} else {
+						const node = createTableWithWidth({
+							isTableScalingEnabled: options?.isTableScalingEnabled,
+							isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
+							isFullWidthModeEnabled: options?.fullWidthEnabled,
+							isCommentEditor: options?.isCommentEditor,
+							isChromelessEditor: options?.isChromelessEditor,
+							isTableResizingEnabled: options?.tableOptions.allowTableResizing,
+						})(state.schema);
 
-					return (
-						api?.contentInsertion?.actions?.insert({
-							state,
-							dispatch,
-							node,
-							options: {
-								selectNodeInserted: false,
-								analyticsPayload: {
-									...analyticsPayload,
-									attributes: {
-										...analyticsPayload.attributes,
-										localId: node.attrs.localId,
+						return (
+							api?.contentInsertion?.actions?.insert({
+								state,
+								dispatch,
+								node,
+								options: {
+									selectNodeInserted: false,
+									analyticsPayload: {
+										...analyticsPayload,
+										attributes: {
+											...analyticsPayload.attributes,
+											localId: node.attrs.localId,
+										},
 									},
 								},
-								insertAt,
-							},
-						}) ?? false
-					);
+							}) ?? false
+						);
+					}
 				},
 		},
 
 		commands: {
-			insertTableWithSize: insertTableWithSize(
-				options?.fullWidthEnabled,
-				options?.isTableScalingEnabled,
-				options?.tableOptions.allowTableAlignment,
-				api?.analytics?.actions,
-				options?.isCommentEditor,
-			),
+			insertTableWithSize: fg('platform_editor_use_nested_table_pm_nodes')
+				? (rowsCount, colsCount, inputMethod) =>
+						insertTableWithNestingSupport(
+							{
+								isTableScalingEnabled: options?.isTableScalingEnabled,
+								isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
+								isFullWidthModeEnabled: options?.fullWidthEnabled,
+								isCommentEditor: options?.isCommentEditor,
+								isChromelessEditor: options?.isChromelessEditor,
+								isTableResizingEnabled: options?.tableOptions.allowTableResizing,
+								createTableProps: {
+									rowsCount,
+									colsCount,
+								},
+							},
+							api,
+							{
+								action: ACTION.INSERTED,
+								actionSubject: ACTION_SUBJECT.DOCUMENT,
+								actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+								attributes: {
+									inputMethod: inputMethod ?? INPUT_METHOD.PICKER,
+									totalRowCount: rowsCount,
+									totalColumnCount: colsCount,
+								},
+								eventType: EVENT_TYPE.TRACK,
+							},
+						)
+				: insertTableWithSize(
+						options?.fullWidthEnabled,
+						options?.isTableScalingEnabled,
+						options?.tableOptions.allowTableAlignment,
+						api?.analytics?.actions,
+						options?.isCommentEditor,
+					),
 		},
 
 		nodes() {
 			const { allowColumnResizing } = pluginConfig(options?.tableOptions);
+			// TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
 			const isNestingSupported = fg('platform_editor_use_nested_table_pm_nodes');
 
 			return isNestingSupported

package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts

@@ -28,17 +28,17 @@ export const autoScrollerFactory = ({ tableWrapper, getNode }: AutoScrollerFacto
 				return localId === node?.attrs.localId && type === 'table-column';
 			},
 			getOverflow: () => ({
-				fromTopEdge: {
+				forTopEdge: {
 					top: dropTargetExtendedWidth,
 					right: dropTargetExtendedWidth,
 					left: dropTargetExtendedWidth,
 				},
-				fromRightEdge: {
+				forRightEdge: {
 					right: dropTargetExtendedWidth,
 					top: dropTargetExtendedWidth,
 					bottom: dropTargetExtendedWidth,
 				},
-				fromLeftEdge: {
+				forLeftEdge: {
 					top: dropTargetExtendedWidth,
 					left: dropTargetExtendedWidth,
 					bottom: dropTargetExtendedWidth,

package/src/pm-plugins/keymap.ts

@@ -1,7 +1,13 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import {
+	ACTION,
+	ACTION_SUBJECT,
+	ACTION_SUBJECT_ID,
+	EVENT_TYPE,
+	INPUT_METHOD,
+} from '@atlaskit/editor-common/analytics';
 import {
 	addColumnAfter,
 	addColumnAfterVO,
@@ -31,10 +37,12 @@ import {
 	toggleTable,
 } from '@atlaskit/editor-common/keymaps';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
 import {
@@ -53,6 +61,7 @@ import {
 	addColumnAfter as addColumnAfterCommand,
 	addColumnBefore as addColumnBeforeCommand,
 	createTable,
+	insertTableWithNestingSupport,
 } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
@@ -90,15 +99,36 @@ export function keymapPlugin(
 	);
 	bindKeymapWithCommand(
 		toggleTable.common!,
-		createTable(
-			isTableScalingEnabled,
-			isTableAlignmentEnabled,
-			!!isFullWidthEnabled,
-			editorAnalyticsAPI,
-			isCommentEditor,
-			isChromelessEditor,
-			isTableResizingEnabled,
-		),
+		fg('platform_editor_use_nested_table_pm_nodes')
+			? editorCommandToPMCommand(
+					insertTableWithNestingSupport(
+						{
+							isTableScalingEnabled,
+							isTableAlignmentEnabled,
+							isFullWidthModeEnabled: !!isFullWidthEnabled,
+							isCommentEditor: isCommentEditor,
+							isChromelessEditor: isChromelessEditor,
+							isTableResizingEnabled,
+						},
+						api,
+						{
+							action: ACTION.INSERTED,
+							actionSubject: ACTION_SUBJECT.DOCUMENT,
+							actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+							attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
+							eventType: EVENT_TYPE.TRACK,
+						},
+					),
+				)
+			: createTable(
+					isTableScalingEnabled,
+					isTableAlignmentEnabled,
+					!!isFullWidthEnabled,
+					editorAnalyticsAPI,
+					isCommentEditor,
+					isChromelessEditor,
+					isTableResizingEnabled,
+				),
 		list,
 	);
 	bindKeymapWithCommand(

package/src/utils/drag-menu.ts

@@ -48,7 +48,7 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
-import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
+import type { NewIconProps } from '@atlaskit/icon/types';
 
 import {
 	deleteColumnsWithAnalytics,
@@ -142,8 +142,8 @@ export type DragMenuOptionIdType =
 
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
 	id: DragMenuOptionIdType;
-	icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
-	iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+	icon?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
+	iconFallback?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
 	keymap?: string;
 }