@lobehub/editor 4.25.0 → 4.25.1

package/es/editor-kernel/kernel.d.ts

@@ -24,6 +24,11 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   private hotReloadMode;
   private logger;
   private historyState;
+  /**
+   * Root-scoped resources are attached to the Lexical editor's root listener
+   * so direct Lexical setRootElement(null) calls are safe as well.
+   */
+  private unregisterRootLifecycle?;
   private editor?;
   private headlessEditor;
   constructor();
@@ -44,6 +49,7 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   destroy(): void;
   getRootElement(): HTMLElement | null;
   setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+  setRootElement(dom: null, editable?: boolean): LexicalEditor | null;
   setEditable(editable: boolean): void;
   initNodeEditor(): LexicalEditor;
   initHeadlessEditor(): LexicalEditor;
@@ -80,6 +86,9 @@ declare class Kernel extends EventEmitter implements IEditorKernel {
   registerNodeTransform(transform: INodeRegistrationTransform): () => void;
   registerBeforeEditorInit(hook: IBeforeEditorInitLifecycle): () => void;
   registerRootClassName(className: string): () => void;
+  registerRootListener(listener: (rootElement: HTMLElement | null) => void): () => void;
+  private getEditorId;
+  private registerRootLifecycle;
   private runBeforeEditorInitLifecycle;
   private applyRootClassNames;
   private resolveNodesForInitialization;

package/es/editor-kernel/kernel.js

@@ -95,26 +95,46 @@ var init_kernel = __esmMin((() => {
 			return this.editor || null;
 		}
 		destroy() {
-			unregisterEditorKernel(this.themes[EDITOR_THEME_KEY]);
+			const editor = this.editor;
+			const editorId = this.getEditorId();
 			this.logger.info(`🗑️ Destroying editor with ${this.pluginsInstances.length} plugins`);
+			if (editor) try {
+				editor.setRootElement(null);
+			} catch (error) {
+				this.logger.warn("Failed to detach editor root during destroy:", error);
+			}
+			unregisterEditorKernel(editorId);
 			try {
-				this.editor?.setEditorState(createEmptyEditorState());
+				editor?.setEditorState(createEmptyEditorState());
 			} catch (error) {
 				this.logger.warn("Failed to reset editor state during destroy:", error);
 			}
-			this.dataTypeMap.clear();
+			this.unregisterRootLifecycle?.();
+			this.unregisterRootLifecycle = void 0;
+			let destroyError;
 			this.pluginsInstances.forEach((plugin) => {
-				if (plugin.destroy) plugin.destroy();
+				try {
+					plugin.destroy?.();
+				} catch (error) {
+					destroyError ??= error;
+				}
 			});
 			this.pluginsInstances = [];
-			this.beforeEditorInitHooks = [];
+			this.dataTypeMap.clear();
+			this.decorators = {};
 			this.nodeTransforms = [];
+			this.nodes = [];
+			this.beforeEditorInitHooks = [];
 			this.rootClassNames.clear();
 			this.serviceMap.clear();
-			this.decorators = {};
-			this.themes = {};
+			this.themes = { [EDITOR_THEME_KEY]: generateEditorId() };
+			this.historyState = createEmptyHistoryState();
+			this._commands.clear();
+			this._commandsClean.clear();
+			this.editor = void 0;
 			this.headlessEditor = false;
 			this.logger.info("✅ Editor destroyed");
+			if (destroyError) throw destroyError;
 		}
 		getRootElement() {
 			if (this.headlessEditor) return null;
@@ -122,12 +142,23 @@ var init_kernel = __esmMin((() => {
 		}
 		setRootElement(dom, editable = true) {
 			if (this.editor) {
-				if (this.headlessEditor) throw new Error("Headless editor cannot be attached to a root element.");
+				if (this.headlessEditor) {
+					if (dom === null) return this.editor;
+					throw new Error("Headless editor cannot be attached to a root element.");
+				}
 				this.logger.warn("[Editor] Editor is already initialized, updating root element only");
+				if (dom) registerEditorKernel(this.getEditorId(), this);
 				this.editor.setRootElement(dom);
-				this.applyRootClassNames(dom);
+				if (dom) {
+					this.editor.setEditable(editable);
+					this.applyRootClassNames(dom);
+				}
 				return this.editor;
 			}
+			if (dom === null) {
+				unregisterEditorKernel(this.getEditorId());
+				return null;
+			}
 			if (this.pluginsInstances.length === 0) {
 				this.logger.info(`🔌 Initializing ${this.plugins.length} plugins`);
 				for (const plugin of this.plugins) {
@@ -138,7 +169,7 @@ var init_kernel = __esmMin((() => {
 			this.runBeforeEditorInitLifecycle();
 			const resolvedNodes = this.resolveNodesForInitialization();
 			this.logger.info(`📝 Creating editor with ${resolvedNodes.length} nodes`);
-			registerEditorKernel(this.themes[EDITOR_THEME_KEY], this);
+			registerEditorKernel(this.getEditorId(), this);
 			const editor = this.editor = createEditor({
 				__kernel: this,
 				editable,
@@ -151,9 +182,9 @@ var init_kernel = __esmMin((() => {
 				theme: this.themes
 			});
 			this.headlessEditor = false;
+			this.registerRootLifecycle(editor);
 			this.editor.setRootElement(dom);
 			this.applyRootClassNames(dom);
-			registerEvent(editor, dom);
 			this.pluginsInstances.forEach((plugin) => {
 				plugin.onInit?.(editor);
 			});
@@ -193,6 +224,7 @@ var init_kernel = __esmMin((() => {
 				theme: this.themes
 			});
 			this.headlessEditor = false;
+			this.registerRootLifecycle(editor);
 			this.pluginsInstances.forEach((plugin) => {
 				plugin.onInit?.(editor);
 			});
@@ -513,6 +545,34 @@ var init_kernel = __esmMin((() => {
 				if (currentRootElement) currentRootElement.classList.remove(...classNames);
 			};
 		}
+		registerRootListener(listener) {
+			if (!this.editor || this.headlessEditor) return noop;
+			return this.editor.registerRootListener(listener);
+		}
+		getEditorId() {
+			return this.themes[EDITOR_THEME_KEY];
+		}
+		registerRootLifecycle(editor) {
+			this.unregisterRootLifecycle?.();
+			let rootEventCleanup;
+			const clearRootEvent = () => {
+				rootEventCleanup?.();
+				rootEventCleanup = void 0;
+			};
+			const unregisterRootListener = editor.registerRootListener((rootElement) => {
+				clearRootEvent();
+				if (!rootElement) {
+					unregisterEditorKernel(this.getEditorId());
+					return;
+				}
+				registerEditorKernel(this.getEditorId(), this);
+				rootEventCleanup = registerEvent(editor, rootElement);
+			});
+			this.unregisterRootLifecycle = () => {
+				clearRootEvent();
+				unregisterRootListener();
+			};
+		}
 		runBeforeEditorInitLifecycle() {
 			for (const hook of this.beforeEditorInitHooks) hook();
 		}

package/es/headless.d.ts

@@ -357,6 +357,7 @@ interface IEditor {
    * @param dom
    */
   setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+  setRootElement(dom: null, editable?: boolean): LexicalEditor | null;
   /**
    * set editor selection
    * @param selection
@@ -435,6 +436,17 @@ interface IEditorKernel extends IEditor {
    * @returns unregister function
    */
   registerRootClassName(className: string): () => void;
+  /**
+   * Register a callback for root attach/detach events.
+   *
+   * Call this after the kernel's Lexical editor has been initialized (usually
+   * from plugin onInit). Lexical immediately invokes a newly registered root
+   * listener with the current root, so listeners registered after the initial
+   * setRootElement still receive the first root attach. Headless kernels
+   * return a no-op cleanup because headless Lexical editors do not support
+   * root listeners.
+   */
+  registerRootListener(listener: (rootElement: HTMLElement | null) => void): () => void;
   /**
    * Register service
    * @param serviceId

package/es/headless.js

@@ -818,26 +818,46 @@ var Kernel = class Kernel extends EventEmitter {
 		return this.editor || null;
 	}
 	destroy() {
-		unregisterEditorKernel(this.themes[EDITOR_THEME_KEY]);
+		const editor = this.editor;
+		const editorId = this.getEditorId();
 		this.logger.info(`🗑️ Destroying editor with ${this.pluginsInstances.length} plugins`);
+		if (editor) try {
+			editor.setRootElement(null);
+		} catch (error) {
+			this.logger.warn("Failed to detach editor root during destroy:", error);
+		}
+		unregisterEditorKernel(editorId);
 		try {
-			this.editor?.setEditorState(createEmptyEditorState());
+			editor?.setEditorState(createEmptyEditorState());
 		} catch (error) {
 			this.logger.warn("Failed to reset editor state during destroy:", error);
 		}
-		this.dataTypeMap.clear();
+		this.unregisterRootLifecycle?.();
+		this.unregisterRootLifecycle = void 0;
+		let destroyError;
 		this.pluginsInstances.forEach((plugin) => {
-			if (plugin.destroy) plugin.destroy();
+			try {
+				plugin.destroy?.();
+			} catch (error) {
+				destroyError ??= error;
+			}
 		});
 		this.pluginsInstances = [];
-		this.beforeEditorInitHooks = [];
+		this.dataTypeMap.clear();
+		this.decorators = {};
 		this.nodeTransforms = [];
+		this.nodes = [];
+		this.beforeEditorInitHooks = [];
 		this.rootClassNames.clear();
 		this.serviceMap.clear();
-		this.decorators = {};
-		this.themes = {};
+		this.themes = { [EDITOR_THEME_KEY]: generateEditorId() };
+		this.historyState = createEmptyHistoryState();
+		this._commands.clear();
+		this._commandsClean.clear();
+		this.editor = void 0;
 		this.headlessEditor = false;
 		this.logger.info("✅ Editor destroyed");
+		if (destroyError) throw destroyError;
 	}
 	getRootElement() {
 		if (this.headlessEditor) return null;
@@ -845,12 +865,23 @@ var Kernel = class Kernel extends EventEmitter {
 	}
 	setRootElement(dom, editable = true) {
 		if (this.editor) {
-			if (this.headlessEditor) throw new Error("Headless editor cannot be attached to a root element.");
+			if (this.headlessEditor) {
+				if (dom === null) return this.editor;
+				throw new Error("Headless editor cannot be attached to a root element.");
+			}
 			this.logger.warn("[Editor] Editor is already initialized, updating root element only");
+			if (dom) registerEditorKernel(this.getEditorId(), this);
 			this.editor.setRootElement(dom);
-			this.applyRootClassNames(dom);
+			if (dom) {
+				this.editor.setEditable(editable);
+				this.applyRootClassNames(dom);
+			}
 			return this.editor;
 		}
+		if (dom === null) {
+			unregisterEditorKernel(this.getEditorId());
+			return null;
+		}
 		if (this.pluginsInstances.length === 0) {
 			this.logger.info(`🔌 Initializing ${this.plugins.length} plugins`);
 			for (const plugin of this.plugins) {
@@ -861,7 +892,7 @@ var Kernel = class Kernel extends EventEmitter {
 		this.runBeforeEditorInitLifecycle();
 		const resolvedNodes = this.resolveNodesForInitialization();
 		this.logger.info(`📝 Creating editor with ${resolvedNodes.length} nodes`);
-		registerEditorKernel(this.themes[EDITOR_THEME_KEY], this);
+		registerEditorKernel(this.getEditorId(), this);
 		const editor = this.editor = createEditor({
 			__kernel: this,
 			editable,
@@ -874,9 +905,9 @@ var Kernel = class Kernel extends EventEmitter {
 			theme: this.themes
 		});
 		this.headlessEditor = false;
+		this.registerRootLifecycle(editor);
 		this.editor.setRootElement(dom);
 		this.applyRootClassNames(dom);
-		registerEvent(editor, dom);
 		this.pluginsInstances.forEach((plugin) => {
 			plugin.onInit?.(editor);
 		});
@@ -916,6 +947,7 @@ var Kernel = class Kernel extends EventEmitter {
 			theme: this.themes
 		});
 		this.headlessEditor = false;
+		this.registerRootLifecycle(editor);
 		this.pluginsInstances.forEach((plugin) => {
 			plugin.onInit?.(editor);
 		});
@@ -1236,6 +1268,34 @@ var Kernel = class Kernel extends EventEmitter {
 			if (currentRootElement) currentRootElement.classList.remove(...classNames);
 		};
 	}
+	registerRootListener(listener) {
+		if (!this.editor || this.headlessEditor) return noop;
+		return this.editor.registerRootListener(listener);
+	}
+	getEditorId() {
+		return this.themes[EDITOR_THEME_KEY];
+	}
+	registerRootLifecycle(editor) {
+		this.unregisterRootLifecycle?.();
+		let rootEventCleanup;
+		const clearRootEvent = () => {
+			rootEventCleanup?.();
+			rootEventCleanup = void 0;
+		};
+		const unregisterRootListener = editor.registerRootListener((rootElement) => {
+			clearRootEvent();
+			if (!rootElement) {
+				unregisterEditorKernel(this.getEditorId());
+				return;
+			}
+			registerEditorKernel(this.getEditorId(), this);
+			rootEventCleanup = registerEvent(editor, rootElement);
+		});
+		this.unregisterRootLifecycle = () => {
+			clearRootEvent();
+			unregisterRootListener();
+		};
+	}
 	runBeforeEditorInitLifecycle() {
 		for (const hook of this.beforeEditorInitHooks) hook();
 	}
@@ -6076,7 +6136,18 @@ const CommonPlugin = class extends KernelPlugin {
 			if (this.config?.pasteAsPlainText) return runPasteHandlers(ctx, [handleFilePaste, handlePlainTextPaste]);
 			return false;
 		}, COMMAND_PRIORITY_CRITICAL));
-		this.registerClears(registerRichText(editor), registerProgressiveSelectAll(editor), CAN_USE_DOM ? registerDragonSupport(editor) : noop, registerHistory(editor, this.kernel.getHistoryState(), 300), registerBlockBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
+		let dragonCleanup;
+		const clearDragon = () => {
+			dragonCleanup?.();
+			dragonCleanup = void 0;
+		};
+		this.register(this.kernel.registerRootListener((rootElement) => {
+			clearDragon();
+			if (!rootElement || !CAN_USE_DOM) return;
+			dragonCleanup = registerDragonSupport(editor);
+		}));
+		this.register(clearDragon);
+		this.registerClears(registerRichText(editor), registerProgressiveSelectAll(editor), registerHistory(editor, this.kernel.getHistoryState(), 300), registerBlockBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
 			const selection = $getSelection();
 			if (!$isRangeSelection(selection)) return false;
 			const { inCell, inTable } = $isCursorInTable(selection);

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

@@ -1,7 +1,6 @@
 import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js";
 import { $isCursorInQuote, $isCursorInTable, createBlockNode, init_utils, sampleReader } from "../utils/index.js";
 import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
-import { init_utils as init_utils$1, noop } from "../../../editor-kernel/utils.js";
 import { registerCommands } from "../command/index.js";
 import { CursorNode, registerCursorNode } from "../node/cursor.js";
 import { ILitexmlService } from "../../litexml/service/litexml-service.js";
@@ -20,7 +19,6 @@ import { $createHeadingNode, $createQuoteNode, $isHeadingNode, $isQuoteNode, Hea
 import { CAN_USE_DOM } from "@lexical/utils";
 import { registerDragonSupport } from "@lexical/dragon";
 //#region src/plugins/common/plugin/index.ts
-init_utils$1();
 init_helper();
 init_plugin();
 init_utils();
@@ -232,7 +230,18 @@ const CommonPlugin = class extends KernelPlugin {
 			if (this.config?.pasteAsPlainText) return runPasteHandlers(ctx, [handleFilePaste, handlePlainTextPaste]);
 			return false;
 		}, COMMAND_PRIORITY_CRITICAL));
-		this.registerClears(registerRichText(editor), registerProgressiveSelectAll(editor), CAN_USE_DOM ? registerDragonSupport(editor) : noop, registerHistory(editor, this.kernel.getHistoryState(), 300), registerBlockBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
+		let dragonCleanup;
+		const clearDragon = () => {
+			dragonCleanup?.();
+			dragonCleanup = void 0;
+		};
+		this.register(this.kernel.registerRootListener((rootElement) => {
+			clearDragon();
+			if (!rootElement || !CAN_USE_DOM) return;
+			dragonCleanup = registerDragonSupport(editor);
+		}));
+		this.register(clearDragon);
+		this.registerClears(registerRichText(editor), registerProgressiveSelectAll(editor), registerHistory(editor, this.kernel.getHistoryState(), 300), registerBlockBackspace(editor), registerRichKeydown(editor, this.kernel, { enableHotkey: this.config?.enableHotkey }), registerCommands(editor), registerBreakLineClick(editor), registerCursorNode(editor), registerLastElement(editor), editor.registerCommand(INSERT_LINE_BREAK_COMMAND, () => {
 			const selection = $getSelection();
 			if (!$isRangeSelection(selection)) return false;
 			const { inCell, inTable } = $isCursorInTable(selection);

package/es/plugins/common/react/ReactPlainText.js

@@ -46,6 +46,12 @@ const ReactPlainText = memo(({ style, children, theme = {}, onChange, editable,
 	}, [markdownOption]);
 	const [isInitialized, setIsInitialized] = useState(false);
 	const { props: { type, content, placeholder, lineEmptyPlaceholder } } = Children.only(children);
+	const initialDocumentRef = useRef({
+		content,
+		type
+	});
+	const editableRef = useRef(editable);
+	editableRef.current = editable;
 	useLayoutEffect(() => {
 		editor.registerPlugin(MarkdownPlugin, {
 			autoFormatMarkdown,
@@ -76,13 +82,22 @@ const ReactPlainText = memo(({ style, children, theme = {}, onChange, editable,
 	]);
 	useEffect(() => {
 		const container = editorContainerRef.current;
-		if (container && !isInitialized) {
-			editor.setRootElement(container, editable);
-			editor.setDocument(type, content);
+		if (!container) return;
+		if (!editor.getLexicalEditor()) {
+			editor.setRootElement(container, editableRef.current);
+			editor.setDocument(initialDocumentRef.current.type, initialDocumentRef.current.content);
 			setIsInitialized(true);
-		}
+		} else if (editor.getRootElement() !== container) editor.setRootElement(container, editableRef.current);
+		return () => {
+			if (editor.getRootElement() === container) editor.setRootElement(null);
+		};
+	}, [editor]);
+	useEffect(() => {
+		if (!isInitialized) return;
+		const lexicalEditor = editor.getLexicalEditor();
+		if (!lexicalEditor) return;
 		let previousContent;
-		return editor.getLexicalEditor()?.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
+		return lexicalEditor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
 			onChange?.(editor);
 			if (onTextChange && (dirtyElements.size > 0 || dirtyLeaves.size > 0)) {
 				const currentContent = JSON.stringify(editor.getDocument(type));
@@ -95,16 +110,19 @@ const ReactPlainText = memo(({ style, children, theme = {}, onChange, editable,
 		});
 	}, [
 		editor,
+		isInitialized,
 		type,
-		content,
 		onChange,
-		onTextChange,
-		isInitialized
+		onTextChange
 	]);
 	useEffect(() => {
 		if (!isInitialized) return;
 		if (typeof editable === "boolean") editor.setEditable(editable);
-	}, [isInitialized, editable]);
+	}, [
+		editor,
+		isInitialized,
+		editable
+	]);
 	useEffect(() => {
 		if (editor && onPressEnter) return editor.registerHighCommand(KEY_DOWN_COMMAND, (event) => {
 			if (event.key === "Enter" && !event.isComposing && onPressEnter({

package/es/react/hooks/useEditor.d.ts

@@ -1,6 +1,28 @@
 import { IEditor } from "../../types/kernel.js";
 import "../../types/index.js";
 //#region src/react/hooks/useEditor.d.ts
-declare const useEditor: () => IEditor;
+interface UseEditorOptions {
+  /**
+   * Destroy the kernel when the owning component is cleaned up.
+   *
+   * The default is false because React Activity also runs effect cleanup while
+   * hiding a subtree. Detaching the root keeps the editor reversible and lets
+   * the same kernel be attached again when the subtree becomes visible.
+   *
+   * `autoDestroy: true` is mutually exclusive with React Activity: Activity
+   * cannot distinguish a hidden subtree from a permanently unmounted owner,
+   * so its cleanup would destroy the editor during a hide. Use the default
+   * reversible detach with Activity, and call `destroy()` (or unmount the
+   * owner with `autoDestroy`) only when the instance is no longer needed.
+   *
+   * Root detach releases the kernel from the library's global root registry
+   * and DOM/dragon listeners. It does not guarantee garbage collection when
+   * application code keeps the `IEditor` in a store, provider, or other
+   * long-lived reference. Remove that reference, unmount the owner, or use
+   * `autoDestroy: true`/`destroy()` to release the editor's runtime resources.
+   */
+  autoDestroy?: boolean;
+}
+declare const useEditor: ({ autoDestroy }?: UseEditorOptions) => IEditor;
 //#endregion
-export { useEditor };
+export { UseEditorOptions, useEditor };

package/es/react/hooks/useEditor.js

@@ -1,8 +1,18 @@
 import Editor from "../../editor-kernel/index.js";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 //#region src/react/hooks/useEditor.ts
-const useEditor = () => {
-	return useMemo(() => Editor.createEditor(), []);
+const useEditor = ({ autoDestroy = false } = {}) => {
+	const editor = useMemo(() => Editor.createEditor(), []);
+	useEffect(() => {
+		return () => {
+			if (autoDestroy) {
+				editor.destroy();
+				return;
+			}
+			if (editor.getLexicalEditor()) editor.setRootElement(null);
+		};
+	}, [autoDestroy, editor]);
+	return editor;
 };
 //#endregion
 export { useEditor };

package/es/react.d.ts

@@ -13,7 +13,7 @@ import "./react/ChatInputActions/index.js";
 import { CodeLanguageSelectProps } from "./react/CodeLanguageSelect/type.js";
 import CodeLanguageSelect from "./react/CodeLanguageSelect/CodeLanguageSelect.js";
 import "./react/CodeLanguageSelect/index.js";
-import { useEditor } from "./react/hooks/useEditor.js";
+import { UseEditorOptions, useEditor } from "./react/hooks/useEditor.js";
 import { EditorState, useEditorState } from "./react/hooks/useEditorState/index.js";
 import { EditorProps } from "./react/Editor/type.js";
 import { withProps } from "./react/Editor/utils.js";
@@ -25,4 +25,4 @@ import "./react/FloatActions/index.js";
 import { SendButtonProps } from "./react/SendButton/type.js";
 import SendButton from "./react/SendButton/SendButton.js";
 import "./react/SendButton/index.js";
-export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, type CollaborationProviderFactory, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, type EditorCollaborationConfig, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, SendButton, type SendButtonProps, useEditor, useEditorContent, useEditorState, withProps };
+export { ANCHOR_PADDING_CSS_VAR, ChatInput, ChatInputActionBar, type ChatInputActionBarProps, type ChatInputActionEvent, ChatInputActions, type ChatInputActionsProps, type ChatInputProps, CodeLanguageSelect, type CodeLanguageSelectProps, type CollaborationProviderFactory, DEFAULT_BLOCK_ANCHOR_PADDING, Editor, type EditorCollaborationConfig, type EditorProps, EditorProvider, type EditorProviderConfig, type EditorProviderProps, type EditorState, FloatActions, type FloatActionsProps, SendButton, type SendButtonProps, type UseEditorOptions, useEditor, useEditorContent, useEditorState, withProps };

package/es/types/kernel.d.ts

@@ -225,6 +225,7 @@ interface IEditor {
    * @param dom
    */
   setRootElement(dom: HTMLElement, editable?: boolean): LexicalEditor;
+  setRootElement(dom: null, editable?: boolean): LexicalEditor | null;
   /**
    * set editor selection
    * @param selection
@@ -303,6 +304,17 @@ interface IEditorKernel extends IEditor {
    * @returns unregister function
    */
   registerRootClassName(className: string): () => void;
+  /**
+   * Register a callback for root attach/detach events.
+   *
+   * Call this after the kernel's Lexical editor has been initialized (usually
+   * from plugin onInit). Lexical immediately invokes a newly registered root
+   * listener with the current root, so listeners registered after the initial
+   * setRootElement still receive the first root attach. Headless kernels
+   * return a no-op cleanup because headless Lexical editors do not support
+   * root listeners.
+   */
+  registerRootListener(listener: (rootElement: HTMLElement | null) => void): () => void;
   /**
    * Register service
    * @param serviceId

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.25.0",
+  "version": "4.25.1",
   "description": "A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.",
   "keywords": [
     "lobehub",