@lobehub/editor 4.23.1 → 4.23.2

package/es/react/Editor/Editor.js

@@ -47,35 +47,36 @@ const Editor = memo(({ content, style, className, collaboration, debounceWait =
 		markdownWriter,
 		className
 	]);
+	const memoSlash = useMemo(() => {
+		if (!enableSlash && !enableMention) return null;
+		return /* @__PURE__ */ jsxs(ReactSlashPlugin, {
+			getPopupContainer,
+			placement: slashPlacement,
+			children: [enableSlash ? /* @__PURE__ */ jsx(ReactSlashOption, {
+				maxLength: 8,
+				trigger: "/",
+				...slashOption
+			}) : void 0, enableMention ? /* @__PURE__ */ jsx(ReactSlashOption, {
+				maxLength: 8,
+				trigger: "@",
+				...restMentionOption
+			}) : void 0]
+		});
+	}, [
+		enableSlash,
+		enableMention,
+		slashOption,
+		slashPlacement,
+		getPopupContainer,
+		restMentionOption
+	]);
 	return /* @__PURE__ */ jsxs(ReactEditor, {
 		config,
 		editor,
 		onInit,
 		children: [
 			memoPlugins,
-			useMemo(() => {
-				if (!enableSlash && !enableMention) return null;
-				return /* @__PURE__ */ jsxs(ReactSlashPlugin, {
-					getPopupContainer,
-					placement: slashPlacement,
-					children: [enableSlash ? /* @__PURE__ */ jsx(ReactSlashOption, {
-						maxLength: 8,
-						trigger: "/",
-						...slashOption
-					}) : void 0, enableMention ? /* @__PURE__ */ jsx(ReactSlashOption, {
-						maxLength: 8,
-						trigger: "@",
-						...restMentionOption
-					}) : void 0]
-				});
-			}, [
-				enableSlash,
-				enableMention,
-				slashOption,
-				slashPlacement,
-				getPopupContainer,
-				restMentionOption
-			]),
+			memoSlash,
 			memoMention,
 			/* @__PURE__ */ jsx(ReactPlainText, {
 				autoFocus,

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

@@ -81,11 +81,13 @@ function useEditorState(editor) {
 			else setCodeblockLang("");
 			const isBlockquote = $isQuoteNode(element) && $isQuoteNode(focusElement) && elementKey === focusElement.getKey();
 			setIsInBlockquote(isBlockquote);
-			if (elementDOM !== null) if ($isListNode(element)) {
-				const parentList = $getNearestNodeOfType(anchorNode, ListNode);
-				const type = parentList ? parentList.getListType() : element.getListType();
-				setBlockType(type);
-			} else $handleHeadingNode(element);
+			if (elementDOM !== null) {
+				if ($isListNode(element)) {
+					const parentList = $getNearestNodeOfType(anchorNode, ListNode);
+					const type = parentList ? parentList.getListType() : element.getListType();
+					setBlockType(type);
+				} else $handleHeadingNode(element);
+			}
 		} else if (!selection) {
 			setIsSelected(false);
 			setIsBold(false);
@@ -149,20 +151,23 @@ function useEditorState(editor) {
 			let selection = $getSelection();
 			if (!selection) return;
 			const lexicalEditor = editor?.getLexicalEditor();
-			if (lexicalEditor ? lexicalEditor._nodes.has("code") && lexicalEditor._nodes.get("code")?.klass.name === "CodeMirrorNode" : false) if (!$isRangeSelection(selection) || selection.isCollapsed()) {
-				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
-				const nodeSelection = $createNodeSelection();
-				nodeSelection.add(codeMirrorNode.getKey());
-				selection.insertNodes([codeMirrorNode]);
-				$setSelection(nodeSelection);
-			} else {
-				const codeMirrorNode = $createCodeMirrorNode("plain", selection.getTextContent());
-				selection.insertNodes([codeMirrorNode]);
-				const nodeSelection = $createNodeSelection();
-				nodeSelection.add(codeMirrorNode.getKey());
-				$setSelection(nodeSelection);
-			}
-			else if (!$isRangeSelection(selection) || selection.isCollapsed()) $setBlocksType(selection, () => $createCodeNode());
+			if (lexicalEditor ? lexicalEditor._nodes.has("code") && lexicalEditor._nodes.get("code")?.klass.name === "CodeMirrorNode" : false) {
+				if (!$isRangeSelection(selection) || selection.isCollapsed()) {
+					const textContent = selection.getTextContent();
+					const codeMirrorNode = $createCodeMirrorNode("plain", textContent);
+					const nodeSelection = $createNodeSelection();
+					nodeSelection.add(codeMirrorNode.getKey());
+					selection.insertNodes([codeMirrorNode]);
+					$setSelection(nodeSelection);
+				} else {
+					const textContent = selection.getTextContent();
+					const codeMirrorNode = $createCodeMirrorNode("plain", textContent);
+					selection.insertNodes([codeMirrorNode]);
+					const nodeSelection = $createNodeSelection();
+					nodeSelection.add(codeMirrorNode.getKey());
+					$setSelection(nodeSelection);
+				}
+			} else if (!$isRangeSelection(selection) || selection.isCollapsed()) $setBlocksType(selection, () => $createCodeNode());
 			else {
 				const textContent = selection.getTextContent();
 				const codeNode = $createCodeNode();
@@ -223,7 +228,8 @@ function useEditorState(editor) {
 						const maybeUrl = formatUrl(text.trim());
 						if (validateUrl(maybeUrl)) nextUrl = maybeUrl;
 					} else {
-						const found = extractUrlFromText(selection.anchor.getNode().getTextContent());
+						const lineText = selection.anchor.getNode().getTextContent();
+						const found = extractUrlFromText(lineText);
 						if (found && validateUrl(formatUrl(found.url))) expandTo = {
 							index: found.index,
 							length: found.length
@@ -249,7 +255,8 @@ function useEditorState(editor) {
 		editor?.getLexicalEditor()?.update(() => {
 			const selection = $getSelection();
 			if ($isRangeSelection(selection)) {
-				const element = $findTopLevelElement(selection.anchor.getNode());
+				const anchorNode = selection.anchor.getNode();
+				const element = $findTopLevelElement(anchorNode);
 				const mathNode = $isParagraphNode(element) && selection.isCollapsed() && selection.anchor.offset === 0 && element.getTextContentSize() === 0 || !selection.isCollapsed() && selection.anchor.offset === 0 && selection.focus.offset === element.getTextContentSize() ? $createMathBlockNode("") : $createMathInlineNode("");
 				selection.insertNodes([mathNode]);
 				const nodeSelection = $createNodeSelection();

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

@@ -12,7 +12,8 @@ const $findTopLevelElement = (node) => {
 };
 const formatParagraph = (editor) => {
 	editor?.update(() => {
-		$setBlocksType($getSelection(), () => $createParagraphNode());
+		const selection = $getSelection();
+		$setBlocksType(selection, () => $createParagraphNode());
 	});
 };
 const getSelectedNode = (selection) => {

package/es/renderer/engine/render-builtin-node.js

@@ -75,9 +75,7 @@ function renderDiffNode(node, key, children) {
 		case "listItemModify":
 			content = [wrapChild(renderedChildren[0], `${key}-old`, DIFF_DELETED_STYLE), wrapChild(renderedChildren[1], `${key}-new`)];
 			break;
-		default:
-			content = renderedChildren;
-			break;
+		default: content = renderedChildren;
 	}
 	return /* @__PURE__ */ jsx("div", {
 		className: "ne-diff",
@@ -93,10 +91,13 @@ function renderDiffNode(node, key, children) {
 function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 	switch (node.type) {
 		case "root": return children;
-		case "paragraph": return /* @__PURE__ */ jsx("p", {
-			style: node.format ? { textAlign: node.format } : void 0,
-			children
-		}, key);
+		case "paragraph": {
+			const style = node.format ? { textAlign: node.format } : void 0;
+			return /* @__PURE__ */ jsx("p", {
+				style,
+				children
+			}, key);
+		}
 		case "heading": {
 			const tag = node.tag;
 			const baseSlug = textToSlug(textContent || "");
@@ -117,11 +118,15 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 			className: "editor_quote",
 			children
 		}, key);
-		case "list": return /* @__PURE__ */ jsx(node.listType === "number" ? "ol" : "ul", {
-			className: getListClassName(node.listType),
-			start: node.start !== 1 ? node.start : void 0,
-			children
-		}, key);
+		case "list": {
+			const Tag = node.listType === "number" ? "ol" : "ul";
+			const listClass = getListClassName(node.listType);
+			return /* @__PURE__ */ jsx(Tag, {
+				className: listClass,
+				start: node.start !== 1 ? node.start : void 0,
+				children
+			}, key);
+		}
 		case "listitem": {
 			const isChecklist = node.checked !== void 0;
 			const hasNestedList = node.children?.some((c) => c.type === "list");
@@ -143,12 +148,15 @@ function renderBuiltinNode(node, key, children, headingSlugs, textContent) {
 			target: node.target || void 0,
 			children
 		}, key);
-		case "linkHighlight": return /* @__PURE__ */ jsx("a", {
-			href: textContent ? sanitizeUrl(formatLinkHighlightUrl(textContent)) : void 0,
-			rel: "noopener noreferrer",
-			target: "_blank",
-			children
-		}, key);
+		case "linkHighlight": {
+			const url = textContent ? sanitizeUrl(formatLinkHighlightUrl(textContent)) : void 0;
+			return /* @__PURE__ */ jsx("a", {
+				href: url,
+				rel: "noopener noreferrer",
+				target: "_blank",
+				children
+			}, key);
+		}
 		case "table": return /* @__PURE__ */ jsx("div", {
 			className: getTableWrapperClassName(),
 			children: /* @__PURE__ */ jsx("table", {

package/es/renderer/engine/render-tree.js

@@ -8,7 +8,10 @@ function isHeadlessRenderableNode(node) {
 function renderNode(node, registry, headingSlugs, overrides, key, renderContext) {
 	const type = node.getType();
 	if (type === "cursor") return null;
-	if ($isTextNode(node)) return renderTextNode(node.exportJSON(), key);
+	if ($isTextNode(node)) {
+		const serialized = node.exportJSON();
+		return renderTextNode(serialized, key);
+	}
 	const serialized = node.exportJSON();
 	let children = null;
 	if ($isElementNode(node)) {

package/es/renderer/renderers/mermaid.js

@@ -3,6 +3,7 @@ import { Mermaid } from "@lobehub/ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/renderer/renderers/mermaid.tsx
 function renderMermaidBlock(node, key) {
+	const code = node.code || "";
 	return /* @__PURE__ */ jsx(Mermaid, {
 		animated: false,
 		defaultExpand: true,
@@ -10,7 +11,7 @@ function renderMermaidBlock(node, key) {
 		style: { width: "100%" },
 		theme: "lobe-theme",
 		variant: "filled",
-		children: node.code || ""
+		children: code
 	}, key);
 }
 //#endregion

package/package.json

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