@atlaskit/editor-plugin-table 7.25.6 → 7.25.8

package/src/toolbar.tsx

@@ -88,6 +88,7 @@ import { canMergeCells } from './transforms';
 import type {
 	AlignmentOptions,
 	PluginConfig,
+	PluginInjectionAPI,
 	ToolbarMenuConfig,
 	ToolbarMenuContext,
 	ToolbarMenuState,
@@ -192,6 +193,7 @@ export const getToolbarCellOptionsConfig = (
 	initialSelectionRect: Rect,
 	{ formatMessage }: ToolbarMenuContext,
 	getEditorContainerWidth: GetEditorContainerWidth,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
 	isCellBackgroundDuplicated = false,
@@ -213,6 +215,7 @@ export const getToolbarCellOptionsConfig = (
 				const index = selectionRect?.right;
 				if (index) {
 					insertColumnWithAnalytics(
+						api,
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						isCellBackgroundDuplicated,
@@ -256,6 +259,7 @@ export const getToolbarCellOptionsConfig = (
 				if (selectionRect) {
 					deleteColumnsWithAnalytics(
 						editorAnalyticsAPI,
+						api,
 						isTableScalingEnabled,
 						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
@@ -330,7 +334,7 @@ export const getToolbarCellOptionsConfig = (
 
 		const distributeColumnWidths: Command = (state, dispatch) => {
 			if (newResizeStateWithAnalytics) {
-				distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
+				distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(
 					INPUT_METHOD.FLOATING_TB,
 					newResizeStateWithAnalytics,
 				)(state, dispatch);
@@ -460,6 +464,7 @@ export const getClosestSelectionOrTableRect = (state: EditorState): Rect | undef
 export const getToolbarConfig =
 	(
 		getEditorContainerWidth: GetEditorContainerWidth,
+		api: PluginInjectionAPI | undefined | null,
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		getEditorFeatureFlags: GetEditorFeatureFlags,
 		getEditorView: () => EditorView | null,
@@ -546,6 +551,7 @@ export const getToolbarConfig =
 						editorView,
 						intl,
 						getEditorContainerWidth,
+						api,
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						isCellBackgroundDuplicated,
@@ -560,6 +566,7 @@ export const getToolbarConfig =
 						editorView,
 						intl,
 						getEditorContainerWidth,
+						api,
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						isTableFixedColumnWidthsOptionEnabled,
@@ -660,6 +667,7 @@ const getCellItems = (
 	view: EditorView | null,
 	{ formatMessage }: ToolbarMenuContext,
 	getEditorContainerWidth: GetEditorContainerWidth,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
 	isCellBackgroundDuplicated = false,
@@ -675,6 +683,7 @@ const getCellItems = (
 			initialSelectionRect,
 			{ formatMessage },
 			getEditorContainerWidth,
+			api,
 			editorAnalyticsAPI,
 			isTableScalingEnabled,
 			isCellBackgroundDuplicated,
@@ -690,6 +699,7 @@ const getCellItems = (
 export const getDistributeConfig =
 	(
 		getEditorContainerWidth: GetEditorContainerWidth,
+		api: PluginInjectionAPI | undefined | null,
 		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
@@ -712,7 +722,7 @@ export const getDistributeConfig =
 		);
 
 		if (newResizeStateWithAnalytics) {
-			distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
+			distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(
 				INPUT_METHOD.FLOATING_TB,
 				newResizeStateWithAnalytics,
 			)(state, dispatch);
@@ -728,6 +738,7 @@ const getColumnSettingItems = (
 	editorView: EditorView | undefined | null,
 	{ formatMessage }: ToolbarMenuContext,
 	getEditorContainerWidth: GetEditorContainerWidth,
+	api: PluginInjectionAPI | undefined | null,
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
@@ -760,6 +771,7 @@ const getColumnSettingItems = (
 			onClick: (state, dispatch, view) =>
 				getDistributeConfig(
 					getEditorContainerWidth,
+					api,
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					isTableFixedColumnWidthsOptionEnabled,

package/src/transforms/column-width.ts

@@ -16,6 +16,7 @@ import {
 import { isMinCellWidthTable } from '../pm-plugins/table-resizing/utils/colgroup';
 import { getResizeState } from '../pm-plugins/table-resizing/utils/resize-state';
 import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
+import type { PluginInjectionAPI } from '../types';
 
 /**
  * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
@@ -25,7 +26,13 @@ import { scaleTableTo } from '../pm-plugins/table-resizing/utils/scale-table';
  * @returns
  */
 export const updateColumnWidths =
-	(resizeState: ResizeState, table: PMNode, start: number) =>
+	(
+		resizeState: ResizeState,
+		table: PMNode,
+		start: number,
+		// TODO: ED-24636 To be used in a follow up change
+		_api: PluginInjectionAPI | undefined | null,
+	) =>
 	(tr: Transaction): Transaction => {
 		const map = TableMap.get(table);
 		const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
@@ -107,6 +114,7 @@ export const rescaleColumns =
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
+		api: PluginInjectionAPI | undefined | null,
 	) =>
 	(table: ContentNodeWithPos, view: EditorView | undefined) =>
 	(tr: Transaction): Transaction => {
@@ -195,7 +203,7 @@ export const rescaleColumns =
 				tableWidth: previousTableInfo.width,
 				overflow: wasTableInOverflow,
 			};
-			return updateColumnWidths(minWidthResizeState, table.node, table.start)(tr);
+			return updateColumnWidths(minWidthResizeState, table.node, table.start, api)(tr);
 		}
 
 		let resizeState = getResizeState({
@@ -219,5 +227,5 @@ export const rescaleColumns =
 			resizeState = scaleTableTo(resizeState, previousTableInfo.possibleMaxWidth);
 		}
 
-		return updateColumnWidths(resizeState, table.node, table.start)(tr);
+		return updateColumnWidths(resizeState, table.node, table.start, api)(tr);
 	};

package/src/transforms/delete-columns.ts

@@ -10,6 +10,7 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
 import { META_KEYS } from '../pm-plugins/table-analytics';
+import type { PluginInjectionAPI } from '../types';
 
 import { rescaleColumns } from './column-width';
 import { splitCellsInColumns } from './split';
@@ -243,6 +244,7 @@ export const deleteColumns =
 	(
 		rect: Rect,
 		allowCustomStep: boolean,
+		api: PluginInjectionAPI | undefined | null,
 		view?: EditorView,
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
@@ -265,6 +267,7 @@ export const deleteColumns =
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
+				api,
 			)(
 				table,
 				view,

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -72,6 +72,7 @@ import { pluginKey as tablePluginKey } from '../../pm-plugins/plugin-key';
 import { getNewResizeStateFromSelectedColumns } from '../../pm-plugins/table-resizing/utils/resize-state';
 import { canMergeCells } from '../../transforms';
 import { TableCssClassName as ClassName } from '../../types';
+import type { PluginInjectionAPI } from '../../types';
 import {
 	getMergedCellsPositions,
 	getSelectedColumnIndexes,
@@ -97,6 +98,7 @@ export interface Props {
 	allowBackgroundColor?: boolean;
 	boundariesElement?: HTMLElement;
 	offset?: Array<number>;
+	api: PluginInjectionAPI | undefined | null;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	getEditorContainerWidth: GetEditorContainerWidth;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
@@ -722,7 +724,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				);
 
 				if (newResizeStateWithAnalytics) {
-					distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
+					distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, this.props.api)(
 						INPUT_METHOD.CONTEXT_MENU,
 						newResizeStateWithAnalytics,
 					)(state, dispatch);
@@ -738,6 +740,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				break;
 			case 'insert_column':
 				insertColumnWithAnalytics(
+					this.props.api,
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					tableDuplicateCellColouring,
@@ -759,6 +762,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			case 'delete_column':
 				deleteColumnsWithAnalytics(
 					editorAnalyticsAPI,
+					this.props.api,
 					isTableScalingEnabled,
 					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,

package/src/ui/FloatingContextualMenu/index.tsx

@@ -21,7 +21,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { getPluginState } from '../../pm-plugins/plugin-factory';
-import type { PluginConfig } from '../../types';
+import type { PluginConfig, PluginInjectionAPI } from '../../types';
 import {
 	contextualMenuDropdownWidth,
 	contextualMenuDropdownWidthDnD,
@@ -36,6 +36,7 @@ export interface Props {
 	editorView: EditorView;
 	isOpen: boolean;
 	getEditorContainerWidth: GetEditorContainerWidth;
+	api: PluginInjectionAPI | undefined | null;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
 	targetCellPosition?: number;
 	mountPoint?: HTMLElement;
@@ -59,6 +60,7 @@ const FloatingContextualMenu = ({
 	getEditorFeatureFlags,
 	isCellMenuOpenByKeyboard,
 	isCommentEditor,
+	api,
 }: Props) => {
 	// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
 	const { targetCellPosition, isDragAndDropEnabled } = getPluginState(editorView.state);
@@ -117,6 +119,7 @@ const FloatingContextualMenu = ({
 					getEditorFeatureFlags={getEditorFeatureFlags}
 					isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
 					isCommentEditor={isCommentEditor}
+					api={api}
 				/>
 			</div>
 		</Popup>

package/src/ui/FloatingDeleteButton/index.tsx

@@ -18,7 +18,7 @@ import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { TableDirection } from '../../types';
+import type { PluginInjectionAPI, TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
 	getColumnDeleteButtonParams,
@@ -35,6 +35,7 @@ import type { CellSelectionType } from './types';
 export interface Props {
 	editorView: EditorView;
 	selection: Selection;
+	api: PluginInjectionAPI | undefined | null;
 	tableRef?: HTMLTableElement;
 	mountPoint?: HTMLElement;
 	boundariesElement?: HTMLElement;
@@ -257,7 +258,7 @@ class FloatingDeleteButton extends Component<Props, State> {
 		if (rect) {
 			switch (this.state.selectionType) {
 				case 'column': {
-					deleteColumnsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.BUTTON, rect)(
+					deleteColumnsWithAnalytics(editorAnalyticsAPI, this.props.api)(INPUT_METHOD.BUTTON, rect)(
 						state,
 						dispatch,
 						this.props.editorView,

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -55,7 +55,7 @@ import {
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
-import type { PluginConfig, TableDirection } from '../../types';
+import type { PluginConfig, PluginInjectionAPI, TableDirection } from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
 	checkIfHeaderColumnEnabled,
@@ -86,6 +86,7 @@ type DragMenuProps = {
 	targetCellPosition?: number;
 	pluginConfig?: PluginConfig;
 	getEditorContainerWidth: GetEditorContainerWidth;
+	api: PluginInjectionAPI | undefined | null;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	fitWidth?: number;
 	fitHeight?: number;
@@ -270,6 +271,7 @@ export const DragMenu = React.memo(
 		tableNode,
 		targetCellPosition,
 		getEditorContainerWidth,
+		api,
 		editorAnalyticsAPI,
 		pluginConfig,
 		intl: { formatMessage },
@@ -303,6 +305,7 @@ export const DragMenu = React.memo(
 			getEditorContainerWidth,
 			hasMergedCellsInTable,
 			editorView,
+			api,
 			tableMap,
 			index,
 			targetCellPosition,

package/src/ui/FloatingDragMenu/index.tsx

@@ -14,7 +14,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { PluginConfig, TableDirection } from '../../types';
+import type { PluginConfig, PluginInjectionAPI, TableDirection } from '../../types';
 import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 
 import DragMenu from './DragMenu';
@@ -31,6 +31,7 @@ export interface Props {
 	index?: number;
 	targetCellPosition?: number;
 	getEditorContainerWidth: GetEditorContainerWidth;
+	api: PluginInjectionAPI | undefined | null;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	stickyHeaders?: RowStickyState;
 	pluginConfig?: PluginConfig;
@@ -59,6 +60,7 @@ const FloatingDragMenu = ({
 	isTableScalingEnabled,
 	getEditorFeatureFlags,
 	ariaNotifyPlugin,
+	api,
 }: Props) => {
 	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
 		return null;
@@ -127,6 +129,7 @@ const FloatingDragMenu = ({
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 				tableSortColumnReorder={tableSortColumnReorder}
 				ariaNotifyPlugin={ariaNotifyPlugin}
+				api={api}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingInsertButton/index.tsx

@@ -29,6 +29,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
 import { TableCssClassName as ClassName } from '../../types';
+import type { PluginInjectionAPI } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
 import getPopupOptions from './getPopupOptions';
@@ -49,6 +50,7 @@ export interface Props {
 	boundariesElement?: HTMLElement;
 	scrollableElement?: HTMLElement;
 	hasStickyHeaders?: boolean;
+	api: PluginInjectionAPI | undefined | null;
 	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 	editorAnalyticsAPI?: EditorAnalyticsAPI;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
@@ -280,6 +282,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 
 			const { state, dispatch } = editorView;
 			insertColumnWithAnalytics(
+				this.props.api,
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
 				tableDuplicateCellColouring,

package/src/utils/drag-menu.ts

@@ -49,7 +49,7 @@ import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-wi
 import { getPluginState as getTablePluginState } from '../pm-plugins/plugin-factory';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
-import type { DraggableData, DraggableType, TableDirection } from '../types';
+import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 
 import {
@@ -139,6 +139,7 @@ export const getDragMenuConfig = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	hasMergedCellsInTable: boolean,
 	editorView: EditorView,
+	api: PluginInjectionAPI | undefined | null,
 	tableMap?: TableMap,
 	index?: number,
 	targetCellPosition?: number,
@@ -275,6 +276,7 @@ export const getDragMenuConfig = (
 					)(state, dispatch);
 				} else {
 					insertColumnWithAnalytics(
+						api,
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						tableDuplicateCellColouring,
@@ -304,7 +306,7 @@ export const getDragMenuConfig = (
 							);
 
 							if (newResizeState) {
-								distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
+								distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI, api)(
 									INPUT_METHOD.TABLE_CONTEXT_MENU,
 									newResizeState,
 								)(state, dispatch);
@@ -343,6 +345,7 @@ export const getDragMenuConfig = (
 				} else {
 					deleteColumnsWithAnalytics(
 						editorAnalyticsAPI,
+						api,
 						isTableScalingEnabled,
 						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,