@lobehub/ui 1.168.17 → 1.168.18

package/es/{Mermaid → hooks}/useMermaid.js

@@ -9,29 +9,118 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useTheme } from 'antd-style';
-import mermaid from 'mermaid';
-import { useCallback, useEffect, useState } from 'react';
-import { Center } from 'react-layout-kit';
-import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
-import Controls from "./Controls";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export var useMermaid = function useMermaid(content) {
-  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    enablePanZoom = _ref.enablePanZoom;
-  var _useState = useState(),
+import { useEffect, useMemo, useState } from 'react';
+import useSWR from 'swr';
+import { Md5 } from 'ts-md5';
+
+// 缓存已验证的图表内容
+var mermaidCache = new Map();
+var MD5_LENGTH_THRESHOLD = 10000;
+
+// 懒加载 mermaid 实例
+var loadMermaid = function loadMermaid() {
+  if (typeof window === 'undefined') return Promise.resolve(null);
+  return import('mermaid').then(function (mod) {
+    return mod.default;
+  });
+};
+var mermaidPromise = loadMermaid();
+
+/**
+ * 验证并处理 Mermaid 图表内容
+ */
+export var useMermaid = function useMermaid(id, content) {
+  // 用于存储最近一次有效的内容
+  var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
-    mermaidContent = _useState2[0],
-    setMermaidContent = _useState2[1];
+    validContent = _useState2[0],
+    setValidContent = _useState2[1];
+  console.log(id, content);
+
+  // 为长内容生成哈希键
+  var cacheKey = useMemo(function () {
+    var hash = content.length < MD5_LENGTH_THRESHOLD ? content : Md5.hashStr(content);
+    return "mermaid-".concat(hash);
+  }, [content]);
+  return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var mermaidInstance, isValid, _yield$mermaidInstanc, svg;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!mermaidCache.has(cacheKey)) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", validContent);
+        case 2:
+          _context.prev = 2;
+          _context.next = 5;
+          return mermaidPromise;
+        case 5:
+          mermaidInstance = _context.sent;
+          if (mermaidInstance) {
+            _context.next = 8;
+            break;
+          }
+          return _context.abrupt("return", content);
+        case 8:
+          _context.next = 10;
+          return mermaidInstance.parse(content);
+        case 10:
+          isValid = _context.sent;
+          if (!isValid) {
+            _context.next = 22;
+            break;
+          }
+          _context.next = 14;
+          return mermaidInstance.render(id, content);
+        case 14:
+          _yield$mermaidInstanc = _context.sent;
+          svg = _yield$mermaidInstanc.svg;
+          console.log(svg);
+          setValidContent(svg);
+          // 缓存验证结果
+          mermaidCache.set(cacheKey, true);
+          return _context.abrupt("return", svg);
+        case 22:
+          throw new Error('Mermaid 语法无效');
+        case 23:
+          _context.next = 29;
+          break;
+        case 25:
+          _context.prev = 25;
+          _context.t0 = _context["catch"](2);
+          console.error('Mermaid 解析错误:', _context.t0);
+          // 返回最近一次有效的内容，或空字符串
+          return _context.abrupt("return", validContent || '');
+        case 29:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee, null, [[2, 25]]);
+  })), {
+    dedupingInterval: 3000,
+    errorRetryCount: 2,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false
+  });
+};
+
+/**
+ * 初始化 Mermaid 配置
+ */
+export var useMermaidInit = function useMermaidInit() {
   var theme = useTheme();
-  useEffect(function () {
-    mermaid.initialize({
+
+  // 提取主题相关配置到 useMemo 中
+  var mermaidConfig = useMemo(function () {
+    return {
       fontFamily: theme.fontFamilyCode,
       gantt: {
         useWidth: 1920
       },
       securityLevel: 'loose',
-      startOnLoad: true,
+      startOnLoad: false,
       theme: theme.isDarkMode ? 'dark' : 'neutral',
       themeVariables: {
         errorBkgColor: theme.colorTextDescription,
@@ -57,63 +146,38 @@ export var useMermaid = function useMermaid(content) {
         tertiaryTextColor: theme.colorSuccessText,
         textColor: theme.colorText
       }
-    });
-    mermaid.contentLoaded();
-  }, [mermaidContent, theme.isDarkMode]);
-  var checkSyntax = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(textStr) {
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            _context.prev = 0;
-            _context.next = 3;
-            return mermaid.parse(textStr);
-          case 3:
-            if (!_context.sent) {
-              _context.next = 5;
-              break;
-            }
-            setMermaidContent(textStr);
-          case 5:
-            _context.next = 9;
-            break;
-          case 7:
-            _context.prev = 7;
-            _context.t0 = _context["catch"](0);
-          case 9:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee, null, [[0, 7]]);
-    }));
-    return function checkSyntax(_x) {
-      return _ref2.apply(this, arguments);
     };
-  }();
+  }, [theme.isDarkMode]);
+
+  // 初始化 mermaid 配置
   useEffect(function () {
-    checkSyntax(content);
-  }, [content]);
-  return useCallback(function () {
-    if (enablePanZoom) {
-      return /*#__PURE__*/_jsxs(TransformWrapper, {
-        children: [/*#__PURE__*/_jsx(Controls, {}), /*#__PURE__*/_jsx(TransformComponent, {
-          contentClass: 'mermaid',
-          contentStyle: {
-            padding: 16
-          },
-          wrapperStyle: {
-            minHeight: 240,
-            width: '100%'
-          },
-          children: mermaidContent
-        })]
-      });
-    }
-    return /*#__PURE__*/_jsx(Center, {
-      as: 'pre',
-      className: 'mermaid',
-      padding: 16,
-      children: mermaidContent
-    });
-  }, [mermaidContent, theme.isDarkMode, enablePanZoom]);
+    var initMermaid = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var mermaidInstance;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return mermaidPromise;
+            case 2:
+              mermaidInstance = _context2.sent;
+              if (mermaidInstance) {
+                _context2.next = 5;
+                break;
+              }
+              return _context2.abrupt("return");
+            case 5:
+              mermaidInstance.initialize(mermaidConfig);
+            case 6:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function initMermaid() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    initMermaid();
+  }, [mermaidConfig]);
 };

package/es/mdx/Mdx/index.js

@@ -31,7 +31,7 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import Alert from "../../Alert";
 import ImageGallery from "../../Image/ImageGallery";
-import { Typography } from "../../Markdown/Typography";
+import Typography from "../../Markdown/Typography";
 import { useStyles } from "../../Markdown/style";
 import { escapeBrackets, escapeMhchem, fixMarkdownBold } from "../../Markdown/utils";
 import mdxComponents from "../mdxComponents";

package/es/utils/genCdnUrl.d.ts

@@ -1,3 +1,5 @@
+declare const UNPKG_API = "https://unpkg.com";
+declare const ALIYUN_API = "https://registry.npmmirror.com";
 export type CDN = 'aliyun' | 'unpkg';
 export interface CdnApi {
     path: string;
@@ -6,3 +8,4 @@ export interface CdnApi {
     version?: string;
 }
 export declare const genCdnUrl: ({ pkg, version, path, proxy }: CdnApi) => string;
+export { ALIYUN_API, UNPKG_API };

package/es/utils/genCdnUrl.js

@@ -39,4 +39,6 @@ export var genCdnUrl = function genCdnUrl(_ref) {
 //       return urlJoin(LOBEHUB_API, 'gh', repo, path);
 //     }
 //   }
-// };
+// };
+
+export { ALIYUN_API, UNPKG_API };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.168.17",
+  "version": "1.168.18",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -55,7 +55,7 @@
     "@floating-ui/react": "^0.27.5",
     "@giscus/react": "^3.1.0",
     "@lobehub/fluent-emoji": "^1.2.0",
-    "@lobehub/icons": "^1.93.0",
+    "@lobehub/icons": "^1.94.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@radix-ui/react-slot": "^1.1.2",
@@ -69,10 +69,10 @@
     "emoji-mart": "^5.6.0",
     "fast-deep-equal": "^3.1.3",
     "immer": "^10.1.1",
-    "leva": "^0.9.36",
+    "leva": "^0.10.0",
     "lodash-es": "^4.17.21",
-    "lucide-react": "^0.475.0",
-    "mermaid": "^11.5.0",
+    "lucide-react": "^0.484.0",
+    "mermaid": "^11.6.0",
     "numeral": "^2.0.6",
     "polished": "^4.3.1",
     "query-string": "^9.1.1",
@@ -82,7 +82,7 @@
     "react-error-boundary": "^5.0.0",
     "react-hotkeys-hook": "^4.6.1",
     "react-layout-kit": "^1.9.1",
-    "react-markdown": "^9.1.0",
+    "react-markdown": "^10.1.0",
     "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.5.2",
     "react-zoom-pan-pinch": "^3.7.0",

package/es/Mermaid/useMermaid.d.ts

@@ -1,3 +0,0 @@
-export declare const useMermaid: (content: string, { enablePanZoom }?: {
-    enablePanZoom?: boolean | undefined;
-}) => () => import("react/jsx-runtime").JSX.Element;