@lobehub/ui 1.94.3 → 1.94.5

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,11 +1,9 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import { Center } from 'react-layout-kit';
-import { codeToHtml } from 'shikiji';
-import { themeConfig } from "../theme";
 import Icon from "../../Icon";
+import { useHighlight } from "../../hooks/useHighlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,27 +18,12 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    isLoading = _useState2[0],
-    setIsLoading = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    data = _useState4[0],
-    setData = _useState4[1];
-  useEffect(function () {
-    setIsLoading(true);
-    codeToHtml(children.trim(), {
-      lang: language,
-      theme: themeConfig(isDarkMode)
-    }).then(function (code) {
-      setData(code);
-      setIsLoading(false);
-    });
-  }, [children, language, isDarkMode]);
+  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+    data = _useHighlight.data,
+    isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("code", {
-      className: className,
+      className: cx(styles.unshiki, className),
       style: style,
       children: children
     }) : /*#__PURE__*/_jsx("div", {

package/es/Highlighter/SyntaxHighlighter/style.d.ts

@@ -2,4 +2,5 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     loading: string;
     prism: import("antd-style").SerializedStyles;
     shiki: string;
+    unshiki: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
@@ -11,6 +11,7 @@ export var useStyles = createStyles(function (_ref) {
   return {
     loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        top: 0;\n        right: 0;\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        height: 34px;\n        padding: 0 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
     prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow: auto;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
-    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "]))))
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow-x: auto;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n        }\n      "])))),
+    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 8px;\n    "])))
   };
 });

package/es/Markdown/CodeBlock.js

@@ -9,6 +9,7 @@ import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import Highlighter from "../Highlighter";
 import Snippet from "../Snippet";
+import { FALLBACK_LANG } from "../hooks/useHighlight";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
@@ -34,11 +35,12 @@ var Code = /*#__PURE__*/memo(function (_ref2) {
     className = _properties$children$.className;
   if (!children) return;
   var content = Array.isArray(children) ? children[0] : children;
+  var lang = (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || FALLBACK_LANG;
   if (countLines(content) === 1 && content.length <= 60) {
     return /*#__PURE__*/_jsx(Snippet, {
       className: styles.container,
       "data-code-type": "highlighter",
-      language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+      language: lang,
       type: 'block',
       children: content
     });
@@ -50,7 +52,7 @@ var Code = /*#__PURE__*/memo(function (_ref2) {
       fontSize: 16
     },
     fullFeatured: fullFeatured,
-    language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
+    language: lang,
     type: "block",
     children: content
   });

package/es/hooks/useHighlight.d.ts

@@ -1,2 +1,3 @@
+export declare const FALLBACK_LANG = "markdown";
 export declare const useHighlight: (text: string, language: string, isDarkMode: boolean) => import("swr/_internal").SWRResponse<string, any, any>;
 export { default as languageMap } from './languageMap';

package/es/hooks/useHighlight.js

@@ -1,12 +1,91 @@
-import { codeToHtml } from 'shikiji';
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { getHighlighter } from 'shikiji';
 import useSWR from 'swr';
 import { themeConfig } from "../Highlighter/theme";
+import languageMap from "./languageMap";
+export var FALLBACK_LANG = 'markdown';
+var FALLBACK_LANGS = ['ts', 'typescript', 'js', 'javascript', 'markdown', 'md'];
+var THEME = [themeConfig(true), themeConfig(false)];
+var cacheHighlighter;
+var initHighlighter = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var highlighter;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          highlighter = cacheHighlighter;
+          if (!highlighter) {
+            _context.next = 5;
+            break;
+          }
+          return _context.abrupt("return", highlighter);
+        case 5:
+          _context.next = 7;
+          return getHighlighter({
+            langs: FALLBACK_LANGS,
+            themes: THEME
+          });
+        case 7:
+          highlighter = _context.sent;
+          cacheHighlighter = highlighter;
+          return _context.abrupt("return", highlighter);
+        case 10:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function initHighlighter() {
+    return _ref.apply(this, arguments);
+  };
+}();
 export var useHighlight = function useHighlight(text, language, isDarkMode) {
-  return useSWR([text, language, String(isDarkMode)].join('-'), function () {
-    return codeToHtml(text, {
-      lang: language,
-      theme: themeConfig(isDarkMode)
-    });
-  });
+  return useSWR([text, language, Number(isDarkMode)].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var theme, lang, highlighter, html;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          theme = isDarkMode ? 'dark' : 'light';
+          lang = language;
+          _context2.prev = 2;
+          _context2.next = 5;
+          return initHighlighter();
+        case 5:
+          highlighter = _context2.sent;
+          if (FALLBACK_LANGS.includes(lang)) {
+            _context2.next = 13;
+            break;
+          }
+          if (!languageMap.includes(lang)) {
+            _context2.next = 12;
+            break;
+          }
+          _context2.next = 10;
+          return highlighter === null || highlighter === void 0 ? void 0 : highlighter.loadLanguage(lang);
+        case 10:
+          _context2.next = 13;
+          break;
+        case 12:
+          lang = FALLBACK_LANG;
+        case 13:
+          _context2.next = 15;
+          return highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+            lang: lang,
+            theme: theme
+          });
+        case 15:
+          html = _context2.sent;
+          return _context2.abrupt("return", html);
+        case 19:
+          _context2.prev = 19;
+          _context2.t0 = _context2["catch"](2);
+          return _context2.abrupt("return", "<code>".concat(text, "</code>"));
+        case 22:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[2, 19]]);
+  })));
 };
 export { default as languageMap } from "./languageMap";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.94.3",
+  "version": "1.94.5",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",