@atlaskit/editor-plugin-table 24.2.2 → 24.2.4

package/dist/types/pm-plugins/utils/column-controls.d.ts

@@ -2,10 +2,44 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
+/**
+ * Splits a merged cell's rendered width by `colwidth` ratios, falling back to an even split when
+ * usable ratios are unavailable.
+ */
+export declare const getProportionalColumnWidths: (totalWidth: number, columnCount: number, ratios: number[] | undefined) => number[];
+/**
+ * Like `getColumnsWidths`, but fills every visual column under a first-row `colspan` so column
+ * controls can render one grid track per column.
+ */
+export declare const getColumnsWidthsWithMergedCells: (view: EditorView) => Array<number | undefined>;
 export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {
     indexes: number[];
     left: number;
 } | null;
-export declare const colWidthsForRow: (tr: HTMLTableRowElement) => string;
+export declare const colWidthsForRow: (tr: HTMLTableRowElement, { useColwidthRatios }?: {
+    useColwidthRatios?: boolean;
+}) => string;
+/**
+ * Returns the visual column index that the mouse pointer is over within a column-spanned
+ * cell, by walking the per-column boundaries of the spanned cell and finding the column whose
+ * horizontal range contains `mouseEvent.clientX`.
+ *
+ * `<td>.cellIndex` for a cell with `colspan > 1` only resolves to the first column the cell
+ * occupies, so hovering anywhere inside a colspanned first-row cell pins the column drag handle
+ * to that first column. This resolver disambiguates which visual column the pointer is actually
+ * over so the handle/menu can target a single column.
+ *
+ * The search is restricted to columns in `[startIndex, endIndex)` (the cell's own span). The
+ * spanned cell's bounding rect is read once and split into per-column boundaries using the cell's
+ * `data-colwidth` ratios (falling back to an even split for unresized columns) — this keeps the
+ * work bounded by the colspan size and avoids measuring the whole table.
+ *
+ * Returns `undefined` when the mouse is outside the spanned range (so callers can fall back to
+ * the converted HTML column index).
+ */
+export declare const getColumnIndexByMousePosition: (cellElement: HTMLTableCellElement, mouseEvent: MouseEvent, columnIndexRange: {
+    endIndex: number;
+    startIndex: number;
+}) => number | undefined;
 export declare const convertHTMLCellIndexToColumnIndex: (htmlColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
 export declare const getColumnIndexMappedToColumnIndexInFirstRow: (convertedColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;

package/dist/types/pm-plugins/utils/dom.d.ts

@@ -2,6 +2,16 @@ export declare const isCell: (node: HTMLElement | null) => boolean;
 export declare const isCornerButton: (node: HTMLElement | null) => boolean;
 export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;
 export declare const getColumnOrRowIndex: (target: HTMLElement) => [number, number];
+/**
+ * Returns the element that carries the `data-start-index` / `data-end-index` attributes for a
+ * column/row control.
+ *
+ * The floating insert dot is a child of a wrapper that holds the index attributes, so when the
+ * pointer is directly over the dot the attributes are not on the event target. This walks up to
+ * the nearest ancestor that has `data-start-index`, falling back to the original element so the
+ * behaviour is unchanged when the target already carries the attributes.
+ */
+export declare const getIndexAttributeSourceElement: (target: HTMLElement) => HTMLElement;
 export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
 export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
 export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
@@ -11,6 +21,7 @@ export declare const isTableContainerOrWrapper: (node: HTMLElement | null) => bo
 export declare const isDragRowFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragColumnFloatingInsertDot: (node: HTMLElement | null) => boolean;
 export declare const isDragCornerButton: (node: HTMLElement | null) => boolean;
+export declare const isTableDragHandleButton: (target: EventTarget | null) => boolean;
 /**
  * This can be used with mouse events to determine the left/right side of the target the pointer is closest too.
  *

package/dist/types/pm-plugins/utils/row-controls.d.ts

@@ -11,5 +11,21 @@ export declare const getRowDeleteButtonParams: (rowsHeights: Array<number | unde
     top: number;
 } | null;
 export declare const getRowsParams: (rowsHeights: Array<number | undefined>) => RowParams[];
+/**
+ * Returns the visual row index that the mouse pointer is over, by walking the row heights
+ * inside `tbody` and finding the row whose vertical range contains `mouseEvent.clientY`.
+ *
+ * When `rowIndexRange` is provided, the search is restricted to rows in that range (the
+ * `endIndex` is exclusive). This is the hot path used on `mousemove` when hovering over a
+ * row-spanned cell — restricting the range to `[startIndex, endIndex)` keeps the number
+ * of forced layout reads bounded by the row-span size, not the table size.
+ *
+ * Returns `undefined` when the mouse is above the search range or below it (so callers can
+ * fall back to the HTML row index).
+ */
+export declare const getRowIndexByMousePosition: (tableRef: HTMLTableElement, mouseEvent: MouseEvent, rowIndexRange?: {
+    endIndex: number;
+    startIndex: number;
+}) => number | undefined;
 export declare const getRowClassNames: (index: number, selection: Selection, hoveredRows?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
 export declare const copyPreviousRow: (schema: Schema) => (insertNewRowIndex: number) => (tr: Transaction) => Transaction;

package/dist/types/pm-plugins/utils/selection.d.ts

@@ -1,3 +1,23 @@
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
 export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];
+/**
+ * Treats a column as fully selected when its first-row area is covered by a horizontal merge and
+ * the explicit `CellSelection` starts below that merged cell. `CellSelection.isColSelection()`
+ * returns `false` in this case because the selection does not include the merged first-row cell.
+ */
+export declare const isColumnSelectionWithMergedFirstRow: (selection: CellSelection) => boolean;
+/**
+ * Treats a row as fully selected when its first-column area is covered by a vertical merge and the
+ * explicit `CellSelection` starts to the right of that merged cell. `CellSelection.isRowSelection()`
+ * returns `false` in this case because the selection does not include the merged first-column cell.
+ */
+export declare const isRowSelectionWithMergedFirstColumn: (selection: CellSelection) => boolean;
+/**
+ * Returns `true` when the selection covers one or more complete rows or columns (the kind of
+ * selection produced by clicking a row/column drag handle), including the merged-cell variants
+ * where `CellSelection.isRowSelection()` / `isColSelection()` return `false`.
+ */
+export declare const isFullRowOrColumnSelected: (selection: Selection) => boolean;

package/dist/types/ui/DragHandle/index.d.ts

@@ -3,9 +3,10 @@ import React from 'react';
 import type { WithIntlProps, WrappedComponentProps } from 'react-intl';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { TriggerType } from '../../pm-plugins/drag-and-drop/types';
-import type { CellHoverMeta, TableDirection } from '../../types';
+import type { CellHoverMeta, PluginInjectionAPI, TableDirection } from '../../types';
 export type DragHandleAppearance = 'default' | 'selected' | 'disabled' | 'danger' | 'placeholder';
 type DragHandleProps = {
+    api?: PluginInjectionAPI | null;
     appearance?: DragHandleAppearance;
     direction?: TableDirection;
     editorView: EditorView;
@@ -21,7 +22,7 @@ type DragHandleProps = {
     previewHeight?: number;
     previewWidth?: number;
     tableLocalId: string;
-    toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>, handleIndex?: number) => void;
 };
 export declare const DragHandle: React.FC<WithIntlProps<DragHandleProps & WrappedComponentProps>> & {
     WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps>;

package/dist/types/ui/FloatingInsertButton/getPopupOptions.d.ts

@@ -1,4 +1,4 @@
 import type { PopupProps } from '@atlaskit/editor-common/ui';
 import type { TableDirection } from '../../types';
-declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
+declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null, verticalOffsetCorrection?: number): Partial<PopupProps>;
 export default getPopupOptions;

package/dist/types/ui/FloatingInsertButton/index.d.ts

@@ -30,6 +30,7 @@ export declare class FloatingInsertButton extends React.Component<Props & Wrappe
     static displayName: string;
     constructor(props: Props & WrappedComponentProps);
     render(): React.JSX.Element | null;
+    private findRowWithUnmergedColumn;
     private getCellPosition;
     private insertRow;
     private insertColumn;

package/dist/types/ui/event-handlers.d.ts

@@ -8,7 +8,7 @@ export declare const handleFocus: (view: EditorView, event: Event) => boolean;
 export declare const handleClick: (view: EditorView, event: Event) => boolean;
 export declare const handleMouseOver: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseUp: (view: EditorView, mouseEvent: Event) => boolean;
-export declare const handleMouseDown: (_: EditorView, event: Event) => boolean;
+export declare const handleMouseDown: (_view: EditorView, event: Event, api?: PluginInjectionAPI | null) => boolean;
 export declare const handleMouseOut: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseEnter: (view: EditorView, mouseEvent: Event) => boolean;
 export declare const handleMouseLeave: (view: EditorView, event: Event) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "24.2.2",
+	"version": "24.2.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
 		"@atlaskit/primitives": "^20.0.0",
-		"@atlaskit/tmp-editor-statsig": "^109.0.0",
+		"@atlaskit/tmp-editor-statsig": "^109.2.0",
 		"@atlaskit/toggle": "^17.0.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.7.0",
+		"@atlaskit/editor-common": "^116.10.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -164,6 +164,6 @@
 	"devDependencies": {
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-intl": "^6.6.2"
+		"react-intl": "^7.0.0"
 	}
 }