@lobehub/editor 4.15.1 → 4.16.0

package/es/plugins/table/react/TableRowController.js

@@ -0,0 +1,349 @@
+import { INSERT_TABLE_ROW_COMMAND, MOVE_TABLE_ROW_COMMAND, SELECT_TABLE_COMMAND } from "../command/index.js";
+import { sum, useTableAxisDrag, useTableRowMetrics } from "./TableController/hooks.js";
+import { styles } from "./TableController/style.js";
+import { createTableDragImage } from "./TableController/utils.js";
+import TableControllerMenu from "./TableControllerMenu.js";
+import TableInsertButton from "./TableInsertButton.js";
+import { useTableControllerSelection } from "./hooks.js";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $computeTableMapSkipCellCheck } from "@lexical/table";
+//#region src/plugins/table/react/TableRowController.tsx
+const INSERT_BUTTON_HIDE_DELAY = 160;
+const TABLE_DELETE_PREVIEW_CLASS = "lobe-editor-table-delete-preview";
+const DOTS = Array.from({ length: 6 }, (_, index) => index);
+const isBeforeFirstRow = (target) => {
+	return target?.index === 0 && !target.insertAfter;
+};
+const TableRowController = memo((props) => {
+	const { blockMenuService, editor, menuService, node, onInsertPreviewChange } = props;
+	const { rowHeights, tableWidth } = useTableRowMetrics(editor, node);
+	const { isTableFocused, isTableSelected, selectedRows } = useTableControllerSelection(editor, node);
+	const anchorRowIndexRef = useRef(null);
+	const deletePreviewElementsRef = useRef([]);
+	const insertButtonHoveredRef = useRef(false);
+	const insertButtonHideTimerRef = useRef(null);
+	const rowLeftRef = useRef(null);
+	const showMenu = selectedRows.length > 0 && !isTableSelected;
+	const [insertTarget, setInsertTarget] = useState(null);
+	const [menuAnchorElement, setMenuAnchorElement] = useState(null);
+	const [, setMenuVersion] = useState(0);
+	const pendingDragRowsRef = useRef(null);
+	const [isControllerHovered, setControllerHovered] = useState(false);
+	const clearInsertButtonHideTimer = () => {
+		if (insertButtonHideTimerRef.current) {
+			clearTimeout(insertButtonHideTimerRef.current);
+			insertButtonHideTimerRef.current = null;
+		}
+	};
+	const clearDeletePreview = useCallback(() => {
+		deletePreviewElementsRef.current.forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		deletePreviewElementsRef.current = [];
+	}, []);
+	const showDeletePreview = useCallback(() => {
+		clearDeletePreview();
+		if (!showMenu) return;
+		editor.getEditorState().read(() => {
+			const [tableMap] = $computeTableMapSkipCellCheck(node.getLatest(), null, null);
+			const previewCellKeys = /* @__PURE__ */ new Set();
+			for (const rowIndex of selectedRows) {
+				const row = tableMap[rowIndex];
+				if (!row) continue;
+				for (const mapCell of row) if (mapCell?.cell) previewCellKeys.add(mapCell.cell.getKey());
+			}
+			for (const cellKey of previewCellKeys) {
+				const element = editor.getElementByKey(cellKey);
+				if (element instanceof HTMLElement) {
+					element.classList.add(TABLE_DELETE_PREVIEW_CLASS);
+					deletePreviewElementsRef.current.push(element);
+				}
+			}
+		});
+	}, [
+		clearDeletePreview,
+		editor,
+		node,
+		selectedRows,
+		showMenu
+	]);
+	const closeMenu = useCallback(() => {
+		setMenuAnchorElement(null);
+		onInsertPreviewChange?.(null);
+		clearDeletePreview();
+	}, [clearDeletePreview, onInsertPreviewChange]);
+	const menuContext = {
+		axis: "row",
+		editor,
+		node,
+		selectedIndexes: selectedRows
+	};
+	const menuItems = menuService?.getItems(menuContext).map((item) => {
+		if (item.type === "separator") return {
+			key: item.key,
+			type: "separator"
+		};
+		return {
+			danger: item.danger,
+			key: item.key,
+			label: typeof item.label === "function" ? item.label(menuContext) : item.label,
+			onClick: () => {
+				item.onClick(menuContext);
+			},
+			onMouseEnter: item.preview === "delete" ? showDeletePreview : item.preview === "insert-before" ? () => {
+				onInsertPreviewChange?.("top");
+			} : item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.("bottom");
+			} : void 0,
+			onMouseLeave: item.preview === "delete" ? clearDeletePreview : item.preview === "insert-before" || item.preview === "insert-after" ? () => {
+				onInsertPreviewChange?.(null);
+			} : void 0
+		};
+	}) ?? [];
+	const scheduleHideInsertButton = () => {
+		clearInsertButtonHideTimer();
+		insertButtonHideTimerRef.current = setTimeout(() => {
+			if (!insertButtonHoveredRef.current) setInsertTarget(null);
+		}, INSERT_BUTTON_HIDE_DELAY);
+	};
+	const { clearDragState, dragTarget, finishDrag: finishRowDrag, isDragging, startDrag } = useTableAxisDrag({
+		getDropTarget: useCallback((event) => {
+			const controller = rowLeftRef.current;
+			if (!controller) return null;
+			const rows = Array.from(controller.querySelectorAll(".row"));
+			if (rows.length === 0) return null;
+			for (const [index, row] of rows.entries()) {
+				const rect = row.getBoundingClientRect();
+				if (event.clientY <= rect.top + rect.height / 2) return {
+					index,
+					insertAfter: false
+				};
+			}
+			return {
+				index: rows.length - 1,
+				insertAfter: true
+			};
+		}, []),
+		onMove: useCallback((target, selectedIndexes) => {
+			editor.dispatchCommand(MOVE_TABLE_ROW_COMMAND, {
+				insertAfter: target.insertAfter,
+				rowIndex: target.index,
+				selectedRows: selectedIndexes,
+				table: node.getKey()
+			});
+		}, [editor, node])
+	});
+	const startRowDrag = useCallback((event, selectedIndexes) => {
+		event.dataTransfer.effectAllowed = "move";
+		event.dataTransfer.dropEffect = "move";
+		event.dataTransfer.setData("text/plain", "");
+		const dragImage = createTableDragImage(`拖拽 ${selectedIndexes.length} 行`);
+		event.dataTransfer.setDragImage(dragImage, dragImage.offsetWidth / 2, dragImage.offsetHeight / 2);
+		setInsertTarget(null);
+		closeMenu();
+		startDrag(event.nativeEvent, selectedIndexes);
+	}, [closeMenu, startDrag]);
+	const insertRowOffset = insertTarget ? sum(rowHeights.slice(0, insertTarget.index)) + (insertTarget.insertAfter ? rowHeights[insertTarget.index] || 0 : 0) : 0;
+	const dragRowOffset = dragTarget ? sum(rowHeights.slice(0, dragTarget.index)) + (dragTarget.insertAfter ? rowHeights[dragTarget.index] || 0 : 0) : 0;
+	const showRowInsertButton = !isDragging && Boolean(insertTarget) && !isBeforeFirstRow(insertTarget);
+	useEffect(() => {
+		if (selectedRows.length > 0) anchorRowIndexRef.current = selectedRows[0];
+	}, [selectedRows]);
+	useEffect(() => {
+		return menuService?.subscribe(() => {
+			setMenuVersion((version) => version + 1);
+		});
+	}, [menuService]);
+	useEffect(() => {
+		return () => {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragRowsRef.current = null;
+			clearDragState();
+		};
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange
+	]);
+	const shouldShowController = isTableFocused || isControllerHovered;
+	useEffect(() => {
+		if (!shouldShowController) {
+			clearInsertButtonHideTimer();
+			clearDeletePreview();
+			setInsertTarget(null);
+			onInsertPreviewChange?.(null);
+			setMenuAnchorElement(null);
+			pendingDragRowsRef.current = null;
+			clearDragState();
+		}
+	}, [
+		clearDeletePreview,
+		clearDragState,
+		onInsertPreviewChange,
+		shouldShowController
+	]);
+	useEffect(() => {
+		if (!showMenu) closeMenu();
+	}, [closeMenu, showMenu]);
+	if (!shouldShowController) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "table-controller-row",
+		contentEditable: false,
+		onMouseEnter: () => {
+			setControllerHovered(true);
+		},
+		onMouseLeave: () => {
+			setControllerHovered(false);
+			scheduleHideInsertButton();
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("left", styles.rowLeft),
+			ref: rowLeftRef,
+			children: [
+				/* @__PURE__ */ jsx(TableControllerMenu, {
+					anchorElement: menuAnchorElement,
+					blockMenuService,
+					items: menuItems,
+					onOpenChange: (open) => {
+						if (!open) closeMenu();
+					},
+					open: Boolean(menuAnchorElement) && showMenu && menuItems.length > 0,
+					position: "left"
+				}),
+				/* @__PURE__ */ jsx(TableInsertButton, {
+					ariaLabel: "Insert row",
+					offset: insertRowOffset,
+					onInsert: () => {
+						if (!insertTarget) return;
+						editor.dispatchCommand(INSERT_TABLE_ROW_COMMAND, {
+							insertAfter: insertTarget.insertAfter,
+							rowIndex: insertTarget.index,
+							table: node.getKey()
+						});
+						setInsertTarget(null);
+					},
+					onMouseEnter: () => {
+						insertButtonHoveredRef.current = true;
+						clearInsertButtonHideTimer();
+					},
+					onMouseLeave: () => {
+						insertButtonHoveredRef.current = false;
+						scheduleHideInsertButton();
+					},
+					position: "left",
+					reference: rowLeftRef.current,
+					visible: showRowInsertButton
+				}),
+				rowHeights.map((height, index) => {
+					const isLastRow = index + 1 === rowHeights.length;
+					const isSelected = selectedRows.includes(index);
+					const isSelectedController = isSelected && !isTableSelected;
+					const showSelectionDots = isSelected && !isTableSelected;
+					return /* @__PURE__ */ jsx("div", {
+						className: cx("row", styles.row, isLastRow && styles.rowLast, isSelected && styles.selected),
+						draggable: true,
+						onClickCapture: (event) => {
+							if (isSelectedController) {
+								event.preventDefault();
+								event.stopPropagation();
+								clearInsertButtonHideTimer();
+								setInsertTarget(null);
+								setMenuAnchorElement(event.currentTarget);
+							}
+						},
+						onDragEnd: () => {
+							pendingDragRowsRef.current = null;
+							finishRowDrag();
+						},
+						onDragStart: (event) => {
+							event.stopPropagation();
+							startRowDrag(event, pendingDragRowsRef.current || (isSelectedController ? selectedRows : [index]));
+						},
+						onMouseDown: (event) => {
+							event.stopPropagation();
+							if (isSelectedController) {
+								event.preventDefault();
+								pendingDragRowsRef.current = selectedRows;
+								return;
+							}
+							closeMenu();
+							pendingDragRowsRef.current = [index];
+							const anchorIndex = event.shiftKey ? selectedRows[0] ?? anchorRowIndexRef.current : index;
+							editor.dispatchCommand(SELECT_TABLE_COMMAND, {
+								anchorIndex,
+								extend: event.shiftKey,
+								rowIndex: index,
+								table: node.getKey()
+							});
+							if (!event.shiftKey) anchorRowIndexRef.current = index;
+						},
+						onMouseDownCapture: (event) => {
+							if (isSelectedController) {
+								event.stopPropagation();
+								pendingDragRowsRef.current = selectedRows;
+							}
+						},
+						onMouseMove: (event) => {
+							if (isDragging || isSelectedController) {
+								setInsertTarget(null);
+								return;
+							}
+							const rect = event.currentTarget.getBoundingClientRect();
+							const insertAfter = event.clientY - rect.top > rect.height / 2;
+							if (isBeforeFirstRow({
+								index,
+								insertAfter
+							})) {
+								setInsertTarget(null);
+								return;
+							}
+							setInsertTarget({
+								index,
+								insertAfter
+							});
+						},
+						onMouseUpCapture: (event) => {
+							if (isSelectedController) {
+								event.preventDefault();
+								event.stopPropagation();
+							}
+						},
+						onPointerDownCapture: (event) => {
+							if (isSelectedController) {
+								event.stopPropagation();
+								pendingDragRowsRef.current = selectedRows;
+							}
+						},
+						style: { height },
+						children: /* @__PURE__ */ jsx("span", {
+							className: cx(styles.selectionDots, styles.rowSelectionDots, showSelectionDots && styles.selectionDotsVisible),
+							children: DOTS.map((dot) => /* @__PURE__ */ jsx("span", {}, dot))
+						})
+					}, index);
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: cx(styles.dragIndicator, styles.rowDragIndicator, Boolean(dragTarget) && isDragging && styles.dragIndicatorVisible),
+					style: {
+						inlineSize: tableWidth,
+						top: dragRowOffset
+					}
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: cx("corner", styles.corner, isTableSelected && styles.selected, isTableSelected && styles.selectedCorner),
+			onMouseDown: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				editor.dispatchCommand(SELECT_TABLE_COMMAND, { table: node.getKey() });
+			}
+		})]
+	});
+});
+TableRowController.displayName = "TableRowController";
+//#endregion
+export { TableRowController as default };

package/es/plugins/table/react/hooks.js

@@ -0,0 +1,77 @@
+import { getTableSelectionIndexes, isTableFullySelected } from "../utils/index.js";
+import { useEffect, useState } from "react";
+import { $findTableNode, $isTableSelection } from "@lexical/table";
+import "es-toolkit/compat";
+import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/table/react/hooks.ts
+/**
+* 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 isSameSelection = (current, next) => {
+	return current.isTableFocused === next.isTableFocused && current.isTableSelected === next.isTableSelected && current.selectedColumns.length === next.selectedColumns.length && current.selectedRows.length === next.selectedRows.length && current.selectedColumns.every((column, index) => column === next.selectedColumns[index]) && current.selectedRows.every((row, index) => row === next.selectedRows[index]);
+};
+const readTableControllerSelection = (editor, tableKey) => {
+	const rootElement = editor.getRootElement();
+	const activeElement = rootElement?.ownerDocument.activeElement;
+	const isEditorFocused = Boolean(rootElement && activeElement && (activeElement === rootElement || rootElement.contains(activeElement)));
+	return editor.getEditorState().read(() => {
+		const selection = $getSelection();
+		const tableNode = $getNodeByKey(tableKey);
+		if (!tableNode) return {
+			isTableFocused: false,
+			isTableSelected: false,
+			selectedColumns: [],
+			selectedRows: []
+		};
+		const columnCount = tableNode.getColumnCount();
+		const rowCount = tableNode.getChildrenSize();
+		const selectionIndexes = getTableSelectionIndexes(selection, tableKey, columnCount, rowCount);
+		const anchorNode = $isRangeSelection(selection) ? $getNodeByKey(selection.anchor.key) : null;
+		return {
+			isTableFocused: isEditorFocused && ($isTableSelection(selection) && selection.tableKey === tableKey || Boolean(anchorNode && $findTableNode(anchorNode)?.getKey() === tableKey)),
+			isTableSelected: isEditorFocused && isTableFullySelected(selection, tableKey, columnCount, rowCount),
+			selectedColumns: isEditorFocused ? selectionIndexes.selectedColumns : [],
+			selectedRows: isEditorFocused ? selectionIndexes.selectedRows : []
+		};
+	});
+};
+const useTableControllerSelection = (editor, node) => {
+	const tableKey = node.getKey();
+	const [selection, setSelection] = useState(() => readTableControllerSelection(editor, tableKey));
+	useEffect(() => {
+		let frame = null;
+		const updateSelection = () => {
+			const nextSelection = readTableControllerSelection(editor, tableKey);
+			setSelection((currentSelection) => {
+				return isSameSelection(currentSelection, nextSelection) ? currentSelection : nextSelection;
+			});
+		};
+		const scheduleUpdateSelection = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				updateSelection();
+			});
+		};
+		const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("focusin", scheduleUpdateSelection);
+			prevRootElement?.removeEventListener("focusout", scheduleUpdateSelection);
+			rootElement?.addEventListener("focusin", scheduleUpdateSelection);
+			rootElement?.addEventListener("focusout", scheduleUpdateSelection);
+			updateSelection();
+		});
+		const unregisterUpdateListener = editor.registerUpdateListener(updateSelection);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			unregisterRootListener();
+			unregisterUpdateListener();
+		};
+	}, [editor, tableKey]);
+	return selection;
+};
+//#endregion
+export { useTableControllerSelection };

package/es/plugins/table/react/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactTablePluginProps } from "./type.js";
+import { FC } from "react";
+
+//#region src/plugins/table/react/index.d.ts
+declare const ReactTablePlugin: FC<ReactTablePluginProps>;
+//#endregion
+export { ReactTablePlugin };

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

@@ -0,0 +1,172 @@
+"use client";
+import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
+import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
+import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
+import { $updateDOMForSelection } from "../utils/index.js";
+import { ITableControllerMenuService } from "../service/i-table-controller-menu-service.js";
+import { TablePlugin } from "../plugin/index.js";
+import PortalAnchor from "../../../editor-kernel/react/PortalAnchor.js";
+import TableActionMenu from "./TableActionMenu/index.js";
+import TableColController from "./TableColController.js";
+import TableHoverActions from "./TableHoverActions/index.js";
+import TableResize_default from "./TableResize/index.js";
+import TableRowController from "./TableRowController.js";
+import { selectionOutlineStyles, styles } from "./style.js";
+import { useAutoFitPastedTable } from "./useAutoFitPastedTable.js";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { $findTableNode, $getElementForTableNode, $isTableNode, $isTableSelection } from "@lexical/table";
+import EventEmitter from "eventemitter3";
+import { $getNodeByKey, $getSelection, $isRangeSelection } from "lexical";
+//#region src/plugins/table/react/index.tsx
+const isEditorRootFocused = (activeEditor) => {
+	const rootElement = activeEditor.getRootElement();
+	const activeElement = rootElement?.ownerDocument.activeElement;
+	return Boolean(rootElement && activeElement && (activeElement === rootElement || rootElement.contains(activeElement)));
+};
+const ReactTablePlugin = ({ className, locale, resizeMode = "realtime" }) => {
+	const [editor] = useLexicalComposerContext();
+	const [lexicalEditor, setLexicalEditor] = useState(null);
+	const [selectionOutlineRect, setSelectionOutlineRect] = useState(null);
+	const [selectionOutlinePreviewSide, setSelectionOutlinePreviewSide] = useState(null);
+	const eventEmitter = useMemo(() => {
+		return new EventEmitter();
+	}, []);
+	useAutoFitPastedTable(lexicalEditor);
+	const selectionOutlineStyle = useMemo(() => {
+		if (!selectionOutlineRect) return;
+		const style = {
+			height: selectionOutlineRect.height,
+			left: selectionOutlineRect.left,
+			top: selectionOutlineRect.top,
+			width: selectionOutlineRect.width
+		};
+		if (!selectionOutlinePreviewSide) return style;
+		return {
+			...style,
+			borderBottomWidth: selectionOutlinePreviewSide === "bottom" ? void 0 : 0,
+			borderLeftWidth: selectionOutlinePreviewSide === "left" ? void 0 : 0,
+			borderRightWidth: selectionOutlinePreviewSide === "right" ? void 0 : 0,
+			borderTopWidth: selectionOutlinePreviewSide === "top" ? void 0 : 0
+		};
+	}, [selectionOutlinePreviewSide, selectionOutlineRect]);
+	const updateSelectionOutlineRect = useCallback((rect) => {
+		setSelectionOutlineRect((current) => {
+			if (current?.height === rect?.height && current?.left === rect?.left && current?.top === rect?.top && current?.width === rect?.width) return current;
+			return rect;
+		});
+	}, []);
+	const refreshSelectionOutlineRect = useCallback((activeEditor) => {
+		if (!isEditorRootFocused(activeEditor)) {
+			updateSelectionOutlineRect(null);
+			return;
+		}
+		activeEditor.read(() => {
+			const selection = $getSelection();
+			if (!$isTableSelection(selection) && !$isRangeSelection(selection)) {
+				updateSelectionOutlineRect(null);
+				return null;
+			}
+			const anchorNode = $isRangeSelection(selection) ? $getNodeByKey(selection.anchor.key) : null;
+			const tableNode = $isTableSelection(selection) ? $getNodeByKey(selection.tableKey) : anchorNode ? $findTableNode(anchorNode) : null;
+			if (!tableNode || !$isTableNode(tableNode)) {
+				updateSelectionOutlineRect(null);
+				return null;
+			}
+			updateSelectionOutlineRect($updateDOMForSelection(activeEditor, $getElementForTableNode(activeEditor, tableNode), selection));
+		});
+	}, [updateSelectionOutlineRect]);
+	useEffect(() => {
+		if (!lexicalEditor || !selectionOutlineRect) return;
+		let frame = null;
+		const scheduleRefresh = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshSelectionOutlineRect(lexicalEditor);
+			});
+		};
+		document.addEventListener("scroll", scheduleRefresh, true);
+		window.addEventListener("resize", scheduleRefresh);
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			document.removeEventListener("scroll", scheduleRefresh, true);
+			window.removeEventListener("resize", scheduleRefresh);
+		};
+	}, [
+		lexicalEditor,
+		refreshSelectionOutlineRect,
+		selectionOutlineRect
+	]);
+	useLayoutEffect(() => {
+		if (locale) editor.registerLocale(locale);
+		editor.registerPlugin(TablePlugin, {
+			decoratorCol: (node, lexicalEditor) => {
+				return /* @__PURE__ */ jsx(TableColController, {
+					blockMenuService: editor.requireService(IBlockMenuService),
+					editor: lexicalEditor,
+					menuService: editor.requireService(ITableControllerMenuService),
+					node,
+					onColumnMetricsChange: () => {
+						requestAnimationFrame(() => {
+							refreshSelectionOutlineRect(lexicalEditor);
+						});
+					},
+					onInsertPreviewChange: setSelectionOutlinePreviewSide
+				}, node.getColumnCount());
+			},
+			decoratorRow: (node, lexicalEditor) => {
+				return /* @__PURE__ */ jsx(TableRowController, {
+					blockMenuService: editor.requireService(IBlockMenuService),
+					editor: lexicalEditor,
+					menuService: editor.requireService(ITableControllerMenuService),
+					node,
+					onInsertPreviewChange: setSelectionOutlinePreviewSide
+				});
+			},
+			theme: cx(styles, className)
+		});
+	}, []);
+	useLexicalEditor((editor) => {
+		setLexicalEditor(editor);
+		let frame = null;
+		const scheduleRefreshSelectionOutlineRect = () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => {
+				frame = null;
+				refreshSelectionOutlineRect(editor);
+			});
+		};
+		const unregisterUpdateListener = editor.registerUpdateListener(scheduleRefreshSelectionOutlineRect);
+		const unregisterRootListener = editor.registerRootListener((rootElement, prevRootElement) => {
+			prevRootElement?.removeEventListener("focusin", scheduleRefreshSelectionOutlineRect);
+			prevRootElement?.removeEventListener("focusout", scheduleRefreshSelectionOutlineRect);
+			rootElement?.addEventListener("focusin", scheduleRefreshSelectionOutlineRect);
+			rootElement?.addEventListener("focusout", scheduleRefreshSelectionOutlineRect);
+		});
+		return () => {
+			if (frame !== null) cancelAnimationFrame(frame);
+			unregisterRootListener();
+			unregisterUpdateListener();
+			updateSelectionOutlineRect(null);
+			setSelectionOutlinePreviewSide(null);
+			setLexicalEditor(null);
+		};
+	}, []);
+	return lexicalEditor && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TableResize_default, {
+		editor: lexicalEditor,
+		eventEmitter,
+		resizeMode
+	}), /* @__PURE__ */ jsxs(PortalAnchor, { children: [
+		selectionOutlineStyle && /* @__PURE__ */ jsx("div", {
+			className: selectionOutlineStyles.outline,
+			contentEditable: false,
+			style: selectionOutlineStyle
+		}),
+		/* @__PURE__ */ jsx(TableActionMenu, { editor: lexicalEditor }),
+		/* @__PURE__ */ jsx(TableHoverActions, { editor: lexicalEditor })
+	] })] });
+};
+//#endregion
+export { ReactTablePlugin };