@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/pm-plugins/commands/toggle.ts

@@ -1,109 +0,0 @@
-//#region Imports
-
-import type { TableLayout } from '@atlaskit/adf-schema';
-import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
-import type { Command } from '@atlaskit/editor-common/types';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
-
-import { createCommand } from '../plugin-factory';
-import { META_KEYS } from '../table-analytics';
-//#endregion
-
-// #region Utils
-/**
- * Table layout toggle logic
- * default -> wide -> full-width -> default
- */
-export const getNextLayout = (currentLayout: TableLayout) => {
-	switch (currentLayout) {
-		case 'default':
-			return 'wide';
-		case 'wide':
-			return 'full-width';
-		case 'full-width':
-			return 'default';
-		default:
-			return 'default';
-	}
-};
-// #endregion
-
-// #region Actions
-export const toggleHeaderRow: Command = (state, dispatch): boolean =>
-	toggleHeader('row')(state, (tr) =>
-		createCommand({ type: 'TOGGLE_HEADER_ROW' }, () => tr.setMeta('scrollIntoView', false))(
-			state,
-			dispatch,
-		),
-	);
-
-export const toggleHeaderColumn: Command = (state, dispatch): boolean =>
-	toggleHeader('column')(state, (tr) =>
-		createCommand({ type: 'TOGGLE_HEADER_COLUMN' }, () => tr.setMeta('scrollIntoView', false))(
-			state,
-			dispatch,
-		),
-	);
-
-export const toggleNumberColumn: Command = (state, dispatch) => {
-	const { tr } = state;
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const { node, pos } = findTable(state.selection)!;
-	const isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
-
-	tr.setNodeMarkup(pos, state.schema.nodes.table, {
-		...node.attrs,
-		isNumberColumnEnabled: !isNumberedColumnEnabled,
-	});
-	tr.setMeta('scrollIntoView', false);
-
-	const tableOverflowChangeTriggerName = isNumberedColumnEnabled
-		? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN
-		: TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
-	tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-		name: tableOverflowChangeTriggerName,
-	});
-
-	if (dispatch) {
-		dispatch(tr);
-	}
-	return true;
-};
-
-export const toggleTableLayout: Command = (state, dispatch): boolean => {
-	const table = findTable(state.selection);
-	if (!table) {
-		return false;
-	}
-	const layout = getNextLayout(table.node.attrs.layout);
-
-	return createCommand(
-		{
-			type: 'SET_TABLE_LAYOUT',
-			data: {
-				layout,
-			},
-		},
-		(tr: Transaction) => {
-			tr.setNodeMarkup(table.pos, state.schema.nodes.table, {
-				...table.node.attrs,
-				layout,
-			});
-			tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-				name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED,
-			});
-			return tr.setMeta('scrollIntoView', false);
-		},
-	)(state, dispatch);
-};
-
-export const toggleContextualMenu = () =>
-	createCommand(
-		{
-			type: 'TOGGLE_CONTEXTUAL_MENU',
-		},
-		(tr) => tr.setMeta('addToHistory', false),
-	);
-// #endregion

package/src/pm-plugins/create-plugin-config.ts

@@ -1,17 +0,0 @@
-import type { PermittedLayoutsDescriptor, PluginConfig } from '../types';
-
-export const pluginConfig = (config: PluginConfig = {}) => {
-	return config.advanced
-		? {
-				allowBackgroundColor: true,
-				allowColumnResizing: true,
-				allowHeaderColumn: true,
-				allowHeaderRow: true,
-				allowMergeCells: true,
-				allowNumberColumn: true,
-				permittedLayouts: 'all' as PermittedLayoutsDescriptor,
-				allowControls: true,
-				...config,
-			}
-		: config;
-};

package/src/pm-plugins/decorations/plugin.ts

@@ -1,107 +0,0 @@
-import { insideTable } from '@atlaskit/editor-common/core-utils';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type {
-	EditorState,
-	// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-	ReadonlyTransaction,
-	Transaction,
-} from '@atlaskit/editor-prosemirror/state';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-import { pluginKey as tablePluginKey } from '../plugin-key';
-import { pluginKey as tableWidthPluginKey } from '../table-width';
-
-import {
-	buildColumnControlsDecorations,
-	maybeUpdateColumnControlsSelectedDecoration,
-} from './utils/column-controls';
-
-export const pluginKey = new PluginKey('tableDecorationsPlugin');
-
-export const getDecorations = (state: EditorState): DecorationSet => pluginKey.getState(state);
-
-export const handleDocOrSelectionChanged = (
-	tr: Transaction | ReadonlyTransaction,
-	decorationSet: DecorationSet,
-	oldState: EditorState,
-	newState: EditorState,
-): DecorationSet => {
-	const isResizing = tableWidthPluginKey.getState(newState)?.resizing;
-	const wasResizing = tableWidthPluginKey.getState(oldState)?.resizing;
-	const {
-		isDragAndDropEnabled = false,
-		isInDanger,
-		isTableHovered,
-	} = tablePluginKey.getState(newState) || {};
-
-	const changedResizing = isResizing !== wasResizing;
-
-	// Remove column controls when resizing and don't add column decoration controls when DnD enabled
-	if (isResizing) {
-		return DecorationSet.empty;
-	} else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
-		return buildColumnControlsDecorations({
-			decorationSet,
-			tr,
-			options: {
-				isDragAndDropEnabled,
-			},
-		});
-	} else if (tr.selectionSet) {
-		const isTransactionFromMouseClick = !tr.docChanged && tr.selectionSet && tr.getMeta('pointer');
-		if (isTransactionFromMouseClick || oldState.selection instanceof CellSelection) {
-			return maybeUpdateColumnControlsSelectedDecoration({
-				decorationSet,
-				tr,
-			});
-		}
-		// We're exiting a table with an existing decorations so we should clean it up
-		if (
-			(isInDanger || isTableHovered) &&
-			(!insideTable(newState) ||
-				findTable(newState.selection)?.node !== findTable(oldState.selection)?.node)
-		) {
-			return buildColumnControlsDecorations({
-				decorationSet,
-				tr,
-				options: {
-					isDragAndDropEnabled,
-				},
-			});
-		}
-	}
-
-	return decorationSet;
-};
-
-export const createPlugin = () => {
-	return new SafePlugin({
-		state: {
-			init: () => DecorationSet.empty,
-
-			apply: (tr, decorationSet, oldState, newState) => {
-				let pluginState = decorationSet;
-				// main table plugin --->
-				const meta = tr.getMeta(tablePluginKey);
-
-				if (meta && meta.data && meta.data.decorationSet) {
-					pluginState = meta.data.decorationSet;
-				}
-
-				if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
-					pluginState = pluginState.map(tr.mapping, tr.doc);
-					return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
-				}
-
-				return pluginState;
-			},
-		},
-		key: pluginKey,
-		props: {
-			decorations: (state) => getDecorations(state),
-		},
-	});
-};

package/src/pm-plugins/decorations/utils/column-controls.ts

@@ -1,91 +0,0 @@
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-import { TableDecorations } from '../../../types';
-import {
-	createColumnControlsDecoration,
-	createColumnSelectedDecoration,
-	findColumnControlSelectedDecoration,
-	findControlsHoverDecoration,
-	updateDecorations,
-} from '../../utils/decoration';
-
-import { composeDecorations } from './compose-decorations';
-import type { BuildDecorationTransformerParams, DecorationTransformer } from './types';
-
-const isColumnSelected = (tr: Transaction | ReadonlyTransaction): boolean =>
-	tr.selection instanceof CellSelection && tr.selection.isColSelection();
-
-// @see: https://product-fabric.atlassian.net/browse/ED-3796
-const removeControlsHoverDecoration: DecorationTransformer = ({ decorationSet }) =>
-	decorationSet.remove(findControlsHoverDecoration(decorationSet));
-
-const maybeUpdateColumnSelectedDecoration: DecorationTransformer = ({ decorationSet, tr }) => {
-	if (!isColumnSelected(tr)) {
-		return decorationSet;
-	}
-
-	return updateDecorations(
-		tr.doc,
-		decorationSet,
-		createColumnSelectedDecoration(tr),
-		TableDecorations.COLUMN_SELECTED,
-	);
-};
-
-const maybeUpdateColumnControlsDecoration: DecorationTransformer = ({ decorationSet, tr }) => {
-	const table = findTable(tr.selection);
-
-	if (!table) {
-		return decorationSet;
-	}
-
-	return updateDecorations(
-		tr.doc,
-		decorationSet,
-		createColumnControlsDecoration(tr.selection),
-		TableDecorations.COLUMN_CONTROLS_DECORATIONS,
-	);
-};
-
-// @see: https://product-fabric.atlassian.net/browse/ED-7304
-const removeColumnControlsSelectedDecoration: DecorationTransformer = ({ decorationSet }) =>
-	decorationSet.remove(findColumnControlSelectedDecoration(decorationSet));
-
-const hasColumnSelectedDecorations = (decorationSet: DecorationSet): boolean =>
-	!!findColumnControlSelectedDecoration(decorationSet).length;
-
-export const maybeUpdateColumnControlsSelectedDecoration: DecorationTransformer = ({
-	decorationSet,
-	tr,
-}) => {
-	if (!hasColumnSelectedDecorations(decorationSet)) {
-		return decorationSet;
-	}
-
-	return removeColumnControlsSelectedDecoration({ decorationSet, tr });
-};
-
-export const buildColumnControlsDecorations = ({
-	decorationSet,
-	tr,
-	options,
-}: BuildDecorationTransformerParams): DecorationSet => {
-	if (options.isDragAndDropEnabled) {
-		return composeDecorations([
-			removeColumnControlsSelectedDecoration,
-			removeControlsHoverDecoration,
-			maybeUpdateColumnSelectedDecoration,
-		])({ decorationSet, tr });
-	}
-
-	return composeDecorations([
-		removeColumnControlsSelectedDecoration,
-		removeControlsHoverDecoration,
-		maybeUpdateColumnSelectedDecoration,
-		maybeUpdateColumnControlsDecoration,
-	])({ decorationSet, tr });
-};

package/src/pm-plugins/decorations/utils/column-resizing.ts

@@ -1,71 +0,0 @@
-import type { IntlShape } from 'react-intl-next';
-
-import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import { TableDecorations } from '../../../types';
-import { createResizeHandleDecoration, updateDecorations } from '../../utils/decoration';
-
-import { composeDecorations } from './compose-decorations';
-import type { DecorationTransformer } from './types';
-
-const emptyDecorations = [[], []];
-
-const updateColumnResizeHandle =
-	(columnResizesDecorations: Decoration[]): DecorationTransformer =>
-	({ decorationSet, tr }) =>
-		updateDecorations(
-			tr.doc,
-			decorationSet,
-			columnResizesDecorations,
-			TableDecorations.COLUMN_RESIZING_HANDLE_WIDGET,
-		);
-
-const updateLastCellElement =
-	(lastCellElementsDecorations: Decoration[]): DecorationTransformer =>
-	({ decorationSet, tr }) =>
-		updateDecorations(
-			tr.doc,
-			decorationSet,
-			lastCellElementsDecorations,
-			TableDecorations.LAST_CELL_ELEMENT,
-		);
-
-export const buildColumnResizingDecorations =
-	(
-		rowEndIndex: number,
-		columnEndIndex: number,
-		includeTooltip: boolean,
-		getIntl: () => IntlShape,
-		nodeViewPortalProviderAPI: PortalProviderAPI,
-	): DecorationTransformer =>
-	({ tr, decorationSet }): DecorationSet => {
-		const [columnResizesDecorations, lastCellElementsDecorations] =
-			columnEndIndex < 0
-				? emptyDecorations
-				: createResizeHandleDecoration(
-						tr,
-						rowEndIndex,
-						{
-							right: columnEndIndex,
-						},
-						includeTooltip,
-						getIntl,
-						nodeViewPortalProviderAPI,
-					);
-
-		return composeDecorations([
-			updateColumnResizeHandle(columnResizesDecorations),
-			updateLastCellElement(lastCellElementsDecorations),
-		])({ decorationSet, tr });
-	};
-
-export const clearColumnResizingDecorations =
-	(): DecorationTransformer =>
-	({ tr, decorationSet }): DecorationSet => {
-		const [columnResizesDecorations, lastCellElementsDecorations] = emptyDecorations;
-		return composeDecorations([
-			updateColumnResizeHandle(columnResizesDecorations),
-			updateLastCellElement(lastCellElementsDecorations),
-		])({ decorationSet, tr });
-	};

package/src/pm-plugins/decorations/utils/compose-decorations.ts

@@ -1,9 +0,0 @@
-import type { DecorationTransformer } from './types';
-
-export const composeDecorations =
-	(transformers: Array<DecorationTransformer>): DecorationTransformer =>
-	({ decorationSet, tr }) =>
-		transformers.reduce(
-			(decorationSet, transform) => transform({ decorationSet, tr }),
-			decorationSet,
-		);

package/src/pm-plugins/decorations/utils/types.ts

@@ -1,16 +0,0 @@
-// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
-import type { ReadonlyTransaction, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-export type DecorationTransformer = (params: DecorationTransformerParams) => DecorationSet;
-
-type DecorationTransformerParams = {
-	decorationSet: DecorationSet;
-	tr: Transaction | ReadonlyTransaction;
-};
-
-export type BuildDecorationTransformerParams = DecorationTransformerParams & {
-	options: {
-		isDragAndDropEnabled: boolean;
-	};
-};

package/src/pm-plugins/default-table-selection.ts

@@ -1,14 +0,0 @@
-export const defaultTableSelection = {
-	hoveredColumns: [],
-	hoveredRows: [],
-};
-
-/**
- * Creating a separate object for hoveredCell so it doesn't get defaulted when `handleDocOrSelectionChanged` runs.
- *
- * It is safe to persist this value as it gets removed when the mouse cursor leaves the table, so no need to remove it
- * when doc changes.
- */
-export const defaultHoveredCell = {
-	hoveredCell: { rowIndex: undefined, colIndex: undefined },
-};

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

@@ -1,48 +0,0 @@
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import type { TableDirection } from '../../types';
-
-import type { DropTargetType } from './consts';
-
-interface DragAndDropAction<T, D> {
-	type: T;
-	data: D;
-}
-
-export const DragAndDropActionType = {
-	SET_DROP_TARGET: 'SET_DROP_TARGET',
-	CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
-	TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
-} as const;
-
-type DragAndDropSetDropTargetAction = DragAndDropAction<
-	typeof DragAndDropActionType.SET_DROP_TARGET,
-	{
-		type: DropTargetType;
-		index: number;
-		decorationSet: DecorationSet;
-	}
->;
-
-type DragAndDropClearDropTargetAction = DragAndDropAction<
-	typeof DragAndDropActionType.CLEAR_DROP_TARGET,
-	{
-		decorationSet: DecorationSet;
-	}
->;
-
-type DragAndDropToggleDragMenuAction = DragAndDropAction<
-	typeof DragAndDropActionType.TOGGLE_DRAG_MENU,
-	{
-		isDragMenuOpen: boolean;
-		direction: TableDirection;
-		index: number;
-		isKeyboardModeActive: boolean;
-	}
->;
-
-// NOTE: This should be a Union of all possible actions
-export type DragAndDropPluginAction =
-	| DragAndDropSetDropTargetAction
-	| DragAndDropClearDropTargetAction
-	| DragAndDropToggleDragMenuAction;