@lobehub/editor 4.15.1 → 4.16.0

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

@@ -0,0 +1,296 @@
+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, useRef, 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 TABLE_DELETE_PREVIEW_CLASS = "lobe-editor-table-delete-preview";
+const range = (from, to) => {
+	return Array.from({ length: to - from + 1 }, (_, index) => from + index);
+};
+const TableActionMenu = memo(({ editor, tableCellNode: _tableCellNode, cellMerge, children }) => {
+	const [tableCellNode, updateTableCellNode] = useState(_tableCellNode);
+	const deletePreviewElementsRef = useRef([]);
+	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();
+	const clearDeletePreview = useCallback(() => {
+		deletePreviewElementsRef.current.forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		document.querySelectorAll(`.${TABLE_DELETE_PREVIEW_CLASS}`).forEach((element) => {
+			element.classList.remove(TABLE_DELETE_PREVIEW_CLASS);
+		});
+		deletePreviewElementsRef.current = [];
+	}, []);
+	const showDeletePreview = useCallback((target) => {
+		clearDeletePreview();
+		editor.getEditorState().read(() => {
+			if (!tableCellNode.isAttached()) return;
+			const latestTableCellNode = tableCellNode.getLatest();
+			if (!$isTableCellNode(latestTableCellNode)) return;
+			const tableNode = $getTableNodeFromLexicalNodeOrThrow(latestTableCellNode);
+			const [gridMap] = $computeTableMapSkipCellCheck(tableNode, null, null);
+			const selection = $getSelection();
+			const previewCellKeys = /* @__PURE__ */ new Set();
+			if (target === "columns") {
+				const selectedColumns = $isTableSelection(selection) && selection.tableKey === tableNode.getKey() ? range(selection.getShape().fromX, selection.getShape().toX) : [];
+				const columnIndexes = selectedColumns.length > 0 ? selectedColumns : [$getTableColumnIndexFromTableCellNode(latestTableCellNode)];
+				for (const row of gridMap) for (const columnIndex of columnIndexes) {
+					const cell = row[columnIndex]?.cell;
+					if (cell) previewCellKeys.add(cell.getKey());
+				}
+			} else if (target === "rows") {
+				const selectedRows = $isTableSelection(selection) && selection.tableKey === tableNode.getKey() ? range(selection.getShape().fromY, selection.getShape().toY) : [];
+				const rowIndexes = selectedRows.length > 0 ? selectedRows : [$getTableRowIndexFromTableCellNode(latestTableCellNode)];
+				for (const rowIndex of rowIndexes) {
+					const row = gridMap[rowIndex];
+					if (!row) continue;
+					for (const mapCell of row) if (mapCell?.cell) previewCellKeys.add(mapCell.cell.getKey());
+				}
+			} else for (const row of gridMap) 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,
+		tableCellNode
+	]);
+	const renderDeleteMenuLabel = useCallback((label, target) => {
+		return /* @__PURE__ */ jsx("span", {
+			onMouseEnter: () => showDeletePreview(target),
+			onMouseLeave: clearDeletePreview,
+			style: { display: "block" },
+			children: label
+		});
+	}, [clearDeletePreview, showDeletePreview]);
+	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]);
+	useEffect(() => {
+		return () => {
+			clearDeletePreview();
+		};
+	}, [clearDeletePreview]);
+	useEffect(() => {
+		return editor.registerUpdateListener(() => {
+			clearDeletePreview();
+		});
+	}, [clearDeletePreview, 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(() => {
+		clearDeletePreview();
+		editor.update(() => {
+			$deleteTableRowAtSelection();
+		});
+	}, [clearDeletePreview, editor]);
+	const deleteTableAtSelection = useCallback(() => {
+		clearDeletePreview();
+		editor.update(() => {
+			$getTableNodeFromLexicalNodeOrThrow(tableCellNode).remove();
+			clearTableSelection();
+		});
+	}, [
+		clearDeletePreview,
+		editor,
+		tableCellNode,
+		clearTableSelection
+	]);
+	const deleteTableColumnAtSelection = useCallback(() => {
+		clearDeletePreview();
+		editor.update(() => {
+			$deleteTableColumnAtSelection();
+		});
+	}, [clearDeletePreview, 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: renderDeleteMenuLabel(t(`table.deleteColumn`), "columns"),
+					onClick: () => deleteTableColumnAtSelection()
+				},
+				{
+					icon: TableRowsSplitIcon,
+					key: "table-delete-rows",
+					label: renderDeleteMenuLabel(t(`table.deleteRow`), "rows"),
+					onClick: () => deleteTableRowAtSelection()
+				},
+				{ type: "divider" },
+				{
+					icon: Grid2X2XIcon,
+					key: "table-delete",
+					label: renderDeleteMenuLabel(t(`table.delete`), "table"),
+					onClick: () => deleteTableAtSelection()
+				}
+			];
+		}, [
+			cellMerge,
+			canMergeCells,
+			canUnmergeCell,
+			selectionCounts.rows,
+			selectionCounts.columns,
+			tableCellNode.__headerState,
+			mergeTableCellsAtSelection,
+			unmergeTableCellsAtSelection,
+			insertTableRowAtSelection,
+			insertTableColumnAtSelection,
+			deleteTableColumnAtSelection,
+			deleteTableRowAtSelection,
+			deleteTableAtSelection,
+			renderDeleteMenuLabel,
+			toggleTableRowIsHeader,
+			toggleTableColumnIsHeader
+		]) },
+		children
+	});
+});
+TableActionMenu.displayName = "TableActionMenu";
+//#endregion
+export { TableActionMenu as default };

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

@@ -0,0 +1,133 @@
+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 { $getNodeByKey, $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 anchorNode = $getNodeByKey(selection.anchor.key);
+			if (!anchorNode) return disable();
+			const tableCellNodeFromSelection = $getTableCellNodeFromLexicalNode(anchorNode);
+			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 selectionAnchorNode = $getNodeByKey(selection.anchor.key);
+			if (!selectionAnchorNode) return disable();
+			const anchorNode = $getTableCellNodeFromLexicalNode(selectionAnchorNode);
+			if (!$isTableCellNode(anchorNode)) return disable();
+			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();
+			setTableMenuCellNode(anchorNode);
+		} 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 };