@ekz/lexical-table 0.40.0
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/EkzLexicalTable.dev.js +4315 -0
- package/EkzLexicalTable.dev.mjs +4261 -0
- package/EkzLexicalTable.js +11 -0
- package/EkzLexicalTable.mjs +64 -0
- package/EkzLexicalTable.node.mjs +62 -0
- package/EkzLexicalTable.prod.js +9 -0
- package/EkzLexicalTable.prod.mjs +9 -0
- package/LICENSE +21 -0
- package/LexicalTable.js.flow +473 -0
- package/LexicalTableCellNode.d.ts +73 -0
- package/LexicalTableCommands.d.ts +18 -0
- package/LexicalTableExtension.d.ts +37 -0
- package/LexicalTableNode.d.ts +66 -0
- package/LexicalTableObserver.d.ts +109 -0
- package/LexicalTablePluginHelpers.d.ts +29 -0
- package/LexicalTableRowNode.d.ts +35 -0
- package/LexicalTableSelection.d.ts +75 -0
- package/LexicalTableSelectionHelpers.d.ts +41 -0
- package/LexicalTableUtils.d.ts +113 -0
- package/README.md +52 -0
- package/constants.d.ts +9 -0
- package/index.d.ts +24 -0
- package/package.json +44 -0
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { LexicalEditor, NodeKey, TextFormatType } from '@ekz/lexical';
|
|
9
|
+
import { TableCellNode } from './LexicalTableCellNode';
|
|
10
|
+
import { TableNode } from './LexicalTableNode';
|
|
11
|
+
import { type TableSelection } from './LexicalTableSelection';
|
|
12
|
+
import { HTMLTableElementWithWithTableSelectionState } from './LexicalTableSelectionHelpers';
|
|
13
|
+
export type TableDOMCell = {
|
|
14
|
+
elem: HTMLElement;
|
|
15
|
+
highlighted: boolean;
|
|
16
|
+
hasBackgroundColor: boolean;
|
|
17
|
+
x: number;
|
|
18
|
+
y: number;
|
|
19
|
+
};
|
|
20
|
+
export type TableDOMRows = Array<Array<TableDOMCell | undefined> | undefined>;
|
|
21
|
+
export type TableDOMTable = {
|
|
22
|
+
domRows: TableDOMRows;
|
|
23
|
+
columns: number;
|
|
24
|
+
rows: number;
|
|
25
|
+
};
|
|
26
|
+
export declare function $getTableAndElementByKey(tableNodeKey: NodeKey, editor?: LexicalEditor): {
|
|
27
|
+
tableNode: TableNode;
|
|
28
|
+
tableElement: HTMLTableElementWithWithTableSelectionState;
|
|
29
|
+
};
|
|
30
|
+
export declare class TableObserver {
|
|
31
|
+
focusX: number;
|
|
32
|
+
focusY: number;
|
|
33
|
+
listenersToRemove: Set<() => void>;
|
|
34
|
+
table: TableDOMTable;
|
|
35
|
+
isHighlightingCells: boolean;
|
|
36
|
+
anchorX: number;
|
|
37
|
+
anchorY: number;
|
|
38
|
+
tableNodeKey: NodeKey;
|
|
39
|
+
anchorCell: TableDOMCell | null;
|
|
40
|
+
focusCell: TableDOMCell | null;
|
|
41
|
+
anchorCellNodeKey: NodeKey | null;
|
|
42
|
+
focusCellNodeKey: NodeKey | null;
|
|
43
|
+
editor: LexicalEditor;
|
|
44
|
+
tableSelection: TableSelection | null;
|
|
45
|
+
hasHijackedSelectionStyles: boolean;
|
|
46
|
+
isSelecting: boolean;
|
|
47
|
+
pointerType: string | null;
|
|
48
|
+
shouldCheckSelection: boolean;
|
|
49
|
+
abortController: AbortController;
|
|
50
|
+
listenerOptions: {
|
|
51
|
+
signal: AbortSignal;
|
|
52
|
+
};
|
|
53
|
+
nextFocus: {
|
|
54
|
+
focusCell: TableDOMCell;
|
|
55
|
+
override: boolean;
|
|
56
|
+
} | null;
|
|
57
|
+
constructor(editor: LexicalEditor, tableNodeKey: string);
|
|
58
|
+
getTable(): TableDOMTable;
|
|
59
|
+
removeListeners(): void;
|
|
60
|
+
$lookup(): {
|
|
61
|
+
tableNode: TableNode;
|
|
62
|
+
tableElement: HTMLTableElementWithWithTableSelectionState;
|
|
63
|
+
};
|
|
64
|
+
trackTable(): void;
|
|
65
|
+
$clearHighlight(): void;
|
|
66
|
+
$enableHighlightStyle(): void;
|
|
67
|
+
$disableHighlightStyle(): void;
|
|
68
|
+
$updateTableTableSelection(selection: TableSelection | null): void;
|
|
69
|
+
/**
|
|
70
|
+
* @internal
|
|
71
|
+
* Firefox has a strange behavior where pressing the down arrow key from
|
|
72
|
+
* above the table will move the caret after the table and then lexical
|
|
73
|
+
* will select the last cell instead of the first.
|
|
74
|
+
* We do still want to let the browser handle caret movement but we will
|
|
75
|
+
* use this property to "tag" the update so that we can recheck the
|
|
76
|
+
* selection after the event is processed.
|
|
77
|
+
*/
|
|
78
|
+
setShouldCheckSelection(): void;
|
|
79
|
+
/**
|
|
80
|
+
* @internal
|
|
81
|
+
*/
|
|
82
|
+
getAndClearShouldCheckSelection(): boolean;
|
|
83
|
+
/**
|
|
84
|
+
* @internal
|
|
85
|
+
* When handling mousemove events we track what the focus cell should be, but
|
|
86
|
+
* the DOM selection may end up somewhere else entirely. We don't have an elegant
|
|
87
|
+
* way to handle this after the DOM selection has been resolved in a
|
|
88
|
+
* SELECTION_CHANGE_COMMAND callback.
|
|
89
|
+
*/
|
|
90
|
+
setNextFocus(nextFocus: null | {
|
|
91
|
+
focusCell: TableDOMCell;
|
|
92
|
+
override: boolean;
|
|
93
|
+
}): void;
|
|
94
|
+
/** @internal */
|
|
95
|
+
getAndClearNextFocus(): {
|
|
96
|
+
focusCell: TableDOMCell;
|
|
97
|
+
override: boolean;
|
|
98
|
+
} | null;
|
|
99
|
+
/** @internal */
|
|
100
|
+
updateDOMSelection(): void;
|
|
101
|
+
$setFocusCellForSelection(cell: TableDOMCell, ignoreStart?: boolean): boolean;
|
|
102
|
+
$getAnchorTableCell(): TableCellNode | null;
|
|
103
|
+
$getAnchorTableCellOrThrow(): TableCellNode;
|
|
104
|
+
$getFocusTableCell(): TableCellNode | null;
|
|
105
|
+
$getFocusTableCellOrThrow(): TableCellNode;
|
|
106
|
+
$setAnchorCellForSelection(cell: TableDOMCell): void;
|
|
107
|
+
$formatCells(type: TextFormatType): void;
|
|
108
|
+
$clearText(): void;
|
|
109
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { Signal } from '@ekz/lexical-extension';
|
|
9
|
+
import { LexicalEditor } from '@ekz/lexical';
|
|
10
|
+
/**
|
|
11
|
+
* Register a transform to ensure that all TableCellNode have a colSpan and rowSpan of 1.
|
|
12
|
+
* This should only be registered when you do not want to support merged cells.
|
|
13
|
+
*
|
|
14
|
+
* @param editor The editor
|
|
15
|
+
* @returns An unregister callback
|
|
16
|
+
*/
|
|
17
|
+
export declare function registerTableCellUnmergeTransform(editor: LexicalEditor): () => void;
|
|
18
|
+
export declare function registerTableSelectionObserver(editor: LexicalEditor, hasTabHandler?: boolean): () => void;
|
|
19
|
+
/**
|
|
20
|
+
* Register the INSERT_TABLE_COMMAND listener and the table integrity transforms. The
|
|
21
|
+
* table selection observer should be registered separately after this with
|
|
22
|
+
* {@link registerTableSelectionObserver}.
|
|
23
|
+
*
|
|
24
|
+
* @param editor The editor
|
|
25
|
+
* @returns An unregister callback
|
|
26
|
+
*/
|
|
27
|
+
export declare function registerTablePlugin(editor: LexicalEditor, options?: {
|
|
28
|
+
hasNestedTables?: Signal<boolean>;
|
|
29
|
+
}): () => void;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { BaseSelection, LexicalUpdateJSON, Spread } from '@ekz/lexical';
|
|
9
|
+
import { DOMConversionMap, DOMConversionOutput, EditorConfig, ElementNode, LexicalNode, NodeKey, SerializedElementNode } from '@ekz/lexical';
|
|
10
|
+
export type SerializedTableRowNode = Spread<{
|
|
11
|
+
height?: number;
|
|
12
|
+
}, SerializedElementNode>;
|
|
13
|
+
/** @noInheritDoc */
|
|
14
|
+
export declare class TableRowNode extends ElementNode {
|
|
15
|
+
/** @internal */
|
|
16
|
+
__height?: number;
|
|
17
|
+
static getType(): string;
|
|
18
|
+
static clone(node: TableRowNode): TableRowNode;
|
|
19
|
+
static importDOM(): DOMConversionMap | null;
|
|
20
|
+
static importJSON(serializedNode: SerializedTableRowNode): TableRowNode;
|
|
21
|
+
updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedTableRowNode>): this;
|
|
22
|
+
constructor(height?: number, key?: NodeKey);
|
|
23
|
+
exportJSON(): SerializedTableRowNode;
|
|
24
|
+
createDOM(config: EditorConfig): HTMLElement;
|
|
25
|
+
extractWithChild(child: LexicalNode, selection: BaseSelection | null, destination: 'clone' | 'html'): boolean;
|
|
26
|
+
isShadowRoot(): boolean;
|
|
27
|
+
setHeight(height?: number | undefined): this;
|
|
28
|
+
getHeight(): number | undefined;
|
|
29
|
+
updateDOM(prevNode: this): boolean;
|
|
30
|
+
canBeEmpty(): false;
|
|
31
|
+
canIndent(): false;
|
|
32
|
+
}
|
|
33
|
+
export declare function $convertTableRowElement(domNode: Node): DOMConversionOutput;
|
|
34
|
+
export declare function $createTableRowNode(height?: number): TableRowNode;
|
|
35
|
+
export declare function $isTableRowNode(node: LexicalNode | null | undefined): node is TableRowNode;
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { BaseSelection, LexicalNode, NodeKey, PointType, TextFormatType } from '@ekz/lexical';
|
|
9
|
+
import { TableCellNode } from './LexicalTableCellNode';
|
|
10
|
+
import { TableNode } from './LexicalTableNode';
|
|
11
|
+
export type TableSelectionShape = {
|
|
12
|
+
fromX: number;
|
|
13
|
+
fromY: number;
|
|
14
|
+
toX: number;
|
|
15
|
+
toY: number;
|
|
16
|
+
};
|
|
17
|
+
export type TableMapValueType = {
|
|
18
|
+
cell: TableCellNode;
|
|
19
|
+
startRow: number;
|
|
20
|
+
startColumn: number;
|
|
21
|
+
};
|
|
22
|
+
export type TableMapType = Array<Array<TableMapValueType>>;
|
|
23
|
+
export declare class TableSelection implements BaseSelection {
|
|
24
|
+
tableKey: NodeKey;
|
|
25
|
+
anchor: PointType;
|
|
26
|
+
focus: PointType;
|
|
27
|
+
_cachedNodes: Array<LexicalNode> | null;
|
|
28
|
+
dirty: boolean;
|
|
29
|
+
constructor(tableKey: NodeKey, anchor: PointType, focus: PointType);
|
|
30
|
+
getStartEndPoints(): [PointType, PointType];
|
|
31
|
+
/**
|
|
32
|
+
* {@link $createTableSelection} unfortunately makes it very easy to create
|
|
33
|
+
* nonsense selections, so we have a method to see if the selection probably
|
|
34
|
+
* makes sense.
|
|
35
|
+
*
|
|
36
|
+
* @returns true if the TableSelection is (probably) valid
|
|
37
|
+
*/
|
|
38
|
+
isValid(): boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Returns whether the Selection is "backwards", meaning the focus
|
|
41
|
+
* logically precedes the anchor in the EditorState.
|
|
42
|
+
* @returns true if the Selection is backwards, false otherwise.
|
|
43
|
+
*/
|
|
44
|
+
isBackward(): boolean;
|
|
45
|
+
getCachedNodes(): LexicalNode[] | null;
|
|
46
|
+
setCachedNodes(nodes: LexicalNode[] | null): void;
|
|
47
|
+
is(selection: null | BaseSelection): boolean;
|
|
48
|
+
set(tableKey: NodeKey, anchorCellKey: NodeKey, focusCellKey: NodeKey): void;
|
|
49
|
+
clone(): TableSelection;
|
|
50
|
+
isCollapsed(): boolean;
|
|
51
|
+
extract(): Array<LexicalNode>;
|
|
52
|
+
insertRawText(text: string): void;
|
|
53
|
+
insertText(): void;
|
|
54
|
+
/**
|
|
55
|
+
* Returns whether the provided TextFormatType is present on the Selection.
|
|
56
|
+
* This will be true if any paragraph in table cells has the specified format.
|
|
57
|
+
*
|
|
58
|
+
* @param type the TextFormatType to check for.
|
|
59
|
+
* @returns true if the provided format is currently toggled on on the Selection, false otherwise.
|
|
60
|
+
*/
|
|
61
|
+
hasFormat(type: TextFormatType): boolean;
|
|
62
|
+
insertNodes(nodes: Array<LexicalNode>): void;
|
|
63
|
+
getShape(): TableSelectionShape;
|
|
64
|
+
getNodes(): Array<LexicalNode>;
|
|
65
|
+
getTextContent(): string;
|
|
66
|
+
}
|
|
67
|
+
export declare function $isTableSelection(x: unknown): x is TableSelection;
|
|
68
|
+
export declare function $createTableSelection(): TableSelection;
|
|
69
|
+
export declare function $createTableSelectionFrom(tableNode: TableNode, anchorCell: TableCellNode, focusCell: TableCellNode): TableSelection;
|
|
70
|
+
/**
|
|
71
|
+
* Depth first visitor
|
|
72
|
+
* @param node The starting node
|
|
73
|
+
* @param $visit The function to call for each node. If the function returns false, then children of this node will not be explored
|
|
74
|
+
*/
|
|
75
|
+
export declare function $visitRecursively(node: LexicalNode, $visit: (childNode: LexicalNode) => boolean | undefined | void): void;
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { TableCellNode } from './LexicalTableCellNode';
|
|
9
|
+
import type { TableDOMCell } from './LexicalTableObserver';
|
|
10
|
+
import type { TableSelection } from './LexicalTableSelection';
|
|
11
|
+
import type { EditorState, LexicalEditor, LexicalNode, RangeSelection } from '@ekz/lexical';
|
|
12
|
+
import { TableNode } from './LexicalTableNode';
|
|
13
|
+
import { TableDOMTable, TableObserver } from './LexicalTableObserver';
|
|
14
|
+
declare const LEXICAL_ELEMENT_KEY = "__lexicalTableSelection";
|
|
15
|
+
export declare function isHTMLTableElement(el: unknown): el is HTMLTableElement;
|
|
16
|
+
export declare function getTableElement<T extends HTMLElement | null>(tableNode: TableNode, dom: T): HTMLTableElementWithWithTableSelectionState | (T & null);
|
|
17
|
+
export declare function getEditorWindow(editor: LexicalEditor): Window | null;
|
|
18
|
+
export declare function $findParentTableCellNodeInTable(tableNode: LexicalNode, node: LexicalNode | null): TableCellNode | null;
|
|
19
|
+
export declare function applyTableHandlers(tableNode: TableNode, element: HTMLElement, editor: LexicalEditor, hasTabHandler: boolean): TableObserver;
|
|
20
|
+
export type HTMLTableElementWithWithTableSelectionState = HTMLTableElement & {
|
|
21
|
+
[LEXICAL_ELEMENT_KEY]?: TableObserver | undefined;
|
|
22
|
+
};
|
|
23
|
+
export declare function detachTableObserverFromTableElement(tableElement: HTMLTableElementWithWithTableSelectionState, tableObserver: TableObserver): void;
|
|
24
|
+
export declare function attachTableObserverToTableElement(tableElement: HTMLTableElementWithWithTableSelectionState, tableObserver: TableObserver): void;
|
|
25
|
+
export declare function getTableObserverFromTableElement(tableElement: HTMLTableElementWithWithTableSelectionState): TableObserver | null;
|
|
26
|
+
export declare function getDOMCellFromTarget(node: null | Node): TableDOMCell | null;
|
|
27
|
+
export declare function getDOMCellInTableFromTarget(table: HTMLTableElementWithWithTableSelectionState, node: null | Node): TableDOMCell | null;
|
|
28
|
+
export declare function doesTargetContainText(node: Node): boolean;
|
|
29
|
+
export declare function getTable(tableNode: TableNode, dom: HTMLElement): TableDOMTable;
|
|
30
|
+
export declare function $updateDOMForSelection(editor: LexicalEditor, table: TableDOMTable, selection: TableSelection | RangeSelection | null): void;
|
|
31
|
+
export declare function $forEachTableCell(grid: TableDOMTable, cb: (cell: TableDOMCell, lexicalNode: LexicalNode, cords: {
|
|
32
|
+
x: number;
|
|
33
|
+
y: number;
|
|
34
|
+
}) => void): void;
|
|
35
|
+
export declare function $addHighlightStyleToTable(editor: LexicalEditor, tableSelection: TableObserver): void;
|
|
36
|
+
export declare function $removeHighlightStyleToTable(editor: LexicalEditor, tableObserver: TableObserver): void;
|
|
37
|
+
export declare function $findCellNode(node: LexicalNode): null | TableCellNode;
|
|
38
|
+
export declare function $findTableNode(node: LexicalNode): null | TableNode;
|
|
39
|
+
export declare function $getObserverCellFromCellNodeOrThrow(tableObserver: TableObserver, tableCellNode: TableCellNode): TableDOMCell;
|
|
40
|
+
export declare function $getNearestTableCellInTableFromDOMNode(tableNode: TableNode, startingDOM: Node, editorState?: EditorState): TableCellNode | null;
|
|
41
|
+
export {};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import type { TableMapType, TableMapValueType } from './LexicalTableSelection';
|
|
9
|
+
import type { PointType } from '@ekz/lexical';
|
|
10
|
+
import { LexicalNode } from '@ekz/lexical';
|
|
11
|
+
import { InsertTableCommandPayloadHeaders } from '.';
|
|
12
|
+
import { TableCellNode } from './LexicalTableCellNode';
|
|
13
|
+
import { TableNode } from './LexicalTableNode';
|
|
14
|
+
import { TableDOMTable } from './LexicalTableObserver';
|
|
15
|
+
import { TableRowNode } from './LexicalTableRowNode';
|
|
16
|
+
export declare function $createTableNodeWithDimensions(rowCount: number, columnCount: number, includeHeaders?: InsertTableCommandPayloadHeaders): TableNode;
|
|
17
|
+
export declare function $getTableCellNodeFromLexicalNode(startingNode: LexicalNode): TableCellNode | null;
|
|
18
|
+
export declare function $getTableRowNodeFromTableCellNodeOrThrow(startingNode: LexicalNode): TableRowNode;
|
|
19
|
+
export declare function $getTableNodeFromLexicalNodeOrThrow(startingNode: LexicalNode): TableNode;
|
|
20
|
+
export declare function $getTableRowIndexFromTableCellNode(tableCellNode: TableCellNode): number;
|
|
21
|
+
export declare function $getTableColumnIndexFromTableCellNode(tableCellNode: TableCellNode): number;
|
|
22
|
+
export type TableCellSiblings = {
|
|
23
|
+
above: TableCellNode | null | undefined;
|
|
24
|
+
below: TableCellNode | null | undefined;
|
|
25
|
+
left: TableCellNode | null | undefined;
|
|
26
|
+
right: TableCellNode | null | undefined;
|
|
27
|
+
};
|
|
28
|
+
export declare function $getTableCellSiblingsFromTableCellNode(tableCellNode: TableCellNode, table: TableDOMTable): TableCellSiblings;
|
|
29
|
+
export declare function $removeTableRowAtIndex(tableNode: TableNode, indexToDelete: number): TableNode;
|
|
30
|
+
/**
|
|
31
|
+
* @deprecated This function does not support merged cells. Use {@link $insertTableRowAtSelection} or {@link $insertTableRowAtNode} instead.
|
|
32
|
+
*/
|
|
33
|
+
export declare function $insertTableRow(tableNode: TableNode, targetIndex: number, shouldInsertAfter: boolean | undefined, rowCount: number, table: TableDOMTable): TableNode;
|
|
34
|
+
/**
|
|
35
|
+
* Inserts a table row before or after the current focus cell node,
|
|
36
|
+
* taking into account any spans. If successful, returns the
|
|
37
|
+
* inserted table row node.
|
|
38
|
+
*/
|
|
39
|
+
export declare function $insertTableRowAtSelection(insertAfter?: boolean): TableRowNode | null;
|
|
40
|
+
/**
|
|
41
|
+
* @deprecated renamed to {@link $insertTableRowAtSelection}
|
|
42
|
+
*/
|
|
43
|
+
export declare const $insertTableRow__EXPERIMENTAL: typeof $insertTableRowAtSelection;
|
|
44
|
+
/**
|
|
45
|
+
* Inserts a table row before or after the given cell node,
|
|
46
|
+
* taking into account any spans. If successful, returns the
|
|
47
|
+
* inserted table row node.
|
|
48
|
+
*/
|
|
49
|
+
export declare function $insertTableRowAtNode(cellNode: TableCellNode, insertAfter?: boolean): TableRowNode | null;
|
|
50
|
+
/**
|
|
51
|
+
* @deprecated This function does not support merged cells. Use {@link $insertTableColumnAtSelection} or {@link $insertTableColumnAtNode} instead.
|
|
52
|
+
*/
|
|
53
|
+
export declare function $insertTableColumn(tableNode: TableNode, targetIndex: number, shouldInsertAfter: boolean | undefined, columnCount: number, table: TableDOMTable): TableNode;
|
|
54
|
+
/**
|
|
55
|
+
* Inserts a column before or after the current focus cell node,
|
|
56
|
+
* taking into account any spans. If successful, returns the
|
|
57
|
+
* first inserted cell node.
|
|
58
|
+
*/
|
|
59
|
+
export declare function $insertTableColumnAtSelection(insertAfter?: boolean): TableCellNode | null;
|
|
60
|
+
/**
|
|
61
|
+
* @deprecated renamed to {@link $insertTableColumnAtSelection}
|
|
62
|
+
*/
|
|
63
|
+
export declare const $insertTableColumn__EXPERIMENTAL: typeof $insertTableColumnAtSelection;
|
|
64
|
+
/**
|
|
65
|
+
* Inserts a column before or after the given cell node,
|
|
66
|
+
* taking into account any spans. If successful, returns the
|
|
67
|
+
* first inserted cell node.
|
|
68
|
+
*/
|
|
69
|
+
export declare function $insertTableColumnAtNode(cellNode: TableCellNode, insertAfter?: boolean, shouldSetSelection?: boolean): TableCellNode | null;
|
|
70
|
+
/**
|
|
71
|
+
* @deprecated This function does not support merged cells. Use {@link $deleteTableColumnAtSelection} instead.
|
|
72
|
+
*/
|
|
73
|
+
export declare function $deleteTableColumn(tableNode: TableNode, targetIndex: number): TableNode;
|
|
74
|
+
export declare function $deleteTableRowAtSelection(): void;
|
|
75
|
+
/**
|
|
76
|
+
* @deprecated renamed to {@link $deleteTableRowAtSelection}
|
|
77
|
+
*/
|
|
78
|
+
export declare const $deleteTableRow__EXPERIMENTAL: typeof $deleteTableRowAtSelection;
|
|
79
|
+
export declare function $deleteTableColumnAtSelection(): void;
|
|
80
|
+
/**
|
|
81
|
+
* @deprecated renamed to {@link $deleteTableColumnAtSelection}
|
|
82
|
+
*/
|
|
83
|
+
export declare const $deleteTableColumn__EXPERIMENTAL: typeof $deleteTableColumnAtSelection;
|
|
84
|
+
export declare function $mergeCells(cellNodes: TableCellNode[]): TableCellNode | null;
|
|
85
|
+
export declare function $unmergeCell(): void;
|
|
86
|
+
export declare function $unmergeCellNode(cellNode: TableCellNode): void;
|
|
87
|
+
export declare function $computeTableMap(tableNode: TableNode, cellA: TableCellNode, cellB: TableCellNode): [TableMapType, TableMapValueType, TableMapValueType];
|
|
88
|
+
export declare function $computeTableMapSkipCellCheck(tableNode: TableNode, cellA: null | TableCellNode, cellB: null | TableCellNode): [
|
|
89
|
+
tableMap: TableMapType,
|
|
90
|
+
cellAValue: TableMapValueType | null,
|
|
91
|
+
cellBValue: TableMapValueType | null
|
|
92
|
+
];
|
|
93
|
+
export declare function $getNodeTriplet(source: PointType | LexicalNode | TableCellNode): [TableCellNode, TableRowNode, TableNode];
|
|
94
|
+
export interface TableCellRectBoundary {
|
|
95
|
+
minColumn: number;
|
|
96
|
+
minRow: number;
|
|
97
|
+
maxColumn: number;
|
|
98
|
+
maxRow: number;
|
|
99
|
+
}
|
|
100
|
+
export interface TableCellRectSpans {
|
|
101
|
+
topSpan: number;
|
|
102
|
+
leftSpan: number;
|
|
103
|
+
rightSpan: number;
|
|
104
|
+
bottomSpan: number;
|
|
105
|
+
}
|
|
106
|
+
export declare function $computeTableCellRectSpans(map: TableMapType, boundary: TableCellRectBoundary): TableCellRectSpans;
|
|
107
|
+
export declare function $computeTableCellRectBoundary(map: TableMapType, cellAMap: TableMapValueType, cellBMap: TableMapValueType): TableCellRectBoundary;
|
|
108
|
+
export declare function $getTableCellNodeRect(tableCellNode: TableCellNode): {
|
|
109
|
+
rowIndex: number;
|
|
110
|
+
columnIndex: number;
|
|
111
|
+
rowSpan: number;
|
|
112
|
+
colSpan: number;
|
|
113
|
+
} | null;
|
package/README.md
ADDED
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
# `@lexical/table`
|
|
2
|
+
|
|
3
|
+
[](https://lexical.dev/docs/api/modules/lexical_table)
|
|
4
|
+
|
|
5
|
+
This package contains the functionality for the Tables feature of Lexical.
|
|
6
|
+
|
|
7
|
+
# Lexical Table Plugin
|
|
8
|
+
|
|
9
|
+
A plugin for handling tables in Lexical.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @lexical/table @lexical/react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Usage
|
|
18
|
+
|
|
19
|
+
See the [react-table example](https://github.com/facebook/lexical/tree/main/examples/react-table)
|
|
20
|
+
for a minimal example that uses this package and the
|
|
21
|
+
[TablePlugin](https://lexical.dev/docs/api/modules/lexical_react_LexicalTablePlugin)
|
|
22
|
+
from @lexical/react/LexicalTablePlugin
|
|
23
|
+
|
|
24
|
+
[](https://stackblitz.com/github/facebook/lexical/tree/main/examples/react-table?file=src/main.tsx)
|
|
25
|
+
|
|
26
|
+
## Features
|
|
27
|
+
|
|
28
|
+
### Tables
|
|
29
|
+
- Create and edit tables with customizable rows and columns
|
|
30
|
+
- Support for table headers
|
|
31
|
+
- Cell selection and navigation
|
|
32
|
+
- Copy and paste support
|
|
33
|
+
|
|
34
|
+
### Limitations
|
|
35
|
+
|
|
36
|
+
#### Nested Tables
|
|
37
|
+
Nested tables (tables within table cells) are not supported in the editor. The following behaviors are enforced:
|
|
38
|
+
|
|
39
|
+
1. When attempting to paste a table inside an existing table cell, the paste operation is blocked.
|
|
40
|
+
2. The editor actively prevents the creation of nested tables through the UI or programmatically.
|
|
41
|
+
|
|
42
|
+
Note: When pasting HTML content with nested tables, the nested content will be removed by default. Make sure to implement appropriate `importDOM` handling if you need to preserve this content in some form.
|
|
43
|
+
|
|
44
|
+
This approach allows you to:
|
|
45
|
+
1. Detect nested tables in the imported HTML
|
|
46
|
+
2. Extract their content before it gets removed
|
|
47
|
+
3. Preserve the content in a format that works for your use case
|
|
48
|
+
|
|
49
|
+
Choose an approach that best fits your needs:
|
|
50
|
+
- Flatten nested tables into a single table
|
|
51
|
+
- Convert nested tables to a different format (e.g., lists or paragraphs)
|
|
52
|
+
- Store nested content as metadata for future processing
|
package/constants.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export declare const PIXEL_VALUE_REG_EXP: RegExp;
|
|
9
|
+
export declare const COLUMN_WIDTH = 75;
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the MIT license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
export type { SerializedTableCellNode } from './LexicalTableCellNode';
|
|
9
|
+
export { $createTableCellNode, $isTableCellNode, TableCellHeaderStates, TableCellNode, } from './LexicalTableCellNode';
|
|
10
|
+
export type { InsertTableCommandPayload, InsertTableCommandPayloadHeaders, } from './LexicalTableCommands';
|
|
11
|
+
export { INSERT_TABLE_COMMAND } from './LexicalTableCommands';
|
|
12
|
+
export { type TableConfig, TableExtension } from './LexicalTableExtension';
|
|
13
|
+
export type { SerializedTableNode } from './LexicalTableNode';
|
|
14
|
+
export { $createTableNode, $getElementForTableNode, $isScrollableTablesActive, $isTableNode, setScrollableTablesActive, TableNode, } from './LexicalTableNode';
|
|
15
|
+
export type { TableDOMCell } from './LexicalTableObserver';
|
|
16
|
+
export { $getTableAndElementByKey, TableObserver } from './LexicalTableObserver';
|
|
17
|
+
export { registerTableCellUnmergeTransform, registerTablePlugin, registerTableSelectionObserver, } from './LexicalTablePluginHelpers';
|
|
18
|
+
export type { SerializedTableRowNode } from './LexicalTableRowNode';
|
|
19
|
+
export { $createTableRowNode, $isTableRowNode, TableRowNode, } from './LexicalTableRowNode';
|
|
20
|
+
export type { TableMapType, TableMapValueType, TableSelection, TableSelectionShape, } from './LexicalTableSelection';
|
|
21
|
+
export { $createTableSelection, $createTableSelectionFrom, $isTableSelection, } from './LexicalTableSelection';
|
|
22
|
+
export type { HTMLTableElementWithWithTableSelectionState } from './LexicalTableSelectionHelpers';
|
|
23
|
+
export { $findCellNode, $findTableNode, applyTableHandlers, getDOMCellFromTarget, getTableElement, getTableObserverFromTableElement, } from './LexicalTableSelectionHelpers';
|
|
24
|
+
export { $computeTableMap, $computeTableMapSkipCellCheck, $createTableNodeWithDimensions, $deleteTableColumn, $deleteTableColumn__EXPERIMENTAL, $deleteTableColumnAtSelection, $deleteTableRow__EXPERIMENTAL, $deleteTableRowAtSelection, $getNodeTriplet, $getTableCellNodeFromLexicalNode, $getTableCellNodeRect, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $getTableRowNodeFromTableCellNodeOrThrow, $insertTableColumn, $insertTableColumn__EXPERIMENTAL, $insertTableColumnAtSelection, $insertTableRow, $insertTableRow__EXPERIMENTAL, $insertTableRowAtSelection, $mergeCells, $removeTableRowAtIndex, $unmergeCell, } from './LexicalTableUtils';
|
package/package.json
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ekz/lexical-table",
|
|
3
|
+
"description": "This package provides the Table feature for Lexical.",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"lexical",
|
|
6
|
+
"editor",
|
|
7
|
+
"rich-text",
|
|
8
|
+
"table"
|
|
9
|
+
],
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"version": "0.40.0",
|
|
12
|
+
"main": "LexicalTable.js",
|
|
13
|
+
"types": "index.d.ts",
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"@ekz/lexical-clipboard": "0.40.0",
|
|
16
|
+
"@ekz/lexical-extension": "0.40.0",
|
|
17
|
+
"@ekz/lexical-utils": "0.40.0",
|
|
18
|
+
"@ekz/lexical": "0.40.0"
|
|
19
|
+
},
|
|
20
|
+
"repository": {
|
|
21
|
+
"type": "git",
|
|
22
|
+
"url": "git+https://github.com/facebook/lexical.git",
|
|
23
|
+
"directory": "packages/lexical-table"
|
|
24
|
+
},
|
|
25
|
+
"module": "LexicalTable.mjs",
|
|
26
|
+
"sideEffects": false,
|
|
27
|
+
"exports": {
|
|
28
|
+
".": {
|
|
29
|
+
"import": {
|
|
30
|
+
"types": "./index.d.ts",
|
|
31
|
+
"development": "./LexicalTable.dev.mjs",
|
|
32
|
+
"production": "./LexicalTable.prod.mjs",
|
|
33
|
+
"node": "./LexicalTable.node.mjs",
|
|
34
|
+
"default": "./LexicalTable.mjs"
|
|
35
|
+
},
|
|
36
|
+
"require": {
|
|
37
|
+
"types": "./index.d.ts",
|
|
38
|
+
"development": "./LexicalTable.dev.js",
|
|
39
|
+
"production": "./LexicalTable.prod.js",
|
|
40
|
+
"default": "./LexicalTable.js"
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|