@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

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

@@ -1,25 +0,0 @@
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-
-import type { ColumnState } from './column-state';
-
-export interface ResizeState {
-	cols: ColumnState[];
-	widths: number[];
-	maxSize: number;
-	overflow: boolean;
-	tableWidth: number;
-	isScaled?: boolean;
-}
-export interface ResizeStateWithAnalytics {
-	resizeState: ResizeState;
-	table: ContentNodeWithPos;
-	changed: boolean;
-	attributes: {
-		position: number;
-		count: number;
-		totalRowCount: number;
-		totalColumnCount: number;
-		widthsBefore: number[];
-		widthsAfter: number[];
-	};
-}

package/src/pm-plugins/table-resizing/utils/unit-to-number.ts

@@ -1 +0,0 @@
-export const unitToNumber = (unit: string | null): number => (unit ? parseInt(unit, 10) : 0);

package/src/pm-plugins/table-selection-keymap.ts

@@ -1,64 +0,0 @@
-import { type IntlShape } from 'react-intl-next/src/types';
-
-import {
-	bindKeymapArrayWithCommand,
-	bindKeymapWithCommand,
-	moveLeft,
-	moveRight,
-	selectColumn,
-	selectRow,
-	selectTable,
-	shiftArrowUp,
-} from '@atlaskit/editor-common/keymaps';
-import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-
-import { type PluginInjectionAPI } from '../types';
-
-import {
-	arrowLeftFromTable,
-	arrowRightFromTable,
-	modASelectTable,
-	selectColumns,
-	selectRows,
-	shiftArrowUpFromTable,
-} from './commands/selection';
-
-export function tableSelectionKeymapPlugin(
-	pluginInjectionApi?: PluginInjectionAPI,
-	getIntl?: () => IntlShape,
-): SafePlugin {
-	const list = {};
-	const editorSelectionAPI = pluginInjectionApi?.selection;
-	const ariaNotifyPlugin = pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify;
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	bindKeymapWithCommand(moveRight.common!, arrowRightFromTable(editorSelectionAPI)(), list);
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	bindKeymapWithCommand(moveLeft.common!, arrowLeftFromTable(editorSelectionAPI)(), list);
-
-	bindKeymapArrayWithCommand(
-		selectColumn,
-		selectColumns(editorSelectionAPI, ariaNotifyPlugin, getIntl)(true),
-		list,
-	);
-
-	bindKeymapArrayWithCommand(
-		selectRow,
-		selectRows(editorSelectionAPI, ariaNotifyPlugin, getIntl)(true),
-		list,
-	);
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	bindKeymapWithCommand(shiftArrowUp.common!, shiftArrowUpFromTable(editorSelectionAPI)(), list);
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	bindKeymapWithCommand(selectTable.common!, modASelectTable(editorSelectionAPI)(), list);
-
-	return keymap(list) as SafePlugin;
-}

package/src/pm-plugins/table-size-selector.ts

@@ -1,39 +0,0 @@
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-
-type SizeSelectorPluginState = {
-	isSelectorOpen: boolean;
-	targetRef?: HTMLElement;
-};
-
-export const pluginKey = new PluginKey<SizeSelectorPluginState>('tableSizeSelectorPlugin');
-
-export const createPlugin = (dispatch: Dispatch) => {
-	return new SafePlugin<SizeSelectorPluginState>({
-		key: pluginKey,
-		state: {
-			init: () => ({
-				isSelectorOpen: false,
-			}),
-			apply: (tr, currentPluginState) => {
-				const meta = tr.getMeta(pluginKey);
-
-				if (meta) {
-					const keys = Object.keys(meta) as Array<keyof SizeSelectorPluginState>;
-					const changed = keys.some((key) => {
-						return currentPluginState[key] !== meta[key];
-					});
-
-					if (changed) {
-						const newState = { ...currentPluginState, ...meta };
-
-						dispatch(pluginKey, newState);
-						return newState;
-					}
-				}
-				return currentPluginState;
-			},
-		},
-	});
-};

package/src/pm-plugins/table-width-in-comment-fix.ts

@@ -1,113 +0,0 @@
-/*
-	Existing legacy tables in Comment editor have set attributes:
-	- width = 760
-	- layout = 'default'.
-
-	When "Support Table in Comment" FF is enabled, table resizing (and table alignment in Confluence comments) is turned.
-	It results in (ED-24795) all exising tables being set 760px width. Instead they all should inherit width from
-	the editor container until a user decided to edit their old comment and set a custom table width themselves.
-
-	This plugin exists to fix the described issue. It ensures that once "Support Table in Comment" FF turned on,
-	existing tables continue to inherit the width of editor container and are 'left-aligned' by default.
-*/
-
-import rafSchedule from 'raf-schd';
-
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
-
-import { ALIGN_START } from './utils/alignment';
-
-type TableWidthInCommentFixPluginState = {
-	documentHasLoadedOnce: boolean;
-};
-
-export const pluginKey = new PluginKey<TableWidthInCommentFixPluginState>(
-	'tableWidthInCommentFixPlugin',
-);
-const getPluginState = (state: EditorState): TableWidthInCommentFixPluginState | undefined | null =>
-	state && pluginKey.getState(state);
-
-const createPlugin = (dispatch: Dispatch, isTableAlignmentEnabled: boolean) => {
-	return new SafePlugin({
-		key: pluginKey,
-		state: {
-			init() {
-				return {
-					documentHasLoadedOnce: false,
-				};
-			},
-			apply(tr, pluginState) {
-				const meta = tr.getMeta(pluginKey);
-				if (meta) {
-					const keys = Object.keys(meta) as Array<keyof TableWidthInCommentFixPluginState>;
-					const changed = keys.some((key) => {
-						return pluginState[key] !== meta[key];
-					});
-
-					if (changed) {
-						const newState = { ...pluginState, ...meta };
-
-						dispatch(pluginKey, newState);
-						return newState;
-					}
-				}
-
-				return pluginState;
-			},
-		},
-		view: () => {
-			return {
-				update(editorView) {
-					const { state } = editorView;
-					const pluginState = getPluginState(state);
-					if (!pluginState) {
-						return;
-					}
-					const { documentHasLoadedOnce } = pluginState;
-
-					if (documentHasLoadedOnce) {
-						return;
-					}
-
-					const { table } = state.schema.nodes;
-					rafSchedule(() => {
-						const tr = editorView.state.tr;
-						let tableWidthAndLayoutUpdated = false;
-						editorView.state.doc.descendants((node, pos) => {
-							const isTable = node.type === table;
-							const width = node.attrs.width;
-							const layout = node.attrs.layout;
-							if (isTable && width === akEditorDefaultLayoutWidth && layout === 'default') {
-								tableWidthAndLayoutUpdated = true;
-								tr.setNodeMarkup(pos, undefined, {
-									...node.attrs,
-									width: null,
-									layout: isTableAlignmentEnabled ? ALIGN_START : 'default',
-								});
-								return false;
-							}
-							// Returning false here because don't need to change nested tables
-							return false;
-						});
-						if (tableWidthAndLayoutUpdated) {
-							tr.setMeta('addToHistory', false);
-							editorView.dispatch(tr);
-						}
-					})();
-
-					editorView.dispatch(
-						state.tr.setMeta(pluginKey, {
-							documentHasLoadedOnce: true,
-						}),
-					);
-				},
-			};
-		},
-	});
-};
-
-export { createPlugin };

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

@@ -1,153 +0,0 @@
-/**
- * A plugin for handle table custom widths
- * Has login to scan the document, add width value to table's width attribute when necessary
- * Also holds resizing state to hide / show table controls
- */
-
-import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import {
-	akEditorDefaultLayoutWidth,
-	akEditorFullWidthLayoutWidth,
-	akEditorWideLayoutWidth,
-} from '@atlaskit/editor-shared-styles';
-
-import { TABLE_MAX_WIDTH } from './table-resizing/utils/consts';
-import { ALIGN_START } from './utils/alignment';
-
-type TableWidthPluginState = {
-	resizing: boolean;
-	tableLocalId: string;
-	tableRef: HTMLTableElement | null;
-};
-
-export const pluginKey = new PluginKey<TableWidthPluginState>('tableWidthPlugin');
-
-const createPlugin = (
-	dispatch: Dispatch,
-	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
-	fullWidthEnabled: boolean,
-	isTableScalingEnabled: boolean,
-	isTableAlignmentEnabled: boolean,
-	isCommentEditor: boolean,
-) => {
-	return new SafePlugin({
-		key: pluginKey,
-		state: {
-			init() {
-				return {
-					resizing: false,
-					tableLocalId: '',
-					tableRef: null,
-				};
-			},
-			apply(tr, pluginState) {
-				const meta = tr.getMeta(pluginKey);
-				if (meta) {
-					const keys = Object.keys(meta) as Array<keyof TableWidthPluginState>;
-					const changed = keys.some((key) => {
-						return pluginState[key] !== meta[key];
-					});
-
-					if (changed) {
-						const newState = { ...pluginState, ...meta };
-
-						dispatch(pluginKey, newState);
-						return newState;
-					}
-				}
-
-				return pluginState;
-			},
-		},
-		appendTransaction: (transactions, oldState, newState) => {
-			// When document first load in Confluence, initially it is an empty document
-			// and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
-			// what we need to do is to add width attr to all tables in the real document
-			// isReplaceDocumentOperation is checking if the transaction is the one that replace the empty document with the real document
-			const isReplaceDocumentOperation = isReplaceDocOperation(transactions, oldState);
-
-			const referentialityTr = transactions.find((tr) => tr.getMeta('referentialityTableInserted'));
-
-			const shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
-			const shouldPatchTableAlignment = fullWidthEnabled && isTableAlignmentEnabled;
-
-			if (
-				!isReplaceDocumentOperation &&
-				((!shouldPatchTableWidth && !shouldPatchTableAlignment) || !referentialityTr)
-			) {
-				return null;
-			}
-
-			const { table } = newState.schema.nodes;
-			const tr = newState.tr;
-
-			if (isReplaceDocumentOperation && !isCommentEditor) {
-				newState.doc.forEach((node, offset) => {
-					if (node.type === table) {
-						const width = node.attrs.width;
-						const layout = node.attrs.layout;
-
-						if (!width && layout) {
-							let tableWidthCal;
-
-							if (fullWidthEnabled) {
-								tableWidthCal = akEditorFullWidthLayoutWidth;
-							} else {
-								switch (layout) {
-									case 'wide':
-										tableWidthCal = akEditorWideLayoutWidth;
-										break;
-									case 'full-width':
-										tableWidthCal = akEditorFullWidthLayoutWidth;
-										break;
-									// when in fix-width appearance, no need to assign value to table width attr
-									// as when table is created, width attr is null by default, table rendered using layout attr
-									default:
-										tableWidthCal = akEditorDefaultLayoutWidth;
-										break;
-								}
-							}
-
-							const { width, ...rest } = node.attrs;
-
-							if (tableWidthCal) {
-								tr.step(
-									new SetAttrsStep(offset, {
-										width: tableWidthCal,
-										...rest,
-									}),
-								);
-							}
-						}
-					}
-				});
-			}
-
-			if (referentialityTr) {
-				referentialityTr.steps.forEach((step) => {
-					step.getMap().forEach((_, __, newStart, newEnd) => {
-						newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
-							if (node.type === table) {
-								if (shouldPatchTableWidth && node.attrs.width !== TABLE_MAX_WIDTH) {
-									tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
-								}
-								if (shouldPatchTableAlignment) {
-									tr.setNodeAttribute(pos, 'layout', ALIGN_START);
-								}
-							}
-						});
-					});
-				});
-			}
-
-			return tr;
-		},
-	});
-};
-
-export { createPlugin };

package/src/pm-plugins/transforms/column-width.ts

@@ -1,249 +0,0 @@
-import type { CellAttributes } from '@atlaskit/adf-schema';
-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 { AttrStep } from '@atlaskit/editor-prosemirror/transform';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { fg } from '@atlaskit/platform-feature-flags';
-
-import type { PluginInjectionAPI } from '../../types';
-import { isMinCellWidthTable, hasTableBeenResized } from '../table-resizing/utils/colgroup';
-import { getTableContainerElementWidth, getTableElementWidth } from '../table-resizing/utils/misc';
-import { getResizeState } from '../table-resizing/utils/resize-state';
-import { scaleTableTo } from '../table-resizing/utils/scale-table';
-import type { ResizeState } from '../table-resizing/utils/types';
-
-/**
- * Given a new ResizeState object, create a transaction that replaces and updates the table node based on new state.
- * @param resizeState
- * @param table
- * @param start
- * @returns
- */
-export const updateColumnWidths =
-	(
-		resizeState: ResizeState,
-		table: PMNode,
-		start: number,
-		api: PluginInjectionAPI | undefined | null,
-	) =>
-	(tr: Transaction): Transaction => {
-		const map = TableMap.get(table);
-		const updatedCellsAttrs: { [key: number]: CellAttributes } = {};
-		const steps: Array<AttrStep> = [];
-
-		// calculating new attributes for each cell
-		for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-			for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-				let { width } = resizeState.cols[columnIndex];
-				if (resizeState.isScaled) {
-					// Ensure that the width is an integer if the table has been scaled
-					width = Math.floor(width);
-				}
-				const mapIndex = rowIndex * map.width + columnIndex;
-				const cellPos = map.map[mapIndex];
-				const attrs = updatedCellsAttrs[cellPos] || {
-					// Ignored via go/ees005
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					...table.nodeAt(cellPos)!.attrs,
-				};
-				const colspan = attrs.colspan || 1;
-
-				if (attrs.colwidth && attrs.colwidth.length > colspan) {
-					attrs.colwidth = attrs.colwidth.slice(0, colspan);
-				}
-
-				// Rowspanning cell that has already been handled
-				if (rowIndex && map.map[mapIndex] === map.map[mapIndex - map.width]) {
-					continue;
-				}
-				const colspanIndex = colspan === 1 ? 0 : columnIndex - map.colCount(cellPos);
-				if (attrs.colwidth && attrs.colwidth[colspanIndex] === width) {
-					continue;
-				}
-
-				let colwidths = attrs.colwidth
-					? attrs.colwidth.slice()
-					: Array.from({ length: colspan }, (_) => 0);
-
-				colwidths[colspanIndex] = width;
-				if (colwidths.length > colspan) {
-					colwidths = colwidths.slice(0, colspan);
-				}
-				updatedCellsAttrs[cellPos] = {
-					...attrs,
-					colwidth: colwidths.includes(0) ? undefined : colwidths,
-				};
-			}
-		}
-
-		// updating all cells with new attributes
-		const seen: { [key: number]: boolean } = {};
-		for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
-			for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
-				const mapIndex = rowIndex * map.width + columnIndex;
-				const pos = map.map[mapIndex];
-				const cell = table.nodeAt(pos);
-				if (!seen[pos] && cell) {
-					if (updatedCellsAttrs[pos]) {
-						steps.push(
-							new AttrStep(
-								pos + start,
-								'colwidth',
-								updatedCellsAttrs[pos].colwidth === undefined
-									? null
-									: updatedCellsAttrs[pos].colwidth,
-							),
-						);
-					}
-					seen[pos] = true;
-				}
-			}
-		}
-
-		if (api?.batchAttributeUpdates && fg('platform_editor_batch_steps_table')) {
-			const batchStep = api.batchAttributeUpdates.actions.batchSteps({ steps, doc: tr.doc });
-			tr.step(batchStep);
-		} else {
-			steps.forEach((s) => {
-				tr.step(s);
-			});
-		}
-
-		return tr;
-	};
-
-/**
- * This function is called when user inserts/deletes a column in a table to;
- * - rescale all columns (if the table did not overflow before the insertion)
- * - and update column widths.
- *
- * This is done manually to avoid a multi-dispatch in TableComponent. See [ED-8288].
- * @param table
- * @param view
- * @returns Updated transaction with rescaled columns for a given table
- */
-export const rescaleColumns =
-	(
-		isTableScalingEnabled = false,
-		isTableFixedColumnWidthsOptionEnabled = false,
-		shouldUseIncreasedScalingPercent = false,
-		api: PluginInjectionAPI | undefined | null,
-		isCommentEditor = false,
-	) =>
-	(table: ContentNodeWithPos, view: EditorView | undefined) =>
-	(tr: Transaction): Transaction => {
-		if (!view) {
-			return tr;
-		}
-
-		const newTable = tr.doc.nodeAt(table.pos);
-		const domAtPos = view.domAtPos.bind(view);
-		const maybeTable = domAtPos(table.start).node;
-		const maybeTableElement = maybeTable instanceof HTMLElement ? maybeTable : null;
-		const tableRef = maybeTableElement?.closest('table');
-
-		if (!tableRef || !newTable) {
-			return tr;
-		}
-
-		const isResized = hasTableBeenResized(table.node);
-
-		let previousTableInfo = {
-			width: 0,
-			possibleMaxWidth: 0,
-			isResized,
-		};
-
-		const tableDepth = view.state.doc.resolve(table.pos).depth;
-		let shouldScale = isTableScalingEnabled && tableDepth === 0;
-
-		if (shouldScale && isTableFixedColumnWidthsOptionEnabled) {
-			shouldScale = newTable.attrs.displayMode !== 'fixed';
-		}
-
-		if (shouldScale) {
-			previousTableInfo = {
-				width: getTableElementWidth(table.node),
-				possibleMaxWidth: getTableContainerElementWidth(table.node),
-				isResized,
-			};
-		} else {
-			previousTableInfo = {
-				// when table is resized the tableRef client width will be 1px larger than colGroup, which is used in calculations
-				width: isResized ? tableRef.clientWidth - 1 : tableRef.clientWidth,
-				/** the is the width the table can reach before overflowing */
-				possibleMaxWidth: tableRef?.parentElement?.clientWidth || 0,
-				isResized,
-			};
-		}
-
-		// determine the new table, based on new width
-		const newTableInfo = {
-			noOfColumns: TableMap.get(newTable).width,
-		};
-
-		if (!newTableInfo.noOfColumns || newTableInfo.noOfColumns <= 0) {
-			return tr;
-		}
-
-		const averageColumnWidth = previousTableInfo.width / newTableInfo.noOfColumns;
-
-		// If the table has not been resized (i.e. all columns will have the same width) and every column width is bigger than the minimum column width
-		// we skip updating the size of columns here.
-		if (!previousTableInfo.isResized && averageColumnWidth > tableCellMinWidth) {
-			return tr;
-		}
-
-		const wasTableInOverflow = previousTableInfo.width > previousTableInfo.possibleMaxWidth;
-
-		// If the table has not been resized, and each column width is smaller than the minimum column width
-		// Or if the table has been resized, but each column width is either 48px or null
-		// we update the table to have 48px for each column
-		if (
-			(!previousTableInfo.isResized && averageColumnWidth <= tableCellMinWidth) ||
-			(previousTableInfo.isResized && isMinCellWidthTable(table.node))
-		) {
-			const widths = new Array(newTableInfo.noOfColumns).fill(tableCellMinWidth);
-			const cols = widths.map((_, index) => ({
-				width: tableCellMinWidth,
-				minWidth: tableCellMinWidth,
-				index,
-			}));
-
-			const minWidthResizeState = {
-				cols,
-				widths,
-				maxSize: previousTableInfo.possibleMaxWidth,
-				tableWidth: previousTableInfo.width,
-				overflow: wasTableInOverflow,
-			};
-			return updateColumnWidths(minWidthResizeState, table.node, table.start, api)(tr);
-		}
-
-		let resizeState = getResizeState({
-			minWidth: tableCellMinWidth,
-			table: table.node,
-			start: table.start,
-			tableRef,
-			domAtPos,
-			maxSize: previousTableInfo.possibleMaxWidth,
-			isTableScalingEnabled: shouldScale,
-			shouldUseIncreasedScalingPercent,
-			isCommentEditor,
-		});
-		// Two scenarios that require scaling:
-		//   1. If the new table width will result in the table going into overflow
-		//      we resize the cells to avoid it (e.g. adding a column)
-		//   2. If the new table width will be shorter than the parent width, scale columns to fit parent
-		if (
-			(!wasTableInOverflow && resizeState.overflow) ||
-			resizeState.tableWidth < resizeState.maxSize
-		) {
-			resizeState = scaleTableTo(resizeState, previousTableInfo.possibleMaxWidth);
-		}
-
-		return updateColumnWidths(resizeState, table.node, table.start, api)(tr);
-	};