@atlaskit/editor-plugin-table 7.25.6 → 7.25.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.6",
+	"version": "7.25.8",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,17 +29,17 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/button": "^20.0.0",
+		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^87.11.0",
+		"@atlaskit/editor-common": "^87.13.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.7.0",
-		"@atlaskit/editor-plugin-content-insertion": "^1.7.0",
+		"@atlaskit/editor-plugin-content-insertion": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
-		"@atlaskit/editor-plugin-selection": "^1.3.0",
-		"@atlaskit/editor-plugin-width": "^1.2.0",
+		"@atlaskit/editor-plugin-selection": "^1.4.0",
+		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^12.0.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/toggle": "^13.3.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",

package/src/commands/column-resize.ts

@@ -37,7 +37,7 @@ import {
 } from '../pm-plugins/table-resizing/utils';
 import { updateColumnWidths } from '../transforms';
 import { TableDecorations } from '../types';
-import type { TablePluginAction } from '../types';
+import type { PluginInjectionAPI, TablePluginAction } from '../types';
 import { createColumnLineResize, getSelectedColumnIndexes, updateDecorations } from '../utils';
 
 const getTablePluginCommand = (
@@ -252,6 +252,7 @@ export const changeColumnWidthByStep =
 		isTableFixedColumnWidthsOptionEnabled,
 		isCommentEditor,
 		ariaNotify,
+		api,
 		getIntl,
 	}: {
 		stepSize: number;
@@ -259,6 +260,7 @@ export const changeColumnWidthByStep =
 		isTableScalingEnabled: boolean;
 		isTableFixedColumnWidthsOptionEnabled: boolean;
 		isCommentEditor: boolean;
+		api: PluginInjectionAPI | undefined | null;
 		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void;
 		getIntl?: () => IntlShape;
 		originalTr?: Transaction;
@@ -356,7 +358,7 @@ export const changeColumnWidthByStep =
 			shouldUseIncreasedScalingPercent,
 		);
 
-		customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition)(customTr);
+		customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition, api)(customTr);
 
 		if (dispatch) {
 			dispatch(customTr);

package/src/commands/delete.ts

@@ -2,11 +2,13 @@ import type { Command } from '@atlaskit/editor-common/types';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 
 import { deleteColumns } from '../transforms/delete-columns';
+import type { PluginInjectionAPI } from '../types';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
 export const deleteColumnsCommand =
 	(
 		rect: Rect,
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
@@ -15,6 +17,7 @@ export const deleteColumnsCommand =
 		const tr = deleteColumns(
 			rect,
 			getAllowAddColumnCustomStep(state),
+			api,
 			view,
 			isTableScalingEnabled,
 			isTableFixedColumnWidthsOptionEnabled,

package/src/commands/insert.ts

@@ -25,6 +25,7 @@ import {
 import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
+import type { PluginInjectionAPI } from '../types';
 import { checkIfHeaderRowEnabled, copyPreviousRow, createTableWithWidth } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 
@@ -39,6 +40,7 @@ function addColumnAtCustomStep(column: number) {
 }
 
 export function addColumnAt(
+	api: PluginInjectionAPI | undefined | null,
 	isTableScalingEnabled = false,
 	isCellBackgroundDuplicated?: boolean,
 	isTableFixedColumnWidthsOptionEnabled?: boolean,
@@ -63,6 +65,7 @@ export function addColumnAt(
 					isTableScalingEnabled,
 					isTableFixedColumnWidthsOptionEnabled,
 					shouldUseIncreasedScalingPercent,
+					api,
 				)(
 					table,
 					view,
@@ -89,6 +92,7 @@ export function addColumnAt(
 // Command to add a column before the column with the selection.
 export const addColumnBefore =
 	(
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isCellBackgroundDuplicated = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
@@ -103,6 +107,7 @@ export const addColumnBefore =
 			let rect = selectedRect(state);
 			dispatch(
 				addColumnAt(
+					api,
 					isTableScalingEnabled,
 					isCellBackgroundDuplicated,
 					isTableFixedColumnWidthsOptionEnabled,
@@ -121,6 +126,7 @@ export const addColumnBefore =
 // Command to add a column after the column with the selection.
 export const addColumnAfter =
 	(
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled?: boolean,
 		isCellBackgroundDuplicated?: boolean,
 		isTableFixedColumnWidthsOptionEnabled?: boolean,
@@ -136,6 +142,7 @@ export const addColumnAfter =
 			let rect = selectedRect(state);
 			dispatch(
 				addColumnAt(
+					api,
 					isTableScalingEnabled,
 					isCellBackgroundDuplicated,
 					isTableFixedColumnWidthsOptionEnabled,
@@ -152,6 +159,7 @@ export const addColumnAfter =
 
 export const insertColumn =
 	(
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isCellBackgroundDuplicated?: boolean,
 		isTableFixedColumnWidthsOptionEnabled?: boolean,
@@ -160,6 +168,7 @@ export const insertColumn =
 	(column: number): Command =>
 	(state, dispatch, view) => {
 		let tr = addColumnAt(
+			api,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,

package/src/commands-with-analytics.ts

@@ -57,6 +57,7 @@ import type {
 	AlignmentOptions,
 	InsertRowMethods,
 	InsertRowOptions,
+	PluginInjectionAPI,
 	RowInsertPosition,
 } from './types';
 import { checkIfNumberColumnEnabled, getSelectedCellInfo, getSelectedTableInfo } from './utils';
@@ -232,7 +233,10 @@ export const insertRowWithAnalytics =
 		);
 
 export const changeColumnWidthByStepWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		api: PluginInjectionAPI | undefined | null,
+	) =>
 	(
 		stepSize: number,
 		getEditorContainerWidth: GetEditorContainerWidth,
@@ -272,11 +276,13 @@ export const changeColumnWidthByStepWithAnalytics =
 				isCommentEditor,
 				ariaNotify: ariaNotify,
 				getIntl: getIntl,
+				api,
 			}),
 		);
 
 export const insertColumnWithAnalytics =
 	(
+		api: PluginInjectionAPI | undefined | null,
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isCellbackgroundDuplicated = false,
@@ -308,6 +314,7 @@ export const insertColumnWithAnalytics =
 			};
 		})(editorAnalyticsAPI)(
 			insertColumn(
+				api,
 				isTableScalingEnabled,
 				isCellbackgroundDuplicated,
 				isTableFixedColumnWidthsOptionEnabled,
@@ -353,6 +360,7 @@ export const deleteRowsWithAnalytics =
 export const deleteColumnsWithAnalytics =
 	(
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
@@ -385,6 +393,7 @@ export const deleteColumnsWithAnalytics =
 		})(editorAnalyticsAPI)(
 			deleteColumnsCommand(
 				rect,
+				api,
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
@@ -394,6 +403,7 @@ export const deleteColumnsWithAnalytics =
 export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
 	(
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabled?: boolean,
 		isTableFixedColumnWidthsOptionEnabled?: boolean,
 		shouldUseIncreasedScalingPercent?: boolean,
@@ -423,6 +433,7 @@ export const deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut =
 		} else if (selectionType === 'column') {
 			return deleteColumnsWithAnalytics(
 				editorAnalyticsAPI,
+				api,
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
@@ -575,7 +586,10 @@ export const sortColumnWithAnalytics =
 		})(editorAnalyticsAPI)(sortByColumn(columnIndex, sortOrder));
 
 export const distributeColumnsWidthsWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(
+		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+		api: PluginInjectionAPI | undefined | null,
+	) =>
 	(
 		inputMethod:
 			| INPUT_METHOD.CONTEXT_MENU
@@ -596,7 +610,7 @@ export const distributeColumnsWidthsWithAnalytics =
 			};
 		})(editorAnalyticsAPI)((state, dispatch) => {
 			if (dispatch) {
-				distributeColumnsWidths(resizeState, table)(state, dispatch);
+				distributeColumnsWidths(resizeState, table, api)(state, dispatch);
 			}
 			return true;
 		});

package/src/event-handlers.ts

@@ -42,6 +42,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { TableCssClassName as ClassName, RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
+import type { PluginInjectionAPI } from './types';
 import {
 	convertHTMLCellIndexToColumnIndex,
 	getColumnIndexMappedToColumnIndexInFirstRow,
@@ -463,6 +464,7 @@ export const handleCut = (
 	oldTr: Transaction,
 	oldState: EditorState,
 	newState: EditorState,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	editorView?: EditorView,
 	isTableScalingEnabled = false,
@@ -513,6 +515,7 @@ export const handleCut = (
 						tr = deleteColumns(
 							rect,
 							getAllowAddColumnCustomStep(oldState),
+							api,
 							editorView,
 							isTableScalingEnabled,
 							isTableFixedColumnWidthsOptionEnabled,

package/src/nodeviews/TableComponent.tsx

@@ -1093,6 +1093,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				...options,
 			},
 			domAtPos,
+			this.props.pluginInjectionApi,
 			false, // isTableScalingEnabled doesn't change the behavior of nested tables
 			false, // shouldUseIncreasedScalingPercent set to false for nested tables
 		)(state.tr);

package/src/nodeviews/TableContainer.tsx

@@ -30,6 +30,7 @@ import type { PluginInjectionAPI, TableSharedState } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
 
+import { getAlignmentStyle } from './table-container-styles';
 import { TableResizer } from './TableResizer';
 
 type InnerContainerProps = {
@@ -60,10 +61,6 @@ export const InnerContainer = forwardRef<HTMLDivElement, PropsWithChildren<Inner
 	},
 );
 
-const centerAlignStyle = { display: 'flex', justifyContent: 'center' };
-
-const leftAlignStyle = { display: 'flex', justifyContent: 'flex-start' };
-
 type AlignmentTableContainerProps = {
 	node: PMNode;
 	pluginInjectionApi?: PluginInjectionAPI;
@@ -114,7 +111,7 @@ const AlignmentTableContainer = ({
 	}, [editorView, tableState, node]);
 
 	const style = useMemo(() => {
-		return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+		return getAlignmentStyle(alignment);
 	}, [alignment]);
 
 	return (

package/src/nodeviews/TableResizer.tsx

@@ -583,6 +583,7 @@ export const TableResizer = ({
 						parentWidth: newWidth,
 					},
 					editorView.domAtPos.bind(editorView),
+					pluginInjectionApi,
 					isTableScalingEnabled,
 					shouldUseIncreasedScalingPercent || false,
 				)(tr);

package/src/nodeviews/table-container-styles.ts

@@ -0,0 +1,9 @@
+import type { AlignmentOptions } from '../types';
+import { ALIGN_START } from '../utils/alignment';
+
+const centerAlignStyle = { display: 'flex', justifyContent: 'center' };
+
+const leftAlignStyle = { display: 'flex', justifyContent: 'flex-start' };
+
+export const getAlignmentStyle = (alignment: AlignmentOptions) =>
+	alignment === ALIGN_START ? leftAlignStyle : centerAlignStyle;

package/src/plugin.tsx

@@ -338,6 +338,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									} as ColumnResizingPluginState,
 									defaultGetEditorContainerWidth,
 									getEditorFeatureFlags || defaultGetEditorFeatureFlags,
+									api,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
@@ -364,6 +365,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
 						return keymapPlugin(
 							defaultGetEditorContainerWidth,
+							api,
 							editorAnalyticsAPI,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
@@ -598,6 +600,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
 											isChromelessEditor={options?.isChromelessEditor}
+											api={api}
 										/>
 									)}
 									{options?.allowContextualMenu && (
@@ -615,6 +618,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											}
 											isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
 											isCommentEditor={options?.isCommentEditor}
+											api={api}
 										/>
 									)}
 									{isDragAndDropEnabled && (
@@ -637,6 +641,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 												options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags
 											}
 											ariaNotifyPlugin={ariaNotifyPlugin}
+											api={api}
 										/>
 									)}
 									{allowControls && !isDragAndDropEnabled && !isResizing && (
@@ -650,6 +655,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											stickyHeaders={stickyHeader}
 											isNumberColumnEnabled={tableNode && tableNode.attrs.isNumberColumnEnabled}
 											editorAnalyticsAPI={editorAnalyticsAPI}
+											api={api}
 										/>
 									)}
 									{(options?.isTableScalingEnabled ||
@@ -718,6 +724,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 			],
 			floatingToolbar: getToolbarConfig(
 				defaultGetEditorContainerWidth,
+				api,
 				editorAnalyticsAPI,
 				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,

package/src/pm-plugins/keymap.ts

@@ -55,10 +55,11 @@ import {
 	createTable,
 } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-import type { PluginInjectionAPIWithA11y } from '../types';
+import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
 
 export function keymapPlugin(
 	getEditorContainerWidth: GetEditorContainerWidth,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	dragAndDropEnabled?: boolean,
 	isTableScalingEnabled = false,
@@ -124,6 +125,7 @@ export function keymapPlugin(
 	bindKeymapWithCommand(
 		addColumnBefore.common!,
 		addColumnBeforeCommand(
+			api,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
@@ -135,6 +137,7 @@ export function keymapPlugin(
 	bindKeymapWithCommand(
 		addColumnAfter.common!,
 		addColumnAfterCommand(
+			api,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
@@ -158,6 +161,7 @@ export function keymapPlugin(
 	bindKeymapWithCommand(
 		addColumnBeforeVO.common!,
 		addColumnBeforeCommand(
+			api,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
@@ -169,6 +173,7 @@ export function keymapPlugin(
 	bindKeymapWithCommand(
 		addColumnAfterVO.common!,
 		addColumnAfterCommand(
+			api,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
@@ -231,6 +236,7 @@ export function keymapPlugin(
 			deleteColumn.common!,
 			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
 				editorAnalyticsAPI,
+				api,
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
@@ -242,6 +248,7 @@ export function keymapPlugin(
 			deleteRow.common!,
 			deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(
 				editorAnalyticsAPI,
+				api,
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
@@ -281,7 +288,7 @@ export function keymapPlugin(
 
 	bindKeymapWithCommand(
 		decreaseMediaSize.common!,
-		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(
 			-10,
 			getEditorContainerWidth,
 			isTableScalingEnabled,
@@ -296,7 +303,7 @@ export function keymapPlugin(
 
 	bindKeymapWithCommand(
 		increaseMediaSize.common!,
-		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(
+		changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api)(
 			10,
 			getEditorContainerWidth,
 			isTableScalingEnabled,

package/src/pm-plugins/main.ts

@@ -167,6 +167,7 @@ export const createPlugin = (
 					tr,
 					oldState,
 					newState,
+					pluginInjectionApi,
 					editorAnalyticsAPI,
 					editorViewRef || undefined,
 					isTableScalingEnabled,

package/src/pm-plugins/table-resizing/commands.ts

@@ -6,6 +6,7 @@ import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 
 import { updateColumnWidths } from '../../transforms';
+import type { PluginInjectionAPI } from '../../types';
 import { META_KEYS } from '../table-analytics';
 
 import { createCommand, getPluginState } from './plugin-factory';
@@ -18,7 +19,9 @@ export const evenColumns =
 		table,
 		start,
 		event,
+		api,
 	}: {
+		api: PluginInjectionAPI | undefined | null;
 		resizeState: ResizeState;
 		table: PMNode;
 		start: number;
@@ -35,7 +38,10 @@ export const evenColumns =
 		const now = Date.now();
 		if (lastClick && now - lastClick.time < 500 && isClickNear(event, lastClick)) {
 			const newState = evenAllColumnsWidths(resizeState);
-			setLastClick(null, (tr) => updateColumnWidths(newState, table, start)(tr))(state, dispatch);
+			setLastClick(null, (tr) => updateColumnWidths(newState, table, start, api)(tr))(
+				state,
+				dispatch,
+			);
 
 			return true;
 		}
@@ -46,10 +52,14 @@ export const evenColumns =
 	};
 
 export const distributeColumnsWidths =
-	(newResizeState: ResizeState, table: ContentNodeWithPos): Command =>
+	(
+		newResizeState: ResizeState,
+		table: ContentNodeWithPos,
+		api: PluginInjectionAPI | undefined | null,
+	): Command =>
 	(state, dispatch) => {
 		if (dispatch) {
-			const tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+			const tr = updateColumnWidths(newResizeState, table.node, table.start, api)(state.tr);
 			tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
 				name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS,
 			});

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

@@ -18,6 +18,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { stopKeyboardColumnResizing } from '../../commands/column-resize';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
+import type { PluginInjectionAPI } from '../../types';
 import { getSelectedColumnIndexes, isTableNested } from '../../utils';
 import {
 	ALIGN_CENTER,
@@ -47,6 +48,7 @@ export const handleMouseDown = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	isTableScalingEnabled: boolean,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isNewColumnResizingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
@@ -125,6 +127,7 @@ export const handleMouseDown = (
 			table: originalTable,
 			start,
 			event,
+			api,
 		})(state, dispatch)
 	) {
 		finish(event);
@@ -230,7 +233,7 @@ export const handleMouseDown = (
 						isTableAlignmentEnabled,
 					});
 
-					tr = updateColumnWidths(newResizeState, table, start)(tr);
+					tr = updateColumnWidths(newResizeState, table, start, api)(tr);
 
 					// If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
 					const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(
@@ -276,7 +279,7 @@ export const handleMouseDown = (
 						shouldScale,
 						shouldUseIncreasedScalingPercent,
 					);
-					tr = updateColumnWidths(newResizeState, table, start)(tr);
+					tr = updateColumnWidths(newResizeState, table, start, api)(tr);
 				}
 
 				if (colIndex === map.width - 1) {

package/src/pm-plugins/table-resizing/plugin.ts

@@ -6,7 +6,7 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 
 import { TableCssClassName as ClassName } from '../../types';
-import type { ColumnResizingPluginState } from '../../types';
+import type { ColumnResizingPluginState, PluginInjectionAPI } from '../../types';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
 
 import { setResizeHandlePos } from './commands';
@@ -20,6 +20,7 @@ export function createPlugin(
 	{ lastColumnResizable = true }: ColumnResizingPluginState,
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	isTableScalingEnabled?: boolean,
 	isNewColumnResizingEnabled?: boolean,
@@ -74,6 +75,7 @@ export function createPlugin(
 								getEditorContainerWidth,
 								getEditorFeatureFlags,
 								isTableScalingEnabled || false,
+								api,
 								editorAnalyticsAPI,
 								isNewColumnResizingEnabled,
 								isTableAlignmentEnabled,

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -7,6 +7,7 @@ import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 import { updateColumnWidths } from '../../../transforms';
+import type { PluginInjectionAPI } from '../../../types';
 import { getTableWidth } from '../../../utils';
 import { getLayoutSize } from '../utils/misc';
 import { reduceSpace } from '../utils/resize-logic';
@@ -214,6 +215,7 @@ export const scaleTable =
 		tableRef: HTMLTableElement | null | undefined,
 		options: ScaleOptions,
 		domAtPos: DomAtPos,
+		api: PluginInjectionAPI | undefined | null,
 		isTableScalingEnabledOnCurrentTable = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
@@ -256,7 +258,7 @@ export const scaleTable =
 		}
 
 		if (resizeState) {
-			tr = updateColumnWidths(resizeState, node, start)(tr);
+			tr = updateColumnWidths(resizeState, node, start, api)(tr);
 
 			if (tr.docChanged) {
 				tr.setMeta('scrollIntoView', false);

package/src/toDOM.ts

@@ -1,9 +1,12 @@
+import kebabCase from 'lodash/kebabCase';
+
 import { table } from '@atlaskit/adf-schema';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/src/types';
 import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 
+import { getAlignmentStyle } from './nodeviews/table-container-styles';
 import { generateColgroup } from './pm-plugins/table-resizing/utils/colgroup';
 
 type Config = {
@@ -23,6 +26,10 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				config.getEditorContainerWidth().width - akEditorGutterPaddingDynamic() * 2,
 				node.attrs.width,
 			);
+			const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout))
+				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
+				.join(';');
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -111,7 +118,7 @@ export const tableNodeSpecWithFixedToDOM = (config: Config): typeof table => {
 				'div',
 				{
 					'data-testid': 'table-alignment-container',
-					style: 'display: flex; justify-content: center;',
+					style: alignmentStyle,
 				},
 				[
 					'div',