@atlaskit/editor-plugin-table 24.2.1 → 24.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +21 -0
- package/dist/cjs/pm-plugins/utils/column-controls.js +119 -2
- package/dist/cjs/pm-plugins/utils/dom.js +20 -1
- package/dist/cjs/pm-plugins/utils/row-controls.js +43 -1
- package/dist/cjs/pm-plugins/utils/selection.js +61 -1
- package/dist/cjs/ui/DragHandle/index.js +10 -2
- package/dist/cjs/ui/FloatingInsertButton/getPopupOptions.js +19 -5
- package/dist/cjs/ui/FloatingInsertButton/index.js +37 -3
- package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js +25 -15
- package/dist/cjs/ui/TableFloatingColumnControls/index.js +1 -1
- package/dist/cjs/ui/TableFloatingControls/RowControls/DragControls.js +28 -12
- package/dist/cjs/ui/common-styles.js +6 -1
- package/dist/cjs/ui/event-handlers.js +47 -7
- package/dist/cjs/ui/rounded-table-styles.js +1 -1
- package/dist/es2019/pm-plugins/utils/column-controls.js +114 -2
- package/dist/es2019/pm-plugins/utils/dom.js +19 -0
- package/dist/es2019/pm-plugins/utils/row-controls.js +42 -0
- package/dist/es2019/pm-plugins/utils/selection.js +60 -0
- package/dist/es2019/ui/DragHandle/index.js +10 -2
- package/dist/es2019/ui/FloatingInsertButton/getPopupOptions.js +24 -5
- package/dist/es2019/ui/FloatingInsertButton/index.js +35 -3
- package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js +26 -16
- package/dist/es2019/ui/TableFloatingColumnControls/index.js +2 -2
- package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js +29 -12
- package/dist/es2019/ui/common-styles.js +28 -2
- package/dist/es2019/ui/event-handlers.js +47 -7
- package/dist/es2019/ui/rounded-table-styles.js +1 -1
- package/dist/esm/pm-plugins/utils/column-controls.js +118 -1
- package/dist/esm/pm-plugins/utils/dom.js +19 -0
- package/dist/esm/pm-plugins/utils/row-controls.js +42 -0
- package/dist/esm/pm-plugins/utils/selection.js +60 -0
- package/dist/esm/ui/DragHandle/index.js +10 -2
- package/dist/esm/ui/FloatingInsertButton/getPopupOptions.js +19 -5
- package/dist/esm/ui/FloatingInsertButton/index.js +37 -3
- package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js +27 -17
- package/dist/esm/ui/TableFloatingColumnControls/index.js +2 -2
- package/dist/esm/ui/TableFloatingControls/RowControls/DragControls.js +30 -14
- package/dist/esm/ui/common-styles.js +7 -2
- package/dist/esm/ui/event-handlers.js +49 -9
- package/dist/esm/ui/rounded-table-styles.js +1 -1
- package/dist/types/pm-plugins/utils/column-controls.d.ts +35 -1
- package/dist/types/pm-plugins/utils/dom.d.ts +10 -0
- package/dist/types/pm-plugins/utils/row-controls.d.ts +16 -0
- package/dist/types/pm-plugins/utils/selection.d.ts +13 -0
- package/dist/types/ui/DragHandle/index.d.ts +1 -1
- package/dist/types/ui/FloatingInsertButton/getPopupOptions.d.ts +1 -1
- package/dist/types/ui/FloatingInsertButton/index.d.ts +1 -0
- package/package.json +3 -3
|
@@ -2,10 +2,44 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
|
|
|
2
2
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
3
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
4
4
|
export declare const getColumnsWidths: (view: EditorView) => Array<number | undefined>;
|
|
5
|
+
/**
|
|
6
|
+
* Splits a merged cell's rendered width by `colwidth` ratios, falling back to an even split when
|
|
7
|
+
* usable ratios are unavailable.
|
|
8
|
+
*/
|
|
9
|
+
export declare const getProportionalColumnWidths: (totalWidth: number, columnCount: number, ratios: number[] | undefined) => number[];
|
|
10
|
+
/**
|
|
11
|
+
* Like `getColumnsWidths`, but fills every visual column under a first-row `colspan` so column
|
|
12
|
+
* controls can render one grid track per column.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getColumnsWidthsWithMergedCells: (view: EditorView) => Array<number | undefined>;
|
|
5
15
|
export declare const getColumnDeleteButtonParams: (columnsWidths: Array<number | undefined>, selection: Selection) => {
|
|
6
16
|
indexes: number[];
|
|
7
17
|
left: number;
|
|
8
18
|
} | null;
|
|
9
|
-
export declare const colWidthsForRow: (tr: HTMLTableRowElement
|
|
19
|
+
export declare const colWidthsForRow: (tr: HTMLTableRowElement, { useColwidthRatios }?: {
|
|
20
|
+
useColwidthRatios?: boolean;
|
|
21
|
+
}) => string;
|
|
22
|
+
/**
|
|
23
|
+
* Returns the visual column index that the mouse pointer is over within a column-spanned
|
|
24
|
+
* cell, by walking the per-column boundaries of the spanned cell and finding the column whose
|
|
25
|
+
* horizontal range contains `mouseEvent.clientX`.
|
|
26
|
+
*
|
|
27
|
+
* `<td>.cellIndex` for a cell with `colspan > 1` only resolves to the first column the cell
|
|
28
|
+
* occupies, so hovering anywhere inside a colspanned first-row cell pins the column drag handle
|
|
29
|
+
* to that first column. This resolver disambiguates which visual column the pointer is actually
|
|
30
|
+
* over so the handle/menu can target a single column.
|
|
31
|
+
*
|
|
32
|
+
* The search is restricted to columns in `[startIndex, endIndex)` (the cell's own span). The
|
|
33
|
+
* spanned cell's bounding rect is read once and split into per-column boundaries using the cell's
|
|
34
|
+
* `data-colwidth` ratios (falling back to an even split for unresized columns) — this keeps the
|
|
35
|
+
* work bounded by the colspan size and avoids measuring the whole table.
|
|
36
|
+
*
|
|
37
|
+
* Returns `undefined` when the mouse is outside the spanned range (so callers can fall back to
|
|
38
|
+
* the converted HTML column index).
|
|
39
|
+
*/
|
|
40
|
+
export declare const getColumnIndexByMousePosition: (cellElement: HTMLTableCellElement, mouseEvent: MouseEvent, columnIndexRange: {
|
|
41
|
+
endIndex: number;
|
|
42
|
+
startIndex: number;
|
|
43
|
+
}) => number | undefined;
|
|
10
44
|
export declare const convertHTMLCellIndexToColumnIndex: (htmlColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
|
|
11
45
|
export declare const getColumnIndexMappedToColumnIndexInFirstRow: (convertedColIndex: number, htmlRowIndex: number, tableMap: TableMap) => number;
|
|
@@ -2,6 +2,16 @@ export declare const isCell: (node: HTMLElement | null) => boolean;
|
|
|
2
2
|
export declare const isCornerButton: (node: HTMLElement | null) => boolean;
|
|
3
3
|
export declare const isInsertRowButton: (node: HTMLElement | null) => boolean | HTMLElement | null;
|
|
4
4
|
export declare const getColumnOrRowIndex: (target: HTMLElement) => [number, number];
|
|
5
|
+
/**
|
|
6
|
+
* Returns the element that carries the `data-start-index` / `data-end-index` attributes for a
|
|
7
|
+
* column/row control.
|
|
8
|
+
*
|
|
9
|
+
* The floating insert dot is a child of a wrapper that holds the index attributes, so when the
|
|
10
|
+
* pointer is directly over the dot the attributes are not on the event target. This walks up to
|
|
11
|
+
* the nearest ancestor that has `data-start-index`, falling back to the original element so the
|
|
12
|
+
* behaviour is unchanged when the target already carries the attributes.
|
|
13
|
+
*/
|
|
14
|
+
export declare const getIndexAttributeSourceElement: (target: HTMLElement) => HTMLElement;
|
|
5
15
|
export declare const isColumnControlsDecorations: (node: HTMLElement | null) => boolean;
|
|
6
16
|
export declare const isRowControlsButton: (node: HTMLElement | null) => boolean;
|
|
7
17
|
export declare const isResizeHandleDecoration: (node: HTMLElement | null) => boolean;
|
|
@@ -11,5 +11,21 @@ export declare const getRowDeleteButtonParams: (rowsHeights: Array<number | unde
|
|
|
11
11
|
top: number;
|
|
12
12
|
} | null;
|
|
13
13
|
export declare const getRowsParams: (rowsHeights: Array<number | undefined>) => RowParams[];
|
|
14
|
+
/**
|
|
15
|
+
* Returns the visual row index that the mouse pointer is over, by walking the row heights
|
|
16
|
+
* inside `tbody` and finding the row whose vertical range contains `mouseEvent.clientY`.
|
|
17
|
+
*
|
|
18
|
+
* When `rowIndexRange` is provided, the search is restricted to rows in that range (the
|
|
19
|
+
* `endIndex` is exclusive). This is the hot path used on `mousemove` when hovering over a
|
|
20
|
+
* row-spanned cell — restricting the range to `[startIndex, endIndex)` keeps the number
|
|
21
|
+
* of forced layout reads bounded by the row-span size, not the table size.
|
|
22
|
+
*
|
|
23
|
+
* Returns `undefined` when the mouse is above the search range or below it (so callers can
|
|
24
|
+
* fall back to the HTML row index).
|
|
25
|
+
*/
|
|
26
|
+
export declare const getRowIndexByMousePosition: (tableRef: HTMLTableElement, mouseEvent: MouseEvent, rowIndexRange?: {
|
|
27
|
+
endIndex: number;
|
|
28
|
+
startIndex: number;
|
|
29
|
+
}) => number | undefined;
|
|
14
30
|
export declare const getRowClassNames: (index: number, selection: Selection, hoveredRows?: number[], isInDanger?: boolean, isResizing?: boolean) => string;
|
|
15
31
|
export declare const copyPreviousRow: (schema: Schema) => (insertNewRowIndex: number) => (tr: Transaction) => Transaction;
|
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
import type { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
1
2
|
import type { Rect } from '@atlaskit/editor-tables/table-map';
|
|
2
3
|
export declare const getSelectedColumnIndexes: (selectionRect: Rect) => number[];
|
|
3
4
|
export declare const getSelectedRowIndexes: (selectionRect: Rect) => number[];
|
|
5
|
+
/**
|
|
6
|
+
* Treats a column as fully selected when its first-row area is covered by a horizontal merge and
|
|
7
|
+
* the explicit `CellSelection` starts below that merged cell. `CellSelection.isColSelection()`
|
|
8
|
+
* returns `false` in this case because the selection does not include the merged first-row cell.
|
|
9
|
+
*/
|
|
10
|
+
export declare const isColumnSelectionWithMergedFirstRow: (selection: CellSelection) => boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Treats a row as fully selected when its first-column area is covered by a vertical merge and the
|
|
13
|
+
* explicit `CellSelection` starts to the right of that merged cell. `CellSelection.isRowSelection()`
|
|
14
|
+
* returns `false` in this case because the selection does not include the merged first-column cell.
|
|
15
|
+
*/
|
|
16
|
+
export declare const isRowSelectionWithMergedFirstColumn: (selection: CellSelection) => boolean;
|
|
@@ -21,7 +21,7 @@ type DragHandleProps = {
|
|
|
21
21
|
previewHeight?: number;
|
|
22
22
|
previewWidth?: number;
|
|
23
23
|
tableLocalId: string;
|
|
24
|
-
toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent
|
|
24
|
+
toggleDragMenu?: (trigger: TriggerType, event?: React.MouseEvent<HTMLButtonElement, MouseEvent>, handleIndex?: number) => void;
|
|
25
25
|
};
|
|
26
26
|
export declare const DragHandle: React.FC<WithIntlProps<DragHandleProps & WrappedComponentProps>> & {
|
|
27
27
|
WrappedComponent: React.ComponentType<DragHandleProps & WrappedComponentProps>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { PopupProps } from '@atlaskit/editor-common/ui';
|
|
2
2
|
import type { TableDirection } from '../../types';
|
|
3
|
-
declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null): Partial<PopupProps>;
|
|
3
|
+
declare function getPopupOptions(direction: TableDirection, index: number, hasNumberedColumns: boolean, tableContainer: HTMLElement | null, verticalOffsetCorrection?: number): Partial<PopupProps>;
|
|
4
4
|
export default getPopupOptions;
|
|
@@ -30,6 +30,7 @@ export declare class FloatingInsertButton extends React.Component<Props & Wrappe
|
|
|
30
30
|
static displayName: string;
|
|
31
31
|
constructor(props: Props & WrappedComponentProps);
|
|
32
32
|
render(): React.JSX.Element | null;
|
|
33
|
+
private findRowWithUnmergedColumn;
|
|
33
34
|
private getCellPosition;
|
|
34
35
|
private insertRow;
|
|
35
36
|
private insertColumn;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "24.2.
|
|
3
|
+
"version": "24.2.3",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
54
54
|
"@atlaskit/primitives": "^20.0.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^109.
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^109.1.0",
|
|
56
56
|
"@atlaskit/toggle": "^17.0.0",
|
|
57
57
|
"@atlaskit/tokens": "^14.0.0",
|
|
58
58
|
"@atlaskit/tooltip": "^23.0.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"uuid": "^3.1.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@atlaskit/editor-common": "^116.
|
|
70
|
+
"@atlaskit/editor-common": "^116.8.0",
|
|
71
71
|
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
73
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|