@atlaskit/editor-plugin-table 7.19.5 → 7.19.7

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -13,7 +13,7 @@ import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, RowInsertPos
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
-export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, targetCellPosition?: number, editorView?: EditorView | null) => Command;
+export declare const setColorWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, cellColor: string, editorView?: EditorView | null) => Command;
 export declare const addRowAroundSelection: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (side: RowInsertPosition) => Command;
 export declare const insertRowWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isCellbackgroundDuplicated?: boolean) => (inputMethod: InsertRowMethods, options: InsertRowOptions) => Command;
 export declare const changeColumnWidthByStepWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (stepSize: number, getEditorContainerWidth: GetEditorContainerWidth, isTableScalingEnabled: boolean, isTableFixedColumnWidthsOptionEnabled: boolean, inputMethod: INPUT_METHOD.SHORTCUT, ariaNotify?: ((message: string) => void) | undefined, getIntl?: () => IntlShape) => Command;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.19.5",
+	"version": "7.19.7",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,10 +28,10 @@
 		"runReact18": false
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^38.0.0",
-		"@atlaskit/button": "^18.0.0",
+		"@atlaskit/adf-schema": "^39.0.3",
+		"@atlaskit/button": "^18.1.0",
 		"@atlaskit/custom-steps": "^0.4.0",
-		"@atlaskit/editor-common": "^83.4.0",
+		"@atlaskit/editor-common": "^84.0.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
@@ -46,8 +46,8 @@
 		"@atlaskit/icon": "^22.5.0",
 		"@atlaskit/menu": "^2.6.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
-		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
+		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^10.0.0",
 		"@atlaskit/theme": "^12.11.0",

package/src/commands/misc.ts

@@ -387,10 +387,11 @@ export const moveCursorBackward: Command = (state, dispatch) => {
 };
 
 export const setMultipleCellAttrs =
-	(attrs: Object, targetCellPosition?: number, editorView?: EditorView | null): Command =>
+	(attrs: Object, editorView?: EditorView | null): Command =>
 	(state, dispatch) => {
 		let cursorPos: number | undefined;
 		let { tr } = state;
+		const { targetCellPosition } = getPluginState(state);
 
 		if (isSelectionType(tr.selection, 'cell')) {
 			const selection = tr.selection as any as CellSelection;

package/src/commands-with-analytics.ts

@@ -161,7 +161,6 @@ export const setColorWithAnalytics =
 			| INPUT_METHOD.FLOATING_TB
 			| INPUT_METHOD.TABLE_CONTEXT_MENU,
 		cellColor: string,
-		targetCellPosition?: number,
 		editorView?: EditorView | null,
 	) =>
 		withEditorAnalyticsAPI(({ selection }) => {
@@ -185,9 +184,7 @@ export const setColorWithAnalytics =
 				},
 				eventType: EVENT_TYPE.TRACK,
 			};
-		})(editorAnalyticsAPI)(
-			setMultipleCellAttrs({ background: cellColor }, targetCellPosition, editorView),
-		);
+		})(editorAnalyticsAPI)(setMultipleCellAttrs({ background: cellColor }, editorView));
 
 export const addRowAroundSelection =
 	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>

package/src/plugin.tsx

@@ -654,9 +654,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 					title: formatMessage(messages.table),
 					description: formatMessage(messages.tableDescription),
 					keywords: ['cell', 'table'],
-					priority: options?.getEditorFeatureFlags?.().platformEditorTypeaheadImprovedRelevancy
-						? 800
-						: 600,
+					priority: 600,
 					keyshortcut: tooltip(toggleTable),
 					icon: () => <IconTable />,
 					action(insert, state) {

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -6,7 +6,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { getCellsInRow, getSelectedCellInfo } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
@@ -225,7 +225,7 @@ const destroyFn = (
 
 							const shouldUseIncreasedScalingPercent =
 								isTableScalingWithFixedColumnWidthsOptionEnabled &&
-								getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+								fg('platform.editor.table.use-increased-scaling-percent');
 
 							insertColgroupFromNode(
 								tableRef,

package/src/toolbar.tsx

@@ -630,6 +630,7 @@ export const getToolbarConfig =
 				scrollable: true,
 			};
 		}
+
 		return;
 	};
 
@@ -715,7 +716,6 @@ const getColumnSettingItems = (
 ): Array<FloatingToolbarItem<Command>> => {
 	const pluginState = getPluginState(editorState);
 	const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
-
 	if (!selectionOrTableRect || !editorView) {
 		return [];
 	}
@@ -794,7 +794,6 @@ const getColorPicker = (
 				setColorWithAnalytics(editorAnalyticsAPI)(
 					INPUT_METHOD.FLOATING_TB,
 					option.value,
-					targetCellPosition,
 					getEditorView(),
 				),
 		},

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -42,7 +42,7 @@ import { splitCell } from '@atlaskit/editor-tables/utils';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import {
 	clearHoverSelection,
@@ -117,7 +117,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 	private dropdownMenuRef = React.createRef<HTMLDivElement>();
 
 	componentDidMount() {
-		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
 			// ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
 			// until user pressed ArrowDown.
 			// Behavior above fails the A11Y requirement about first item in menu should be focused immediately.
@@ -141,7 +141,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			: this.createOriginalContextMenuItems();
 		let isOpenAllowed = false;
 
-		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
 			isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
 		} else {
 			isOpenAllowed = isOpen;
@@ -160,9 +160,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					arrowKeyNavigationProviderOptions={{
 						type: ArrowKeyNavigationType.MENU,
 						disableArrowKeyNavigation:
-							getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') &&
 							isCellMenuOpenByKeyboard &&
-							!this.state.isSubmenuOpen
+							!this.state.isSubmenuOpen &&
+							fg('platform.editor.a11y-table-context-menu_y4c9c')
 								? false
 								: true,
 					}}
@@ -177,7 +177,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 						isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth
 					}
 					shouldFocusFirstItem={
-						getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
+						fg('platform.editor.a11y-table-context-menu_y4c9c')
 							? () => {
 									return Boolean(isCellMenuOpenByKeyboard);
 								}
@@ -187,9 +187,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					offset={offset}
 					section={isDragAndDropEnabled ? { hasSeparator: true } : undefined}
 					isAllowEnterDefaultBehavior={
-						getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
-							? this.state.isSubmenuOpen
-							: false
+						fg('platform.editor.a11y-table-context-menu_y4c9c') ? this.state.isSubmenuOpen : false
 					}
 				/>
 			</div>
@@ -229,7 +227,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			let selectedRowIndex;
 			let selectedColumnIndex;
 
-			if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+			if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
 				const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(
 					cellBackgroundColorPalette,
 					background!,
@@ -265,7 +263,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 									: ClassName.CONTEXTUAL_MENU_ICON
 							}
 						/>
-						{getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
+						{fg('platform.editor.a11y-table-context-menu_y4c9c')
 							? isSubmenuOpen && (
 									<div
 										// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -320,7 +318,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 								)}
 					</div>
 				),
-				'aria-expanded': getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')
+				'aria-expanded': fg('platform.editor.a11y-table-context-menu_y4c9c')
 					? isSubmenuOpen
 					: undefined,
 			} as MenuItem;
@@ -649,10 +647,10 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		// context menu opened by keyboard and any item except 'background' activated
 		// or color has been chosen from color palette
 		if (
-			getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') &&
 			isCellMenuOpenByKeyboard &&
 			(item.value.name !== 'background' ||
-				(item.value.name === 'background' && this.state.isSubmenuOpen))
+				(item.value.name === 'background' && this.state.isSubmenuOpen)) &&
+			fg('platform.editor.a11y-table-context-menu_y4c9c')
 		) {
 			const { tr } = state;
 			tr.setMeta(tablePluginKey, {
@@ -668,7 +666,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
 			tableWithFixedColumnWidthsOption &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+			fg('platform.editor.table.use-increased-scaling-percent');
 
 		switch (item.value.name) {
 			case 'sort_column_desc':
@@ -767,9 +765,9 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				// 2nd when color has been chosen from color palette.
 				// here we are handling the 1st call relying on the isSubmenuOpen state value
 				if (
-					getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c') &&
 					isCellMenuOpenByKeyboard &&
-					!this.state.isSubmenuOpen
+					!this.state.isSubmenuOpen &&
+					fg('platform.editor.a11y-table-context-menu_y4c9c')
 				) {
 					this.setState({ isSubmenuOpen: true });
 				}
@@ -800,7 +798,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			isCellMenuOpenByKeyboard,
 		} = this.props;
 
-		if (getBooleanFF('platform.editor.a11y-table-context-menu_y4c9c')) {
+		if (fg('platform.editor.a11y-table-context-menu_y4c9c')) {
 			if (payload) {
 				const { event } = payload;
 				if (event && event instanceof KeyboardEvent) {
@@ -881,13 +879,8 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 
 	private setColor = (color: string) => {
 		const { editorView, editorAnalyticsAPI } = this.props;
-		// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-		const { targetCellPosition } = getPluginState(editorView.state);
 		const { state, dispatch } = editorView;
-		setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(
-			state,
-			dispatch,
-		);
+		setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
 		this.toggleOpen();
 	};
 }

package/src/ui/FloatingContextualMenu/styles.ts

@@ -16,7 +16,7 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
 		},
 	});
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const elementBeforeIconStyles = css({
 	marginRight: token('space.negative.075', '-6px'),
 	display: 'flex',

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -39,7 +39,7 @@ import {
 	isSelectionType,
 } from '@atlaskit/editor-tables/utils';
 import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Toggle from '@atlaskit/toggle';
 
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
@@ -292,7 +292,7 @@ export const DragMenu = React.memo(
 
 		let shouldMoveDisabled;
 		let hasMergedCellsInTable;
-		if (getBooleanFF('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
+		if (fg('platform.editor.table.drag-move-options-logic-update_fp7xw')) {
 			shouldMoveDisabled = false;
 			hasMergedCellsInTable = tableMap?.hasMergedCells() ?? false;
 		} else {
@@ -347,13 +347,8 @@ export const DragMenu = React.memo(
 		};
 
 		const setColor = (color: string) => {
-			const { targetCellPosition } = getTablePluginState(editorView.state);
 			const { state, dispatch } = editorView;
-			setColorWithAnalytics(editorAnalyticsAPI)(
-				INPUT_METHOD.CONTEXT_MENU,
-				color,
-				targetCellPosition,
-			)(state, dispatch);
+			setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
 			closeMenu();
 			setIsSubmenuOpen(false);
 		};

package/src/ui/FloatingDragMenu/styles.ts

@@ -21,7 +21,7 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
 		},
 	});
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const elementBeforeIconStyles = css({
 	marginRight: token('space.negative.075', '-6px'),
 	display: 'flex',
@@ -69,7 +69,7 @@ export const dragMenuBackgroundColorStyles = (tableSortColumnReorder: boolean =
 	}
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const toggleStyles = css({
 	display: 'flex',
 	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766

package/src/ui/common-styles.ts

@@ -1082,7 +1082,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	${shadowSentinelStyles}
 `;
 
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const tableFullPageEditorStyles = css`
 	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
 		margin-left: 0;
@@ -1092,7 +1092,7 @@ export const tableFullPageEditorStyles = css`
 	}
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const tableCommentEditorStyles = css`
 	.ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
 		margin-left: 0;

package/src/ui/ui-styles.ts

@@ -640,7 +640,7 @@ export const hoveredCell = () => css`
 	}
 `;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const hoveredWarningCell = css`
 	:not(.${ClassName.IS_RESIZING})
 		.${ClassName.TABLE_CONTAINER}:not(.${ClassName.HOVERED_DELETE_BUTTON}) {