@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

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

@@ -1,282 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import {
-	getParentNodeWidth,
-	getTableContainerWidth,
-	layoutToWidth,
-} from '@atlaskit/editor-common/node-width';
-import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import type { NodeSpec, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-	akEditorFullWidthLayoutWidth,
-	akEditorGutterPaddingDynamic,
-	akEditorTableNumberColumnWidth,
-	akEditorGutterPaddingReduced,
-	akEditorFullPageNarrowBreakout,
-} from '@atlaskit/editor-shared-styles';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-
-import type { TableOptions } from '../../../nodeviews/types';
-
-import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
-import {
-	MAX_SCALING_PERCENT,
-	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
-	TABLE_MAX_WIDTH,
-} from './consts';
-
-// Translates named layouts in number values.
-export function getLayoutSize(
-	tableLayout: 'default' | 'wide' | 'full-width',
-	containerWidth: number = 0,
-	options: TableOptions,
-): number {
-	const { isFullWidthModeEnabled } = options;
-
-	if (isFullWidthModeEnabled) {
-		let padding: number = akEditorGutterPaddingDynamic();
-		if (
-			containerWidth <= akEditorFullPageNarrowBreakout &&
-			expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
-		) {
-			padding = akEditorGutterPaddingReduced;
-		}
-
-		return containerWidth
-			? Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth)
-			: akEditorFullWidthLayoutWidth;
-	}
-
-	const calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
-	if (calculatedTableWidth !== 'inherit') {
-		return calculatedTableWidth;
-	}
-
-	return layoutToWidth[tableLayout] || containerWidth;
-}
-
-// Does the current position point at a cell.
-export function pointsAtCell($pos: ResolvedPos) {
-	return (
-		($pos.parent.type.spec as NodeSpec & { tableRole: string }).tableRole === 'row' &&
-		$pos.nodeAfter
-	);
-}
-
-// Get the current col width, handles colspan.
-export function currentColWidth(
-	view: EditorView,
-	cellPos: number,
-	{ colspan, colwidth }: CellAttributes,
-): number {
-	const width = colwidth && colwidth[colwidth.length - 1];
-	if (width) {
-		return width;
-	}
-	// Not fixed, read current width from DOM
-	// Ignored via go/ees005
-	// eslint-disable-next-line @atlaskit/editor/no-as-casting
-	let domWidth = (view.domAtPos(cellPos + 1).node as HTMLElement).offsetWidth;
-	let parts = colspan || 0;
-	if (colwidth) {
-		for (let i = 0; i < (colspan || 0); i++) {
-			if (colwidth[i]) {
-				domWidth -= colwidth[i];
-				parts--;
-			}
-		}
-	}
-
-	return domWidth / parts;
-}
-
-interface getTableMaxWidthProps {
-	table: PMNode;
-	tableStart: number;
-	state: EditorState;
-	layout: 'default' | 'wide' | 'full-width';
-	getEditorContainerWidth: GetEditorContainerWidth;
-}
-
-export const getTableMaxWidth = ({
-	table,
-	tableStart,
-	state,
-	layout,
-	getEditorContainerWidth,
-}: getTableMaxWidthProps) => {
-	const containerWidth = getEditorContainerWidth();
-	const parentWidth = getParentNodeWidth(tableStart, state, containerWidth);
-
-	let maxWidth =
-		parentWidth || table.attrs.width || getLayoutSize(layout, containerWidth.width, {});
-
-	if (table.attrs.isNumberColumnEnabled) {
-		maxWidth -= akEditorTableNumberColumnWidth;
-	}
-
-	return maxWidth as number;
-};
-
-/**
- *
- * @param table
- * @returns calculated width of <table /> element derived from sum of colwidths on tableCell or tableHeader nodes or falls back to container width
- */
-export const getTableElementWidth = (table: PMNode) => {
-	if (hasTableBeenResized(table)) {
-		// TODO: ED-26961 - is there a scenario where ADF columns are SMALLER than container width?
-		return calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
-	}
-
-	return getTableContainerElementWidth(table);
-};
-
-export const getTableContainerElementWidth = (table: PMNode) => {
-	return getTableContainerWidth(table);
-};
-
-// eslint-disable-next-line jsdoc/require-example
-/**
- * This function is used to set the max width for table resizer container.
- * @param isCommentEditor Whether the editor is in comment mode.
- * @param isChromelessEditor Whether the editor is chromeless.
- * @param isTableScalingEnabled Whether table scaling is enabled.
- * @returns The CSS max-width value
- */
-export const getTableResizerContainerMaxWidthInCSS = (
-	isCommentEditor?: boolean,
-	isChromelessEditor?: boolean,
-	isTableScalingEnabled?: boolean,
-): string => {
-	const maxResizerWidthForNonCommentEditor = isTableScalingEnabled
-		? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${TABLE_MAX_WIDTH}px)`
-		: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${TABLE_MAX_WIDTH}px)`;
-	return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
-};
-
-// eslint-disable-next-line jsdoc/require-example
-/**
- * This function is used in NodeView for TableResizer to set the max width for table resizer container
- * @param node The ProseMirror node representing the table.
- * @param isCommentEditor Whether the editor is in comment mode.
- * @param isChromelessEditor Whether the editor is chromeless.
- * @returns The CSS max-width value for the table resizer container.
- */
-export const getTableResizerItemWidth = (
-	node: PMNode,
-	isCommentEditor?: boolean,
-	isChromelessEditor?: boolean,
-): number | undefined => {
-	const tableWidthAttribute = getTableContainerWidth(node);
-	if (!node.attrs.width && (isCommentEditor || isChromelessEditor)) {
-		// width undefined would make .resizer-item width to be `auto`
-		return undefined;
-	}
-	return tableWidthAttribute;
-};
-
-// eslint-disable-next-line jsdoc/require-example
-/**
- * This function is used to set the CSS width value for the table resizer-item.
- * Because comment and chromeless editors don't have container-type: inline-size set,
- * we need to calculate the width based on the table node width.
- * If the table node width is not set, it will return 'auto'.
- * This is used in table toDOM
- * @param node The ProseMirror node representing the table.
- * @param isCommentEditor Whether the editor is in comment mode.
- * @param isChromelessEditor Whether the editor is chromeless.
- * @returns The CSS width value for the table container.
- */
-export const getTableResizerItemWidthInCSS = (
-	node: PMNode,
-	isCommentEditor?: boolean,
-	isChromelessEditor?: boolean,
-): string => {
-	const tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
-	return tableWidthAttribute ? `${tableWidthAttribute}px` : 'auto';
-};
-
-// eslint-disable-next-line jsdoc/require-example
-/**
- * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
- * Which is applied to the table resizer container.
- * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
- * So we set dynamic containerWidth from JS to CSS property.
- * @param node The ProseMirror node representing the table.
- * @param isCommentEditor Whether the editor is in comment mode.
- * @param isChromelessEditor Whether the editor is chromeless.
- * @param isTableScalingEnabled Whether table scaling is enabled.
- * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
- * @returns The CSS width value for the table.
- */
-export const getTableResizerContainerForFullPageWidthInCSS = (
-	node: PMNode,
-	isTableScalingEnabled?: boolean,
-): string => {
-	const tableWidth = getTableContainerElementWidth(node);
-	// for full page appearance
-	if (isTableScalingEnabled) {
-		return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${tableWidth}px)`;
-	}
-	return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${tableWidth}px)`;
-};
-
-export const getTableScalingPercent = (
-	table: PMNode,
-	tableRef: HTMLElement | null,
-	shouldUseIncreasedScalingPercent?: boolean,
-) => {
-	const maxScalingPercent = shouldUseIncreasedScalingPercent
-		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
-		: MAX_SCALING_PERCENT;
-
-	const tableWidth = getTableContainerElementWidth(table);
-	const renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
-	// minus 1 here to avoid any 1px scroll in Firefox
-	let scalePercent = (renderWidth - 1) / tableWidth;
-	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
-
-	return Math.min(scalePercent, 1);
-};
-
-// This function is used to default and full-width tables in Comment/Chromeless editors
-// These tables don't have node.attrs.width set. Their pm-table-wrapper width depend on the editor container width.
-// actual table node width can be calculated as sum of colwidth values if table's columns were resized.
-// If colwidth are not set, table columns are not resized, they all are equal widths.
-export const getScalingPercentForTableWithoutWidth = (
-	table: PMNode,
-	tableRef: HTMLElement | null,
-) => {
-	// are table columns resized
-	if (hasTableColumnBeenResized(table)) {
-		const tableWidth = calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
-		const renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
-
-		// minus 1 here to avoid any 1px scroll in Firefox
-		return (renderWidth - 1) / tableWidth;
-	}
-
-	// When table cols are not resized and table width is not set,
-	// tableWidth is equal to renderWidth
-	return 1;
-};
-
-export const getStaticTableScalingPercent = (
-	table: PMNode,
-	tableRenderWidth: number,
-	shouldUseIncreasedScalingPercent?: boolean,
-) => {
-	const maxScalingPercent = shouldUseIncreasedScalingPercent
-		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
-		: MAX_SCALING_PERCENT;
-
-	const tableWidth = getTableContainerElementWidth(table);
-	// minus 1 here to avoid any 1px scroll in Firefox
-	let scalePercent = (tableRenderWidth - 1) / tableWidth;
-	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);
-	return Math.min(scalePercent, 1);
-};

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,34 +0,0 @@
-// Resize a given column by an amount from the current state
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-
-import { growColumn, shrinkColumn } from './resize-logic';
-import { updateColgroup } from './resize-state';
-import type { ResizeState } from './types';
-
-export const resizeColumn = (
-	resizeState: ResizeState,
-	colIndex: number,
-	amount: number,
-	tableRef: HTMLElement | null,
-	tableNode: PmNode,
-	selectedColumns?: number[],
-	isTableScalingEnabled = false,
-	scalePercent = 1,
-): ResizeState => {
-	let resizeAmount = amount;
-
-	if (isTableScalingEnabled) {
-		resizeAmount = amount / scalePercent;
-	}
-
-	const newState =
-		resizeAmount > 0
-			? growColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-			: resizeAmount < 0
-				? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
-				: resizeState;
-
-	updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, scalePercent);
-
-	return newState;
-};

package/src/pm-plugins/table-resizing/utils/resize-logic.ts

@@ -1,289 +0,0 @@
-import type { ColumnState } from './column-state';
-import { getFreeSpace } from './column-state';
-import { bulkColumnsResize, getTotalWidth } from './resize-state';
-import type { ResizeState } from './types';
-
-export const growColumn = (
-	state: ResizeState,
-	colIndex: number,
-	amount: number,
-	selectedColumns?: number[],
-): ResizeState => {
-	// can't grow if columns don't exist or it's the last column
-	if (!state.cols[colIndex] || !state.cols[colIndex + 1]) {
-		return state;
-	}
-	const res = moveSpaceFrom(state, colIndex + 1, colIndex, amount);
-	const remaining = amount - res.amount;
-	let newState = res.state;
-
-	if (remaining > 0) {
-		newState = stackSpace(newState, colIndex, remaining).state;
-	}
-	if (selectedColumns && selectedColumns.length > 1) {
-		return bulkColumnsResize(newState, selectedColumns, colIndex);
-	}
-
-	return newState;
-};
-
-export const shrinkColumn = (
-	state: ResizeState,
-	colIndex: number,
-	amount: number,
-	selectedColumns?: number[],
-): ResizeState => {
-	// can't shrink if columns don't exist
-	if (!state.cols[colIndex]) {
-		return state;
-	}
-	// try to shrink dragging column by giving from the column to the right first
-	const res = moveSpaceFrom(state, colIndex, colIndex + 1, -amount);
-	let newState = res.state;
-
-	const isOverflownTable = getTotalWidth(newState) > newState.maxSize;
-	const isLastColumn = !newState.cols[colIndex + 1];
-	// stop resizing the last column once table is not overflown
-	if (isLastColumn && !isOverflownTable) {
-		return newState;
-	}
-
-	const remaining = amount + res.amount;
-	if (remaining < 0) {
-		newState = stackSpace(newState, colIndex + 1, remaining).state;
-	}
-	if (selectedColumns && selectedColumns.length > 1) {
-		return bulkColumnsResize(newState, selectedColumns, colIndex);
-	}
-
-	return newState;
-};
-
-export function reduceSpace(
-	state: ResizeState,
-	amount: number,
-	ignoreCols: number[] = [],
-): ResizeState {
-	let remaining = amount;
-
-	// keep trying to resolve resize request until we run out of free space,
-	// or nothing to resize
-	while (remaining > 0) {
-		// filter candidates only with free space
-		const candidates = state.cols.filter((column) => {
-			return getFreeSpace(column) && ignoreCols.indexOf(column.index) === -1;
-		});
-		if (candidates.length === 0) {
-			break;
-		}
-		const requestedResize = Math.floor(remaining / candidates.length);
-		if (requestedResize === 0) {
-			break;
-		}
-
-		candidates.forEach((candidate) => {
-			let newWidth = candidate.width - requestedResize;
-			if (newWidth < candidate.minWidth) {
-				// If the new requested width is less than our min
-				// Calc what width we didn't use, we'll try extract that
-				// from other cols.
-				const remainder = candidate.minWidth - newWidth;
-				newWidth = candidate.minWidth;
-				remaining = remaining - requestedResize + remainder;
-			} else {
-				remaining -= requestedResize;
-			}
-
-			state = {
-				...state,
-				cols: [
-					...state.cols.slice(0, candidate.index),
-					{ ...candidate, width: newWidth },
-					...state.cols.slice(candidate.index + 1),
-				],
-			};
-		});
-	}
-
-	return state;
-}
-
-enum ColType {
-	SOURCE = 'src',
-	DEST = 'dest',
-}
-
-// TODO: ED-26961 - should handle when destIdx:
-// - is beyond the range, and then not give it back
-function moveSpaceFrom(
-	state: ResizeState,
-	srcIdx: number,
-	destIdx: number,
-	amount: number,
-	useFreeSpace: boolean = true,
-): { state: ResizeState; amount: number } {
-	const srcCol = state.cols[srcIdx];
-	const destCol = state.cols[destIdx];
-
-	if (useFreeSpace) {
-		const freeSpace = getFreeSpace(srcCol);
-		// if taking more than source column's free space, only take that much
-		if (amountFor(ColType.DEST)(amount) > freeSpace) {
-			amount = amount > 0 ? freeSpace : -freeSpace;
-		}
-	}
-
-	// if the source column shrinks past its min size, don't give the space away
-	if (
-		amountFor(ColType.SOURCE)(amount) < 0 &&
-		widthFor(ColType.SOURCE)(amount, srcCol, destCol) < srcCol.minWidth
-	) {
-		amount = srcCol.width - srcCol.minWidth;
-	}
-
-	const newDest = destCol
-		? { ...destCol, width: widthFor(ColType.DEST)(amount, srcCol, destCol) }
-		: undefined;
-	if (!newDest && amountFor(ColType.SOURCE)(amount) < 0) {
-		// non-zero-sum game, ensure that we're not removing more than the total table width either
-		const totalWidth = getTotalWidth(state);
-		if (
-			totalWidth - srcCol.width + widthFor(ColType.SOURCE)(amount, srcCol, destCol) <
-			state.maxSize
-		) {
-			// would shrink table below max width, stop it
-			amount = state.maxSize - (totalWidth - srcCol.width) - srcCol.width - 1;
-		}
-	}
-
-	const newSrc = {
-		...srcCol,
-		width: widthFor(ColType.SOURCE)(amount, srcCol, destCol),
-	};
-
-	const newCols = state.cols
-		.map((existingCol, idx) => (idx === srcIdx ? newSrc : idx === destIdx ? newDest : existingCol))
-		.filter(Boolean) as ColumnState[];
-
-	return { state: { ...state, cols: newCols }, amount };
-}
-
-function stackSpace(
-	state: ResizeState,
-	destIdx: number,
-	amount: number,
-): { state: ResizeState; remaining: number } {
-	let candidates = getCandidates(state, destIdx, amount);
-
-	while (candidates.length && amount) {
-		// search for most (or least) free space in candidates
-		const candidateIdx = findNextFreeColumn(candidates, amount);
-		if (candidateIdx === -1) {
-			// stack to the right -> growing the dragging column and go overflow
-			if (amount > 0) {
-				return {
-					state: {
-						...state,
-						cols: [
-							...state.cols.slice(0, destIdx),
-							{
-								...state.cols[destIdx],
-								width: state.cols[destIdx].width + amount,
-							},
-							...state.cols.slice(destIdx + 1),
-						],
-					},
-					remaining: amount,
-				};
-			}
-
-			// stacking to the left, if no free space remains
-			break;
-		}
-
-		const column = candidates.find((col) => col.index === candidateIdx);
-		if (!column || getFreeSpace(column) <= 0) {
-			// no more columns with free space remain
-			break;
-		}
-
-		const res = moveSpaceFrom(state, column.index, destIdx, amount);
-		state = res.state;
-		amount -= res.amount;
-
-		candidates = candidates.filter((col) => col.index !== candidateIdx);
-	}
-
-	return {
-		state,
-		remaining: amount,
-	};
-}
-
-function findNextFreeColumn(columns: ColumnState[], amount: number): number {
-	if (columns.length === 0) {
-		return -1;
-	}
-	const direction = amount < 0 ? 'left' : 'right';
-	if (direction === 'left') {
-		columns = columns.slice().reverse();
-	}
-
-	let freeIndex = -1;
-	columns.forEach((column) => {
-		if (getFreeSpace(column) && freeIndex === -1) {
-			freeIndex = column.index;
-		}
-	});
-
-	if (freeIndex === -1) {
-		return -1;
-	}
-
-	return freeIndex;
-}
-
-function amountFor(colType: ColType): (amount: number) => number {
-	return (amount) =>
-		colType === ColType.SOURCE ? (amount > 0 ? -amount : amount) : amount < 0 ? -amount : amount;
-}
-
-function widthFor(
-	colType: ColType,
-): (amount: number, srcCol: ColumnState, destCol: ColumnState) => number {
-	return (amount, srcCol, destCol) =>
-		(colType === ColType.SOURCE ? srcCol : destCol).width + amountFor(colType)(amount);
-}
-
-function getCandidates(state: ResizeState, destIdx: number, amount: number): ColumnState[] {
-	const candidates = state.cols;
-
-	// only consider rows after the selected column in the direction of resize
-	return amount < 0 ? candidates.slice(0, destIdx) : candidates.slice(destIdx + 1);
-}
-
-/**
- * Update the given column based on resizeAmount, maintaining all other columns
- */
-export function updateAffectedColumn(
-	resizeState: ResizeState,
-	colIndex: number,
-	resizeAmount: number,
-): ResizeState {
-	const updatedCols = resizeState.cols.map((col, index) => {
-		if (index === colIndex) {
-			const newWidth = Math.max(col.width + resizeAmount, col.minWidth);
-			return {
-				...col,
-				width: newWidth,
-			};
-		}
-		return col;
-	});
-
-	return {
-		...resizeState,
-		tableWidth: updatedCols.reduce((acc, col) => acc + col.width, 0),
-		cols: updatedCols,
-	};
-}