@atlaskit/editor-plugin-table 9.1.3 → 9.2.1

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -42,8 +42,6 @@ const scale = (
 	isTableScalingEnabledOnCurrentTable = false,
 	shouldUseIncreasedScalingPercent = false,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): ResizeState | undefined => {
 	const {
 		node,
@@ -109,8 +107,6 @@ const scaleWithParent = (
 	isTableScalingEnabledOnCurrentTable = false,
 	shouldUseIncreasedScalingPercent = false,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	const resizeState = getResizeState({
 		minWidth: tableCellMinWidth,
@@ -163,8 +159,6 @@ export const previewScaleTable = (
 	isTableScalingEnabled: boolean = false,
 	isTableWithFixedColumnWidthsOptionEnabled: boolean = false,
 	isCommentEditor: boolean = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	const { node, start, parentWidth } = options;
 
@@ -225,8 +219,6 @@ export const scaleTable =
 		isTableScalingEnabledOnCurrentTable = false,
 		shouldUseIncreasedScalingPercent = false,
 		isCommentEditor = false,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) =>
 	(tr: Transaction) => {
 		if (!tableRef) {

package/src/pm-plugins/table-width.ts

@@ -40,8 +40,6 @@ const createPlugin = (
 	isTableScalingEnabled: boolean,
 	isTableAlignmentEnabled: boolean,
 	isCommentEditor: boolean,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	return new SafePlugin({
 		key: pluginKey,
@@ -159,8 +157,6 @@ const createPlugin = (
 
 			if (referentialityTr) {
 				referentialityTr.steps.forEach((step) => {
-					// Ignored via go/ees005
-					// eslint-disable-next-line @typescript-eslint/max-params
 					step.getMap().forEach((_, __, newStart, newEnd) => {
 						newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
 							if (node.type === table) {

package/src/pm-plugins/transforms/column-width.ts

@@ -28,8 +28,6 @@ export const updateColumnWidths =
 		table: PMNode,
 		start: number,
 		api: PluginInjectionAPI | undefined | null,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) =>
 	(tr: Transaction): Transaction => {
 		const map = TableMap.get(table);
@@ -134,8 +132,6 @@ export const rescaleColumns =
 		shouldUseIncreasedScalingPercent = false,
 		api: PluginInjectionAPI | undefined | null,
 		isCommentEditor = false,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) =>
 	(table: ContentNodeWithPos, view: EditorView | undefined) =>
 	(tr: Transaction): Transaction => {

package/src/pm-plugins/transforms/delete-columns.ts

@@ -252,8 +252,6 @@ export const deleteColumns =
 		isTableFixedColumnWidthsOptionEnabled = false,
 		shouldUseIncreasedScalingPercent = false,
 		isCommentEditor = false,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) =>
 	(tr: Transaction) => {
 		let updatedTr = tr;

package/src/pm-plugins/transforms/fix-tables.ts

@@ -50,8 +50,6 @@ export const removeExtraneousColumnWidths = (
 	basePos: number,
 	tr: Transaction,
 	reportInvalidTableCellSpanAttrs?: ReportInvalidNodeAttrs,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): boolean => {
 	let hasProblems = false;
 
@@ -126,8 +124,6 @@ export const fixAutoSizedTable = (
 	tableRef: HTMLTableElement,
 	tablePos: number,
 	opts: { containerWidth: number },
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Transaction => {
 	let { tr } = view.state;
 	const domAtPos = view.domAtPos.bind(view);
@@ -179,8 +175,6 @@ const getLayoutBasedOnWidth = (totalWidth: number) => {
 	}
 };
 
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 function parseDOMColumnWidths(
 	domAtPos: (pos: number) => { node: Node; offset: number },
 	tableNode: PMNode,
@@ -220,8 +214,6 @@ const replaceCells = (
 	table: PMNode,
 	tablePos: number,
 	modifyCell: (cell: PMNode, rowIndex: number, colIndex: number) => PMNode,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Transaction => {
 	const rows: PMNode[] = [];
 	let modifiedCells = 0;

package/src/pm-plugins/transforms/replace-table.ts

@@ -12,8 +12,6 @@ export const replaceSelectedTable = (
 	content: string | Slice,
 	inputMethod: INPUT_METHOD.KEYBOARD | INPUT_METHOD.CLIPBOARD,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Transaction => {
 	if (isTableSelected(state.selection)) {
 		const table = findTable(state.selection);

package/src/pm-plugins/transforms/split.ts

@@ -10,8 +10,6 @@ import { TableMap } from '@atlaskit/editor-tables/table-map';
  * @param columnStart - Start of the rect included (rect.left)
  * @param columnEnd - End of the rect not included (rect.right)
  */
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 export function splitCellsInColumns(
 	tr: Transaction,
 	tablePos: number,

package/src/pm-plugins/utils/alignment.ts

@@ -22,8 +22,6 @@ export const shouldChangeAlignmentToCenterResized = (
 	tableNode: PmNode,
 	lineLength: number | undefined,
 	updatedTableWidth: number,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) =>
 	Boolean(
 		isTableAlignmentEnabled &&

package/src/pm-plugins/utils/decoration.ts

@@ -57,8 +57,6 @@ export const createControlsHoverDecoration = (
 	hoveredIndexes: number[],
 	danger?: boolean,
 	selected?: boolean,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): Decoration[] => {
 	const table = findTable(tr.selection);
 	if (!table) {
@@ -224,8 +222,6 @@ export const updateDecorations = (
 	decorationSet: DecorationSet,
 	decorations: Decoration[],
 	key: TableDecorations,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): DecorationSet => {
 	const filteredDecorations = filterDecorationByKey(key, decorationSet);
 	const decorationSetFiltered = decorationSet.remove(filteredDecorations);
@@ -320,8 +316,6 @@ export const createResizeHandleDecoration = (
 	includeTooltip: boolean = false,
 	getIntl: () => IntlShape,
 	nodeViewPortalProviderAPI: PortalProviderAPI,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): [Decoration[], Decoration[]] => {
 	const emptyResult: [Decoration[], Decoration[]] = [[], []];
 	const table = findTable(tr.selection);
@@ -340,8 +334,6 @@ export const createResizeHandleDecoration = (
 		rowIndex: number,
 		cellPos: number,
 		cellNode: PmNode,
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	): Decoration => {
 		const decorationRenderKey = uuid();
 		const position = cellPos + cellNode.nodeSize - 1;

package/src/pm-plugins/utils/drag-menu.ts

@@ -85,8 +85,6 @@ export const canMove = (
 	totalItemsOfSourceTypeCount: number,
 	selection: Selection,
 	selectionRect?: Rect,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	if (!selectionRect) {
 		return false;
@@ -174,8 +172,6 @@ export const getDragMenuConfig = (
 		ariaLiveElementAttributes?: AriaLiveElementAttributes,
 	) => void,
 	isCommentEditor = false,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): DragMenuConfig[] => {
 	const { selection } = editorView.state;
 	const { getIntl } = getTablePluginState(editorView.state);

package/src/pm-plugins/utils/nodes.ts

@@ -94,8 +94,6 @@ export const tablesHaveDifferentNoOfRows = (
 	return prevMap.height !== currentMap.height;
 };
 
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 function filterNearSelection<T, U>(
 	selection: Selection,
 	findNode: (selection: Selection) => { pos: number; node: PmNode } | undefined,

package/src/pm-plugins/utils/paste.ts

@@ -4,6 +4,7 @@ import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { Slice, Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import { flatten, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { getPluginState } from '../plugin-factory';
@@ -17,6 +18,9 @@ export const unwrapContentFromTable = (maybeTable: PMNode): PMNode | PMNode[] =>
 		maybeTable.descendants((maybeCell) => {
 			if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
 				content.push(...flatten(maybeCell, false).map((child) => child.node));
+				if (fg('platform_editor_nested_tables_paste_dupe_fix')) {
+					return false;
+				}
 			}
 			return true;
 		});
@@ -33,8 +37,6 @@ const unwrapNestedTables = (
 	schema: Schema,
 	unwrapNestDepth: number,
 	currentNestDepth = 0,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): PMNode[] => {
 	const flattenNested = (node: PMNode, tableDepth: number) => {
 		if (node.type === schema.nodes.table) {

package/src/pm-plugins/utils/row-controls.ts

@@ -92,8 +92,6 @@ export const getRowClassNames = (
 	hoveredRows: number[] = [],
 	isInDanger?: boolean,
 	isResizing?: boolean,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ): string => {
 	const classNames: string[] = [];
 	if (isRowSelected(index)(selection) || (hoveredRows.indexOf(index) > -1 && !isResizing)) {

package/src/pm-plugins/utils/snapping.ts

@@ -91,8 +91,6 @@ export const findClosestSnap = (
 	guidelines: GuidelineConfig[],
 	snapGap: number = 0,
 	tolerance: number = 0,
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/max-params
 ) => {
 	const closestGapIndex = snapWidths.reduce(
 		(prev, curr, index) =>

package/src/tablePlugin.tsx

@@ -133,6 +133,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				isTableResizing: tableWidthResizingPluginState?.resizing,
 				isInDanger: tablePluginState.isInDanger,
 				hoveredRows: tablePluginState.hoveredRows,
+				hoveredColumns: tablePluginState.hoveredColumns,
 				hoveredCell: tablePluginState.hoveredCell,
 				isTableHovered: tablePluginState.isTableHovered,
 				isWholeTableInDanger: tablePluginState.isWholeTableInDanger,

package/src/types/index.ts

@@ -53,6 +53,7 @@ export type TableSharedStateInternal = Pick<
 	| 'ordering'
 	| 'isInDanger'
 	| 'hoveredRows'
+	| 'hoveredColumns'
 	| 'hoveredCell'
 	| 'isTableHovered'
 	| 'tableNode'

package/src/ui/DragHandle/index.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/no-html-button */
 import type { MouseEventHandler } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -7,7 +8,9 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
 import { browser } from '@atlaskit/editor-common/browser';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -22,8 +25,9 @@ import {
 	findDuplicatePosition,
 	hasMergedCellsInSelection,
 } from '../../pm-plugins/utils/merged-cells';
+import type { TablePlugin } from '../../tablePluginType';
 import { TableCssClassName as ClassName } from '../../types';
-import type { CellHoverMeta, TableDirection } from '../../types';
+import type { CellHoverMeta, TableDirection, TableSharedStateInternal } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
 
@@ -49,6 +53,12 @@ type DragHandleProps = {
 	) => void;
 	editorView: EditorView;
 	isDragMenuTarget: boolean; // this is identify which current handle component is
+	hoveredColumns?: number[];
+	hoveredRows?: number[];
+};
+
+type DragHandleWithSharedStateProps = Exclude<DragHandleProps, 'hoveredColumns' | 'hoveredRows'> & {
+	api?: ExtractInjectionAPI<TablePlugin>;
 };
 
 const DragHandleComponent = ({
@@ -67,6 +77,8 @@ const DragHandleComponent = ({
 	onClick,
 	editorView,
 	intl: { formatMessage },
+	hoveredColumns,
+	hoveredRows,
 }: DragHandleProps & WrappedComponentProps) => {
 	const dragHandleDivRef = useRef<HTMLButtonElement>(null);
 	const [previewContainer, setPreviewContainer] = useState<HTMLElement | null>(null);
@@ -74,7 +86,13 @@ const DragHandleComponent = ({
 		state,
 		state: { selection },
 	} = editorView;
-	const { hoveredColumns, hoveredRows } = getPluginState(state);
+
+	if (hoveredColumns === undefined || hoveredRows === undefined) {
+		const { hoveredColumns: hoveredColumnsState, hoveredRows: hoveredRowsState } =
+			getPluginState(state);
+		hoveredColumns = hoveredColumnsState;
+		hoveredRows = hoveredRowsState;
+	}
 	const { isDragMenuOpen = false } = getDnDPluginState(state);
 
 	const isRow = direction === 'row';
@@ -291,4 +309,51 @@ const DragHandleComponent = ({
 	);
 };
 
+const DragHandleComponentWithSharedState = ({
+	isDragMenuTarget,
+	tableLocalId,
+	direction,
+	appearance,
+	indexes,
+	forceDefaultHandle,
+	previewHeight,
+	previewWidth,
+	onMouseOver,
+	onMouseOut,
+	toggleDragMenu,
+	hoveredCell,
+	onClick,
+	editorView,
+	intl,
+	api,
+}: DragHandleWithSharedStateProps & WrappedComponentProps) => {
+	const { tableState } = useSharedPluginState(api, ['table']) as {
+		tableState?: TableSharedStateInternal;
+	};
+
+	return (
+		<DragHandleComponent
+			isDragMenuTarget={isDragMenuTarget}
+			tableLocalId={tableLocalId}
+			direction={direction}
+			appearance={appearance}
+			indexes={indexes}
+			forceDefaultHandle={forceDefaultHandle}
+			previewWidth={previewWidth}
+			previewHeight={previewHeight}
+			onMouseOver={onMouseOver}
+			onMouseOut={onMouseOut}
+			toggleDragMenu={toggleDragMenu}
+			hoveredCell={hoveredCell}
+			onClick={onClick}
+			editorView={editorView}
+			intl={intl}
+			hoveredColumns={tableState?.hoveredColumns}
+			hoveredRows={tableState?.hoveredRows}
+		/>
+	);
+};
+
 export const DragHandle = injectIntl(DragHandleComponent);
+
+export const DragHandleWithSharedState = injectIntl(DragHandleComponentWithSharedState);

package/src/ui/FloatingInsertButton/getPopupOptions.ts

@@ -54,8 +54,6 @@ function getRowOptions(index: number, isDragAndDropEnabled: boolean): Partial<Po
 	};
 }
 
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 function getColumnOptions(
 	index: number,
 	tableContainer: HTMLElement | null,
@@ -113,8 +111,6 @@ function getColumnOptions(
 	return options;
 }
 
-// Ignored via go/ees005
-// eslint-disable-next-line @typescript-eslint/max-params
 function getPopupOptions(
 	direction: TableDirection,
 	index: number,

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,
@@ -196,8 +195,6 @@ export const ColumnControls = ({
 		appearance: DragHandleAppearance,
 		gridColumn: string,
 		indexes: number[],
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/max-params
 	) => {
 		const isHover = type === 'hover';
 		const isPlaceholder = appearance === 'placeholder';
@@ -238,22 +235,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';
@@ -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