@lobehub/ui 2.8.5 → 2.8.6

package/es/Highlighter/FullFeatured.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { HighlighterProps } from './type';
 interface HighlighterFullFeaturedProps extends Omit<HighlighterProps, 'children' | 'bodyRender' | 'enableTransformer'> {
     content: string;
+    setLanguage?: (language: string) => void;
 }
 export declare const HighlighterFullFeatured: import("react").NamedExoticComponent<HighlighterFullFeaturedProps & {
     children: ReactNode;

package/es/Highlighter/FullFeatured.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["content", "language", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
+var _excluded = ["content", "language", "setLanguage", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
 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; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -15,26 +15,23 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Select } from 'antd';
 import { cva } from 'class-variance-authority';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
-import { languages } from "./const";
+import { getCodeLanguageDisplayName, getCodeLanguageFilename } from "./const";
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
+import Text from "../Text";
+import LangSelect from "./LangSelect";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var options = languages.map(function (item) {
-  return {
-    label: item,
-    value: item.toLowerCase()
-  };
-});
 export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
   var content = _ref.content,
     language = _ref.language,
+    setLanguage = _ref.setLanguage,
     showLanguage = _ref.showLanguage,
     className = _ref.className,
     style = _ref.style,
@@ -55,10 +52,6 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     expand = _useState2[0],
     setExpand = _useState2[1];
-  var _useState3 = useState(language),
-    _useState4 = _slicedToArray(_useState3, 2),
-    lang = _useState4[0],
-    setLang = _useState4[1];
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -127,6 +120,14 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
     language: language,
     originalNode: originalActions
   }) : originalActions;
+  var displayName = useMemo(function () {
+    if (fileName) return fileName;
+    return getCodeLanguageDisplayName(language);
+  }, [fileName, language]);
+  var filetype = useMemo(function () {
+    if (fileName) return fileName;
+    return getCodeLanguageFilename(language);
+  }, [fileName, language]);
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     className: cx(variants({
       shadow: shadow,
@@ -149,22 +150,24 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref) {
           return setExpand(!expand);
         },
         size: 'small'
-      }), allowChangeLanguage && !fileName ? showLanguage && /*#__PURE__*/_jsx(Select, {
-        className: styles.select,
-        onSelect: setLang,
-        options: options,
-        size: 'small',
-        suffixIcon: false,
-        value: lang.toLowerCase(),
-        variant: 'borderless'
+      }), allowChangeLanguage && !fileName ? showLanguage && /*#__PURE__*/_jsx(LangSelect, {
+        onSelect: setLanguage,
+        value: language.toLowerCase()
       }) : /*#__PURE__*/_jsxs(Flexbox, {
         align: 'center',
-        className: styles.select,
-        gap: 2,
+        className: 'languageTitle',
+        gap: 4,
         horizontal: true,
-        justify: 'center',
-        children: [icon, /*#__PURE__*/_jsx("span", {
-          children: fileName || lang
+        children: [icon || /*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+          fallbackUnknownType: false,
+          filename: filetype,
+          size: 18,
+          type: 'file',
+          variant: 'raw'
+        }), /*#__PURE__*/_jsx(Text, {
+          ellipsis: true,
+          fontSize: 13,
+          children: displayName
         })]
       }), /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',

package/es/Highlighter/Highlighter.js

@@ -7,12 +7,19 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { cva } from 'class-variance-authority';
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import CopyButton from "../CopyButton";
+import { getCodeLanguageDisplayName } from "./const";
 import Tag from "../Tag";
 import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
@@ -48,6 +55,10 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
+  var _useState = useState(language),
+    _useState2 = _slicedToArray(_useState, 2),
+    lang = _useState2[0],
+    setLang = _useState2[1];
   var variants = useMemo(function () {
     return cva(styles.root, {
       defaultVariants: {
@@ -83,20 +94,24 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
   var actions = actionsRender ? actionsRender({
     actionIconSize: actionIconSize,
     content: tirmedChildren,
-    language: language,
+    language: lang,
     originalNode: originalActions
   }) : originalActions;
   var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
     animated: animated,
     enableTransformer: enableTransformer,
-    language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
+    language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
     theme: theme,
     variant: variant,
     children: tirmedChildren
   });
+  var displayName = useMemo(function () {
+    if (fileName) return fileName;
+    return getCodeLanguageDisplayName(language);
+  }, [fileName, language]);
   var body = bodyRender ? bodyRender({
     content: tirmedChildren,
-    language: language,
+    language: lang,
     originalNode: originalBody
   }) : originalBody;
   if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
@@ -109,6 +124,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     fileName: fileName,
     icon: icon,
     language: language,
+    setLanguage: setLang,
     shadow: shadow,
     showLanguage: showLanguage,
     variant: variant,
@@ -133,7 +149,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       children: actions
     }), showLanguage && language && /*#__PURE__*/_jsx(Tag, {
       className: styles.lang,
-      children: language.toLowerCase()
+      children: displayName
     }), body]
   }));
 });

package/es/Highlighter/LangSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type SelectProps } from 'antd';
+export declare const LangSelect: import("react").NamedExoticComponent<Omit<SelectProps<any, import("rc-select/lib/Select").DefaultOptionType>, "options">>;
+export default LangSelect;

package/es/Highlighter/LangSelect.js

@@ -0,0 +1,85 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+import { Select } from 'antd';
+import { memo, useMemo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { bundledLanguagesInfo } from 'shiki';
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
+import Text from "../Text";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var LangSelect = /*#__PURE__*/memo(function (_ref) {
+  var rest = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var options = useMemo(function () {
+    return [{
+      aliases: ['text', 'txt'],
+      label: /*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        gap: 4,
+        horizontal: true,
+        children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+          fallbackUnknownType: false,
+          filename: "*.txt",
+          size: 18,
+          type: 'file',
+          variant: 'raw'
+        }), /*#__PURE__*/_jsx(Text, {
+          ellipsis: true,
+          fontSize: 13,
+          children: "Plaintext"
+        })]
+      }),
+      value: 'plaintext'
+    }].concat(_toConsumableArray(bundledLanguagesInfo.map(function (item) {
+      var _item$aliases;
+      return {
+        aliases: item.aliases,
+        label: /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          gap: 4,
+          horizontal: true,
+          children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+            fallbackUnknownType: false,
+            filename: "*.".concat((item === null || item === void 0 || (_item$aliases = item.aliases) === null || _item$aliases === void 0 ? void 0 : _item$aliases[0]) || item.id),
+            size: 18,
+            type: 'file',
+            variant: 'raw'
+          }), /*#__PURE__*/_jsx(Text, {
+            ellipsis: true,
+            fontSize: 13,
+            children: item.name
+          })]
+        }),
+        title: (item.aliases || [item.id]).filter(Boolean).map(function (item) {
+          return "*.".concat(item);
+        }).join(','),
+        value: item.id
+      };
+    })));
+  }, []);
+  return /*#__PURE__*/_jsx(Select, _objectSpread({
+    className: styles.select,
+    options: options,
+    showSearch: true,
+    size: 'small',
+    suffixIcon: false,
+    variant: 'borderless'
+  }, rest));
+});
+export default LangSelect;

package/es/Highlighter/const.d.ts

@@ -3,5 +3,8 @@ interface HighlighterThemeItem {
     id: string;
 }
 export declare const highlighterThemes: HighlighterThemeItem[];
-export declare const languages: 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 declare const FALLBACK_LANG = "plaintext";
+export declare const getCodeLanguageByInput: (input: string) => string;
+export declare const getCodeLanguageFilename: (input: string) => string;
+export declare const getCodeLanguageDisplayName: (input: string) => string;
 export {};

package/es/Highlighter/const.js

@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-import { bundledThemesInfo } from 'shiki';
+import { bundledLanguagesInfo, bundledThemesInfo } from 'shiki';
 export var highlighterThemes = [{
   displayName: 'Lobe Theme',
   id: 'lobe-theme'
@@ -14,4 +14,39 @@ export var highlighterThemes = [{
     id: item.id
   };
 })));
-export var languages = ['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 FALLBACK_LANG = 'plaintext';
+export var getCodeLanguageByInput = function getCodeLanguageByInput(input) {
+  if (!input) {
+    return 'plaintext';
+  }
+  var inputLang = input.toLocaleLowerCase();
+  var matchLang = bundledLanguagesInfo.find(function (lang) {
+    var _lang$aliases;
+    return lang.id === inputLang || ((_lang$aliases = lang.aliases) === null || _lang$aliases === void 0 ? void 0 : _lang$aliases.includes(inputLang));
+  });
+  return (matchLang === null || matchLang === void 0 ? void 0 : matchLang.id) || 'plaintext';
+};
+export var getCodeLanguageFilename = function getCodeLanguageFilename(input) {
+  var _matchLang$aliases;
+  if (!input) {
+    return 'Plaintext';
+  }
+  var inputLang = input.toLocaleLowerCase();
+  var matchLang = bundledLanguagesInfo.find(function (lang) {
+    var _lang$aliases2;
+    return lang.id === inputLang || ((_lang$aliases2 = lang.aliases) === null || _lang$aliases2 === void 0 ? void 0 : _lang$aliases2.includes(inputLang));
+  });
+  var type = (matchLang === null || matchLang === void 0 || (_matchLang$aliases = matchLang.aliases) === null || _matchLang$aliases === void 0 ? void 0 : _matchLang$aliases[0]) || (matchLang === null || matchLang === void 0 ? void 0 : matchLang.id) || 'txt';
+  return "*.".concat(type);
+};
+export var getCodeLanguageDisplayName = function getCodeLanguageDisplayName(input) {
+  if (!input) {
+    return 'Plaintext';
+  }
+  var inputLang = input.toLocaleLowerCase();
+  var matchLang = bundledLanguagesInfo.find(function (lang) {
+    var _lang$aliases3;
+    return lang.id === inputLang || ((_lang$aliases3 = lang.aliases) === null || _lang$aliases3 === void 0 ? void 0 : _lang$aliases3.includes(inputLang));
+  });
+  return (matchLang === null || matchLang === void 0 ? void 0 : matchLang.name) || 'Plaintext';
+};

package/es/Highlighter/style.js

@@ -21,8 +21,8 @@ export var useStyles = createStyles(function (_ref) {
     headerBorderless: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding-inline: 0;\n    "]))),
     headerFilled: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background: ", ";\n    "])), token.colorFillQuaternary),
     headerOutlined: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      & + .", " {\n        border-block-start: 1px solid ", ";\n      }\n    "])), expandCls, token.colorFillQuaternary),
-    headerRoot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      padding: 4px;\n    "]))),
-    lang: cx(langHoverCls, stylish.blur, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 0;\n\n        font-family: ", ";\n        color: ", ";\n\n        opacity: 0;\n        background: ", ";\n\n        transition: opacity 0.1s;\n      "])), token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary)),
+    headerRoot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      padding: 4px;\n\n      .languageTitle {\n        opacity: 0.5;\n        transition: opacity 0.2s ", ";\n      }\n\n      &:hover {\n        .languageTitle {\n          opacity: 1;\n        }\n      }\n    "])), token.motionEaseInOut),
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 2;\n        inset-block-end: 8px;\n        inset-inline-end: 8px;\n\n        font-family: ", ";\n        color: ", ";\n\n        opacity: 0;\n        background: ", ";\n\n        transition: opacity 0.1s;\n      "])), token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary)),
     nowrap: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      pre,\n      code {\n        text-wrap: nowrap;\n      }\n    "]))),
     outlined: stylish.variantOutlinedWithoutHover,
     root: cx(prefix, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n\n        overflow: hidden;\n\n        width: 100%;\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        code {\n          background: transparent !important;\n        }\n      "])), token.borderRadius, token.motionEaseOut, actionsHoverCls, langHoverCls)),

package/es/Markdown/components/CodeBlock.js

@@ -7,7 +7,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { FALLBACK_LANG } from "../../hooks/useHighlight";
+import { FALLBACK_LANG } from "../../Highlighter/const";
 import Pre, { PreMermaid, PreSingleLine } from "../../mdx/mdxComponents/Pre";
 import { jsx as _jsx } from "react/jsx-runtime";
 var countLines = function countLines(str) {

package/es/Mermaid/FullFeatured.js

@@ -22,6 +22,8 @@ import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import CopyButton from "../CopyButton";
 import { useStyles } from "../Highlighter/style";
+import MaterialFileTypeIcon from "../MaterialFileTypeIcon";
+import Text from "../Text";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
@@ -127,13 +129,22 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref) {
           return setExpand(!expand);
         },
         size: 'small'
-      }), showLanguage && /*#__PURE__*/_jsx(Flexbox, {
+      }), showLanguage && /*#__PURE__*/_jsxs(Flexbox, {
         align: 'center',
-        className: styles.select,
-        gap: 2,
+        className: 'languageTitle',
+        gap: 4,
         horizontal: true,
-        justify: 'center',
-        children: fileName || language.toLowerCase()
+        children: [/*#__PURE__*/_jsx(MaterialFileTypeIcon, {
+          fallbackUnknownType: false,
+          filename: fileName || language,
+          size: 18,
+          type: 'file',
+          variant: 'raw'
+        }), /*#__PURE__*/_jsx(Text, {
+          ellipsis: true,
+          fontSize: 13,
+          children: fileName || 'Mermaid'
+        })]
       }), /*#__PURE__*/_jsx(Flexbox, {
         align: 'center',
         flex: 'none',

package/es/hooks/useHighlight.d.ts

@@ -1,6 +1,5 @@
 import type { BuiltinTheme, CodeToHastOptions } from 'shiki';
 import { SWRResponse } from 'swr';
-export declare const FALLBACK_LANG = "txt";
 declare const MD5_LENGTH_THRESHOLD = 10000;
 type ICodeToHtml = (code: string, options: CodeToHastOptions) => Promise<string>;
 declare const loadShiki: () => Promise<ICodeToHtml | null>;

package/es/hooks/useHighlight.js

@@ -9,8 +9,7 @@ import { useTheme, useThemeMode } from 'antd-style';
 import { useMemo } from 'react';
 import useSWR from 'swr';
 import { Md5 } from 'ts-md5';
-import { languages } from "../Highlighter/const";
-export var FALLBACK_LANG = 'txt';
+import { getCodeLanguageByInput } from "../Highlighter/const";
 
 // Application-level cache to avoid repeated calculations
 var MD5_LENGTH_THRESHOLD = 10000; // Use async MD5 for text exceeding this length
@@ -43,7 +42,7 @@ export var useHighlight = function useHighlight(text, _ref) {
 
   // Match supported languages
   var matchedLanguage = useMemo(function () {
-    return languages.includes(lang) ? lang : FALLBACK_LANG;
+    return getCodeLanguageByInput(lang);
   }, [lang]);
 
   // Optimize transformer creation

package/es/mdx/mdxComponents/Pre.js

@@ -15,9 +15,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import { createStyles } from 'antd-style';
 import Highlighter from "../../Highlighter";
+import { FALLBACK_LANG } from "../../Highlighter/const";
 import Mermaid from "../../Mermaid";
 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;

package/package.json

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