@atlaskit/editor-plugin-table 7.16.16 → 7.16.17

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.16",
+  "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",
@@ -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"
     },

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

package/src/toolbar.tsx

@@ -3,7 +3,7 @@ import { jsx } from '@emotion/react';
 
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -69,10 +69,10 @@ import {
 	setTableAlignmentWithAnalytics,
 	sortColumnWithAnalytics,
 	splitCellWithAnalytics,
+	toggleFixedColumnWidthsOptionAnalytics,
 	toggleHeaderColumnWithAnalytics,
 	toggleHeaderRowWithAnalytics,
 	toggleNumberColumnWithAnalytics,
-	toggleTableLockWithAnalytics,
 	wrapTableInExpandWithAnalytics,
 } from './commands-with-analytics';
 import type { TablePluginOptions } from './plugin';
@@ -90,7 +90,6 @@ import type {
 } from './types';
 import { TableCssClassName } from './types';
 import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
-import { DisplayModeIcon } from './ui/icons';
 import {
 	getMergedCellsPositions,
 	getSelectedColumnIndexes,
@@ -104,6 +103,8 @@ export const getToolbarMenuConfig = (
 	state: ToolbarMenuState,
 	{ formatMessage }: ToolbarMenuContext,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+	isTableScalingWithFixedColumnWidthsOptionShown = false,
+	areTableColumnWidthsFixed = false,
 ): FloatingToolbarItem<Command> => {
 	const optionItem: typeOption = getBooleanFF(
 		'platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33',
@@ -112,6 +113,14 @@ export const getToolbarMenuConfig = (
 		: 'item';
 
 	const options = [
+		{
+			id: 'editor.table.lockColumnWidths',
+			title: formatMessage(messages.lockColumnWidths),
+			onClick: toggleFixedColumnWidthsOptionAnalytics(editorAnalyticsAPI, INPUT_METHOD.FLOATING_TB),
+			selected: areTableColumnWidthsFixed,
+			hidden: !isTableScalingWithFixedColumnWidthsOptionShown,
+			domItemOptions: { type: optionItem },
+		},
 		{
 			id: 'editor.table.headerRow',
 			title: formatMessage(messages.headerRow),
@@ -156,6 +165,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
+			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
 		};
 	} else {
 		return {
@@ -165,6 +175,7 @@ export const getToolbarMenuConfig = (
 			title: formatMessage(messages.tableOptions),
 			hidden: options.every((option) => option.hidden),
 			options,
+			dropdownWidth: isTableScalingWithFixedColumnWidthsOptionShown ? 192 : undefined,
 		};
 	}
 };
@@ -434,6 +445,7 @@ export const getToolbarConfig =
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
 		options?: TablePluginOptions,
+		isTableScalingWithFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
@@ -448,11 +460,21 @@ export const getToolbarConfig =
 
 		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
 			const nodeType = state.schema.nodes.table;
-			const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-
-			let alignmentMenu: Array<FloatingToolbarItem<Command>>;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
+			const isTableScalingWithFixedColumnWidthsOptionShown =
+				isTableScalingWithFixedColumnWidthsOptionEnabled && !isNested;
+			const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
+
+			const menu = getToolbarMenuConfig(
+				config,
+				pluginState,
+				intl,
+				editorAnalyticsAPI,
+				isTableScalingWithFixedColumnWidthsOptionShown,
+				areTableColumWidthsFixed,
+			);
 
+			let alignmentMenu: Array<FloatingToolbarItem<Command>>;
 			alignmentMenu =
 				options?.isTableAlignmentEnabled && !isNested
 					? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
@@ -612,29 +634,6 @@ const getCellItems = (
 	return [];
 };
 
-export const getLockBtnConfig =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): Command =>
-	(state, dispatch, editorView) => {
-		const selectionOrTableRect = getClosestSelectionOrTableRect(state);
-		if (!editorView || !selectionOrTableRect) {
-			return false;
-		}
-
-		const { tr } = state;
-		const table = findTable(tr.selection);
-
-		if (!table) {
-			return false;
-		} else {
-			const { displayMode } = table.node.attrs;
-			toggleTableLockWithAnalytics(editorAnalyticsAPI)(displayMode, INPUT_METHOD.FLOATING_TB)(
-				state,
-				dispatch,
-			);
-			return true;
-		}
-	};
-
 export const getDistributeConfig =
 	(
 		getEditorContainerWidth: GetEditorContainerWidth,
@@ -693,32 +692,6 @@ const getColumnSettingItems = (
 
 	const items: Array<FloatingToolbarItem<Command>> = [];
 
-	const isNested = pluginState.tablePos && isTableNested(editorState, pluginState.tablePos);
-
-	const isTableScalingLockBtnEnabled =
-		!isNested &&
-		isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button');
-
-	if (isTableScalingLockBtnEnabled) {
-		const areColumnWidthsLocked = pluginState?.tableNode?.attrs.displayMode === 'fixed';
-
-		const title = areColumnWidthsLocked
-			? formatMessage(messages.unlockColumnWidths)
-			: formatMessage(messages.lockColumnWidths);
-
-		items.push({
-			id: 'editor.table.lockColumns',
-			type: 'button',
-			title,
-			icon: () => <DisplayModeIcon size="medium" label={title} />,
-			onClick: (state, dispatch, view) =>
-				getLockBtnConfig(editorAnalyticsAPI)(state, dispatch, view),
-			selected: areColumnWidthsLocked,
-			testId: 'table-lock-column-widths-btn',
-		});
-	}
-
 	if (pluginState?.pluginConfig?.allowDistributeColumns && pluginState.isDragAndDropEnabled) {
 		items.push({
 			id: 'editor.table.distributeColumns',
@@ -875,6 +848,7 @@ export const getAlignmentOptionsConfig = (
 				value,
 				currentLayout,
 				INPUT_METHOD.FLOATING_TB,
+				CHANGE_ALIGNMENT_REASON.TOOLBAR_OPTION_CHANGED,
 			),
 			...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && {
 				disabled: value !== 'center',

package/src/ui/TableFloatingControls/index.tsx

@@ -165,7 +165,6 @@ export const TableFloatingControls = ({
 											isInDanger={isInDanger}
 											isResizing={isResizing}
 										/>
-
 									))}
 								<DragControls
 									tableRef={tableRef}

package/src/ui/icons/index.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/src/utils/snapping.ts

@@ -4,7 +4,7 @@ import {
 	akEditorCalculatedWideLayoutWidth,
 	akEditorDefaultLayoutWidth,
 	akEditorFullWidthLayoutWidth,
-	akEditorGutterPadding,
+	akEditorGutterPaddingDynamic,
 } from '@atlaskit/editor-shared-styles';
 
 const numberOfLanesInDefaultLayoutWidth = 12;
@@ -39,9 +39,9 @@ export const calculateDefaultTablePreserveSnappings = (
 	},
 ) => {
 	const dynamicFullWidthLine =
-		editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth
+		editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth
 			? akEditorFullWidthLayoutWidth
-			: editorContainerWith - akEditorGutterPadding * 2;
+			: editorContainerWith - akEditorGutterPaddingDynamic() * 2;
 
 	const guides = [dynamicFullWidthLine - lengthOffset];
 
@@ -77,7 +77,7 @@ export const defaultTablePreserveSnappingWidths = (
 		breakoutPoints: false,
 	},
 ) => {
-	return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth
+	return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth
 		? calculateDefaultSnappings()
 		: calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };