@atlaskit/editor-plugin-table 7.30.2 → 7.31.1

package/dist/types-ts4.5/event-handlers.d.ts

@@ -1,4 +1,5 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from './types';
@@ -11,7 +12,7 @@ export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;
-export declare const handleMouseMove: (view: EditorView, event: Event) => boolean;
+export declare const handleMouseMove: (nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => boolean;
 export declare function handleTripleClick(view: EditorView, pos: number): boolean;
 export declare const handleCut: (oldTr: Transaction, oldState: EditorState, newState: EditorState, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, editorView?: EditorView, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => Transaction;
 export declare const isTableInFocus: (view: EditorView) => boolean;

package/dist/types-ts4.5/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape) => DecorationTransformer;
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number, includeTooltip: boolean, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => DecorationTransformer;
 export declare const clearColumnResizingDecorations: () => DecorationTransformer;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -1,7 +1,8 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, nodeViewPortalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts

@@ -1,5 +1,6 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { PluginInjectionAPI } from '../../types';
-export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;
+export declare const handleMouseDown: (view: EditorView, event: MouseEvent, localResizeHandlePos: number, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, isTableScalingEnabled: boolean, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => boolean;

package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts

@@ -1,6 +1,7 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { ColumnResizingPluginState, PluginInjectionAPI } from '../../types';
-export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;
+export declare function createPlugin(dispatch: Dispatch<ColumnResizingPluginState>, { lastColumnResizable }: ColumnResizingPluginState, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, api: PluginInjectionAPI | undefined | null, nodeViewPortalProviderAPI: PortalProviderAPI, editorAnalyticsAPI?: EditorAnalyticsAPI, isTableScalingEnabled?: boolean, isNewColumnResizingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean): SafePlugin<ColumnResizingPluginState>;

package/dist/types-ts4.5/pm-plugins/view-mode-sort/index.d.ts

@@ -3,8 +3,9 @@
  * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
  * visible to the user without affecting the document's content.
  */
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type tablePlugin from '../../plugin';
 import type { ViewModeSortPluginState } from './types';
-export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>) => SafePlugin<ViewModeSortPluginState>;
+export declare const createPlugin: (api: ExtractInjectionAPI<typeof tablePlugin>, nodeViewPortalProviderAPI: PortalProviderAPI) => SafePlugin<ViewModeSortPluginState>;

package/dist/types-ts4.5/toDOM.d.ts

@@ -1,4 +1,4 @@
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
+import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { NodeSpec } from '@atlaskit/editor-prosemirror/model';
 type Config = {
     allowColumnResizing: boolean;

package/dist/types-ts4.5/utils/decoration.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReadonlyTransaction, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
@@ -12,7 +13,7 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape) => [
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>, includeTooltip: boolean | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI) => [
     Decoration[],
     Decoration[]
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.30.2",
+	"version": "7.31.1",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,12 +30,12 @@
 		"@atlaskit/adf-schema": "^44.2.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.8.0",
-		"@atlaskit/editor-common": "^94.13.0",
+		"@atlaskit/editor-common": "^94.22.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "1.1.4",
-		"@atlaskit/editor-plugin-content-insertion": "^1.9.0",
+		"@atlaskit/editor-plugin-content-insertion": "^1.10.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
 		"@atlaskit/editor-plugin-selection": "^1.5.0",
@@ -49,18 +49,19 @@
 		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-		"@atlaskit/primitives": "^13.0.0",
+		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.12.0",
+		"@atlaskit/tmp-editor-statsig": "^2.17.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tokens": "^2.2.0",
-		"@atlaskit/tooltip": "^18.8.0",
+		"@atlaskit/tooltip": "^18.9.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.21",
 		"memoize-one": "^6.0.0",
-		"raf-schd": "^4.0.3"
+		"raf-schd": "^4.0.3",
+		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0 || ^17.0.0 || ~18.2.0",
@@ -118,6 +119,9 @@
 		"platform-visual-refresh-icons": {
 			"type": "boolean"
 		},
+		"platform_editor_react18_plugin_portalprovider": {
+			"type": "boolean"
+		},
 		"platform_editor_use_nested_table_pm_nodes": {
 			"type": "boolean"
 		}

package/src/commands/column-resize.ts

@@ -1,6 +1,7 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
@@ -54,7 +55,12 @@ const getTablePluginCommand = (
 };
 
 const updateResizeHandleAndStatePosition =
-	(rowIndex: number, columnIndex: number, nextResizeHandlePos: number): Command =>
+	(
+		rowIndex: number,
+		columnIndex: number,
+		nextResizeHandlePos: number,
+		nodeViewPortalProviderAPI: PortalProviderAPI,
+	): Command =>
 	(state, dispatch) => {
 		let customTr = state.tr;
 		const {
@@ -75,6 +81,7 @@ const updateResizeHandleAndStatePosition =
 			columnIndex,
 			true,
 			getIntl,
+			nodeViewPortalProviderAPI,
 		)({
 			tr: customTr,
 			decorationSet: getDecorations(state),
@@ -121,9 +128,11 @@ export const initiateKeyboardColumnResizing =
 	({
 		ariaNotify,
 		getIntl,
+		nodeViewPortalProviderAPI,
 	}: {
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
+		nodeViewPortalProviderAPI: PortalProviderAPI;
 	}): Command =>
 	(state, dispatch, view) => {
 		const { selection } = state;
@@ -143,6 +152,7 @@ export const initiateKeyboardColumnResizing =
 				selectionRect.top,
 				selectionRect.right,
 				cell.pos,
+				nodeViewPortalProviderAPI,
 			)(state, dispatch);
 		}
 		return false;
@@ -153,10 +163,12 @@ export const activateNextResizeArea =
 		direction,
 		ariaNotify,
 		getIntl,
+		nodeViewPortalProviderAPI,
 	}: {
 		direction: Direction;
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
+		nodeViewPortalProviderAPI: PortalProviderAPI;
 	}): Command =>
 	(state, dispatch, view) => {
 		const { resizeHandlePos } = getTableResizingPluginState(state) || {};
@@ -217,6 +229,8 @@ export const activateNextResizeArea =
 				rectForNextCell.top,
 				rectForNextCell.right,
 				$nextCell.pos,
+
+				nodeViewPortalProviderAPI,
 			)(state, dispatch, view);
 		} else {
 			// current position is in the one of the side columns of the table(left or right)
@@ -230,6 +244,7 @@ export const activateNextResizeArea =
 					currentCellRect.top,
 					tableMap.width,
 					$lastCell.pos,
+					nodeViewPortalProviderAPI,
 				)(state, dispatch, view);
 			} else if (tableMap.width === currentCellRect.right) {
 				const firsCellInCurrentRow =
@@ -240,6 +255,8 @@ export const activateNextResizeArea =
 					currentCellRect.top,
 					1,
 					$nextCell.pos,
+
+					nodeViewPortalProviderAPI,
 				)(state, dispatch);
 			}
 		}

package/src/commands/misc.ts

@@ -2,6 +2,7 @@ import isEqual from 'lodash/isEqual';
 
 import type { CellAttributes, TableAttributes, TableLayout } from '@atlaskit/adf-schema';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import {
 	closestElement,
@@ -560,6 +561,7 @@ export const addResizeHandleDecorations = (
 	rowIndex: number,
 	columnIndex: number,
 	includeTooltip: boolean,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	isKeyboardResize?: boolean,
 ) =>
 	createCommand(
@@ -582,6 +584,7 @@ export const addResizeHandleDecorations = (
 						columnIndex,
 						includeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					)({
 						tr: state.tr,
 						decorationSet: getDecorations(state),
@@ -597,6 +600,7 @@ export const addResizeHandleDecorations = (
 	);
 
 export const updateResizeHandleDecorations = (
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	rowIndex?: number,
 	columnIndex?: number,
 	includeTooltip?: boolean,
@@ -636,6 +640,7 @@ export const updateResizeHandleDecorations = (
 						resolvedColumnIndex,
 						resolvedIncludeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					)({
 						tr: state.tr,
 						decorationSet: getDecorations(state),

package/src/commands-with-analytics.ts

@@ -3,6 +3,7 @@ import type { IntlShape } from 'react-intl-next/src/types';
 import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
 	ACTION_SUBJECT,
 	EVENT_TYPE,
@@ -10,9 +11,8 @@ import {
 	TABLE_ACTION,
 	TABLE_DISPLAY_MODE,
 } from '@atlaskit/editor-common/analytics';
-import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type CHANGE_ALIGNMENT_REASON } from '@atlaskit/editor-common/analytics';
 import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
-import { type CHANGE_ALIGNMENT_REASON } from '@atlaskit/editor-common/src/analytics/types/table-events';
 import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { NodeWithPos } from '@atlaskit/editor-prosemirror/utils';

package/src/event-handlers.ts

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import {
 	browser,
 	closestElement,
@@ -347,8 +348,8 @@ export const handleMouseLeave = (view: EditorView, event: Event): boolean => {
 
 // IMPORTANT: The mouse move handler has been setup with RAF schedule to avoid Reflows which will occur as some methods
 // need to access the mouse event offset position and also the target clientWidth vallue.
-const handleMouseMoveDebounce = rafSchedule(
-	(view: EditorView, event: MouseEvent, offsetX: number) => {
+const handleMouseMoveDebounce = (nodeViewPortalProviderAPI: PortalProviderAPI) =>
+	rafSchedule((view: EditorView, event: MouseEvent, offsetX: number) => {
 		if (!(event.target instanceof HTMLElement)) {
 			return false;
 		}
@@ -413,6 +414,7 @@ const handleMouseMoveDebounce = rafSchedule(
 							rowIndexTarget,
 							columnEndIndexTarget,
 							true,
+							nodeViewPortalProviderAPI,
 						)(state, dispatch);
 					}
 				}
@@ -420,26 +422,26 @@ const handleMouseMoveDebounce = rafSchedule(
 		}
 
 		return false;
-	},
-);
+	});
 
-export const handleMouseMove = (view: EditorView, event: Event) => {
-	if (!(event.target instanceof HTMLElement)) {
-		return false;
-	}
+export const handleMouseMove =
+	(nodeViewPortalProviderAPI: PortalProviderAPI) => (view: EditorView, event: Event) => {
+		if (!(event.target instanceof HTMLElement)) {
+			return false;
+		}
 
-	// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
-	// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
-	// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
-	// in the deferred callback handler.
-	// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
-	handleMouseMoveDebounce(
-		view,
-		event as MouseEvent,
-		browser.gecko ? (event as MouseEvent).offsetX : NaN,
-	);
-	return false;
-};
+		// NOTE: When accessing offsetX in gecko from a deferred callback, it will return 0. However it will be non-zero if accessed
+		// within the scope of it's initial mouse move handler. Also Chrome does return the correct value, however it could trigger
+		// a reflow. So for now this will just grab the offsetX value immediately for gecko and chrome will calculate later
+		// in the deferred callback handler.
+		// Bug Tracking: https://bugzilla.mozilla.org/show_bug.cgi?id=1882903
+		handleMouseMoveDebounce(nodeViewPortalProviderAPI)(
+			view,
+			event as MouseEvent,
+			browser.gecko ? (event as MouseEvent).offsetX : NaN,
+		);
+		return false;
+	};
 
 export function handleTripleClick(view: EditorView, pos: number) {
 	const { state, dispatch } = view;

package/src/plugin.tsx

@@ -22,6 +22,10 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import {
+	getParentOfTypeCount,
+	getPositionAfterTopParentNodeOfType,
+} from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type {
 	Command,
@@ -42,11 +46,14 @@ 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';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 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 { pluginConfig } from './create-plugin-config';
@@ -233,12 +240,32 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						isTableResizingEnabled: options?.tableResizingEnabled,
 					})(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);
+						}
+					}
+
 					return (
 						api?.contentInsertion?.actions?.insert({
 							state,
 							dispatch,
 							node,
-
 							options: {
 								selectNodeInserted: false,
 								analyticsPayload: {
@@ -248,6 +275,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 										localId: node.attrs.localId,
 									},
 								},
+								insertAt,
 							},
 						}) ?? false
 					);
@@ -307,6 +335,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						dispatchAnalyticsEvent,
 						dispatch,
 						portalProviderAPI,
+						nodeViewPortalProviderAPI,
 						eventDispatcher,
 						getIntl,
 					}) => {
@@ -328,6 +357,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							dispatchAnalyticsEvent,
 							dispatch,
 							portalProviderAPI,
+							nodeViewPortalProviderAPI,
 							eventDispatcher,
 							pluginConfig(tableOptions),
 							defaultGetEditorContainerWidth,
@@ -349,7 +379,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tablePMColResizing',
-					plugin: ({ dispatch }) => {
+					plugin: ({ dispatch, nodeViewPortalProviderAPI }) => {
 						const {
 							fullWidthEnabled,
 							tableOptions,
@@ -368,6 +398,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									defaultGetEditorContainerWidth,
 									getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 									api,
+									nodeViewPortalProviderAPI,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
@@ -382,7 +413,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				// plugin as it is currently swallowing backspace events inside tables
 				{
 					name: 'tableKeymap',
-					plugin: ({ getIntl }) => {
+					plugin: ({ getIntl, nodeViewPortalProviderAPI }) => {
 						const {
 							dragAndDropEnabled,
 							isTableScalingEnabled = false,
@@ -396,6 +427,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						return keymapPlugin(
 							defaultGetEditorContainerWidth,
 							api,
+							nodeViewPortalProviderAPI,
 							editorAnalyticsAPI,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
@@ -460,8 +492,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				},
 				{
 					name: 'tableViewModeSort',
-					plugin: () => {
-						return api?.editorViewMode ? createViewModeSortPlugin(api) : undefined;
+					plugin: ({ nodeViewPortalProviderAPI }) => {
+						return api?.editorViewMode
+							? createViewModeSortPlugin(api, nodeViewPortalProviderAPI)
+							: undefined;
 					},
 				},
 				{
@@ -749,7 +783,30 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableResizingEnabled: options?.tableResizingEnabled,
 						})(state.schema);
 
-						const tr = insert(tableNode);
+						let { tr } = state;
+						// If the cursor is inside a table
+						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
+							) {
+								// Nesting is too deep insert table after the top parent table
+								const positionAfterTopTable = getPositionAfterTopParentNodeOfType(
+									state.schema.nodes.table,
+								)(state.selection);
+								tr = safeInsert(tableNode, positionAfterTopTable)(tr);
+								tr.scrollIntoView();
+							} else {
+								// Table can be nested in parent table
+								tr = insert(tableNode);
+							}
+						} else {
+							tr = insert(tableNode);
+						}
 
 						editorAnalyticsAPI?.attachAnalyticsEvent({
 							action: ACTION.INSERTED,

package/src/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 import { TableDecorations } from '../../../types';
@@ -36,6 +37,7 @@ export const buildColumnResizingDecorations =
 		columnEndIndex: number,
 		includeTooltip: boolean,
 		getIntl: () => IntlShape,
+		nodeViewPortalProviderAPI: PortalProviderAPI,
 	): DecorationTransformer =>
 	({ tr, decorationSet }): DecorationSet => {
 		const [columnResizesDecorations, lastCellElementsDecorations] =
@@ -49,6 +51,7 @@ export const buildColumnResizingDecorations =
 						},
 						includeTooltip,
 						getIntl,
+						nodeViewPortalProviderAPI,
 					);
 
 		return composeDecorations([

package/src/pm-plugins/keymap.ts

@@ -30,6 +30,7 @@ import {
 	startColumnResizing,
 	toggleTable,
 } from '@atlaskit/editor-common/keymaps';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
@@ -59,6 +60,7 @@ import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
 export function keymapPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	dragAndDropEnabled?: boolean,
 	isTableScalingEnabled = false,
@@ -263,6 +265,7 @@ export function keymapPlugin(
 		initiateKeyboardColumnResizing({
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -273,6 +276,7 @@ export function keymapPlugin(
 			direction: 1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);
@@ -283,6 +287,7 @@ export function keymapPlugin(
 			direction: -1,
 			ariaNotify: ariaNotifyPlugin,
 			getIntl: getIntl,
+			nodeViewPortalProviderAPI,
 		}),
 		list,
 	);

package/src/pm-plugins/main.ts

@@ -79,6 +79,7 @@ export const createPlugin = (
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	dispatch: Dispatch,
 	portalProviderAPI: PortalProviderAPI,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	eventDispatcher: EventDispatcher,
 	pluginConfig: PluginConfig,
 	getEditorContainerWidth: GetEditorContainerWidth,
@@ -381,7 +382,7 @@ export const createPlugin = (
 				blur: handleBlur,
 				mousedown: withCellTracking(handleMouseDown),
 				mouseleave: handleMouseLeave,
-				mousemove: whenTableInFocus(handleMouseMove),
+				mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),
 				click: withCellTracking(whenTableInFocus(handleClick)),

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -8,6 +8,7 @@ import {
 	TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -50,6 +51,7 @@ export const handleMouseDown = (
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	isTableScalingEnabled: boolean,
 	api: PluginInjectionAPI | undefined | null,
+	nodeViewPortalProviderAPI: PortalProviderAPI,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
@@ -150,7 +152,12 @@ export const handleMouseDown = (
 
 	// When we start resizing a column we need to ensure the underlying tooltip is removed from the decoration to avoid
 	// unnecessary tooltips being displayed during drag.
-	updateResizeHandleDecorations(undefined, undefined, false)(state, dispatch);
+	updateResizeHandleDecorations(
+		nodeViewPortalProviderAPI,
+		undefined,
+		undefined,
+		false,
+	)(state, dispatch);
 
 	// for new column resizing, take the current scaled version of table widths and use those as the basis for resizing
 	// implication: the scaled version of the table becomes the source of truth