@lobehub/editor 4.24.1 → 4.25.0

package/es/plugins/litexml/react/TableRowDiffToolbar.js

@@ -0,0 +1,123 @@
+import { $isTableRowDiffNode } from "../node/TableRowDiffNode.js";
+import { LITEXML_DIFFNODE_COMMAND } from "../command/symbols.js";
+import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
+import { styles } from "./DiffNodeToolbar/style.js";
+import { ActionIcon, Block } from "@lobehub/ui";
+import { Check, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemeMode } from "antd-style";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { createPortal } from "react-dom";
+//#region src/plugins/litexml/react/TableRowDiffToolbar.tsx
+const TableRowDiffToolbar = ({ editor }) => {
+	const [activeRow, setActiveRow] = useState(null);
+	const hideTimerRef = useRef(void 0);
+	const toolbarRef = useRef(null);
+	const t = useTranslation();
+	const { isDarkMode } = useThemeMode();
+	const clearHideTimer = useCallback(() => {
+		if (hideTimerRef.current) clearTimeout(hideTimerRef.current);
+	}, []);
+	const scheduleHide = useCallback(() => {
+		clearHideTimer();
+		hideTimerRef.current = setTimeout(() => setActiveRow(null), 120);
+	}, [clearHideTimer]);
+	useEffect(() => {
+		const root = editor.getRootElement();
+		if (!root) return;
+		const onPointerOver = (event) => {
+			const target = event.target;
+			if (!(target instanceof Element)) return;
+			const row = target.closest("tr[data-diff-type]");
+			if (!row || !root.contains(row)) return;
+			const nodeKey = editor.read(() => {
+				const node = $getNearestNodeFromDOMNode(row);
+				return $isTableRowDiffNode(node) ? node.getKey() : null;
+			});
+			if (!nodeKey) return;
+			clearHideTimer();
+			const rect = row.getBoundingClientRect();
+			setActiveRow({
+				left: Math.max(8, rect.right - 72),
+				nodeKey,
+				top: Math.max(8, rect.top + 4)
+			});
+		};
+		const onPointerOut = (event) => {
+			const related = event.relatedTarget;
+			if (related instanceof Element && (related.closest("tr[data-diff-type]") || toolbarRef.current?.contains(related))) return;
+			scheduleHide();
+		};
+		root.addEventListener("pointerover", onPointerOver);
+		root.addEventListener("pointerout", onPointerOut);
+		return () => {
+			clearHideTimer();
+			root.removeEventListener("pointerover", onPointerOver);
+			root.removeEventListener("pointerout", onPointerOut);
+		};
+	}, [
+		clearHideTimer,
+		editor,
+		scheduleHide
+	]);
+	if (!activeRow || typeof document === "undefined") return null;
+	const dispatch = (action) => {
+		editor.dispatchCommand(LITEXML_DIFFNODE_COMMAND, {
+			action,
+			nodeKey: activeRow.nodeKey
+		});
+		setActiveRow(null);
+	};
+	const handleActionPointerDown = (event, action) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dispatch(action);
+	};
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		contentEditable: false,
+		onPointerEnter: clearHideTimer,
+		onPointerLeave: scheduleHide,
+		ref: toolbarRef,
+		style: {
+			left: activeRow.left,
+			pointerEvents: "auto",
+			position: "fixed",
+			top: activeRow.top,
+			zIndex: 10002
+		},
+		children: /* @__PURE__ */ jsxs(Block, {
+			className: isDarkMode ? styles.toolbarDark : styles.toolbarLight,
+			gap: 2,
+			horizontal: true,
+			padding: 2,
+			shadow: true,
+			variant: "outlined",
+			children: [/* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": "Reject row change",
+				className: styles.reject,
+				danger: true,
+				icon: X,
+				onPointerDown: (event) => handleActionPointerDown(event, 0),
+				size: {
+					blockSize: 28,
+					size: 16
+				},
+				title: t("modifier.reject")
+			}), /* @__PURE__ */ jsx(ActionIcon, {
+				"aria-label": "Accept row change",
+				className: styles.accept,
+				icon: Check,
+				onPointerDown: (event) => handleActionPointerDown(event, 1),
+				size: {
+					blockSize: 28,
+					size: 16
+				},
+				title: t("modifier.accept")
+			})]
+		})
+	}), document.body);
+};
+TableRowDiffToolbar.displayName = "TableRowDiffToolbar";
+//#endregion
+export { TableRowDiffToolbar as default };

package/es/plugins/litexml/react/hooks/useHasDiffNode.js

@@ -4,7 +4,10 @@ function hasDiffNode(editor) {
 	if (!editor) return false;
 	const values = editor.getLexicalEditor()?.getEditorState()._nodeMap.values();
 	if (!values) return false;
-	for (const node of values) if (node.getType() === "diff") return true;
+	for (const node of values) {
+		const nodeType = node.getType();
+		if (nodeType === "diff" || nodeType === "table-row-diff") return true;
+	}
 	return false;
 }
 function useHasDiffNode(editor) {
@@ -32,4 +35,4 @@ function useHasDiffNode(editor) {
 	return { hasDiff };
 }
 //#endregion
-export { useHasDiffNode };
+export { hasDiffNode, useHasDiffNode };

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

@@ -3,12 +3,14 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { INodePlugin } from "../../inode/plugin/index.js";
 import { LitexmlPlugin } from "../plugin/index.js";
 import ReactDiffNodeToolbar from "./DiffNodeToolbar/index.js";
-import { styles } from "./style.js";
+import { styles, tableCellDiffStyles, tableRowDiffStyles } from "./style.js";
+import TableRowDiffToolbar from "./TableRowDiffToolbar.js";
 import { useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/plugins/litexml/react/index.tsx
 const ReactLiteXmlPlugin = () => {
 	const [editor] = useLexicalComposerContext();
+	const lexicalEditor = editor.getLexicalEditor();
 	useLayoutEffect(() => {
 		editor.registerPlugin(INodePlugin);
 		editor.registerPlugin(LitexmlPlugin, {
@@ -16,10 +18,12 @@ const ReactLiteXmlPlugin = () => {
 				editor,
 				node
 			}),
+			tableRowDiffTheme: tableRowDiffStyles,
+			tableCellDiffTheme: tableCellDiffStyles,
 			theme: styles
 		});
 	}, [editor]);
-	return null;
+	return lexicalEditor ? /* @__PURE__ */ jsx(TableRowDiffToolbar, { editor: lexicalEditor }) : null;
 };
 ReactLiteXmlPlugin.displayName = "ReactLiteXmlPlugin";
 //#endregion

package/es/plugins/litexml/react/style.js

@@ -3,17 +3,17 @@ import { createStaticStyles } from "antd-style";
 const styles = createStaticStyles(({ css, cssVar }) => css`
     position: relative;
 
-    .toolbar {
+    > .toolbar {
       position: absolute;
       z-index: 10;
-      inset-block-end: 0;
-      inset-inline-end: 8px;
+      inset-block-start: 0;
+      inset-inline-start: 8px;
 
       opacity: 0;
     }
 
     &:hover {
-      .toolbar {
+      > .toolbar {
         opacity: 1;
       }
     }
@@ -120,5 +120,18 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
       }
     }
   `);
+const tableRowDiffStyles = createStaticStyles(({ css, cssVar }) => css`
+    &[data-diff-type='remove'] {
+      color: ${cssVar.colorTextQuaternary};
+      text-decoration: line-through;
+      background: ${cssVar.colorErrorBg};
+    }
+
+    &[data-diff-type='add'] {
+      background: ${cssVar.colorSuccessBg};
+      box-shadow: inset 3px 0 0 ${cssVar.colorSuccess};
+    }
+  `);
+const tableCellDiffStyles = tableRowDiffStyles;
 //#endregion
-export { styles };
+export { styles, tableCellDiffStyles, tableRowDiffStyles };

package/es/plugins/litexml/table-cell-diff.js

@@ -0,0 +1,153 @@
+import { $createDiffNode, DiffNode } from "./node/DiffNode.js";
+import { $createTableCellDiffNode, TableCellDiffNode } from "./node/TableCellDiffNode.js";
+import { $cloneNode } from "./utils/index.js";
+import { $createTableCellNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableNode } from "@lexical/table";
+import { $nodesOfType } from "lexical";
+//#region src/plugins/litexml/table-cell-diff.ts
+function copyCellStructure(source, target) {
+	target.setRowSpan(source.getRowSpan());
+	target.setBackgroundColor(source.getBackgroundColor());
+	target.setVerticalAlign(source.getVerticalAlign());
+}
+function $createTableCellDiffFromCell(editor, cell, diffType, changeId) {
+	const diffCell = $createTableCellDiffNode(diffType, changeId, cell.getHeaderStyles(), cell.getColSpan(), cell.getWidth());
+	copyCellStructure(cell, diffCell);
+	const diff = $createDiffNode(diffType);
+	diff.append(...cell.getChildren().map((child) => $cloneNode(child, editor)));
+	diffCell.append(diff);
+	return diffCell;
+}
+function $createPlainTableCellFromDiff(editor, cell) {
+	const plainCell = $createTableCellNode(cell.getHeaderStyles(), cell.getColSpan(), cell.getWidth());
+	copyCellStructure(cell, plainCell);
+	const diff = cell.getFirstChild();
+	if (diff instanceof DiffNode) plainCell.append(...diff.getChildren().map((child) => $cloneNode(child, editor)));
+	else plainCell.append(...cell.getChildren().map((child) => $cloneNode(child, editor)));
+	return plainCell;
+}
+function $getTableForCell(cell) {
+	const row = cell.getParent();
+	if (!$isTableRowNode(row)) return null;
+	const table = row.getParent();
+	return $isTableNode(table) ? table : null;
+}
+function $getTableCellColumnIndex(cell) {
+	const row = cell.getParent();
+	if (!$isTableRowNode(row)) return -1;
+	let index = 0;
+	for (const sibling of row.getChildren()) {
+		if (sibling === cell) return index;
+		if ($isTableCellNode(sibling)) index += sibling.getColSpan();
+	}
+	return -1;
+}
+function $getLogicalRowWidth(cell) {
+	const row = cell.getParent();
+	if (!$isTableRowNode(row)) return 0;
+	return row.getChildren().reduce((total, child) => total + ($isTableCellNode(child) ? child.getColSpan() : 0), 0);
+}
+function $getTableCellDiffGroup(cell) {
+	const changeId = cell.getChangeId();
+	const table = $getTableForCell(cell);
+	if (!changeId || !table) return [cell];
+	return $nodesOfType(TableCellDiffNode).filter((candidate) => candidate.getChangeId() === changeId && candidate.getDiffType() === cell.getDiffType() && $getTableForCell(candidate) === table);
+}
+function $updateTableWidthsForCellInsertion(table, rowWidthBefore, columnIndex, insertedSpan) {
+	const currentWidths = table.getColWidths() || Array.from({ length: rowWidthBefore }, () => 250);
+	if (rowWidthBefore < currentWidths.length) return;
+	const fallback = currentWidths[Math.max(0, columnIndex - 1)] || 250;
+	const next = [...currentWidths];
+	next.splice(columnIndex, 0, ...Array.from({ length: insertedSpan }, () => fallback));
+	table.setColWidths(next);
+}
+function $removeTableWidthsForCompleteCellGroup(table, group, columnIndex, span) {
+	const rows = table.getChildren().filter($isTableRowNode);
+	const rowKeys = new Set(group.map((cell) => cell.getParent()?.getKey()));
+	if (rows.length !== rowKeys.size) return;
+	const widths = table.getColWidths();
+	if (!widths) return;
+	const next = [...widths];
+	next.splice(columnIndex, span);
+	table.setColWidths(next);
+}
+function $shrinkTableWidthsAfterCellRemoval(table, columnIndex, span) {
+	const widths = table.getColWidths();
+	if (!widths) return;
+	if (table.getChildren().reduce((max, row) => {
+		if (!$isTableRowNode(row)) return max;
+		return Math.max(max, row.getChildren().reduce((total, cell) => total + ($isTableCellNode(cell) ? cell.getColSpan() : 0), 0));
+	}, 0) > widths.length - span) return;
+	const next = [...widths];
+	next.splice(columnIndex, span);
+	table.setColWidths(next);
+}
+function $getMaximumLogicalColumnCount(table) {
+	return table.getChildren().reduce((maximum, row) => {
+		if (!$isTableRowNode(row)) return maximum;
+		const columnCount = row.getChildren().reduce((total, cell) => {
+			return total + ($isTableCellNode(cell) ? cell.getColSpan() : 0);
+		}, 0);
+		return Math.max(maximum, columnCount);
+	}, 0);
+}
+function $hasLegacyTableCellDiffs() {
+	return $nodesOfType(DiffNode).some((diff) => {
+		return (diff.diffType === "add" || diff.diffType === "remove") && $isTableRowNode(diff.getParent()) && diff.getChildren().some($isTableCellNode);
+	});
+}
+function $hasIncompleteTableWidths() {
+	return $nodesOfType(TableNode).some((table) => {
+		return (table.getColWidths()?.length || 0) < $getMaximumLogicalColumnCount(table);
+	});
+}
+/**
+* Migrates the old `TableRow > DiffNode > TableCellNode` representation into
+* cell-shaped diff nodes and makes sure the table has a width for every
+* logical column. Safe to call repeatedly.
+*/
+function $normalizeLegacyTableCellDiffs(editor) {
+	let changed = false;
+	$nodesOfType(DiffNode).forEach((legacyDiff) => {
+		const diffType = legacyDiff.diffType;
+		if (diffType !== "add" && diffType !== "remove" || !$isTableRowNode(legacyDiff.getParent())) return;
+		const cells = legacyDiff.getChildren().filter($isTableCellNode);
+		if (cells.length === 0) return;
+		const changeId = `legacy-table-cell-${legacyDiff.getKey()}`;
+		cells.forEach((cell) => {
+			legacyDiff.insertBefore($createTableCellDiffFromCell(editor, cell, diffType, changeId));
+		});
+		legacyDiff.remove();
+		changed = true;
+	});
+	$nodesOfType(TableNode).forEach((table) => {
+		const requiredWidthCount = $getMaximumLogicalColumnCount(table);
+		const currentWidths = table.getColWidths() || [];
+		if (currentWidths.length >= requiredWidthCount) return;
+		const fallback = currentWidths.at(-1) || 250;
+		table.setColWidths([...currentWidths, ...Array.from({ length: requiredWidthCount - currentWidths.length }, () => fallback)]);
+		changed = true;
+	});
+	return changed;
+}
+function registerLegacyTableCellDiffNormalization(editor) {
+	let destroyed = false;
+	let scheduled = false;
+	const unregister = editor.registerUpdateListener(() => {
+		if (scheduled || destroyed) return;
+		scheduled = true;
+		queueMicrotask(() => {
+			scheduled = false;
+			if (destroyed) return;
+			if (!editor.getEditorState().read(() => $hasLegacyTableCellDiffs() || $hasIncompleteTableWidths())) return;
+			editor.update(() => {
+				$normalizeLegacyTableCellDiffs(editor);
+			}, { discrete: true });
+		});
+	});
+	return () => {
+		destroyed = true;
+		unregister();
+	};
+}
+//#endregion
+export { $createPlainTableCellFromDiff, $createTableCellDiffFromCell, $getLogicalRowWidth, $getTableCellColumnIndex, $getTableCellDiffGroup, $getTableForCell, $normalizeLegacyTableCellDiffs, $removeTableWidthsForCompleteCellGroup, $shrinkTableWidthsAfterCellRemoval, $updateTableWidthsForCellInsertion, registerLegacyTableCellDiffNormalization };

package/es/plugins/litexml/table-row-diff.js

@@ -0,0 +1,82 @@
+import { $cloneNode } from "./utils/index.js";
+import { $createTableRowDiffNode, TableRowDiffNode } from "./node/TableRowDiffNode.js";
+import { $createTableRowNode, $isTableCellNode, $isTableNode } from "@lexical/table";
+import { $nodesOfType } from "lexical";
+//#region src/plugins/litexml/table-row-diff.ts
+function $areTableRowStructuresCompatible(previousRow, nextRow) {
+	const previousCells = previousRow.getChildren();
+	const nextCells = nextRow.getChildren();
+	if (previousCells.length !== nextCells.length || !previousCells.every($isTableCellNode) || !nextCells.every($isTableCellNode)) return false;
+	return previousCells.every((previousCell, index) => {
+		const nextCell = nextCells[index];
+		return $isTableCellNode(nextCell) && previousCell.getColSpan() === nextCell.getColSpan() && previousCell.getRowSpan() === nextCell.getRowSpan();
+	});
+}
+function $createTableRowDiffFromRow(editor, row, diffType, changeId) {
+	const source = $cloneNode(row, editor);
+	const diffRow = $createTableRowDiffNode(diffType, changeId, row.getHeight());
+	diffRow.append(...source.getChildren());
+	return diffRow;
+}
+function $createPlainTableRowFromDiff(editor, row) {
+	const plainRow = $createTableRowNode(row.getHeight());
+	plainRow.append(...row.getChildren().map((child) => $cloneNode(child, editor)));
+	return plainRow;
+}
+function $getTableRowDiffPair(node) {
+	const changeId = node.getChangeId();
+	if (!changeId) return null;
+	const matchingRows = $nodesOfType(TableRowDiffNode).filter((candidate) => candidate.getChangeId() === changeId);
+	if (matchingRows.length !== 2) return null;
+	const remove = matchingRows.find((candidate) => candidate.getDiffType() === "remove");
+	const add = matchingRows.find((candidate) => candidate.getDiffType() === "add");
+	if (!remove || !add) return null;
+	const parent = remove.getParent();
+	if (!$isTableNode(parent) || add.getParent() !== parent || remove.getNextSibling() !== add || !$areTableRowStructuresCompatible(remove, add)) return null;
+	return {
+		add,
+		remove
+	};
+}
+function $normalizeTableRowDiffPairs() {
+	const rows = $nodesOfType(TableRowDiffNode);
+	const groups = /* @__PURE__ */ new Map();
+	rows.forEach((row) => {
+		const changeId = row.getChangeId();
+		if (!changeId) return;
+		const group = groups.get(changeId) || [];
+		group.push(row);
+		groups.set(changeId, group);
+	});
+	let changed = false;
+	groups.forEach((group) => {
+		if (group.length === 2 ? $getTableRowDiffPair(group[0]) : null) return;
+		group.forEach((row) => row.setChangeId());
+		changed = true;
+	});
+	return changed;
+}
+function registerTableRowDiffNormalization(editor) {
+	let destroyed = false;
+	let scheduled = false;
+	const unregister = editor.registerUpdateListener(() => {
+		if (scheduled || destroyed) return;
+		scheduled = true;
+		queueMicrotask(() => {
+			scheduled = false;
+			if (destroyed) return;
+			if (!editor.getEditorState().read(() => {
+				return $nodesOfType(TableRowDiffNode).some((row) => row.getChangeId() && !$getTableRowDiffPair(row));
+			})) return;
+			editor.update(() => {
+				$normalizeTableRowDiffPairs();
+			});
+		});
+	});
+	return () => {
+		destroyed = true;
+		unregister();
+	};
+}
+//#endregion
+export { $areTableRowStructuresCompatible, $createPlainTableRowFromDiff, $createTableRowDiffFromRow, $getTableRowDiffPair, $normalizeTableRowDiffPairs, registerTableRowDiffNormalization };

package/es/plugins/markdown/data-source/markdown/parse.js

@@ -72,8 +72,29 @@ function convertMdastToLexical(node, index, ctx, markdownReaders = {}, parentTyp
 							return ret;
 						}
 						if (child.value.startsWith("<!--") && child.value.endsWith("-->")) return ret;
-						const tag = child.value.replaceAll(/^<\/?|>$/g, "");
+						const tag = getHtmlTagName(child.value);
 						const isEndTag = child.value.startsWith("</");
+						const pairedTag = child.value.match(/^<\s*([a-z0-9-]+)\b[^>]*>([\s\S]*)<\/\s*\1\s*>$/i);
+						if (!isEndTag && pairedTag) {
+							const reader = markdownReaders["html"];
+							const htmlChildren = pairedTag[2] ? [INodeHelper.createTextNode(pairedTag[2])] : [];
+							if (Array.isArray(reader)) for (const element of reader) {
+								const inode = element(child, htmlChildren, index);
+								if (inode) {
+									ret.push(inode);
+									return ret;
+								}
+							}
+							else if (typeof reader === "function") {
+								const inode = reader(child, htmlChildren, index);
+								if (inode) {
+									ret.push(inode);
+									return ret;
+								}
+							}
+							ret.push(INodeHelper.createTextNode(child.value));
+							return ret;
+						}
 						if (selfClosingHtmlTags.has(tag)) {
 							const reader = markdownReaders["html"];
 							if (Array.isArray(reader)) for (const element of reader) {
@@ -160,6 +181,9 @@ function convertMdastToLexical(node, index, ctx, markdownReaders = {}, parentTyp
 		}
 	}
 }
+function getHtmlTagName(value) {
+	return value.match(/^<\/?\s*([a-z0-9-]+)/i)?.[1]?.toLowerCase() || value.replaceAll(/^<\/?|>$/g, "");
+}
 function registerDefaultReaders(markdownReaders) {
 	if (!markdownReaders["root"]) markdownReaders["root"] = (node, children) => {
 		return {

package/es/plugins/markdown/plugin/index.js

@@ -13,6 +13,7 @@ init_plugin();
 init_debug();
 const DEFAULT_PASTE_MARKDOWN_AUTO_CONVERT_THRESHOLD = 5;
 const RICH_HTML_SELECTOR = "strong,em,b,i,h1,h2,h3,h4,h5,h6,ul,ol,table,img,blockquote,pre>code,a[href]";
+const normalizeMarkdownForClipboard = (markdown) => markdown.replace(/\r?\n$/, "");
 const MARKDOWN_DETECTION_RULES = [
 	{
 		name: "headers",
@@ -209,8 +210,9 @@ const MarkdownPlugin = class extends KernelPlugin {
 			if (!clipboardData) return false;
 			const selection = $getSelection();
 			if (!selection || selection.isCollapsed()) return false;
-			const markdown = this.markdownDataSource.write(editor, { selection: true });
-			if (!markdown) return false;
+			const rawMarkdown = this.markdownDataSource.write(editor, { selection: true });
+			if (!rawMarkdown) return false;
+			const markdown = normalizeMarkdownForClipboard(rawMarkdown);
 			event.preventDefault();
 			const data = $getClipboardDataFromSelection(selection);
 			setLexicalClipboardDataTransfer(clipboardData, data);
@@ -283,4 +285,4 @@ const MarkdownPlugin = class extends KernelPlugin {
 	}
 };
 //#endregion
-export { MarkdownPlugin };
+export { MarkdownPlugin, normalizeMarkdownForClipboard };

package/es/plugins/slash/react/ReactSlashPlugin.js

@@ -3,13 +3,14 @@ import { init_utils, noop } from "../../../editor-kernel/utils.js";
 import { useLexicalComposerContext } from "../../../editor-kernel/react/react-context.js";
 import { useLexicalEditor } from "../../../editor-kernel/react/useLexicalEditor.js";
 import { $splitNodeContainingQuery } from "../utils/utils.js";
-import { ISlashService, flattenSlashOptions } from "../service/i-slash-service.js";
+import { ISlashService } from "../service/i-slash-service.js";
 import { SlashPlugin } from "../plugin/index.js";
 import SlashMenu from "./components/SlashMenu.js";
+import { findSlashOptionByKey, getNextSlashActiveKey, getNextSlashSpatialActiveKey } from "./menu-utils.js";
 import { setCancelablePromise } from "./utils.js";
 import { Children, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from "lexical";
+import { COMMAND_PRIORITY_CRITICAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, KEY_DOWN_COMMAND, KEY_ESCAPE_COMMAND, KEY_TAB_COMMAND } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/slash/react/ReactSlashPlugin.tsx
 init_utils();
@@ -36,12 +37,10 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 	const handleActiveKeyChange = useCallback((key) => {
 		setActiveKey(key);
 	}, []);
-	const setInitialActiveKey = useCallback((items) => {
-		if (!activeKey) {
-			const firstOption = flattenSlashOptions(items)[0];
-			setActiveKey(firstOption?.key ? String(firstOption.key) : null);
-		}
-	}, [activeKey]);
+	const updateMenuOptions = useCallback((items) => {
+		setOptions(items);
+		setActiveKey(getNextSlashActiveKey(items, null, "forward"));
+	}, []);
 	useLayoutEffect(() => {
 		const options = Children.map(children, (child) => {
 			if (!child) return null;
@@ -58,18 +57,14 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 			triggerOpen: (ctx) => {
 				setResolution(ctx);
 				cancelRef.current.cancel();
-				if (Array.isArray(ctx.items)) {
-					setOptions(ctx.items);
-					setInitialActiveKey(ctx.items);
-				} else {
+				if (Array.isArray(ctx.items)) updateMenuOptions(ctx.items);
+				else {
 					setLoading(true);
 					const pr = setCancelablePromise((resolve, reject) => {
 						ctx.items(ctx.match || null).then(resolve, reject).finally(() => setLoading(false));
 					});
 					pr.promise.then((items) => {
-						const typedItems = items;
-						setOptions(typedItems);
-						setInitialActiveKey(typedItems);
+						updateMenuOptions(items);
 					});
 					cancelRef.current.cancel = () => {
 						pr.cancel();
@@ -89,7 +84,7 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 	}, [
 		editor,
 		close,
-		setInitialActiveKey
+		updateMenuOptions
 	]);
 	useLayoutEffect(() => {
 		const slash = editor.requireService(ISlashService);
@@ -118,30 +113,15 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 		close
 	]);
 	useLexicalEditor(() => {
-		const pureOptions = flattenSlashOptions(options).filter((item) => Boolean(item.key));
-		return mergeRegister(editor.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (payload) => {
-			const event = payload;
-			if (pureOptions !== null && pureOptions.length) {
-				const currentIndex = activeKey ? pureOptions.findIndex((opt) => opt.key === activeKey) : -1;
-				const newIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % pureOptions.length;
-				setActiveKey(String(pureOptions[newIndex].key));
-				event.preventDefault();
-				event.stopImmediatePropagation();
-				return true;
-			}
-			return false;
-		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ARROW_UP_COMMAND, (payload) => {
-			const event = payload;
-			if (pureOptions !== null && pureOptions.length) {
-				const currentIndex = activeKey ? pureOptions.findIndex((opt) => opt.key === activeKey) : -1;
-				const newIndex = currentIndex === -1 ? pureOptions.length - 1 : (currentIndex - 1 + pureOptions.length) % pureOptions.length;
-				setActiveKey(String(pureOptions[newIndex].key));
-				event.preventDefault();
-				event.stopImmediatePropagation();
-				return true;
-			}
-			return false;
-		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ESCAPE_COMMAND, (payload) => {
+		const activateSpatialSibling = (event, direction) => {
+			const nextKey = getNextSlashSpatialActiveKey(options, activeKey, direction);
+			if (!nextKey) return false;
+			setActiveKey(nextKey);
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return true;
+		};
+		return mergeRegister(editor.registerHighCommand(KEY_ARROW_DOWN_COMMAND, (payload) => activateSpatialSibling(payload, "down"), COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ARROW_UP_COMMAND, (payload) => activateSpatialSibling(payload, "up"), COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ARROW_RIGHT_COMMAND, (payload) => activateSpatialSibling(payload, "right"), COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ARROW_LEFT_COMMAND, (payload) => activateSpatialSibling(payload, "left"), COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_ESCAPE_COMMAND, (payload) => {
 			const event = payload;
 			event.preventDefault();
 			event.stopImmediatePropagation();
@@ -150,7 +130,7 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 		}, COMMAND_PRIORITY_CRITICAL), editor.registerHighCommand(KEY_TAB_COMMAND, (payload) => {
 			const event = payload;
 			if (options === null || activeKey === null) return false;
-			const selectedOption = flattenSlashOptions(options).find((opt) => opt.key === activeKey);
+			const selectedOption = findSlashOptionByKey(options, activeKey);
 			if (!selectedOption) return false;
 			event.preventDefault();
 			event.stopImmediatePropagation();
@@ -161,7 +141,7 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 				event.preventDefault();
 				event.stopImmediatePropagation();
 				if (options !== null && activeKey !== null) {
-					const selectedOption = flattenSlashOptions(options).find((opt) => opt.key === activeKey);
+					const selectedOption = findSlashOptionByKey(options, activeKey);
 					if (selectedOption) handleMenuSelect(selectedOption);
 				}
 				return true;
@@ -171,7 +151,6 @@ const ReactSlashPlugin = ({ children, anchorClassName, getPopupContainer, placem
 	}, [
 		options,
 		activeKey,
-		handleActiveKeyChange,
 		handleMenuSelect,
 		isOpen
 	]);