@yuntijs/ui 1.2.0-beta.5 → 1.2.0-beta.7

package/es/Highlighter/FullFeatured.d.ts

@@ -13,6 +13,8 @@ export interface FullFeaturedHighlighterProps extends DivProps {
      */
     language: string;
     contentStyle?: React.CSSProperties;
+    enableTransformer?: boolean;
+    theme?: string;
 }
 export declare const FullFeaturedHighlighter: import("react").NamedExoticComponent<FullFeaturedHighlighterProps>;
 export * from './SyntaxHighlighter';

package/es/Highlighter/FullFeatured.js

@@ -1,13 +1,13 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "language", "className", "style", "allowChangeLanguage", "fileName", "icon", "contentStyle"];
+var _excluded = ["children", "language", "className", "style", "allowChangeLanguage", "fileName", "icon", "contentStyle", "enableTransformer", "theme"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { ActionIcon, CopyButton } from '@lobehub/ui';
 import { Select } from 'antd';
 import { ChevronDown, ChevronRight } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { languageMap } from "../hooks/useHighlight";
 import { SyntaxHighlighter } from "./SyntaxHighlighter";
@@ -31,6 +31,8 @@ export var FullFeaturedHighlighter = /*#__PURE__*/memo(function (_ref) {
     fileName = _ref.fileName,
     icon = _ref.icon,
     contentStyle = _ref.contentStyle,
+    enableTransformer = _ref.enableTransformer,
+    theme = _ref.theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -40,11 +42,17 @@ export var FullFeaturedHighlighter = /*#__PURE__*/memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     lang = _useState4[0],
     setLang = _useState4[1];
-  var _useStyles = useStyles('block'),
+  var _useStyles = useStyles({
+      type: 'block',
+      expand: expand
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var container = cx(styles.container, className);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  useEffect(function () {
+    setLang(language);
+  }, [language]);
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: container,
     "data-code-type": "highlighter",
     style: style
@@ -90,11 +98,15 @@ export var FullFeaturedHighlighter = /*#__PURE__*/memo(function (_ref) {
         }
       })]
     }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      enableTransformer: enableTransformer,
       language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
-      style: expand ? contentStyle : _objectSpread(_objectSpread({}, contentStyle), {}, {
+      style: expand ? _objectSpread(_objectSpread({}, contentStyle), {}, {
+        flex: 1
+      }) : _objectSpread(_objectSpread({}, contentStyle), {}, {
         height: 0,
         overflow: 'hidden'
       }),
+      theme: theme,
       children: children
     })]
   }));

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

@@ -3,5 +3,7 @@ import { DivProps } from "../../types";
 export interface SyntaxHighlighterProps extends DivProps {
     children: string;
     language: string;
+    enableTransformer?: boolean;
+    theme?: string;
 }
 export declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,5 +1,4 @@
 import { Icon } from '@lobehub/ui';
-import { useThemeMode } from 'antd-style';
 import { Loader2 } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -11,19 +10,21 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 export var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language,
+    enableTransformer = _ref.enableTransformer,
+    theme = _ref.theme,
     className = _ref.className,
     style = _ref.style;
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles({
+      theme: theme
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var _useThemeMode = useThemeMode(),
-    isDarkMode = _useThemeMode.isDarkMode;
-  var _useHighlight = useHighlight(children.trim(), language, isDarkMode),
+  var _useHighlight = useHighlight(children.trim(), language, enableTransformer, theme),
     data = _useHighlight.data,
     isLoading = _useHighlight.isLoading;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading || !data ? /*#__PURE__*/_jsx("div", {
-      className: cx(styles.unshiki, className),
+      className: cx(styles.shiki, className),
       style: style,
       children: /*#__PURE__*/_jsx("pre", {
         children: /*#__PURE__*/_jsx("div", {

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

@@ -1,5 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    theme?: string | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
     loading: string;
     shiki: string;
-    unshiki: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -1,16 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token,
     cx = _ref.cx,
     prefixCls = _ref.prefixCls,
     stylish = _ref.stylish;
+  var theme = _ref2.theme;
   var prefix = "".concat(prefixCls, "-highlighter");
   return {
-    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n        inset-block-start: 0;\n        inset-inline-end: 0;\n\n        height: 34px;\n        padding-block: 0;\n        padding-inline: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        border-radius: ", ";\n      "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
-    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: auto;\n        margin: 0;\n        padding: 0;\n\n        .shiki {\n          overflow: unset;\n          margin: 0;\n          padding: 0;\n          background: none !important;\n\n          code {\n            display: block;\n\n            .line {\n              display: inline-block;\n\n              width: calc(100% + 32px);\n              margin-block: 0;\n              margin-inline: -16px;\n              padding-block: 0;\n              padding-inline: 16px;\n            }\n          }\n\n          &.has-focused {\n            .line:not(.focused) {\n              opacity: 0.5;\n            }\n          }\n\n          .highlighted {\n            background: ", ";\n\n            &.warning {\n              background: ", ";\n            }\n\n            &.error {\n              background: ", ";\n            }\n          }\n\n          .highlighted-word {\n            padding-block: 0.1em;\n            padding-inline: 0.2em;\n\n            background: ", ";\n            border: 1px solid ", ";\n            border-radius: ", "px;\n          }\n\n          .diff {\n            &.remove {\n              background: ", ";\n\n              &::before {\n                content: '-';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ", ";\n              }\n            }\n\n            &.add {\n              background: ", ";\n\n              &::before {\n                content: '+';\n\n                position: absolute;\n                inset-inline-start: 4px;\n\n                display: inline-block;\n\n                color: ", ";\n              }\n            }\n          }\n        }\n      "])), token.colorFillTertiary, token.colorWarningBg, token.colorErrorBg, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadius, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText)),
-    unshiki: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      overflow: auto;\n      margin: 0;\n      padding: 0;\n      color: ", ";\n    "])), token.colorTextDescription)
+    loading: cx(stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 10;\n          inset-block-start: 0;\n          inset-inline-end: 0;\n\n          height: 34px;\n          padding-block: 0;\n          padding-inline: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          border-radius: ", ";\n        "])), token.fontFamilyCode, token.colorTextTertiary, token.borderRadius)),
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow: hidden;\n          height: 100%;\n          margin: 0;\n          padding: 0;\n\n          & > pre {\n            height: 100%;\n            overflow: auto;\n            margin: 0;\n            padding: 0;\n            ", "\n\n            code {\n              display: block;\n\n              .line {\n                display: inline-block;\n\n                width: calc(100% + 32px);\n                margin-block: 0;\n                margin-inline: -16px;\n                padding-block: 0;\n                padding-inline: 16px;\n              }\n            }\n\n            &.has-focused {\n              .line:not(.focused) {\n                opacity: 0.5;\n              }\n            }\n\n            .highlighted {\n              background: ", ";\n\n              &.warning {\n                background: ", ";\n              }\n\n              &.error {\n                background: ", ";\n              }\n            }\n\n            .highlighted-word {\n              padding-block: 0.1em;\n              padding-inline: 0.2em;\n\n              background: ", ";\n              border: 1px solid ", ";\n              border-radius: ", "px;\n            }\n\n            .diff {\n              &.remove {\n                background: ", ";\n\n                &::before {\n                  content: '-';\n\n                  position: absolute;\n                  inset-inline-start: 4px;\n\n                  display: inline-block;\n\n                  color: ", ";\n                }\n              }\n\n              &.add {\n                background: ", ";\n\n                &::before {\n                  content: '+';\n\n                  position: absolute;\n                  inset-inline-start: 4px;\n\n                  display: inline-block;\n\n                  color: ", ";\n                }\n              }\n            }\n          }\n        "])), !theme && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              background: none !important;\n            "]))), token.colorFillTertiary, token.colorWarningBg, token.colorErrorBg, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadius, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText))
   };
 });

package/es/Highlighter/index.d.ts

@@ -44,6 +44,8 @@ export interface HighlighterProps extends DivProps {
      * @default false
      */
     wrap?: boolean;
+    enableTransformer?: boolean;
+    theme?: string;
 }
 export declare const Highlighter: React.NamedExoticComponent<HighlighterProps>;
 export * from './FullFeatured';

package/es/Highlighter/index.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight", "allowChangeLanguage", "fileName", "icon", "contentStyle", "wrap"];
+var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight", "allowChangeLanguage", "fileName", "icon", "contentStyle", "wrap", "enableTransformer", "theme"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { CopyButton, Spotlight, Tag } from '@lobehub/ui';
@@ -32,11 +32,15 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     icon = _ref.icon,
     contentStyle = _ref.contentStyle,
     wrap = _ref.wrap,
+    enableTransformer = _ref.enableTransformer,
+    theme = _ref.theme,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(type),
+  var _useStyles = useStyles({
+      type: type
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  var container = cx(styles.container, !wrap && styles.nowrap, className);
+  var container = cx(styles.container, wrap && styles.wrap, className);
   if (fullFeatured) return /*#__PURE__*/_jsx(FullFeaturedHighlighter, _objectSpread(_objectSpread({
     allowChangeLanguage: allowChangeLanguage,
     className: className,
@@ -44,7 +48,8 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     fileName: fileName,
     icon: icon,
     language: language,
-    style: style
+    style: style,
+    theme: theme
   }, rest), {}, {
     children: children
   }));
@@ -66,8 +71,10 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     }), /*#__PURE__*/_jsx("div", {
       className: styles.scroller,
       children: /*#__PURE__*/_jsx(SyntaxHighlighter, {
+        enableTransformer: enableTransformer,
         language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
         style: contentStyle,
+        theme: theme,
         children: children
       })
     })]

package/es/Highlighter/style.d.ts

@@ -1,9 +1,12 @@
-export declare const useStyles: (props?: "ghost" | "block" | "pure" | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    type: 'ghost' | 'block' | 'pure';
+    expand?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
     button: string;
     container: string;
     header: import("antd-style").SerializedStyles;
     lang: string;
-    nowrap: import("antd-style").SerializedStyles;
+    wrap: import("antd-style").SerializedStyles;
     scroller: import("antd-style").SerializedStyles;
     select: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/style.js

@@ -1,22 +1,24 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, type) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var token = _ref.token,
     css = _ref.css,
     cx = _ref.cx,
     prefixCls = _ref.prefixCls,
     stylish = _ref.stylish;
+  var type = _ref2.type,
+    expand = _ref2.expand;
   var prefix = "".concat(prefixCls, "-highlighter");
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
   return {
     button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-start: ", ";\n          inset-inline-end: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '12px', type === 'pure' ? 0 : '12px')),
-    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: hidden;\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            overflow: auto hidden;\n\n            margin: 0 !important;\n            padding: ", " !important;\n\n            white-space: break-spaces;\n\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px")),
+    container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: hidden;\n\n          height: ", ";\n\n          border-radius: ", "px;\n\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            height: 100%;\n            margin: 0 !important;\n            padding: ", " !important;\n          }\n        "])), expand ? '100%' : 'auto', token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px")),
     header: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        padding-block: 4px;\n        padding-inline: 8px;\n        background: ", ";\n      "])), token.colorFillQuaternary),
     lang: cx(langHoverCls, stylish.blur, css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          inset-block-end: 12px;\n          inset-inline-end: 4px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary)),
-    nowrap: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        code {\n          text-wrap: nowrap !important;\n        }\n      "]))),
+    wrap: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        pre {\n          white-space: break-spaces;\n        }\n      "]))),
     scroller: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        overflow: auto;\n        width: 100%;\n        height: 100%;\n      "]))),
     select: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        user-select: none;\n        font-size: 14px;\n        color: ", ";\n        .", "-select-selection-item {\n          min-width: 100px;\n          padding-inline-end: 0 !important;\n          color: ", ";\n          text-align: center;\n        }\n      "])), token.colorTextDescription, prefixCls, token.colorTextDescription)
   };

package/es/hooks/languageMap.js

@@ -1 +1 @@
-export var languageMap = ['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 var languageMap = ['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', 'shellsession', 'spl', 'styl', 'ts', 'vim', 'vimscript', 'vy', 'yml', 'zsh', '文言'];

package/es/hooks/themeMap.d.ts

@@ -0,0 +1 @@
+export declare const themeMap: string[];

package/es/hooks/themeMap.js

@@ -0,0 +1 @@
+export var themeMap = ['catppuccin-latte', 'everforest-light', 'github-light', 'github-light-default', 'github-light-high-contrast', 'gruvbox-light-hard', 'gruvbox-light-medium', 'gruvbox-light-soft', 'kanagawa-lotus', 'light-plus', 'material-theme-lighter', 'min-light', 'one-light', 'rose-pine-dawn', 'slack-ochin', 'snazzy-light', 'solarized-light', 'vitesse-light', 'andromeeda', 'aurora-x', 'ayu-dark', 'catppuccin-frappe', 'catppuccin-macchiato', 'catppuccin-mocha', 'dark-plus', 'dracula', 'dracula-soft', 'everforest-dark', 'github-dark', 'github-dark-default', 'github-dark-dimmed', 'github-dark-high-contrast', 'gruvbox-dark-hard', 'gruvbox-dark-medium', 'gruvbox-dark-soft', 'houston', 'kanagawa-dragon', 'kanagawa-wave', 'laserwave', 'material-theme', 'material-theme-darker', 'material-theme-ocean', 'material-theme-palenight', 'min-dark', 'monokai', 'night-owl', 'nord', 'one-dark-pro', 'plastic', 'poimandres', 'red', 'rose-pine', 'rose-pine-moon', 'slack-dark', 'solarized-dark', 'synthwave-84', 'tokyo-night', 'vesper', 'vitesse-black', 'vitesse-dark'];

package/es/hooks/useHighlight.d.ts

@@ -1,3 +1,11 @@
+import type { codeToHtml } from 'shiki';
+import { SWRResponse } from 'swr';
 export declare const FALLBACK_LANG = "txt";
-export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean) => import("swr/dist/_internal").SWRResponse<string, any, any>;
+declare const MD5_LENGTH_THRESHOLD = 10000;
+declare const loadShiki: () => Promise<typeof codeToHtml>;
+declare const shikiPromise: Promise<typeof codeToHtml>;
+declare const escapeHtml: (str: string) => string;
+export declare const useHighlight: (text: string, lang: string, enableTransformer?: boolean, theme?: string) => SWRResponse<string, Error>;
 export { languageMap } from './languageMap';
+export { themeMap } from './themeMap';
+export { escapeHtml, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };

package/es/hooks/useHighlight.js

@@ -3,78 +3,159 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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";
+import { themeMap } from "./themeMap";
 export var FALLBACK_LANG = 'txt';
 
-// @Todo: use worker to improve performance
-export var useHighlight = function useHighlight(text, lang, enableTransformer) {
+// 应用级缓存，避免重复计算
+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, theme) {
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
+  var antTheme = useTheme();
   var language = lang.toLowerCase();
+
+  // 匹配支持的语言
   var matchedLanguage = useMemo(function () {
     return languageMap.includes(language) ? language : FALLBACK_LANG;
   }, [language]);
-  var theme = useTheme();
+  // 匹配支持的主题
+  var matchedTheme = useMemo(function () {
+    return themeMap.includes(theme) ? theme : undefined;
+  }, [theme]);
+
+  // 优化 transformer 创建
   var transformers = useMemo(function () {
     if (!enableTransformer) return;
     return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
   }, [enableTransformer]);
-  var key = useMemo(function () {
-    return Md5.hashStr(text);
-  }, [text]);
+
+  // 优化颜色替换配置
+  var colorReplacements = useMemo(function () {
+    return {
+      'slack-dark': {
+        '#4ec9b0': antTheme.yellow,
+        '#569cd6': antTheme.colorError,
+        '#6a9955': antTheme.gray,
+        '#9cdcfe': antTheme.colorText,
+        '#b5cea8': antTheme.purple10,
+        '#c586c0': antTheme.colorInfo,
+        '#ce9178': antTheme.colorSuccess,
+        '#dcdcaa': antTheme.colorWarning,
+        '#e6e6e6': antTheme.colorText
+      },
+      'slack-ochin': {
+        '#002339': antTheme.colorText,
+        '#0991b6': antTheme.colorError,
+        '#174781': antTheme.purple10,
+        '#2f86d2': antTheme.colorText,
+        '#357b42': antTheme.gray,
+        '#7b30d0': antTheme.colorInfo,
+        '#7eb233': antTheme.colorWarningTextActive,
+        '#a44185': antTheme.colorSuccess,
+        '#dc3eb7': antTheme.yellow11
+      }
+    };
+  }, [antTheme]);
+
+  // 构建 shiki 主题
   var shikiTheme = useMemo(function () {
+    if (matchedTheme) {
+      return matchedTheme;
+    }
     if (language === 'md') {
       return isDarkMode ? 'catppuccin-mocha' : 'catppuccin-latte';
     }
+    if (language === 'shellsession') {
+      return isDarkMode ? 'material-theme-darker' : 'material-theme-lighter';
+    }
     return isDarkMode ? 'slack-dark' : 'slack-ochin';
-  }, [isDarkMode, language]);
-  return useSWR([matchedLanguage, isDarkMode ? 'd' : 'l', key].join('-'), /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  }, [isDarkMode, language, matchedTheme]);
+
+  // 构建缓存键
+  var cacheKey = useMemo(function () {
+    // 长文本使用 hash
+    var hash = text.length < MD5_LENGTH_THRESHOLD ? text : Md5.hashStr(text);
+    return [matchedLanguage, shikiTheme, hash].join('-');
+  }, [text, matchedLanguage, shikiTheme]);
+
+  // 使用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
-              }
-            },
+          _context.next = 3;
+          return shikiPromise;
+        case 3:
+          codeToHtml = _context.sent;
+          _context.next = 6;
+          return codeToHtml(text, {
+            colorReplacements: colorReplacements,
             lang: matchedLanguage,
             theme: shikiTheme,
             transformers: transformers
-          }));
-        case 4:
-          _context.prev = 4;
+          });
+        case 6:
+          html = _context.sent;
+          return _context.abrupt("return", html);
+        case 10:
+          _context.prev = 10;
           _context.t0 = _context["catch"](0);
-          console.warn('shiki Highlight error:', _context.t0);
-          return _context.abrupt("return", text);
-        case 8:
+          console.warn('高级渲染失败:', _context.t0);
+          _context.prev = 13;
+          _context.next = 16;
+          return shikiPromise;
+        case 16:
+          _codeToHtml = _context.sent;
+          _context.next = 19;
+          return _codeToHtml(text, {
+            lang: matchedLanguage,
+            theme: shikiTheme
+          });
+        case 19:
+          _html = _context.sent;
+          return _context.abrupt("return", _html);
+        case 23:
+          _context.prev = 23;
+          _context.t1 = _context["catch"](13);
+          // 最终降级到纯文本
+          fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
+          return _context.abrupt("return", fallbackHtml);
+        case 27:
         case "end":
           return _context.stop();
       }
-    }, _callee, null, [[0, 4]]);
-  })));
+    }, _callee, null, [[0, 10], [13, 23]]);
+  })), {
+    dedupingInterval: 3000,
+    // 3秒内相同请求只执行一次
+    errorRetryCount: 2,
+    // 最多重试2次
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false
+  });
 };
-export { languageMap } from "./languageMap";
+export { languageMap } from "./languageMap";
+export { themeMap } from "./themeMap";
+export { escapeHtml, loadShiki, MD5_LENGTH_THRESHOLD, shikiPromise };

package/es/index.d.ts

@@ -34,6 +34,7 @@ export * from './ChatMarkdown';
 export * from './CodeEditor';
 export * from './EditableMessage';
 export * from './Highlighter';
+export * from './hooks/useHighlight';
 export * from './styles';
 export * from './useSpeechSynthes';
 export * from './WaveformIcon';

package/es/index.js

@@ -38,6 +38,7 @@ export * from "./ChatMarkdown";
 export * from "./CodeEditor";
 export * from "./EditableMessage";
 export * from "./Highlighter";
+export * from "./hooks/useHighlight";
 export * from "./styles";
 
 // ~ custom @lobehub/tts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuntijs/ui",
-  "version": "1.2.0-beta.5",
+  "version": "1.2.0-beta.7",
   "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
   "keywords": [
     "yuntijs",