@lobehub/editor 4.20.3 → 4.21.0

package/es/codemirror/components/Toolbar.js

@@ -6,7 +6,7 @@ import { ActionIcon, Flexbox } from "@lobehub/ui";
 import { ChevronDown, ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/codemirror/components/Toolbar.tsx
-const Toolbar = ({ selectedLang, onLanguageChange, onCopy, tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, onClick, expand, toggleExpand, labels, languageOptions }) => {
+const Toolbar = ({ selectedLang, onLanguageChange, onCopy, tabSize, onTabSizeChange, useTabs, onUseTabsChange, showLineNumbers, onShowLineNumbersChange, onClick, expand, toggleExpand, labels, languageOptions, extra }) => {
 	return /* @__PURE__ */ jsxs(Flexbox, {
 		align: "center",
 		className: "cm-header-toolbar",
@@ -24,6 +24,7 @@ const Toolbar = ({ selectedLang, onLanguageChange, onCopy, tabSize, onTabSizeCha
 			horizontal: true,
 			onClick: (e) => e.stopPropagation(),
 			children: [
+				extra,
 				/* @__PURE__ */ jsx(MoreOptions, {
 					labels,
 					onShowLineNumbersChange,

package/es/codemirror/constants.js

@@ -184,6 +184,12 @@ const LANGUAGES = [
 		syntax: "markdown",
 		value: "markdown"
 	},
+	{
+		ext: ["mermaid", "mmd"],
+		name: "Mermaid",
+		syntax: "simplemode",
+		value: "mermaid"
+	},
 	{
 		name: "MATLAB",
 		syntax: "octave",

package/es/codemirror/types.d.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react";
+
 //#region src/codemirror/types.d.ts
 interface CodeMirrorMode {
   ext?: string[];
@@ -7,6 +9,7 @@ interface CodeMirrorMode {
 }
 interface CodeMirrorLabels {
   copy?: string;
+  preview?: string;
   selectLanguage?: string;
   showLineNumbers?: string;
   tabSize?: string;
@@ -35,6 +38,7 @@ interface MoreOptionsProps {
 }
 interface ToolbarProps {
   expand?: boolean;
+  extra?: ReactNode;
   labels?: CodeMirrorLabels;
   languageOptions?: CodeMirrorMode[];
   onClick?: () => void;

package/es/headless.d.ts

@@ -62,6 +62,7 @@ declare const _default: {
   cancel: string;
   codemirror: {
     copySuccess: string;
+    preview: string;
     selectLanguage: string;
     selectTheme: string;
     showLineNumbers: string;

package/es/headless.js

@@ -28,6 +28,7 @@ var locale_default = {
 	cancel: "Cancel",
 	codemirror: {
 		copySuccess: "Code copied to clipboard",
+		preview: "Preview",
 		selectLanguage: "Select language",
 		selectTheme: "Select theme",
 		showLineNumbers: "Show Line Numbers",
@@ -5449,6 +5450,12 @@ const LANGUAGES = [
 		syntax: "markdown",
 		value: "markdown"
 	},
+	{
+		ext: ["mermaid", "mmd"],
+		name: "Mermaid",
+		syntax: "simplemode",
+		value: "mermaid"
+	},
 	{
 		name: "MATLAB",
 		syntax: "octave",

package/es/locale/index.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
   cancel: string;
   codemirror: {
     copySuccess: string;
+    preview: string;
     selectLanguage: string;
     selectTheme: string;
     showLineNumbers: string;

package/es/locale/index.js

@@ -11,6 +11,7 @@ var init_locale = __esmMin((() => {
 		cancel: "Cancel",
 		codemirror: {
 			copySuccess: "Code copied to clipboard",
+			preview: "Preview",
 			selectLanguage: "Select language",
 			selectTheme: "Select theme",
 			showLineNumbers: "Show Line Numbers",

package/es/plugins/codemirror-block/react/CodemirrorNode.js

@@ -6,7 +6,9 @@ import { lobeTheme } from "../../../codemirror/theme.js";
 import { useTranslation } from "../../../editor-kernel/react/useTranslation.js";
 import { SELECT_AFTER_CODEMIRROR_COMMAND, SELECT_BEFORE_CODEMIRROR_COMMAND } from "../command/index.js";
 import { useLexicalNodeSelection } from "../../../editor-kernel/react/useLexicalNodeSelection.js";
-import { Block } from "@lobehub/ui";
+import MermaidPreview from "./MermaidPreview.js";
+import { ActionIcon, Block } from "@lobehub/ui";
+import { CodeXml, Eye } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
@@ -26,6 +28,8 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 	const [useTabs, setUseTabs] = useState(node.options.indentWithTabs ?? false);
 	const [showLineNumbers, setShowLineNumbers] = useState(node.options.lineNumbers ?? false);
 	const [expand, setExpand] = useState(true);
+	const [preview, setPreview] = useState(false);
+	const [code, setCode] = useState(node.code);
 	const handleCopy = useCallback(async () => {
 		if (instanceRef.current) {
 			const code = instanceRef.current.getValue();
@@ -35,6 +39,7 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 		}
 	}, []);
 	const labels = useMemo(() => ({
+		preview: t("codemirror.preview"),
 		selectLanguage: t("codemirror.selectLanguage"),
 		showLineNumbers: t("codemirror.showLineNumbers"),
 		tabSize: t("codemirror.tabSize"),
@@ -42,6 +47,7 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 	}), [t]);
 	const handleLanguageChange = useCallback((value) => {
 		setSelectedLang(value);
+		if (value !== "mermaid") setPreview(false);
 		if (instanceRef.current) instanceRef.current.setOption("mode", value);
 		editor.update(() => {
 			node.setLang(value);
@@ -145,7 +151,9 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 					});
 				});
 				instance.on("change", () => {
-					isEmptyRef.current = !instance.getValue().trim();
+					const currentValue = instance.getValue();
+					isEmptyRef.current = !currentValue.trim();
+					setCode(currentValue);
 				});
 				instance.on("change", debounce(() => {
 					const currentValue = instance.getValue();
@@ -191,27 +199,42 @@ const ReactCodemirrorNode = ({ node, className, editor }) => {
 		onMouseUp: (e) => e.stopPropagation(),
 		onSelect: (e) => e.stopPropagation(),
 		variant: "filled",
-		children: [/* @__PURE__ */ jsx(Toolbar, {
-			expand,
-			labels,
-			onClick: () => setExpand(!expand),
-			onCopy: handleCopy,
-			onLanguageChange: handleLanguageChange,
-			onShowLineNumbersChange: handleShowLineNumbersChange,
-			onTabSizeChange: handleTabSizeChange,
-			onUseTabsChange: handleUseTabsChange,
-			selectedLang,
-			showLineNumbers,
-			tabSize,
-			toggleExpand: () => setExpand(!expand),
-			useTabs
-		}), /* @__PURE__ */ jsx("div", {
-			className: cx("cm-container", !expand && "cm-container-collapsed"),
-			children: /* @__PURE__ */ jsx("textarea", {
-				className: "cm-textarea",
-				ref
+		children: [
+			/* @__PURE__ */ jsx(Toolbar, {
+				expand,
+				extra: selectedLang === "mermaid" ? /* @__PURE__ */ jsx(ActionIcon, {
+					className: "cm-hidden-actions",
+					icon: preview ? CodeXml : Eye,
+					onClick: () => setPreview(!preview),
+					size: "small",
+					title: labels.preview
+				}) : void 0,
+				labels,
+				onClick: () => setExpand(!expand),
+				onCopy: handleCopy,
+				onLanguageChange: handleLanguageChange,
+				onShowLineNumbersChange: handleShowLineNumbersChange,
+				onTabSizeChange: handleTabSizeChange,
+				onUseTabsChange: handleUseTabsChange,
+				selectedLang,
+				showLineNumbers,
+				tabSize,
+				toggleExpand: () => setExpand(!expand),
+				useTabs
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cx("cm-container", (!expand || preview && selectedLang === "mermaid") && "cm-container-collapsed"),
+				children: /* @__PURE__ */ jsx("textarea", {
+					className: "cm-textarea",
+					ref
+				})
+			}),
+			expand && preview && selectedLang === "mermaid" && /* @__PURE__ */ jsx("div", {
+				className: "cm-container",
+				onMouseDown: (e) => e.stopPropagation(),
+				children: /* @__PURE__ */ jsx(MermaidPreview, { code })
 			})
-		})]
+		]
 	});
 };
 ReactCodemirrorNode.displayName = "ReactCodemirrorNode";

package/es/plugins/codemirror-block/react/MermaidPreview.js

@@ -0,0 +1,47 @@
+"use client";
+import { Mermaid } from "@lobehub/ui";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cssVar } from "antd-style";
+//#region src/plugins/codemirror-block/react/MermaidPreview.tsx
+const MermaidPreview = ({ code }) => {
+	const [error, setError] = useState(null);
+	useEffect(() => {
+		if (!code.trim()) {
+			setError(null);
+			return;
+		}
+		let cancelled = false;
+		import("mermaid").then(async (mod) => {
+			try {
+				await mod.default.parse(code);
+				if (!cancelled) setError(null);
+			} catch (error_) {
+				if (!cancelled) setError(error_ instanceof Error ? error_.message : String(error_));
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [code]);
+	if (!code.trim()) return null;
+	if (error) return /* @__PURE__ */ jsx("div", {
+		style: {
+			color: cssVar.colorTextDescription,
+			fontFamily: cssVar.fontFamilyCode,
+			fontSize: 12,
+			padding: 16,
+			whiteSpace: "pre-wrap"
+		},
+		children: error
+	});
+	return /* @__PURE__ */ jsx(Mermaid, {
+		animated: false,
+		theme: "lobe-theme",
+		variant: "borderless",
+		children: code
+	});
+};
+MermaidPreview.displayName = "MermaidPreview";
+//#endregion
+export { MermaidPreview as default };

package/package.json

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