@atlaskit/editor-plugin-table 7.16.15 → 7.16.17

package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.d.ts

@@ -23,7 +23,7 @@ export declare const evenAllColumnsWidths: (resizeState: ResizeState) => ResizeS
 export declare const evenSelectedColumnsWidths: (resizeState: ResizeState, rect: Rect) => ResizeState;
 export declare const bulkColumnsResize: (resizeState: ResizeState, columnsIndexes: number[], sourceColumnIndex: number) => ResizeState;
 export declare const areColumnsEven: (resizeState: ResizeState) => boolean;
-export declare const normaliseTableLayout: (input: string | undefined | null) => "default" | "wide" | "full-width";
+export declare const normaliseTableLayout: (input: string | undefined | null) => "wide" | "default" | "full-width";
 export declare const getNewResizeStateFromSelectedColumns: (rect: Rect, state: EditorState, domAtPos: (pos: number) => {
     node: Node;
     offset: number;

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

@@ -7,12 +7,11 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { TablePluginOptions } from './plugin';
 import type { AlignmentOptions, PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
-export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
+export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingWithFixedColumnWidthsOptionShown?: boolean, areTableColumnWidthsFixed?: boolean) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
 export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rect | undefined;
-export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
-export declare const getLockBtnConfig: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableScalingWithFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;
 type AlignmentIcon = {
     id?: string;

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

@@ -140,6 +140,7 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
                     ];
@@ -265,6 +266,7 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
             ];

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

@@ -121,6 +121,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
                     ];
@@ -246,6 +247,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
             ];
@@ -383,6 +385,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                         to: number;
                                         mark: import("prosemirror-model").Mark;
                                     }) => boolean;
+                                    isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                                 };
                             }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
                         ];
@@ -508,6 +511,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
                                 to: number;
                                 mark: import("prosemirror-model").Mark;
                             }) => boolean;
+                            isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                         };
                     }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
                 ];

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

@@ -149,6 +149,7 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                                     to: number;
                                     mark: import("prosemirror-model").Mark;
                                 }) => boolean;
+                                isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                             };
                         }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
                     ];
@@ -274,6 +275,7 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
                             to: number;
                             mark: import("prosemirror-model").Mark;
                         }) => boolean;
+                        isRemoteReplaceDocumentTransaction: (tr: import("prosemirror-state").Transaction) => boolean;
                     };
                 }, import("@atlaskit/editor-plugin-collab-edit").PrivateCollabEditOptions>
             ];

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

@@ -1,7 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
-export { DisplayModeIcon } from './DisplayModeIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
 export { MergeCellsIcon } from './MergeCellsIcon';
 export { SplitCellIcon } from './SplitCellIcon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.15",
+  "version": "7.16.17",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^81.2.0",
+    "@atlaskit/editor-common": "^82.0.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -41,7 +41,7 @@
     "@atlaskit/editor-plugin-selection": "^1.2.0",
     "@atlaskit/editor-plugin-width": "^1.1.0",
     "@atlaskit/editor-prosemirror": "4.0.1",
-    "@atlaskit/editor-shared-styles": "^2.11.0",
+    "@atlaskit/editor-shared-styles": "^2.12.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.3.0",
     "@atlaskit/menu": "^2.3.0",
@@ -49,7 +49,7 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^6.4.0",
+    "@atlaskit/primitives": "^6.5.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/tokens": "^1.49.0",
@@ -114,6 +114,9 @@
     "platform.editor.a11y-column-resizing_emcvz": {
       "type": "boolean"
     },
+    "platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg": {
+      "type": "boolean"
+    },
     "platform.editor.transform-slice-for-nested-expand": {
       "type": "boolean"
     },
@@ -143,6 +146,9 @@
     },
     "platform.editor.table.editor-num-col-style-changes": {
       "type": "boolean"
+    },
+    "platform.editor.drag-and-drop_wmv9t": {
+      "type": "boolean"
     }
   }
 }

package/src/commands-with-analytics.ts

@@ -13,11 +13,13 @@ import {
 } from '@atlaskit/editor-common/analytics';
 import type { AnalyticsEventPayload, EditorAnalyticsAPI } 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 NodeWithPos } from '@atlaskit/editor-prosemirror/dist/types/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
+import { type Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import {
 	findCellClosestToPos,
 	findCellRectClosestToPos,
@@ -36,6 +38,7 @@ import {
 	getTableSelectionType,
 	setMultipleCellAttrs,
 	setTableAlignment,
+	setTableAlignmentWithTableContentWithPos,
 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
@@ -605,47 +608,45 @@ export const wrapTableInExpandWithAnalytics = (
 		};
 	})(editorAnalyticsAPI)(wrapTableInExpand);
 
-export const toggleTableLockWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
-	(
-		displayMode: TABLE_DISPLAY_MODE | null,
-		inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB,
-	) =>
-		withEditorAnalyticsAPI((state) => {
-			const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
+export const toggleFixedColumnWidthsOptionAnalytics = (
+	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+	inputMethod: INPUT_METHOD.FLOATING_TB,
+) =>
+	withEditorAnalyticsAPI((state) => {
+		const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
 
-			let previousDisplayMode: TABLE_DISPLAY_MODE;
-			let newDisplayMode: TABLE_DISPLAY_MODE;
-
-			switch (displayMode) {
-				case 'fixed':
-					previousDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-					newDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
-					break;
-				case 'default':
-					previousDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
-					newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-					break;
-				case null:
-				default:
-					previousDisplayMode = TABLE_DISPLAY_MODE.INITIAL;
-					newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
-			}
+		let previousDisplayMode: TABLE_DISPLAY_MODE;
+		let newDisplayMode: TABLE_DISPLAY_MODE;
+
+		switch (table?.node.attrs.displayMode) {
+			case 'fixed':
+				previousDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+				newDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
+				break;
+			case 'default':
+				previousDisplayMode = TABLE_DISPLAY_MODE.DEFAULT;
+				newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+				break;
+			case null:
+			default:
+				previousDisplayMode = TABLE_DISPLAY_MODE.INITIAL;
+				newDisplayMode = TABLE_DISPLAY_MODE.FIXED;
+		}
 
-			return {
-				action: TABLE_ACTION.CHANGED_DISPLAY_MODE,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				attributes: {
-					inputMethod,
-					previousDisplayMode,
-					newDisplayMode,
-					tableWidth: table?.node.attrs.width,
-					totalRowCount,
-					totalColumnCount,
-				},
-				eventType: EVENT_TYPE.TRACK,
-			};
-		})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
+		return {
+			action: TABLE_ACTION.CHANGED_DISPLAY_MODE,
+			actionSubject: ACTION_SUBJECT.TABLE,
+			attributes: {
+				inputMethod,
+				previousDisplayMode,
+				newDisplayMode,
+				tableWidth: table?.node.attrs.width,
+				totalRowCount,
+				totalColumnCount,
+			},
+			eventType: EVENT_TYPE.TRACK,
+		};
+	})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 
 export const setTableAlignmentWithAnalytics =
 	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -654,6 +655,7 @@ export const setTableAlignmentWithAnalytics =
 		// previous alignment could be a breakout value, if so use 'null' to indicate alignment was not previously set
 		previousAlignment: TableLayout,
 		inputMethod: INPUT_METHOD.FLOATING_TB,
+		reason: CHANGE_ALIGNMENT_REASON,
 	) =>
 		withEditorAnalyticsAPI((state) => {
 			const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
@@ -673,6 +675,44 @@ export const setTableAlignmentWithAnalytics =
 					totalRowCount,
 					totalColumnCount,
 					inputMethod,
+					reason,
 				},
 			};
 		})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+
+export const setTableAlignmentWithTableContentWithPosWithAnalytics =
+	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(
+		newAlignment: AlignmentOptions,
+		previousAlignment: AlignmentOptions | null,
+		tableNodeWithPos: NodeWithPos,
+		inputMethod: INPUT_METHOD.AUTO,
+		reason: CHANGE_ALIGNMENT_REASON,
+	) =>
+		withEditorAnalyticsAPI(() => {
+			const map = TableMap.get(tableNodeWithPos.node);
+			const totalRowCount = map.height;
+			const totalColumnCount = map.width;
+
+			const attributes = {
+				tableWidth: tableNodeWithPos.node.attrs.width,
+				newAlignment: newAlignment,
+				previousAlignment: previousAlignment,
+				totalRowCount: totalRowCount,
+				totalColumnCount: totalColumnCount,
+				inputMethod: inputMethod,
+				reason: reason,
+			};
+
+			return {
+				action: TABLE_ACTION.CHANGED_ALIGNMENT,
+				actionSubject: ACTION_SUBJECT.TABLE,
+				actionSubjectId: null,
+				eventType: EVENT_TYPE.TRACK,
+				attributes: attributes,
+			};
+		})(editorAnalyticsAPI)(
+			editorCommandToPMCommand(
+				setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos),
+			),
+		);

package/src/nodeviews/TableContainer.tsx

@@ -3,7 +3,11 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 
 import classNames from 'classnames';
 
-import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import {
+	CHANGE_ALIGNMENT_REASON,
+	INPUT_METHOD,
+	type TableEventPayload,
+} from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -12,14 +16,15 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorDefaultLayoutWidth,
-	akEditorGutterPadding,
+	akEditorGutterPaddingDynamic,
 	akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 
-import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import type { PluginInjectionAPI, TableSharedState } from '../types';
 import { TableCssClassName as ClassName } from '../types';
+import { ALIGN_CENTER, ALIGN_START } from '../utils/alignment';
 
 import { TableResizer } from './TableResizer';
 
@@ -69,16 +74,19 @@ const AlignmentTableContainer = ({
 	getPos,
 	editorView,
 }: PropsWithChildren<AlignmentTableContainerProps>) => {
-	const alignment = node.attrs.layout;
+	const alignment = node.attrs.layout !== ALIGN_START ? ALIGN_CENTER : ALIGN_START;
 	const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
 
 	useEffect(() => {
 		if (tableState && editorView && getPos) {
 			const { wasFullWidthModeEnabled, isFullWidthModeEnabled } = tableState;
+			const { state, dispatch } = editorView;
 
 			if (
 				wasFullWidthModeEnabled &&
+				isFullWidthModeEnabled !== undefined &&
 				!isFullWidthModeEnabled &&
+				alignment !== ALIGN_CENTER &&
 				node.attrs.width > akEditorDefaultLayoutWidth
 			) {
 				const pos = getPos && getPos();
@@ -87,13 +95,15 @@ const AlignmentTableContainer = ({
 					return;
 				}
 
-				const tr = setTableAlignmentWithTableContentWithPos('center', { pos, node })(
-					editorView.state,
-				);
-
-				if (tr) {
-					editorView.dispatch(tr);
-				}
+				setTableAlignmentWithTableContentWithPosWithAnalytics(
+					pluginInjectionApi?.analytics?.actions,
+				)(
+					ALIGN_CENTER,
+					alignment,
+					{ pos, node },
+					INPUT_METHOD.AUTO,
+					CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED,
+				)(state, dispatch);
 			}
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -276,15 +286,15 @@ export const ResizableTableContainer = React.memo(
 			// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
 			responsiveContainerWidth = isTableScalingEnabled
 				? lineLength
-				: containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
 		} else {
 			// 76 is currently an accepted padding value considering the spacing for resizer handle
 			// containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
 			// a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
 			// padding left = padding right = akEditorGutterPadding = 32
 			responsiveContainerWidth = isTableScalingEnabled
-				? containerWidth - akEditorGutterPadding * 2
-				: containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+				? containerWidth - akEditorGutterPaddingDynamic() * 2
+				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
 		}
 		let width = Math.min(tableWidth, responsiveContainerWidth);
 

package/src/nodeviews/TableResizer.tsx

@@ -5,7 +5,11 @@ import rafSchd from 'raf-schd';
 import { useIntl } from 'react-intl-next';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
-import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import {
+	CHANGE_ALIGNMENT_REASON,
+	INPUT_METHOD,
+	TABLE_OVERFLOW_CHANGE_TRIGGER,
+} from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -23,7 +27,8 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
-import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
+import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
+import { updateWidthToWidest } from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
 	COLUMN_MIN_WIDTH,
@@ -287,18 +292,21 @@ export const TableResizer = ({
 				isResizing.current
 			) {
 				const tableNodeWithPos = { pos, node };
-				const tr = setTableAlignmentWithTableContentWithPos(ALIGN_CENTER, tableNodeWithPos)(state);
-
-				if (tr) {
-					dispatch(tr);
-				}
-
+				setTableAlignmentWithTableContentWithPosWithAnalytics(
+					pluginInjectionApi?.analytics?.actions,
+				)(
+					ALIGN_CENTER,
+					ALIGN_START,
+					tableNodeWithPos,
+					INPUT_METHOD.AUTO,
+					CHANGE_ALIGNMENT_REASON.EDITOR_APPEARANCE_CHANGED,
+				)(state, dispatch);
 				return true;
 			}
 
 			return false;
 		},
-		[lineLength, isTableAlignmentEnabled, isResizing],
+		[isTableAlignmentEnabled, lineLength, pluginInjectionApi?.analytics?.actions],
 	);
 
 	useEffect(() => {

package/src/plugin.tsx

@@ -153,9 +153,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 	};
 	const editorAnalyticsAPI = api?.analytics?.actions;
 
-	const shouldUseIncreasedScalingPercent =
+	const isTableScalingWithFixedColumnWidthsOptionEnabled =
 		options?.isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
+	const shouldUseIncreasedScalingPercent =
+		isTableScalingWithFixedColumnWidthsOptionEnabled &&
 		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 	return {
@@ -660,6 +662,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 				() => editorViewRef.current,
 				options,
+				isTableScalingWithFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
 			)(pluginConfig(options?.tableOptions)),
 		},

package/src/pm-plugins/keymap.ts

@@ -4,9 +4,13 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
 	addColumnAfter,
+	addColumnAfterVO,
 	addColumnBefore,
+	addColumnBeforeVO,
 	addRowAfter,
+	addRowAfterVO,
 	addRowBefore,
+	addRowBeforeVO,
 	backspace,
 	bindKeymapWithCommand,
 	decreaseMediaSize,
@@ -122,6 +126,32 @@ export function keymapPlugin(
 		list,
 	);
 
+	if (getBooleanFF('platform.editor.a11y-help-dialog-shortcut-keys-position_aghfg')) {
+		bindKeymapWithCommand(
+			addRowBeforeVO.common!,
+			addRowAroundSelection(editorAnalyticsAPI)('TOP'),
+			list,
+		);
+
+		bindKeymapWithCommand(
+			addRowAfterVO.common!,
+			addRowAroundSelection(editorAnalyticsAPI)('BOTTOM'),
+			list,
+		);
+
+		bindKeymapWithCommand(
+			addColumnBeforeVO.common!,
+			addColumnBeforeCommand(isTableScalingEnabled),
+			list,
+		);
+
+		bindKeymapWithCommand(
+			addColumnAfterVO.common!,
+			addColumnAfterCommand(isTableScalingEnabled),
+			list,
+		);
+	}
+
 	if (dragAndDropEnabled) {
 		// Move row/column shortcuts
 		/**

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

@@ -13,7 +13,7 @@ import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorFullWidthLayoutWidth,
-	akEditorGutterPadding,
+	akEditorGutterPaddingDynamic,
 	akEditorTableNumberColumnWidth,
 } from '@atlaskit/editor-shared-styles';
 
@@ -35,7 +35,7 @@ export function getLayoutSize(
 
 	if (isFullWidthModeEnabled) {
 		return containerWidth
-			? Math.min(containerWidth - akEditorGutterPadding * 2, akEditorFullWidthLayoutWidth)
+			? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)
 			: akEditorFullWidthLayoutWidth;
 	}