@atlaskit/editor-plugin-table 7.16.18 → 7.17.0

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -379,6 +379,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 			intl: { formatMessage },
 			editorView,
 			getEditorContainerWidth,
+			getEditorFeatureFlags,
 		} = this.props;
 		const {
 			isDragAndDropEnabled,
@@ -386,12 +387,17 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		} = getPluginState(editorView.state);
 		if (allowDistributeColumns && !isDragAndDropEnabled) {
 			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
+			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags
+				? getEditorFeatureFlags()
+				: {};
+
 			const newResizeState = getNewResizeStateFromSelectedColumns(
 				selectionRect,
 				editorView.state,
 				editorView.domAtPos.bind(editorView),
 				getEditorContainerWidth,
 				isTableScalingEnabled,
+				tableWithFixedColumnWidthsOption,
 			);
 
 			const wouldChange = newResizeState?.changed ?? false;
@@ -507,13 +513,12 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const { state, dispatch } = editorView;
 		const { targetCellPosition, isTableScalingEnabled = false } = getPluginState(state);
 
-		const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-			? getEditorFeatureFlags()
-			: {};
+		const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+			getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 		const shouldUseIncreasedScalingPercent =
 			isTableScalingEnabled &&
-			getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+			tableWithFixedColumnWidthsOption &&
 			getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 		switch (item.value.name) {
@@ -548,6 +553,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					editorView.domAtPos.bind(editorView),
 					getEditorContainerWidth,
 					isTableScalingEnabled,
+					tableWithFixedColumnWidthsOption,
 				);
 
 				if (newResizeStateWithAnalytics) {
@@ -570,6 +576,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
 					tableDuplicateCellColouring,
+					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,
 				)(INPUT_METHOD.CONTEXT_MENU, selectionRect.right)(state, dispatch, editorView);
 				this.toggleOpen();
@@ -588,6 +595,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				deleteColumnsWithAnalytics(
 					editorAnalyticsAPI,
 					isTableScalingEnabled,
+					tableWithFixedColumnWidthsOption,
 					shouldUseIncreasedScalingPercent,
 				)(INPUT_METHOD.CONTEXT_MENU, selectionRect)(state, dispatch, editorView);
 				this.toggleOpen();

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -94,6 +94,7 @@ type DragMenuProps = {
 	isTableScalingEnabled?: boolean;
 	tableDuplicateCellColouring?: boolean;
 	shouldUseIncreasedScalingPercent?: boolean;
+	isTableFixedColumnWidthsOptionEnabled?: boolean;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -263,6 +264,7 @@ export const DragMenu = React.memo(
 		isTableScalingEnabled,
 		tableDuplicateCellColouring,
 		shouldUseIncreasedScalingPercent,
+		isTableFixedColumnWidthsOptionEnabled,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -303,6 +305,7 @@ export const DragMenu = React.memo(
 			pluginConfig?.isHeaderRowRequired,
 			isTableScalingEnabled,
 			tableDuplicateCellColouring,
+			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 		);
 

package/src/ui/FloatingDragMenu/index.tsx

@@ -70,13 +70,12 @@ const FloatingDragMenu = ({
 		return null;
 	}
 
-	const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-		? getEditorFeatureFlags()
-		: {};
+	const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+		getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled &&
-		getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+		tableWithFixedColumnWidthsOption &&
 		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
 	return (
@@ -116,6 +115,7 @@ const FloatingDragMenu = ({
 				isTableScalingEnabled={isTableScalingEnabled}
 				tableDuplicateCellColouring={tableDuplicateCellColouring}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
+				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 			/>
 		</Popup>
 	);

package/src/ui/FloatingInsertButton/index.tsx

@@ -28,7 +28,6 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../commands-with-analytics';
-import { getPluginState } from '../../pm-plugins/plugin-factory';
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 
@@ -45,6 +44,7 @@ export interface Props {
 	isHeaderColumnEnabled?: boolean;
 	isHeaderRowEnabled?: boolean;
 	isDragAndDropEnabled?: boolean;
+	isTableScalingEnabled?: boolean;
 	mountPoint?: HTMLElement;
 	boundariesElement?: HTMLElement;
 	scrollableElement?: HTMLElement;
@@ -256,28 +256,31 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 	}
 
 	private insertColumn(event: React.SyntheticEvent) {
-		const { editorView, insertColumnButtonIndex, editorAnalyticsAPI, getEditorFeatureFlags } =
-			this.props;
+		const {
+			editorView,
+			insertColumnButtonIndex,
+			editorAnalyticsAPI,
+			getEditorFeatureFlags,
+			isTableScalingEnabled,
+		} = this.props;
 
 		if (typeof insertColumnButtonIndex !== 'undefined') {
 			event.preventDefault();
 
-			const { isTableScalingEnabled = false } = getPluginState(editorView.state);
+			const { tableDuplicateCellColouring = false, tableWithFixedColumnWidthsOption = false } =
+				getEditorFeatureFlags ? getEditorFeatureFlags() : {};
 
 			const shouldUseIncreasedScalingPercent =
 				isTableScalingEnabled &&
-				getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') &&
+				tableWithFixedColumnWidthsOption &&
 				getBooleanFF('platform.editor.table.use-increased-scaling-percent');
 
-			const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-				? getEditorFeatureFlags()
-				: {};
-
 			const { state, dispatch } = editorView;
 			insertColumnWithAnalytics(
 				editorAnalyticsAPI,
 				isTableScalingEnabled,
 				tableDuplicateCellColouring,
+				tableWithFixedColumnWidthsOption,
 				shouldUseIncreasedScalingPercent,
 			)(INPUT_METHOD.BUTTON, insertColumnButtonIndex)(state, dispatch, editorView);
 		}

package/src/ui/TableFloatingControls/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { browser } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -113,6 +114,8 @@ export const TableFloatingControls = ({
 		[editorView, tableActive],
 	);
 
+	const { featureFlagsState } = useSharedPluginState(api, ['featureFlags']);
+
 	if (!tableRef) {
 		return null;
 	}
@@ -149,7 +152,7 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{!getBooleanFF('platform.editor.drag-and-drop_wmv9t') &&
+								{!featureFlagsState?.elementDragAndDrop &&
 									(getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
 										<DragCornerControlsWithSelection
 											editorView={editorView}

package/src/utils/drag-menu.ts

@@ -160,6 +160,7 @@ export const getDragMenuConfig = (
 	isHeaderRowRequired?: boolean,
 	isTableScalingEnabled = false,
 	tableDuplicateCellColouring = false,
+	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 ): DragMenuConfig[] => {
 	const addOptions =
@@ -272,6 +273,7 @@ export const getDragMenuConfig = (
 						editorAnalyticsAPI,
 						isTableScalingEnabled,
 						tableDuplicateCellColouring,
+						isTableFixedColumnWidthsOptionEnabled,
 						shouldUseIncreasedScalingPercent,
 					)(INPUT_METHOD.TABLE_CONTEXT_MENU, (index ?? 0) + offset)(state, dispatch, editorView);
 				}
@@ -293,6 +295,7 @@ export const getDragMenuConfig = (
 								editorView.domAtPos.bind(editorView),
 								getEditorContainerWidth,
 								isTableScalingEnabled,
+								isTableFixedColumnWidthsOptionEnabled,
 							);
 
 							if (newResizeState) {
@@ -333,10 +336,16 @@ export const getDragMenuConfig = (
 						!!isHeaderRowRequired,
 					)(state, dispatch);
 				} else {
-					deleteColumnsWithAnalytics(editorAnalyticsAPI, isTableScalingEnabled)(
-						INPUT_METHOD.TABLE_CONTEXT_MENU,
-						selectionRect ?? defaultSelectionRect,
-					)(state, dispatch, editorView);
+					deleteColumnsWithAnalytics(
+						editorAnalyticsAPI,
+						isTableScalingEnabled,
+						isTableFixedColumnWidthsOptionEnabled,
+						shouldUseIncreasedScalingPercent,
+					)(INPUT_METHOD.TABLE_CONTEXT_MENU, selectionRect ?? defaultSelectionRect)(
+						state,
+						dispatch,
+						editorView,
+					);
 				}
 				return true;
 			},

package/tsconfig.app.json

@@ -57,6 +57,9 @@
 		{
 			"path": "../editor-plugin-editor-viewmode/tsconfig.app.json"
 		},
+		{
+			"path": "../editor-plugin-feature-flags/tsconfig.app.json"
+		},
 		{
 			"path": "../editor-plugin-guideline/tsconfig.app.json"
 		},