@lobehub/ui 1.94.4 → 1.94.6

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -18,17 +18,18 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
     cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var useCodeToHtml = useHighlight(function (s) {
-    return s.useCodeToHtml;
-  });
-  var _useCodeToHtml = useCodeToHtml(children.trim(), language, isDarkMode),
-    data = _useCodeToHtml.data,
-    isLoading = _useCodeToHtml.isLoading;
+  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+    data = _useHighlight.data,
+    isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [isLoading ? /*#__PURE__*/_jsx("code", {
+    children: [isLoading ? /*#__PURE__*/_jsx("div", {
       className: cx(styles.unshiki, className),
       style: style,
-      children: children
+      children: /*#__PURE__*/_jsx("pre", {
+        children: /*#__PURE__*/_jsx("code", {
+          children: children
+        })
+      })
     }) : /*#__PURE__*/_jsx("div", {
       className: cx(styles.shiki, className),
       dangerouslySetInnerHTML: {

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -12,6 +12,6 @@ export var useStyles = createStyles(function (_ref) {
     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      "])))),
-    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 8px;\n    "])))
+    unshiki: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorTextDescription)
   };
 });

package/es/Highlighter/style.js

@@ -16,6 +16,6 @@ export var useStyles = createStyles(function (_ref, type) {
     container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
     header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding: 4px 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          right: 0;\n          bottom: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
-    select: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n\n        input {\n          text-align: center;\n        }\n      "])), token.colorTextDescription)
+    select: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription)
   };
 });

package/es/hooks/languageMap.d.ts

@@ -1,2 +1,2 @@
-declare const _default: string[];
+declare const _default: readonly ["abap", "actionscript-3", "ada", "apache", "apex", "apl", "applescript", "ara", "asm", "astro", "awk", "ballerina", "bat", "beancount", "berry", "bibtex", "bicep", "blade", "c", "cadence", "clarity", "clojure", "cmake", "cobol", "codeql", "coffee", "cpp", "crystal", "csharp", "css", "cue", "cypher", "d", "dart", "dax", "diff", "docker", "dream-maker", "elixir", "elm", "erb", "erlang", "fish", "fsharp", "gdresource", "gdscript", "gdshader", "gherkin", "git-commit", "git-rebase", "glimmer-js", "glimmer-ts", "glsl", "gnuplot", "go", "graphql", "groovy", "hack", "haml", "handlebars", "haskell", "hcl", "hjson", "hlsl", "html", "http", "imba", "ini", "java", "javascript", "jinja-html", "jison", "json", "json5", "jsonc", "jsonl", "jsonnet", "jssm", "jsx", "julia", "kotlin", "kusto", "latex", "less", "liquid", "lisp", "logo", "lua", "make", "markdown", "marko", "matlab", "mdc", "mdx", "mermaid", "mojo", "narrat", "nextflow", "nginx", "nim", "nix", "objective-c", "objective-cpp", "ocaml", "pascal", "perl", "php", "plsql", "postcss", "powerquery", "powershell", "prisma", "prolog", "proto", "pug", "puppet", "purescript", "python", "r", "raku", "razor", "reg", "rel", "riscv", "rst", "ruby", "rust", "sas", "sass", "scala", "scheme", "scss", "shaderlab", "shellscript", "shellsession", "smalltalk", "solidity", "sparql", "splunk", "sql", "ssh-config", "stata", "stylus", "svelte", "swift", "system-verilog", "tasl", "tcl", "tex", "toml", "tsx", "turtle", "twig", "typescript", "v", "vb", "verilog", "vhdl", "viml", "vue", "vue-html", "vyper", "wasm", "wenyan", "wgsl", "wolfram", "xml", "xsl", "yaml", "zenscript", "zig", "bash", "batch", "be", "c#", "cdc", "clj", "cmd", "console", "cql", "cs", "dockerfile", "erl", "f#", "fs", "fsl", "gjs", "gts", "hbs", "hs", "jade", "js", "kql", "makefile", "md", "nar", "nf", "objc", "perl6", "properties", "ps", "ps1", "py", "ql", "rb", "rs", "sh", "shader", "shell", "spl", "styl", "ts", "vim", "vimscript", "vy", "yml", "zsh", "文言"];
 export default _default;

package/es/hooks/useHighlight.d.ts

@@ -1,10 +1,3 @@
-import { type Highlighter } from 'shikiji';
-import { type SWRResponse } from 'swr';
 export declare const FALLBACK_LANG = "markdown";
-interface Store {
-    highlighter?: Highlighter;
-    initHighlighter: () => Promise<Highlighter>;
-    useCodeToHtml: (text: string, language: string, isDarkMode: boolean) => SWRResponse<string>;
-}
-export declare const useHighlight: import("zustand/traditional").UseBoundStoreWithEqualityFn<import("zustand/vanilla").StoreApi<Store>>;
+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

@@ -2,99 +2,68 @@ import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { getHighlighter } from 'shikiji';
 import useSWR from 'swr';
-import { shallow } from 'zustand/shallow';
-import { createWithEqualityFn } from 'zustand/traditional';
 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)];
-export var useHighlight = createWithEqualityFn(function (set, get) {
-  return {
-    highlighter: undefined,
-    initHighlighter: function () {
-      var _initHighlighter = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var highlighter;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              highlighter = get().highlighter;
-              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;
-              set({
-                highlighter: highlighter
-              });
-              return _context.abrupt("return", highlighter);
-            case 10:
-            case "end":
-              return _context.stop();
+var FALLBACK_LANGS = [FALLBACK_LANG];
+var cacheHighlighter;
+var initHighlighter = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(lang) {
+    var highlighter;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          highlighter = cacheHighlighter;
+          if (!(highlighter && FALLBACK_LANGS.includes(lang))) {
+            _context.next = 5;
+            break;
           }
-        }, _callee);
-      }));
-      function initHighlighter() {
-        return _initHighlighter.apply(this, arguments);
+          return _context.abrupt("return", highlighter);
+        case 5:
+          FALLBACK_LANGS.push(lang);
+          _context.next = 8;
+          return getHighlighter({
+            langs: FALLBACK_LANGS,
+            themes: [themeConfig(true), themeConfig(false)]
+          });
+        case 8:
+          highlighter = _context.sent;
+          cacheHighlighter = highlighter;
+          return _context.abrupt("return", highlighter);
+        case 11:
+        case "end":
+          return _context.stop();
       }
-      return initHighlighter;
-    }(),
-    useCodeToHtml: function useCodeToHtml(text, language, 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 get().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]]);
-      })));
-    }
+    }, _callee);
+  }));
+  return function initHighlighter(_x) {
+    return _ref.apply(this, arguments);
   };
-}, shallow);
+}();
+export var useHighlight = function useHighlight(text, language, isDarkMode) {
+  return useSWR([text, language, Number(isDarkMode)].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var highlighter, html;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _context2.prev = 0;
+          _context2.next = 3;
+          return initHighlighter(language);
+        case 3:
+          highlighter = _context2.sent;
+          html = highlighter === null || highlighter === void 0 ? void 0 : highlighter.codeToHtml(text, {
+            lang: language,
+            theme: isDarkMode ? 'dark' : 'light'
+          });
+          return _context2.abrupt("return", html);
+        case 8:
+          _context2.prev = 8;
+          _context2.t0 = _context2["catch"](0);
+          return _context2.abrupt("return", "<pre><code>".concat(text, "</code></pre>"));
+        case 11:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2, null, [[0, 8]]);
+  })));
+};
 export { default as languageMap } from "./languageMap";

package/package.json

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