@atlaskit/editor-plugin-table 7.25.10 → 7.25.12

package/src/pm-plugins/drag-and-drop/actions.ts

@@ -4,7 +4,7 @@ import type { TableDirection } from '../../types';
 
 import type { DropTargetType } from './consts';
 
-export interface DragAndDropAction<T, D> {
+interface DragAndDropAction<T, D> {
 	type: T;
 	data: D;
 }
@@ -15,7 +15,7 @@ export const DragAndDropActionType = {
 	TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU',
 } as const;
 
-export type DragAndDropSetDropTargetAction = DragAndDropAction<
+type DragAndDropSetDropTargetAction = DragAndDropAction<
 	typeof DragAndDropActionType.SET_DROP_TARGET,
 	{
 		type: DropTargetType;
@@ -24,14 +24,14 @@ export type DragAndDropSetDropTargetAction = DragAndDropAction<
 	}
 >;
 
-export type DragAndDropClearDropTargetAction = DragAndDropAction<
+type DragAndDropClearDropTargetAction = DragAndDropAction<
 	typeof DragAndDropActionType.CLEAR_DROP_TARGET,
 	{
 		decorationSet: DecorationSet;
 	}
 >;
 
-export type DragAndDropToggleDragMenuAction = DragAndDropAction<
+type DragAndDropToggleDragMenuAction = DragAndDropAction<
 	typeof DragAndDropActionType.TOGGLE_DRAG_MENU,
 	{
 		isDragMenuOpen: boolean;

package/src/pm-plugins/drag-and-drop/commands.ts

@@ -14,11 +14,11 @@ import { pluginKey } from './plugin-key';
 import type { TriggerType } from './types';
 
 // TODO: This command is a placeholder example. Please replace this if required.
-export const getDecorations = (state: EditorState): DecorationSet => {
+const getDecorations = (state: EditorState): DecorationSet => {
 	return pluginKey.getState(state)?.decorationSet || DecorationSet.empty;
 };
 
-export const updatePluginStateDecorations = (
+const updatePluginStateDecorations = (
 	state: EditorState,
 	decorations: Decoration[],
 	key: TableDecorations,

package/src/pm-plugins/drag-and-drop/index.ts

@@ -1,5 +1,2 @@
 export { createPlugin } from './plugin';
 export { pluginKey } from './plugin-key';
-export type { DragAndDropPluginState } from './types';
-
-export { setDropTarget, clearDropTarget } from './commands';

package/src/pm-plugins/drag-and-drop/plugin.ts

@@ -224,6 +224,9 @@ const destroyFn = (
 								isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
 							}
 
+							if (isTableScalingEnabled && isCommentEditor) {
+								isTableScalingEnabledOnCurrentTable = true;
+							}
 							const shouldUseIncreasedScalingPercent =
 								(isTableScalingWithFixedColumnWidthsOptionEnabled &&
 									fg('platform.editor.table.use-increased-scaling-percent')) ||
@@ -236,6 +239,7 @@ const destroyFn = (
 								isTableScalingEnabledOnCurrentTable,
 								undefined,
 								shouldUseIncreasedScalingPercent,
+								isCommentEditor,
 							);
 						}
 					}

package/src/pm-plugins/drag-and-drop/utils/index.ts

@@ -1,3 +1 @@
-export { getDraggableDataFromEvent } from './monitor';
-
 export { autoScrollerFactory } from './autoscrollers';

package/src/pm-plugins/safari-delete-composition-text-issue-workaround.ts

@@ -13,7 +13,7 @@ interface SafariDeleteCompositionTextIssueWorkaroundPluginState {
 	decorations: DecorationSet;
 }
 
-export const tableSafariDeleteCompositionTextIssueWorkaroundKey =
+const tableSafariDeleteCompositionTextIssueWorkaroundKey =
 	new PluginKey<SafariDeleteCompositionTextIssueWorkaroundPluginState>(
 		'tableSafariDeleteCompositionTextIssueWorkaround',
 	);

package/src/pm-plugins/sticky-headers/index.ts

@@ -3,4 +3,3 @@ export { pluginKey } from './plugin-key';
 export type { StickyPluginState, RowStickyState } from './types';
 
 export { findStickyHeaderForTable } from './util';
-export { updateStickyState, removeStickyState } from './commands';

package/src/pm-plugins/sticky-headers/types.ts

@@ -7,12 +7,12 @@ export type RowStickyState = {
 
 export type StickyPluginState = RowStickyState[];
 
-export type UpdateSticky = {
+type UpdateSticky = {
 	name: 'UPDATE';
 	state: RowStickyState;
 };
 
-export type RemoveSticky = {
+type RemoveSticky = {
 	name: 'REMOVE';
 	pos: number;
 };

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

@@ -20,7 +20,7 @@ type TableAnalyticsPluginState = {
 	lastTrigger: LastTrigger | undefined;
 };
 
-export const pluginKey = new PluginKey<TableAnalyticsPluginState>('tableOverflowAnalyticsPlugin');
+const pluginKey = new PluginKey<TableAnalyticsPluginState>('tableOverflowAnalyticsPlugin');
 
 export const META_KEYS = {
 	OVERFLOW_TRIGGER: 'tableOverflowTrigger',

package/src/pm-plugins/table-resizing/commands.ts

@@ -100,7 +100,7 @@ export const setDragging = (
 		(originalTr) => (tr || originalTr).setMeta('is-resizer-resizing', true),
 	);
 
-export const setLastClick = (
+const setLastClick = (
 	lastClick: { x: number; y: number; time: number } | null,
 	transform?: (tr: Transaction) => Transaction,
 ) =>

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -39,6 +39,8 @@ import {
 	resizeColumnAndTable,
 	updateControls,
 } from './utils';
+import { TABLE_OFFSET_IN_COMMENT_EDITOR } from './utils/consts';
+import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './utils/misc';
 import { scaleResizeState } from './utils/resize-column';
 
 export const handleMouseDown = (
@@ -88,13 +90,18 @@ export const handleMouseDown = (
 		dom = dom.closest('table') as HTMLTableElement;
 	}
 
-	const maxSize = getTableMaxWidth({
-		table: originalTable,
-		tableStart: start,
-		state,
-		layout: originalTable.attrs.layout,
-		getEditorContainerWidth,
-	});
+	let maxSize = 0;
+	if (isTableScalingEnabled && isCommentEditor && !originalTable.attrs?.width) {
+		maxSize = editorWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
+	} else {
+		maxSize = getTableMaxWidth({
+			table: originalTable,
+			tableStart: start,
+			state,
+			layout: originalTable.attrs.layout,
+			getEditorContainerWidth,
+		});
+	}
 
 	let shouldScale = tableDepth === 0 && isTableScalingEnabled;
 	const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
@@ -106,6 +113,15 @@ export const handleMouseDown = (
 		shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
 	}
 
+	let shouldUseIncreasedScalingPercent =
+		isTableScalingWithFixedColumnWidthsOptionEnabled &&
+		fg('platform.editor.table.use-increased-scaling-percent');
+
+	if (isTableScalingEnabled && isCommentEditor) {
+		shouldScale = tableDepth === 0;
+		shouldUseIncreasedScalingPercent = true;
+	}
+
 	let resizeState = getResizeState({
 		minWidth: tableCellMinWidth,
 		maxSize,
@@ -114,11 +130,8 @@ export const handleMouseDown = (
 		start,
 		domAtPos,
 		isTableScalingEnabled: shouldScale,
-		shouldUseIncreasedScalingPercent:
-			(isTableScalingWithFixedColumnWidthsOptionEnabled &&
-				fg('platform.editor.table.use-increased-scaling-percent')) ||
-			// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
-			(isTableScalingEnabled && !!isCommentEditor),
+		shouldUseIncreasedScalingPercent,
+		isCommentEditor: isCommentEditor || false,
 	});
 
 	if (
@@ -150,6 +163,7 @@ export const handleMouseDown = (
 			tableRef: dom,
 			tableNode: originalTable,
 			editorWidth,
+			shouldUseIncreasedScalingPercent,
 		});
 	}
 
@@ -269,6 +283,11 @@ export const handleMouseDown = (
 						tr.setNodeAttribute(start - 1, 'width', newResizeState.maxSize);
 					}
 				} else {
+					const scalePercent =
+						isTableScalingEnabled && isCommentEditor && !table.attrs?.width
+							? getScalingPercentForTableWithoutWidth(originalTable, dom)
+							: getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
+
 					const newResizeState = resizeColumn(
 						resizeState,
 						colIndex,
@@ -277,7 +296,7 @@ export const handleMouseDown = (
 						originalTable,
 						resizingSelectedColumns ? selectedColumns : undefined,
 						shouldScale,
-						shouldUseIncreasedScalingPercent,
+						scalePercent,
 					);
 					tr = updateColumnWidths(newResizeState, table, start, api)(tr);
 				}
@@ -362,7 +381,7 @@ export const handleMouseDown = (
 
 		const resizedDelta = clientX - dragging.startX;
 
-		if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
+		if (isNewColumnResizingEnabled && !isTableNested(state, tablePos) && !isCommentEditor) {
 			resizeColumnAndTable({
 				resizeState,
 				colIndex,
@@ -374,6 +393,11 @@ export const handleMouseDown = (
 				isTableAlignmentEnabled,
 			});
 		} else {
+			const scalePercent =
+				isTableScalingEnabled && isCommentEditor && !table.attrs?.width
+					? getScalingPercentForTableWithoutWidth(table, dom)
+					: getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
+			// This function is called for Full-page/Fixed-page tables and table that have width attr value in Comment editor
 			resizeColumn(
 				resizeState,
 				colIndex,
@@ -382,7 +406,7 @@ export const handleMouseDown = (
 				table,
 				undefined,
 				shouldScale,
-				shouldUseIncreasedScalingPercent,
+				scalePercent,
 			);
 		}
 

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

@@ -4,7 +4,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
-import { getTableScalingPercent } from './misc';
+import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -21,20 +21,26 @@ export const generateColgroup = (
 	table: PmNode,
 	tableRef?: HTMLElement,
 	shouldUseIncreasedScalingPercent?: boolean,
+	isCommentEditor?: boolean,
 ) => {
 	const cols: Col[] = [];
 	const map = TableMap.get(table);
+
 	table.content.firstChild!.content.forEach((cell) => {
 		const colspan = cell.attrs.colspan || 1;
 		if (Array.isArray(cell.attrs.colwidth)) {
 			// We slice here to guard against our colwidth array having more entries
 			// Than the we actually span. We'll patch the document at a later point.
 			if (tableRef) {
-				const scalePercent = getTableScalingPercent(
-					table,
-					tableRef,
-					shouldUseIncreasedScalingPercent,
-				);
+				// if we have tableRef here, isTableScalingEnabled is true
+				let scalePercent = 1;
+
+				if (isCommentEditor && !table.attrs?.width) {
+					scalePercent = getScalingPercentForTableWithoutWidth(table, tableRef);
+				} else {
+					scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
+				}
+
 				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
 					const fixedColWidth = getColWidthFix(width, map.width);
 					const scaledWidth = fixedColWidth * scalePercent;
@@ -81,6 +87,7 @@ export const insertColgroupFromNode = (
 	isTableScalingEnabled = false,
 	shouldRemove = true,
 	shouldUseIncreasedScalingPercent = false,
+	isCommentEditor = false,
 ): HTMLCollection => {
 	let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
 	if (colgroup && shouldRemove) {
@@ -91,6 +98,7 @@ export const insertColgroupFromNode = (
 		table,
 		isTableScalingEnabled ? tableRef ?? undefined : undefined,
 		shouldUseIncreasedScalingPercent,
+		isCommentEditor,
 	);
 	if (shouldRemove) {
 		tableRef?.insertBefore(colgroup, tableRef?.firstChild);
@@ -105,6 +113,8 @@ export const hasTableBeenResized = (table: PmNode) => {
 	);
 };
 
+export const hasTableColumnBeenResized = hasTableBeenResized;
+
 /**
  * Check if a table has all the column width set to tableCellMinWidth(48px) or null
  *
@@ -127,11 +137,12 @@ function renderColgroupFromNode(
 	table: PmNode,
 	maybeTableRef: HTMLElement | undefined,
 	shouldUseIncreasedScalingPercent: boolean,
+	isCommentEditor: boolean,
 ): HTMLElement {
 	const rendered = DOMSerializer.renderSpec(document, [
 		'colgroup',
 		{},
-		...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent),
+		...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor),
 	]);
 
 	return rendered.dom as HTMLElement;

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

@@ -1,5 +1,4 @@
 export const COLUMN_MIN_WIDTH = 48;
-export const TABLE_DEFAULT_WIDTH = 760;
 export const TABLE_MAX_WIDTH = 1800;
 export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 export const MAX_SCALING_PERCENT = 0.3;

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

@@ -83,7 +83,7 @@ export const updateStickyMargins = (table: HTMLElement) => {
 	table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
 };
 
-export const applyColWidthsToStickyRow = (
+const applyColWidthsToStickyRow = (
 	// @ts-ignore - CCFE error TS6133: 'colGroup' is declared but its value is never read.
 	colGroup: HTMLTableColElement | null,
 	headerRow: HTMLTableRowElement,
@@ -111,10 +111,7 @@ export const syncStickyRowToTable = (tableRef?: HTMLElement | null) => {
 	applyTableWidthToStickyRow(tableRef, headerRow);
 };
 
-export const applyTableWidthToStickyRow = (
-	tableRef: HTMLElement,
-	headerRow: HTMLTableRowElement,
-) => {
+const applyTableWidthToStickyRow = (tableRef: HTMLElement, headerRow: HTMLTableRowElement) => {
 	const tbody = tableRef.querySelector('tbody')!;
 	const wrapper = tableRef.parentElement;
 

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

@@ -5,44 +5,18 @@ export {
 	getColgroupChildrenLength,
 } from './colgroup';
 export { contentWidth } from './content-width';
-export {
-	getColumnStateFromDOM,
-	getFreeSpace,
-	getCellsRefsInColumn,
-	calculateColumnWidth,
-	addContainerLeftRightPadding,
-} from './column-state';
-export type { ColumnState } from './column-state';
-export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
-export {
-	getResizeState,
-	updateColgroup,
-	getTotalWidth,
-	evenAllColumnsWidths,
-	bulkColumnsResize,
-	areColumnsEven,
-	adjustColumnsWidths,
-} from './resize-state';
+export { getCellsRefsInColumn, calculateColumnWidth } from './column-state';
+export { getResizeState, updateColgroup, evenAllColumnsWidths } from './resize-state';
 export {
 	getLayoutSize,
-	getDefaultLayoutMaxWidth,
 	pointsAtCell,
 	currentColWidth,
-	domCellAround,
 	getTableMaxWidth,
 	getTableElementWidth,
 	getTableContainerElementWidth,
 } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
-export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
-export type { ScaleOptions } from './scale-table';
+export { scaleTable, previewScaleTable } from './scale-table';
 export type { ResizeState, ResizeStateWithAnalytics } from './types';
 export { resizeColumn, resizeColumnAndTable } from './resize-column';
-export {
-	COLUMN_MIN_WIDTH,
-	TABLE_MAX_WIDTH,
-	TABLE_DEFAULT_WIDTH,
-	MAX_SCALING_PERCENT,
-	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
-	TABLE_OFFSET_IN_COMMENT_EDITOR,
-} from './consts';
+export { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from './consts';

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

@@ -6,8 +6,7 @@ import {
 } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
-import { getBreakpoint, mapBreakpointToLayoutMaxWidth } from '@atlaskit/editor-common/ui';
-import { calcTableColumnWidths, containsClassName } from '@atlaskit/editor-common/utils';
+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';
@@ -19,7 +18,7 @@ import {
 
 import type { TableOptions } from '../../../nodeviews/types';
 
-import { hasTableBeenResized } from './colgroup';
+import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import {
 	MAX_SCALING_PERCENT,
 	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
@@ -47,10 +46,6 @@ export function getLayoutSize(
 	return layoutToWidth[tableLayout] || containerWidth;
 }
 
-export function getDefaultLayoutMaxWidth(containerWidth?: number): number {
-	return mapBreakpointToLayoutMaxWidth(getBreakpoint(containerWidth));
-}
-
 // Does the current position point at a cell.
 export function pointsAtCell($pos: ResolvedPos) {
 	return (
@@ -84,16 +79,6 @@ export function currentColWidth(
 	return domWidth / parts;
 }
 
-// Attempts to find a parent TD/TH depending on target element.
-export function domCellAround(target: HTMLElement | null): HTMLElement | null {
-	while (target && target.nodeName !== 'TD' && target.nodeName !== 'TH') {
-		target = containsClassName(target, 'ProseMirror')
-			? null
-			: (target.parentNode as HTMLElement | null);
-	}
-	return target;
-}
-
 interface getTableMaxWidthProps {
 	table: PMNode;
 	tableStart: number;
@@ -154,9 +139,32 @@ export const getTableScalingPercent = (
 	// 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);
+		let 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,

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

@@ -28,13 +28,11 @@ export const resizeColumn = (
 	tableNode: PmNode,
 	selectedColumns?: number[],
 	isTableScalingEnabled = false,
-	shouldUseIncreasedScalingPercent = false,
+	scalePercent = 1,
 ): ResizeState => {
-	let scalePercent = 1;
 	let resizeAmount = amount;
 
 	if (isTableScalingEnabled) {
-		scalePercent = getTableScalingPercent(tableNode, tableRef, shouldUseIncreasedScalingPercent);
 		resizeAmount = amount / scalePercent;
 	}
 
@@ -45,13 +43,7 @@ export const resizeColumn = (
 				? shrinkColumn(resizeState, colIndex, resizeAmount, selectedColumns)
 				: resizeState;
 
-	updateColgroup(
-		newState,
-		tableRef,
-		tableNode,
-		isTableScalingEnabled,
-		shouldUseIncreasedScalingPercent,
-	);
+	updateColgroup(newState, tableRef, tableNode, isTableScalingEnabled, scalePercent);
 
 	return newState;
 };
@@ -143,7 +135,7 @@ export const resizeColumnAndTable = ({
 	);
 
 	// do not apply scaling logic because resize state is already scaled
-	updateColgroup(newState, tableRef, tableNode, false, false);
+	updateColgroup(newState, tableRef, tableNode, false, 1);
 
 	updateTablePreview(
 		tableRef,
@@ -190,7 +182,12 @@ export const scaleResizeState = ({
 	tableRef,
 	tableNode,
 	editorWidth,
-}: TableReferences & { resizeState: ResizeState; editorWidth: number }): ResizeState => {
+	shouldUseIncreasedScalingPercent,
+}: TableReferences & {
+	resizeState: ResizeState;
+	editorWidth: number;
+	shouldUseIncreasedScalingPercent: boolean;
+}): ResizeState => {
 	const isNumberColumnEnabled = tableNode.attrs.isNumberColumnEnabled;
 	const isTableScaled =
 		isNumberColumnEnabled || resizeState.maxSize > getEditorContainerWidth(editorWidth);
@@ -205,7 +202,11 @@ export const scaleResizeState = ({
 		return resizeState;
 	}
 
-	const scalePercent = getTableScalingPercent(tableNode, tableRef);
+	const scalePercent = getTableScalingPercent(
+		tableNode,
+		tableRef,
+		shouldUseIncreasedScalingPercent,
+	);
 	const scaledTableWidth = Math.round(resizeState.tableWidth * scalePercent);
 	let cols = resizeState.cols.map((col) => {
 		return {