@lobehub/editor 4.25.0 → 4.26.0

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

@@ -76,6 +76,7 @@ declare const _default: {
   };
   image: {
     broken: string;
+    preview: string;
     replace: string;
   };
   link: {
@@ -357,6 +358,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 +437,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

@@ -43,6 +43,7 @@ var locale_default = {
 	},
 	image: {
 		broken: "Broken image",
+		preview: "Preview image",
 		replace: "Replace"
 	},
 	link: {
@@ -818,26 +819,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 +866,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 +893,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 +906,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 +948,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 +1269,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 +6137,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/locale/index.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
   };
   image: {
     broken: string;
+    preview: string;
     replace: string;
   };
   link: {

package/es/locale/index.js

@@ -26,6 +26,7 @@ var init_locale = __esmMin((() => {
 		},
 		image: {
 			broken: "Broken image",
+			preview: "Preview image",
 			replace: "Replace"
 		},
 		link: {

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/plugins/image/react/components/Image.js

@@ -1,4 +1,5 @@
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
+import { useTranslation } from "../../../../editor-kernel/react/useTranslation.js";
 import { $isBlockImageNode } from "../../node/block-image-node.js";
 import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import { styles } from "./style.js";
@@ -6,20 +7,22 @@ import BrokenImage from "./BrokenImage.js";
 import ImageEditPopover from "./ImageEditPopover.js";
 import LazyImage from "./LazyImage.js";
 import { ResizeHandle } from "./ResizeHandle.js";
-import { Icon } from "@lobehub/ui";
-import { LoaderCircleIcon } from "lucide-react";
+import { ActionIcon, Icon } from "@lobehub/ui";
+import { LoaderCircleIcon, ZoomInIcon } from "lucide-react";
 import { Suspense, memo, useCallback, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
+import { Image } from "antd";
 import { COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND } from "lexical";
 //#region src/plugins/image/react/components/Image.tsx
 function getResizedImageWidth(startWidth, deltaX, maxWidth) {
 	const adjustedDeltaX = deltaX * 2;
 	return Math.max(50, Math.min(startWidth + adjustedDeltaX, maxWidth));
 }
-const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
+const Image$1 = memo(({ node, className, showScaleInfo = false, handleUpload, onPickFile }) => {
 	const [isSelected, setSelected] = useLexicalNodeSelection(node.getKey());
 	const [isHovered, setIsHovered] = useState(false);
+	const [previewOpen, setPreviewOpen] = useState(false);
 	const [scale, setScale] = useState(1);
 	const [size, setSize] = useState({
 		height: 0,
@@ -34,6 +37,7 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 	const editorRef = useRef(null);
 	const startWidthRef = useRef(0);
 	const lastLoadedSrcRef = useRef(null);
+	const t = useTranslation();
 	const isBlock = useMemo(() => {
 		return $isBlockImageNode(node);
 	}, [node]);
@@ -92,6 +96,11 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 	const handleMouseLeave = useCallback(() => {
 		setIsHovered(false);
 	}, []);
+	const handlePreview = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setPreviewOpen(true);
+	}, []);
 	const children = useMemo(() => {
 		switch (node.status) {
 			case "error": return /* @__PURE__ */ jsx(BrokenImage, {});
@@ -167,6 +176,23 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 						spin: true
 					})
 				}),
+				(isHovered || isSelected) && node.status === "uploaded" && /* @__PURE__ */ jsx(ActionIcon, {
+					"aria-label": t("image.preview"),
+					glass: true,
+					className: styles.previewAction,
+					icon: ZoomInIcon,
+					onClick: handlePreview,
+					size: "small",
+					title: t("image.preview"),
+					variant: "filled"
+				}),
+				/* @__PURE__ */ jsx(Image.PreviewGroup, {
+					items: [node.src],
+					preview: {
+						open: previewOpen,
+						onOpenChange: setPreviewOpen
+					}
+				}),
 				showScaleInfo && isSelected && scale !== 1 && /* @__PURE__ */ jsxs("div", {
 					className: styles.scaleInfo,
 					children: [Math.round(scale * 100), "%"]
@@ -190,6 +216,6 @@ const Image = memo(({ node, className, showScaleInfo = false, handleUpload, onPi
 		})
 	});
 });
-Image.displayName = "Image";
+Image$1.displayName = "Image";
 //#endregion
-export { Image as default };
+export { Image$1 as default };

package/es/plugins/image/react/components/style.js

@@ -78,6 +78,32 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     justify-content: center;
 
     color: ${cssVar.colorTextSecondary};
+  `,
+	previewAction: css`
+    position: absolute;
+    z-index: 10000;
+    inset-block-start: 8px;
+    inset-inline-end: 8px;
+
+    && {
+      border: 1px solid rgb(255 255 255 / 24%);
+
+      color: rgb(255 255 255 / 96%);
+
+      background: rgb(0 0 0 / 58%);
+      backdrop-filter: saturate(120%) blur(12px);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 36%);
+    }
+
+    &&:hover {
+      color: rgb(255 255 255);
+      background: rgb(0 0 0 / 72%);
+    }
+
+    &&:active {
+      color: rgb(255 255 255);
+      background: rgb(0 0 0 / 80%);
+    }
   `,
 	resizeHandle: css`
     pointer-events: auto;

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.26.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",