@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/pm-plugins/transforms/delete-columns.ts

@@ -1,281 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import { AddColumnStep } from '@atlaskit/custom-steps';
-import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-import type { PluginInjectionAPI } from '../../types';
-import { META_KEYS } from '../table-analytics';
-
-import { rescaleColumns } from './column-width';
-import { splitCellsInColumns } from './split';
-
-const deleteColumnsCustomStep =
-	(rect: Rect) =>
-	(tr: Transaction): Transaction => {
-		const table = findTable(tr.selection);
-		if (!table) {
-			return tr;
-		}
-
-		// Need to split all the merge in the ranges (this is the current behaviour)
-		// Maybe is better to split only the last column?
-		// TODO: ED-26961 - After talking with Roto about this behaviour, he likes when we dont split the columns, I am keeping this for consistency of the current implementation.
-		splitCellsInColumns(tr, table.pos, rect.left, rect.right);
-
-		// Delete the columns
-		const mapStart = tr.mapping.maps.length;
-		const originalDoc = tr.doc;
-		const deletedColumns: number[] = [];
-		for (let i = rect.left; i < rect.right; i++) {
-			const step = AddColumnStep.create(originalDoc, table.pos, i, true);
-			deletedColumns.push(i);
-			// Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			tr.step(step.map(tr.mapping.slice(mapStart))!);
-		}
-
-		const tablePosResult = tr.mapping.mapResult(table.pos);
-		if (tablePosResult.deleted) {
-			const pos = Math.min(tablePosResult.pos, tr.doc.nodeSize - 1);
-			tr.setSelection(Selection.near(tr.doc.resolve(pos)));
-		} else {
-			const newTable = tr.doc.nodeAt(tablePosResult.pos);
-			if (newTable) {
-				const cursorPos = getNextCursorPos(newTable, deletedColumns);
-				tr.setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)));
-			}
-		}
-
-		return tr;
-	};
-
-const deleteColumnsLegacy =
-	(rect: Rect) =>
-	(tr: Transaction): Transaction => {
-		const table = findTable(tr.selection);
-		if (!table) {
-			return tr;
-		}
-
-		const columnsToDelete: number[] = [];
-		for (let i = rect.left; i < rect.right; i++) {
-			columnsToDelete.push(i);
-		}
-
-		if (!columnsToDelete.length) {
-			return tr;
-		}
-
-		const map = TableMap.get(table.node);
-		const rows: PMNode[] = [];
-		const seen: { [key: string]: boolean } = {};
-		const deletedCells: { [key: string]: boolean } = {};
-
-		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) {
-					continue;
-				}
-				const cellsInColumn = map.cellsInRect({
-					left: colIndex,
-					top: 0,
-					right: colIndex + 1,
-					bottom: map.height,
-				});
-				if (columnsToDelete.indexOf(colIndex) === -1) {
-					// decrement colspans for col-spanning cells that overlap deleted columns
-					if (cellsInColumn.indexOf(cellPos) > -1 && !seen[cellPos]) {
-						let overlappingCols = 0;
-						columnsToDelete.forEach((colIndexToDelete) => {
-							if (
-								colIndex < colIndexToDelete &&
-								cell.attrs.colspan + colIndex - 1 >= colIndexToDelete
-							) {
-								overlappingCols += 1;
-							}
-						});
-						if (overlappingCols > 0) {
-							const attrs: CellAttributes = {
-								...cell.attrs,
-								colspan: cell.attrs.colspan - overlappingCols,
-							};
-							if (cell.attrs.colwidth) {
-								const minColIndex = Math.min(...columnsToDelete);
-								const pos = minColIndex > 0 ? minColIndex - map.colCount(cellPos) : 0;
-								const colwidth = cell.attrs.colwidth.slice() || [];
-								colwidth.splice(pos, overlappingCols);
-								attrs.colwidth = colwidth;
-							}
-							const newCell = cell.type.createChecked(attrs, cell.content, cell.marks);
-							rowCells.push(newCell);
-							seen[cellPos] = true;
-							continue;
-						}
-					} else if (deletedCells[cellPos]) {
-						// if we're removing a col-spanning cell, we need to add missing cells to columns to the right
-						const attrs: CellAttributes = {
-							...cell.attrs,
-							colspan: 1,
-							rowspan: 1,
-						};
-						if (cell.attrs.colwidth) {
-							const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
-							attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
-						}
-						const newCell = cell.type.createChecked(
-							attrs,
-							cell.type.schema.nodes.paragraph.createChecked(),
-							cell.marks,
-						);
-						rowCells.push(newCell);
-						continue;
-					}
-
-					// normal cells that we want to keep
-					if (!seen[cellPos]) {
-						seen[cellPos] = true;
-						rowCells.push(cell);
-					}
-				} else if (cellsInColumn.indexOf(cellPos) > -1) {
-					deletedCells[cellPos] = true;
-				}
-			}
-
-			if (rowCells.length) {
-				rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
-			}
-		}
-
-		if (!rows.length) {
-			return tr;
-		}
-
-		const newTable = table.node.type.createChecked(table.node.attrs, rows, table.node.marks);
-
-		const fixedTable = fixRowSpans(newTable);
-		if (fixedTable === null) {
-			return tr;
-		}
-
-		const cursorPos = getNextCursorPos(newTable, columnsToDelete);
-
-		return (
-			tr
-				.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
-				// move cursor to the left of the deleted columns if possible, otherwise - to the first column
-				.setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)))
-		);
-	};
-
-function getNextCursorPos(table: PMNode, deletedColumns: number[]): number {
-	const minColumn = Math.min(...deletedColumns);
-	const nextColumnWithCursor = minColumn > 0 ? minColumn - 1 : 0;
-	const map = TableMap.get(table);
-	return map.map[nextColumnWithCursor];
-}
-
-// returns an array of numbers, each number indicates the minimum rowSpan in each row
-function getMinRowSpans(table: PMNode): number[] {
-	const minRowSpans: number[] = [];
-	for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
-		const rowSpans: number[] = [];
-		const row = table.child(rowIndex);
-		for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
-			const cell = row.child(colIndex);
-			rowSpans.push(cell.attrs.rowspan);
-		}
-		minRowSpans[rowIndex] = Math.min(...rowSpans);
-	}
-
-	return minRowSpans;
-}
-
-function fixRowSpans(table: PMNode): PMNode | null {
-	const map = TableMap.get(table);
-	const minRowSpans = getMinRowSpans(table);
-	if (!minRowSpans.some((rowspan) => rowspan > 1)) {
-		return table;
-	}
-
-	const rows: PMNode[] = [];
-	for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-		const row = table.child(rowIndex);
-		if (minRowSpans[rowIndex] === 1) {
-			rows.push(row);
-		} else {
-			const rowCells: PMNode[] = [];
-			for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
-				const cell = row.child(colIndex);
-				const rowspan = cell.attrs.rowspan - minRowSpans[rowIndex] + 1;
-				if (rowspan < 1) {
-					return null;
-				}
-				const newCell = cell.type.createChecked(
-					{
-						...cell.attrs,
-						rowspan,
-					},
-					cell.content,
-					cell.marks,
-				);
-				rowCells.push(newCell);
-			}
-			rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
-		}
-	}
-
-	if (!rows.length) {
-		return null;
-	}
-
-	return table.type.createChecked(table.attrs, rows, table.marks);
-}
-
-export const deleteColumns =
-	(
-		rect: Rect,
-		allowCustomStep: boolean,
-		api: PluginInjectionAPI | undefined | null,
-		view?: EditorView,
-		isTableScalingEnabled = false,
-		isTableFixedColumnWidthsOptionEnabled = false,
-		shouldUseIncreasedScalingPercent = false,
-		isCommentEditor = false,
-	) =>
-	(tr: Transaction) => {
-		let updatedTr = tr;
-		updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
-			name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN,
-		});
-
-		if (allowCustomStep) {
-			updatedTr = deleteColumnsCustomStep(rect)(updatedTr);
-		} else {
-			updatedTr = deleteColumnsLegacy(rect)(updatedTr);
-		}
-		const table = findTable(updatedTr.selection);
-		if (table) {
-			updatedTr = rescaleColumns(
-				isTableScalingEnabled,
-				isTableFixedColumnWidthsOptionEnabled,
-				shouldUseIncreasedScalingPercent,
-				api,
-				isCommentEditor,
-			)(
-				table,
-				view,
-			)(updatedTr);
-		}
-		return updatedTr;
-	};

package/src/pm-plugins/transforms/delete-rows.ts

@@ -1,154 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { Selection } from '@atlaskit/editor-prosemirror/state';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { findTable } from '@atlaskit/editor-tables/utils';
-
-import { pluginKey } from '../plugin-key';
-
-import { mergeEmptyColumns } from './merge';
-
-export const deleteRows =
-	(rect: Rect, isHeaderRowRequired: boolean = false) =>
-	(tr: Transaction): Transaction => {
-		const table = findTable(tr.selection);
-		if (!table) {
-			return tr;
-		}
-
-		const rowsToDelete: number[] = [];
-
-		const map = TableMap.get(table.node);
-
-		for (let i = rect.top; i < rect.bottom; i++) {
-			// skip header row if its required
-			if (isHeaderRowRequired) {
-				const cell = table.node.nodeAt(map.map[i * map.width]);
-				if (cell && cell.type !== cell.type.schema.nodes.tableHeader) {
-					rowsToDelete.push(i);
-				}
-			} else {
-				rowsToDelete.push(i);
-			}
-		}
-
-		if (!rowsToDelete.length) {
-			return tr;
-		}
-
-		const rows: PMNode[] = [];
-		const seen: { [key: string]: boolean } = {};
-		const deletedCells: { [key: string]: boolean } = {};
-
-		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) {
-					continue;
-				}
-				const cellsInRow = map.cellsInRect({
-					left: 0,
-					top: rowIndex,
-					right: map.width,
-					bottom: rowIndex + 1,
-				});
-				if (rowsToDelete.indexOf(rowIndex) === -1 && !seen[cellPos]) {
-					// decrement rowspans for row-spanning cells that overlap deleted rows
-					if (cellsInRow.indexOf(cellPos) > -1) {
-						let overlappingRows = 0;
-						rowsToDelete.forEach((rowIndexToDelete) => {
-							if (
-								rowIndex < rowIndexToDelete &&
-								cell.attrs.rowspan + rowIndex - 1 >= rowIndexToDelete
-							) {
-								overlappingRows += 1;
-							}
-						});
-						if (overlappingRows > 0) {
-							const newCell = cell.type.createChecked(
-								{
-									...cell.attrs,
-									rowspan: cell.attrs.rowspan - overlappingRows,
-								},
-								cell.content,
-								cell.marks,
-							);
-							rowCells.push(newCell);
-							seen[cellPos] = true;
-							continue;
-						}
-					} else if (deletedCells[cellPos]) {
-						// if we're removing a row-spanning cell, we need to add missing cells to rows below
-						const attrs: CellAttributes = {
-							...cell.attrs,
-							colspan: 1,
-							rowspan: 1,
-						};
-						if (cell.attrs.colwidth) {
-							const pos = colIndex > 0 ? colIndex - map.colCount(cellPos) : 0;
-							attrs.colwidth = cell.attrs.colwidth.slice().splice(pos, 1);
-						}
-						const newCell = cell.type.createChecked(
-							attrs,
-							cell.type.schema.nodes.paragraph.createChecked(),
-							cell.marks,
-						);
-						rowCells.push(newCell);
-						continue;
-					}
-
-					// normal cells that we want to keep
-					if (!seen[cellPos]) {
-						seen[cellPos] = true;
-						rowCells.push(cell);
-					}
-				} else if (cellsInRow.indexOf(cellPos) > -1) {
-					deletedCells[cellPos] = true;
-				}
-			}
-
-			if (rowCells.length) {
-				rows.push(row.type.createChecked(row.attrs, rowCells, row.marks));
-			}
-		}
-
-		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;
-		}
-		const cursorPos = getNextCursorPos(newTable, rowsToDelete);
-
-		// If we delete a row we should also clean up the hover selection
-		tr.setMeta(pluginKey, {
-			type: 'CLEAR_HOVER_SELECTION',
-			data: {
-				isInDanger: false,
-				isWholeTableInDanger: false,
-			},
-		});
-
-		return (
-			tr
-				.replaceWith(table.pos, table.pos + table.node.nodeSize, fixedTable)
-				// move cursor before the deleted rows if possible, otherwise - to the first row
-				.setSelection(Selection.near(tr.doc.resolve(table.pos + cursorPos)))
-		);
-	};
-
-function getNextCursorPos(table: PMNode, deletedRows: number[]): number {
-	const minRow = Math.min(...deletedRows);
-	const nextRowWithCursor = minRow > 0 ? minRow - 1 : 0;
-	const map = TableMap.get(table);
-	return map.map[nextRowWithCursor * map.width];
-}

package/src/pm-plugins/transforms/fix-tables.ts

@@ -1,249 +0,0 @@
-import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-	akEditorDefaultLayoutWidth,
-	akEditorWideLayoutWidth,
-} from '@atlaskit/editor-shared-styles';
-
-import type { ReportInvalidNodeAttrs } from '../../types';
-import { calculateColumnWidth, getCellsRefsInColumn } from '../table-resizing/utils/column-state';
-import { contentWidth } from '../table-resizing/utils/content-width';
-import { getLayoutSize } from '../table-resizing/utils/misc';
-
-const validateTableCellNodeAttrs = (
-	{ colspan, rowspan, tableLocalId }: { colspan?: number; rowspan?: number; tableLocalId: string },
-	reportInvalidTableCellSpanAttrs: ReportInvalidNodeAttrs,
-): void => {
-	if (colspan && colspan < 0) {
-		reportInvalidTableCellSpanAttrs({
-			nodeType: 'tableCell',
-			attribute: 'colspan',
-			reason: 'negative value',
-			tableLocalId,
-			spanValue: colspan,
-		});
-	}
-
-	if (rowspan && rowspan < 0) {
-		reportInvalidTableCellSpanAttrs({
-			nodeType: 'tableCell',
-			attribute: 'rowspan',
-			reason: 'negative value',
-			tableLocalId,
-			spanValue: rowspan,
-		});
-	}
-	return;
-};
-
-// We attempt to patch the document when we have extra, unneeded, column widths
-// Take this node for example:
-//
-//    ['td', { colwidth: [100, 100, 100], colspan: 2 }]
-//
-// This row only spans two columns, yet it contains widths for 3.
-// We remove the third width here, assumed duplicate content.
-export const removeExtraneousColumnWidths = (
-	node: PMNode,
-	basePos: number,
-	tr: Transaction,
-	reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs,
-): boolean => {
-	let hasProblems = false;
-
-	tr = replaceCells(tr, node, basePos, (cell) => {
-		const { colwidth, colspan, rowspan } = cell.attrs;
-
-		if (reportInvalidTableCellSpanAttrs) {
-			validateTableCellNodeAttrs(
-				{ colspan, rowspan, tableLocalId: node.attrs.localId },
-				reportInvalidTableCellSpanAttrs,
-			);
-		}
-
-		if (colwidth && colwidth.length > colspan) {
-			hasProblems = true;
-			return cell.type.createChecked(
-				{
-					...cell.attrs,
-					colwidth: colwidth.slice(0, colspan),
-				},
-				cell.content,
-				cell.marks,
-			);
-		}
-
-		return cell;
-	});
-
-	if (hasProblems) {
-		return true;
-	}
-
-	return false;
-};
-
-export const fixTables = (
-	tr: Transaction,
-	reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs,
-): Transaction | undefined => {
-	let hasProblems = false;
-	tr.doc.descendants((node, pos) => {
-		if (node.type.name === 'table') {
-			// in the unlikely event of having to fix multiple tables at the same time
-			hasProblems = removeExtraneousColumnWidths(
-				node,
-				tr.mapping.map(pos),
-				tr,
-				reportInvalidTableCellSpanAttrs,
-			);
-		}
-	});
-
-	if (hasProblems) {
-		return tr;
-	}
-};
-
-// When we get a table with an 'auto' attribute, we want to:
-// 1. render with table-layout: auto
-// 2. capture the column widths
-// 3. set the column widths as attributes, and remove the 'auto' attribute,
-//    so the table renders the same, but is now fixed-width
-//
-// This can be used to migrate table appearances from other sources that are
-// usually rendered with 'auto'.
-//
-// We use this when migrating TinyMCE tables for Confluence, for example:
-// https://pug.jira-dev.com/wiki/spaces/AEC/pages/3362882215/How+do+we+map+TinyMCE+tables+to+Fabric+tables
-export const fixAutoSizedTable = (
-	view: EditorView,
-	tableNode: PMNode,
-	tableRef: HTMLTableElement,
-	tablePos: number,
-	opts: { containerWidth: number },
-): Transaction => {
-	let { tr } = view.state;
-	const domAtPos = view.domAtPos.bind(view);
-	const tableStart = tablePos + 1;
-	const colWidths = parseDOMColumnWidths(domAtPos, tableNode, tableStart, tableRef);
-	const totalContentWidth = colWidths.reduce((acc, current) => acc + current, 0);
-	const tableLayout = getLayoutBasedOnWidth(totalContentWidth);
-	const maxLayoutSize = getLayoutSize(tableLayout, opts.containerWidth, {});
-
-	// Content width will generally not meet the constraints of the layout
-	// whether it be below or above, so we scale our columns widths
-	// to meet these requirements
-	let scale = 1;
-	if (totalContentWidth !== maxLayoutSize) {
-		scale = maxLayoutSize / totalContentWidth;
-	}
-
-	const scaledColumnWidths = colWidths.map((width) => Math.floor(width * scale));
-
-	tr = replaceCells(tr, tableNode, tablePos, (cell, _rowIndex, colIndex) => {
-		const newColWidths = scaledColumnWidths.slice(colIndex, colIndex + cell.attrs.colspan);
-		return cell.type.createChecked(
-			{
-				...cell.attrs,
-				colwidth: newColWidths.length ? newColWidths : null,
-			},
-			cell.content,
-			cell.marks,
-		);
-	});
-
-	// clear autosizing on the table node
-	return tr
-		.setNodeMarkup(tablePos, undefined, {
-			...tableNode.attrs,
-			layout: tableLayout,
-			__autoSize: false,
-		})
-		.setMeta('addToHistory', false);
-};
-
-const getLayoutBasedOnWidth = (totalWidth: number) => {
-	if (totalWidth > akEditorWideLayoutWidth) {
-		return 'full-width';
-	} else if (totalWidth > akEditorDefaultLayoutWidth && totalWidth < akEditorWideLayoutWidth) {
-		return 'wide';
-	} else {
-		return 'default';
-	}
-};
-
-function parseDOMColumnWidths(
-	domAtPos: (pos: number) => { node: Node; offset: number },
-	tableNode: PMNode,
-	tableStart: number,
-	tableRef: HTMLTableElement,
-): Array<number> {
-	const row = tableRef.querySelector('tr');
-
-	if (!row) {
-		return [];
-	}
-
-	const cols: Array<number> = [];
-
-	for (let col = 0; col < row.childElementCount; col++) {
-		const currentCol = row.children[col];
-		const colspan = Number(currentCol.getAttribute('colspan') || 1);
-		for (let span = 0; span < colspan; span++) {
-			const colIdx = col + span;
-			const cells = getCellsRefsInColumn(colIdx, tableNode, tableStart, domAtPos);
-			const colWidth = calculateColumnWidth(cells, (_, col) => {
-				// Ignored via go/ees005
-				// eslint-disable-next-line @atlaskit/editor/no-as-casting
-				return contentWidth(col as HTMLElement, tableRef).width;
-			});
-
-			cols[colIdx] = Math.max(colWidth, tableCellMinWidth);
-		}
-	}
-
-	return cols;
-}
-
-// TODO: ED-26961 - move to prosemirror-utils
-const replaceCells = (
-	tr: Transaction,
-	table: PMNode,
-	tablePos: number,
-	modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode,
-): Transaction => {
-	const rows: PMNode[] = [];
-	let modifiedCells = 0;
-	for (let rowIndex = 0; rowIndex < table.childCount; rowIndex++) {
-		const row = table.child(rowIndex);
-		const cells: PMNode[] = [];
-
-		for (let colIndex = 0; colIndex < row.childCount; colIndex++) {
-			const cell = row.child(colIndex);
-
-			// TODO: ED-26961 - The rowIndex and colIndex are not accurate in a merged cell scenario
-			// e.g. table with 5 columns might have only one cell in a row, colIndex will be 1, where it should be 4
-			const node = modifyCell(cell, rowIndex, colIndex);
-			if (node.sameMarkup(cell) === false) {
-				modifiedCells++;
-			}
-			cells.push(node);
-		}
-
-		if (cells.length) {
-			rows.push(row.type.createChecked(row.attrs, cells, row.marks));
-		}
-	}
-
-	// Check if the table has changed before replacing.
-	// If no cells are modified our counter will be zero.
-	if (rows.length && modifiedCells !== 0) {
-		const newTable = table.type.createChecked(table.attrs, rows, table.marks);
-		return tr.replaceWith(tablePos, tablePos + table.nodeSize, newTable);
-	}
-
-	return tr;
-};