@lobehub/editor 4.17.2 → 4.18.0

package/es/index.d.ts

@@ -26,7 +26,7 @@ import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/
 import { INSERT_CODEINLINE_COMMAND } from "./plugins/code/command/index.js";
 import { CodePlugin } from "./plugins/code/plugin/index.js";
 import { ReactCodePlugin } from "./plugins/code/react/CodeReactPlugin.js";
-import { UPDATE_CODEBLOCK_LANG } from "./plugins/codeblock/command/index.js";
+import { UPDATE_CODEBLOCK_LANG } from "./plugins/codeblock/command/symbols.js";
 import { CodeblockPlugin, CodeblockPluginOptions } from "./plugins/codeblock/plugin/index.js";
 import { ReactCodeblockPluginProps } from "./plugins/codeblock/react/type.js";
 import { ReactCodeblockPlugin } from "./plugins/codeblock/react/ReactCodeblockPlugin.js";

package/es/index.js

@@ -35,13 +35,26 @@ import ReactEditorContent from "./plugins/common/react/ReactEditorContent.js";
 import ReactPlainText from "./plugins/common/react/ReactPlainText.js";
 import { INSERT_CODEINLINE_COMMAND } from "./plugins/code/command/index.js";
 import { CodePlugin } from "./plugins/code/plugin/index.js";
+import { UPDATE_CODEBLOCK_LANG } from "./plugins/codeblock/command/symbols.js";
+import { INSERT_CODEMIRROR_COMMAND, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "./plugins/codemirror-block/command/index.js";
+import { CodemirrorPlugin } from "./plugins/codemirror-block/plugin/index.js";
+import { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM } from "./plugins/upload/service/i-upload-service.js";
+import { UploadPlugin } from "./plugins/upload/plugin/index.js";
+import { INSERT_FILE_COMMAND } from "./plugins/file/command/index.js";
+import { FilePlugin } from "./plugins/file/plugin/index.js";
 import { INSERT_HORIZONTAL_RULE_COMMAND } from "./plugins/hr/command/index.js";
 import { HRPlugin } from "./plugins/hr/plugin/index.js";
+import { INSERT_IMAGE_COMMAND } from "./plugins/image/command/index.js";
+import { ImagePlugin } from "./plugins/image/plugin/index.js";
 import { INSERT_LINK_COMMAND } from "./plugins/link/command/index.js";
 import { ILinkService } from "./plugins/link/service/i-link-service.js";
 import { LinkPlugin } from "./plugins/link/plugin/index.js";
 import { INSERT_CHECK_LIST_COMMAND } from "./plugins/list/plugin/checkList.js";
 import { ListPlugin } from "./plugins/list/plugin/index.js";
+import { INSERT_MATH_COMMAND } from "./plugins/math/command/index.js";
+import { MathPlugin } from "./plugins/math/plugin/index.js";
+import { INSERT_MENTION_COMMAND } from "./plugins/mention/command/index.js";
+import { MentionPlugin } from "./plugins/mention/plugin/index.js";
 import { BlockMenuService, IBlockMenuService } from "./plugins/block/service/i-block-menu-service.js";
 import { INSERT_TABLE_COLUMN_COMMAND, INSERT_TABLE_COMMAND, INSERT_TABLE_ROW_COMMAND, SELECT_TABLE_COMMAND } from "./plugins/table/command/index.js";
 import { ITableControllerMenuService, TableControllerMenuService } from "./plugins/table/service/i-table-controller-menu-service.js";
@@ -55,26 +68,17 @@ import { BlockPlugin } from "./plugins/block/plugin/index.js";
 import { ANCHOR_PADDING_CSS_VAR, DEFAULT_BLOCK_ANCHOR_PADDING } from "./plugins/block/react/style.js";
 import ReactBlockPlugin from "./plugins/block/react/ReactBlockPlugin.js";
 import ReactCodePlugin from "./plugins/code/react/CodeReactPlugin.js";
-import { UPDATE_CODEBLOCK_LANG } from "./plugins/codeblock/command/index.js";
 import { CodeblockPlugin } from "./plugins/codeblock/plugin/index.js";
 import ReactCodeblockPlugin from "./plugins/codeblock/react/ReactCodeblockPlugin.js";
 import { bundledLanguagesInfo } from "./plugins/codeblock/index.js";
-import { INSERT_CODEMIRROR_COMMAND, SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "./plugins/codemirror-block/command/index.js";
-import { CodemirrorPlugin } from "./plugins/codemirror-block/plugin/index.js";
 import ReactCodemirrorPlugin from "./plugins/codemirror-block/react/ReactCodemirrorNode.js";
 import { CONTENT_BLOCKS_DATA_TYPE } from "./plugins/content-blocks/types.js";
 import { extractContentBlocks } from "./plugins/content-blocks/utils/extract.js";
 import { ContentBlocksDataSource } from "./plugins/content-blocks/data-source/content-blocks-data-source.js";
 import { ContentBlocksPlugin } from "./plugins/content-blocks/plugin/index.js";
 import { extractMediaLists } from "./plugins/content-blocks/utils/extract-media-lists.js";
-import { INSERT_FILE_COMMAND } from "./plugins/file/command/index.js";
-import { IUploadService, UPLOAD_PRIORITY_HIGH, UPLOAD_PRIORITY_LOW, UPLOAD_PRIORITY_MEDIUM } from "./plugins/upload/service/i-upload-service.js";
-import { UploadPlugin } from "./plugins/upload/plugin/index.js";
-import { FilePlugin } from "./plugins/file/plugin/index.js";
 import ReactFilePlugin from "./plugins/file/react/ReactFilePlugin.js";
 import ReactHRPlugin from "./plugins/hr/react/ReactHRPlugin.js";
-import { INSERT_IMAGE_COMMAND } from "./plugins/image/command/index.js";
-import { ImagePlugin } from "./plugins/image/plugin/index.js";
 import ReactImagePlugin from "./plugins/image/react/ReactImagePlugin.js";
 import ReactLinkPlugin from "./plugins/link/react/ReactLinkPlugin.js";
 import { INSERT_LINK_HIGHLIGHT_COMMAND, registerLinkHighlightCommand } from "./plugins/link-highlight/command/index.js";
@@ -82,11 +86,7 @@ import { LinkHighlightPlugin } from "./plugins/link-highlight/plugin/index.js";
 import ReactLinkHighlightPlugin from "./plugins/link-highlight/react/ReactLinkHighlightPlugin.js";
 import { INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, UPDATE_LIST_START_COMMAND } from "./plugins/list/command/index.js";
 import ReactListPlugin from "./plugins/list/react/ReactListPlugin.js";
-import { INSERT_MATH_COMMAND } from "./plugins/math/command/index.js";
-import { MathPlugin } from "./plugins/math/plugin/index.js";
 import { ReactMathPlugin } from "./plugins/math/react/index.js";
-import { INSERT_MENTION_COMMAND } from "./plugins/mention/command/index.js";
-import { MentionPlugin } from "./plugins/mention/plugin/index.js";
 import ReactMentionPlugin from "./plugins/mention/react/ReactMentionPlugin.js";
 import { SlashPlugin } from "./plugins/slash/plugin/index.js";
 import SlashMenu from "./plugins/slash/react/components/SlashMenu.js";

package/es/plugins/codeblock/command/index.d.ts

@@ -1,8 +1,2 @@
-import * as _$lexical from "lexical";
-import { LexicalEditor } from "lexical";
-//#region src/plugins/codeblock/command/index.d.ts
-declare const UPDATE_CODEBLOCK_LANG: _$lexical.LexicalCommand<{
-  lang: string;
-}>;
-//#endregion
-export { UPDATE_CODEBLOCK_LANG };
+import { UPDATE_CODEBLOCK_LANG } from "./symbols.js";
+import { LexicalEditor } from "lexical";

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

@@ -1,5 +1,6 @@
+import { UPDATE_CODEBLOCK_LANG } from "./symbols.js";
 import { ShikiTokenizer } from "../plugin/CodeHighlighterShiki.js";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { $findMatchingParent } from "@lexical/utils";
 import { $isCodeNode } from "@lexical/code-core";
 //#region src/plugins/codeblock/command/index.ts
@@ -9,7 +10,6 @@ const CustomShikiTokenizer = {
 	defaultLanguage: ShikiTokenizer.defaultLanguage,
 	defaultTheme: ShikiTokenizer.defaultTheme
 };
-const UPDATE_CODEBLOCK_LANG = createCommand("UPDATE_CODEBLOCK_LANG");
 function registerCodeCommand(editor) {
 	const unregisterLangCommand = editor.registerCommand(UPDATE_CODEBLOCK_LANG, (payload) => {
 		CustomShikiTokenizer.defaultLanguage = payload.lang;
@@ -37,4 +37,4 @@ function registerCodeCommand(editor) {
 	};
 }
 //#endregion
-export { CustomShikiTokenizer, UPDATE_CODEBLOCK_LANG, registerCodeCommand };
+export { CustomShikiTokenizer, registerCodeCommand };

package/es/plugins/codeblock/command/symbols.d.ts

@@ -0,0 +1,8 @@
+import * as _$lexical from "lexical";
+
+//#region src/plugins/codeblock/command/symbols.d.ts
+declare const UPDATE_CODEBLOCK_LANG: _$lexical.LexicalCommand<{
+  lang: string;
+}>;
+//#endregion
+export { UPDATE_CODEBLOCK_LANG };

package/es/plugins/codeblock/command/symbols.js

@@ -0,0 +1,5 @@
+import { createCommand } from "lexical";
+//#region src/plugins/codeblock/command/symbols.ts
+const UPDATE_CODEBLOCK_LANG = createCommand("UPDATE_CODEBLOCK_LANG");
+//#endregion
+export { UPDATE_CODEBLOCK_LANG };

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

@@ -1,4 +1,4 @@
-import { UPDATE_CODEBLOCK_LANG } from "./command/index.js";
+import { UPDATE_CODEBLOCK_LANG } from "./command/symbols.js";
 import { CodeblockPlugin, CodeblockPluginOptions } from "./plugin/index.js";
 import { ReactCodeblockPluginProps } from "./react/type.js";
 import { ReactCodeblockPlugin } from "./react/ReactCodeblockPlugin.js";

package/es/plugins/codeblock/index.js

@@ -1,4 +1,4 @@
-import "./command/index.js";
+import "./command/symbols.js";
 import "./plugin/index.js";
 import "./react/ReactCodeblockPlugin.js";
 import { bundledLanguagesInfo as bundledLanguagesInfo$1 } from "shiki";

package/es/plugins/codeblock/plugin/FacadeShiki.js

@@ -2,9 +2,9 @@ import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js
 import { ShikiLobeTheme } from "@lobehub/ui";
 import { $createLineBreakNode, $createTabNode, $getNodeByKey } from "lexical";
 import { $createCodeHighlightNode, $isCodeNode } from "@lexical/code-core";
-import { bundledLanguagesInfo, bundledThemesInfo } from "shiki";
 import { createHighlighterCoreSync, isSpecialLang, isSpecialTheme, stringifyTokenStyle } from "@shikijs/core";
 import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
+import { bundledLanguagesInfo, bundledThemesInfo } from "shiki";
 //#region src/plugins/codeblock/plugin/FacadeShiki.ts
 init_helper();
 const shiki = createHighlighterCoreSync({

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

@@ -3,9 +3,9 @@ import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
 import { ILitexmlService } from "../../litexml/service/litexml-service.js";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
 import { IBlockMenuService } from "../../block/service/i-block-menu-service.js";
-import { getCodeLanguageByInput } from "../utils/language.js";
 import { registerCodeHighlighting, toCodeTheme } from "./CodeHighlighterShiki.js";
 import { CustomShikiTokenizer, registerCodeCommand } from "../command/index.js";
+import { getCodeLanguageByInput } from "../utils/language.js";
 import { $createRangeSelection, $getSelection, $isRangeSelection, $setSelection, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, TabNode } from "lexical";
 import { $createCodeNode, $isCodeHighlightNode, $isCodeNode, CodeHighlightNode, CodeNode } from "@lexical/code-core";
 //#region src/plugins/codeblock/plugin/index.ts

package/es/plugins/codemirror-block/command/index.js

@@ -1,5 +1,5 @@
 import { $createCodeMirrorNode, $isCodeMirrorNode } from "../node/CodeMirrorNode.js";
-import { UPDATE_CODEBLOCK_LANG } from "../../codeblock/command/index.js";
+import { UPDATE_CODEBLOCK_LANG } from "../../codeblock/command/symbols.js";
 import { $createNodeSelection, $createParagraphNode, $getNodeByKey, $getSelection, $insertNodes, $isRangeSelection, $setSelection, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
 import { $findMatchingParent, mergeRegister } from "@lexical/utils";
 //#region src/plugins/codemirror-block/command/index.ts

package/es/plugins/codemirror-block/node/CodeMirrorNode.js

@@ -10,6 +10,15 @@ const DEFAULT_OPTIONS = {
 	lineNumbers: false,
 	tabSize: 2
 };
+const extractSerializedCodeText = (children) => children.map((child) => {
+	if (!child || typeof child !== "object") return "";
+	const record = child;
+	if (record.type === "linebreak") return "\n";
+	if (record.type === "tab") return "	";
+	if (typeof record.text === "string") return record.text;
+	if (Array.isArray(record.children)) return extractSerializedCodeText(record.children);
+	return "";
+}).join("");
 function hasChildDOMNodeTag(node, tagName) {
 	for (const child of node.childNodes) {
 		if (isHTMLElement(child) && child.tagName === tagName) return true;
@@ -32,7 +41,7 @@ var CodeMirrorNode = class CodeMirrorNode extends DecoratorNode {
 	}
 	static importJSON(serializedNode) {
 		let code = serializedNode.code;
-		if ("children" in serializedNode) code = serializedNode.children?.map((child) => child.text).join("") || "";
+		if ("children" in serializedNode && Array.isArray(serializedNode.children)) code = extractSerializedCodeText(serializedNode.children);
 		return $createCodeMirrorNode(serializedNode.language, code, serializedNode.codeTheme, serializedNode.options).updateFromJSON(serializedNode);
 	}
 	static importDOM() {

package/es/plugins/codemirror-block/plugin/index.d.ts

@@ -4,7 +4,7 @@ import { LexicalEditor } from "lexical";
 
 //#region src/plugins/codemirror-block/plugin/index.d.ts
 interface CodemirrorPluginOptions {
-  decorator: (node: CodeMirrorNode, editor: LexicalEditor) => any;
+  decorator?: (node: CodeMirrorNode, editor: LexicalEditor) => any;
   theme?: string;
 }
 declare const CodemirrorPlugin: IEditorPluginConstructor<CodemirrorPluginOptions>;

package/es/plugins/file/plugin/index.d.ts

@@ -4,8 +4,8 @@ import { LexicalEditor } from "lexical";
 
 //#region src/plugins/file/plugin/index.d.ts
 interface FilePluginOptions {
-  decorator: (node: FileNode, editor: LexicalEditor) => any;
-  handleUpload: (file: File) => Promise<{
+  decorator?: (node: FileNode, editor: LexicalEditor) => any;
+  handleUpload?: (file: File) => Promise<{
     url: string;
   }>;
   markdownWriter?: (file: FileNode) => string;

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

@@ -3,9 +3,9 @@ import { INodeHelper, init_helper } from "../../../editor-kernel/inode/helper.js
 import { KernelPlugin, init_plugin } from "../../../editor-kernel/plugin.js";
 import { ILitexmlService } from "../../litexml/service/litexml-service.js";
 import { IMarkdownShortCutService } from "../../markdown/service/shortcut.js";
+import { IUploadService } from "../../upload/service/i-upload-service.js";
 import { $createFileNode, $isFileNode, FileNode } from "../node/FileNode.js";
 import { registerFileCommand } from "../command/index.js";
-import { IUploadService } from "../../upload/service/i-upload-service.js";
 import { registerFileNodeSelectionObserver } from "../utils/index.js";
 import { $createParagraphNode, $createRangeSelection, $insertNodes, $isRootOrShadowRoot, $setSelection } from "lexical";
 import { $wrapNodeInElement } from "@lexical/utils";
@@ -29,31 +29,34 @@ const FilePlugin = class extends KernelPlugin {
 		});
 	}
 	onInit(editor) {
-		this.kernel.requireService(IUploadService)?.registerUpload(async (file, from, range) => {
-			editor.update(() => {
-				if (range) {
-					const rangeSelection = $createRangeSelection();
-					if (range !== null && range !== void 0) rangeSelection.applyDOMRange(range);
-					$setSelection(rangeSelection);
-				}
-				const fileNode = $createFileNode(file.name);
-				$insertNodes([fileNode]);
-				if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
-				this.config.handleUpload(file).then((url) => {
-					editor.update(() => {
-						fileNode.setUploaded(url.url);
-					});
-				}).catch((error) => {
-					this.logger.error("File upload failed:", error);
-					editor.update(() => {
-						fileNode.setError("File upload failed : " + error.message);
+		const handleUpload = this.config?.handleUpload;
+		if (handleUpload) {
+			this.kernel.requireService(IUploadService)?.registerUpload(async (file, from, range) => {
+				editor.update(() => {
+					if (range) {
+						const rangeSelection = $createRangeSelection();
+						if (range !== null && range !== void 0) rangeSelection.applyDOMRange(range);
+						$setSelection(rangeSelection);
+					}
+					const fileNode = $createFileNode(file.name);
+					$insertNodes([fileNode]);
+					if ($isRootOrShadowRoot(fileNode.getParentOrThrow())) $wrapNodeInElement(fileNode, $createParagraphNode).selectEnd();
+					handleUpload(file).then((url) => {
+						editor.update(() => {
+							fileNode.setUploaded(url.url);
+						});
+					}).catch((error) => {
+						this.logger.error("File upload failed:", error);
+						editor.update(() => {
+							fileNode.setError("File upload failed : " + error.message);
+						});
 					});
 				});
+				return null;
 			});
-			return null;
-		});
-		this.register(registerFileCommand(editor, this.config.handleUpload));
-		this.register(registerFileNodeSelectionObserver(editor));
+			this.register(registerFileCommand(editor, handleUpload));
+		}
+		if (this.config?.decorator) this.register(registerFileNodeSelectionObserver(editor));
 		this.registerLiteXml();
 		this.registerMarkdownWriter();
 	}

package/es/plugins/image/node/block-image-node.d.ts

@@ -37,6 +37,7 @@ declare class BlockImageNode extends BaseImageNode {
   static importJSON(serializedNode: SerializedImageNode): BlockImageNode;
   static importDOM(): DOMConversionMap | null;
   decorate(): any;
+  exportJSON(): SerializedImageNode;
   createDOM(config: EditorConfig): HTMLElement;
 }
 //#endregion

package/es/plugins/image/node/block-image-node.js

@@ -101,6 +101,12 @@ var BlockImageNode = class BlockImageNode extends BaseImageNode {
 	decorate() {
 		return BlockImageNode._decorate(this);
 	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			status: this.__status
+		};
+	}
 	createDOM(config) {
 		const span = document.createElement("div");
 		const className = config.theme.blockImage;

package/es/plugins/image/node/image-node.d.ts

@@ -36,6 +36,7 @@ declare class ImageNode extends BaseImageNode {
   static importJSON(serializedNode: SerializedImageNode): ImageNode;
   static importDOM(): DOMConversionMap | null;
   decorate(): any;
+  exportJSON(): SerializedImageNode;
 }
 //#endregion
 export { ImageNode };

package/es/plugins/image/node/image-node.js

@@ -98,6 +98,12 @@ var ImageNode = class ImageNode extends BaseImageNode {
 	decorate() {
 		return ImageNode._decorate(this);
 	}
+	exportJSON() {
+		return {
+			...super.exportJSON(),
+			status: this.__status
+		};
+	}
 };
 function $createImageNode({ altText, height, maxWidth = 500, src, width, key, status }) {
 	return $applyNodeReplacement(new ImageNode({

package/es/plugins/image/plugin/index.d.ts

@@ -1,19 +1,19 @@
 import { IEditorPluginConstructor } from "../../../types/kernel.js";
 import { BlockImageNode } from "../node/block-image-node.js";
 import { ImageNode } from "../node/image-node.js";
-import { JSX } from "react";
 
 //#region src/plugins/image/plugin/index.d.ts
 interface ImagePluginOptions {
   defaultBlockImage?: boolean;
+  getImageWidth?: (file: File) => Promise<number>;
   handleRehost?: (url: string) => Promise<{
     url: string;
   }>;
-  handleUpload: (file: File) => Promise<{
+  handleUpload?: (file: File) => Promise<{
     url: string;
   }>;
   needRehost?: (url: string) => boolean;
-  renderImage: (node: ImageNode | BlockImageNode) => JSX.Element | null;
+  renderImage?: (node: ImageNode | BlockImageNode) => unknown;
   theme?: {
     blockImage?: string;
     image?: string;

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

@@ -19,12 +19,12 @@ const ImagePlugin = class extends KernelPlugin {
 		this.kernel = kernel;
 		this.config = config;
 		kernel.registerNodes([ImageNode, BlockImageNode]);
-		ImageNode.setDecorate(config.renderImage);
-		BlockImageNode.setDecorate(config.renderImage);
+		ImageNode.setDecorate(config?.renderImage ?? (() => null));
+		BlockImageNode.setDecorate(config?.renderImage ?? (() => null));
 		if (config?.theme) kernel.registerThemes(config.theme);
 	}
 	onInit(editor) {
-		this.register(registerImageCommand(editor, this.config.handleUpload, this.config?.defaultBlockImage !== false));
+		if (this.config?.handleUpload) this.register(registerImageCommand(editor, this.config.handleUpload, this.config?.defaultBlockImage !== false));
 		this.registerMarkdown();
 		this.registerLiteXml();
 		this.registerINode();
@@ -65,8 +65,9 @@ const ImagePlugin = class extends KernelPlugin {
 	registerUpload(editor) {
 		const uploadService = this.kernel.requireService(IUploadService);
 		if (!uploadService) return;
+		if (!this.config?.handleUpload) return;
 		uploadService.registerUpload(async (file, from, range) => {
-			const imageWidth = await this.getImageWidth(file);
+			const imageWidth = await this.config?.getImageWidth?.(file);
 			return editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
 				block: this.config?.defaultBlockImage !== false,
 				file,
@@ -159,25 +160,6 @@ const ImagePlugin = class extends KernelPlugin {
 			});
 		});
 	}
-	getImageWidth(file) {
-		return new Promise((resolve) => {
-			const reader = new FileReader();
-			reader.addEventListener("load", (e) => {
-				const img = new Image();
-				img.addEventListener("load", () => {
-					resolve(img.naturalWidth);
-				});
-				img.addEventListener("error", () => {
-					resolve(800);
-				});
-				img.src = e.target?.result;
-			});
-			reader.addEventListener("error", () => {
-				resolve(800);
-			});
-			reader.readAsDataURL(file);
-		});
-	}
 };
 //#endregion
 export { ImagePlugin };

package/es/plugins/image/react/ReactImagePlugin.js

@@ -7,6 +7,23 @@ import Image from "./components/Image.js";
 import { useLayoutEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/plugins/image/react/ReactImagePlugin.tsx
+const getImageWidth = (file) => new Promise((resolve) => {
+	const reader = new FileReader();
+	reader.addEventListener("load", (event) => {
+		const img = new window.Image();
+		img.addEventListener("load", () => {
+			resolve(img.naturalWidth);
+		});
+		img.addEventListener("error", () => {
+			resolve(800);
+		});
+		img.src = event.target?.result;
+	});
+	reader.addEventListener("error", () => {
+		resolve(800);
+	});
+	reader.readAsDataURL(file);
+});
 const defaultUpload = (file) => {
 	return new Promise((resolve) => {
 		setTimeout(() => {
@@ -20,6 +37,7 @@ const ReactImagePlugin = ({ theme, className, defaultBlockImage, handleUpload, n
 		editor.registerPlugin(UploadPlugin);
 		editor.registerPlugin(ImagePlugin, {
 			defaultBlockImage,
+			getImageWidth,
 			handleRehost,
 			handleUpload: handleUpload || defaultUpload,
 			needRehost,

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

@@ -1,6 +1,6 @@
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
-import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import { $isBlockImageNode } from "../../node/block-image-node.js";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import { styles } from "./style.js";
 import BrokenImage from "./BrokenImage.js";
 import ImageEditPopover from "./ImageEditPopover.js";

package/es/plugins/math/plugin/index.d.ts

@@ -4,7 +4,7 @@ import { LexicalEditor } from "lexical";
 
 //#region src/plugins/math/plugin/index.d.ts
 interface MathPluginOptions {
-  decorator: (node: MathInlineNode | MathBlockNode, editor: LexicalEditor) => unknown;
+  decorator?: (node: MathInlineNode | MathBlockNode, editor: LexicalEditor) => unknown;
   theme?: {
     mathBlock?: string;
     mathInline?: string;

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

@@ -1,9 +1,9 @@
 import { compareNodeOrder, init_utils } from "../../../../editor-kernel/utils.js";
 import { useLexicalComposerContext } from "../../../../editor-kernel/react/react-context.js";
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
-import PortalAnchor from "../../../../editor-kernel/react/PortalAnchor.js";
 import { $isMathNode, MathBlockNode } from "../../node/index.js";
 import { SELECT_MATH_SIDE_COMMAND, UPDATE_MATH_COMMAND } from "../../command/index.js";
+import PortalAnchor from "../../../../editor-kernel/react/PortalAnchor.js";
 import MathEditorContainer from "./MathEditorContainer.js";
 import MathEditorContent from "./MathEditorContent.js";
 import { memo, useCallback, useEffect, useRef, useState } from "react";

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

@@ -1,7 +1,7 @@
 import { createDebugLogger, init_debug } from "../../../../utils/debug.js";
 import { useLexicalEditor } from "../../../../editor-kernel/react/useLexicalEditor.js";
-import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import { $isMathNode, MathBlockNode } from "../../node/index.js";
+import { useLexicalNodeSelection } from "../../../../editor-kernel/react/useLexicalNodeSelection.js";
 import Placeholder from "./Placeholder.js";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";

package/es/plugins/mention/plugin/index.d.ts

@@ -6,7 +6,7 @@ import { LexicalEditor } from "lexical";
 
 //#region src/plugins/mention/plugin/index.d.ts
 interface MentionPluginOptions {
-  decorator: (node: MentionNode, editor: LexicalEditor) => any;
+  decorator?: (node: MentionNode, editor: LexicalEditor) => any;
   markdownReader?: (node: Html, children: INode[]) => SerializedMentionNode | null | false;
   markdownWriter?: (mention: MentionNode) => string;
   theme?: {

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

@@ -24,7 +24,7 @@ const MentionPlugin = class extends KernelPlugin {
 	}
 	onInit(editor) {
 		this.register(registerMentionCommand(editor));
-		this.register(registerMentionNodeSelectionObserver(editor));
+		if (this.config?.decorator) this.register(registerMentionNodeSelectionObserver(editor));
 		this.registerMarkdown();
 		this.registerLiteXml();
 	}

package/es/react/hooks/useEditorState/index.js

@@ -3,13 +3,13 @@ import { noop } from "../../../editor-kernel/utils.js";
 import { $createCodeMirrorNode, $isCodeMirrorNode } from "../../../plugins/codemirror-block/node/CodeMirrorNode.js";
 import { $isSelectionInCodeInline } from "../../../plugins/code/node/code.js";
 import { INSERT_CODEINLINE_COMMAND } from "../../../plugins/code/command/index.js";
+import { UPDATE_CODEBLOCK_LANG } from "../../../plugins/codeblock/command/symbols.js";
 import { $isLinkNode, TOGGLE_LINK_COMMAND, formatUrl } from "../../../plugins/link/node/LinkNode.js";
 import { extractUrlFromText, sanitizeUrl, validateUrl } from "../../../plugins/link/utils/index.js";
 import { INSERT_CHECK_LIST_COMMAND } from "../../../plugins/list/plugin/checkList.js";
-import { UPDATE_CODEBLOCK_LANG } from "../../../plugins/codeblock/command/index.js";
+import { $createMathBlockNode, $createMathInlineNode } from "../../../plugins/math/node/index.js";
 import { $isLinkHighlightNode } from "../../../plugins/link-highlight/node/link-highlight.js";
 import { INSERT_LINK_HIGHLIGHT_COMMAND } from "../../../plugins/link-highlight/command/index.js";
-import { $createMathBlockNode, $createMathInlineNode } from "../../../plugins/math/node/index.js";
 import { $findTopLevelElement, formatParagraph, getSelectedNode } from "./utils.js";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { $createNodeSelection, $getSelection, $isParagraphNode, $isRangeSelection, $setSelection, CAN_REDO_COMMAND, CAN_UNDO_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, REDO_COMMAND, SELECTION_CHANGE_COMMAND, UNDO_COMMAND } from "lexical";

package/es/renderer/engine/shiki.js

@@ -1,6 +1,6 @@
-import { bundledLanguagesInfo } from "shiki";
 import { createHighlighterCoreSync, isSpecialLang } from "@shikijs/core";
 import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript";
+import { bundledLanguagesInfo } from "shiki";
 //#region src/renderer/engine/shiki.ts
 let _highlighter = null;
 function getHighlighter() {

package/es/renderer/nodes/index.js

@@ -2,15 +2,15 @@ import { CursorNode } from "../../plugins/common/node/cursor.js";
 import { DiffNode } from "../../plugins/litexml/node/DiffNode.js";
 import { CodeMirrorNode } from "../../plugins/codemirror-block/node/CodeMirrorNode.js";
 import { CodeNode } from "../../plugins/code/node/code.js";
-import { HorizontalRuleNode } from "../../plugins/hr/node/HorizontalRuleNode.js";
-import { AutoLinkNode, LinkNode } from "../../plugins/link/node/LinkNode.js";
-import { PlaceholderBlockNode, PlaceholderNode } from "../../plugins/auto-complete/node/placeholderNode.js";
 import { FileNode } from "../../plugins/file/node/FileNode.js";
+import { HorizontalRuleNode } from "../../plugins/hr/node/HorizontalRuleNode.js";
 import { BlockImageNode } from "../../plugins/image/node/block-image-node.js";
 import { ImageNode } from "../../plugins/image/node/image-node.js";
-import { LinkHighlightNode } from "../../plugins/link-highlight/node/link-highlight.js";
+import { AutoLinkNode, LinkNode } from "../../plugins/link/node/LinkNode.js";
 import { MathBlockNode, MathInlineNode } from "../../plugins/math/node/index.js";
 import { MentionNode } from "../../plugins/mention/node/MentionNode.js";
+import { PlaceholderBlockNode, PlaceholderNode } from "../../plugins/auto-complete/node/placeholderNode.js";
+import { LinkHighlightNode } from "../../plugins/link-highlight/node/link-highlight.js";
 import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
 import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { ListItemNode, ListNode } from "@lexical/list";

package/es/renderer/renderers/codeblock.js

@@ -10,6 +10,7 @@ function CodeBlockRenderer({ node }) {
 		defaultExpand: true,
 		language: language || "text",
 		variant: "filled",
+		wrap: true,
 		children: code
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/editor",
-  "version": "4.17.2",
+  "version": "4.18.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",