@atlaskit/editor-plugin-table 12.1.14 → 12.2.0

package/src/nodeviews/TableResizer.tsx

@@ -81,7 +81,7 @@ import {
 
 interface TableResizerProps {
 	width: number;
-	maxWidth: number;
+	maxWidth: number | string;
 	containerWidth: number;
 	lineLength: number;
 	updateWidth: (width: number) => void;
@@ -717,9 +717,15 @@ export const TableResizer = ({
 	const handleTableSizeChangeOnKeypress = useCallback(
 		(step: number) => {
 			const newWidth = width + step;
-
-			if (newWidth > maxWidth || newWidth < resizerMinWidth) {
-				return;
+			if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+				if (newWidth < resizerMinWidth) {
+					return;
+				}
+			} else {
+				// maxWidth when platform_editor_tables_scaling_css off is always a number
+				if (newWidth > (maxWidth as number) || newWidth < resizerMinWidth) {
+					return;
+				}
 			}
 			handleResizeStop({ width: width, x: 0, y: 0, height: 0 }, { width: step, height: 0 });
 		},
@@ -739,7 +745,6 @@ export const TableResizer = ({
 			if (event.altKey || metaKey || event.shiftKey) {
 				areResizeMetaKeysPressed.current = true;
 			}
-
 			if (event.altKey && metaKey) {
 				if (isBracketKey) {
 					event.preventDefault();

package/src/nodeviews/TableRow.ts

@@ -20,7 +20,11 @@ import type { TableDOMElements } from '../pm-plugins/utils/dom';
 import { getTop, getTree } from '../pm-plugins/utils/dom';
 import { supportedHeaderRow } from '../pm-plugins/utils/nodes';
 import type { TablePluginState } from '../types';
-import { TableCssClassName as ClassName, TableCssClassName } from '../types';
+import {
+	TableCssClassName as ClassName,
+	TableCssClassName,
+	type PluginInjectionAPI,
+} from '../types';
 import {
 	stickyHeaderBorderBottomWidth,
 	stickyRowOffsetTop,
@@ -46,11 +50,31 @@ const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 export default class TableRow extends TableNodeView<HTMLTableRowElement> implements NodeView {
 	private nodeVisibilityObserverCleanupFn?: () => void;
 
+	cleanup = () => {
+		if (this.isStickyHeaderEnabled) {
+			this.unsubscribe();
+
+			this.nodeVisibilityObserverCleanupFn && this.nodeVisibilityObserverCleanupFn();
+
+			const tree = getTree(this.dom);
+			if (tree) {
+				this.makeRowHeaderNotSticky(tree.table, true);
+			}
+
+			this.emitOff(false);
+		}
+
+		if (this.tableContainerObserver) {
+			this.tableContainerObserver.disconnect();
+		}
+	};
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
 		getPos: () => number | undefined,
 		eventDispatcher: EventDispatcher,
+		api?: PluginInjectionAPI,
 	) {
 		super(node, view, getPos, eventDispatcher);
 
@@ -60,6 +84,16 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 		const { pluginConfig } = getPluginState(view.state);
 
 		this.isStickyHeaderEnabled = !!pluginConfig.stickyHeaders;
+
+		if (
+			api?.limitedMode?.sharedState.currentState()?.limitedModePluginKey.getState(view.state)
+				?.documentSizeBreachesThreshold
+		) {
+			this.isStickyHeaderEnabled = false;
+			// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+			document.addEventListener('limited-mode-activated', this.cleanup);
+		}
+
 		const pos = this.getPos();
 		this.isInNestedTable = false;
 		if (pos) {
@@ -177,6 +211,9 @@ export default class TableRow extends TableNodeView<HTMLTableRowElement> impleme
 			this.emitOff(true);
 		}
 
+		// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
+		document.removeEventListener('limited-mode-activated', this.cleanup);
+
 		if (this.tableContainerObserver) {
 			this.tableContainerObserver.disconnect();
 		}

package/src/nodeviews/table-node-views.ts

@@ -71,6 +71,6 @@ export const tableHeaderView = (options: TableCellViewOptions) => {
 
 export const tableRowView = (options: TableCellViewOptions) => {
 	return (node: PMNode, view: EditorView, getPos: () => number | undefined) => {
-		return new TableRow(node, view, getPos, options.eventDispatcher);
+		return new TableRow(node, view, getPos, options.eventDispatcher, options.pluginInjectionApi);
 	};
 };

package/src/nodeviews/table.tsx

@@ -13,6 +13,7 @@ import type {
 	getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import type { LimitedModePluginState } from '@atlaskit/editor-plugin-limited-mode';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import {
@@ -104,6 +105,10 @@ export default class TableView extends ReactNodeView<Props> {
 			props.portalProviderAPI,
 			props.eventDispatcher,
 			props,
+			undefined,
+			undefined,
+			// @portal-render-immediately
+			true,
 		);
 		this.getPos = props.getPos;
 		this.eventDispatcher = props.eventDispatcher;
@@ -114,10 +119,17 @@ export default class TableView extends ReactNodeView<Props> {
 	}
 
 	getContentDOM() {
+		const isNested = isTableNested(this.view.state, this.getPos());
 		const tableDOMStructure = tableNodeSpecWithFixedToDOM({
 			allowColumnResizing: !!this.reactComponentProps.allowColumnResizing,
 			tableResizingEnabled: !!this.reactComponentProps.allowTableResizing,
 			getEditorContainerWidth: this.reactComponentProps.getEditorContainerWidth,
+			isTableScalingEnabled: this.reactComponentProps.options?.isTableScalingEnabled,
+			shouldUseIncreasedScalingPercent:
+				this.reactComponentProps.options?.shouldUseIncreasedScalingPercent,
+			isCommentEditor: this.reactComponentProps.options?.isCommentEditor,
+			isChromelessEditor: this.reactComponentProps.options?.isChromelessEditor,
+			isNested,
 		}).toDOM(this.node);
 
 		const rendered = DOMSerializer.renderSpec(document, tableDOMStructure) as {
@@ -306,6 +318,9 @@ export default class TableView extends ReactNodeView<Props> {
 					widthPlugin: fakePluginKey,
 					mediaState: fakeMediaPluginKey,
 					tableDragAndDropState: tableDragAndDropPluginKey,
+
+					limitedModePlugin: props.pluginInjectionApi?.limitedMode?.sharedState.currentState()
+						?.limitedModePluginKey as PluginKey<LimitedModePluginState>,
 				}}
 				editorView={props.view}
 				render={(pluginStates) => {
@@ -370,6 +385,7 @@ export default class TableView extends ReactNodeView<Props> {
 							getEditorFeatureFlags={props.getEditorFeatureFlags}
 							dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
 							pluginInjectionApi={props.pluginInjectionApi}
+							limitedMode={pluginStates.limitedModePlugin?.documentSizeBreachesThreshold ?? false}
 						/>
 					);
 				}}
@@ -477,6 +493,12 @@ export const createTableView = (
 	const { allowColumnResizing, allowControls, allowTableResizing, allowTableAlignment } =
 		getPluginConfig(pluginConfig);
 
+	const isTableFixedColumnWidthsOptionEnabled =
+		getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption || false;
+
+	const shouldUseIncreasedScalingPercent =
+		isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+
 	return new TableView({
 		node,
 		view,
@@ -498,6 +520,7 @@ export const createTableView = (
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
 			isCommentEditor,
 			isChromelessEditor,
+			shouldUseIncreasedScalingPercent,
 		},
 		getEditorContainerWidth,
 		getEditorFeatureFlags,

package/src/nodeviews/toDOM.ts

@@ -7,8 +7,17 @@ import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-p
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
-import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
+import {
+	generateColgroup,
+	generateColgroupFromNode,
+	getResizerMinWidth,
+} from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
+import {
+	getTableResizerContainerMaxWidthInCSS,
+	getTableResizerContainerForFullPageWidthInCSS,
+	getTableResizerItemWidthInCSS,
+} from '../pm-plugins/table-resizing/utils/misc';
 
 import { getAlignmentStyle } from './table-container-styles';
 
@@ -17,6 +26,11 @@ type Config = {
 	tableResizingEnabled: boolean;
 	getEditorContainerWidth: GetEditorContainerWidth;
 	isNestingSupported?: boolean;
+	isTableScalingEnabled?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
+	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
+	isNested?: boolean;
 };
 export const tableNodeSpecWithFixedToDOM = (
 	config: Config,
@@ -40,6 +54,10 @@ export const tableNodeSpecWithFixedToDOM = (
 
 			const tableMinWidth = getResizerMinWidth(node);
 
+			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
+
+			const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -48,12 +66,40 @@ export const tableNodeSpecWithFixedToDOM = (
 				'data-table-width': node.attrs.width,
 			};
 
+			// This would be used for table scaling in colgroup CSS
+			// cqw, or px is well supported
+			const resizableTableWidth = expValEquals(
+				'platform_editor_tables_scaling_css',
+				'isEnabled',
+				true,
+			)
+				? isFullPageEditor
+					? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled)
+					: `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`
+				: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${node.attrs.width ?? '100%'})`;
+
 			let colgroup: DOMOutputSpec = '';
 
 			if (config.allowColumnResizing) {
-				colgroup = ['colgroup', {}, ...generateColgroup(node)];
+				if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+					colgroup = [
+						'colgroup',
+						{},
+						...generateColgroupFromNode(
+							node,
+							config.isCommentEditor,
+							config.isChromelessEditor,
+							config.isNested,
+							config.isTableScalingEnabled,
+							config.shouldUseIncreasedScalingPercent,
+						),
+					];
+				} else {
+					colgroup = ['colgroup', {}, ...generateColgroup(node)];
+				}
 			}
 
+			// For Chromeless editor, and nested tables in full page editor
 			const tableContainerDiv = [
 				'div',
 				{
@@ -113,7 +159,10 @@ export const tableNodeSpecWithFixedToDOM = (
 				],
 			];
 
-			if (!config.tableResizingEnabled) {
+			if (
+				!config.tableResizingEnabled ||
+				(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested)
+			) {
 				return [
 					'div',
 					{
@@ -124,8 +173,6 @@ export const tableNodeSpecWithFixedToDOM = (
 				];
 			}
 
-			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
-
 			const tableResizingDiv = [
 				'div',
 				{
@@ -136,7 +183,15 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute});`,
+						style: convertToInlineCss({
+							'--ak-editor-table-gutter-padding': config.isTableScalingEnabled
+								? 'calc(var(--ak-editor--large-gutter-padding) * 2)'
+								: 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
+							'--ak-editor-table-width': resizableTableWidth,
+							width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+								? `var(--ak-editor-table-width)`
+								: `min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute})`,
+						}),
 					},
 					[
 						'div',
@@ -146,12 +201,23 @@ export const tableNodeSpecWithFixedToDOM = (
 								position: 'relative',
 								userSelect: 'auto',
 								boxSizing: 'border-box',
-								'--ak-editor-table-gutter-padding': `${gutterPadding()}`,
 								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
 								'--ak-editor-table-min-width': `${tableMinWidth}px`,
 								minWidth: 'var(--ak-editor-table-min-width)',
-								maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-								width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
+								maxWidth: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+									? getTableResizerContainerMaxWidthInCSS(
+											config.isCommentEditor,
+											config.isChromelessEditor,
+											config.isTableScalingEnabled,
+										)
+									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
+								width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+									? getTableResizerItemWidthInCSS(
+											node,
+											config.isCommentEditor,
+											config.isChromelessEditor,
+										)
+									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
 							}),
 						},
 						[

package/src/nodeviews/types.ts

@@ -14,6 +14,7 @@ export type TableOptions = {
 	isTableScalingEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 };
 
 export interface Props {

package/src/pm-plugins/main.ts

@@ -26,6 +26,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 import {
 	tableCellView,
@@ -131,24 +132,46 @@ export const createPlugin = (
 		return editorView.state;
 	};
 
-	const nodeViews =
-		isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')
-			? undefined
-			: {
-					table: tableView({
-						portalProviderAPI,
-						eventDispatcher,
-						getEditorContainerWidth,
-						getEditorFeatureFlags,
-						dispatchAnalyticsEvent,
-						pluginInjectionApi,
-						isCommentEditor,
-						isChromelessEditor,
-					}),
-					tableRow: tableRowView({ eventDispatcher }),
-					tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
-					tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
-				};
+	const getNodeView = () => {
+		// Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
+		if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+			return {
+				table: tableView({
+					portalProviderAPI,
+					eventDispatcher,
+					getEditorContainerWidth,
+					getEditorFeatureFlags,
+					dispatchAnalyticsEvent,
+					pluginInjectionApi,
+					isCommentEditor,
+					isChromelessEditor,
+				}),
+				tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
+				tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
+				tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
+			};
+		}
+		if (isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')) {
+			return undefined;
+		}
+		return {
+			table: tableView({
+				portalProviderAPI,
+				eventDispatcher,
+				getEditorContainerWidth,
+				getEditorFeatureFlags,
+				dispatchAnalyticsEvent,
+				pluginInjectionApi,
+				isCommentEditor,
+				isChromelessEditor,
+			}),
+			tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
+			tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
+			tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
+		};
+	};
+
+	const nodeViews = getNodeView();
 	return new SafePlugin({
 		state: state,
 		key: pluginKey,

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

@@ -1,11 +1,20 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
-import { COLUMN_MIN_WIDTH } from './consts';
-import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
+import {
+	COLUMN_MIN_WIDTH,
+	MAX_SCALING_PERCENT,
+	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
+} from './consts';
+import {
+	getScalingPercentForTableWithoutWidth,
+	getTableContainerElementWidth,
+	getTableScalingPercent,
+} from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -18,6 +27,131 @@ type Col = Array<string | { [name: string]: string }>;
 export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
 	colwidth - 1 / tableColumnCount;
 
+const generateColStyle = (
+	fixedColWidth: number,
+	tableWidth: number,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isNested?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
+	isNumberColumnEnabled?: boolean,
+	isTableHasWidth?: boolean,
+	hasTableBeenResized?: boolean,
+) => {
+	const maxScalingPercent = shouldUseIncreasedScalingPercent
+		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
+		: MAX_SCALING_PERCENT;
+	const maxScaledRatio = 1 - maxScalingPercent;
+
+	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+	// for nested tables, or chromeless editor, which used non resizable table container
+	if (isNested || isChromelessEditor) {
+		if (hasTableBeenResized) {
+			return `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`;
+		}
+		return `width: ${tableCellMinWidth}px)`;
+	}
+	if (isFullPageEditor || (!isFullPageEditor && isTableHasWidth)) {
+		const scaledPercent = isNumberColumnEnabled
+			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
+			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+		return `width: max(calc(${fixedColWidth}px * ${maxScaledRatio}), calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+	}
+	// table resized to full-width in comment editor
+	// it doesn't have a width attribute, and cols has been resized
+	if (hasTableBeenResized) {
+		const scaledPercent = isNumberColumnEnabled
+			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
+			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+		return `width: max(calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+	}
+	return `width: ${tableCellMinWidth}px`;
+};
+
+export const generateColgroupFromNode = (
+	table: PmNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isNested?: boolean,
+	isTableScalingEnabled?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
+) => {
+	const cols: Col[] = [];
+	const map = TableMap.get(table);
+	const isTableHasWidth = !!table.attrs.width;
+	const isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
+	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+	// Ignored via go/ees005
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	table.content.firstChild!.content.forEach((cell) => {
+		const colspan = cell.attrs.colspan || 1;
+		// if the table has been resized
+		if (Array.isArray(cell.attrs.colwidth)) {
+			cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+				// existing logic for calculating the width of the column
+				const fixedColWidth = getColWidthFix(width, map.width);
+				const tableWidth =
+					isFullPageEditor || (!isFullPageEditor && isTableHasWidth)
+						? getTableContainerElementWidth(table)
+						: calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+				if (isTableScalingEnabled) {
+					cols.push([
+						'col',
+						{
+							style: generateColStyle(
+								fixedColWidth,
+								tableWidth,
+								isCommentEditor,
+								isChromelessEditor,
+								isNested,
+								shouldUseIncreasedScalingPercent,
+								isNumberColumnEnabled,
+								isTableHasWidth,
+								true,
+							),
+						},
+					]);
+				} else {
+					cols.push([
+						'col',
+						{
+							style: `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`,
+						},
+					]);
+				}
+			});
+		} else {
+			// columns has not been resized, so distribute the width evenly
+			cols.push(
+				...Array.from({ length: colspan }, (_) => {
+					const tableWidth = getTableContainerElementWidth(table);
+					const columnWidth = tableWidth / map.width || 0;
+					const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+
+					return [
+						'col',
+						{
+							style: generateColStyle(
+								fixedColWidth,
+								tableWidth,
+								isCommentEditor,
+								isChromelessEditor,
+								isNested,
+								shouldUseIncreasedScalingPercent,
+								isNumberColumnEnabled,
+								isTableHasWidth,
+							),
+						},
+					];
+				}),
+			);
+		}
+	});
+	return cols;
+};
+
 export const generateColgroup = (
 	table: PmNode,
 	tableRef?: HTMLElement,
@@ -37,7 +171,6 @@ export const generateColgroup = (
 			if (tableRef) {
 				// if we have tableRef here, isTableScalingEnabled is true
 				let scalePercent = 1;
-
 				if (isCommentEditor && !table.attrs?.width) {
 					scalePercent = getScalingPercentForTableWithoutWidth(table, tableRef);
 				} else {
@@ -45,6 +178,7 @@ export const generateColgroup = (
 				}
 
 				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+					// existing logic for calculating the width of the column
 					const fixedColWidth = getColWidthFix(width, map.width);
 					const scaledWidth = fixedColWidth * scalePercent;
 					const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
@@ -80,7 +214,6 @@ export const generateColgroup = (
 			);
 		}
 	});
-
 	return cols;
 };
 
@@ -101,7 +234,7 @@ export const insertColgroupFromNode = (
 
 	colgroup = renderColgroupFromNode(
 		table,
-		isTableScalingEnabled ? tableRef ?? undefined : undefined,
+		isTableScalingEnabled ? (tableRef ?? undefined) : undefined,
 		shouldUseIncreasedScalingPercent,
 		isCommentEditor,
 	);