@atlaskit/editor-plugin-table 7.16.16 → 7.16.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.16",
+  "version": "7.16.18",
   "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.1.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -41,16 +41,16 @@
     "@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",
+    "@atlaskit/menu": "^2.4.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@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.5.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/primitives": "^7.0.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/tokens": "^1.49.0",
     "@atlaskit/tooltip": "^18.4.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';
@@ -18,12 +22,13 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 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,
@@ -157,7 +162,7 @@ const getVisibleGuidelines = (
 
 		guidelineVisibleAdjustment = isFullWidthModeEnabled
 			? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-			: -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+			: -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
 	}
 	const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
 
@@ -231,7 +236,9 @@ export const TableResizer = ({
 					isTableScalingEnabled
 						? defaultGuidelinesForPreserveTable(
 								PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-								isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+								isFullWidthModeEnabled
+									? lineLength + 2 * akEditorGutterPaddingDynamic()
+									: containerWidth,
 								excludeGuidelineConfig,
 							)
 						: defaultGuidelines,
@@ -260,7 +267,9 @@ export const TableResizer = ({
 						x: isTableScalingEnabled
 							? defaultTablePreserveSnappingWidths(
 									PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-									isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+									isFullWidthModeEnabled
+										? lineLength + 2 * akEditorGutterPaddingDynamic()
+										: containerWidth,
 									excludeGuidelineConfig,
 								)
 							: defaultSnappingWidths,
@@ -287,18 +296,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(() => {
@@ -346,7 +358,9 @@ export const TableResizer = ({
 			isTableScalingEnabled
 				? defaultGuidelinesForPreserveTable(
 						PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-						isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth,
+						isFullWidthModeEnabled
+							? lineLength + 2 * akEditorGutterPaddingDynamic()
+							: containerWidth,
 						excludeGuidelineConfig,
 					)
 				: defaultGuidelines,
@@ -402,7 +416,7 @@ export const TableResizer = ({
 			);
 
 			const editorContainerWidth = isFullWidthModeEnabled
-				? lineLength + 2 * akEditorGutterPadding
+				? lineLength + 2 * akEditorGutterPaddingDynamic()
 				: containerWidth;
 
 			const closestSnap = findClosestSnap(

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