@lobehub/editor 4.8.5 → 4.9.0

package/es/react.d.ts

@@ -1,4 +1,4 @@
-import { P as IEditor$1, S as ReactPlainTextProps, V as _default, a as ReactSlashOptionProps, g as ReactMentionPluginProps, i as MenuRenderProps, x as ReactEditorContentProps } from "./index-BfKEHYDe.js";
+import { P as IEditor$1, S as ReactPlainTextProps, V as _default, a as ReactSlashOptionProps, g as ReactMentionPluginProps, i as MenuRenderProps, x as ReactEditorContentProps } from "./index-BXj6uAM3.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as _$react from "react";
 import { CSSProperties, ComponentProps, FC, ReactNode, Ref } from "react";

package/es/react.js

@@ -1,15 +1,15 @@
-import { A as $createCodeMirrorNode, B as Editor$2, Bt as $isRootTextContentEmpty, S as formatUrl, T as $isSelectionInCodeInline, Ut as init_utils, a as $createMathBlockNode, d as $isLinkHighlightNode, h as $isLinkNode, j as $isCodeMirrorNode, mt as noop, o as $createMathInlineNode, x as TOGGLE_LINK_COMMAND } from "./style-Tlcvrhqp.js";
-import { C as ReactEditorContent, J as ReactEditor, N as ReactMarkdownPlugin, S as ReactPlainText, a as ReactMentionPlugin, b as INSERT_CODEINLINE_COMMAND, c as INSERT_CHECK_LIST_COMMAND, f as extractUrlFromText, h as validateUrl, m as sanitizeUrl, n as ReactSlashOption, t as ReactSlashPlugin, u as INSERT_LINK_HIGHLIGHT_COMMAND, y as UPDATE_CODEBLOCK_LANG } from "./ReactSlashPlugin-BZvB0g1k.js";
+import { A as $createCodeMirrorNode, B as Editor$2, Bt as $isRootTextContentEmpty, S as formatUrl, T as $isSelectionInCodeInline, Ut as init_utils, a as $createMathBlockNode, d as $isLinkHighlightNode, h as $isLinkNode, j as $isCodeMirrorNode, mt as noop, o as $createMathInlineNode, x as TOGGLE_LINK_COMMAND } from "./style-DAKdXzC4.js";
+import { C as ReactPlainText, E as ReactMarkdownPlugin, Y as ReactEditor, _ as UPDATE_CODEBLOCK_LANG, a as ReactMentionPlugin, c as INSERT_LINK_HIGHLIGHT_COMMAND, f as sanitizeUrl, n as ReactSlashOption, p as validateUrl, t as ReactSlashPlugin, u as extractUrlFromText, w as ReactEditorContent, x as INSERT_CODEINLINE_COMMAND, y as INSERT_CHECK_LIST_COMMAND } from "./ReactSlashPlugin-Dn5VWUzS.js";
 import { $createNodeSelection, $createParagraphNode, $getSelection, $isParagraphNode, $isRangeSelection, $isRootOrShadowRoot, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";
 import { $createQuoteNode, $isHeadingNode, $isQuoteNode } from "@lexical/rich-text";
 import { $findMatchingParent, $getNearestNodeOfType, mergeRegister } from "@lexical/utils";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, createElement, isValidElement, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { ActionIcon, Block, Button, Dropdown, Flexbox, Icon, MaterialFileTypeIcon, Menu, Popover, Select, Text, TooltipGroup, useMotionComponent } from "@lobehub/ui";
-import { $createCodeNode, $isCodeNode } from "@lexical/code-core";
-import { createStaticStyles, cssVar, cx, useThemeMode } from "antd-style";
 import { $isAtNodeEnd, $setBlocksType } from "@lexical/selection";
 import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, ListNode } from "@lexical/list";
+import { $createCodeNode, $isCodeNode } from "@lexical/code-core";
+import { ActionIcon, Block, Button, Dropdown, Flexbox, Icon, MaterialFileTypeIcon, Menu, Popover, Select, Text, TooltipGroup, useMotionComponent } from "@lobehub/ui";
+import { createStaticStyles, cssVar, cx, useThemeMode } from "antd-style";
 import { ChevronDownIcon, CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from "lucide-react";
 import { createPortal } from "react-dom";
 import { bundledLanguagesInfo } from "shiki";

package/es/renderer.js

@@ -1,18 +1,18 @@
-import { E as CodeNode, L as CursorNode, M as CodeMirrorNode, O as styles, _ as AutoLinkNode, b as LinkNode, c as MathBlockNode, f as LinkHighlightNode, i as MentionNode, l as MathInlineNode, t as styles$1 } from "./style-Tlcvrhqp.js";
-import { S as PlaceholderNode, a as styles$5, b as DiffNode, c as ImageNode, d as BlockImageNode, h as styles$6, m as HorizontalRuleNode, n as styles$4, r as styles$2, t as styles$3, v as FileNode, x as PlaceholderBlockNode } from "./style-B7Vfm0cE.js";
+import { E as CodeNode, L as CursorNode, M as CodeMirrorNode, O as styles, _ as AutoLinkNode, b as LinkNode, c as MathBlockNode, f as LinkHighlightNode, i as MentionNode, l as MathInlineNode, t as styles$1 } from "./style-DAKdXzC4.js";
+import { S as DiffNode, _ as PlaceholderNode, a as styles$5, b as HorizontalRuleNode, c as ImageNode, d as BlockImageNode, f as styles$6, g as PlaceholderBlockNode, h as FileNode, n as styles$4, r as styles$2, t as styles$3 } from "./style-CcDKrOoJ.js";
+import { createHeadlessEditor } from "@lexical/headless";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import { $getRoot, $isElementNode, $isTextNode } from "lexical";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement, useMemo } from "react";
-import { Highlighter, Mermaid } from "@lobehub/ui";
+import { ListItemNode, ListNode } from "@lexical/list";
 import katex from "katex";
+import { Highlighter, Mermaid } from "@lobehub/ui";
 import { createStaticStyles, cx } from "antd-style";
-import { ListItemNode, ListNode } from "@lexical/list";
+import { bundledLanguagesInfo } from "shiki";
 import { createHighlighterCoreSync, isSpecialLang } from "@shikijs/core";
 import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
-import { bundledLanguagesInfo } from "shiki";
-import { createHeadlessEditor } from "@lexical/headless";
 //#region src/renderer/engine/shiki.ts
 let _highlighter = null;
 function getHighlighter() {

package/es/{style-B7Vfm0cE.js → style-CcDKrOoJ.js}

@@ -1,93 +1,7 @@
-import { I as CardLikeElementNode, ht as reconcileDecorator, ot as getKernelFromEditor, st as getKernelFromEditorConfig, ut as init_utils } from "./style-Tlcvrhqp.js";
+import { I as CardLikeElementNode, ht as reconcileDecorator, ot as getKernelFromEditor, st as getKernelFromEditorConfig, ut as init_utils } from "./style-DAKdXzC4.js";
 import { $applyNodeReplacement, DecoratorNode, ElementNode } from "lexical";
 import { addClassNamesToElement } from "@lexical/utils";
 import { createStaticStyles, cx } from "antd-style";
-//#region src/plugins/auto-complete/node/placeholderNode.ts
-var PlaceholderNode = class PlaceholderNode extends ElementNode {
-	static getType() {
-		return "PlaceholderInline";
-	}
-	static clone(node) {
-		return new PlaceholderNode(node.__key);
-	}
-	static importJSON(serializedNode) {
-		return $createPlaceholderNode().updateFromJSON(serializedNode);
-	}
-	createDOM(config) {
-		const element = document.createElement("span");
-		element.setAttribute("data-lexical-key", this.getKey());
-		addClassNamesToElement(element, config.theme.placeholderInline);
-		return element;
-	}
-	updateDOM(prevNode, dom, config) {
-		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderInline);
-		return false;
-	}
-	canBeEmpty() {
-		return false;
-	}
-	isCardLike() {
-		return true;
-	}
-	isInline() {
-		return true;
-	}
-	canIndent() {
-		return false;
-	}
-	canInsertTextBefore() {
-		return true;
-	}
-	canInsertTextAfter() {
-		return true;
-	}
-};
-var PlaceholderBlockNode = class PlaceholderBlockNode extends ElementNode {
-	static getType() {
-		return "PlaceholderBlock";
-	}
-	static clone(node) {
-		return new PlaceholderBlockNode(node.__key);
-	}
-	static importJSON(serializedNode) {
-		return $createPlaceholderBlockNode().updateFromJSON(serializedNode);
-	}
-	createDOM(config) {
-		const element = document.createElement("div");
-		element.setAttribute("data-lexical-key", this.getKey());
-		addClassNamesToElement(element, config.theme.placeholderBlock);
-		return element;
-	}
-	updateDOM(prevNode, dom, config) {
-		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderBlock);
-		return false;
-	}
-	canBeEmpty() {
-		return false;
-	}
-	isCardLike() {
-		return true;
-	}
-	isInline() {
-		return false;
-	}
-	canIndent() {
-		return false;
-	}
-	canInsertTextBefore() {
-		return false;
-	}
-	canInsertTextAfter() {
-		return false;
-	}
-};
-function $createPlaceholderNode() {
-	return $applyNodeReplacement(new PlaceholderNode());
-}
-function $createPlaceholderBlockNode() {
-	return $applyNodeReplacement(new PlaceholderBlockNode());
-}
-//#endregion
 //#region src/plugins/litexml/node/DiffNode.ts
 init_utils();
 /** DiffNode - contains two block children: original and modified */
@@ -179,6 +93,147 @@ function $createDiffNode(diffType = "unchanged") {
 	return $applyNodeReplacement(new DiffNode(diffType));
 }
 //#endregion
+//#region src/plugins/hr/node/HorizontalRuleNode.ts
+init_utils();
+var HorizontalRuleNode = class HorizontalRuleNode extends DecoratorNode {
+	static getType() {
+		return "horizontalrule";
+	}
+	static clone(node) {
+		return new HorizontalRuleNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createHorizontalRuleNode().updateFromJSON(serializedNode);
+	}
+	static importDOM() {
+		return { hr: () => ({
+			conversion: $convertHorizontalRuleElement,
+			priority: 0
+		}) };
+	}
+	exportDOM() {
+		return { element: document.createElement("hr") };
+	}
+	createDOM(config) {
+		const element = document.createElement("div");
+		addClassNamesToElement(element, config.theme.hr);
+		return element;
+	}
+	getTextContent() {
+		return "\n";
+	}
+	isInline() {
+		return false;
+	}
+	updateDOM() {
+		return false;
+	}
+	decorate(editor) {
+		const decorator = getKernelFromEditor(editor)?.getDecorator("horizontalrule");
+		if (!decorator) return null;
+		if (typeof decorator === "function") return decorator(this, editor);
+		return {
+			queryDOM: decorator.queryDOM,
+			render: decorator.render(this, editor)
+		};
+	}
+};
+function $createHorizontalRuleNode() {
+	return $applyNodeReplacement(new HorizontalRuleNode());
+}
+function $convertHorizontalRuleElement() {
+	return { node: $createHorizontalRuleNode() };
+}
+function $isHorizontalRuleNode(node) {
+	return node.getType() === HorizontalRuleNode.getType();
+}
+//#endregion
+//#region src/plugins/auto-complete/node/placeholderNode.ts
+var PlaceholderNode = class PlaceholderNode extends ElementNode {
+	static getType() {
+		return "PlaceholderInline";
+	}
+	static clone(node) {
+		return new PlaceholderNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createPlaceholderNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		const element = document.createElement("span");
+		element.setAttribute("data-lexical-key", this.getKey());
+		addClassNamesToElement(element, config.theme.placeholderInline);
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderInline);
+		return false;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isCardLike() {
+		return true;
+	}
+	isInline() {
+		return true;
+	}
+	canIndent() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return true;
+	}
+	canInsertTextAfter() {
+		return true;
+	}
+};
+var PlaceholderBlockNode = class PlaceholderBlockNode extends ElementNode {
+	static getType() {
+		return "PlaceholderBlock";
+	}
+	static clone(node) {
+		return new PlaceholderBlockNode(node.__key);
+	}
+	static importJSON(serializedNode) {
+		return $createPlaceholderBlockNode().updateFromJSON(serializedNode);
+	}
+	createDOM(config) {
+		const element = document.createElement("div");
+		element.setAttribute("data-lexical-key", this.getKey());
+		addClassNamesToElement(element, config.theme.placeholderBlock);
+		return element;
+	}
+	updateDOM(prevNode, dom, config) {
+		if ((prevNode ? prevNode : null) !== this) addClassNamesToElement(dom, config.theme.placeholderBlock);
+		return false;
+	}
+	canBeEmpty() {
+		return false;
+	}
+	isCardLike() {
+		return true;
+	}
+	isInline() {
+		return false;
+	}
+	canIndent() {
+		return false;
+	}
+	canInsertTextBefore() {
+		return false;
+	}
+	canInsertTextAfter() {
+		return false;
+	}
+};
+function $createPlaceholderNode() {
+	return $applyNodeReplacement(new PlaceholderNode());
+}
+function $createPlaceholderBlockNode() {
+	return $applyNodeReplacement(new PlaceholderBlockNode());
+}
+//#endregion
 //#region src/plugins/file/node/FileNode.ts
 init_utils();
 var FileNode = class FileNode extends DecoratorNode {
@@ -311,61 +366,6 @@ const styles$4 = createStaticStyles(({ css, cssVar }) => ({ file: css`
     }
   ` }));
 //#endregion
-//#region src/plugins/hr/node/HorizontalRuleNode.ts
-init_utils();
-var HorizontalRuleNode = class HorizontalRuleNode extends DecoratorNode {
-	static getType() {
-		return "horizontalrule";
-	}
-	static clone(node) {
-		return new HorizontalRuleNode(node.__key);
-	}
-	static importJSON(serializedNode) {
-		return $createHorizontalRuleNode().updateFromJSON(serializedNode);
-	}
-	static importDOM() {
-		return { hr: () => ({
-			conversion: $convertHorizontalRuleElement,
-			priority: 0
-		}) };
-	}
-	exportDOM() {
-		return { element: document.createElement("hr") };
-	}
-	createDOM(config) {
-		const element = document.createElement("div");
-		addClassNamesToElement(element, config.theme.hr);
-		return element;
-	}
-	getTextContent() {
-		return "\n";
-	}
-	isInline() {
-		return false;
-	}
-	updateDOM() {
-		return false;
-	}
-	decorate(editor) {
-		const decorator = getKernelFromEditor(editor)?.getDecorator("horizontalrule");
-		if (!decorator) return null;
-		if (typeof decorator === "function") return decorator(this, editor);
-		return {
-			queryDOM: decorator.queryDOM,
-			render: decorator.render(this, editor)
-		};
-	}
-};
-function $createHorizontalRuleNode() {
-	return $applyNodeReplacement(new HorizontalRuleNode());
-}
-function $convertHorizontalRuleElement() {
-	return { node: $createHorizontalRuleNode() };
-}
-function $isHorizontalRuleNode(node) {
-	return node.getType() === HorizontalRuleNode.getType();
-}
-//#endregion
 //#region src/plugins/image/node/basie-image-node.ts
 var BaseImageNode = class BaseImageNode extends DecoratorNode {
 	static clone(node) {
@@ -996,4 +996,4 @@ const styles = createStaticStyles(({ css, cssVar }) => css`
     }
   `);
 //#endregion
-export { PlaceholderNode as S, $isFileNode as _, styles$3 as a, DiffNode as b, ImageNode as c, BlockImageNode as d, $createHorizontalRuleNode as f, $createFileNode as g, styles$4 as h, imageBroken as i, $createBlockImageNode as l, HorizontalRuleNode as m, styles$1 as n, $createImageNode as o, $isHorizontalRuleNode as p, styles$2 as r, $isImageNode as s, styles as t, $isBlockImageNode as u, FileNode as v, PlaceholderBlockNode as x, $createDiffNode as y };
+export { DiffNode as S, PlaceholderNode as _, styles$3 as a, HorizontalRuleNode as b, ImageNode as c, BlockImageNode as d, styles$4 as f, PlaceholderBlockNode as g, FileNode as h, imageBroken as i, $createBlockImageNode as l, $isFileNode as m, styles$1 as n, $createImageNode as o, $createFileNode as p, styles$2 as r, $isImageNode as s, styles as t, $isBlockImageNode as u, $createHorizontalRuleNode as v, $createDiffNode as x, $isHorizontalRuleNode as y };

package/es/{style-Tlcvrhqp.js → style-DAKdXzC4.js}

@@ -1,3 +1,4 @@
+import { createHeadlessEditor } from "@lexical/headless";
 import { createEmptyHistoryState } from "@lexical/history";
 import { $createTableSelection, $isTableCellNode, $isTableNode, $isTableSelection } from "@lexical/table";
 import { get, merge, template, templateSettings } from "es-toolkit/compat";
@@ -990,6 +991,7 @@ var init_kernel = __esmMin((() => {
 			this.hotReloadMode = false;
 			this.logger = createDebugLogger("kernel");
 			this.historyState = createEmptyHistoryState();
+			this.headlessEditor = false;
 			this._commands = /* @__PURE__ */ new Map();
 			this._commandsClean = /* @__PURE__ */ new Map();
 			this.dataTypeMap = /* @__PURE__ */ new Map();
@@ -1042,7 +1044,11 @@ var init_kernel = __esmMin((() => {
 		destroy() {
 			unregisterEditorKernel(this.themes[EDITOR_THEME_KEY]);
 			this.logger.info(`🗑️ Destroying editor with ${this.pluginsInstances.length} plugins`);
-			this.editor?.setEditorState(createEmptyEditorState());
+			try {
+				this.editor?.setEditorState(createEmptyEditorState());
+			} catch (error) {
+				this.logger.warn("Failed to reset editor state during destroy:", error);
+			}
 			this.dataTypeMap.clear();
 			this.pluginsInstances.forEach((plugin) => {
 				if (plugin.destroy) plugin.destroy();
@@ -1051,13 +1057,16 @@ var init_kernel = __esmMin((() => {
 			this.serviceMap.clear();
 			this.decorators = {};
 			this.themes = {};
+			this.headlessEditor = false;
 			this.logger.info("✅ Editor destroyed");
 		}
 		getRootElement() {
+			if (this.headlessEditor) return null;
 			return this.editor?.getRootElement() || null;
 		}
 		setRootElement(dom, editable = true) {
 			if (this.editor) {
+				if (this.headlessEditor) throw new Error("Headless editor cannot be attached to a root element.");
 				this.logger.warn("[Editor] Editor is already initialized, updating root element only");
 				this.editor.setRootElement(dom);
 				return this.editor;
@@ -1082,6 +1091,7 @@ var init_kernel = __esmMin((() => {
 				},
 				theme: this.themes
 			});
+			this.headlessEditor = false;
 			this.editor.setRootElement(dom);
 			registerEvent(editor, dom);
 			this.pluginsInstances.forEach((plugin) => {
@@ -1120,6 +1130,7 @@ var init_kernel = __esmMin((() => {
 				},
 				theme: this.themes
 			});
+			this.headlessEditor = false;
 			this.pluginsInstances.forEach((plugin) => {
 				plugin.onInit?.(editor);
 			});
@@ -1127,6 +1138,34 @@ var init_kernel = __esmMin((() => {
 			this.emit("initialized", editor);
 			return editor || null;
 		}
+		initHeadlessEditor() {
+			if (this.editor) return this.editor;
+			if (this.pluginsInstances.length === 0) {
+				this.logger.info(`🔌 Initializing ${this.plugins.length} plugins`);
+				for (const plugin of this.plugins) {
+					const instance = new plugin(this, this.pluginsConfig.get(plugin));
+					this.pluginsInstances.push(instance);
+				}
+			}
+			this.logger.info(`📝 Creating headless editor with ${this.nodes.length} nodes`);
+			const editor = this.editor = createHeadlessEditor({
+				__kernel: this,
+				namespace: "lobehub-headless",
+				nodes: this.nodes,
+				onError: (error) => {
+					this.logger.error("❌ Lexical headless editor error:", error);
+					this.emit("error", error);
+				},
+				theme: this.themes
+			});
+			this.headlessEditor = true;
+			this.pluginsInstances.forEach((plugin) => {
+				plugin.onInit?.(editor);
+			});
+			this.logger.info(`✅ Headless editor ready with ${this.pluginsInstances.length} plugins`);
+			this.emit("initialized", editor);
+			return editor || null;
+		}
 		setDocument(type, content, options) {
 			const datasource = this.dataTypeMap.get(type);
 			if (!datasource) {
@@ -1255,9 +1294,11 @@ var init_kernel = __esmMin((() => {
 			});
 		}
 		focus() {
+			if (this.headlessEditor) return;
 			this.editor?.focus();
 		}
 		blur() {
+			if (this.headlessEditor) return;
 			this.editor?.blur();
 		}
 		getDocument(type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.8.5",
+  "version": "4.9.0",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",
@@ -26,6 +26,10 @@
       "types": "./es/index.d.ts",
       "import": "./es/index.js"
     },
+    "./headless": {
+      "types": "./es/headless.d.ts",
+      "import": "./es/headless.js"
+    },
     "./react": {
       "types": "./es/react.d.ts",
       "import": "./es/react.js"