@atlaskit/editor-plugin-table 7.25.9 → 7.25.11

package/dist/types-ts4.5/utils/column-controls.d.ts

@@ -2,12 +2,10 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
-export declare const isColumnDeleteButtonVisible: (selection: Selection) => boolean;
 export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {
     left: number;
     indexes: number[];
 } | null;
-export declare const getColumnClassNames: (index: number, selection: Selection, hoveredColumns?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
 export declare const colWidthsForRow: (tr: HTMLTableRowElement) => string;
 export declare const convertHTMLCellIndexToColumnIndex: (htmlColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
 export declare const getColumnIndexMappedToColumnIndexInFirstRow: (convertedColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;

package/dist/types-ts4.5/utils/dom.d.ts

@@ -11,7 +11,6 @@ export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boo
 export declare const isTableControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => boolean;
 /** drag-and-drop classes */
-export declare const isDragRowControlsButton: (node: HTMLElement | null) => true | HTMLElement | null;
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -14,4 +14,4 @@ export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
-export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined) => DragMenuConfig[];
+export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

package/dist/types-ts4.5/utils/index.d.ts

@@ -1,13 +1,13 @@
-export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, isSelectionUpdated, } from './selection';
-export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
-export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow, } from './nodes';
-export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
-export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
-export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
+export { getSelectedColumnIndexes, getSelectedRowIndexes } from './selection';
+export { findControlsHoverDecoration, createControlsHoverDecoration, createCellHoverDecoration, updateDecorations, createColumnInsertLine, createColumnLineResize, createRowInsertLine, } from './decoration';
+export { containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, tablesHaveDifferentNoOfRows, isTableNested, } from './nodes';
+export { transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, } from './paste';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isDragCornerButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, isResizeHandleDecoration, hasResizeHandler, findNearestCellIndexToPoint, } from './dom';
+export { convertHTMLCellIndexToColumnIndex, getColumnsWidths, getColumnDeleteButtonParams, getColumnIndexMappedToColumnIndexInFirstRow, } from './column-controls';
+export { getRowHeights, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow, } from './row-controls';
 export type { RowParams } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';
 export { getMergedCellsPositions, getAssistiveMessage } from './table';
 export { updatePluginStateDecorations } from './update-plugin-state-decorations';
-export { hasMergedCellsInColumn, hasMergedCellsInRow, hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, checkEdgeHasMergedCells, } from './merged-cells';
+export { hasMergedCellsInBetween, hasMergedCellsInSelection, findDuplicatePosition, } from './merged-cells';
 export { createTableWithWidth } from './create';

package/dist/types-ts4.5/utils/merged-cells.d.ts

@@ -1,8 +1,6 @@
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables';
 type MergeType = 'row' | 'column';
-export declare const hasMergedCellsInColumn: (columnIndexes: number | number[]) => (selection: Selection) => boolean;
-export declare const hasMergedCellsInRow: (rowIndexes: number | number[]) => (selection: Selection) => boolean;
 export declare const hasMergedCellsInBetween: (indexes: number[], type: MergeType) => (selection: Selection) => boolean;
 export declare const hasMergedCellsWithColumnNextToColumnIndex: (colIndex: number, selection: Selection) => boolean;
 export declare const hasMergedCellsWithRowNextToRowIndex: (rowIndex: number, selection: Selection) => boolean;

package/dist/types-ts4.5/utils/nodes.d.ts

@@ -11,7 +11,6 @@ export declare const tablesHaveDifferentColumnWidths: (currentTable: PmNode, pre
 export declare const tablesHaveDifferentNoOfColumns: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const tablesHaveDifferentNoOfRows: (currentTable: PmNode, previousTable: PmNode) => boolean;
 export declare const isTableNested: (state: EditorState, tablePos?: number) => boolean;
-export declare const anyChildCellMergedAcrossRow: (node: PmNode) => boolean;
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells

package/dist/types-ts4.5/utils/row-controls.d.ts

@@ -6,7 +6,6 @@ export interface RowParams {
     height: number;
 }
 export declare const getRowHeights: (tableRef: HTMLTableElement) => number[];
-export declare const isRowDeleteButtonVisible: (selection: Selection) => boolean;
 export declare const getRowDeleteButtonParams: (rowsHeights: Array<number | undefined>, selection: Selection, offsetTop?: number) => {
     top: number;
     indexes: number[];

package/dist/types-ts4.5/utils/selection.d.ts

@@ -1,6 +1,3 @@
-import type { Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
-export declare const isSelectionUpdated: (oldSelection: Selection, newSelection?: Selection) => boolean;
-export declare const normalizeSelection: (tr: Transaction) => Transaction;
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
 export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];

package/dist/types-ts4.5/utils/table.d.ts

@@ -1,7 +1,5 @@
 import type { IntlShape } from 'react-intl-next';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const getMergedCellsPositions: (tr: Transaction) => number[];
-export declare const colsToRect: (cols: Array<number>, noOfRows: number) => Rect;
 export declare const getAssistiveMessage: (prevTableNode: PmNode, currentTableNode: PmNode, intl: IntlShape) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.9",
+	"version": "7.25.11",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,10 +31,10 @@
 		"@atlaskit/adf-schema": "^40.8.1",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^87.13.0",
+		"@atlaskit/editor-common": "^88.1.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
-		"@atlaskit/editor-plugin-analytics": "^1.7.0",
+		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-content-insertion": "^1.8.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",

package/src/commands/clear.ts

@@ -1,12 +1,8 @@
-// #region Imports
 import type { Command } from '@atlaskit/editor-common/types';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { emptyCell, findCellClosestToPos, isSelectionType } from '@atlaskit/editor-tables/utils';
 
-// #endregion
-
-// #region Commands
 export const clearMultipleCells =
 	(targetCellPosition?: number): Command =>
 	(state, dispatch) => {
@@ -39,13 +35,3 @@ export const clearMultipleCells =
 		}
 		return false;
 	};
-
-export const clearSelection: Command = (state, dispatch) => {
-	if (dispatch) {
-		dispatch(
-			state.tr.setSelection(Selection.near(state.selection.$from)).setMeta('addToHistory', false),
-		);
-	}
-	return true;
-};
-// #endregion

package/src/commands/column-resize.ts

@@ -35,6 +35,10 @@ import {
 	resizeColumn,
 	updateControls,
 } from '../pm-plugins/table-resizing/utils';
+import {
+	getScalingPercentForTableWithoutWidth,
+	getTableScalingPercent,
+} from '../pm-plugins/table-resizing/utils/misc';
 import { updateColumnWidths } from '../transforms';
 import { TableDecorations } from '../types';
 import type { PluginInjectionAPI, TablePluginAction } from '../types';
@@ -323,11 +327,14 @@ export const changeColumnWidthByStep =
 			isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
 		}
 
-		const 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);
+		let shouldUseIncreasedScalingPercent =
+			isTableScalingWithFixedColumnWidthsOptionEnabled &&
+			fg('platform.editor.table.use-increased-scaling-percent');
+
+		if (isTableScalingEnabled && isCommentEditor) {
+			isTableScalingEnabledOnCurrentTable = true;
+			shouldUseIncreasedScalingPercent = true;
+		}
 
 		const initialResizeState = getResizeState({
 			minWidth: tableCellMinWidth,
@@ -338,6 +345,7 @@ export const changeColumnWidthByStep =
 			domAtPos,
 			isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
 			shouldUseIncreasedScalingPercent,
+			isCommentEditor,
 		});
 
 		updateControls()(state);
@@ -347,6 +355,11 @@ export const changeColumnWidthByStep =
 		// only selected (or selected - 1) columns should be distributed
 		const resizingSelectedColumns =
 			selectedColumns.indexOf(colIndex) > -1 || selectedColumns.indexOf(colIndex + 1) > -1;
+
+		const scalePercent =
+			isTableScalingEnabled && isCommentEditor && !originalTable.attrs?.width
+				? getScalingPercentForTableWithoutWidth(originalTable, dom)
+				: getTableScalingPercent(originalTable, dom, shouldUseIncreasedScalingPercent);
 		let newResizeState = resizeColumn(
 			initialResizeState,
 			colIndex,
@@ -355,7 +368,7 @@ export const changeColumnWidthByStep =
 			originalTable,
 			resizingSelectedColumns ? selectedColumns : undefined,
 			isTableScalingEnabled,
-			shouldUseIncreasedScalingPercent,
+			scalePercent,
 		);
 
 		customTr = updateColumnWidths(newResizeState, originalTable, tableStartPosition, api)(customTr);

package/src/commands/delete.ts

@@ -12,6 +12,7 @@ export const deleteColumnsCommand =
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
+		isCommentEditor = false,
 	): Command =>
 	(state, dispatch, view) => {
 		const tr = deleteColumns(
@@ -22,6 +23,7 @@ export const deleteColumnsCommand =
 			isTableScalingEnabled,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
+			isCommentEditor,
 		)(state.tr);
 		if (dispatch) {
 			dispatch(tr);

package/src/commands/insert.ts

@@ -45,6 +45,7 @@ export function addColumnAt(
 	isCellBackgroundDuplicated?: boolean,
 	isTableFixedColumnWidthsOptionEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
+	isCommentEditor?: boolean,
 ) {
 	return (
 		column: number,
@@ -66,6 +67,7 @@ export function addColumnAt(
 					isTableFixedColumnWidthsOptionEnabled,
 					shouldUseIncreasedScalingPercent,
 					api,
+					isCommentEditor,
 				)(
 					table,
 					view,
@@ -97,6 +99,7 @@ export const addColumnBefore =
 		isCellBackgroundDuplicated = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
+		isCommentEditor = false,
 	): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
@@ -112,6 +115,7 @@ export const addColumnBefore =
 					isCellBackgroundDuplicated,
 					isTableFixedColumnWidthsOptionEnabled,
 					shouldUseIncreasedScalingPercent,
+					isCommentEditor,
 				)(
 					rect.left,
 					getAllowAddColumnCustomStep(state),
@@ -131,6 +135,7 @@ export const addColumnAfter =
 		isCellBackgroundDuplicated?: boolean,
 		isTableFixedColumnWidthsOptionEnabled?: boolean,
 		shouldUseIncreasedScalingPercent?: boolean,
+		isCommentEditor?: boolean,
 	): Command =>
 	(state, dispatch, view) => {
 		const table = findTable(state.selection);
@@ -147,6 +152,7 @@ export const addColumnAfter =
 					isCellBackgroundDuplicated,
 					isTableFixedColumnWidthsOptionEnabled,
 					shouldUseIncreasedScalingPercent,
+					isCommentEditor,
 				)(
 					rect.right,
 					getAllowAddColumnCustomStep(state),
@@ -164,6 +170,7 @@ export const insertColumn =
 		isCellBackgroundDuplicated?: boolean,
 		isTableFixedColumnWidthsOptionEnabled?: boolean,
 		shouldUseIncreasedScalingPercent?: boolean,
+		isCommentEditor?: boolean,
 	) =>
 	(column: number): Command =>
 	(state, dispatch, view) => {
@@ -173,6 +180,7 @@ export const insertColumn =
 			isCellBackgroundDuplicated,
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
+			isCommentEditor,
 		)(
 			column,
 			getAllowAddColumnCustomStep(state),

package/src/commands/selection.ts

@@ -28,7 +28,7 @@ import type tablePlugin from '../plugin';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 
-export enum TableSelectionDirection {
+enum TableSelectionDirection {
 	TopToBottom = 'TopToBottom',
 	BottomToTop = 'BottomToTop',
 }

package/src/commands-with-analytics.ts

@@ -8,7 +8,6 @@ import {
 	EVENT_TYPE,
 	INPUT_METHOD,
 	TABLE_ACTION,
-	TABLE_BREAKOUT,
 	TABLE_DISPLAY_MODE,
 } from '@atlaskit/editor-common/analytics';
 import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -42,13 +41,7 @@ import {
 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
-import {
-	getNextLayout,
-	toggleHeaderColumn,
-	toggleHeaderRow,
-	toggleNumberColumn,
-	toggleTableLayout,
-} from './commands/toggle';
+import { toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn } from './commands/toggle';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
 import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
@@ -63,12 +56,6 @@ import type {
 import { checkIfNumberColumnEnabled, getSelectedCellInfo, getSelectedTableInfo } from './utils';
 import { withEditorAnalyticsAPI } from './utils/analytics';
 
-const TABLE_BREAKOUT_NAME_MAPPING = {
-	default: TABLE_BREAKOUT.NORMAL,
-	wide: TABLE_BREAKOUT.WIDE,
-	'full-width': TABLE_BREAKOUT.FULL_WIDTH,
-};
-
 // #region Analytics wrappers
 export const emptyMultipleCellsWithAnalytics =
 	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
@@ -288,6 +275,7 @@ export const insertColumnWithAnalytics =
 		isCellbackgroundDuplicated = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
+		isCommentEditor = false,
 	) =>
 	(
 		inputMethod:
@@ -319,6 +307,7 @@ export const insertColumnWithAnalytics =
 				isCellbackgroundDuplicated,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
+				isCommentEditor,
 			)(position),
 		);
 
@@ -364,6 +353,7 @@ export const deleteColumnsWithAnalytics =
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
+		isCommentEditor = false,
 	) =>
 	(
 		inputMethod:
@@ -397,6 +387,7 @@ export const deleteColumnsWithAnalytics =
 				isTableScalingEnabled,
 				isTableFixedColumnWidthsOptionEnabled,
 				shouldUseIncreasedScalingPercent,
+				isCommentEditor,
 			),
 		);
 
@@ -532,32 +523,6 @@ export const toggleNumberColumnWithAnalytics = (
 		};
 	})(editorAnalyticsAPI)(toggleNumberColumn);
 
-export const toggleTableLayoutWithAnalytics = (
-	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) =>
-	withEditorAnalyticsAPI((state) => {
-		const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(state.selection);
-
-		if (table) {
-			const { layout } = table.node.attrs as {
-				layout: 'default' | 'wide' | 'full-width';
-			};
-			return {
-				action: TABLE_ACTION.CHANGED_BREAKOUT_MODE,
-				actionSubject: ACTION_SUBJECT.TABLE,
-				actionSubjectId: null,
-				attributes: {
-					newBreakoutMode: TABLE_BREAKOUT_NAME_MAPPING[getNextLayout(layout)],
-					previousBreakoutMode: TABLE_BREAKOUT_NAME_MAPPING[layout],
-					totalRowCount,
-					totalColumnCount,
-				},
-				eventType: EVENT_TYPE.TRACK,
-			};
-		}
-		return;
-	})(editorAnalyticsAPI)(toggleTableLayout);
-
 export const sortColumnWithAnalytics =
 	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
 	(

package/src/nodeviews/TableComponent.tsx

@@ -49,8 +49,15 @@ import {
 	updateColgroup,
 } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
-import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
+import {
+	TABLE_EDITOR_MARGIN,
+	TABLE_OFFSET_IN_COMMENT_EDITOR,
+} from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
+import {
+	getScalingPercentForTableWithoutWidth,
+	getTableScalingPercent,
+} from '../pm-plugins/table-resizing/utils/misc';
 import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
@@ -82,7 +89,7 @@ const initialOverflowCaptureTimeroutDelay = 300;
 // PLEASE NOTE: that the current way this alaytics has been configured WILL cause reflows to occur. This is why the has been disabled.
 const isOverflowAnalyticsEnabled = false;
 
-export interface ComponentProps {
+interface ComponentProps {
 	view: EditorView;
 	getNode: () => PmNode;
 	allowColumnResizing?: boolean;
@@ -376,7 +383,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	}
 
 	handleColgroupUpdates(force = false) {
-		const { getNode, containerWidth, isResizing, view, getPos, getEditorFeatureFlags } = this.props;
+		const { getNode, containerWidth, isResizing, view, getPos, getEditorFeatureFlags, options } =
+			this.props;
 
 		if (!this.table) {
 			return;
@@ -384,8 +392,6 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		// Remove any widths styles after resizing preview is completed
 		this.table.style.width = '';
-
-		const tableRenderWidth = containerWidth.width - TABLE_EDITOR_MARGIN;
 		const tableNode = getNode();
 		const start = getPos() || 0;
 		const depth = view.state.doc.resolve(start).depth;
@@ -394,10 +400,19 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			return;
 		}
 
-		const tableNodeWidth = getTableContainerWidth(tableNode);
+		let tableNodeWidth = getTableContainerWidth(tableNode);
 		const isTableResizedFullWidth = tableNodeWidth === 1800 && this.wasResizing && !isResizing;
+
 		// Needed for undo / redo
 		const isTableWidthChanged = tableNodeWidth !== this.tableNodeWidth;
+
+		const tableRenderWidth = options?.isCommentEditor
+			? containerWidth.width - (TABLE_OFFSET_IN_COMMENT_EDITOR + 1) // should be the same as this.table.parentElement?.clientWidth - 1, subtract 1 to avoid overflow
+			: containerWidth.width - TABLE_EDITOR_MARGIN;
+
+		tableNodeWidth =
+			options?.isCommentEditor && !tableNode.attrs.width ? tableRenderWidth : tableNodeWidth;
+
 		const isTableSquashed = tableRenderWidth < tableNodeWidth;
 		const isNumberColumnChanged =
 			tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
@@ -406,7 +421,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const maybeScale =
 			isTableSquashed ||
 			isTableWidthChanged ||
-			isTableResizedFullWidth ||
+			(isTableResizedFullWidth && !options?.isCommentEditor) ||
 			isNumberColumnChanged ||
 			isNumberOfColumnsChanged;
 
@@ -448,6 +463,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					domAtPos: view.domAtPos.bind(view),
 					isTableScalingEnabled: true,
 					shouldUseIncreasedScalingPercent,
+					isCommentEditor: !!this.props.options?.isCommentEditor,
 				});
 
 				let shouldScaleOnColgroupUpdate = false;
@@ -462,6 +478,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					shouldScaleOnColgroupUpdate = true;
 				}
 
+				if (this.props.options?.isTableScalingEnabled && this.props.options?.isCommentEditor) {
+					shouldScaleOnColgroupUpdate = true;
+				}
+
+				let scalePercent = 1;
+				if (
+					!this.props.options?.isCommentEditor ||
+					(this.props.options?.isCommentEditor && tableNode.attrs.width)
+				) {
+					scalePercent = getTableScalingPercent(
+						tableNode,
+						this.table!,
+						shouldUseIncreasedScalingPercent,
+					);
+				} else {
+					scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
+				}
+
 				// Request animation frame required for Firefox
 				requestAnimationFrame(() => {
 					updateColgroup(
@@ -469,7 +503,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 						this.table!,
 						tableNode,
 						shouldScaleOnColgroupUpdate,
-						shouldUseIncreasedScalingPercent,
+						scalePercent,
 					);
 				});
 			}
@@ -590,13 +624,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					const start = getPos() || 0;
 					const depth = view.state.doc.resolve(start).depth;
 					shouldScale = depth === 0 && shouldScale;
-
 					insertColgroupFromNode(
 						this.table,
 						currentTable,
 						shouldScale,
 						undefined,
 						shouldUseIncreasedScalingPercent,
+						options?.isCommentEditor,
 					);
 				}
 

package/src/nodeviews/TableContainer.tsx

@@ -42,7 +42,7 @@ type InnerContainerProps = {
 	node: PMNode;
 };
 
-export const InnerContainer = forwardRef<HTMLDivElement, PropsWithChildren<InnerContainerProps>>(
+const InnerContainer = forwardRef<HTMLDivElement, PropsWithChildren<InnerContainerProps>>(
 	({ className, style, node, children }, ref) => {
 		return (
 			<div

package/src/nodeviews/TableResizer.tsx

@@ -90,9 +90,6 @@ interface TableResizerProps {
 	isFullWidthModeEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
 	isCommentEditor?: boolean;
-}
-
-export interface TableResizerImprovementProps extends TableResizerProps {
 	onResizeStop?: () => void;
 	onResizeStart?: () => void;
 }
@@ -206,7 +203,7 @@ export const TableResizer = ({
 	pluginInjectionApi,
 	isFullWidthModeEnabled,
 	isCommentEditor,
-}: PropsWithChildren<TableResizerImprovementProps>) => {
+}: PropsWithChildren<TableResizerProps>) => {
 	const currentGap = useRef(0);
 	// track resizing state - use ref over state to avoid re-render
 	const isResizing = useRef(false);
@@ -586,6 +583,7 @@ export const TableResizer = ({
 					pluginInjectionApi,
 					isTableScalingEnabled,
 					shouldUseIncreasedScalingPercent || false,
+					isCommentEditor,
 				)(tr);
 
 				const scaledNode = tr.doc.nodeAt(pos)!;

package/src/plugin.tsx

@@ -601,6 +601,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											}
 											isChromelessEditor={options?.isChromelessEditor}
 											api={api}
+											isCommentEditor={options?.isCommentEditor}
 										/>
 									)}
 									{options?.allowContextualMenu && (
@@ -642,6 +643,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 											}
 											ariaNotifyPlugin={ariaNotifyPlugin}
 											api={api}
+											isCommentEditor={options?.isCommentEditor}
 										/>
 									)}
 									{allowControls && !isDragAndDropEnabled && !isResizing && (

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

@@ -8,12 +8,12 @@ export enum AnalyticPluginTypes {
 	UpdateRowOrColumnMovedAndOverflowTrigger,
 }
 
-export type UpdateRowOrColumnMovedAction = {
+type UpdateRowOrColumnMovedAction = {
 	type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction;
 	data: RowOrColumnMovedState;
 };
 
-export type RemoveRowOrColumnMovedAction = {
+type RemoveRowOrColumnMovedAction = {
 	type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction;
 	data: undefined;
 };

package/src/pm-plugins/decorations/utils/index.ts

@@ -3,4 +3,3 @@ export {
 	maybeUpdateColumnControlsSelectedDecoration,
 } from './column-controls';
 export { buildColumnResizingDecorations, clearColumnResizingDecorations } from './column-resizing';
-export { composeDecorations } from './compose-decorations';

package/src/pm-plugins/decorations/utils/types.ts

@@ -4,7 +4,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 
 export type DecorationTransformer = (params: DecorationTransformerParams) => DecorationSet;
 
-export type DecorationTransformerParams = {
+type DecorationTransformerParams = {
 	decorationSet: DecorationSet;
 	tr: Transaction | ReadonlyTransaction;
 };

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;