@lobehub/editor 4.15.0 → 4.15.2

package/es/plugins/table/react/TableActionMenu/ActionMenu.js

@@ -0,0 +1,220 @@
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
+import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils.js";
+import { Dropdown } from "@lobehub/ui";
+import { Grid2X2XIcon, PanelBottomCloseIcon, PanelLeftCloseIcon, PanelRightCloseIcon, PanelTopCloseIcon, TableColumnsSplitIcon, TableRowsSplitIcon } from "lucide-react";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { $computeTableMapSkipCellCheck, $deleteTableColumnAtSelection, $deleteTableRowAtSelection, $getTableColumnIndexFromTableCellNode, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableSelection, $mergeCells, $unmergeCell, TableCellHeaderStates, TableCellNode, getTableElement, getTableObserverFromTableElement } from "@lexical/table";
+import { $getSelection, $setSelection } from "lexical";
+//#region src/plugins/table/react/TableActionMenu/ActionMenu.tsx
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge, children }) => {
+	const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+	const [selectionCounts, updateSelectionCounts] = useState({
+		columns: 1,
+		rows: 1
+	});
+	const [canMergeCells, setCanMergeCells] = useState(false);
+	const [canUnmergeCell, setCanUnmergeCell] = useState(false);
+	const [, setBackgroundColor] = useState(() => currentCellBackgroundColor(editor) || "");
+	const t = useTranslation();
+	useEffect(() => {
+		return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
+			if (nodeMutations.get(tableCellNode.getKey()) === "updated") {
+				editor.getEditorState().read(() => {
+					updateTableCellNode(tableCellNode.getLatest());
+				});
+				setBackgroundColor(currentCellBackgroundColor(editor) || "");
+			}
+		}, { skipInitialization: true });
+	}, [editor, tableCellNode]);
+	useEffect(() => {
+		editor.getEditorState().read(() => {
+			const selection = $getSelection();
+			if ($isTableSelection(selection)) {
+				const currentSelectionCounts = computeSelectionCount(selection);
+				updateSelectionCounts(computeSelectionCount(selection));
+				setCanMergeCells(currentSelectionCounts.columns > 1 || currentSelectionCounts.rows > 1);
+			}
+			setCanUnmergeCell($canUnmerge());
+		});
+	}, [editor]);
+	const clearTableSelection = useCallback(() => {
+		editor.update(() => {
+			if (tableCellNode.isAttached()) {
+				const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+				const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+				if (tableElement === null) throw new Error("TableActionMenu: Expected to find tableElement in DOM");
+				const tableObserver = getTableObserverFromTableElement(tableElement);
+				if (tableObserver !== null) tableObserver.$clearHighlight();
+				tableNode.markDirty();
+				updateTableCellNode(tableCellNode.getLatest());
+			}
+			$setSelection(null);
+		});
+	}, [editor, tableCellNode]);
+	const mergeTableCellsAtSelection = () => {
+		editor.update(() => {
+			const selection = $getSelection();
+			if (!$isTableSelection(selection)) return;
+			const targetCell = $mergeCells(selection.getNodes().filter($isTableCellNode));
+			if (targetCell) $selectLastDescendant(targetCell);
+		});
+	};
+	const unmergeTableCellsAtSelection = () => {
+		editor.update(() => {
+			$unmergeCell();
+		});
+	};
+	const insertTableRowAtSelection = useCallback((shouldInsertAfter) => {
+		editor.update(() => {
+			for (let i = 0; i < selectionCounts.rows; i++) $insertTableRowAtSelection(shouldInsertAfter);
+		});
+	}, [editor, selectionCounts.rows]);
+	const insertTableColumnAtSelection = useCallback((shouldInsertAfter) => {
+		editor.update(() => {
+			for (let i = 0; i < selectionCounts.columns; i++) $insertTableColumnAtSelection(shouldInsertAfter);
+		});
+	}, [editor, selectionCounts.columns]);
+	const deleteTableRowAtSelection = useCallback(() => {
+		editor.update(() => {
+			$deleteTableRowAtSelection();
+		});
+	}, [editor]);
+	const deleteTableAtSelection = useCallback(() => {
+		editor.update(() => {
+			$getTableNodeFromLexicalNodeOrThrow(tableCellNode).remove();
+			clearTableSelection();
+		});
+	}, [
+		editor,
+		tableCellNode,
+		clearTableSelection
+	]);
+	const deleteTableColumnAtSelection = useCallback(() => {
+		editor.update(() => {
+			$deleteTableColumnAtSelection();
+		});
+	}, [editor]);
+	const toggleTableRowIsHeader = useCallback(() => {
+		editor.update(() => {
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
+			const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+			const rowCells = /* @__PURE__ */ new Set();
+			const newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.ROW;
+			for (let col = 0; col < gridMap[tableRowIndex].length; col++) {
+				const mapCell = gridMap[tableRowIndex][col];
+				if (!mapCell?.cell) continue;
+				if (!rowCells.has(mapCell.cell)) {
+					rowCells.add(mapCell.cell);
+					mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.ROW);
+				}
+			}
+			clearTableSelection();
+		});
+	}, [
+		editor,
+		tableCellNode,
+		clearTableSelection
+	]);
+	const toggleTableColumnIsHeader = useCallback(() => {
+		editor.update(() => {
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
+			const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
+			const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+			const columnCells = /* @__PURE__ */ new Set();
+			const newStyle = tableCellNode.getHeaderStyles() ^ TableCellHeaderStates.COLUMN;
+			for (const element of gridMap) {
+				const mapCell = element[tableColumnIndex];
+				if (!mapCell?.cell) continue;
+				if (!columnCells.has(mapCell.cell)) {
+					columnCells.add(mapCell.cell);
+					mapCell.cell.setHeaderStyles(newStyle, TableCellHeaderStates.COLUMN);
+				}
+			}
+			clearTableSelection();
+		});
+	}, [
+		editor,
+		tableCellNode,
+		clearTableSelection
+	]);
+	return /* @__PURE__ */ jsx(Dropdown, {
+		menu: { items: useMemo(() => {
+			return [
+				{
+					icon: PanelTopCloseIcon,
+					key: "table-insert-row-above",
+					label: t(`table.insertRowAbove`, { count: selectionCounts.rows }),
+					onClick: () => insertTableRowAtSelection(false)
+				},
+				{
+					icon: PanelBottomCloseIcon,
+					key: "table-insert-row-below",
+					label: t(`table.insertRowBelow`, { count: selectionCounts.rows }),
+					onClick: () => insertTableRowAtSelection(true)
+				},
+				{ type: "divider" },
+				{
+					icon: PanelLeftCloseIcon,
+					key: "table-insert-column-before",
+					label: t(`table.insertColumnLeft`, { count: selectionCounts.columns }),
+					onClick: () => insertTableColumnAtSelection(false)
+				},
+				{
+					icon: PanelRightCloseIcon,
+					key: "table-insert-column-after",
+					label: t(`table.insertColumnRight`, { count: selectionCounts.columns }),
+					onClick: () => insertTableColumnAtSelection(true)
+				},
+				{ type: "divider" },
+				{
+					icon: TableColumnsSplitIcon,
+					key: "table-delete-columns",
+					label: t(`table.deleteColumn`),
+					onClick: () => deleteTableColumnAtSelection()
+				},
+				{
+					icon: TableRowsSplitIcon,
+					key: "table-delete-rows",
+					label: t(`table.deleteRow`),
+					onClick: () => deleteTableRowAtSelection()
+				},
+				{ type: "divider" },
+				{
+					icon: Grid2X2XIcon,
+					key: "table-delete",
+					label: t(`table.delete`),
+					onClick: () => deleteTableAtSelection()
+				}
+			];
+		}, [
+			cellMerge,
+			canMergeCells,
+			canUnmergeCell,
+			selectionCounts.rows,
+			selectionCounts.columns,
+			tableCellNode.__headerState,
+			mergeTableCellsAtSelection,
+			unmergeTableCellsAtSelection,
+			insertTableRowAtSelection,
+			insertTableColumnAtSelection,
+			deleteTableColumnAtSelection,
+			deleteTableRowAtSelection,
+			deleteTableAtSelection,
+			toggleTableRowIsHeader,
+			toggleTableColumnIsHeader
+		]) },
+		children
+	});
+});
+TableActionMenu.displayName = "TableActionMenu";
+//#endregion
+export { TableActionMenu as default };

package/es/plugins/table/react/TableActionMenu/index.js

@@ -0,0 +1,128 @@
+import { useAnchor } from "../../../../editor-kernel/react/useAnchor.js";
+import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
+import TableActionMenu$1 from "./ActionMenu.js";
+import { styles } from "./style.js";
+import { ActionIcon } from "@lobehub/ui";
+import { ChevronDown } from "lucide-react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { $getTableCellNodeFromLexicalNode, $getTableNodeFromLexicalNodeOrThrow, $isTableCellNode, $isTableSelection, getTableElement, getTableObserverFromTableElement } from "@lexical/table";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_CRITICAL, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+//#region src/plugins/table/react/TableActionMenu/index.tsx
+/**
+* Copyright (c) Meta Platforms, Inc. and affiliates.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*
+*/
+const TableActionMenu = memo(({ cellMerge, editor }) => {
+	const anchorElem = useAnchor();
+	const menuButtonRef = useRef(null);
+	const [tableCellNode, setTableMenuCellNode] = useState(null);
+	const checkTableCellOverflow = useCallback((tableCellParentNodeDOM) => {
+		const scrollableContainer = tableCellParentNodeDOM.closest(".PlaygroundEditorTheme__tableScrollableWrapper");
+		if (scrollableContainer) {
+			const containerRect = scrollableContainer.getBoundingClientRect();
+			const actionButtonRight = tableCellParentNodeDOM.getBoundingClientRect().right - 5;
+			const actionButtonLeft = actionButtonRight - 28;
+			if (actionButtonRight > containerRect.right || actionButtonLeft < containerRect.left) return true;
+		}
+		return false;
+	}, []);
+	const $moveMenu = useCallback(() => {
+		const menu = menuButtonRef.current;
+		const selection = $getSelection();
+		const nativeSelection = getDOMSelection(editor._window);
+		const activeElement = typeof document !== "undefined" ? document.activeElement : null;
+		function disable() {
+			if (menu) {
+				menu.classList.remove("table-cell-action-button-container--active");
+				menu.classList.add("table-cell-action-button-container--inactive");
+			}
+			setTableMenuCellNode(null);
+		}
+		if (!selection || !menu) return disable();
+		const rootElement = editor.getRootElement();
+		let tableObserver = null;
+		let tableCellParentNodeDOM = null;
+		if ($isRangeSelection(selection) && rootElement !== null && nativeSelection !== null && rootElement.contains(nativeSelection.anchorNode)) {
+			const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+			if (!tableCellNodeFromSelection) return disable();
+			tableCellParentNodeDOM = editor.getElementByKey(tableCellNodeFromSelection.getKey());
+			if (!tableCellParentNodeDOM || !tableCellNodeFromSelection.isAttached()) return disable();
+			if (checkTableCellOverflow(tableCellParentNodeDOM)) return disable();
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNodeFromSelection);
+			const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+			if (tableElement === null) throw new Error("TableActionMenu: Expected to find tableElement in DOM");
+			tableObserver = getTableObserverFromTableElement(tableElement);
+			setTableMenuCellNode(tableCellNodeFromSelection);
+		} else if ($isTableSelection(selection)) {
+			const anchorNode = $getTableCellNodeFromLexicalNode(selection.anchor.getNode());
+			if (!$isTableCellNode(anchorNode)) throw new Error("TableSelection anchorNode must be a TableCellNode");
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(anchorNode);
+			const tableElement = getTableElement(tableNode, editor.getElementByKey(tableNode.getKey()));
+			if (tableElement === null) throw new Error("TableActionMenu: Expected to find tableElement in DOM");
+			tableObserver = getTableObserverFromTableElement(tableElement);
+			tableCellParentNodeDOM = editor.getElementByKey(anchorNode.getKey());
+			if (tableCellParentNodeDOM === null) return disable();
+			if (checkTableCellOverflow(tableCellParentNodeDOM)) return disable();
+		} else if (!activeElement) return disable();
+		if (tableObserver === null || tableCellParentNodeDOM === null) return disable();
+		const enabled = !tableObserver || !tableObserver.isSelecting;
+		menu.classList.toggle("table-cell-action-button-container--active", enabled);
+		menu.classList.toggle("table-cell-action-button-container--inactive", !enabled);
+		if (enabled) updatePosition({
+			floating: menu,
+			offset: 0,
+			placement: "top-end",
+			reference: tableCellParentNodeDOM
+		});
+		else cleanPosition(menu);
+	}, [
+		editor,
+		anchorElem,
+		checkTableCellOverflow
+	]);
+	useEffect(() => {
+		let timeoutId = void 0;
+		const callback = () => {
+			timeoutId = void 0;
+			editor.getEditorState().read($moveMenu);
+		};
+		const delayedCallback = () => {
+			if (timeoutId === void 0) timeoutId = setTimeout(callback, 0);
+			return false;
+		};
+		return mergeRegister(editor.registerUpdateListener(delayedCallback), editor.registerCommand(SELECTION_CHANGE_COMMAND, delayedCallback, COMMAND_PRIORITY_CRITICAL), editor.registerRootListener((rootElement, prevRootElement) => {
+			if (prevRootElement) prevRootElement.removeEventListener("pointerup", delayedCallback);
+			if (rootElement) {
+				rootElement.addEventListener("pointerup", delayedCallback);
+				delayedCallback();
+			}
+		}), () => clearTimeout(timeoutId));
+	});
+	const prevTableCellDOM = useRef(tableCellNode);
+	useEffect(() => {
+		prevTableCellDOM.current = tableCellNode;
+	}, [prevTableCellDOM, tableCellNode]);
+	return /* @__PURE__ */ jsx("div", {
+		className: styles.root,
+		ref: menuButtonRef,
+		children: tableCellNode && /* @__PURE__ */ jsx(TableActionMenu$1, {
+			cellMerge,
+			editor,
+			tableCellNode,
+			children: /* @__PURE__ */ jsx(ActionIcon, {
+				className: styles.actionIcon,
+				glass: true,
+				icon: ChevronDown,
+				size: 12,
+				variant: "filled"
+			})
+		})
+	});
+});
+//#endregion
+export { TableActionMenu as default };

package/es/plugins/table/react/TableActionMenu/style.js

@@ -0,0 +1,20 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableActionMenu/style.ts
+const styles = createStaticStyles(({ css }) => ({
+	actionIcon: css`
+    transform: translateX(2px);
+  `,
+	root: css`
+    will-change: transform;
+
+    position: absolute;
+    z-index: 3;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    transform: translateY(100%);
+
+    padding: 2px;
+  `
+}));
+//#endregion
+export { styles };

package/es/plugins/table/react/TableActionMenu/utils.js

@@ -0,0 +1,34 @@
+import { $getNodeTriplet, $isTableCellNode, $isTableSelection } from "@lexical/table";
+import { $getSelection, $isElementNode, $isRangeSelection, $isTextNode } from "lexical";
+//#region src/plugins/table/react/TableActionMenu/utils.ts
+function computeSelectionCount(selection) {
+	const selectionShape = selection.getShape();
+	return {
+		columns: selectionShape.toX - selectionShape.fromX + 1,
+		rows: selectionShape.toY - selectionShape.fromY + 1
+	};
+}
+function $canUnmerge() {
+	const selection = $getSelection();
+	if ($isRangeSelection(selection) && !selection.isCollapsed() || $isTableSelection(selection) && !selection.anchor.is(selection.focus) || !$isRangeSelection(selection) && !$isTableSelection(selection)) return false;
+	const [cell] = $getNodeTriplet(selection.anchor);
+	return cell.__colSpan > 1 || cell.__rowSpan > 1;
+}
+function $selectLastDescendant(node) {
+	const lastDescendant = node.getLastDescendant();
+	if ($isTextNode(lastDescendant)) lastDescendant.select();
+	else if ($isElementNode(lastDescendant)) lastDescendant.selectEnd();
+	else if (lastDescendant !== null) lastDescendant.selectNext();
+}
+function currentCellBackgroundColor(editor) {
+	return editor.getEditorState().read(() => {
+		const selection = $getSelection();
+		if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+			const [cell] = $getNodeTriplet(selection.anchor);
+			if ($isTableCellNode(cell)) return cell.getBackgroundColor();
+		}
+		return null;
+	});
+}
+//#endregion
+export { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor };

package/es/plugins/table/react/TableHoverActions/index.js

@@ -0,0 +1,147 @@
+import { useLexicalComposerContext } from "../../../../editor-kernel/react/react-context.js";
+import { useAnchor } from "../../../../editor-kernel/react/useAnchor.js";
+import { styles } from "./style.js";
+import { getMouseInfo, useDebounce } from "./utils.js";
+import { ActionIcon } from "@lobehub/ui";
+import { PlusIcon } from "lucide-react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $getTableAndElementByKey, $getTableColumnIndexFromTableCellNode, $getTableRowIndexFromTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $isTableCellNode, $isTableNode, TableNode, getTableElement } from "@lexical/table";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { $findMatchingParent, mergeRegister } from "@lexical/utils";
+//#region src/plugins/table/react/TableHoverActions/index.tsx
+const TableHoverActions = memo(({ editor }) => {
+	const anchorElem = useAnchor();
+	const [iEditor] = useLexicalComposerContext();
+	const [isShownRow, setShownRow] = useState(false);
+	const [isShownColumn, setShownColumn] = useState(false);
+	const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false);
+	const [position, setPosition] = useState({});
+	const tableSetRef = useRef(/* @__PURE__ */ new Set());
+	const tableCellDOMNodeRef = useRef(null);
+	const debouncedOnMouseMove = useDebounce((event) => {
+		const { isOutside, tableDOMNode } = getMouseInfo(event, iEditor);
+		if (isOutside) {
+			setShownRow(false);
+			setShownColumn(false);
+			return;
+		}
+		if (!tableDOMNode) return;
+		tableCellDOMNodeRef.current = tableDOMNode;
+		let hoveredRowNode = null;
+		let hoveredColumnNode = null;
+		let tableDOMElement = null;
+		editor.getEditorState().read(() => {
+			const maybeTableCell = $getNearestNodeFromDOMNode(tableDOMNode);
+			if ($isTableCellNode(maybeTableCell)) {
+				const table = $findMatchingParent(maybeTableCell, (node) => $isTableNode(node));
+				if (!$isTableNode(table)) return;
+				tableDOMElement = getTableElement(table, editor.getElementByKey(table.getKey()));
+				if (tableDOMElement) {
+					const rowCount = table.getChildrenSize();
+					const colCount = table.getChildAtIndex(0)?.getChildrenSize();
+					const rowIndex = $getTableRowIndexFromTableCellNode(maybeTableCell);
+					const colIndex = $getTableColumnIndexFromTableCellNode(maybeTableCell);
+					if (rowIndex === rowCount - 1) hoveredRowNode = maybeTableCell;
+					else if (colIndex === colCount - 1) hoveredColumnNode = maybeTableCell;
+				}
+			}
+		}, { editor });
+		if (tableDOMElement && anchorElem) {
+			const { y: tableElemY, right: tableElemRight, left: tableElemLeft, bottom: tableElemBottom } = tableDOMElement.getBoundingClientRect();
+			const parentElement = tableDOMElement.parentElement;
+			let tableHasScroll = false;
+			if (parentElement && parentElement.classList.contains("PlaygroundEditorTheme__tableScrollableWrapper")) tableHasScroll = parentElement.scrollWidth > parentElement.clientWidth;
+			const { y: editorElemY, left: editorElemLeft } = anchorElem.getBoundingClientRect();
+			if (hoveredRowNode) {
+				setShownColumn(false);
+				setShownRow(true);
+				setPosition({
+					left: tableHasScroll && parentElement ? parentElement.offsetLeft : tableElemLeft - editorElemLeft,
+					top: tableElemBottom - editorElemY + 5
+				});
+			} else if (hoveredColumnNode) {
+				setShownColumn(true);
+				setShownRow(false);
+				setPosition({
+					left: tableElemRight - editorElemLeft + 5,
+					top: tableElemY - editorElemY
+				});
+			}
+		}
+	}, 50, 250);
+	const tableResizeObserver = useMemo(() => {
+		return new ResizeObserver(() => {
+			setShownRow(false);
+			setShownColumn(false);
+		});
+	}, []);
+	useEffect(() => {
+		if (!shouldListenMouseMove) return;
+		if (typeof document !== "undefined") document.addEventListener("mousemove", debouncedOnMouseMove);
+		return () => {
+			setShownRow(false);
+			setShownColumn(false);
+			if (typeof document !== "undefined") document.removeEventListener("mousemove", debouncedOnMouseMove);
+		};
+	}, [shouldListenMouseMove, debouncedOnMouseMove]);
+	useEffect(() => {
+		return mergeRegister(editor.registerMutationListener(TableNode, (mutations) => {
+			editor.getEditorState().read(() => {
+				let resetObserver = false;
+				for (const [key, type] of mutations) switch (type) {
+					case "created":
+						tableSetRef.current.add(key);
+						resetObserver = true;
+						break;
+					case "destroyed":
+						tableSetRef.current.delete(key);
+						resetObserver = true;
+						break;
+					default: break;
+				}
+				if (resetObserver) {
+					tableResizeObserver.disconnect();
+					for (const tableKey of tableSetRef.current) {
+						const { tableElement } = $getTableAndElementByKey(tableKey);
+						tableResizeObserver.observe(tableElement);
+					}
+					setShouldListenMouseMove(tableSetRef.current.size > 0);
+				}
+			}, { editor });
+		}, { skipInitialization: false }));
+	}, [editor, tableResizeObserver]);
+	const insertAction = (insertRow) => {
+		editor.update(() => {
+			if (tableCellDOMNodeRef.current) {
+				$getNearestNodeFromDOMNode(tableCellDOMNodeRef.current)?.selectEnd();
+				if (insertRow) {
+					$insertTableRowAtSelection();
+					setShownRow(false);
+				} else {
+					$insertTableColumnAtSelection();
+					setShownColumn(false);
+				}
+			}
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", { children: [isShownRow && /* @__PURE__ */ jsx(ActionIcon, {
+		className: cx("tableAddRows", styles.tableAddRows),
+		icon: PlusIcon,
+		onClick: () => insertAction(isShownRow),
+		size: "small",
+		style: { ...position },
+		variant: "filled"
+	}), isShownColumn && /* @__PURE__ */ jsx(ActionIcon, {
+		className: cx("tableAddColumns", styles.tableAddColumns),
+		icon: PlusIcon,
+		onClick: () => insertAction(false),
+		size: "small",
+		style: { ...position },
+		variant: "filled"
+	})] });
+});
+TableHoverActions.displayName = "TableHoverActions";
+//#endregion
+export { TableHoverActions as default };

package/es/plugins/table/react/TableHoverActions/style.js

@@ -0,0 +1,14 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableHoverActions/style.ts
+const styles = createStaticStyles(({ css }) => {
+	return {
+		tableAddColumns: css`
+      position: absolute;
+    `,
+		tableAddRows: css`
+      position: absolute;
+    `
+	};
+});
+//#endregion
+export { styles };

package/es/plugins/table/react/TableHoverActions/utils.js

@@ -0,0 +1,32 @@
+import { useMemo, useRef } from "react";
+import { debounce } from "es-toolkit/compat";
+import { isHTMLElement } from "lexical";
+//#region src/plugins/table/react/TableHoverActions/utils.ts
+function getThemeSelector(iEditor, name) {
+	const className = iEditor.getTheme()?.[name];
+	if (typeof className !== "string") throw new Error(`getThemeClass: required theme property ${name} not defined`);
+	return className.split(/\s+/g).map((cls) => `.${cls}`).join(",");
+}
+function getMouseInfo(event, iEditor) {
+	const target = event.target;
+	const tableCellClass = getThemeSelector(iEditor, "tableCell");
+	if (isHTMLElement(target)) {
+		const tableDOMNode = target.closest(`td${tableCellClass}, th${tableCellClass}`);
+		return {
+			isOutside: !(tableDOMNode || target.closest(`div.tableAddRows`) || target.closest(`div.tableAddColumns`) || target.closest("div.TableCellResizer__resizer")),
+			tableDOMNode
+		};
+	} else return {
+		isOutside: true,
+		tableDOMNode: null
+	};
+}
+function useDebounce(fn, ms, maxWait) {
+	const funcRef = useRef(null);
+	funcRef.current = fn;
+	return useMemo(() => debounce((...args) => {
+		if (funcRef.current) funcRef.current(...args);
+	}, ms, { maxWait }), [ms, maxWait]);
+}
+//#endregion
+export { getMouseInfo, useDebounce };