@atlaskit/editor-plugin-table 9.1.3 → 9.2.1

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -2,14 +2,14 @@
 import type { MouseEvent } from 'react';
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { injectIntl } from 'react-intl-next';
-import type { WrappedComponentProps } from 'react-intl-next';
-
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { token } from '@atlaskit/tokens';
 
@@ -19,11 +19,12 @@ import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import { getPluginState as getTablePluginState } from '../../../pm-plugins/plugin-factory';
 import { getRowHeights, getRowsParams } from '../../../pm-plugins/utils/row-controls';
 import { getSelectedRowIndexes } from '../../../pm-plugins/utils/selection';
+import type { TablePlugin } from '../../../tablePluginType';
 import { TableCssClassName as ClassName } from '../../../types';
 import type { CellHoverMeta, DraggableSourceData, HandleTypes } from '../../../types';
 import { dropTargetExtendedWidth } from '../../consts';
 import type { DragHandleAppearance } from '../../DragHandle';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 import RowDropTarget from '../RowDropTarget';
 
 type DragControlsProps = {
@@ -40,6 +41,8 @@ type DragControlsProps = {
 	selectRow: (row: number, expand: boolean) => void;
 	selectRows: (rowIndexes: number[]) => void;
 	updateCellHoverLocation: (rowIndex: number) => void;
+	api?: ExtractInjectionAPI<TablePlugin>;
+	selection?: Selection;
 };
 
 const getSelectedRows = (selection: Selection) => {
@@ -53,7 +56,7 @@ const getSelectedRows = (selection: Selection) => {
 	return [];
 };
 
-const DragControlsComponent = ({
+export const DragControls = ({
 	tableRef,
 	tableNode,
 	tableWidth,
@@ -67,13 +70,14 @@ const DragControlsComponent = ({
 	selectRow,
 	selectRows,
 	updateCellHoverLocation,
-}: DragControlsProps & WrappedComponentProps) => {
+	api,
+	selection,
+}: DragControlsProps) => {
 	const [isDragging, setIsDragging] = useState(false);
-
 	const rowHeights = getRowHeights(tableRef);
 	const rowsParams = getRowsParams(rowHeights);
 	const heights = rowHeights.map((height) => `${height - 1}px`).join(' ');
-	const selectedRowIndexes = getSelectedRows(editorView.state.selection);
+	const selectedRowIndexes = getSelectedRows(selection ?? editorView.state.selection);
 	const currentNodeLocalId = tableNode?.attrs?.localId ?? '';
 
 	useEffect(() => {
@@ -180,8 +184,6 @@ const DragControlsComponent = ({
 		appearance: DragHandleAppearance,
 		gridRow: string,
 		indexes: number[],
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) => {
 		const isHover = type === 'hover';
 
@@ -213,22 +215,42 @@ const DragControlsComponent = ({
 				}}
 				data-testid={`table-floating-row-${isHover ? rowIndex : selectedRowIndexes[0]}-drag-handle`}
 			>
-				<DragHandle
-					isDragMenuTarget={!isHover}
-					direction="row"
-					tableLocalId={currentNodeLocalId}
-					indexes={indexes}
-					forceDefaultHandle={!isHover}
-					previewWidth={tableWidth}
-					previewHeight={previewHeight}
-					appearance={appearance}
-					hoveredCell={hoveredCell}
-					onClick={handleClick}
-					onMouseOver={handleMouseOver}
-					onMouseOut={handleMouseOut}
-					toggleDragMenu={toggleDragMenuHandler}
-					editorView={editorView}
-				/>
+				{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+					<DragHandleWithSharedState
+						isDragMenuTarget={!isHover}
+						direction="row"
+						tableLocalId={currentNodeLocalId}
+						indexes={indexes}
+						forceDefaultHandle={!isHover}
+						previewWidth={tableWidth}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						hoveredCell={hoveredCell}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+						api={api}
+					/>
+				) : (
+					<DragHandle
+						isDragMenuTarget={!isHover}
+						direction="row"
+						tableLocalId={currentNodeLocalId}
+						indexes={indexes}
+						forceDefaultHandle={!isHover}
+						previewWidth={tableWidth}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						hoveredCell={hoveredCell}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+					/>
+				)}
 			</div>
 		);
 	};
@@ -347,4 +369,41 @@ const DragControlsComponent = ({
 	);
 };
 
-export const DragControls = injectIntl(DragControlsComponent);
+export const DragControlsWithSelection = ({
+	editorView,
+	tableRef,
+	tableNode,
+	tableWidth,
+	tableActive,
+	hoveredCell,
+	isInDanger,
+	isTableHovered,
+	isResizing,
+	hoverRows,
+	selectRow,
+	selectRows,
+	updateCellHoverLocation,
+	api,
+}: Exclude<DragControlsProps, 'selection'>) => {
+	const { selectionState } = useSharedPluginState(api, ['selection']);
+
+	return (
+		<DragControls
+			editorView={editorView}
+			tableRef={tableRef}
+			tableNode={tableNode}
+			tableWidth={tableWidth}
+			tableActive={tableActive}
+			hoveredCell={hoveredCell}
+			isInDanger={isInDanger}
+			isTableHovered={isTableHovered}
+			isResizing={isResizing}
+			hoverRows={hoverRows}
+			selectRow={selectRow}
+			selectRows={selectRows}
+			updateCellHoverLocation={updateCellHoverLocation}
+			api={api}
+			selection={selectionState?.selection}
+		/>
+	);
+};

package/src/ui/TableFloatingControls/index.tsx

@@ -2,12 +2,12 @@ import React, { useCallback } from 'react';
 
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import { browser } from '@atlaskit/editor-common/browser';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
@@ -25,7 +25,7 @@ import {
 import { FloatingControlsWithSelection } from './FloatingControlsWithSelection';
 import NumberColumn from './NumberColumn';
 import { RowControls } from './RowControls/ClassicControls';
-import { DragControls } from './RowControls/DragControls';
+import { DragControls, DragControlsWithSelection } from './RowControls/DragControls';
 
 interface TableFloatingControlsProps {
 	editorView: EditorView;
@@ -51,6 +51,7 @@ interface TableFloatingControlsProps {
 	isChromelessEditor?: boolean;
 }
 
+// Row controls
 export const TableFloatingControls = ({
 	editorView,
 	tableRef,
@@ -123,8 +124,6 @@ export const TableFloatingControls = ({
 		[editorView, tableActive],
 	);
 
-	const { featureFlagsState } = useSharedPluginState(api, ['featureFlags']);
-
 	if (!tableRef) {
 		return null;
 	}
@@ -142,8 +141,7 @@ export const TableFloatingControls = ({
 	// Ignored via go/ees005
 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 	const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos!);
-	const shouldShowCornerControls =
-		!featureFlagsState?.elementDragAndDrop || (isNested && !editorExperiment('nested-dnd', true));
+	const shouldShowCornerControls = isNested && !editorExperiment('nested-dnd', true);
 
 	return (
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -171,42 +169,67 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{shouldShowCornerControls &&
-									(editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
-										<DragCornerControlsWithSelection
-											editorView={editorView}
+								{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+									<>
+										{shouldShowCornerControls && (
+											<DragCornerControlsWithSelection
+												editorView={editorView}
+												tableRef={tableRef}
+												isInDanger={isInDanger}
+												isResizing={isResizing}
+												api={api}
+											/>
+										)}
+										<DragControlsWithSelection
 											tableRef={tableRef}
+											tableNode={tableNode}
+											hoveredCell={hoveredCell}
+											isTableHovered={isTableHovered}
+											editorView={editorView}
+											tableActive={tableActive}
 											isInDanger={isInDanger}
 											isResizing={isResizing}
+											// Ignored via go/ees005
+											// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+											tableWidth={tableWrapperWidth!}
+											hoverRows={_hoverRows}
+											selectRow={_selectRow}
+											selectRows={_selectRows}
+											updateCellHoverLocation={updateCellHoverLocation}
 											api={api}
 										/>
-									) : (
-										<DragCornerControls
-											editorView={editorView}
+									</>
+								) : (
+									<>
+										{shouldShowCornerControls && (
+											<DragCornerControls
+												editorView={editorView}
+												tableRef={tableRef}
+												isInDanger={isInDanger}
+												isResizing={isResizing}
+											/>
+										)}
+										<DragControls
 											tableRef={tableRef}
+											tableNode={tableNode}
+											hoveredCell={hoveredCell}
+											isTableHovered={isTableHovered}
+											editorView={editorView}
+											tableActive={tableActive}
 											isInDanger={isInDanger}
 											isResizing={isResizing}
+											// Ignored via go/ees005
+											// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+											tableWidth={tableWrapperWidth!}
+											hoverRows={_hoverRows}
+											selectRow={_selectRow}
+											selectRows={_selectRows}
+											updateCellHoverLocation={updateCellHoverLocation}
 										/>
-									))}
-								<DragControls
-									tableRef={tableRef}
-									tableNode={tableNode}
-									hoveredCell={hoveredCell}
-									isTableHovered={isTableHovered}
-									editorView={editorView}
-									tableActive={tableActive}
-									isInDanger={isInDanger}
-									isResizing={isResizing}
-									// Ignored via go/ees005
-									// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-									tableWidth={tableWrapperWidth!}
-									hoverRows={_hoverRows}
-									selectRow={_selectRow}
-									selectRows={_selectRows}
-									updateCellHoverLocation={updateCellHoverLocation}
-								/>
+									</>
+								)}
 							</>
-						) : editorExperiment('platform_editor_table_use_shared_state_hook', true) ? (
+						) : fg('platform_editor_table_use_shared_state_hook_fg') ? (
 							<FloatingControlsWithSelection
 								editorView={editorView}
 								tableRef={tableRef}

package/src/ui/event-handlers.ts

@@ -507,8 +507,6 @@ export const handleCut = (
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Transaction => {
 	const oldSelection = oldState.tr.selection;
 	let { tr } = newState;

package/src/ui/toolbar.tsx

@@ -115,8 +115,6 @@ export const getToolbarMenuConfig = (
 	editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 	isTableScalingWithFixedColumnWidthsOptionShown = false,
 	areTableColumnWidthsFixed = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): FloatingToolbarItem<Command> => {
 	const optionItem: typeOption = 'item-checkbox';
 
@@ -209,8 +207,6 @@ export const getToolbarCellOptionsConfig = (
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): FloatingToolbarDropdown<Command> => {
 	const { top, bottom, right, left } = initialSelectionRect;
 	const numberOfColumns = right - left;
@@ -487,8 +483,6 @@ export const getToolbarConfig =
 		options?: TablePluginOptions,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) =>
 	(config: PluginConfig): FloatingToolbarHandler =>
 	(state, intl) => {
@@ -678,8 +672,6 @@ const getCellItems = (
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Array<FloatingToolbarItem<Command>> => {
 	const initialSelectionRect = getClosestSelectionRect(state);
 	if (initialSelectionRect) {
@@ -711,8 +703,6 @@ const getDistributeConfig =
 		isTableScalingEnabled = false,
 		isTableFixedColumnWidthsOptionEnabled = false,
 		isCommentEditor = false,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	): Command =>
 	(state, dispatch, editorView) => {
 		const selectionOrTableRect = getClosestSelectionOrTableRect(state);
@@ -752,8 +742,6 @@ const getColumnSettingItems = (
 	isTableScalingEnabled = false,
 	isTableFixedColumnWidthsOptionEnabled = false,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Array<FloatingToolbarItem<Command>> => {
 	const pluginState = getPluginState(editorState);
 	const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
@@ -809,8 +797,6 @@ const getColorPicker = (
 	{ formatMessage }: ToolbarMenuContext,
 	editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined,
 	getEditorView: () => EditorView | null,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Array<FloatingToolbarItem<Command>> => {
 	const { targetCellPosition, pluginConfig } = getPluginState(state);
 	if (!pluginConfig.allowBackgroundColor) {
@@ -902,8 +888,6 @@ const getAlignmentOptionsConfig = (
 	shouldUseIncreasedScalingPercent: boolean,
 	isFullWidthEditor?: boolean,
 	isCommentEditor?: boolean,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -1017,8 +1001,6 @@ const isLayoutOptionDisabled = (
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
 	isFullWidthEditor: boolean | undefined,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	const { lineLength } = getEditorContainerWidth();
 	let tableContainerWidth = getTableContainerWidth(selectedNode);