@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

package/src/nodeviews/toDOM.ts

@@ -1,244 +0,0 @@
-import kebabCase from 'lodash/kebabCase';
-
-import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
-import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-
-import {
-	generateColgroup,
-	generateColgroupFromNode,
-	getResizerMinWidth,
-} from '../pm-plugins/table-resizing/utils/colgroup';
-import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
-import {
-	getTableResizerContainerMaxWidthInCSS,
-	getTableResizerContainerForFullPageWidthInCSS,
-	getTableResizerItemWidthInCSS,
-} from '../pm-plugins/table-resizing/utils/misc';
-
-import { getAlignmentStyle } from './table-container-styles';
-
-type Config = {
-	allowColumnResizing: boolean;
-	tableResizingEnabled: boolean;
-	getEditorContainerWidth: GetEditorContainerWidth;
-	isNestingSupported?: boolean;
-	isTableScalingEnabled?: boolean;
-	shouldUseIncreasedScalingPercent?: boolean;
-	isCommentEditor?: boolean;
-	isChromelessEditor?: boolean;
-	isNested?: boolean;
-};
-export const tableNodeSpecWithFixedToDOM = (
-	config: Config,
-): NodeSpec & { toDOM: (node: PMNode) => DOMOutputSpec } => {
-	const tableNode = config.isNestingSupported ? tableWithNestedTable : table;
-
-	return {
-		...tableNode,
-		toDOM: (node: PMNode): DOMOutputSpec => {
-			const gutterPadding = () => {
-				if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
-					return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
-				} else {
-					return `${akEditorGutterPaddingDynamic() * 2}px`;
-				}
-			};
-
-			const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout))
-				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
-				.join(';');
-
-			const tableMinWidth = getResizerMinWidth(node);
-
-			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
-
-			const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
-
-			const attrs = {
-				'data-number-column': node.attrs.isNumberColumnEnabled,
-				'data-layout': node.attrs.layout,
-				'data-autosize': node.attrs.__autoSize,
-				'data-table-local-id': node.attrs.localId,
-				'data-table-width': node.attrs.width,
-			};
-
-			// This would be used for table scaling in colgroup CSS
-			// cqw, or px is well supported
-			const resizableTableWidth = expValEquals(
-				'platform_editor_tables_scaling_css',
-				'isEnabled',
-				true,
-			)
-				? isFullPageEditor
-					? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled)
-					: `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`
-				: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${node.attrs.width ?? '100%'})`;
-
-			let colgroup: DOMOutputSpec = '';
-
-			if (config.allowColumnResizing) {
-				if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
-					colgroup = [
-						'colgroup',
-						{},
-						...generateColgroupFromNode(
-							node,
-							config.isCommentEditor,
-							config.isChromelessEditor,
-							config.isNested,
-							config.isTableScalingEnabled,
-							config.shouldUseIncreasedScalingPercent,
-						),
-					];
-				} else {
-					colgroup = ['colgroup', {}, ...generateColgroup(node)];
-				}
-			}
-
-			// For Chromeless editor, and nested tables in full page editor
-			const tableContainerDiv = [
-				'div',
-				{
-					class: 'pm-table-container',
-					'data-number-column': node.attrs.isNumberColumnEnabled,
-					'data-layout': node.attrs.layout,
-					'data-testid': 'table-container',
-				},
-				[
-					'div',
-					{
-						class: 'pm-table-sticky-sentinel-top',
-						'data-testid': 'sticky-sentinel-top',
-					},
-				],
-				[
-					'div',
-					{
-						class: 'pm-table-row-controls-wrapper',
-					},
-					['div'],
-				],
-				[
-					'div',
-					{
-						class: 'pm-table-with-left-shadow',
-						style: 'visibility: hidden',
-					},
-				],
-				[
-					'div',
-					{
-						class: 'pm-table-wrapper',
-					},
-					[
-						'table',
-						attrs,
-						['span', { class: 'pm-table-shadow-sentinel-right' }],
-						['span', { class: 'pm-table-shadow-sentinel-left' }],
-						colgroup,
-						['tbody', 0],
-					],
-				],
-				[
-					'div',
-					{
-						class: 'pm-table-with-right-shadow',
-						style: 'visibility: hidden',
-					},
-				],
-				[
-					'div',
-					{
-						class: 'pm-table-sticky-sentinel-bottom',
-						'data-testid': 'sticky-sentinel-bottom',
-					},
-				],
-			];
-
-			if (
-				!config.tableResizingEnabled ||
-				(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested)
-			) {
-				return [
-					'div',
-					{
-						class: 'tableView-content-wrap',
-						'data-prosemirror-initial-toDOM-render': 'true',
-					},
-					tableContainerDiv,
-				];
-			}
-
-			const tableResizingDiv = [
-				'div',
-				{
-					'data-testid': 'table-alignment-container',
-					style: alignmentStyle,
-				},
-				[
-					'div',
-					{
-						class: 'pm-table-resizer-container',
-						style: convertToInlineCss({
-							'--ak-editor-table-gutter-padding': config.isTableScalingEnabled
-								? 'calc(var(--ak-editor--large-gutter-padding) * 2)'
-								: 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
-							'--ak-editor-table-width': resizableTableWidth,
-							width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
-								? `var(--ak-editor-table-width)`
-								: `min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute})`,
-						}),
-					},
-					[
-						'div',
-						{
-							class: 'resizer-item display-handle',
-							style: convertToInlineCss({
-								position: 'relative',
-								userSelect: 'auto',
-								boxSizing: 'border-box',
-								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
-								'--ak-editor-table-min-width': `${tableMinWidth}px`,
-								minWidth: 'var(--ak-editor-table-min-width)',
-								maxWidth: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
-									? getTableResizerContainerMaxWidthInCSS(
-											config.isCommentEditor,
-											config.isChromelessEditor,
-											config.isTableScalingEnabled,
-										)
-									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-								width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
-									? getTableResizerItemWidthInCSS(
-											node,
-											config.isCommentEditor,
-											config.isChromelessEditor,
-										)
-									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
-							}),
-						},
-						[
-							'span',
-							{
-								class: 'resizer-hover-zone',
-							},
-							tableContainerDiv,
-						],
-					],
-				],
-			];
-
-			return [
-				'div',
-				{
-					class: 'tableView-content-wrap',
-					'data-prosemirror-initial-toDOM-render': 'true',
-				},
-				tableResizingDiv,
-			];
-		},
-	};
-};

package/src/nodeviews/types.ts

@@ -1,36 +0,0 @@
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
-import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import type { PluginInjectionAPI } from '../types';
-
-export type TableOptions = {
-	isFullWidthModeEnabled?: boolean;
-	wasFullWidthModeEnabled?: boolean;
-	isDragAndDropEnabled?: boolean;
-	isTableScalingEnabled?: boolean;
-	isCommentEditor?: boolean;
-	isChromelessEditor?: boolean;
-	shouldUseIncreasedScalingPercent?: boolean;
-};
-
-export interface Props {
-	node: PmNode;
-	view: EditorView;
-	allowColumnResizing?: boolean;
-	allowTableResizing?: boolean;
-	allowTableAlignment?: boolean;
-	allowControls?: boolean;
-	cellMinWidth?: number;
-	portalProviderAPI: PortalProviderAPI;
-	eventDispatcher: EventDispatcher;
-	getPos: () => number | undefined;
-	options?: TableOptions;
-	getEditorContainerWidth: GetEditorContainerWidth;
-	getEditorFeatureFlags: GetEditorFeatureFlags;
-	dispatchAnalyticsEvent: DispatchAnalyticsEvent;
-	pluginInjectionApi?: PluginInjectionAPI;
-}

package/src/nodeviews/update-overflow-shadows.ts

@@ -1,11 +0,0 @@
-import { TableCssClassName as ClassName } from '../types';
-
-export const updateShadowListForStickyStyles = (heightStyle: string, shadows: HTMLCollection) => {
-	Array.from(shadows).forEach((shadow) => {
-		if (shadow.classList.contains(ClassName.TABLE_STICKY_SHADOW)) {
-			if (shadow instanceof HTMLElement && shadow.style.height !== heightStyle) {
-				shadow.style.height = heightStyle;
-			}
-		}
-	});
-};

package/src/pm-plugins/analytics/actions.ts

@@ -1,21 +0,0 @@
-import type { RowOrColumnMovedState } from './types';
-
-export enum AnalyticPluginTypes {
-	UpdateOverflowTriggerNameAction,
-	UpdateRowOrColumnMovedAction,
-	RemoveRowOrColumnMovedAction,
-	RemoveOverFlowTriggerNameAction,
-	UpdateRowOrColumnMovedAndOverflowTrigger,
-}
-
-type UpdateRowOrColumnMovedAction = {
-	type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction;
-	data: RowOrColumnMovedState;
-};
-
-type RemoveRowOrColumnMovedAction = {
-	type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction;
-	data: undefined;
-};
-
-export type AnalyticPluginAction = UpdateRowOrColumnMovedAction | RemoveRowOrColumnMovedAction;

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

@@ -1,47 +0,0 @@
-import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-
-import { AnalyticPluginTypes } from './actions';
-import { createCommand, getPluginState } from './plugin-factory';
-import { pluginKey } from './plugin-key';
-import type { ActionType, RowOrColumnMovedState } from './types';
-import { getMovedPayload } from './utils/moved-event';
-
-export const updateRowOrColumnMoved = (
-	nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
-	nextAction: ActionType,
-) =>
-	createCommand(
-		(state) => {
-			const { rowOrColumnMoved } = getPluginState(state);
-			const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
-
-			return {
-				type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
-				data,
-			};
-		},
-		(tr) => tr.setMeta('addToHistory', false),
-	);
-
-// --- transforms, prefer these over commands to avoid an extra 'dispatch'
-export const resetRowOrColumnMovedTransform = () => (tr: Transaction) => {
-	const payload = {
-		type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction,
-	};
-
-	return tr.setMeta(pluginKey, payload);
-};
-
-export const updateRowOrColumnMovedTransform =
-	(nextState: Omit<RowOrColumnMovedState, 'currentActions'>, nextAction: ActionType) =>
-	(state: EditorState, tr: Transaction) => {
-		const { rowOrColumnMoved } = getPluginState(state);
-		const data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
-
-		const payload = {
-			type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
-			data,
-		};
-
-		return tr.setMeta(pluginKey, payload);
-	};

package/src/pm-plugins/analytics/plugin-factory.ts

@@ -1,9 +0,0 @@
-import { pluginFactory } from '@atlaskit/editor-common/utils';
-
-import { pluginKey } from './plugin-key';
-import { reducer } from './reducer';
-
-export const { createPluginState, createCommand, getPluginState } = pluginFactory(
-	pluginKey,
-	reducer,
-);

package/src/pm-plugins/analytics/plugin-key.ts

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

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

@@ -1,80 +0,0 @@
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-
-import {
-	countCellsInSlice,
-	getTableElementMoveTypeBySlice,
-	getTableSelectionType,
-	isInsideFirstCellOfRowOrColumn,
-} from '../commands/misc';
-
-import { resetRowOrColumnMovedTransform, updateRowOrColumnMoved } from './commands';
-import { createPluginState } from './plugin-factory';
-import { pluginKey } from './plugin-key';
-import { defaultState } from './types';
-
-export const createPlugin = (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent) =>
-	new SafePlugin({
-		key: pluginKey,
-		state: createPluginState(dispatch, defaultState),
-		appendTransaction: (transactions, oldState, newState) => {
-			const tr = transactions.find((tr) =>
-				tr.getMeta(pluginKey)?.data?.currentActions?.includes('pasted'),
-			);
-
-			if (tr) {
-				const newTr = newState.tr;
-				dispatchAnalyticsEvent({
-					action: TABLE_ACTION.ROW_OR_COLUMN_MOVED,
-					actionSubject: ACTION_SUBJECT.TABLE,
-					actionSubjectId: null,
-					eventType: EVENT_TYPE.TRACK,
-					attributes: {
-						type: tr.getMeta(pluginKey)?.data?.type,
-					},
-				});
-				return resetRowOrColumnMovedTransform()(newTr);
-			}
-
-			return undefined;
-		},
-		props: {
-			handlePaste: ({ state, dispatch }, event, slice) => {
-				const { schema } = state;
-				const type = getTableElementMoveTypeBySlice(slice, state);
-
-				// if the selection wasn't in the first cell of a row or column, don't count it
-				if (!type || !isInsideFirstCellOfRowOrColumn(state.selection, type)) {
-					return;
-				}
-
-				const count = countCellsInSlice(slice, schema, type);
-
-				updateRowOrColumnMoved(
-					{
-						numberOfCells: count,
-						type,
-					},
-					'pasted',
-				)(state, dispatch);
-			},
-			transformCopied: (slice, { state, dispatch }) => {
-				const { schema } = state;
-
-				const type = getTableSelectionType(state.selection);
-				const count = countCellsInSlice(slice, schema, type);
-
-				updateRowOrColumnMoved(
-					{
-						numberOfCells: count,
-						type,
-					},
-					'copyOrCut',
-				)(state, dispatch);
-
-				return slice;
-			},
-		},
-	});

package/src/pm-plugins/analytics/reducer.ts

@@ -1,27 +0,0 @@
-import { AnalyticPluginTypes } from './actions';
-import type { AnalyticPluginAction } from './actions';
-import type { AnalyticPluginState } from './types';
-import { defaultState } from './types';
-
-export const reducer = (
-	state: AnalyticPluginState,
-	action: AnalyticPluginAction,
-): AnalyticPluginState => {
-	switch (action.type) {
-		case AnalyticPluginTypes.UpdateRowOrColumnMovedAction:
-			return {
-				...state,
-				rowOrColumnMoved: {
-					...state.rowOrColumnMoved,
-					...action.data,
-				},
-			};
-		case AnalyticPluginTypes.RemoveRowOrColumnMovedAction:
-			return {
-				...state,
-				rowOrColumnMoved: defaultState.rowOrColumnMoved,
-			};
-		default:
-			return state;
-	}
-};

package/src/pm-plugins/analytics/types.ts

@@ -1,20 +0,0 @@
-export type ActionType = 'none' | 'addRowOrColumn' | 'copyOrCut' | 'pasted';
-
-export type RowOrColumnMovedState = {
-	type?: 'row' | 'column';
-	/** used to confirm if same number of cells was copied and pasted */
-	numberOfCells?: number;
-	currentActions: Array<ActionType>;
-};
-
-export type AnalyticPluginState = {
-	rowOrColumnMoved: RowOrColumnMovedState;
-};
-
-export const defaultState = {
-	rowOrColumnMoved: {
-		type: undefined,
-		numberOfCells: undefined,
-		currentActions: [],
-	},
-} as AnalyticPluginState;

package/src/pm-plugins/analytics/utils/moved-event.ts

@@ -1,51 +0,0 @@
-import type { ActionType, RowOrColumnMovedState } from '../types';
-import { defaultState } from '../types';
-
-const getNextActionType = (
-	nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
-	nextAction: ActionType,
-	prevState?: RowOrColumnMovedState,
-) => {
-	if (nextAction === 'pasted') {
-		if (
-			prevState &&
-			prevState.currentActions.includes('copyOrCut') &&
-			prevState.currentActions.includes('addRowOrColumn') &&
-			prevState.numberOfCells === nextState.numberOfCells &&
-			prevState.type === nextState.type
-		) {
-			return 'pasted';
-		}
-		return 'none';
-	}
-	return nextAction;
-};
-
-export const getMovedPayload = (
-	nextState: Omit<RowOrColumnMovedState, 'currentActions'>,
-	nextAction: ActionType,
-	prevState: RowOrColumnMovedState,
-) => {
-	const nextActionType = getNextActionType(nextState, nextAction, prevState);
-
-	if (nextActionType === 'none') {
-		return defaultState.rowOrColumnMoved;
-	}
-
-	// a new workflow has started in the opposite axis (e.g. inserted a row, but copied a column) remove old state
-	if (prevState.type !== nextState.type) {
-		return {
-			currentActions: [nextActionType],
-			numberOfCells: nextState?.numberOfCells,
-			type: nextState.type,
-		};
-	}
-
-	return {
-		currentActions: prevState.currentActions.includes(nextActionType)
-			? prevState.currentActions
-			: [...prevState.currentActions, nextActionType],
-		numberOfCells: nextState?.numberOfCells || prevState.numberOfCells,
-		type: nextState?.type,
-	};
-};

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

@@ -1,43 +0,0 @@
-import type { Command } from '@atlaskit/editor-common/types';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { emptyCell, findCellClosestToPos, isSelectionType } from '@atlaskit/editor-tables/utils';
-
-export const clearMultipleCells =
-	(targetCellPosition?: number): Command =>
-	(state, dispatch) => {
-		let cursorPos: number | undefined;
-		let { tr } = state;
-
-		if (isSelectionType(tr.selection, 'cell')) {
-			// Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			const selection = tr.selection as any as CellSelection;
-			selection.forEachCell((_node, pos) => {
-				const $pos = tr.doc.resolve(tr.mapping.map(pos + 1));
-				// Ignored via go/ees005
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				tr = emptyCell(findCellClosestToPos($pos)!, state.schema)(tr);
-			});
-			cursorPos = selection.$headCell.pos;
-		} else if (targetCellPosition) {
-			// Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			const cell = findCellClosestToPos(tr.doc.resolve(targetCellPosition + 1))!;
-			tr = emptyCell(cell, state.schema)(tr);
-			cursorPos = cell.pos;
-		}
-		if (tr.docChanged && cursorPos) {
-			const $pos = tr.doc.resolve(tr.mapping.map(cursorPos));
-			const textSelection = Selection.findFrom($pos, 1, true);
-			if (textSelection) {
-				tr.setSelection(textSelection);
-			}
-
-			if (dispatch) {
-				dispatch(tr);
-			}
-			return true;
-		}
-		return false;
-	};

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

@@ -1,17 +0,0 @@
-import type { Command } from '@atlaskit/editor-common/types';
-
-import { collapseSelectedTable } from '../utils/collapse';
-
-export const wrapTableInExpand: Command = (state, dispatch) => {
-	const collapseTr = collapseSelectedTable(state.tr);
-
-	if (!collapseTr) {
-		return false;
-	}
-
-	if (dispatch) {
-		dispatch(collapseTr);
-	}
-
-	return true;
-};