@atlaskit/editor-plugin-table 9.1.3 → 9.2.0

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -27,7 +27,7 @@ import type { TablePlugin } from '../../../tablePluginType';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
 import { TableCssClassName as ClassName } from '../../../types';
 import type { DragHandleAppearance } from '../../DragHandle';
-import { DragHandle } from '../../DragHandle';
+import { DragHandle, DragHandleWithSharedState } from '../../DragHandle';
 
 interface ColumnControlsProps {
 	editorView: EditorView;
@@ -68,7 +68,6 @@ export const ColumnControls = ({
 	isInDanger,
 	rowHeights,
 	colWidths,
-	hasHeaderColumn,
 	isTableHovered,
 	tableContainerWidth,
 	isNumberColumnEnabled,
@@ -98,7 +97,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = fg('platform_editor_breakout_use_css') ? 45 : rowHeights?.[0];
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {
@@ -238,22 +237,42 @@ export const ColumnControls = ({
 					isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0]
 				}-drag-handle`}
 			>
-				<DragHandle
-					isDragMenuTarget={!isHover}
-					direction="column"
-					tableLocalId={localId || ''}
-					indexes={indexes}
-					hoveredCell={hoveredCell}
-					previewWidth={previewWidth}
-					forceDefaultHandle={!isHover}
-					previewHeight={previewHeight}
-					appearance={appearance}
-					onClick={handleClick}
-					onMouseOver={handleMouseOver}
-					onMouseOut={handleMouseOut}
-					toggleDragMenu={toggleDragMenuHandler}
-					editorView={editorView}
-				/>
+				{fg('platform_editor_table_use_shared_state_hook_fg') ? (
+					<DragHandleWithSharedState
+						isDragMenuTarget={!isHover}
+						direction="column"
+						tableLocalId={localId || ''}
+						indexes={indexes}
+						hoveredCell={hoveredCell}
+						previewWidth={previewWidth}
+						forceDefaultHandle={!isHover}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+						api={api}
+					/>
+				) : (
+					<DragHandle
+						isDragMenuTarget={!isHover}
+						direction="column"
+						tableLocalId={localId || ''}
+						indexes={indexes}
+						hoveredCell={hoveredCell}
+						previewWidth={previewWidth}
+						forceDefaultHandle={!isHover}
+						previewHeight={previewHeight}
+						appearance={appearance}
+						onClick={handleClick}
+						onMouseOver={handleMouseOver}
+						onMouseOut={handleMouseOut}
+						toggleDragMenu={toggleDragMenuHandler}
+						editorView={editorView}
+					/>
+				)}
 			</div>
 		);
 	};

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -7,7 +7,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
 import { getColumnsWidths } from '../../pm-plugins/utils/column-controls';
@@ -102,7 +101,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
+		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (rowHeights?.[0] ?? 0) : 0;
 		containerRef?.current?.style.setProperty(
 			'top',
 			fg('platform_editor_breakout_use_css')
@@ -141,9 +140,7 @@ const TableFloatingColumnControls = ({
 				isNumberColumnEnabled={isNumberColumnEnabled}
 				isDragging={isDragging}
 				getScrollOffset={getScrollOffset}
-				api={
-					editorExperiment('platform_editor_table_use_shared_state_hook', true) ? api : undefined
-				}
+				api={fg('platform_editor_table_use_shared_state_hook_fg') ? api : undefined}
 			/>
 			{isDragging && (
 				<ColumnDropTargets

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(() => {
@@ -213,22 +217,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 +371,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

@@ -8,6 +8,7 @@ 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 +26,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 +52,7 @@ interface TableFloatingControlsProps {
 	isChromelessEditor?: boolean;
 }
 
+// Row controls
 export const TableFloatingControls = ({
 	editorView,
 	tableRef,
@@ -171,42 +173,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}