@atlaskit/editor-plugin-table 7.24.3 → 7.24.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.24.3",
+	"version": "7.24.5",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/button": "^19.1.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^87.1.0",
+		"@atlaskit/editor-common": "^87.3.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
@@ -43,8 +43,8 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/editor-tables": "^2.8.0",
-		"@atlaskit/icon": "^22.8.0",
-		"@atlaskit/menu": "^2.8.0",
+		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/menu": "^2.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.2.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/toggle": "^13.2.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@atlaskit/tooltip": "^18.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -111,10 +111,10 @@
 		"platform.editor.table.use-increased-scaling-percent": {
 			"type": "boolean"
 		},
-		"platform.editor.table.live-pages-sorting_4malx": {
+		"platform_editor_dark_mode_cell_header_color_fix": {
 			"type": "boolean"
 		},
-		"platform_editor_element_drag_and_drop_ed_24041": {
+		"platform.editor.table.live-pages-sorting_4malx": {
 			"type": "boolean"
 		},
 		"editor_react_18_fix_table_delete_col_decorations": {

package/src/commands/misc.ts

@@ -726,7 +726,7 @@ export const updateWidthToWidest = (widthToWidest: WidthToWidest) =>
 	});
 
 export const setTableAlignment =
-	(newAlignment: TableLayout): EditorCommand =>
+	(newAlignment: TableLayout, isCommentEditor: boolean): EditorCommand =>
 	({ tr }) => {
 		const tableObject = findTable(tr.selection);
 
@@ -741,7 +741,9 @@ export const setTableAlignment =
 
 		// table uses old breakout values in layout attribute to determine width
 		// but that information is lost when alignment changes, so we need to ensure we retain that info
-		if (!tableObject.node.attrs.width) {
+		// If table width is not set in the Comment editor, it means that the table width is inherited from the editor and is "full width".
+		// In that case when switching between alignment options in the Comment editor we should keep the table width unset.
+		if (!tableObject.node.attrs.width && !isCommentEditor) {
 			const tableWidth = getTableContainerWidth(tableObject.node);
 			nextTableAttrs.width = tableWidth;
 		}

package/src/commands-with-analytics.ts

@@ -658,7 +658,7 @@ export const toggleFixedColumnWidthsOptionAnalytics = (
 	})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
 
 export const setTableAlignmentWithAnalytics =
-	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isCommentEditor: boolean) =>
 	(
 		newAlignment: AlignmentOptions,
 		// previous alignment could be a breakout value, if so use 'null' to indicate alignment was not previously set
@@ -687,7 +687,9 @@ export const setTableAlignmentWithAnalytics =
 					reason,
 				},
 			};
-		})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+		})(editorAnalyticsAPI)(
+			editorCommandToPMCommand(setTableAlignment(newAlignment, isCommentEditor)),
+		);
 
 export const setTableAlignmentWithTableContentWithPosWithAnalytics =
 	(editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>

package/src/nodeviews/TableCell.ts

@@ -3,13 +3,33 @@ import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import TableNodeView from './TableNodeViewBase';
 
 const DEFAULT_COL_SPAN = 1;
 const DEFAULT_ROW_SPAN = 1;
 
+/**
+ * For performance reasons we do this in the background - it shouldn't block the main thread
+ */
+function delayUntilIdle(cb: Function) {
+	if (typeof window === 'undefined') {
+		return;
+	}
+	// eslint-disable-next-line compat/compat
+	if (window.requestIdleCallback !== undefined) {
+		// eslint-disable-next-line compat/compat
+		return window.requestIdleCallback(() => cb(), { timeout: 500 });
+	}
+	return window.requestAnimationFrame(() => cb());
+}
+
+const cssVariablePattern = /^VAR\(--.*\)$/;
+
 export default class TableCell extends TableNodeView<HTMLElement> implements NodeView {
+	private delayHandle: number | undefined;
+
 	constructor(
 		node: PMNode,
 		view: EditorView,
@@ -17,8 +37,43 @@ export default class TableCell extends TableNodeView<HTMLElement> implements Nod
 		eventDispatcher: EventDispatcher,
 	) {
 		super(node, view, getPos, eventDispatcher);
+
+		// CONFCLOUD-78239: Previously we had a bug which tried to invert the heading colour of a table
+		// Obviously design tokens can't be inverted and so it would result in `VAR(--DS-BACKGROUND-ACCENT-GRAY-SUBTLEST, #F4F5F7)`
+		// which is not a valid CSS variable.
+		//
+		// We should follow-up and remove this in TODO-xx in 6 months once we're confident
+		// that this has fixed most of the cases in the wild.
+		//
+		// This is a workaround to fix those cases on the fly. Note it is super specific on purpose
+		// so that it just fixes the heading token (other tokens should be unaffected)
+		// At some point in the future
+		if (
+			cssVariablePattern.test(node.attrs.background) &&
+			fg('platform_editor_dark_mode_cell_header_color_fix')
+		) {
+			this.delayHandle = delayUntilIdle(() => {
+				const pos = getPos();
+				if (pos) {
+					view.dispatch(
+						view.state.tr
+							.setNodeAttribute(pos, 'background', node.attrs.background.toLowerCase())
+							// Ensures dispatch does not contribute to undo history (otherwise user requires multiple undo's to revert table)
+							.setMeta('addToHistory', false),
+					);
+				}
+			});
+		}
 	}
 
+	destroy = () => {
+		if (this.delayHandle && typeof window !== 'undefined') {
+			// eslint-disable-next-line compat/compat
+			window?.cancelIdleCallback?.(this.delayHandle);
+			window?.cancelAnimationFrame?.(this.delayHandle);
+		}
+	};
+
 	update(node: PMNode) {
 		const didUpdate = this.updateNodeView(node);
 		if (didUpdate) {

package/src/nodeviews/TableComponent.tsx

@@ -852,7 +852,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 					style={shadowStyle(showBeforeShadow)}
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.TABLE_LEFT_SHADOW}
+					className={
+						options?.isChromelessEditor && !isDragAndDropEnabled
+							? ClassName.TABLE_LEFT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS
+							: ClassName.TABLE_LEFT_SHADOW
+					}
 				/>
 				{this.state.stickyHeader && (
 					<div
@@ -910,7 +914,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
 					style={shadowStyle(showAfterShadow)}
 					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.TABLE_RIGHT_SHADOW}
+					className={
+						options?.isChromelessEditor && !isDragAndDropEnabled
+							? ClassName.TABLE_RIGHT_SHADOW + ' ' + ClassName.TABLE_CHROMELESS
+							: ClassName.TABLE_RIGHT_SHADOW
+					}
 				/>
 				{this.state.stickyHeader && (
 					<div

package/src/nodeviews/TableContainer.tsx

@@ -21,6 +21,7 @@ import {
 } from '@atlaskit/editor-shared-styles';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../commands-with-analytics';
+import { getPluginState } from '../pm-plugins/plugin-factory';
 import {
 	TABLE_MAX_WIDTH,
 	TABLE_OFFSET_IN_COMMENT_EDITOR,
@@ -455,12 +456,17 @@ export const TableContainer = ({
 		);
 	}
 
+	const { isDragAndDropEnabled } = getPluginState(editorView.state);
+
 	return (
 		<InnerContainer
 			node={node}
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 			className={classNames(className, {
-				'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested,
+				'less-padding':
+					editorWidth < akEditorMobileBreakoutPoint &&
+					!isNested &&
+					!(isChromelessEditor && isDragAndDropEnabled),
 			})}
 			style={{
 				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766

package/src/toolbar.tsx

@@ -530,6 +530,7 @@ export const getToolbarConfig =
 							editorView,
 							shouldUseIncreasedScalingPercent,
 							options?.fullWidthEnabled,
+							options?.isCommentEditor,
 						)
 					: [];
 
@@ -862,6 +863,7 @@ export const getAlignmentOptionsConfig = (
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
 	isFullWidthEditor?: boolean,
+	isCommentEditor?: boolean,
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -898,7 +900,7 @@ export const getAlignmentOptionsConfig = (
 			icon: icon,
 			title: formatMessage(layoutToMessages[value]),
 			selected: normaliseAlignment(currentLayout) === value,
-			onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(
+			onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI, isCommentEditor || false)(
 				value,
 				currentLayout,
 				INPUT_METHOD.FLOATING_TB,

package/src/types.ts

@@ -389,7 +389,6 @@ export const TableCssClassName = {
 	/** drag and drop controls */
 	DRAG_ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-drag-row-controls-wrapper`,
 	DRAG_ROW_CONTROLS: `${tablePrefixSelector}-drag-row-controls`,
-	DRAG_CONTROLS_CHROMELESS: `drag-controls-chromeless`,
 	DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: `${tablePrefixSelector}-drag-row-floating-insert-dot-wrapper`,
 	DRAG_ROW_FLOATING_INSERT_DOT: `${tablePrefixSelector}-drag-row-floating-insert-dot`,
 
@@ -454,6 +453,7 @@ export const TableCssClassName = {
 	TABLE_CELL: tableCellSelector,
 	TABLE_HEADER_CELL: tableHeaderSelector,
 	TABLE_STICKY: `${tablePrefixSelector}-sticky`,
+	TABLE_CHROMELESS: `${tablePrefixSelector}-chromeless`,
 
 	TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
 	LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -113,7 +113,7 @@ export const TableFloatingColumnControls = ({
 			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 			className={
 				ClassName.DRAG_COLUMN_CONTROLS_WRAPPER +
-				(isChromelessEditor ? ' ' + ClassName.DRAG_CONTROLS_CHROMELESS : '')
+				(isChromelessEditor ? ' ' + ClassName.TABLE_CHROMELESS : '')
 			}
 			data-testid="table-floating-column-controls-wrapper"
 		>

package/src/ui/TableFloatingControls/index.tsx

@@ -129,15 +129,13 @@ export const TableFloatingControls = ({
 
 	const wrapperClassName = isDragAndDropEnabled
 		? isChromelessEditor
-			? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.DRAG_CONTROLS_CHROMELESS
+			? ClassName.DRAG_ROW_CONTROLS_WRAPPER + ' ' + ClassName.TABLE_CHROMELESS
 			: ClassName.DRAG_ROW_CONTROLS_WRAPPER
 		: ClassName.ROW_CONTROLS_WRAPPER;
 
 	const tablePos = findTable(editorView.state.selection)?.pos;
 	const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos!);
-	const shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041')
-		? !featureFlagsState?.elementDragAndDrop || isNested
-		: !featureFlagsState?.elementDragAndDrop;
+	const shouldShowCornerControls = !featureFlagsState?.elementDragAndDrop || isNested;
 
 	return (
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/src/ui/common-styles.ts

@@ -514,7 +514,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			}
 		}
 
-		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+		.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}.${ClassName.TABLE_CHROMELESS} {
 			left: -4px;
 		}
 
@@ -522,7 +522,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			padding: 0 ${tablePadding}px;
 		}
 
-		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.DRAG_CONTROLS_CHROMELESS} {
+		.${ClassName.DRAG_COLUMN_CONTROLS_WRAPPER}.${ClassName.TABLE_CHROMELESS} {
 			left: -8px;
 		}
 
@@ -536,10 +536,16 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		.${ClassName.TABLE_LEFT_SHADOW} {
 			left: 6px;
 		}
+		.${ClassName.TABLE_LEFT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
+			left: 8px;
+		}
 
 		.${ClassName.TABLE_RIGHT_SHADOW} {
 			left: calc(100% - 6px);
 		}
+		.${ClassName.TABLE_RIGHT_SHADOW}.${ClassName.TABLE_CHROMELESS} {
+			left: calc(100% - 16px);
+		}
 	}
 
 	> .${ClassName.NODEVIEW_WRAPPER} {