@lobehub/ui 1.168.17 → 1.168.19

package/es/hooks/useHighlight.js

@@ -5,70 +5,150 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight } from '@shikijs/transformers';
 import { useTheme, useThemeMode } from 'antd-style';
 import { useMemo } from 'react';
-import { codeToHtml } from 'shiki';
 import useSWR from 'swr';
 import { Md5 } from 'ts-md5';
 import languageMap from "./languageMap";
 export var FALLBACK_LANG = 'txt';
+
+// 应用级缓存，避免重复计算
+var highlightCache = new Map();
+var MD5_LENGTH_THRESHOLD = 10000; // 超过该长度使用异步MD5
+
+// 颜色替换映射类型
+
+// 懒加载 shiki
+var loadShiki = function loadShiki() {
+  return import('shiki').then(function (mod) {
+    return mod.codeToHtml;
+  });
+};
+var shikiPromise = loadShiki();
+
+// 辅助函数：安全的HTML转义
+var escapeHtml = function escapeHtml(str) {
+  return str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+};
+
+// 主高亮组件
 export var useHighlight = function useHighlight(text, lang, enableTransformer) {
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
+  var theme = useTheme();
   var language = lang.toLowerCase();
+
+  // 匹配支持的语言
   var matchedLanguage = useMemo(function () {
     return languageMap.includes(language) ? language : FALLBACK_LANG;
   }, [language]);
-  var theme = useTheme();
+
+  // 优化transformer创建
   var transformers = useMemo(function () {
     if (!enableTransformer) return;
     return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
   }, [enableTransformer]);
-  var key = useMemo(function () {
-    return Md5.hashStr(text);
-  }, [text]);
-  return useSWR([matchedLanguage, isDarkMode ? 'd' : 'l', key].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+
+  // 优化颜色替换配置
+  var colorReplacements = useMemo(function () {
+    return {
+      'slack-dark': {
+        '#4ec9b0': theme.yellow,
+        '#569cd6': theme.colorError,
+        '#6a9955': theme.gray,
+        '#9cdcfe': theme.colorText,
+        '#b5cea8': theme.purple10,
+        '#c586c0': theme.colorInfo,
+        '#ce9178': theme.colorSuccess,
+        '#dcdcaa': theme.colorWarning,
+        '#e6e6e6': theme.colorText
+      },
+      'slack-ochin': {
+        '#002339': theme.colorText,
+        '#0991b6': theme.colorError,
+        '#174781': theme.purple10,
+        '#2f86d2': theme.colorText,
+        '#357b42': theme.gray,
+        '#7b30d0': theme.colorInfo,
+        '#7eb233': theme.colorWarningTextActive,
+        '#a44185': theme.colorSuccess,
+        '#dc3eb7': theme.yellow11
+      }
+    };
+  }, [theme]);
+
+  // 构建缓存键
+  var cacheKey = useMemo(function () {
+    // 长文本使用 hash
+    var hash = text.length < MD5_LENGTH_THRESHOLD ? text : Md5.hashStr(text);
+    return [matchedLanguage, isDarkMode ? 'd' : 'l', hash].join('-');
+  }, [matchedLanguage, isDarkMode]);
+
+  // 使用SWR获取高亮HTML
+  return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var codeToHtml, html, _codeToHtml, _html, fallbackHtml;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.prev = 0;
-          return _context.abrupt("return", codeToHtml(text, {
-            colorReplacements: {
-              'slack-dark': {
-                '#4ec9b0': theme.yellow,
-                '#569cd6': theme.colorError,
-                '#6a9955': theme.gray,
-                '#9cdcfe': theme.colorText,
-                '#b5cea8': theme.purple10,
-                '#c586c0': theme.colorInfo,
-                '#ce9178': theme.colorSuccess,
-                '#dcdcaa': theme.colorWarning,
-                '#e6e6e6': theme.colorText
-              },
-              'slack-ochin': {
-                '#002339': theme.colorText,
-                '#0991b6': theme.colorError,
-                '#174781': theme.purple10,
-                '#2f86d2': theme.colorText,
-                '#357b42': theme.gray,
-                '#7b30d0': theme.colorInfo,
-                '#7eb233': theme.colorWarningTextActive,
-                '#a44185': theme.colorSuccess,
-                '#dc3eb7': theme.yellow11
-              }
-            },
+          if (!(cacheKey && highlightCache.has(cacheKey))) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", highlightCache.get(cacheKey));
+        case 2:
+          _context.prev = 2;
+          _context.next = 5;
+          return shikiPromise;
+        case 5:
+          codeToHtml = _context.sent;
+          _context.next = 8;
+          return codeToHtml(text, {
+            colorReplacements: colorReplacements,
             lang: matchedLanguage,
             theme: isDarkMode ? 'slack-dark' : 'slack-ochin',
             transformers: transformers
-          }));
-        case 4:
-          _context.prev = 4;
-          _context.t0 = _context["catch"](0);
-          console.error('shiki Highlight error:', _context.t0);
-          return _context.abrupt("return", text);
+          });
         case 8:
+          html = _context.sent;
+          // 缓存结果
+          if (cacheKey) highlightCache.set(cacheKey, html);
+          return _context.abrupt("return", html);
+        case 13:
+          _context.prev = 13;
+          _context.t0 = _context["catch"](2);
+          console.error('高级渲染失败:', _context.t0);
+          _context.prev = 16;
+          _context.next = 19;
+          return shikiPromise;
+        case 19:
+          _codeToHtml = _context.sent;
+          _context.next = 22;
+          return _codeToHtml(text, {
+            lang: matchedLanguage,
+            theme: isDarkMode ? 'dark-plus' : 'light-plus'
+          });
+        case 22:
+          _html = _context.sent;
+          if (cacheKey) highlightCache.set(cacheKey, _html);
+          return _context.abrupt("return", _html);
+        case 27:
+          _context.prev = 27;
+          _context.t1 = _context["catch"](16);
+          // 最终降级到纯文本
+          fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
+          if (cacheKey) highlightCache.set(cacheKey, fallbackHtml);
+          return _context.abrupt("return", fallbackHtml);
+        case 32:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 4]]);
-  })));
+    }, _callee, null, [[2, 13], [16, 27]]);
+  })), {
+    dedupingInterval: 3000,
+    // 3秒内相同请求只执行一次
+    errorRetryCount: 2,
+    // 最多重试2次
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false
+  });
 };
-export { default as languageMap } from "./languageMap";
+export { default as languageMap } from "./languageMap";
+export { escapeHtml, highlightCache, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };

package/es/hooks/useMermaid.d.ts

@@ -0,0 +1,9 @@
+import { SWRResponse } from 'swr';
+/**
+ * 验证并处理 Mermaid 图表内容
+ */
+export declare const useMermaid: (id: string, content: string) => SWRResponse<string, Error>;
+/**
+ * 初始化 Mermaid 配置
+ */
+export declare const useMermaidInit: () => void;

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.19",
   "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;