@atlaskit/editor-plugin-table 7.21.1 → 7.21.3

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

@@ -32,5 +32,5 @@ export default class TableView extends ReactNodeView<Props> {
     }): boolean;
     destroy(): void;
 }
-export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean) => NodeView;
+export declare const createTableView: (node: PmNode, view: EditorView, getPos: getPosHandler, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, dispatchAnalyticsEvent: DispatchAnalyticsEvent, pluginInjectionApi?: PluginInjectionAPI, isTableAlignmentEnabled?: boolean, isCommentEditor?: boolean) => NodeView;
 export {};

package/dist/types-ts4.5/nodeviews/types.d.ts

@@ -12,6 +12,7 @@ export type TableOptions = {
     isDragAndDropEnabled?: boolean;
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
+    isCommentEditor?: boolean;
 };
 export interface Props {
     node: PmNode;

package/dist/types-ts4.5/plugin.d.ts

@@ -21,6 +21,7 @@ export interface TablePluginOptions {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
     isNewColumnResizingEnabled?: boolean;
+    isCommentEditor?: boolean;
 }
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 type MediaPlugin = NextEditorPlugin<'media', {

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -5,4 +5,4 @@ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PluginConfig, PluginInjectionAPI } from '../types';
-export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => SafePlugin<import("../types").TablePluginState>;
+export declare const createPlugin: (dispatchAnalyticsEvent: DispatchAnalyticsEvent, dispatch: Dispatch, portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, pluginConfig: PluginConfig, getEditorContainerWidth: GetEditorContainerWidth, getEditorFeatureFlags: GetEditorFeatureFlags, getIntl: () => IntlShape, tableResizingEnabled?: boolean, fullWidthModeEnabled?: boolean, previousFullWidthModeEnabled?: boolean, dragAndDropEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, pluginInjectionApi?: PluginInjectionAPI, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => SafePlugin<import("../types").TablePluginState>;

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

@@ -1,8 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, createTableProps, }: {
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isCommentEditor, isTableResizingEnabled, createTableProps, }: {
     isTableScalingEnabled?: boolean | undefined;
     isTableAlignmentEnabled?: boolean | undefined;
     isFullWidthModeEnabled?: boolean | undefined;
+    isCommentEditor?: boolean | undefined;
+    isTableResizingEnabled?: boolean | undefined;
     createTableProps?: {
         rowsCount?: number | undefined;
         colsCount?: number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.21.1",
+	"version": "7.21.3",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
-		"@atlaskit/button": "^18.4.0",
+		"@atlaskit/button": "^19.0.0",
 		"@atlaskit/custom-steps": "^0.4.0",
 		"@atlaskit/editor-common": "^86.2.0",
 		"@atlaskit/editor-palette": "1.6.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/toggle": "^13.2.0",
-		"@atlaskit/tokens": "^1.55.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",

package/src/commands/insert.ts

@@ -231,12 +231,16 @@ export const createTable =
 		isTableAlignmentEnabled?: boolean,
 		isFullWidthModeEnabled?: boolean,
 		editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+		isCommentEditor?: boolean,
+		isTableResizingEnabled?: boolean,
 	): Command =>
 	(state, dispatch) => {
 		const table = createTableWithWidth({
 			isTableScalingEnabled,
 			isTableAlignmentEnabled,
 			isFullWidthModeEnabled,
+			isCommentEditor,
+			isTableResizingEnabled,
 		})(state.schema);
 
 		if (dispatch) {
@@ -262,6 +266,7 @@ export const insertTableWithSize =
 		isTableScalingEnabled?: boolean,
 		isTableAlignmentEnabled?: boolean,
 		editorAnalyticsAPI?: EditorAnalyticsAPI,
+		isCommentEditor?: boolean,
 	) =>
 	(rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER): EditorCommand => {
 		return ({ tr }) => {
@@ -269,6 +274,7 @@ export const insertTableWithSize =
 				isTableScalingEnabled,
 				isFullWidthModeEnabled,
 				isTableAlignmentEnabled,
+				isCommentEditor,
 				createTableProps: {
 					rowsCount: rowsCount,
 					colsCount: colsCount,

package/src/nodeviews/TableComponent.tsx

@@ -20,7 +20,7 @@ import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
 import { token } from '@atlaskit/tokens';
@@ -197,7 +197,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled,
 		} = this.props;
 
-		if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+		if (fg('platform.editor.table.live-pages-sorting_4malx')) {
 			const { mode } =
 				this.props.pluginInjectionApi?.editorViewMode?.sharedState.currentState() || {};
 			if (mode === 'view') {
@@ -305,7 +305,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			window.removeEventListener('resize', this.handleWindowResizeDebounced);
 		}
 
-		if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+		if (fg('platform.editor.table.live-pages-sorting_4malx')) {
 			this?.table?.removeEventListener('mouseenter', this.handleMouseEnter);
 		}
 
@@ -388,7 +388,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 			const shouldUseIncreasedScalingPercent =
 				(isTableScalingWithFixedColumnWidthsOptionEnabled &&
-					getBooleanFF('platform.editor.table.use-increased-scaling-percent')) ||
+					fg('platform.editor.table.use-increased-scaling-percent')) ||
 				false;
 
 			if (force || (!isResizing && shouldUpdateColgroup)) {
@@ -448,7 +448,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		const table = findTable(view.state.selection);
 
-		if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+		if (!fg('platform.editor.table.use-shared-state-hook')) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 		}
@@ -466,7 +466,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isTableScalingEnabled && tableWithFixedColumnWidthsOption;
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingWithFixedColumnWidthsOptionEnabled &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+			fg('platform.editor.table.use-increased-scaling-percent');
 
 		if (
 			isTableScalingWithFixedColumnWidthsOptionEnabled &&
@@ -651,7 +651,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const { showBeforeShadow, showAfterShadow } = this.state;
 		const node = getNode();
 
-		if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+		if (!fg('platform.editor.table.use-shared-state-hook')) {
 			const pluginState = getPluginState(view.state);
 			isInDanger = pluginState.isInDanger;
 			hoveredRows = pluginState.hoveredRows;
@@ -748,7 +748,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
 			tableWithFixedColumnWidthsOption &&
-			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+			fg('platform.editor.table.use-increased-scaling-percent');
 
 		return (
 			<TableContainer
@@ -774,6 +774,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
+				isCommentEditor={options?.isCommentEditor}
 			>
 				<div
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/src/nodeviews/TableContainer.tsx

@@ -174,6 +174,7 @@ type ResizableTableContainerProps = {
 	isTableWithFixedColumnWidthsOptionEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
+	isCommentEditor?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -194,6 +195,7 @@ export const ResizableTableContainer = React.memo(
 		isTableWithFixedColumnWidthsOptionEnabled,
 		isTableAlignmentEnabled,
 		shouldUseIncreasedScalingPercent,
+		isCommentEditor,
 	}: PropsWithChildren<ResizableTableContainerProps>) => {
 		const containerRef = useRef<HTMLDivElement | null>(null);
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -296,14 +298,21 @@ export const ResizableTableContainer = React.memo(
 			// padding left = padding right = akEditorGutterPadding = 32
 			responsiveContainerWidth = isTableScalingEnabled
 				? containerWidth - akEditorGutterPaddingDynamic() * 2
-				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				: containerWidth -
+					akEditorGutterPaddingDynamic() * 2 -
+					(isCommentEditor ? 0 : resizeHandleSpacing);
 		}
-		let width = Math.min(tableWidth, responsiveContainerWidth);
+		let width =
+			!node.attrs.width && isCommentEditor
+				? responsiveContainerWidth
+				: Math.min(tableWidth, responsiveContainerWidth);
 
 		if (!isResizing) {
 			tableWidthRef.current = width;
 		}
-		const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+		const maxResizerWidth = isCommentEditor
+			? responsiveContainerWidth
+			: Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
 		const tableResizerProps = {
 			width,
@@ -391,6 +400,7 @@ type TableContainerProps = {
 	isTableWithFixedColumnWidthsOptionEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
+	isCommentEditor?: boolean;
 };
 
 export const TableContainer = ({
@@ -411,6 +421,7 @@ export const TableContainer = ({
 	isTableWithFixedColumnWidthsOptionEnabled,
 	isTableAlignmentEnabled,
 	shouldUseIncreasedScalingPercent,
+	isCommentEditor,
 }: PropsWithChildren<TableContainerProps>) => {
 	if (isTableResizingEnabled && !isNested) {
 		return (
@@ -431,6 +442,7 @@ export const TableContainer = ({
 				isWholeTableInDanger={isWholeTableInDanger}
 				isTableAlignmentEnabled={isTableAlignmentEnabled}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
+				isCommentEditor={isCommentEditor}
 			>
 				{children}
 			</ResizableTableContainer>

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

@@ -22,6 +22,7 @@ type TableViewOptions = {
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent;
 	pluginInjectionApi?: PluginInjectionAPI;
 	isTableAlignmentEnabled?: boolean;
+	isCommentEditor?: boolean;
 };
 
 export const lazyTableView = (options: TableViewOptions) => {
@@ -38,6 +39,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 				options.dispatchAnalyticsEvent,
 				options.pluginInjectionApi,
 				options.isTableAlignmentEnabled,
+				options.isCommentEditor,
 			);
 		};
 	}
@@ -62,6 +64,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
+					isCommentEditor,
 				} = getNodeViewOptions();
 
 				return createTableView(
@@ -75,6 +78,7 @@ export const lazyTableView = (options: TableViewOptions) => {
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
+					isCommentEditor,
 				);
 			};
 		});

package/src/nodeviews/table.tsx

@@ -43,7 +43,7 @@ const tableAttributes = (node: PmNode) => {
 		'data-layout': node.attrs.layout,
 		'data-autosize': node.attrs.__autoSize,
 		'data-table-local-id': node.attrs.localId || '',
-		'data-table-width': node.attrs.width,
+		'data-table-width': node.attrs.width || 'inherit',
 		'data-table-display-mode': node.attrs.displayMode,
 	};
 };
@@ -54,6 +54,10 @@ const getInlineWidth = (
 	state: EditorState,
 	pos: number | undefined,
 ): number | undefined => {
+	if (!node.attrs.width && options?.isCommentEditor && options?.isTableResizingEnabled) {
+		return;
+	}
+
 	// provide a width for tables when custom table width is supported
 	// this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
 	// support screen size adjustments
@@ -360,6 +364,7 @@ export const createTableView = (
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	pluginInjectionApi?: PluginInjectionAPI,
 	isTableAlignmentEnabled?: boolean,
+	isCommentEditor?: boolean,
 ): NodeView => {
 	const {
 		pluginConfig,
@@ -386,6 +391,7 @@ export const createTableView = (
 			isDragAndDropEnabled,
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
 			isTableAlignmentEnabled,
+			isCommentEditor,
 		},
 		getEditorContainerWidth,
 		getEditorFeatureFlags,

package/src/nodeviews/types.ts

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

package/src/plugin.tsx

@@ -97,6 +97,7 @@ export interface TablePluginOptions {
 	isTableScalingEnabled?: boolean;
 	isTableAlignmentEnabled?: boolean;
 	isNewColumnResizingEnabled?: boolean;
+	isCommentEditor?: boolean;
 }
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
@@ -262,6 +263,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						isTableScalingEnabled: options?.isTableScalingEnabled,
 						isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
 						isFullWidthModeEnabled: options?.fullWidthEnabled,
+						isCommentEditor: options?.isCommentEditor,
+						isTableResizingEnabled: options?.tableResizingEnabled,
 					})(state.schema);
 
 					return (
@@ -324,6 +327,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							dragAndDropEnabled,
 							isTableScalingEnabled,
 							isTableAlignmentEnabled,
+							isCommentEditor,
 						} = options || ({} as TablePluginOptions);
 
 						return createPlugin(
@@ -344,6 +348,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableScalingEnabled,
 							isTableAlignmentEnabled,
 							shouldUseIncreasedScalingPercent,
+							isCommentEditor,
 						);
 					},
 				},
@@ -386,6 +391,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableScalingEnabled = false,
 							isTableAlignmentEnabled = false,
 							fullWidthEnabled = false,
+							isCommentEditor = false,
+							tableResizingEnabled = false,
 						} = options || ({} as TablePluginOptions);
 
 						return keymapPlugin(
@@ -400,6 +407,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isCellBackgroundDuplicated,
 							isTableFixedColumnWidthsOptionEnabled,
 							shouldUseIncreasedScalingPercent,
+							isCommentEditor,
+							tableResizingEnabled,
 						);
 					},
 				},
@@ -463,7 +472,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableWidth',
 					plugin: ({ dispatchAnalyticsEvent, dispatch }) =>
-						options?.tableResizingEnabled
+						options?.tableResizingEnabled && !options?.isCommentEditor
 							? createTableWidthPlugin(
 									dispatch,
 									dispatchAnalyticsEvent,
@@ -717,6 +726,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableScalingEnabled: options?.isTableScalingEnabled,
 							isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
 							isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
+							isCommentEditor: options?.isCommentEditor,
+							isTableResizingEnabled: options?.tableResizingEnabled,
 						})(state.schema);
 
 						const tr = insert(tableNode);

package/src/pm-plugins/keymap.ts

@@ -69,6 +69,8 @@ export function keymapPlugin(
 	isCellBackgroundDuplicated = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent?: boolean,
+	isCommentEditor?: boolean,
+	isTableResizingEnabled?: boolean,
 ): SafePlugin {
 	const list = {};
 
@@ -91,6 +93,8 @@ export function keymapPlugin(
 			isTableAlignmentEnabled,
 			!!isFullWidthEnabled,
 			editorAnalyticsAPI,
+			isCommentEditor,
+			isTableResizingEnabled,
 		),
 		list,
 	);

package/src/pm-plugins/main.ts

@@ -96,6 +96,7 @@ export const createPlugin = (
 	isTableScalingEnabled?: boolean,
 	isTableAlignmentEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
+	isCommentEditor?: boolean,
 ) => {
 	const state = createPluginState(dispatch, {
 		pluginConfig,
@@ -361,6 +362,7 @@ export const createPlugin = (
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
 					isTableAlignmentEnabled,
+					isCommentEditor,
 				}),
 				tableRow: lazyTableRowView({ eventDispatcher }),
 				tableCell: lazyTableCellView({ eventDispatcher }),

package/src/utils/create.ts

@@ -5,7 +5,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 
 type CreateTableOverrides = {
-	tableWidth?: TableAttributes['width'];
+	tableWidth?: TableAttributes['width'] | 'inherit';
 	layout?: TableAttributes['layout'];
 };
 
@@ -14,11 +14,15 @@ export const createTableWithWidth =
 		isTableScalingEnabled,
 		isTableAlignmentEnabled,
 		isFullWidthModeEnabled,
+		isCommentEditor,
+		isTableResizingEnabled,
 		createTableProps,
 	}: {
 		isTableScalingEnabled?: boolean;
 		isTableAlignmentEnabled?: boolean;
 		isFullWidthModeEnabled?: boolean;
+		isCommentEditor?: boolean;
+		isTableResizingEnabled?: boolean;
 		createTableProps?: {
 			rowsCount?: number;
 			colsCount?: number;
@@ -26,12 +30,15 @@ export const createTableWithWidth =
 	}) =>
 	(schema: Schema) => {
 		const attrsOverrides: CreateTableOverrides = {};
-		if (isTableScalingEnabled && isFullWidthModeEnabled) {
+		if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
 			attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
 		}
 		if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
 			attrsOverrides.layout = 'align-start';
 		}
+		if (isCommentEditor && isTableResizingEnabled) {
+			attrsOverrides.tableWidth = 'inherit';
+		}
 
 		return createTable({
 			schema,