@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,264 @@
+import { createStaticStyles } from "antd-style";
+//#region src/plugins/table/react/TableController/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => {
+	const selectedBackground = `color-mix(in srgb, ${cssVar.colorPrimaryBg} 72%, ${cssVar.colorPrimary} 28%)`;
+	const hoverable = `
+    cursor: pointer;
+    background-color: ${cssVar.colorFillTertiary};
+    transition: background-color 0.12s ease;
+
+    &:hover {
+      background-color: ${cssVar.colorPrimaryBg};
+    }
+  `;
+	return {
+		col: css`
+      ${hoverable};
+      position: relative;
+
+      flex-shrink: 0;
+
+      block-size: 14px;
+      border-color: ${cssVar.colorFillSecondary};
+      border-style: solid;
+      border-width: 1px 0 0 1px;
+    `,
+		colDragIndicator: css`
+      inset-block-start: 14px;
+      transform: translateX(-50%);
+      inline-size: 2px;
+    `,
+		colLast: css`
+      border-width: 1px 1px 0;
+      border-start-end-radius: 8px;
+    `,
+		colSelectionDots: css`
+      grid-template-columns: repeat(3, 2px);
+    `,
+		colTop: css`
+      position: relative;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+
+      display: flex;
+
+      block-size: 14px;
+    `,
+		corner: css`
+      ${hoverable};
+      position: absolute;
+      z-index: 4;
+      inset-block-start: 0;
+      inset-inline-start: -14px;
+
+      box-sizing: border-box;
+      inline-size: 15px;
+      block-size: 15px;
+      border: 1px solid ${cssVar.colorFillSecondary};
+      border-start-start-radius: 8px;
+    `,
+		deleteButton: css`
+      pointer-events: none;
+      cursor: pointer;
+
+      position: fixed;
+      z-index: 5;
+      transform: translate(-50%, -50%);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      inline-size: 28px;
+      block-size: 28px;
+      padding: 0;
+      border: 1px solid ${cssVar.colorBorder};
+      border-radius: 4px;
+
+      color: ${cssVar.colorText};
+
+      opacity: 0;
+      background: ${cssVar.colorBgElevated};
+      box-shadow: 0 2px 8px color-mix(in srgb, #000 12%, transparent);
+
+      &:hover {
+        border-color: ${cssVar.colorErrorBorder};
+        color: ${cssVar.colorError};
+        background: ${cssVar.colorErrorBg};
+      }
+    `,
+		deleteButtonVisible: css`
+      pointer-events: auto;
+      opacity: 1;
+    `,
+		dragIndicator: css`
+      pointer-events: none;
+
+      position: absolute;
+      z-index: 6;
+
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorPrimary};
+      box-shadow: 0 0 0 2px ${cssVar.colorPrimaryBg};
+    `,
+		dragIndicatorVisible: css`
+      opacity: 1;
+    `,
+		insertButton: css`
+      pointer-events: none;
+      cursor: pointer;
+
+      position: fixed;
+      z-index: 5;
+      transform: translate(-50%, -50%);
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      box-sizing: border-box;
+      inline-size: 24px;
+      block-size: 24px;
+      padding: 0;
+      border: 0;
+      border-radius: 8px;
+
+      color: ${cssVar.colorTextSecondary};
+
+      opacity: 0;
+      background: ${cssVar.colorFillTertiary};
+
+      &:hover {
+        color: ${cssVar.colorText};
+        background: ${cssVar.colorFillSecondary};
+      }
+    `,
+		insertButtonVisible: css`
+      pointer-events: auto;
+      opacity: 1;
+    `,
+		menu: css`
+      pointer-events: auto;
+
+      position: fixed;
+      z-index: 1000;
+
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      box-sizing: border-box;
+      padding: 6px;
+      border: 1px solid ${cssVar.colorBorderSecondary};
+      border-radius: 8px;
+
+      background: ${cssVar.colorBgElevated};
+      box-shadow: 0 8px 24px color-mix(in srgb, #000 18%, transparent);
+    `,
+		menuItem: css`
+      cursor: pointer;
+
+      display: flex;
+      align-items: center;
+
+      min-block-size: 32px;
+      padding-block: 0;
+      padding-inline: 10px;
+      border: 0;
+      border-radius: 5px;
+
+      font: inherit;
+      color: ${cssVar.colorText};
+      text-align: start;
+      white-space: nowrap;
+
+      background: transparent;
+
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+    `,
+		menuItemDanger: css`
+      color: ${cssVar.colorError};
+
+      &:hover {
+        background: ${cssVar.colorErrorBg};
+      }
+    `,
+		menuSeparator: css`
+      block-size: 1px;
+      margin-block: 4px;
+      margin-inline: -6px;
+      background: ${cssVar.colorSplit};
+    `,
+		row: css`
+      ${hoverable};
+      position: relative;
+
+      box-sizing: border-box;
+      inline-size: 15px;
+      border-color: ${cssVar.colorFillSecondary};
+      border-style: solid;
+      border-width: 1px 0.5px 0 1px;
+    `,
+		rowDragIndicator: css`
+      inset-inline-start: 15px;
+      transform: translateY(-50%);
+      block-size: 2px;
+    `,
+		rowLast: css`
+      border-width: 1px 0.5px 1px 1px;
+      border-end-start-radius: 8px;
+    `,
+		rowLeft: css`
+      position: absolute;
+      z-index: 3;
+      inset-block-start: 14px;
+      inset-inline-start: -14px;
+
+      inline-size: 15px;
+    `,
+		rowSelectionDots: css`
+      grid-template-columns: repeat(2, 2px);
+    `,
+		selected: css`
+      cursor: move;
+      background-color: ${selectedBackground};
+
+      &:hover {
+        background-color: ${selectedBackground};
+      }
+    `,
+		selectedCorner: css`
+      cursor: pointer;
+    `,
+		selectionDots: css`
+      pointer-events: none;
+
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      transform: translate(-50%, -50%);
+
+      display: grid;
+      gap: 2px;
+
+      opacity: 0;
+
+      > span {
+        inline-size: 2px;
+        block-size: 2px;
+        border-radius: 50%;
+        background: ${cssVar.colorTextLightSolid};
+      }
+    `,
+		selectionDotsVisible: css`
+      opacity: 1;
+    `
+	};
+});
+//#endregion
+export { styles };

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

@@ -0,0 +1,25 @@
+//#region src/plugins/table/react/TableController/utils.ts
+const createTableDragImage = (label) => {
+	const element = document.createElement("div");
+	element.textContent = label;
+	element.style.cssText = `
+    position: fixed;
+    top: -1000px;
+    left: -1000px;
+    z-index: -1;
+    padding: 6px 10px;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 6px;
+    color: #fff;
+    font-size: 12px;
+    line-height: 18px;
+    white-space: nowrap;
+    background: rgba(0, 0, 0, 0.78);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
+  `;
+	document.body.append(element);
+	setTimeout(() => element.remove());
+	return element;
+};
+//#endregion
+export { createTableDragImage };

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

@@ -0,0 +1,81 @@
+import { memo, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableControllerButton.tsx
+const BUTTON_SIZE = 24;
+const getPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.querySelector(".ant-app") || document.body;
+};
+const getButtonStyle = (reference, position, offset = 0, gap) => {
+	if (!reference) return {};
+	const rect = reference.getBoundingClientRect();
+	const minCenter = BUTTON_SIZE / 2 + gap;
+	const maxInlineCenter = window.innerWidth - BUTTON_SIZE / 2 - gap;
+	const maxBlockCenter = window.innerHeight - BUTTON_SIZE / 2 - gap;
+	const clampCenter = (value, max) => {
+		return Math.min(Math.max(value, minCenter), max);
+	};
+	if (position === "top") {
+		const preferredTop = rect.top - BUTTON_SIZE / 2 - gap;
+		const fallbackTop = rect.bottom + BUTTON_SIZE / 2 + gap;
+		return {
+			insetBlockStart: preferredTop >= minCenter ? preferredTop : clampCenter(fallbackTop, maxBlockCenter),
+			insetInlineStart: clampCenter(rect.left + offset, maxInlineCenter)
+		};
+	}
+	const preferredLeft = rect.left - BUTTON_SIZE / 2 - gap;
+	const fallbackLeft = rect.right + BUTTON_SIZE / 2 + gap;
+	return {
+		insetBlockStart: clampCenter(rect.top + offset, maxBlockCenter),
+		insetInlineStart: preferredLeft >= minCenter ? preferredLeft : clampCenter(fallbackLeft, maxInlineCenter)
+	};
+};
+const TableControllerButton = memo(({ ariaLabel, children, className, gap = 6, offset, onClick, onMouseEnter, onMouseLeave, position, reference, visible, visibleClassName }) => {
+	const [style, setStyle] = useState(() => getButtonStyle(reference, position, offset, gap));
+	const container = getPortalContainer();
+	useEffect(() => {
+		if (!visible || !reference) return;
+		const updateStyle = () => {
+			setStyle(getButtonStyle(reference, position, offset, gap));
+		};
+		updateStyle();
+		window.addEventListener("scroll", updateStyle, true);
+		window.addEventListener("resize", updateStyle);
+		const observer = new ResizeObserver(updateStyle);
+		observer.observe(reference);
+		return () => {
+			window.removeEventListener("scroll", updateStyle, true);
+			window.removeEventListener("resize", updateStyle);
+			observer.disconnect();
+		};
+	}, [
+		gap,
+		offset,
+		position,
+		reference,
+		visible
+	]);
+	if (!container) return null;
+	return createPortal(/* @__PURE__ */ jsx("button", {
+		"aria-hidden": !visible,
+		"aria-label": ariaLabel,
+		className: cx(className, visible && visibleClassName),
+		onMouseDown: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			if (!visible) return;
+			onClick();
+		},
+		onMouseEnter,
+		onMouseLeave,
+		style,
+		tabIndex: visible ? 0 : -1,
+		type: "button",
+		children
+	}), container);
+});
+TableControllerButton.displayName = "TableControllerButton";
+//#endregion
+export { TableControllerButton as default };

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

@@ -0,0 +1,123 @@
+import { styles } from "./TableController/style.js";
+import { memo, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { createPortal } from "react-dom";
+//#region src/plugins/table/react/TableControllerMenu.tsx
+const MENU_GAP = 8;
+const MENU_MIN_WIDTH = 168;
+const BLOCK_MENU_SUPPRESSOR_KEY = "__table_controller_menu";
+const isSeparatorItem = (item) => {
+	return "type" in item && item.type === "separator";
+};
+const getPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.querySelector(".ant-app") || document.body;
+};
+const getMenuStyle = (anchorElement, items, position, menuElement) => {
+	if (!anchorElement || typeof window === "undefined") return {};
+	const rect = anchorElement.getBoundingClientRect();
+	const menuWidth = MENU_MIN_WIDTH;
+	const estimatedHeight = menuElement?.getBoundingClientRect().height || items.reduce((height, item) => height + (isSeparatorItem(item) ? 9 : 32), 12);
+	const maxLeft = Math.max(MENU_GAP, window.innerWidth - menuWidth - MENU_GAP);
+	const maxTop = Math.max(MENU_GAP, window.innerHeight - estimatedHeight - MENU_GAP);
+	const clamp = (value, max) => Math.min(Math.max(value, MENU_GAP), max);
+	if (position === "top") {
+		const preferredTop = rect.top - estimatedHeight - MENU_GAP;
+		const fallbackTop = rect.bottom + MENU_GAP;
+		return {
+			insetBlockStart: preferredTop >= MENU_GAP ? preferredTop : clamp(fallbackTop, maxTop),
+			insetInlineStart: clamp(rect.left + rect.width / 2 - menuWidth / 2, maxLeft),
+			minInlineSize: menuWidth
+		};
+	}
+	const preferredLeft = rect.left - menuWidth - MENU_GAP;
+	const fallbackLeft = rect.right + MENU_GAP;
+	return {
+		insetBlockStart: clamp(rect.top + rect.height / 2 - estimatedHeight / 2, maxTop),
+		insetInlineStart: preferredLeft >= MENU_GAP ? preferredLeft : clamp(fallbackLeft, maxLeft),
+		minInlineSize: menuWidth
+	};
+};
+const TableControllerMenu = memo(({ anchorElement, blockMenuService, items, onOpenChange, open, position }) => {
+	const [style, setStyle] = useState(() => getMenuStyle(anchorElement, items, position));
+	const menuRef = useRef(null);
+	const container = getPortalContainer();
+	useEffect(() => {
+		blockMenuService?.setMenuSuppressed(BLOCK_MENU_SUPPRESSOR_KEY, open);
+		return () => {
+			blockMenuService?.setMenuSuppressed(BLOCK_MENU_SUPPRESSOR_KEY, false);
+		};
+	}, [blockMenuService, open]);
+	useEffect(() => {
+		if (!open || !anchorElement) return;
+		const updateStyle = () => {
+			setStyle(getMenuStyle(anchorElement, items, position, menuRef.current));
+		};
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (target instanceof Node && (anchorElement.contains(target) || menuRef.current?.contains(target))) return;
+			onOpenChange(false);
+		};
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") onOpenChange(false);
+		};
+		updateStyle();
+		requestAnimationFrame(updateStyle);
+		window.addEventListener("scroll", updateStyle, true);
+		window.addEventListener("resize", updateStyle);
+		document.addEventListener("pointerdown", handlePointerDown);
+		document.addEventListener("keydown", handleKeyDown);
+		const observer = new ResizeObserver(updateStyle);
+		observer.observe(anchorElement);
+		return () => {
+			window.removeEventListener("scroll", updateStyle, true);
+			window.removeEventListener("resize", updateStyle);
+			document.removeEventListener("pointerdown", handlePointerDown);
+			document.removeEventListener("keydown", handleKeyDown);
+			observer.disconnect();
+		};
+	}, [
+		anchorElement,
+		container,
+		items,
+		onOpenChange,
+		open,
+		position
+	]);
+	if (!container || !open) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: styles.menu,
+		contentEditable: false,
+		ref: menuRef,
+		role: "menu",
+		style,
+		children: items.map((item) => {
+			if (isSeparatorItem(item)) return /* @__PURE__ */ jsx("div", {
+				className: styles.menuSeparator,
+				role: "separator"
+			}, item.key);
+			return /* @__PURE__ */ jsx("button", {
+				className: cx(styles.menuItem, item.danger && styles.menuItemDanger),
+				onClick: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					item.onClick();
+					onOpenChange(false);
+				},
+				onMouseDown: (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+				},
+				onMouseEnter: item.onMouseEnter,
+				onMouseLeave: item.onMouseLeave,
+				role: "menuitem",
+				type: "button",
+				children: item.label
+			}, item.key);
+		})
+	}), container);
+});
+TableControllerMenu.displayName = "TableControllerMenu";
+//#endregion
+export { TableControllerMenu as default };

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 };