@atlaskit/editor-plugin-table 7.21.2 → 7.21.4

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,12 +20,13 @@ 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';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
+import { handleMouseOut, isTableInFocus } from '../event-handlers';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import type { RowStickyState, StickyPluginState } from '../pm-plugins/sticky-headers';
@@ -186,6 +187,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		}
 	}
 
+	private handleMouseOut = (event: Event) => {
+		if (!isTableInFocus(this.props.view)) {
+			return false;
+		}
+		return handleMouseOut(this.props.view, event);
+	};
+
 	componentDidMount() {
 		const {
 			allowColumnResizing,
@@ -197,13 +205,16 @@ 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') {
 				this?.table?.addEventListener('mouseenter', this.handleMouseEnter);
 			}
 		}
+		if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+			this?.table?.addEventListener('mouseout', this.handleMouseOut);
+		}
 
 		const { tableWithFixedColumnWidthsOption = false, stickyScrollbar } = getEditorFeatureFlags();
 
@@ -305,9 +316,12 @@ 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);
 		}
+		if (fg('editor_react_18_fix_table_delete_col_decorations')) {
+			this?.table?.removeEventListener('mouseout', this.handleMouseOut);
+		}
 
 		if (this.overflowShadowsObserver) {
 			this.overflowShadowsObserver.dispose();
@@ -388,7 +402,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 +462,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 +480,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 +665,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 +762,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 +788,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 }),
@@ -372,7 +374,9 @@ export const createPlugin = (
 				mousedown: withCellTracking(handleMouseDown),
 				mouseover: withCellTracking(whenTableInFocus(handleMouseOver)),
 				mouseleave: handleMouseLeave,
-				mouseout: whenTableInFocus(handleMouseOut),
+				mouseout: fg('editor_react_18_fix_table_delete_col_decorations')
+					? undefined
+					: whenTableInFocus(handleMouseOut),
 				mousemove: whenTableInFocus(handleMouseMove),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),

package/src/toolbar.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/ColumnResizeWidget/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';

package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/FloatingContextualButton/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { useEffect } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import React, { Component } from 'react';
 import type { PointerEvent } from 'react';
 

package/src/ui/FloatingContextualMenu/index.tsx

@@ -1,4 +1,7 @@
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-/** @jsx jsx */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 /** @jsxFrag */
 import React, { useEffect, useState } from 'react';
 

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,