@lobehub/editor 4.29.1 → 5.0.0-beta.1

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

@@ -1,26 +1,22 @@
-import { $isElementNode, resetRandomKey } from "lexical";
+import { $clearNodeId, $getNodeId, $setNodeId, init_node_id, isValidContentNodeId } from "../../common/node/node-id.js";
+import { $isElementNode } from "lexical";
 //#region src/plugins/litexml/utils/index.ts
-const getNumericId = (id) => {
-	if (typeof id !== "number" && typeof id !== "string") return null;
-	const numericId = Number(id);
-	return Number.isInteger(numericId) && numericId >= 0 ? numericId : null;
-};
-function $parseSerializedNodeImpl(serializedNode, editor, keepId = false, state = null) {
+init_node_id();
+function $parseSerializedNodeImpl(serializedNode, editor) {
 	const type = serializedNode.type;
 	const registeredNode = editor._nodes.get(type);
 	if (registeredNode === void 0) throw new Error(`parseEditorState: type "${type}" not found`);
 	const nodeClass = registeredNode.klass;
 	if (serializedNode.type !== nodeClass.getType()) throw new Error(`LexicalNode: Node ${nodeClass.name} does not implement .importJSON().`);
-	if (keepId) {
-		const id = getNumericId(serializedNode.id);
-		if (id !== null) resetRandomKey(id);
-	}
 	const node = nodeClass.importJSON(serializedNode);
+	const nodeId = isValidContentNodeId(serializedNode.id) ? serializedNode.id : $getNodeId(node);
+	if (isValidContentNodeId(nodeId)) $setNodeId(node, nodeId);
+	else if (nodeId) $clearNodeId(node);
 	const children = serializedNode.children;
 	if ($isElementNode(node) && Array.isArray(children)) {
 		const childNodes = [];
 		for (const serializedJSONChildNode of children) {
-			const childNode = $parseSerializedNodeImpl(serializedJSONChildNode, editor, keepId, state);
+			const childNode = $parseSerializedNodeImpl(serializedJSONChildNode, editor);
 			childNodes.push(childNode);
 		}
 		node.append(...childNodes);
@@ -30,6 +26,7 @@ function $parseSerializedNodeImpl(serializedNode, editor, keepId = false, state
 function exportNodeToJSON(node) {
 	const serializedNode = node.exportJSON();
 	const nodeClass = node.constructor;
+	serializedNode.id = $getNodeId(node);
 	if (serializedNode.type !== nodeClass.getType()) throw new Error(`LexicalNode: Node ${nodeClass.name} does not match the serialized type. Check if .exportJSON() is implemented and it is returning the correct type.`);
 	if ($isElementNode(node)) {
 		const serializedChildren = serializedNode.children;
@@ -45,15 +42,5 @@ function exportNodeToJSON(node) {
 function $cloneNode(node, editor) {
 	return $parseSerializedNodeImpl(exportNodeToJSON(node), editor);
 }
-const maxId = 1679616;
-const startId = 1e6;
-const step = 7211;
-const modInverse = 1394051;
-function idToChar(id) {
-	return ((Number(id) * step + startId) % maxId).toString(36).padStart(4, "0");
-}
-function charToId(char) {
-	return String((parseInt(char, 36) - startId + maxId) * modInverse % maxId);
-}
 //#endregion
-export { $cloneNode, $parseSerializedNodeImpl, charToId, idToChar };
+export { $cloneNode, $parseSerializedNodeImpl };

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

@@ -1,9 +1,11 @@
 import { createDebugLogger, init_debug } from "../../../utils/debug.js";
+import { $findNodeById, $getNodeId, init_node_id } from "../../common/node/node-id.js";
 import { parseMarkdownToLexical } from "../data-source/markdown/parse.js";
 import { $generateNodesFromSerializedNodes, $insertGeneratedNodes } from "../utils/index.js";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_HIGH, HISTORIC_TAG, HISTORY_PUSH_TAG, createCommand } from "lexical";
+import { $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isRootNode, $isTextNode, COMMAND_PRIORITY_HIGH, HISTORIC_TAG, HISTORY_PUSH_TAG, createCommand } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 //#region src/plugins/markdown/command/index.ts
+init_node_id();
 init_debug();
 const logger = createDebugLogger("plugin", "markdown");
 const INSERT_MARKDOWN_COMMAND = createCommand("INSERT_MARKDOWN_COMMAND");
@@ -16,6 +18,74 @@ const SPICAL_TEXT = "￰";
 const getLineNumber = (content, charIndex) => {
 	return content.slice(0, Math.max(0, charIndex)).split("\n").length;
 };
+function getNodeReferenceForKey(editor, key) {
+	return editor.getEditorState().read(() => {
+		const node = $getNodeByKey(key);
+		if (!node) return null;
+		if ($isRootNode(node)) return { kind: "root" };
+		const id = $getNodeId(node);
+		return id ? {
+			id,
+			kind: "node"
+		} : null;
+	});
+}
+function getNodeKeyForReference(editor, reference, offset) {
+	return editor.getEditorState().read(() => {
+		if (reference.kind === "node") {
+			const node = $findNodeById(reference.id);
+			return node ? {
+				key: node.getKey(),
+				offset
+			} : void 0;
+		}
+		const root = $getRoot();
+		const findBoundaryText = (node, first) => {
+			if ($isTextNode(node)) return node;
+			if (!$isElementNode(node)) return null;
+			const children = node.getChildren();
+			const orderedChildren = first ? children : [...children].reverse();
+			for (const child of orderedChildren) {
+				const textNode = findBoundaryText(child, first);
+				if (textNode) return textNode;
+			}
+			return null;
+		};
+		if (offset === 0) {
+			const firstText = findBoundaryText(root, true);
+			if (firstText) return {
+				key: firstText.getKey(),
+				offset: 0
+			};
+		}
+		if (offset === root.getChildrenSize()) {
+			const lastText = findBoundaryText(root, false);
+			if (lastText) return {
+				key: lastText.getKey(),
+				offset: lastText.getTextContentSize()
+			};
+		}
+		return {
+			key: root.getKey(),
+			offset
+		};
+	}, { editor });
+}
+function mapSelectionToEditor(selection, sourceEditor, targetEditor) {
+	const startReference = getNodeReferenceForKey(sourceEditor, selection.startNodeId);
+	const endReference = getNodeReferenceForKey(sourceEditor, selection.endNodeId);
+	if (!startReference || !endReference) return null;
+	const startPoint = getNodeKeyForReference(targetEditor, startReference, selection.startOffset);
+	const endPoint = getNodeKeyForReference(targetEditor, endReference, selection.endOffset);
+	if (!startPoint || !endPoint) return null;
+	return {
+		...selection,
+		endNodeId: endPoint.key,
+		endOffset: endPoint.offset,
+		startNodeId: startPoint.key,
+		startOffset: startPoint.offset
+	};
+}
 function registerMarkdownCommand(editor, kernel, service) {
 	return mergeRegister(editor.registerCommand(INSERT_MARKDOWN_COMMAND, (payload) => {
 		const { markdown } = payload;
@@ -38,9 +108,12 @@ function registerMarkdownCommand(editor, kernel, service) {
 		return false;
 	}, COMMAND_PRIORITY_HIGH), editor.registerCommand(GET_MARKDOWN_SELECTION_COMMAND, (payload) => {
 		const newEditor = kernel.cloneNodeEditor();
-		const s = kernel.getSelection();
-		if (s) {
-			newEditor.setSelection(s);
+		const sourceEditor = kernel.getLexicalEditor();
+		const selection = kernel.getSelection();
+		const targetEditor = newEditor.getLexicalEditor();
+		const mappedSelection = sourceEditor && targetEditor && selection ? mapSelectionToEditor(selection, sourceEditor, targetEditor) : null;
+		if (mappedSelection && targetEditor) {
+			newEditor.setSelection(mappedSelection);
 			newEditor.getLexicalEditor()?.update(() => {
 				const sel = $getSelection();
 				if (!sel) return;

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

@@ -1,4 +1,5 @@
 import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { $normalizeNodeIds, init_node_id } from "../../common/node/node-id.js";
 import DataSource from "../../../editor-kernel/data-source.js";
 import { INodeService } from "../../inode/service/index.js";
 import { logger } from "../utils/logger.js";
@@ -10,6 +11,7 @@ import { remark } from "remark";
 import remarkGfm from "remark-gfm";
 //#region src/plugins/markdown/data-source/markdown-data-source.ts
 init_helper();
+init_node_id();
 var MarkdownDataSource = class extends DataSource {
 	formatMarkdown(markdown) {
 		try {
@@ -37,7 +39,10 @@ var MarkdownDataSource = class extends DataSource {
 		const inode = { root: parseMarkdownToLexical(data, this.markdownService.markdownReaders) };
 		this.getService?.(INodeService)?.processNodeTree(inode);
 		logger.debug("Parsed Lexical State:", inode);
-		editor.setEditorState(editor.parseEditorState(inode));
+		const editorState = editor.parseEditorState(inode, () => {
+			$normalizeNodeIds($getRoot());
+		});
+		editor.setEditorState(editorState);
 	}
 	write(editor, options) {
 		if (options?.selection) return editor.getEditorState().read(() => {

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

@@ -3,8 +3,8 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { INodePlugin } from "../../inode/plugin/index.js";
 import { MarkdownPlugin } from "../plugin/index.js";
 import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
-import { useLayoutEffect } from "react";
 import { toast } from "@lobehub/ui";
+import { useLayoutEffect } from "react";
 //#region src/plugins/markdown/react/index.tsx
 const ReactMarkdownPlugin = () => {
 	const [editor] = useLexicalComposerContext();

package/es/plugins/math/react/components/MathEditorContainer.js

@@ -1,8 +1,8 @@
 import { cleanPosition, updatePosition } from "../../../../utils/updatePosition.js";
 import { styles } from "../style.js";
+import { Flexbox, Popover } from "@lobehub/ui";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Flexbox, Popover } from "@lobehub/ui";
 //#region src/plugins/math/react/components/MathEditorContainer.tsx
 const MathEditorContainer = memo(({ children, isBlockMode, mathDOM, onFocus, prev }) => {
 	const anchorRef = useRef(null);

package/es/plugins/math/react/components/MathEditorContent.js

@@ -1,10 +1,9 @@
 import { CONTROL_OR_META, init_sys } from "../../../../common/sys.js";
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { styles } from "../style.js";
-import { Button, Text, TextArea } from "@lobehub/ui/base-ui";
+import { Button, Flexbox, Hotkey, Text, TextArea } from "@lobehub/ui";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, Hotkey } from "@lobehub/ui";
 import { isModifierMatch } from "lexical";
 import { renderToString } from "katex";
 //#region src/plugins/math/react/components/MathEditorContent.tsx

package/es/plugins/math/react/components/Placeholder.js

@@ -1,9 +1,7 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { styles } from "../style.js";
-import { Text } from "@lobehub/ui/base-ui";
+import { Center, Text, cx } from "@lobehub/ui";
 import { jsx } from "react/jsx-runtime";
-import { Center } from "@lobehub/ui";
-import { cx } from "antd-style";
 //#region src/plugins/math/react/components/Placeholder.tsx
 const Placeholder = ({ mathBlock }) => {
 	const t = useTranslation();

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

@@ -1,4 +1,4 @@
-import { createStaticStyles, cx } from "antd-style";
+import { createStaticStyles, cx } from "@lobehub/ui";
 //#region src/plugins/math/react/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => {
 	const latex = css`

package/es/plugins/mention/react/components/Mention.js

@@ -1,7 +1,7 @@
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
+import { cx } from "@lobehub/ui";
 import { useCallback, useEffect, useRef } from "react";
 import { jsxs } from "react/jsx-runtime";
-import { cx } from "antd-style";
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
 //#region src/plugins/mention/react/components/Mention.tsx
 const Mention = ({ node, editor, className }) => {

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/mention/react/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({ mention: css`
     user-select: none;

package/es/plugins/slash/react/components/DefaultSlashMenu.js

@@ -1,10 +1,9 @@
 "use client";
 import { flattenSlashOptions, isSlashDividerOption, isSlashSectionOption } from "../../service/i-slash-service.js";
 import { shouldShowLoadingPlaceholder } from "./menuLoading.js";
+import { Icon, LOBE_THEME_APP_ID, createStaticStyles, menuSharedStyles } from "@lobehub/ui";
 import { isValidElement, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon, LOBE_THEME_APP_ID, menuSharedStyles } from "@lobehub/ui";
-import { createStaticStyles } from "antd-style";
 import { createPortal } from "react-dom";
 import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
 //#region src/plugins/slash/react/components/DefaultSlashMenu.tsx

package/es/plugins/slash/service/i-slash-service.d.ts

@@ -1,14 +1,14 @@
 import { IEditor, IServiceID } from "../../../types/kernel.js";
 import "../../../types/index.js";
 import "../utils/utils.js";
+import { MenuItemType } from "@lobehub/ui";
 import { ReactNode } from "react";
-import { DropdownMenuItemType } from "@lobehub/ui";
 import Fuse, { IFuseOptions } from "fuse.js";
 //#region src/plugins/slash/service/i-slash-service.d.ts
 type ISlashDividerOption = {
   type: 'divider';
 };
-interface ISlashMenuOption extends DropdownMenuItemType {
+interface ISlashMenuOption extends MenuItemType {
   description?: ReactNode;
   layout?: 'compact' | 'tile' | 'wide';
   metadata?: Record<string, any>;

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

@@ -1,9 +1,9 @@
 import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { $canUnmerge, $selectLastDescendant, computeSelectionCount, currentCellBackgroundColor } from "./utils.js";
+import { DropdownMenu } 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 { DropdownMenu } from "@lobehub/ui";
 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

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

@@ -2,7 +2,7 @@ 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/base-ui";
+import { ActionIcon } from "@lobehub/ui";
 import { ChevronDown } from "lucide-react";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/table/react/TableActionMenu/style.ts
 const styles = createStaticStyles(({ css }) => ({
 	actionIcon: css`

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

@@ -6,9 +6,9 @@ import { styles } from "./TableController/style.js";
 import { createTableDragImage } from "./TableController/utils.js";
 import TableControllerMenu from "./TableControllerMenu.js";
 import TableInsertButton from "./TableInsertButton.js";
+import { cx } from "@lobehub/ui";
 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/TableColController.tsx
 const INSERT_BUTTON_HIDE_DELAY = 160;

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#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%)`;

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

@@ -1,12 +1,12 @@
+import { LOBE_THEME_APP_ID, cx } from "@lobehub/ui";
 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;
+	return document.querySelector(`#${LOBE_THEME_APP_ID}`) || document.body;
 };
 const getButtonStyle = (reference, position, offset = 0, gap) => {
 	if (!reference) return {};

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

@@ -1,7 +1,7 @@
 import { styles } from "./TableController/style.js";
+import { LOBE_THEME_APP_ID, cx } from "@lobehub/ui";
 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;
@@ -12,7 +12,7 @@ const isSeparatorItem = (item) => {
 };
 const getPortalContainer = () => {
 	if (typeof document === "undefined") return null;
-	return document.querySelector(".ant-app") || document.body;
+	return document.querySelector(`#${LOBE_THEME_APP_ID}`) || document.body;
 };
 const getMenuStyle = (anchorElement, items, position, menuElement) => {
 	if (!anchorElement || typeof window === "undefined") return {};

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

@@ -2,11 +2,10 @@ import { useLexicalComposerContext } from "../../../../editor-kernel/react/react
 import { useAnchor } from "../../../../editor-kernel/react/useAnchor.js";
 import { styles } from "./style.js";
 import { getMouseInfo, useDebounce } from "./utils.js";
-import { ActionIcon } from "@lobehub/ui/base-ui";
+import { ActionIcon, cx } 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";

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/table/react/TableHoverActions/style.ts
 const styles = createStaticStyles(({ css }) => {
 	return {

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

@@ -1,9 +1,9 @@
 import { createDefaultTableColWidths, syncTableWidthDOM } from "../../utils/index.js";
 import { styles } from "./style.js";
 import { getCellColumnIndex, getCellNodeHeight } from "./utils.js";
+import { LOBE_THEME_APP_ID, cssVar, cx } from "@lobehub/ui";
 import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { cssVar, cx } from "antd-style";
 import { $computeTableMapSkipCellCheck, $getTableNodeFromLexicalNodeOrThrow, $getTableRowIndexFromTableCellNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableNode, getDOMCellFromTarget, getTableElement } from "@lexical/table";
 import { $getNearestNodeFromDOMNode, $getNodeByKey, HISTORIC_TAG, SKIP_SCROLL_INTO_VIEW_TAG, isHTMLElement } from "lexical";
 import { calculateZoomLevel, mergeRegister } from "@lexical/utils";
@@ -317,7 +317,7 @@ const TableCellResize = memo(({ editor, eventEmitter, resizeMode }) => {
 });
 var TableResize_default = memo(({ editor, eventEmitter, resizeMode }) => {
 	if (typeof document === "undefined") return null;
-	const container = document.querySelector(".ant-app") || document.body;
+	const container = document.querySelector(`#${LOBE_THEME_APP_ID}`) || document.body;
 	return createPortal(/* @__PURE__ */ jsx(TableCellResize, {
 		editor,
 		eventEmitter,

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/table/react/TableResize/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => {
 	return css`

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

@@ -5,9 +5,9 @@ import { styles } from "./TableController/style.js";
 import { createTableDragImage } from "./TableController/utils.js";
 import TableControllerMenu from "./TableControllerMenu.js";
 import TableInsertButton from "./TableInsertButton.js";
+import { cx } from "@lobehub/ui";
 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;

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

@@ -14,9 +14,9 @@ import TableResize_default from "./TableResize/index.js";
 import TableRowController from "./TableRowController.js";
 import { useAutoFitPastedTable } from "./useAutoFitPastedTable.js";
 import { useScrollFocusedTableCellIntoView } from "./useScrollFocusedTableCellIntoView.js";
+import { cx } from "@lobehub/ui";
 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";

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/table/react/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => css`
     position: relative;

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

@@ -6,10 +6,9 @@ import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command/index.j
 import { getDOMRangeRect } from "../utils/getDOMRangeRect.js";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition.js";
 import { styles } from "./style.js";
+import { Block, LOBE_THEME_APP_ID, cx, useThemeMode } from "@lobehub/ui";
 import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Block, LOBE_THEME_APP_ID } from "@lobehub/ui";
-import { cx, useThemeMode } from "antd-style";
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 import { createPortal } from "react-dom";

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/toolbar/react/style.ts
 const FLOATING_TOOLBAR_Z_INDEX = 1001;
 const styles = createStaticStyles(({ css, cssVar }) => ({

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

@@ -5,6 +5,7 @@ import { hydrateLexicalFromYjsState, syncCurrentEditorStateToYjs } from "./utils
 import { IYjsService, YjsService } from "../service/index.js";
 import { getAwarenessUsers } from "./utils/awareness.js";
 import { registerYjsHistory } from "./utils/history.js";
+import { isNodeIdReconciliationOrigin, reconcileSharedNodeIds } from "./utils/node-identity.js";
 import { $getRoot, COLLABORATION_TAG, COMMAND_PRIORITY_CRITICAL, SKIP_COLLAB_TAG } from "lexical";
 import { UndoManager } from "yjs";
 import { CONNECTED_COMMAND, TOGGLE_CONNECT_COMMAND, createBinding, syncLexicalUpdateToYjs, syncYjsChangesToLexical } from "@lexical/yjs";
@@ -89,7 +90,8 @@ const YjsPlugin = class extends KernelPlugin {
 				return;
 			}
 			if (binding.root.isEmpty() && binding.root._xmlText._length > 0) {
-				hydrateLexicalFromYjsState(binding);
+				hydrateLexicalFromYjsState(binding, { discrete: true });
+				reconcileSharedNodeIds(binding);
 				return;
 			}
 			this.bootstrapCurrentEditorState?.();
@@ -122,8 +124,8 @@ const YjsPlugin = class extends KernelPlugin {
 	}
 	registerYjsTreeSync(binding, provider) {
 		const onYjsTreeChanges = (events, transaction) => {
-			if (transaction.origin === binding) return;
-			syncYjsChangesToLexical(binding, provider, events, transaction.origin instanceof UndoManager, () => void 0);
+			if (transaction.origin === binding || isNodeIdReconciliationOrigin(binding, transaction.origin)) return;
+			syncYjsChangesToLexical(binding, provider, events, transaction.origin instanceof UndoManager, () => reconcileSharedNodeIds(binding));
 		};
 		binding.root.getSharedType().observeDeep(onYjsTreeChanges);
 		this.register(() => {

package/es/plugins/yjs/plugin/utils/editor-state.js

@@ -1,5 +1,7 @@
+import { $normalizeNodeIds, init_node_id, migrateSerializedNodeIds } from "../../../common/node/node-id.js";
 import { $createParagraphNode, $getRoot, HISTORY_MERGE_TAG, SKIP_COLLAB_TAG } from "lexical";
 //#region src/plugins/yjs/plugin/utils/editor-state.ts
+init_node_id();
 function initializeEditor(editor, initialEditorState, options = {}) {
 	const { discrete, skipIfNotEmpty = true, tag = HISTORY_MERGE_TAG } = options;
 	const updateOptions = Object.keys({
@@ -13,7 +15,12 @@ function initializeEditor(editor, initialEditorState, options = {}) {
 		if (editor.getEditorState().read(() => {
 			return skipIfNotEmpty && !$getRoot().isEmpty();
 		})) return;
-		editor.setEditorState(typeof initialEditorState === "string" ? editor.parseEditorState(initialEditorState) : initialEditorState, updateOptions);
+		const serializedState = typeof initialEditorState === "string" ? JSON.parse(initialEditorState) : initialEditorState.toJSON();
+		migrateSerializedNodeIds(serializedState.root);
+		const parsedState = editor.parseEditorState(serializedState, () => {
+			$normalizeNodeIds($getRoot());
+		});
+		editor.setEditorState(parsedState, updateOptions);
 		return;
 	}
 	editor.update(() => {

package/es/plugins/yjs/plugin/utils/node-identity.js

@@ -0,0 +1,106 @@
+import { $getNodeIdentityPolicy, init_node_identity_policy } from "../../../common/node/node-identity-policy.js";
+import { $getNodeId, $normalizeNodeIds, init_node_id } from "../../../common/node/node-id.js";
+import { $getRoot, $isElementNode, COLLABORATION_TAG, HISTORIC_TAG } from "lexical";
+import { Map as Map$1, createRelativePositionFromTypeIndex } from "yjs";
+//#region src/plugins/yjs/plugin/utils/node-identity.ts
+init_node_id();
+init_node_identity_policy();
+const reconciliationOrigins = /* @__PURE__ */ new WeakMap();
+function getReconciliationOrigin(binding) {
+	let origin = reconciliationOrigins.get(binding);
+	if (!origin) {
+		origin = { type: "lobe-editor-node-id-reconciliation" };
+		reconciliationOrigins.set(binding, origin);
+	}
+	return origin;
+}
+function isNodeIdReconciliationOrigin(binding, origin) {
+	const reconciliationOrigin = reconciliationOrigins.get(binding);
+	return reconciliationOrigin !== void 0 && origin === reconciliationOrigin;
+}
+function getSharedNodeState(sharedType) {
+	const state = sharedType instanceof Map$1 ? sharedType.get("__state") : sharedType.getAttribute("__state");
+	return state instanceof Map$1 ? state : void 0;
+}
+function setSharedNodeState(sharedType, state) {
+	if (sharedType instanceof Map$1) sharedType.set("__state", state);
+	else sharedType.setAttribute("__state", state);
+}
+function getStableSharedIdentity(binding, node) {
+	const sharedType = binding.collabNodeMap.get(node.getKey())?.getSharedType();
+	if (!sharedType) return void 0;
+	const id = createRelativePositionFromTypeIndex(sharedType, 0).type;
+	if (!id) return void 0;
+	return `${id.client.toString(36).padStart(7, "0")}:${id.clock.toString(36).padStart(11, "0")}`;
+}
+function hasRepairableSharedIdIssues(binding) {
+	const editor = binding.editor;
+	return editor.getEditorState().read(() => {
+		const policy = $getNodeIdentityPolicy();
+		const groups = /* @__PURE__ */ new Map();
+		let hasMappedMissingId = false;
+		const visit = (node) => {
+			if (policy.isIdentityNode(node)) {
+				const nodeId = $getNodeId(node);
+				if (!nodeId) {
+					if (getStableSharedIdentity(binding, node)) hasMappedMissingId = true;
+				} else {
+					const group = groups.get(nodeId) || [];
+					group.push(node);
+					groups.set(nodeId, group);
+				}
+			}
+			if ($isElementNode(node)) node.getChildren().forEach(visit);
+		};
+		visit($getRoot());
+		if (hasMappedMissingId) return true;
+		for (const group of groups.values()) {
+			if (group.length < 2 || group.length === 2 && policy.canShareId(group[0], group[1])) continue;
+			const identities = group.map((node) => getStableSharedIdentity(binding, node));
+			if (identities.every((identity) => Boolean(identity)) && new Set(identities).size === identities.length) return true;
+		}
+		return false;
+	}, { editor });
+}
+function writeRepairedNodeIds(binding, repairs) {
+	if (repairs.length === 0) return;
+	binding.doc.transact(() => {
+		for (const repair of repairs) {
+			const sharedType = binding.collabNodeMap.get(repair.nodeKey)?.getSharedType();
+			if (!sharedType) continue;
+			const existingState = getSharedNodeState(sharedType);
+			const state = existingState ?? new Map$1();
+			const currentProperties = existingState?.get("properties");
+			const properties = currentProperties && typeof currentProperties === "object" && !Array.isArray(currentProperties) ? currentProperties : {};
+			state.set("properties", {
+				...properties,
+				nodeId: repair.nodeId
+			});
+			if (!existingState) setSharedNodeState(sharedType, state);
+		}
+	}, getReconciliationOrigin(binding));
+}
+/** Repair shared ID collisions only after the binding has mapped their Yjs types. */
+function reconcileSharedNodeIds(binding) {
+	if (!hasRepairableSharedIdIssues(binding)) return;
+	const repairs = [];
+	binding.editor.update(() => {
+		$normalizeNodeIds($getRoot(), {
+			onRepair: (node, previousId, nodeId) => {
+				if (previousId !== nodeId) repairs.push({
+					nodeId,
+					nodeKey: node.getKey()
+				});
+			},
+			stableDuplicateRepair: true,
+			stableOwnershipKey: (node) => getStableSharedIdentity(binding, node)
+		});
+	}, {
+		discrete: true,
+		onUpdate: () => writeRepairedNodeIds(binding, repairs),
+		skipTransforms: true,
+		tag: [COLLABORATION_TAG, HISTORIC_TAG]
+	});
+}
+//#endregion
+export { isNodeIdReconciliationOrigin, reconcileSharedNodeIds };