@lobehub/ui 1.86.3 → 1.87.0

package/es/ChatItem/components/MessageContent.js

@@ -28,6 +28,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     },
     editButtonSize: 'small',
     editing: editing,
+    fullFeaturedCodeBlock: true,
     onChange: onChange,
     onEditingChange: onEditingChange,
     text: text,

package/es/EditableMessage/index.d.ts

@@ -22,6 +22,7 @@ export interface EditableMessageProps {
      * @default false
      */
     editing?: boolean;
+    fullFeaturedCodeBlock?: boolean;
     height?: MessageInputProps['height'];
     inputType?: MessageInputProps['type'];
     /**

package/es/EditableMessage/index.js

@@ -27,7 +27,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     height = _ref.height,
     inputType = _ref.inputType,
     editButtonSize = _ref.editButtonSize,
-    text = _ref.text;
+    text = _ref.text,
+    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock;
   var _useControlledState = useControlledState(false, {
       onChange: onEditingChange,
       value: editing
@@ -68,6 +69,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [!expand && isEdit ? input : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
+      fullFeaturedCodeBlock: fullFeaturedCodeBlock,
       style: _objectSpread({
         height: isAutoSize ? 'unset' : height,
         overflowX: 'hidden',

package/es/Highlighter/FullFeatured.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface HighlighterProps extends DivProps {
+    /**
+     * @description The code content to be highlighted
+     */
+    children: string;
+    /**
+     * @description The language of the code content
+     */
+    language: string;
+}
+export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
+export default Highlighter;
+export { default as SyntaxHighlighter, type SyntaxHighlighterProps } from './SyntaxHighlighter';

package/es/Highlighter/FullFeatured.js

@@ -0,0 +1,99 @@
+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"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Select } from 'antd';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import CopyButton from "../CopyButton";
+import { languageMap } from "../hooks/useHighlight";
+import SyntaxHighlighter from "./SyntaxHighlighter";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var options = languageMap.map(function (item) {
+  return {
+    label: item,
+    value: item.toLowerCase()
+  };
+});
+export var Highlighter = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    _ref$language = _ref.language,
+    language = _ref$language === void 0 ? 'markdown' : _ref$language,
+    className = _ref.className,
+    style = _ref.style,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _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('block'),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, className);
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: container,
+    "data-code-type": "highlighter",
+    style: style
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.header,
+      horizontal: true,
+      justify: 'space-between',
+      children: [/*#__PURE__*/_jsx(ActionIcon, {
+        icon: expand ? ChevronDown : ChevronRight,
+        onClick: function onClick() {
+          return setExpand(!expand);
+        },
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 3
+        }
+      }), /*#__PURE__*/_jsx(ActionIcon, {
+        size: {
+          blockSize: 24
+        },
+        style: {
+          width: 'unset'
+        },
+        children: /*#__PURE__*/_jsx(Select, {
+          bordered: false,
+          className: styles.select,
+          onSelect: setLang,
+          options: options,
+          size: 'small',
+          suffixIcon: false,
+          value: lang.toLowerCase()
+        })
+      }), /*#__PURE__*/_jsx(CopyButton, {
+        content: children,
+        placement: "left",
+        size: {
+          blockSize: 24,
+          fontSize: 14,
+          strokeWidth: 2
+        }
+      })]
+    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
+      style: expand ? {} : {
+        height: 0,
+        overflow: 'hidden'
+      },
+      children: children === null || children === void 0 ? void 0 : children.trim()
+    })]
+  }));
+});
+export default Highlighter;
+export { default as SyntaxHighlighter } from "./SyntaxHighlighter";

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

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { type HighlighterCoreOptions } from 'shikiji';
-export interface SyntaxHighlighterProps {
+import { DivProps } from "../../types";
+export interface SyntaxHighlighterProps extends DivProps {
     children: string;
     language: string;
     options?: HighlighterCoreOptions;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -12,9 +12,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language,
-    options = _ref.options;
+    options = _ref.options,
+    className = _ref.className,
+    style = _ref.style;
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var _useHighlight = useHighlight(function (s) {
@@ -28,12 +31,15 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   }, [options]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("code", {
+      className: className,
+      style: style,
       children: children
     }) : /*#__PURE__*/_jsx("div", {
-      className: styles.shiki,
+      className: cx(styles.shiki, className),
       dangerouslySetInnerHTML: {
         __html: codeToHtml(children, language, isDarkMode) || ''
-      }
+      },
+      style: style
     }), isLoading && /*#__PURE__*/_jsxs(Center, {
       className: styles.loading,
       gap: 8,

package/es/Highlighter/index.d.ts

@@ -12,6 +12,7 @@ export interface HighlighterProps extends DivProps {
      * @default true
      */
     copyable?: boolean;
+    fullFeatured?: boolean;
     /**
      * @description The language of the code content
      */

package/es/Highlighter/index.js

@@ -1,18 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
+var _excluded = ["fullFeatured", "copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
 import CopyButton from "../CopyButton";
 import Spotlight from "../Spotlight";
 import Tag from "../Tag";
+import FullFeatured from "./FullFeatured";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
-  var _ref$copyButtonSize = _ref.copyButtonSize,
+  var fullFeatured = _ref.fullFeatured,
+    _ref$copyButtonSize = _ref.copyButtonSize,
     copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
     children = _ref.children,
     language = _ref.language,
@@ -30,6 +32,13 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var container = cx(styles.container, className);
+  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
+    className: className,
+    language: language,
+    style: style
+  }, props), {}, {
+    children: children
+  }));
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: container,
     "data-code-type": "highlighter",

package/es/Highlighter/style.d.ts

@@ -1,5 +1,7 @@
 export declare const useStyles: (props?: "block" | "ghost" | "pure" | undefined) => import("antd-style").ReturnStyles<{
     button: string;
     container: string;
+    header: import("antd-style").SerializedStyles;
     lang: string;
+    select: import("antd-style").SerializedStyles;
 }>;

package/es/Highlighter/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, type) {
   var token = _ref.token,
@@ -14,6 +14,8 @@ export var useStyles = createStyles(function (_ref, type) {
   return {
     button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
     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")),
-    lang: cx(langHoverCls, stylish.blur, css(_templateObject4 || (_templateObject4 = _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))
+    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      "])), token.colorTextDescription)
   };
 });

package/es/Markdown/CodeBlock.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-declare const Code: import("react").NamedExoticComponent<any>;
-export default Code;
+export declare const CodeLite: import("react").MemoExoticComponent<(properties: any) => import("react/jsx-runtime").JSX.Element>;
+export declare const CodeFullFeatured: import("react").MemoExoticComponent<(properties: any) => import("react/jsx-runtime").JSX.Element>;

package/es/Markdown/CodeBlock.js

@@ -1,30 +1,65 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
+var _excluded = ["fullFeatured"];
+var _templateObject, _templateObject2;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import Highlighter from "../Highlighter";
+import Snippet from "../Snippet";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n    }\n  "])));
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    :not(:last-child) {\n      margin-block-start: 1em;\n      margin-block-end: 1em;\n      margin-inline-start: 0;\n      margin-inline-end: 0;\n    }\n  "]))),
+    highlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    pre {\n      padding: 12px !important;\n    }\n  "])))
+  };
 });
-var Code = /*#__PURE__*/memo(function (properties) {
+var countLines = function countLines(str) {
+  var regex = /\n/g;
+  var matches = str.match(regex);
+  return matches ? matches.length : 1;
+};
+var Code = /*#__PURE__*/memo(function (_ref2) {
+  var fullFeatured = _ref2.fullFeatured,
+    properties = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   if (!properties.children[0]) return;
   var _properties$children$ = properties.children[0].props,
     children = _properties$children$.children,
     className = _properties$children$.className;
   if (!children) return;
+  var content = Array.isArray(children) ? children[0] : children;
+  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',
+      type: 'block',
+      children: content
+    });
+  }
   return /*#__PURE__*/_jsx(Highlighter, {
-    className: styles,
+    className: cx(styles.container, styles.highlight),
     copyButtonSize: {
       blockSize: 28,
       fontSize: 16
     },
+    fullFeatured: fullFeatured,
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
     type: "block",
-    children: Array.isArray(children) ? children[0] : children
+    children: content
   });
 });
-export default Code;
+export var CodeLite = /*#__PURE__*/memo(function (properties) {
+  return /*#__PURE__*/_jsx(Code, _objectSpread({}, properties));
+});
+export var CodeFullFeatured = /*#__PURE__*/memo(function (properties) {
+  return /*#__PURE__*/_jsx(Code, _objectSpread({
+    fullFeatured: true
+  }, properties));
+});

package/es/Markdown/index.d.ts

@@ -9,6 +9,7 @@ export interface MarkdownProps {
      * @description The class name for the Markdown component
      */
     className?: string;
+    fullFeaturedCodeBlock?: boolean;
     style?: CSSProperties;
 }
 declare const Markdown: import("react").NamedExoticComponent<MarkdownProps>;

package/es/Markdown/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "className", "style"];
+var _excluded = ["children", "className", "style", "fullFeaturedCodeBlock"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Collapse, Divider, Image, Typography } from 'antd';
@@ -12,13 +12,14 @@ import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
-import CodeBlock from "./CodeBlock";
+import { CodeFullFeatured, CodeLite } from "./CodeBlock";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Markdown = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     className = _ref.className,
     style = _ref.style,
+    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
@@ -34,7 +35,7 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       });
     },
     img: Image,
-    pre: CodeBlock
+    pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite
   };
   return /*#__PURE__*/_jsx(Typography, {
     className: className,

package/es/Snippet/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight"];
+var _excluded = ["symbol", "language", "children", "copyable", "type", "spotlight", "className"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
@@ -20,11 +20,13 @@ var Snippet = /*#__PURE__*/memo(function (_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'ghost' : _ref$type,
     spotlight = _ref.spotlight,
+    className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(type),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: styles.container
+    className: cx(styles.container, className)
   }, props), {}, {
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(SyntaxHighlighter, {
       language: language,

package/es/styles/algorithms/generateCustomStylish.js

@@ -13,7 +13,7 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     blurStrong: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      backdrop-filter: blur(36px);\n    "]))),
     bottomScrollbar: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
     gradientAnimation: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      > *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre,\n      [data-code-type='highlighter'] {\n        border: none;\n        border-radius: ", "px;\n\n        > code {\n          padding: 0 !important;\n          border: none !important;\n        }\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        code {\n          display: inline-flex;\n        }\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      > ol > li {\n        margin-left: 0;\n      }\n\n      ol {\n        counter-reset: steps;\n        margin-left: 0;\n        list-style: none;\n\n        li {\n          counter-increment: steps;\n          word-break: break-all;\n\n          > p {\n            display: inline;\n          }\n\n          &::before {\n            content: counter(steps);\n\n            scale: 0.8;\n\n            unicode-bidi: isolate;\n            display: inline-flex !important;\n            align-items: center;\n            justify-content: center;\n\n            width: 1.4em;\n            min-width: 1.4em;\n            max-width: 1.4em;\n            height: 1.4em;\n            margin-right: 0.5em;\n\n            font-family: ", ";\n            font-size: 1em;\n            line-height: 1;\n            color: ", ";\n\n            background: ", ";\n            border-radius: 50%;\n          }\n        }\n\n        ol li::before {\n          color: ", ";\n          background: ", ";\n        }\n      }\n\n      ul {\n        > li::marker {\n          color: ", ";\n        }\n      }\n\n      > ul {\n        > li {\n          line-height: 1.8;\n          list-style-type: disc;\n\n          &::marker {\n            color: ", " !important;\n          }\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.fontFamilyCode, cyanColor, cyanBackground, token.colorTextSecondary, token.colorFill, token.colorTextDescription, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    markdown: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      > *:last-child {\n        margin-bottom: 0 !important;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre,\n      [data-code-type='highlighter'] {\n        border: none;\n        border-radius: ", "px;\n\n        > code {\n          padding: 0 !important;\n          border: none !important;\n        }\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        code {\n          display: inline-flex;\n        }\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      > ol > li::marker {\n        color: ", " !important;\n      }\n\n      > ul > li {\n        line-height: 1.8;\n        list-style-type: disc;\n        &::marker {\n          color: ", " !important;\n        }\n      }\n\n      ol,\n      ul {\n        > li::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, cyanColor, cyanBackground, isDarkMode ? token.cyan1A : token.cyan6A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan9A : token.cyan10A, token.colorTextDescription, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
     noScrollbar: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };

package/package.json

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