@lobehub/editor 4.20.2 → 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/es/plugins/toolbar/react/index.js

@@ -6,21 +6,36 @@ import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command/index.j
 import { getDOMRangeRect } from "../utils/getDOMRangeRect.js";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition.js";
 import { styles } from "./style.js";
-import { Block } from "@lobehub/ui";
-import { useCallback, useRef } from "react";
+import { Block, LOBE_THEME_APP_ID } from "@lobehub/ui";
+import { useCallback, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
+import { createPortal } from "react-dom";
 //#region src/plugins/toolbar/react/index.tsx
 init_debug();
-const ReactToolbarPlugin = ({ className, children }) => {
+const resolveDefaultPortalContainer = () => {
+	if (typeof document === "undefined") return null;
+	return document.getElementById(LOBE_THEME_APP_ID) ?? document.body;
+};
+const ReactToolbarPlugin = ({ className, children, getPopupContainer, usePortal = true, zIndex }) => {
 	const popupCharStylesEditorRef = useRef(null);
 	const anchorElemRef = useRef(null);
+	const [portalContainer, setPortalContainer] = useState(null);
 	const [kernelEditor] = useLexicalComposerContext();
 	const { isDarkMode } = useThemeMode();
 	const isMouseDownRef = useRef(false);
 	const logger = createDebugLogger("plugin", "toolbar");
+	const resolvePortalContainer = useCallback(() => {
+		if (!usePortal) return null;
+		if (getPopupContainer) return getPopupContainer();
+		return resolveDefaultPortalContainer();
+	}, [getPopupContainer, usePortal]);
+	const syncPortalContainer = useCallback(() => {
+		const nextContainer = resolvePortalContainer();
+		setPortalContainer((current) => current === nextContainer ? current : nextContainer);
+	}, [resolvePortalContainer]);
 	const $updateTextFormatFloatingToolbar = useCallback((editor) => {
 		if (!anchorElemRef.current) return;
 		const selection = $getSelection();
@@ -65,6 +80,14 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			};
 		}
 	}, []);
+	useLexicalEditor((editor) => {
+		if (!usePortal) {
+			setPortalContainer(null);
+			return;
+		}
+		syncPortalContainer();
+		return editor.registerRootListener(syncPortalContainer);
+	}, [syncPortalContainer, usePortal]);
 	useLexicalEditor((editor) => {
 		const handleMouseDown = handleMouseDownFactory(() => {
 			editor.dispatchCommand(HIDE_TOOLBAR_COMMAND, void 0);
@@ -75,10 +98,32 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			});
 		});
 		const rootElement = editor.getRootElement();
+		const editorWindow = editor._window ?? rootElement?.ownerDocument.defaultView ?? globalThis.window ?? null;
+		let animationFrameId = null;
+		const updateToolbarPosition = () => {
+			if (!editorWindow || isMouseDownRef.current || animationFrameId !== null) return;
+			animationFrameId = editorWindow.requestAnimationFrame(() => {
+				animationFrameId = null;
+				editor.getEditorState().read(() => {
+					$updateTextFormatFloatingToolbar(editor);
+				});
+			});
+		};
+		const scrollListenerOptions = {
+			capture: true,
+			passive: true
+		};
+		const scrollCleanupOptions = { capture: true };
+		const resizeListenerOptions = { passive: true };
 		if (rootElement) {
 			rootElement.addEventListener("mousedown", handleMouseDown);
 			document.addEventListener("mouseup", handleMouseUp);
 		}
+		if (editorWindow) {
+			editorWindow.addEventListener("scroll", updateToolbarPosition, scrollListenerOptions);
+			editorWindow.document.addEventListener("scroll", updateToolbarPosition, scrollListenerOptions);
+			editorWindow.addEventListener("resize", updateToolbarPosition, resizeListenerOptions);
+		}
 		return mergeRegister(registerToolbarCommand(editor, { onHide: $hideFloatingToolbar }), editor.registerUpdateListener(({ editorState }) => {
 			if (!isMouseDownRef.current) editorState.read(() => {
 				$updateTextFormatFloatingToolbar(editor);
@@ -91,11 +136,18 @@ const ReactToolbarPlugin = ({ className, children }) => {
 				rootElement.removeEventListener("mousedown", handleMouseDown);
 				document.removeEventListener("mouseup", handleMouseUp);
 			}
+			if (editorWindow) {
+				editorWindow.removeEventListener("scroll", updateToolbarPosition, scrollCleanupOptions);
+				editorWindow.document.removeEventListener("scroll", updateToolbarPosition, scrollCleanupOptions);
+				editorWindow.removeEventListener("resize", updateToolbarPosition);
+				if (animationFrameId !== null) editorWindow.cancelAnimationFrame(animationFrameId);
+			}
 		});
 	});
-	return /* @__PURE__ */ jsx("div", {
-		className: styles.anchor,
+	const toolbarNode = /* @__PURE__ */ jsx("div", {
+		className: usePortal ? styles.portalAnchor : styles.anchor,
 		ref: anchorElemRef,
+		style: usePortal && zIndex !== void 0 ? { zIndex } : void 0,
 		children: /* @__PURE__ */ jsx(Block, {
 			className: cx(isDarkMode ? styles.toolbarDark : styles.toolbarLight, className),
 			padding: 4,
@@ -104,6 +156,8 @@ const ReactToolbarPlugin = ({ className, children }) => {
 			children
 		})
 	});
+	if (usePortal) return portalContainer ? createPortal(toolbarNode, portalContainer) : null;
+	return toolbarNode;
 };
 //#endregion
 export { ReactToolbarPlugin };

package/es/plugins/toolbar/react/style.js

@@ -3,8 +3,15 @@ import { createStaticStyles } from "antd-style";
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	anchor: css`
     position: relative;
+  `,
+	portalAnchor: css`
+    pointer-events: none;
+    position: fixed;
+    z-index: 1100;
+    inset: 0;
   `,
 	toolbarDark: css`
+    pointer-events: auto;
     will-change: transform;
 
     position: absolute;
@@ -28,6 +35,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition: opacity 0.12s ${cssVar.motionEaseOut};
   `,
 	toolbarLight: css`
+    pointer-events: auto;
     will-change: transform;
 
     position: absolute;

package/es/plugins/toolbar/react/type.d.ts

@@ -1,9 +1,12 @@
-import { ReactNode } from "react";
+import { CSSProperties, ReactNode } from "react";
 
 //#region src/plugins/toolbar/react/type.d.ts
 interface ReactToolbarPluginProps {
   children?: ReactNode;
   className?: string;
+  getPopupContainer?: () => HTMLElement | null;
+  usePortal?: boolean;
+  zIndex?: CSSProperties['zIndex'];
 }
 //#endregion
 export { ReactToolbarPluginProps };

package/package.json

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