@lobehub/editor 4.20.3 → 4.22.0

package/README.md

@@ -70,7 +70,7 @@ A modern, extensible rich text editor built on Meta's Lexical framework with dua
 - 🎨 **Customizable UI** - Antd-styled components with flexible theming
 - 🔗 **File & Media Support** - Native support for images, files, tables, and more
 - 🎯 **TypeScript Native** - Built with TypeScript for excellent developer experience
-- 📱 **Modern Build System** - Optimized with Vite, Dumi docs, and comprehensive testing
+- 📱 **Modern Build System** - Optimized with Vite, lobedocs, and comprehensive testing
 
 ## 📦 Installation
 
@@ -419,21 +419,22 @@ $ pnpm install
 $ pnpm run dev
 ```
 
-This will start the Dumi documentation server with live playground at `http://localhost:8000`.
+This starts the lobedocs development server with the live component playground. The local URL is
+printed in the terminal.
 
 ### Available Scripts
 
-| Script               | Description                                   |
-| -------------------- | --------------------------------------------- |
-| `pnpm dev`           | Start Dumi development server with playground |
-| `pnpm build`         | Build library and generate type definitions   |
-| `pnpm test`          | Run tests with Vitest                         |
-| `pnpm test:coverage` | Run tests with coverage report                |
-| `pnpm lint`          | Lint and fix code with ESLint                 |
-| `pnpm type-check`    | Type check with TypeScript                    |
-| `pnpm ci`            | Run all CI checks (lint, type-check, test)    |
-| `pnpm docs:build`    | Build documentation for production            |
-| `pnpm release`       | Publish new version with semantic-release     |
+| Script               | Description                                  |
+| -------------------- | -------------------------------------------- |
+| `pnpm dev`           | Start lobedocs with the component playground |
+| `pnpm build`         | Build library and generate type definitions  |
+| `pnpm test`          | Run tests with Vitest                        |
+| `pnpm test:coverage` | Run tests with coverage report               |
+| `pnpm lint`          | Lint and fix code with ESLint                |
+| `pnpm type-check`    | Type check with TypeScript                   |
+| `pnpm ci`            | Run all CI checks (lint, type-check, test)   |
+| `pnpm docs:build`    | Build documentation for production           |
+| `pnpm release`       | Publish new version with semantic-release    |
 
 ### Debug Environment Variables
 
@@ -587,9 +588,9 @@ lobe-editor/
 │   └── index.ts                # Public API exports
 │
 ├── docs/                       # 📚 Documentation source
+├── docs.config.ts              # lobedocs site configuration
 ├── tests/                      # 🧪 Test files
-├── vitest.config.ts           # Test configuration
-└── .dumi/                      # Dumi doc build cache
+└── vitest.config.ts            # Test configuration
 ```
 
 The architecture follows a **dual-layer design**:

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.22.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",
@@ -61,11 +61,11 @@
     "build:clean": "tsx ./scripts/clean.ts",
     "build:watch": "tsdown --watch",
     "ci": "npm run lint:circular && npm run lint && npm run type-check",
-    "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
-    "dev": "dumi dev",
-    "docs:build": "dumi build",
-    "docs:build-analyze": "ANALYZE=1 dumi build",
-    "docs:dev": "dumi dev",
+    "clean": "rm -r es lib dist coverage .react-router .eslintcache node_modules/.cache",
+    "dev": "lobedocs dev",
+    "docs:build": "lobedocs build",
+    "docs:build-analyze": "ANALYZE=1 lobedocs build",
+    "docs:dev": "lobedocs dev",
     "postinstall": "node ./scripts/postinstall-lexical-patch.cjs",
     "lint": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:circular": "dpdm src/**/*.{ts,tsx}  --warning false  --tree false  --exit-code circular:1  -T true",
@@ -76,7 +76,7 @@
     "prepare": "husky && npm run setup",
     "prettier": "prettier -c --write --no-error-on-unmatched-pattern \"**/**\"",
     "release": "semantic-release",
-    "setup": "dumi setup",
+    "setup": "lobedocs typegen",
     "start": "npm run docs:dev",
     "test": "vitest",
     "test:coverage": "vitest run --coverage  --passWithNoTests",