@lobehub/editor 4.29.1 → 5.0.0-beta.1

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

@@ -1,4 +1,4 @@
-import { createStaticStyles } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/block/react/style.ts
 const ANCHOR_PADDING_CSS_VAR = "--lobe-block-anchor-padding";
 /**

package/es/plugins/code/react/CodeReactPlugin.js

@@ -3,8 +3,8 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { MarkdownPlugin } from "../../markdown/plugin/index.js";
 import { CodePlugin } from "../plugin/index.js";
 import { styles } from "./style.js";
+import { cx } from "@lobehub/ui";
 import { useLayoutEffect } from "react";
-import { cx } from "antd-style";
 //#region src/plugins/code/react/CodeReactPlugin.tsx
 const ReactCodePlugin = ({ className, enableHotkey = true }) => {
 	const [editor] = useLexicalComposerContext();

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

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

package/es/plugins/codeblock/react/ReactCodeblockPlugin.js

@@ -3,8 +3,8 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { MarkdownPlugin } from "../../markdown/plugin/index.js";
 import { CodeblockPlugin } from "../plugin/index.js";
 import { styles } from "./style.js";
+import { cx } from "@lobehub/ui";
 import { useLayoutEffect } from "react";
-import { cx } from "antd-style";
 //#region src/plugins/codeblock/react/ReactCodeblockPlugin.tsx
 const ReactCodeblockPlugin = ({ theme, shikiTheme }) => {
 	const [editor] = useLexicalComposerContext();

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

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

package/es/plugins/codemirror-block/react/CodemirrorNode.js

@@ -8,12 +8,10 @@ import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } fro
 import { useLexicalNodeSelection } from "../../../editor-kernel/react/useLexicalNodeSelection.js";
 import MermaidPreview from "./MermaidPreview.js";
 import { useCodemirrorEditLock } from "./useCodemirrorEditLock.js";
-import { ActionIcon } from "@lobehub/ui/base-ui";
+import { ActionIcon, Block, cx } from "@lobehub/ui";
 import { CodeXml, Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Block } from "@lobehub/ui";
-import { cx } from "antd-style";
 import { debounce } from "es-toolkit/compat";
 import { $getSelection, $setSelection, COMMAND_PRIORITY_CRITICAL, KEY_DOWN_COMMAND } from "lexical";
 import { mergeRegister } from "@lexical/utils";

package/es/plugins/codemirror-block/react/MermaidPreview.js

@@ -1,8 +1,7 @@
 "use client";
+import { Mermaid, cssVar } from "@lobehub/ui";
 import { useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Mermaid } from "@lobehub/ui";
-import { cssVar } from "antd-style";
 //#region src/plugins/codemirror-block/react/MermaidPreview.tsx
 const MermaidPreview = ({ code }) => {
 	const [error, setError] = useState(null);

package/es/plugins/collapsible/react/ReactCollapsiblePlugin.js

@@ -3,8 +3,8 @@ import { useLexicalComposerContext } from "../../../editor-kernel/react/react-co
 import { MarkdownPlugin } from "../../markdown/plugin/index.js";
 import { CollapsiblePlugin } from "../plugin/index.js";
 import { styles } from "./style.js";
+import { cx } from "@lobehub/ui";
 import { useLayoutEffect } from "react";
-import { cx } from "antd-style";
 //#region src/plugins/collapsible/react/ReactCollapsiblePlugin.tsx
 const ReactCollapsiblePlugin = ({ className }) => {
 	const [editor] = useLexicalComposerContext();

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

@@ -1,67 +1,77 @@
-import { css } from "antd-style";
+import { createStaticStyles } from "@lobehub/ui";
 //#region src/plugins/collapsible/react/style.ts
-const styles = css`
-  position: relative;
-  margin: 12px 0;
-  padding: 14px 16px 14px 42px;
-  border: 1px solid rgba(51, 103, 153, 0.72);
-  border-radius: 8px;
-
-  &[data-collapsible-collapsed='true'] {
-    padding-block: 10px;
-  }
-
-  [data-collapsible-toggle='true'] {
-    cursor: pointer;
-    position: absolute;
-    inset-block-start: 20px;
-    inset-inline-start: 16px;
-    width: 14px;
-    height: 14px;
-    padding: 0;
-    border: 0;
-    color: currentColor;
-    background: transparent;
-  }
-
-  &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true'] {
-    inset-block-start: 15px;
-  }
-
-  [data-collapsible-toggle='true']::before {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    margin: 3px 0 0 2px;
-    border-style: solid;
-  }
-
-  &[data-collapsible-collapsed='false'] > [data-collapsible-toggle='true']::before {
-    border-width: 7px 5px 0 5px;
-    border-color: currentColor transparent transparent transparent;
-  }
-
-  &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true']::before {
-    border-width: 5px 0 5px 7px;
-    border-color: transparent transparent transparent currentColor;
-  }
-
-  [data-collapsible-content='true'] > *:first-child {
-    margin-block-start: 0;
-  }
-
-  [data-collapsible-content='true'] > *:last-child {
-    margin-block-end: 0;
-  }
-
-  &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:first-child {
-    margin-block-end: 0;
-  }
-
-  &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:not(:first-child) {
-    display: none !important;
-  }
-`;
+const styles = createStaticStyles(({ css }) => css`
+    position: relative;
+
+    margin-block: 12px;
+    margin-inline: 0;
+    padding-block: 14px;
+    padding-inline: 42px 16px;
+    border: 1px solid rgb(51 103 153 / 72%);
+    border-radius: 8px;
+
+    &[data-collapsible-collapsed='true'] {
+      padding-block: 10px;
+    }
+
+    [data-collapsible-toggle='true'] {
+      cursor: pointer;
+
+      position: absolute;
+      inset-block-start: 20px;
+      inset-inline-start: 16px;
+
+      width: 14px;
+      height: 14px;
+      padding: 0;
+      border: 0;
+
+      color: currentcolor;
+
+      background: transparent;
+    }
+
+    &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true'] {
+      inset-block-start: 15px;
+    }
+
+    [data-collapsible-toggle='true']::before {
+      content: '';
+
+      display: block;
+
+      width: 0;
+      height: 0;
+      margin-block: 3px 0;
+      margin-inline: 2px 0;
+      border-style: solid;
+    }
+
+    &[data-collapsible-collapsed='false'] > [data-collapsible-toggle='true']::before {
+      border-color: currentcolor transparent transparent;
+      border-width: 7px 5px 0;
+    }
+
+    &[data-collapsible-collapsed='true'] > [data-collapsible-toggle='true']::before {
+      border-color: transparent transparent transparent currentcolor;
+      border-width: 5px 0 5px 7px;
+    }
+
+    [data-collapsible-content='true'] > *:first-child {
+      margin-block-start: 0;
+    }
+
+    [data-collapsible-content='true'] > *:last-child {
+      margin-block-end: 0;
+    }
+
+    &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:first-child {
+      margin-block-end: 0;
+    }
+
+    &[data-collapsible-collapsed='true'] > [data-collapsible-content='true'] > *:not(:first-child) {
+      display: none !important;
+    }
+  `);
 //#endregion
 export { styles };

package/es/plugins/common/data-source/json-data-source.js

@@ -1,18 +1,40 @@
-import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { $normalizeNodeIds, init_node_id, migrateSerializedNodeIds } from "../node/node-id.js";
 import { exportNodeToJSON, init_utils } from "../utils/index.js";
 import DataSource from "../../../editor-kernel/data-source.js";
 import { cursorNodeSerialized } from "../node/cursor.js";
-import { $parseSerializedNodeImpl } from "../../litexml/utils/index.js";
 import { $isTableSelection } from "@lexical/table";
-import { $getCharacterOffsets, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, IS_CODE, resetRandomKey } from "lexical";
+import { $getCharacterOffsets, $getNodeByKey, $getRoot, $getSelection, $isElementNode, $isRangeSelection, $isTextNode, IS_CODE } from "lexical";
 //#region src/plugins/common/data-source/json-data-source.ts
-init_helper();
+init_node_id();
 init_utils();
 var JSONDataSource = class extends DataSource {
 	read(editor, data, options = {}) {
-		let dataObj;
-		if (typeof data === "string") dataObj = JSON.parse(data);
-		else dataObj = data;
+		let inputData;
+		if (typeof data === "string") inputData = JSON.parse(data);
+		else inputData = data;
+		const dataObj = structuredClone(inputData);
+		if (!(options.keepId ?? dataObj.keepId ?? false)) {
+			const stripNodeIds = (node) => {
+				delete node.id;
+				const state = node.$;
+				if (state && typeof state === "object" && state.properties) {
+					const properties = { ...state.properties };
+					delete properties.nodeId;
+					if (Object.keys(properties).length > 0) node.$ = {
+						...state,
+						properties
+					};
+					else {
+						const nextState = { ...state };
+						delete nextState.properties;
+						if (Object.keys(nextState).length > 0) node.$ = nextState;
+						else delete node.$;
+					}
+				}
+				if (Array.isArray(node.children)) node.children.forEach((child) => stripNodeIds(child));
+			};
+			stripNodeIds(dataObj.root);
+		} else migrateSerializedNodeIds(dataObj.root);
 		const process = (node) => {
 			for (let i = 0; i < node.children.length; i++) {
 				const child = node.children[i];
@@ -34,24 +56,10 @@ var JSONDataSource = class extends DataSource {
 			}
 		};
 		process(dataObj.root);
-		if (dataObj.keepId || options.keepId) {
-			const state = editor.parseEditorState({ root: INodeHelper.createRootNode() }, (state) => {
-				try {
-					const root = $parseSerializedNodeImpl(dataObj.root, editor, true, state);
-					let maxId = -1;
-					Array.from(state._nodeMap.keys()).forEach((key) => {
-						if (key === "root") return;
-						const numericKey = Number(key);
-						if (Number.isInteger(numericKey) && numericKey >= 0) maxId = Math.max(maxId, numericKey);
-					});
-					resetRandomKey(maxId + 1);
-					state._nodeMap.set(root.getKey(), root);
-				} catch (error) {
-					console.error(error);
-				}
-			});
-			editor.setEditorState(state);
-		} else editor.setEditorState(editor.parseEditorState({ root: dataObj.root }));
+		const editorState = editor.parseEditorState({ root: dataObj.root }, () => {
+			$normalizeNodeIds($getRoot());
+		});
+		editor.setEditorState(editorState);
 	}
 	write(editor, options) {
 		if (options?.selection) return editor.getEditorState().read(() => {

package/es/plugins/common/data-source/text-data-source.js

@@ -1,8 +1,10 @@
 import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
+import { $normalizeNodeIds, init_node_id } from "../node/node-id.js";
 import DataSource from "../../../editor-kernel/data-source.js";
 import { $getRoot, $getSelection } from "lexical";
 //#region src/plugins/common/data-source/text-data-source.ts
 init_helper();
+init_node_id();
 var TextDataSource = class extends DataSource {
 	read(editor, data) {
 		if (typeof data !== "string") throw new Error("Invalid data type " + typeof data);
@@ -16,7 +18,10 @@ var TextDataSource = class extends DataSource {
 			}
 			INodeHelper.appendChild(rootNode, paragraph);
 		});
-		editor.setEditorState(editor.parseEditorState({ root: rootNode }));
+		const editorState = editor.parseEditorState({ root: rootNode }, () => {
+			$normalizeNodeIds($getRoot());
+		});
+		editor.setEditorState(editorState);
 	}
 	write(editor, options) {
 		if (options?.selection) return editor.getEditorState().read(() => {

package/es/plugins/common/index.d.ts

@@ -1,3 +1,5 @@
+import { $getNodeById, $getNodeId } from "./node/node-id.js";
+import { INodeIdentityService, NodeIdentitySnapshot } from "./service/i-node-identity-service.js";
 import { INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND } from "./command/index.js";
 import { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, cursorNodeSerialized } from "./node/cursor.js";
 import { CommonPlugin, CommonPluginOptions } from "./plugin/index.js";
@@ -5,4 +7,4 @@ import { ReactEditorContentProps, ReactPlainTextProps } from "./react/type.js";
 import ReactEditorContent from "./react/ReactEditorContent.js";
 import ReactPlainText from "./react/ReactPlainText.js";
 import "./react/index.js";
-export { $createCursorNode, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, CommonPlugin, CommonPluginOptions, INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND, ReactEditorContent, ReactEditorContentProps, ReactPlainText, ReactPlainTextProps, cursorNodeSerialized };
+export { $createCursorNode, $getNodeById, $getNodeId, $isCardLikeElementNode, $isCursorNode, CardLikeElementNode, CommonPlugin, CommonPluginOptions, INSERT_HEADING_COMMAND, INSERT_QUOTE_COMMAND, INodeIdentityService, type NodeIdentitySnapshot, ReactEditorContent, ReactEditorContentProps, ReactPlainText, ReactPlainTextProps, cursorNodeSerialized };

package/es/plugins/common/node/node-id.d.ts

@@ -0,0 +1,7 @@
+import { EditorState, LexicalEditor, LexicalNode } from "lexical";
+//#region src/plugins/common/node/node-id.d.ts
+declare function $getNodeId(node: LexicalNode): string | undefined;
+/** Find the active representation of a logical ID in a Lexical read/update context. */
+declare function $getNodeById(nodeId: string, root?: LexicalNode): LexicalNode | null;
+//#endregion
+export { $getNodeById, $getNodeId };