@atlaskit/editor-plugin-table 12.2.6 → 12.3.0

package/src/pm-plugins/utils/snapping.ts

@@ -1,136 +0,0 @@
-import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import {
-	akEditorCalculatedWideLayoutWidth,
-	akEditorDefaultLayoutWidth,
-	akEditorFullWidthLayoutWidth,
-	akEditorGutterPaddingDynamic,
-	akEditorGutterPaddingReduced,
-	akEditorFullPageNarrowBreakout,
-} from '@atlaskit/editor-shared-styles';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-
-const numberOfLanesInDefaultLayoutWidth = 12;
-
-const calculateSubSnappingWidths = (totalLanes: number, totalWidth: number) =>
-	new Array(Math.round(totalLanes / 2) - 1)
-		.fill(totalWidth / totalLanes)
-		.map((v, i) => v * (i + 1) * 2);
-
-export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
-	...calculateSubSnappingWidths(
-		numberOfLanesInDefaultLayoutWidth,
-		akEditorDefaultLayoutWidth + lengthOffset,
-	),
-	akEditorDefaultLayoutWidth + lengthOffset,
-	akEditorCalculatedWideLayoutWidth + lengthOffset,
-	akEditorFullWidthLayoutWidth + lengthOffset,
-];
-
-export type GuidelineExcludeConfig = {
-	innerGuidelines: boolean;
-	breakoutPoints: boolean;
-};
-
-const getPadding = (editorContainerWith: number) => {
-	return editorContainerWith <= akEditorFullPageNarrowBreakout &&
-		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
-		? akEditorGutterPaddingReduced
-		: akEditorGutterPaddingDynamic();
-};
-
-// FF TablePreserve for calculateDefaultSnappings
-export const calculateDefaultTablePreserveSnappings = (
-	lengthOffset = 0,
-	editorContainerWith = akEditorFullWidthLayoutWidth,
-	exclude: GuidelineExcludeConfig = {
-		innerGuidelines: false,
-		breakoutPoints: false,
-	},
-) => {
-	const padding = getPadding(editorContainerWith);
-	const dynamicFullWidthLine =
-		editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth
-			? akEditorFullWidthLayoutWidth
-			: editorContainerWith - padding * 2;
-
-	const guides = [dynamicFullWidthLine - lengthOffset];
-
-	if (!exclude.breakoutPoints) {
-		guides.unshift(
-			akEditorDefaultLayoutWidth + lengthOffset,
-			akEditorCalculatedWideLayoutWidth + lengthOffset,
-		);
-	}
-
-	if (!exclude.innerGuidelines) {
-		guides.unshift(
-			0,
-			...calculateSubSnappingWidths(
-				numberOfLanesInDefaultLayoutWidth,
-				akEditorDefaultLayoutWidth + lengthOffset,
-			),
-		);
-	}
-
-	return guides;
-};
-
-export const defaultSnappingWidths = calculateDefaultSnappings();
-
-export const PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
-// FF TablePreserve for defaultSnappingWidths
-export const defaultTablePreserveSnappingWidths = (
-	lengthOffset: number,
-	editorContainerWidth: number,
-	exclude: GuidelineExcludeConfig = {
-		innerGuidelines: false,
-		breakoutPoints: false,
-	},
-) => {
-	const padding = getPadding(editorContainerWidth);
-	return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth
-		? calculateDefaultSnappings()
-		: calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-};
-
-/**
- * Returns keys of guidelines that are closest to the table and within the snapGap
- */
-export const findClosestSnap = (
-	currentWidth: number,
-	snapWidths: number[],
-	guidelines: GuidelineConfig[],
-	snapGap: number = 0,
-	tolerance: number = 0,
-) => {
-	const closestGapIndex = snapWidths.reduce(
-		(prev, curr, index) =>
-			Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev,
-		0,
-	);
-	const gap = Math.abs(snapWidths[closestGapIndex] - currentWidth);
-	if (gap < snapGap) {
-		const snappingWidth = Math.round(snapWidths[closestGapIndex]);
-		const guidelineKeys = guidelines.reduce<string[]>((acc, guideline) => {
-			// NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
-			// are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
-			// point base position to length by simply multiplying by 2.
-			const length = Math.round(
-				Math.abs(
-					isVerticalPosition(guideline.position) ? guideline.position.x : guideline.position.y,
-				) * 2,
-			);
-			if (snappingWidth >= length - tolerance && snappingWidth <= length + tolerance) {
-				acc.push(guideline.key);
-			}
-			return acc;
-		}, []);
-
-		return {
-			gap,
-			keys: guidelineKeys,
-		};
-	}
-	return { gap, keys: [] };
-};

package/src/pm-plugins/utils/table.ts

@@ -1,60 +0,0 @@
-import type { IntlShape } from 'react-intl-next';
-
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-export const getMergedCellsPositions = (tr: Transaction): number[] => {
-	const table = findTable(tr.selection);
-	if (!table) {
-		return [];
-	}
-
-	const map = TableMap.get(table.node);
-	const cellPositions = new Set();
-	const mergedCells: number[] = [];
-
-	map.map.forEach((value) => {
-		if (cellPositions.has(value)) {
-			mergedCells.push(value);
-		} else {
-			cellPositions.add(value);
-		}
-	});
-
-	return mergedCells;
-};
-
-export const getAssistiveMessage = (
-	prevTableNode: PmNode,
-	currentTableNode: PmNode,
-	intl: IntlShape,
-) => {
-	const { formatMessage } = intl;
-	const prevTableMap = TableMap.get(prevTableNode);
-	const currentTableMap = TableMap.get(currentTableNode);
-
-	if (currentTableMap.width !== prevTableMap.width) {
-		const diff = Math.abs(currentTableMap.width - prevTableMap.width);
-		if (currentTableMap.width > prevTableMap.width) {
-			return formatMessage(messages.columnsAreInserted, { count: diff });
-		}
-		if (currentTableMap.width < prevTableMap.width) {
-			return formatMessage(messages.columnsAreRemoved, { count: diff });
-		}
-	}
-
-	if (currentTableMap.height !== prevTableMap.height) {
-		const diff = Math.abs(currentTableMap.height - prevTableMap.height);
-		if (currentTableMap.height > prevTableMap.height) {
-			return formatMessage(messages.rowsAreInserted, { count: diff });
-		}
-		if (currentTableMap.height < prevTableMap.height) {
-			return formatMessage(messages.rowsAreRemoved, { count: diff });
-		}
-	}
-
-	return '';
-};

package/src/pm-plugins/utils/update-plugin-state-decorations.ts

@@ -1,13 +0,0 @@
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-import type { TableDecorations } from '../../types';
-import { getDecorations } from '../decorations/plugin';
-
-import { updateDecorations } from './decoration';
-
-export const updatePluginStateDecorations = (
-	state: EditorState,
-	decorations: Decoration[],
-	key: TableDecorations,
-): DecorationSet => updateDecorations(state.doc, getDecorations(state), decorations, key);

package/src/pm-plugins/view-mode-sort/consts.ts

@@ -1,3 +0,0 @@
-export const SORTING_ICON_CLASS_NAME = 'view-mode-sorting-icon';
-export const IS_DISABLED_CLASS_NAME = 'is-disabled';
-export const SORT_INDEX_DATA_ATTRIBUTE = 'data-sort-index';

package/src/pm-plugins/view-mode-sort/index.ts

@@ -1,291 +0,0 @@
-/**
- * This plugin allows sorting of table nodes in the Editor without modifying the underlying ProseMirror document.
- * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
- * visible to the user without affecting the document's content.
- */
-
-import { createElement } from 'react';
-
-import { RawIntlProvider } from 'react-intl-next';
-import uuid from 'uuid/v4';
-
-import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { SortOrder } from '@atlaskit/editor-common/types';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-
-import type tablePlugin from '../../tablePlugin';
-import { SortingIconWrapper } from '../../ui/icons/SortingIconWrapper';
-import { getPluginState } from '../plugin-factory';
-
-import {
-	IS_DISABLED_CLASS_NAME,
-	SORT_INDEX_DATA_ATTRIBUTE,
-	SORTING_ICON_CLASS_NAME,
-} from './consts';
-import { tableViewModeSortPluginKey as key } from './plugin-key';
-import type { ViewModeSortPluginState } from './types';
-import { getTableElements, toggleSort } from './utils';
-
-export const createPlugin = (
-	api: ExtractInjectionAPI<typeof tablePlugin>,
-	nodeViewPortalProviderAPI: PortalProviderAPI,
-) => {
-	return new SafePlugin({
-		state: {
-			init: () => ({
-				decorations: DecorationSet.empty,
-				sort: {},
-				allTables: [],
-			}),
-			apply(tr, pluginState: ViewModeSortPluginState, oldState) {
-				// TODO: ED-26961 - move this mode check to plugin creation if possible. Right now it's here because the initial state
-				// does not appear correct when the plugin is created.
-				const { mode } = api.editorViewMode?.sharedState.currentState() || {};
-				if (mode !== 'view') {
-					const sortingDecorations = pluginState?.decorations?.find(
-						undefined,
-						undefined,
-						(s) => s?.type === 'sorting-decoration',
-					);
-
-					return {
-						...pluginState,
-						decorations: pluginState?.decorations?.remove(sortingDecorations),
-					};
-				}
-				let { decorations, sort, allTables } = pluginState;
-
-				const sortMeta = tr.getMeta('tableSortMeta');
-
-				const hoverTableMeta = tr.getMeta('mouseEnterTable');
-				const removeTableMeta = tr.getMeta('removeTable');
-				let tableId = '';
-
-				// Remove the table from the state
-				if (removeTableMeta) {
-					allTables = allTables.filter(([id]) => id !== removeTableMeta);
-				} else {
-					tableId = hoverTableMeta?.[0];
-				}
-
-				sort = { ...sort, ...sortMeta };
-
-				const isTableInState = allTables.some(([id]) => id === tableId);
-
-				// Update the table in the state
-				if (hoverTableMeta) {
-					allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
-					allTables.push(hoverTableMeta);
-				}
-
-				/**
-				 * Create decorations for the sorting icons
-				 */
-				const decs: Decoration[] = [];
-
-				const sortingDecorations = pluginState.decorations.find(
-					undefined,
-					undefined,
-					(spec) => spec.tableId === tableId && spec.type === 'sorting-decoration',
-				);
-
-				// TODO: ED-26961 - add support for keyboard only users
-				if (
-					(hoverTableMeta && !isTableInState) ||
-					sortMeta ||
-					(isTableInState && !sortingDecorations.length)
-				) {
-					allTables.forEach((table) => {
-						const [tableId, _node, pos] = table;
-						const tableNode = tr.doc.nodeAt(tr.mapping.map(pos));
-						if (!tableNode || tableNode.type.name !== 'table') {
-							return pluginState;
-						}
-						const map = TableMap.get(tableNode);
-						const hasMergedCells = new Set(map.map).size !== map.map.length;
-						map.mapByRow[0].forEach((cell, index) => {
-							const decorationRenderKey = uuid();
-							decs.push(
-								Decoration.widget(
-									cell + pos + 2,
-									() => {
-										const element = document.createElement('div');
-										element.setAttribute(SORT_INDEX_DATA_ATTRIBUTE, `${index}`);
-										element.classList.add(SORTING_ICON_CLASS_NAME);
-										if (hasMergedCells) {
-											element.classList.add(IS_DISABLED_CLASS_NAME);
-										}
-
-										let sortOrdered;
-										if (index === sort[tableId]?.index) {
-											sortOrdered = sort[tableId]?.direction;
-										} else {
-											sortOrdered = SortOrder.NO_ORDER;
-										}
-
-										const { getIntl } = getPluginState(oldState);
-
-										nodeViewPortalProviderAPI.render(
-											() =>
-												createElement(
-													RawIntlProvider,
-													{ value: getIntl() },
-													createElement(SortingIconWrapper, {
-														isSortingAllowed: !hasMergedCells,
-														sortOrdered,
-														onClick: () => {},
-														onKeyDown: () => {},
-														api,
-													}),
-												),
-											element,
-											decorationRenderKey,
-											undefined,
-											// @portal-render-immediately
-											true,
-										);
-
-										return element;
-									},
-									{
-										destroy: (node) => {
-											nodeViewPortalProviderAPI.remove(decorationRenderKey);
-										},
-										type: 'sorting-decoration',
-										tableId,
-									},
-								),
-							);
-						});
-					});
-					decorations = DecorationSet.create(tr.doc, decs);
-				}
-
-				/**
-				 * Map the decorations to the new document if there are changes
-				 */
-				if (tr.docChanged) {
-					decorations = decorations.map(tr.mapping, tr.doc);
-					allTables = allTables.map((table) => {
-						return [table[0], table[1], tr.mapping.map(table[2])];
-					});
-				}
-
-				return {
-					decorations,
-					sort,
-					allTables,
-				};
-			},
-		},
-		key,
-		appendTransaction: (trs, oldState, newState) => {
-			// return newState.tr;
-			const { mode } = api?.editorViewMode?.sharedState.currentState() || {};
-			if (mode !== 'view') {
-				return newState.tr;
-			}
-
-			let allTables = key.getState(newState)?.allTables || [];
-
-			/**
-			 * If incoming changes have affected a table node, remove the sorting. This prevents the
-			 * table from breaking if changes like merged cells are incoming.
-			 */
-			for (const tr of trs) {
-				const hoverTableMeta = tr.getMeta('mouseEnterTable');
-				if (hoverTableMeta) {
-					allTables = allTables.filter(([id]) => id !== hoverTableMeta[0]);
-					allTables.push(hoverTableMeta);
-				}
-				const isRemote = tr.getMeta('isRemote');
-				const isDocChanged = tr.docChanged;
-				const isChangesIncoming = isRemote && isDocChanged;
-
-				const oldPluginState = key.getState(oldState);
-				const newPluginState = key.getState(newState);
-
-				for (const table of allTables) {
-					const [tableId, node, pos] = table;
-					const {
-						order: oldOrder,
-						direction: oldDirection,
-						index: oldIndex,
-					} = oldPluginState?.sort?.[tableId] || {};
-
-					if (isChangesIncoming) {
-						const maybeTableNode = tr.doc.nodeAt(pos);
-						const isTableNodeChanged =
-							maybeTableNode?.attrs?.localId !== tableId || !node.eq(maybeTableNode);
-
-						if (isTableNodeChanged) {
-							const newtr = newState.tr;
-							newtr.setMeta('tableSortMeta', {
-								[tableId]: {},
-							});
-							newtr.setMeta('removeTable', tableId);
-
-							// Unsort the table here
-							if (oldOrder !== undefined) {
-								const { rows, tbody } = getTableElements(tableId);
-								if (!rows || !tbody) {
-									return newtr;
-								}
-								const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
-								sortedOrder.forEach((index, i) => {
-									tbody.appendChild(rows[index.index + 1]);
-								});
-								return newtr;
-							}
-						}
-					}
-
-					/**
-					 * Sort the table if the sort order has changed
-					 */
-					const {
-						order: newOrder,
-						direction: newDirection,
-						index: newIndex,
-					} = newPluginState?.sort?.[tableId] || {};
-					const orderChanged = oldDirection !== newDirection || oldIndex !== newIndex;
-
-					if (orderChanged) {
-						if (!isRemote && newDirection !== SortOrder.NO_ORDER) {
-							const { rows, tbody } = getTableElements(tableId);
-							if (rows && newOrder) {
-								newOrder.forEach((index, i) => {
-									tbody?.appendChild(rows[index.value + 1]);
-								});
-							}
-						}
-					}
-				}
-			}
-			return newState.tr;
-		},
-		props: {
-			handleDOMEvents: {
-				keydown: (view, event) => {
-					// TODO: ED-26961 - fix the focus issue here, where toggling sort with a keypress loses focus
-					if (event.key === 'Enter' || event.key === ' ') {
-						const pluginState = key.getState(view.state)?.sort || {};
-						toggleSort(view, event, pluginState);
-					}
-				},
-
-				click: (view, event) => {
-					const pluginState = key.getState(view.state)?.sort || {};
-					toggleSort(view, event, pluginState);
-				},
-			},
-			decorations(state) {
-				const decs = key.getState(state)?.decorations || DecorationSet.empty;
-				return decs;
-			},
-		},
-	});
-};

package/src/pm-plugins/view-mode-sort/plugin-key.ts

@@ -1,7 +0,0 @@
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-import type { ViewModeSortPluginState } from './types';
-
-export const tableViewModeSortPluginKey = new PluginKey<ViewModeSortPluginState>(
-	'tableViewModeSortPlugin',
-);

package/src/pm-plugins/view-mode-sort/types.ts

@@ -1,23 +0,0 @@
-import type { SortOrder } from '@atlaskit/editor-common/types';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
-
-export type TableSortMeta = Record<
-	string,
-	{
-		index: number;
-		order: {
-			index: number;
-			value: number;
-		}[];
-		direction: SortOrder;
-	}
->;
-
-export interface ViewModeSortPluginState {
-	decorations: DecorationSet;
-	sort: TableSortMeta;
-	allTables: HoverTableMeta[];
-}
-
-type HoverTableMeta = [string, PMNode, number];

package/src/pm-plugins/view-mode-sort/utils.ts

@@ -1,136 +0,0 @@
-import { SortOrder } from '@atlaskit/editor-common/types';
-import {
-	convertProsemirrorTableNodeToArrayOfRows,
-	createCompareNodes,
-} from '@atlaskit/editor-common/utils';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import {
-	IS_DISABLED_CLASS_NAME,
-	SORT_INDEX_DATA_ATTRIBUTE,
-	SORTING_ICON_CLASS_NAME,
-} from './consts';
-import type { TableSortMeta } from './types';
-
-export const unsort = (oldOrder: { index: number; value: number }[], tableElement: HTMLElement) => {
-	const tbody = tableElement.querySelector(`:scope > tbody`);
-	const rows = tableElement.querySelectorAll(`:scope > tbody > tr`);
-
-	const sortedOrder = [...oldOrder].sort((a, b) => a.value - b.value);
-	sortedOrder.forEach((item) => {
-		tbody?.appendChild(rows[item.index + 1]);
-	});
-};
-
-const getSortOrderFromTable = (tableNode: PMNode, sortIndex: number, direction: SortOrder) => {
-	const tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
-	tableArray.shift(); // remove header row
-
-	// Keep track of the origin row index
-	const tableArrayWithIndex = tableArray.map((node, index) => ({
-		node,
-		originalIndex: index,
-	}));
-
-	const compareNodesInOrder = createCompareNodes(
-		{
-			// TODO: ED-26961 - add inline card support
-			getInlineCardTextFromStore() {
-				return null;
-			},
-		},
-		direction,
-	);
-	const order = tableArrayWithIndex
-		.sort((a, b) => {
-			return compareNodesInOrder(a.node[sortIndex], b.node[sortIndex]);
-		})
-		.map((tableRow, index) => ({
-			value: tableRow.originalIndex,
-			index,
-		}));
-	return [
-		// Ensures the first tr is always first in the order
-		{ value: -1, index: -1 },
-		...order,
-	];
-};
-
-export const toggleSort = (view: EditorView, event: Event, pluginState: TableSortMeta) => {
-	const target = event.target;
-	if (!(target instanceof HTMLElement)) {
-		return;
-	}
-	const widget = target.closest(`.${SORTING_ICON_CLASS_NAME}`);
-	if (widget?.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
-		return;
-	}
-	const dataSortIndex = target
-		?.closest('.ProseMirror-widget')
-		?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
-	const tr = view.state.tr;
-	const tableElement = target.closest('table');
-	if (!tableElement || !dataSortIndex) {
-		return;
-	}
-	const tablePos = view.posAtDOM(tableElement, 0);
-	const tableNode = view.state.doc.nodeAt(tablePos - 1);
-	const tableId = tableNode?.attrs.localId;
-
-	if (!tableId || !tableNode || tableNode?.type?.name !== 'table') {
-		return;
-	}
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line prefer-const
-	let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
-
-	// Unsort if there was already a sort
-	if (direction !== SortOrder.NO_ORDER && oldOrder !== undefined) {
-		unsort(oldOrder, tableElement);
-	}
-
-	const sortIndex = parseInt(dataSortIndex);
-	if (sortIndex === index) {
-		switch (direction) {
-			case SortOrder.NO_ORDER:
-				direction = SortOrder.ASC;
-				break;
-			case SortOrder.ASC:
-				direction = SortOrder.DESC;
-				break;
-			case SortOrder.DESC:
-				direction = SortOrder.NO_ORDER;
-				break;
-		}
-	} else {
-		direction = SortOrder.ASC; // default direction when a new index is clicked
-	}
-
-	const order = getSortOrderFromTable(tableNode, sortIndex, direction);
-
-	if (direction === SortOrder.NO_ORDER) {
-		tr.setMeta('tableSortMeta', {
-			[tableId]: {},
-		});
-	} else {
-		tr.setMeta('tableSortMeta', {
-			[tableId]: {
-				index: sortIndex,
-				direction,
-				order,
-				tableElement,
-			},
-		});
-	}
-	view.dispatch(tr);
-};
-
-export const getTableElements = (tableId: string) => {
-	const tableElement = document.querySelector(`table[data-table-local-id="${tableId}"]`);
-	const tbody = tableElement?.querySelector(':scope > tbody');
-
-	const rows = tableElement?.querySelectorAll(':scope > tbody > tr');
-	return { tbody, rows };
-};