@atlaskit/editor-plugin-table 7.19.0 → 7.19.2

package/src/pm-plugins/table-resizing/utils/resize-column.ts

@@ -1,8 +1,12 @@
 // Resize a given column by an amount from the current state
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 
-import { TableCssClassName as ClassName } from '../../../types';
-import { ALIGN_START } from '../../../utils/alignment';
+import { type AlignmentOptions, TableCssClassName as ClassName } from '../../../types';
+import {
+	ALIGN_CENTER,
+	ALIGN_START,
+	shouldChangeAlignmentToCenterResized,
+} from '../../../utils/alignment';
 
 import { getTableContainerElementWidth, getTableScalingPercent } from './misc';
 import { growColumn, shrinkColumn, updateAffectedColumn } from './resize-logic';
@@ -56,6 +60,8 @@ export const resizeColumnAndTable = (
 	isTableScalingEnabled = false,
 	originalTableWidth?: number,
 	shouldUseIncreasedScalingPercent = false,
+	lineLength?: number,
+	isTableAlignmentEnabled = false,
 ): ResizeState => {
 	// TODO: can we use document state, and apply scaling factor?
 	const tableWidth = tableRef.clientWidth;
@@ -93,7 +99,17 @@ export const resizeColumnAndTable = (
 	const delta = newState.cols[colIndex].width - resizeState.cols[colIndex].width;
 
 	if (!isOverflowed) {
-		updateTablePreview(delta, tableRef, tableNode);
+		// If the table is aligned to the start and the table width is greater than the line length, we should change the alignment to center
+		const shouldChangeAlignment = shouldChangeAlignmentToCenterResized(
+			isTableAlignmentEnabled,
+			tableNode,
+			lineLength,
+			newState.tableWidth + delta,
+		);
+
+		shouldChangeAlignment
+			? updateTablePreview(delta, tableRef, tableNode, ALIGN_CENTER)
+			: updateTablePreview(delta, tableRef, tableNode);
 	}
 
 	return {
@@ -107,10 +123,12 @@ const updateTablePreview = (
 	resizeAmount: number,
 	tableRef: HTMLElement | null,
 	tableNode: PmNode,
+	tableAligment?: AlignmentOptions,
 ) => {
 	const currentWidth = getTableContainerElementWidth(tableNode);
 	const resizingContainer = tableRef?.closest(`.${ClassName.TABLE_RESIZER_CONTAINER}`);
 	const resizingItem = resizingContainer?.querySelector('.resizer-item');
+	const alignmentContainer = resizingContainer?.parentElement;
 
 	if (resizingItem) {
 		const newWidth = `${currentWidth + resizeAmount}px`;
@@ -119,5 +137,9 @@ const updateTablePreview = (
 		}
 		(resizingContainer as HTMLElement).style.width = newWidth;
 		(resizingItem as HTMLElement).style.width = newWidth;
+
+		if (tableAligment && alignmentContainer) {
+			alignmentContainer.style.justifyContent = tableAligment;
+		}
 	}
 };

package/src/toolbar.tsx

@@ -468,7 +468,17 @@ export const getToolbarConfig =
 		// We don't want to show floating toolbar while resizing the table
 		const isWidthResizing = tableWidthState?.resizing;
 
-		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
+		// Hide floating toolbar when resizing column and internal column width is on
+		const shouldHideToolbarForInternalColumnWidth = Boolean(
+			options?.isNewColumnResizingEnabled && resizeState && resizeState.dragging,
+		);
+
+		if (
+			tableObject &&
+			pluginState.editorHasFocus &&
+			!isWidthResizing &&
+			!shouldHideToolbarForInternalColumnWidth
+		) {
 			const nodeType = state.schema.nodes.table;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 			const isTableScalingWithFixedColumnWidthsOptionShown =

package/src/utils/alignment.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
+import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 
+import { FULL_WIDTH_EDITOR_CONTENT_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import type { AlignmentOptions } from '../types';
 
 export const ALIGN_START = 'align-start';
@@ -11,3 +13,19 @@ export const ALIGN_CENTER = 'center';
  */
 export const normaliseAlignment = (layout: TableLayout): AlignmentOptions =>
 	layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
+
+/**
+ * We don't want to switch alignment in Full-width editor
+ */
+export const shouldChangeAlignmentToCenterResized = (
+	isTableAlignmentEnabled: boolean | undefined,
+	tableNode: PmNode,
+	lineLength: number | undefined,
+	updatedTableWidth: number,
+) =>
+	isTableAlignmentEnabled &&
+	tableNode &&
+	tableNode.attrs.layout === ALIGN_START &&
+	lineLength &&
+	updatedTableWidth > lineLength &&
+	lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH;