@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/pm-plugins/transforms/merge.ts

@@ -1,301 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Fragment } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
-
-// re-creates table node with merged cells
-export function mergeCells(tr: Transaction): Transaction {
-	const { selection } = tr;
-	if (!(selection instanceof CellSelection) || !canMergeCells(tr)) {
-		return tr;
-	}
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const rect = getSelectionRect(selection)!;
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const table = findTable(selection)!;
-	const map = TableMap.get(table.node);
-	const seen: number[] = [];
-	const selectedCells = map.cellsInRect(rect);
-	let mergedCellPos;
-
-	const rows: PMNode[] = [];
-	for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-		const rowCells: PMNode[] = [];
-		const row = table.node.child(rowIndex);
-
-		for (let colIndex = 0; colIndex < map.width; colIndex++) {
-			const cellPos = map.map[rowIndex * map.width + colIndex];
-			const cell = table.node.nodeAt(cellPos);
-			if (!cell || seen.indexOf(cellPos) > -1) {
-				continue;
-			}
-			seen.push(cellPos);
-
-			// merged cell
-			if (colIndex === rect.left && rowIndex === rect.top) {
-				mergedCellPos = cellPos;
-				// merge content of the selected cells, dropping empty cells
-				let content = isEmptyCell(cell) ? Fragment.empty : cell.content;
-				const seenContent: number[] = [mergedCellPos];
-				for (let i = rect.top; i < rect.bottom; i++) {
-					for (let j = rect.left; j < rect.right; j++) {
-						const pos = map.map[i * map.width + j];
-						if (seenContent.indexOf(pos) === -1) {
-							seenContent.push(pos);
-							const copyCell = table.node.nodeAt(pos);
-							if (copyCell && !isEmptyCell(copyCell)) {
-								content = content.append(copyCell.content);
-							}
-						}
-					}
-				}
-				const rowspan = rect.bottom - rect.top;
-				if (rowspan < 1) {
-					return tr;
-				}
-				// update colspan and rowspan of the merged cell to span the selection
-				const attrs = addColSpan(
-					{
-						...cell.attrs,
-						rowspan,
-					},
-					cell.attrs.colspan,
-					rect.right - rect.left - cell.attrs.colspan,
-				);
-				const newCell =
-					content === Fragment.empty
-						? cell.type.createAndFill(attrs, content, cell.marks)
-						: cell.type.createChecked(attrs, content, cell.marks);
-				// Ignored via go/ees005
-				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-				rowCells.push(newCell!);
-			} else if (selectedCells.indexOf(cellPos) === -1) {
-				// if its one of the selected cells, but not the merged cell, we get rid of it
-				// otherwise we keep the cell
-				rowCells.push(cell);
-			}
-		}
-
-		if (rowCells.length) {
-			rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
-		} else {
-			// empty row, we need to fix rowspans for rows above the current one
-			for (let i = rows.length - 1; i >= 0; i--) {
-				const prevRow = rows[i];
-				const cells: PMNode[] = [];
-				let rowChanged = false;
-
-				for (let j = 0; j < prevRow.childCount; j++) {
-					const cell = prevRow.child(j);
-					const { rowspan } = cell.attrs;
-					if (rowspan && rowspan + i - 1 >= rows.length) {
-						rowChanged = true;
-						if (rowspan < 2) {
-							return tr;
-						}
-						cells.push(
-							cell.type.createChecked(
-								{
-									...cell.attrs,
-									rowspan: rowspan - 1,
-								},
-								cell.content,
-								cell.marks,
-							),
-						);
-					} else {
-						cells.push(cell);
-					}
-				}
-				if (rowChanged) {
-					rows[i] = row.type.createChecked(prevRow.attrs, cells, prevRow.marks);
-				}
-			}
-		}
-	}
-
-	// empty tables? cancel merging like nothing happened
-	if (!rows.length) {
-		return tr;
-	}
-
-	const newTable = table.node.type.createChecked(table.node.attrs, rows, table.node.marks);
-
-	const fixedTable = mergeEmptyColumns(newTable);
-	if (fixedTable === null) {
-		return tr;
-	}
-
-	return tr
-		.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
-		.setSelection(Selection.near(tr.doc.resolve((mergedCellPos || 0) + table.start)));
-}
-
-export function canMergeCells(tr: Transaction): boolean {
-	const { selection } = tr;
-	if (
-		!(selection instanceof CellSelection) ||
-		selection.$anchorCell.pos === selection.$headCell.pos
-	) {
-		return false;
-	}
-
-	const rect = getSelectionRect(selection);
-	if (!rect) {
-		return false;
-	}
-	const table = selection.$anchorCell.node(-1);
-	const map = TableMap.get(table);
-	if (cellsOverlapRectangle(map, rect)) {
-		return false;
-	}
-
-	return true;
-}
-
-function isEmptyCell(cell: PMNode) {
-	const { content } = cell;
-	return (
-		content.childCount === 1 &&
-		content.firstChild &&
-		content.firstChild.isTextblock &&
-		content.firstChild.childCount === 0
-	);
-}
-
-function addColSpan(attrs: CellAttributes, pos: number, span: number = 1) {
-	const newAttrs = {
-		...attrs,
-		colspan: (attrs.colspan || 1) + span,
-	};
-	if (newAttrs.colwidth) {
-		newAttrs.colwidth = newAttrs.colwidth.slice();
-		for (let i = 0; i < span; i++) {
-			newAttrs.colwidth.splice(pos, 0, 0);
-		}
-	}
-
-	return newAttrs;
-}
-
-function cellsOverlapRectangle({ width, height, map }: TableMap, rect: Rect) {
-	let indexTop = rect.top * width + rect.left;
-	let indexLeft = indexTop;
-
-	let indexBottom = (rect.bottom - 1) * width + rect.left;
-	let indexRight = indexTop + (rect.right - rect.left - 1);
-
-	for (let i = rect.top; i < rect.bottom; i++) {
-		if (
-			(rect.left > 0 && map[indexLeft] === map[indexLeft - 1]) ||
-			(rect.right < width && map[indexRight] === map[indexRight + 1])
-		) {
-			return true;
-		}
-		indexLeft += width;
-		indexRight += width;
-	}
-	for (let i = rect.left; i < rect.right; i++) {
-		if (
-			(rect.top > 0 && map[indexTop] === map[indexTop - width]) ||
-			(rect.bottom < height && map[indexBottom] === map[indexBottom + width])
-		) {
-			return true;
-		}
-
-		indexTop++;
-		indexBottom++;
-	}
-
-	return false;
-}
-
-// returns an array of numbers, each number indicates the minimum colSpan in each column
-function getEmptyColumnIndexes(table: PMNode): Set<number> {
-	const map = TableMap.get(table);
-	const emptyColumnIndexes = new Set<number>();
-
-	// Loop throuh each column
-	for (let colIndex = 0; colIndex < map.width; colIndex++) {
-		// Get the cells in each row for this column
-		const cellPositions = map.cellsInRect({
-			left: colIndex,
-			right: colIndex + 1,
-			top: 0,
-			bottom: map.height,
-		});
-
-		// If no cells exist in that column it is empty
-		if (!cellPositions.length) {
-			emptyColumnIndexes.add(colIndex);
-		}
-	}
-
-	return emptyColumnIndexes;
-}
-
-export function mergeEmptyColumns(table: PMNode): PMNode | null {
-	const rows: PMNode[] = [];
-	const map = TableMap.get(table);
-	const emptyColumnIndexes = getEmptyColumnIndexes(table);
-
-	// We don't need to remove any so return early.
-	if (emptyColumnIndexes.size === 0) {
-		return table;
-	}
-
-	for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-		const cellsByCols: Record<string, PMNode> = {};
-
-		// Work backwards so that calculating colwidths is easier with Array.slice
-		for (let colIndex = map.width - 1; colIndex >= 0; colIndex--) {
-			const cellPos = map.map[colIndex + rowIndex * map.width];
-			const rect = map.findCell(cellPos);
-			let cell = cellsByCols[rect.left] || table.nodeAt(cellPos);
-
-			if (rect.top !== rowIndex) {
-				continue;
-			}
-
-			// If this column is empty, we want to decrement the colspan of its corresponding
-			// cell as this column is being "merged"
-			if (emptyColumnIndexes.has(colIndex)) {
-				const { colspan, colwidth } = cell.attrs;
-
-				if (colspan > 1) {
-					cell = cell.type.createChecked(
-						{
-							...cell.attrs,
-							colspan: colspan - 1,
-							colwidth: colwidth ? colwidth.slice(0, colspan) : null,
-						},
-						cell.content,
-						cell.marks,
-					);
-				}
-			}
-
-			cellsByCols[rect.left] = cell;
-		}
-
-		const rowCells = Object.values(cellsByCols);
-		const row = table.child(rowIndex);
-		if (row) {
-			rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
-		}
-	}
-
-	if (!rows.length) {
-		return null;
-	}
-
-	return table.type.createChecked(table.attrs, rows, table.marks);
-}

package/src/pm-plugins/transforms/replace-table.ts

@@ -1,38 +0,0 @@
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-
-import { getSelectedTableInfo } from '../utils/analytics';
-
-export const replaceSelectedTable = (
-	state: EditorState,
-	content: string | Slice,
-	inputMethod: INPUT_METHOD.KEYBOARD | INPUT_METHOD.CLIPBOARD,
-	editorAnalyticsAPI?: EditorAnalyticsAPI,
-): Transaction => {
-	if (isTableSelected(state.selection)) {
-		const table = findTable(state.selection);
-		if (table) {
-			const slice: Slice =
-				typeof content === 'string'
-					? new Slice(Fragment.from(state.schema.text(content)), 0, 0)
-					: content;
-			const tr = state.tr.replace(table.pos, table.pos + table.node.nodeSize, slice);
-			tr.setSelection(TextSelection.create(tr.doc, table.pos + slice.size + 1));
-
-			const { totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
-			editorAnalyticsAPI?.attachAnalyticsEvent({
-				action: TABLE_ACTION.REPLACED,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				attributes: { totalColumnCount, totalRowCount, inputMethod },
-				eventType: EVENT_TYPE.TRACK,
-			})(tr);
-
-			return tr;
-		}
-	}
-	return state.tr;
-};

package/src/pm-plugins/transforms/split.ts

@@ -1,90 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import type { Node as ProseMirrorNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-
-/**
- * Helper to split all the cells in a range of columns
- * @param tr
- * @param tablePos
- * @param columnStart - Start of the rect included (rect.left)
- * @param columnEnd - End of the rect not included (rect.right)
- */
-export function splitCellsInColumns(
-	tr: Transaction,
-	tablePos: number,
-	columnStart: number,
-	columnEnd: number,
-): Transaction {
-	const mapStart = tr.mapping.maps.length;
-	const table = tr.doc.nodeAt(tablePos);
-	if (!table) {
-		return tr;
-	}
-
-	const tableStart = tr.doc.resolve(tablePos).start(1);
-	const map = TableMap.get(table);
-
-	for (let column = columnStart; column < columnEnd; column++) {
-		for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-			const cellIndex = rowIndex * map.width + column;
-			const cellPos = map.map[cellIndex];
-
-			// Check if the cell is contained by another by another row/column
-			const hasMergedCellsBefore =
-				(column > 0 && map.map[cellIndex - 1] === cellPos) ||
-				(rowIndex > 0 && map.map[(rowIndex - 1) * map.width + column] === cellPos);
-			// Check if the cell contains another row/column
-			const hasMergedCellsAfter =
-				(column < map.width - 1 && map.map[cellIndex + 1] === cellPos) ||
-				(rowIndex < map.height - 1 && map.map[(rowIndex + 1) * map.width + column] === cellPos);
-			if (!hasMergedCellsBefore && hasMergedCellsAfter) {
-				// Is a merged cell that start in this row/column
-				const cellNode = table.nodeAt(cellPos) as ProseMirrorNode;
-				if (!cellNode) {
-					continue;
-				}
-				const { colwidth, colspan = 1, rowspan = 1 } = cellNode.attrs as CellAttributes;
-
-				let mapping = tr.mapping.slice(mapStart);
-
-				// Update current node with the simple colspan
-				const baseAttrs: CellAttributes = {
-					...(cellNode.attrs as CellAttributes),
-					colspan: 1,
-					rowspan: 1,
-				};
-				// Add the new cells
-				for (let cellRowIndex = rowIndex; cellRowIndex < rowIndex + rowspan; cellRowIndex++) {
-					for (let i = 0; i < colspan; i++) {
-						const mapping = tr.mapping.slice(mapStart);
-						const cellPos = map.positionAt(cellRowIndex, column + i, table);
-						tr.insert(
-							mapping.map(cellPos + tableStart),
-							// Ignored via go/ees005
-							// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-							cellNode.type.createAndFill({
-								...baseAttrs,
-								colwidth: colwidth ? [colwidth[i]] : undefined,
-							})!,
-						);
-					}
-				}
-
-				// Delete the original cell
-				mapping = tr.mapping.slice(mapStart);
-				tr.delete(
-					mapping.map(cellPos + tableStart),
-					mapping.map(cellPos + tableStart + cellNode.nodeSize),
-				);
-
-				// Skip rows based on rowspan
-				if (rowspan && rowspan > 1) {
-					rowIndex += rowspan - 1;
-				}
-			}
-		}
-	}
-
-	return tr;
-}

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

@@ -1,33 +0,0 @@
-import type { TableLayout } from '@atlaskit/adf-schema';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-
-import type { AlignmentOptions } from '../../types';
-import { FULL_WIDTH_EDITOR_CONTENT_WIDTH } from '../table-resizing/utils/consts';
-
-export const ALIGN_START = 'align-start';
-export const ALIGN_CENTER = 'center';
-
-/**
- * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
- * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
- */
-export const normaliseAlignment = (layout: TableLayout): AlignmentOptions =>
-	layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
-
-/**
- * We don't want to switch alignment in Full-width editor
- */
-export const shouldChangeAlignmentToCenterResized = (
-	isTableAlignmentEnabled: boolean | undefined,
-	tableNode: PmNode,
-	lineLength: number | undefined,
-	updatedTableWidth: number,
-) =>
-	Boolean(
-		isTableAlignmentEnabled &&
-			tableNode &&
-			tableNode.attrs.layout === ALIGN_START &&
-			lineLength &&
-			updatedTableWidth > lineLength &&
-			lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH,
-	);

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

@@ -1,238 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import type {
-	AnalyticsEventPayload,
-	AnalyticsEventPayloadCallback,
-	EditorAnalyticsAPI,
-	TableEventPayload,
-} from '@atlaskit/editor-common/analytics';
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import type { HigherOrderCommand } from '@atlaskit/editor-common/types';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Selection } from '@atlaskit/editor-prosemirror/state';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
-
-import { hasTableBeenResized } from '../table-resizing/utils/colgroup';
-
-import { getTableWidth } from './nodes';
-
-export function getSelectedTableInfo(selection: Selection): {
-	table: ReturnType<typeof findTable> | undefined;
-	map: TableMap | undefined;
-	totalRowCount: number;
-	totalColumnCount: number;
-} {
-	let map;
-	let totalRowCount = 0;
-	let totalColumnCount = 0;
-
-	const table = findTable(selection);
-	if (table) {
-		map = TableMap.get(table.node);
-		totalRowCount = map.height;
-		totalColumnCount = map.width;
-	}
-
-	return {
-		table,
-		map,
-		totalRowCount,
-		totalColumnCount,
-	};
-}
-
-export function getSelectedCellInfo(selection: Selection) {
-	let horizontalCells = 1;
-	let verticalCells = 1;
-	let totalCells = 1;
-
-	const { table, map, totalRowCount, totalColumnCount } = getSelectedTableInfo(selection);
-
-	if (table && map) {
-		const rect = getSelectionRect(selection);
-		if (rect) {
-			totalCells = map.cellsInRect(rect).length;
-			horizontalCells = rect.right - rect.left;
-			verticalCells = rect.bottom - rect.top;
-		}
-	}
-
-	return {
-		totalRowCount,
-		totalColumnCount,
-		horizontalCells,
-		verticalCells,
-		totalCells,
-	};
-}
-
-export const withEditorAnalyticsAPI =
-	(payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) =>
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null): HigherOrderCommand => {
-		return (command) => (state, dispatch, view) =>
-			command(
-				state,
-				(tr) => {
-					const dynamicPayload = payload instanceof Function ? payload(state) : payload;
-
-					if (dynamicPayload) {
-						editorAnalyticsAPI?.attachAnalyticsEvent(dynamicPayload)(tr);
-					}
-
-					if (dispatch) {
-						dispatch(tr);
-					}
-					return true;
-				},
-				view,
-			);
-	};
-
-interface UseMeasureFramerateConfig {
-	maxSamples?: number;
-	minFrames?: number;
-	minTimeMs?: number;
-	sampleRateMs?: number;
-	timeoutMs?: number;
-}
-
-export const generateResizedPayload = (props: {
-	originalNode: PMNode;
-	resizedNode: PMNode;
-}): TableEventPayload => {
-	const tableMap = TableMap.get(props.resizedNode);
-
-	return {
-		action: TABLE_ACTION.RESIZED,
-		actionSubject: ACTION_SUBJECT.TABLE,
-		eventType: EVENT_TYPE.TRACK,
-		attributes: {
-			newWidth: props.resizedNode.attrs.width,
-			prevWidth: props.originalNode.attrs.width ?? null,
-			nodeSize: props.resizedNode.nodeSize,
-			totalTableWidth: hasTableBeenResized(props.resizedNode)
-				? getTableWidth(props.resizedNode)
-				: null,
-			totalRowCount: tableMap.height,
-			totalColumnCount: tableMap.width,
-		},
-	};
-};
-
-export const reduceResizeFrameRateSamples = (frameRateSamples: number[]) => {
-	if (frameRateSamples.length > 1) {
-		const frameRateSum = frameRateSamples.reduce((sum, frameRate, index) => {
-			if (index === 0) {
-				return sum;
-			} else {
-				return sum + frameRate;
-			}
-		}, 0);
-		const averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
-		return [frameRateSamples[0], averageFrameRate];
-	} else {
-		return frameRateSamples;
-	}
-};
-
-export const generateResizeFrameRatePayloads = (props: {
-	docSize: number;
-	frameRateSamples: number[];
-	originalNode: PMNode;
-}): TableEventPayload[] => {
-	const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(props.frameRateSamples);
-	return reducedResizeFrameRateSamples.map((frameRateSample, index) => ({
-		action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
-		actionSubject: ACTION_SUBJECT.TABLE,
-		eventType: EVENT_TYPE.OPERATIONAL,
-		attributes: {
-			frameRate: frameRateSample,
-			nodeSize: props.originalNode.nodeSize,
-			docSize: props.docSize,
-			isInitialSample: index === 0,
-		},
-	}));
-};
-
-/**
- * Measures the framerate of a component over a given time period.
- */
-export const useMeasureFramerate = (config: UseMeasureFramerateConfig = {}) => {
-	const {
-		maxSamples = 10,
-		minFrames = 5,
-		minTimeMs = 500,
-		sampleRateMs = 1000,
-		timeoutMs = 200,
-	} = config;
-
-	const frameCount = useRef(0);
-	const lastTime = useRef(0);
-	const timeoutId = useRef<NodeJS.Timeout | undefined>();
-	const frameRateSamples = useRef<number[]>([]);
-
-	useEffect(() => {
-		return () => {
-			if (timeoutId.current) {
-				clearTimeout(timeoutId.current);
-			}
-		};
-	}, []);
-
-	const startMeasure = () => {
-		frameCount.current = 0;
-		lastTime.current = performance.now();
-	};
-
-	/**
-	 * Returns an array of frame rate samples as integers.
-	 */
-	const endMeasure = () => {
-		const samples = frameRateSamples.current;
-		frameRateSamples.current = [];
-		return samples;
-	};
-
-	const sampleFrameRate = (delay = 0) => {
-		const currentTime = performance.now();
-		const deltaTime = currentTime - lastTime.current - delay;
-		const isValidSample = deltaTime > minTimeMs && frameCount.current >= minFrames;
-		if (isValidSample) {
-			const frameRate = Math.round(frameCount.current / (deltaTime / 1000));
-			frameRateSamples.current.push(frameRate);
-		}
-		frameCount.current = 0;
-		lastTime.current = 0;
-	};
-
-	/**
-	 * Counts the number of frames that occur within a given time period. Intended to be called
-	 * inside a `requestAnimationFrame` callback.
-	 */
-	const countFrames = () => {
-		if (frameRateSamples.current.length >= maxSamples && timeoutId.current) {
-			clearTimeout(timeoutId.current);
-			return;
-		}
-
-		/**
-		 * Allows us to keep counting frames even if `startMeasure` is not called
-		 */
-		if (lastTime.current === 0) {
-			lastTime.current = performance.now();
-		}
-		frameCount.current++;
-
-		if (timeoutId.current) {
-			clearTimeout(timeoutId.current);
-		}
-		if (performance.now() - lastTime.current > sampleRateMs) {
-			sampleFrameRate();
-		} else {
-			timeoutId.current = setTimeout(() => sampleFrameRate(timeoutMs), timeoutMs);
-		}
-	};
-
-	return { startMeasure, endMeasure, countFrames };
-};