@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

package/src/pm-plugins/drag-and-drop/commands-with-analytics.ts

@@ -1,222 +0,0 @@
-import { type IntlShape } from 'react-intl-next/src/types';
-
-import {
-	ACTION_SUBJECT,
-	EVENT_TYPE,
-	INPUT_METHOD,
-	TABLE_ACTION,
-	TABLE_STATUS,
-} from '@atlaskit/editor-common/analytics';
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
-import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { findCellRectClosestToPos, getSelectionRect } from '@atlaskit/editor-tables/utils';
-
-import type { DraggableData, DraggableType } from '../../types';
-import { getSelectedTableInfo, withEditorAnalyticsAPI } from '../utils/analytics';
-import { canMove, getTargetIndex } from '../utils/drag-menu';
-import { getSelectedColumnIndexes, getSelectedRowIndexes } from '../utils/selection';
-
-import { clearDropTarget, cloneSource, moveSource } from './commands';
-
-export const clearDropTargetWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
-	(
-		inputMethod: INPUT_METHOD.TABLE_CONTEXT_MENU | INPUT_METHOD.DRAG_AND_DROP,
-		sourceType: DraggableType,
-		sourceIndexes: number[] | undefined,
-		status: TABLE_STATUS.CANCELLED | TABLE_STATUS.INVALID,
-		tr?: Transaction,
-	) => {
-		return withEditorAnalyticsAPI(({ selection }: EditorState) => {
-			const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
-			return {
-				action: sourceType === 'table-row' ? TABLE_ACTION.MOVED_ROW : TABLE_ACTION.MOVED_COLUMN,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				actionSubjectId: null,
-				attributes: {
-					inputMethod,
-					count: sourceIndexes?.length ?? 0,
-					distance: 0,
-					status,
-					totalRowCount,
-					totalColumnCount,
-				},
-				eventType: EVENT_TYPE.TRACK,
-			};
-		})(editorAnalyticsAPI)((state, dispatch) => {
-			if (dispatch) {
-				clearDropTarget(tr)(state, dispatch);
-			}
-			return true;
-		});
-	};
-
-export const moveSourceWithAnalytics =
-	(
-		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void,
-		getIntl?: () => IntlShape,
-	) =>
-	(
-		inputMethod:
-			| INPUT_METHOD.TABLE_CONTEXT_MENU
-			| INPUT_METHOD.DRAG_AND_DROP
-			| INPUT_METHOD.SHORTCUT,
-		sourceType: DraggableType,
-		sourceIndexes: number[],
-		targetIndex: number,
-		tr?: Transaction,
-	) => {
-		return withEditorAnalyticsAPI(({ selection }: EditorState) => {
-			const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
-			const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
-			return {
-				action: sourceType === 'table-row' ? TABLE_ACTION.MOVED_ROW : TABLE_ACTION.MOVED_COLUMN,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				actionSubjectId: null,
-				attributes: {
-					inputMethod,
-					count: sourceIndexes.length,
-					// This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
-					// of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-					distance: Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) * direction,
-					// If a drop doesn't actually change anything then we're going to mark the event as cancelled.
-					status: sourceIndexes.includes(targetIndex)
-						? TABLE_STATUS.CANCELLED
-						: TABLE_STATUS.SUCCESS,
-					totalRowCount,
-					totalColumnCount,
-				},
-				eventType: EVENT_TYPE.TRACK,
-			};
-		})(editorAnalyticsAPI)((state, dispatch) => {
-			if (dispatch) {
-				moveSource(sourceType, sourceIndexes, targetIndex, tr)(state, dispatch);
-				// Only considering single row/column movement for screen reader as only single row/column selection is supported via keyboard atm.
-				if (
-					(inputMethod === INPUT_METHOD.TABLE_CONTEXT_MENU || INPUT_METHOD.SHORTCUT) &&
-					sourceIndexes.length === 1 &&
-					ariaNotify &&
-					getIntl
-				) {
-					const direction = sourceIndexes[0] > targetIndex ? -1 : 1; // -1 for left/up , 1 for right/down
-					const { totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
-					ariaNotify(
-						getIntl().formatMessage(
-							sourceType === 'table-row'
-								? direction > 0
-									? messages.rowMovedDown
-									: messages.rowMovedUp
-								: direction > 0
-									? messages.columnMovedRight
-									: messages.columnMovedLeft,
-							{
-								index: targetIndex + 1,
-								total: sourceType === 'table-row' ? totalRowCount : totalColumnCount,
-							},
-						),
-						{
-							priority: 'important',
-						},
-					);
-				}
-			}
-			return true;
-		});
-	};
-
-export const moveSourceWithAnalyticsViaShortcut =
-	(
-		editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-		ariaNotify?: (message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void,
-		getIntl?: () => IntlShape,
-	) =>
-	(sourceType: DraggableType, direction: DraggableData['direction']): Command =>
-	(state, dispatch) => {
-		const { selection } = state;
-		const isCellSelection = selection instanceof CellSelection;
-		const selectionRect = isCellSelection
-			? getSelectionRect(selection)
-			: findCellRectClosestToPos(selection.$from);
-
-		if (!selectionRect) {
-			return false;
-		}
-
-		const isRow = sourceType === 'table-row';
-		const selectedIndexes = isRow
-			? getSelectedRowIndexes(selectionRect)
-			: getSelectedColumnIndexes(selectionRect);
-		if (selectedIndexes.length === 0) {
-			return false;
-		}
-
-		const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
-		if (
-			!canMove(
-				sourceType,
-				direction,
-				isRow ? totalRowCount : totalColumnCount,
-				selection,
-				selectionRect,
-			)
-		) {
-			return false;
-		}
-
-		const targetIndex = getTargetIndex(selectedIndexes, direction);
-
-		return moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotify, getIntl)(
-			INPUT_METHOD.SHORTCUT,
-			sourceType,
-			selectedIndexes,
-			targetIndex,
-		)(state, dispatch);
-	};
-
-export const cloneSourceWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
-	(
-		inputMethod:
-			| INPUT_METHOD.TABLE_CONTEXT_MENU
-			| INPUT_METHOD.DRAG_AND_DROP
-			| INPUT_METHOD.SHORTCUT,
-		sourceType: DraggableType,
-		sourceIndexes: number[],
-		targetIndex: number,
-		targetDirection: 'start' | 'end',
-		tr?: Transaction,
-	) => {
-		return withEditorAnalyticsAPI(({ selection }: EditorState) => {
-			const direction = sourceIndexes[0] > targetIndex ? -1 : 1;
-			const { totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
-			return {
-				action: sourceType === 'table-row' ? TABLE_ACTION.CLONED_ROW : TABLE_ACTION.CLONED_COLUMN,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				actionSubjectId: null,
-				attributes: {
-					inputMethod,
-					count: sourceIndexes.length,
-					// This identifies the total amount of row/cols the move operation covered. The distance covered should be a representaion
-					// of the minimum distance. This will account for large selection being moved causing a large distance travelled value.
-					distance: Math.min(...sourceIndexes.map((v) => Math.abs(targetIndex - v))) * direction,
-					// If a drop doesn't actually change anything then we're going to mark the event as cancelled.
-					status: sourceIndexes.includes(targetIndex)
-						? TABLE_STATUS.CANCELLED
-						: TABLE_STATUS.SUCCESS,
-					totalRowCount,
-					totalColumnCount,
-				},
-				eventType: EVENT_TYPE.TRACK,
-			};
-		})(editorAnalyticsAPI)((state, dispatch) => {
-			if (dispatch) {
-				cloneSource(sourceType, sourceIndexes, targetIndex, targetDirection, tr)(state, dispatch);
-			}
-			return true;
-		});
-	};

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

@@ -1,194 +0,0 @@
-import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { Decoration } from '@atlaskit/editor-prosemirror/view';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { cloneColumn, cloneRow, moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
-
-import type { DraggableType, TableDirection } from '../../types';
-import { TableDecorations } from '../../types';
-import {
-	createColumnInsertLine,
-	createRowInsertLine,
-	updateDecorations,
-} from '../utils/decoration';
-
-import { DragAndDropActionType } from './actions';
-import { DropTargetType } from './consts';
-import { createCommand, getPluginState } from './plugin-factory';
-import { pluginKey } from './plugin-key';
-import type { TriggerType } from './types';
-
-// TODO: ED-26961 - This command is a placeholder example. Please replace this if required.
-const getDecorations = (state: EditorState): DecorationSet => {
-	return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
-};
-
-const updatePluginStateDecorations = (
-	state: EditorState,
-	decorations: Decoration[],
-	key: TableDecorations,
-): DecorationSet => updateDecorations(state.doc, getDecorations(state), decorations, key);
-
-export const setDropTarget = (
-	type: DropTargetType,
-	index: number,
-	hasMergedCells: boolean,
-	tr?: Transaction,
-) =>
-	createCommand(
-		(state) => {
-			const { dropTargetType, dropTargetIndex } = getPluginState(state);
-			if (dropTargetType === type && dropTargetIndex === index) {
-				return false;
-			}
-
-			let decorationSet = DecorationSet.empty;
-			if (type === 'column') {
-				decorationSet = updatePluginStateDecorations(
-					state,
-					createColumnInsertLine(index, state.selection, hasMergedCells),
-					TableDecorations.COLUMN_INSERT_LINE,
-				);
-			} else if (type === 'row') {
-				decorationSet = updatePluginStateDecorations(
-					state,
-					createRowInsertLine(index, state.selection, hasMergedCells),
-					TableDecorations.ROW_INSERT_LINE,
-				);
-			}
-			return {
-				type: DragAndDropActionType.SET_DROP_TARGET,
-				data: {
-					decorationSet,
-					type,
-					index,
-				},
-			};
-		},
-		(originalTr: Transaction) => (tr || originalTr).setMeta('addToHistory', false),
-	);
-
-export const clearDropTarget = (tr?: Transaction) =>
-	createCommand(
-		(state) => {
-			const { dropTargetType, dropTargetIndex } = getPluginState(state);
-			if (dropTargetType === DropTargetType.NONE && dropTargetIndex === 0) {
-				return false;
-			}
-
-			return {
-				type: DragAndDropActionType.CLEAR_DROP_TARGET,
-				data: {
-					decorationSet: DecorationSet.empty,
-				},
-			};
-		},
-		(originalTr: Transaction) => (tr || originalTr).setMeta('addToHistory', false),
-	);
-
-export const moveSource = (
-	sourceType: DraggableType,
-	sourceIndexes: number[],
-	targetIndex: number,
-	tr?: Transaction,
-) =>
-	createCommand(
-		(state) => {
-			return {
-				type: DragAndDropActionType.CLEAR_DROP_TARGET,
-				data: {
-					decorationSet: DecorationSet.empty,
-				},
-			};
-		},
-		(originalTr: Transaction, state) => {
-			const nextTr = tr || originalTr;
-			if (sourceIndexes.includes(targetIndex)) {
-				return nextTr.setMeta('addToHistory', false);
-			}
-			const move = sourceType === 'table-row' ? moveRow : moveColumn;
-			return move(state, sourceIndexes, targetIndex, {
-				selectAfterMove: true,
-			})(nextTr);
-		},
-	);
-
-export const toggleDragMenu = (
-	isDragMenuOpen: boolean | undefined,
-	direction?: TableDirection,
-	index?: number,
-	trigger: TriggerType = 'mouse',
-) =>
-	createCommand(
-		(state) => {
-			const {
-				isDragMenuOpen: previousOpenState,
-				dragMenuDirection: previousDragMenuDirection,
-				dragMenuIndex: previousDragMenuIndex,
-			} = getPluginState(state);
-
-			if (
-				previousOpenState === isDragMenuOpen &&
-				previousDragMenuDirection === direction &&
-				previousDragMenuIndex === index
-			) {
-				return false;
-			}
-
-			let updatedMenuOpenState;
-			if (isDragMenuOpen !== undefined) {
-				updatedMenuOpenState = isDragMenuOpen;
-			} else {
-				// menu open but menu direction changed, means user clicked on drag handle of different row/column
-				// menu open menu direction not changed, but index changed, means user clicked on drag handle of same row/column, different cells.
-				// 2 scenarios above , menu should remain open.
-				if (
-					(previousOpenState === true && previousDragMenuDirection !== direction) ||
-					(previousOpenState === true &&
-						previousDragMenuDirection === direction &&
-						previousDragMenuIndex !== index)
-				) {
-					updatedMenuOpenState = true;
-				} else {
-					updatedMenuOpenState = !previousOpenState;
-				}
-			}
-
-			return {
-				type: DragAndDropActionType.TOGGLE_DRAG_MENU,
-				data: {
-					isDragMenuOpen: updatedMenuOpenState,
-					direction: direction ?? previousDragMenuDirection,
-					index: index ?? previousDragMenuIndex,
-					isKeyboardModeActive: updatedMenuOpenState && trigger === 'keyboard',
-				},
-			};
-		},
-		(tr: Transaction) => {
-			return tr.setMeta('addToHistory', false);
-		},
-	);
-
-export const cloneSource = (
-	sourceType: DraggableType,
-	sourceIndexes: number[],
-	targetIndex: number,
-	targetDirection: 'start' | 'end',
-	tr?: Transaction,
-) =>
-	createCommand(
-		(state) => {
-			return {
-				type: DragAndDropActionType.CLEAR_DROP_TARGET,
-				data: {
-					decorationSet: DecorationSet.empty,
-				},
-			};
-		},
-		(originalTr: Transaction, state) => {
-			const nextTr = tr || originalTr;
-			const clone = sourceType === 'table-row' ? cloneRow : cloneColumn;
-			return clone(state, sourceIndexes, targetIndex, targetDirection, {
-				selectAfterClone: true,
-			})(nextTr);
-		},
-	);

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

@@ -1,7 +0,0 @@
-export const DropTargetType = {
-	NONE: 'none',
-	ROW: 'row',
-	COLUMN: 'column',
-} as const;
-
-export type DropTargetType = (typeof DropTargetType)[keyof typeof DropTargetType];

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

@@ -1,33 +0,0 @@
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-
-import { pluginKey as tablePluginKey } from '../plugin-key';
-
-import { pluginKey } from './plugin-key';
-import reducer from './reducer';
-
-export const { createPluginState, createCommand, getPluginState } = pluginFactory(
-	pluginKey,
-	reducer,
-	{
-		mapping: (tr, pluginState) => {
-			if (tr.docChanged) {
-				let decorationSet = pluginState.decorationSet;
-
-				const meta = tr.getMeta(tablePluginKey);
-				if (meta && meta.data && meta.data.decorationSet) {
-					decorationSet = meta.data.decorationSet;
-				}
-
-				if (decorationSet) {
-					decorationSet = decorationSet.map(tr.mapping, tr.doc);
-				}
-
-				return {
-					...pluginState,
-					...{ decorationSet },
-				};
-			}
-			return pluginState;
-		},
-	},
-);

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

@@ -1,5 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-import type { DragAndDropPluginState } from './types';
-
-export const pluginKey = new PluginKey<DragAndDropPluginState>('dragAndDropPlugin');