@lobehub/ui 2.0.16 → 2.1.0

package/es/Highlighter/Highlighter.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 = ["fullFeatured", "actionIconSize", "children", "language", "className", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme"];
+var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "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; }
 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; }
@@ -20,7 +20,8 @@ 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 fullFeatured = _ref.fullFeatured,
+  var animated = _ref.animated,
+    fullFeatured = _ref.fullFeatured,
     actionIconSize = _ref.actionIconSize,
     children = _ref.children,
     _ref$language = _ref.language,
@@ -81,6 +82,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     originalNode: originalActions
   }) : originalActions;
   var originalBody = /*#__PURE__*/_jsx(SyntaxHighlighter, {
+    animated: animated,
     enableTransformer: enableTransformer,
     language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
     theme: theme,

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Line: import("react").NamedExoticComponent<{
+    children?: string | undefined;
+}>;
+export default Line;

package/es/Highlighter/SyntaxHighlighter/Line.js

@@ -0,0 +1,78 @@
+'use client';
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+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 _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 _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; }
+import { memo, useEffect, useState } from 'react';
+import Span from "./Span";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Line = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    contents = _useState2[0],
+    setContents = _useState2[1];
+  useEffect(function () {
+    if (children && typeof children === 'string') {
+      // Extract all lines from the HTML content
+      // We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
+      var parser = new DOMParser();
+      var doc = parser.parseFromString(children, 'text/html');
+      var codeElement = doc.querySelector('span.line');
+      if (codeElement) {
+        var spanLines = codeElement.querySelectorAll('span');
+        var newLines = _toConsumableArray(spanLines).map(function (line) {
+          return line.outerHTML;
+        });
+        setContents(function (prevLines) {
+          if (prevLines.length !== newLines.length) return newLines;
+          var hasChanged = false;
+          var _iterator = _createForOfIteratorHelper(newLines.entries()),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _step$value = _slicedToArray(_step.value, 2),
+                i = _step$value[0],
+                newLine = _step$value[1];
+              if (prevLines[i] !== newLine) {
+                hasChanged = true;
+                break;
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+          return hasChanged ? newLines : prevLines;
+        });
+      } else {
+        // Fallback if the structure is different
+        var htmlLines = children.split('\n').map(function (line) {
+          return "<span>".concat(line, "</span>");
+        });
+        setContents(htmlLines);
+      }
+    }
+  }, [children]);
+  return /*#__PURE__*/_jsx("span", {
+    className: 'line',
+    children: contents && contents.length > 0 ? contents.map(function (span, index) {
+      return /*#__PURE__*/_jsx(Span, {
+        children: span
+      }, index);
+    }) : /*#__PURE__*/_jsx("span", {
+      children: " "
+    })
+  });
+});
+Line.displayName = 'HighlighterLine';
+export default Line;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const Span: import("react").NamedExoticComponent<{
+    children?: string | undefined;
+}>;
+export default Span;

package/es/Highlighter/SyntaxHighlighter/Span.js

@@ -0,0 +1,14 @@
+'use client';
+
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Span = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx("span", {
+    dangerouslySetInnerHTML: {
+      __html: children || ''
+    }
+  });
+});
+Span.displayName = 'HighlighterSpan';
+export default Span;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -14,66 +14,19 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { cva } from 'class-variance-authority';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { useHighlight } from "../../hooks/useHighlight";
+import Line from "./Line";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Span = /*#__PURE__*/memo(function (_ref) {
-  var data = _ref.data;
-  return /*#__PURE__*/_jsx("span", {
-    dangerouslySetInnerHTML: {
-      __html: data
-    }
-  });
-});
-var Line = /*#__PURE__*/memo(function (_ref2) {
-  var data = _ref2.data;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    contents = _useState2[0],
-    setContents = _useState2[1];
-  useEffect(function () {
-    if (data && typeof data === 'string') {
-      // Extract all lines from the HTML content
-      // We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
-      var parser = new DOMParser();
-      var doc = parser.parseFromString(data, 'text/html');
-      var codeElement = doc.querySelector('span.line');
-      if (codeElement) {
-        var spanLines = codeElement.querySelectorAll('span');
-        var newLines = _toConsumableArray(spanLines).map(function (line) {
-          return line.outerHTML;
-        });
-        setContents(newLines);
-      } else {
-        // Fallback if the structure is different
-        var htmlLines = data.split('\n').map(function (line) {
-          return "<span>".concat(line, "</span>");
-        });
-        setContents(htmlLines);
-      }
-    }
-  }, [data]);
-  return /*#__PURE__*/_jsx("span", {
-    className: 'line',
-    children: contents && contents.length > 0 ? contents.map(function (span, index) {
-      return /*#__PURE__*/_jsx(Span, {
-        data: span || ' '
-      }, index);
-    }) : /*#__PURE__*/_jsx("span", {
-      children: " "
-    })
-  });
-});
-Line.displayName = 'HighlighterLine';
-Span.displayName = 'HighlighterSpan';
-var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref3) {
-  var ref = _ref3.ref,
-    children = _ref3.children,
-    language = _ref3.language,
-    className = _ref3.className,
-    style = _ref3.style,
-    enableTransformer = _ref3.enableTransformer,
-    variant = _ref3.variant,
-    theme = _ref3.theme;
+var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
+  var ref = _ref.ref,
+    children = _ref.children,
+    language = _ref.language,
+    className = _ref.className,
+    style = _ref.style,
+    enableTransformer = _ref.enableTransformer,
+    variant = _ref.variant,
+    theme = _ref.theme,
+    animated = _ref.animated;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
@@ -85,16 +38,28 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref3) {
       theme: isDefaultTheme ? undefined : theme
     }),
     data = _useHighlight.data;
-  var _useState3 = useState([]),
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentLines = _useState2[0],
+    setContentLines = _useState2[1];
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    contentLines = _useState4[0],
-    setContentLines = _useState4[1];
+    preStyle = _useState4[0],
+    setPreStyle = _useState4[1];
   useEffect(function () {
     if (data && typeof data === 'string') {
       // Extract all lines from the HTML content
       // We need to handle the structure from shiki which gives us HTML with a <pre><code> structure
       var parser = new DOMParser();
       var doc = parser.parseFromString(data, 'text/html');
+      var preElement = doc.querySelector('pre');
+      var _preStyle = preElement === null || preElement === void 0 ? void 0 : preElement.style;
+      if (_preStyle) {
+        setPreStyle({
+          backgroundColor: _preStyle === null || _preStyle === void 0 ? void 0 : _preStyle.backgroundColor,
+          color: _preStyle === null || _preStyle === void 0 ? void 0 : _preStyle.color
+        });
+      }
       var codeElement = doc.querySelector('pre code');
       if (codeElement) {
         var spanLines = codeElement.querySelectorAll('.line');
@@ -175,6 +140,21 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref3) {
       })
     })
   });
+  if (!animated) {
+    return /*#__PURE__*/_jsx("div", {
+      className: cx(variants({
+        shiki: true,
+        showBackground: showBackground,
+        variant: variant
+      }), className),
+      dangerouslySetInnerHTML: {
+        __html: data || ''
+      },
+      dir: "ltr",
+      ref: ref,
+      style: style
+    });
+  }
   return /*#__PURE__*/_jsx("div", {
     className: cx(variants({
       shiki: true,
@@ -185,11 +165,17 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref3) {
     ref: ref,
     style: style,
     children: /*#__PURE__*/_jsx("pre", {
-      className: "shiki",
+      className: cx('shiki', isDefaultTheme ? undefined : theme),
+      style: preStyle,
+      tabIndex: 0,
       children: /*#__PURE__*/_jsx("code", {
+        style: {
+          display: 'flex',
+          flexDirection: 'column'
+        },
         children: contentLines.map(function (line, index) {
           return /*#__PURE__*/_jsx(Line, {
-            data: line
+            children: line
           }, index);
         })
       })

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -11,7 +11,7 @@ export var useStyles = createStyles(function (_ref) {
     noPadding: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        padding: 0;\n      }\n    "]))),
     padding: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      pre {\n        padding: 16px;\n      }\n    "]))),
     root: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      direction: ltr;\n      margin: 0;\n      padding: 0;\n      text-align: start;\n\n      pre {\n        overflow-x: auto;\n        margin: 0;\n        padding: 0;\n      }\n    "]))),
-    shiki: cx("".concat(prefixCls, "-highlighter-shiki"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        pre {\n          code {\n            display: block;\n\n            .line {\n              display: 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)),
+    shiki: cx("".concat(prefixCls, "-highlighter-shiki"), css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        pre {\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            border: 1px solid ", ";\n            border-radius: ", "px;\n\n            background: ", ";\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.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.colorErrorBg, token.colorErrorText, token.colorSuccessBg, token.colorSuccessText)),
     unshiki: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorTextDescription)
   };
 });

package/es/Highlighter/type.d.ts

@@ -4,6 +4,7 @@ import type { BuiltinTheme } from 'shiki';
 import type { ActionIconProps } from "../ActionIcon";
 import { DivProps } from "../types";
 export interface SyntaxHighlighterProps extends DivProps {
+    animated?: boolean;
     children: string;
     enableTransformer?: HighlighterProps['enableTransformer'];
     language: HighlighterProps['language'];
@@ -20,6 +21,7 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
         originalNode: ReactNode;
     }) => ReactNode;
     allowChangeLanguage?: boolean;
+    animated?: boolean;
     bodyRender?: (props: {
         content: string;
         language: string;

package/es/Markdown/SyntaxMarkdown/index.js

@@ -7,39 +7,64 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 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); }
 import { memo, useMemo } from 'react';
-import ReactMarkdown from 'react-markdown';
+import { MarkdownHooks } from 'react-markdown';
 import { PreviewGroup } from "../../Image";
-import { useMarkdown } from "../../hooks/useMarkdown";
+import { useMarkdown, useMarkdownContent } from "../../hooks/useMarkdown";
 import { jsx as _jsx } from "react/jsx-runtime";
-var SyntaxMarkdown = /*#__PURE__*/memo(function (_ref) {
-  var children = _ref.children,
-    fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
-    animated = _ref.animated,
-    _ref$enableLatex = _ref.enableLatex,
-    enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
-    _ref$enableMermaid = _ref.enableMermaid,
-    enableMermaid = _ref$enableMermaid === void 0 ? true : _ref$enableMermaid,
-    _ref$enableImageGalle = _ref.enableImageGallery,
-    enableImageGallery = _ref$enableImageGalle === void 0 ? true : _ref$enableImageGalle,
-    enableCustomFootnotes = _ref.enableCustomFootnotes,
-    componentProps = _ref.componentProps,
-    allowHtml = _ref.allowHtml,
-    showFootnotes = _ref.showFootnotes,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+// Create a pure component that only renders ReactMarkdown
+// This helps prevent unnecessary rerenders of ReactMarkdown
+var MarkdownRenderer = /*#__PURE__*/memo(function (_ref) {
+  var escapedContent = _ref.escapedContent,
+    memoComponents = _ref.memoComponents,
+    rehypePluginsList = _ref.rehypePluginsList,
+    remarkPluginsList = _ref.remarkPluginsList,
     reactMarkdownProps = _ref.reactMarkdownProps,
-    rehypePlugins = _ref.rehypePlugins,
-    remarkPlugins = _ref.remarkPlugins,
-    remarkPluginsAhead = _ref.remarkPluginsAhead,
-    _ref$components = _ref.components,
-    components = _ref$components === void 0 ? {} : _ref$components,
-    customRender = _ref.customRender,
-    citations = _ref.citations;
-  // Use our new hook to handle Markdown processing
+    enableImageGallery = _ref.enableImageGallery;
+  return /*#__PURE__*/_jsx(PreviewGroup, {
+    enable: enableImageGallery,
+    children: /*#__PURE__*/_jsx(MarkdownHooks, _objectSpread(_objectSpread({}, reactMarkdownProps), {}, {
+      components: memoComponents,
+      rehypePlugins: rehypePluginsList,
+      remarkPlugins: remarkPluginsList,
+      children: escapedContent || ''
+    }))
+  });
+});
+MarkdownRenderer.displayName = 'MarkdownRenderer';
+var SyntaxMarkdown = /*#__PURE__*/memo(function (_ref2) {
+  var children = _ref2.children,
+    fullFeaturedCodeBlock = _ref2.fullFeaturedCodeBlock,
+    animated = _ref2.animated,
+    _ref2$enableLatex = _ref2.enableLatex,
+    enableLatex = _ref2$enableLatex === void 0 ? true : _ref2$enableLatex,
+    _ref2$enableMermaid = _ref2.enableMermaid,
+    enableMermaid = _ref2$enableMermaid === void 0 ? true : _ref2$enableMermaid,
+    _ref2$enableImageGall = _ref2.enableImageGallery,
+    enableImageGallery = _ref2$enableImageGall === void 0 ? true : _ref2$enableImageGall,
+    enableCustomFootnotes = _ref2.enableCustomFootnotes,
+    componentProps = _ref2.componentProps,
+    allowHtml = _ref2.allowHtml,
+    showFootnotes = _ref2.showFootnotes,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    reactMarkdownProps = _ref2.reactMarkdownProps,
+    rehypePlugins = _ref2.rehypePlugins,
+    remarkPlugins = _ref2.remarkPlugins,
+    remarkPluginsAhead = _ref2.remarkPluginsAhead,
+    _ref2$components = _ref2.components,
+    components = _ref2$components === void 0 ? {} : _ref2$components,
+    customRender = _ref2.customRender,
+    citations = _ref2.citations;
+  var escapedContent = useMarkdownContent({
+    animated: animated,
+    children: children,
+    citations: citations,
+    enableCustomFootnotes: enableCustomFootnotes,
+    enableLatex: enableLatex
+  });
   var _useMarkdown = useMarkdown({
       allowHtml: allowHtml,
       animated: animated,
-      children: children,
       citations: citations,
       componentProps: componentProps,
       components: components,
@@ -54,29 +79,32 @@ var SyntaxMarkdown = /*#__PURE__*/memo(function (_ref) {
       showFootnotes: showFootnotes,
       variant: variant
     }),
-    escapedContent = _useMarkdown.escapedContent,
     memoComponents = _useMarkdown.memoComponents,
     rehypePluginsList = _useMarkdown.rehypePluginsList,
     remarkPluginsList = _useMarkdown.remarkPluginsList;
 
-  // 渲染默认内容
+  // Memoize the renderer configuration to prevent unnecessary re-renders
+  var rendererProps = useMemo(function () {
+    return {
+      enableImageGallery: enableImageGallery,
+      memoComponents: memoComponents,
+      reactMarkdownProps: reactMarkdownProps,
+      rehypePluginsList: rehypePluginsList,
+      remarkPluginsList: remarkPluginsList
+    };
+  }, [memoComponents, rehypePluginsList, remarkPluginsList, enableImageGallery, reactMarkdownProps]);
+
+  // Render default content using memoized MarkdownRenderer
   var defaultDOM = useMemo(function () {
-    return /*#__PURE__*/_jsx(PreviewGroup, {
-      enable: enableImageGallery,
-      children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({}, reactMarkdownProps), {}, {
-        components: memoComponents,
-        rehypePlugins: rehypePluginsList,
-        remarkPlugins: remarkPluginsList,
-        children: escapedContent
-      }))
-    });
-  }, [escapedContent, memoComponents, rehypePluginsList, remarkPluginsList, enableImageGallery, reactMarkdownProps]);
+    return /*#__PURE__*/_jsx(MarkdownRenderer, _objectSpread({
+      escapedContent: escapedContent
+    }, rendererProps));
+  }, [rendererProps, escapedContent]);
 
-  // 应用自定义渲染
-  var markdownContent = customRender ? customRender(defaultDOM, {
+  // Apply custom rendering if needed
+  return customRender ? customRender(defaultDOM, {
     text: escapedContent || ''
   }) : defaultDOM;
-  return markdownContent;
 });
 SyntaxMarkdown.displayName = 'SyntaxMarkdown';
 export default SyntaxMarkdown;

package/es/Markdown/components/CodeBlock.d.ts

@@ -7,12 +7,12 @@ export declare const useCode: (raw: any) => {
     lang: any;
 } | undefined;
 interface CodeBlockProps {
+    animated?: boolean;
     children: any;
     enableMermaid?: boolean;
     fullFeatured?: boolean;
     highlight?: HighlighterProps;
     mermaid?: MermaidProps;
 }
-export declare const CodeLite: FC<CodeBlockProps>;
-export declare const CodeFullFeatured: FC<CodeBlockProps>;
+export declare const CodeBlock: FC<CodeBlockProps>;
 export {};

package/es/Markdown/components/CodeBlock.js

@@ -1,5 +1,5 @@
 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 = ["fullFeatured", "enableMermaid", "highlight", "mermaid", "children"];
+var _excluded = ["fullFeatured", "enableMermaid", "highlight", "mermaid", "children", "animated"];
 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; }
@@ -30,12 +30,13 @@ export var useCode = function useCode(raw) {
     lang: lang
   };
 };
-var CodeBlock = function CodeBlock(_ref) {
+export var CodeBlock = function CodeBlock(_ref) {
   var fullFeatured = _ref.fullFeatured,
     enableMermaid = _ref.enableMermaid,
     highlight = _ref.highlight,
     mermaid = _ref.mermaid,
     children = _ref.children,
+    animated = _ref.animated,
     rest = _objectWithoutProperties(_ref, _excluded);
   var code = useCode(children);
   if (!code) return;
@@ -49,17 +50,10 @@ var CodeBlock = function CodeBlock(_ref) {
     children: code.content
   });
   return /*#__PURE__*/_jsx(Pre, _objectSpread(_objectSpread(_objectSpread({
+    animated: animated,
     fullFeatured: fullFeatured,
     language: code.lang
   }, highlight), rest), {}, {
     children: code.content
   }));
-};
-export var CodeLite = function CodeLite(props) {
-  return /*#__PURE__*/_jsx(CodeBlock, _objectSpread({}, props));
-};
-export var CodeFullFeatured = function CodeFullFeatured(props) {
-  return /*#__PURE__*/_jsx(CodeBlock, _objectSpread({
-    fullFeatured: true
-  }, props));
 };

package/es/hooks/useHighlight.js

@@ -12,12 +12,12 @@ import { Md5 } from 'ts-md5';
 import { languages } from "../Highlighter/const";
 export var FALLBACK_LANG = 'txt';
 
-// 应用级缓存，避免重复计算
-var MD5_LENGTH_THRESHOLD = 10000; // 超过该长度使用异步MD5
+// Application-level cache to avoid repeated calculations
+var MD5_LENGTH_THRESHOLD = 10000; // Use async MD5 for text exceeding this length
 
-// 颜色替换映射类型
+// Color replacement mapping type
 
-// 懒加载 shiki
+// Lazy load shiki
 var loadShiki = function loadShiki() {
   if (typeof window === 'undefined') return Promise.resolve(null);
   return import('shiki').then(function (mod) {
@@ -26,12 +26,12 @@ var loadShiki = function loadShiki() {
 };
 var shikiPromise = loadShiki();
 
-// 辅助函数：安全的HTML转义
+// Helper function: Safe HTML escaping
 var escapeHtml = function escapeHtml(str) {
   return str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
 };
 
-// 主高亮组件
+// Main highlight component
 export var useHighlight = function useHighlight(text, _ref) {
   var language = _ref.language,
     enableTransformer = _ref.enableTransformer,
@@ -41,18 +41,18 @@ export var useHighlight = function useHighlight(text, _ref) {
   var theme = useTheme();
   var lang = language.toLowerCase();
 
-  // 匹配支持的语言
+  // Match supported languages
   var matchedLanguage = useMemo(function () {
     return languages.includes(lang) ? lang : FALLBACK_LANG;
   }, [lang]);
 
-  // 优化transformer创建
+  // Optimize transformer creation
   var transformers = useMemo(function () {
     if (!enableTransformer) return;
     return [transformerNotationDiff(), transformerNotationHighlight(), transformerNotationWordHighlight(), transformerNotationFocus(), transformerNotationErrorLevel()];
   }, [enableTransformer]);
 
-  // 优化颜色替换配置
+  // Optimize color replacement configuration
   var colorReplacements = useMemo(function () {
     return {
       'slack-dark': {
@@ -81,14 +81,14 @@ export var useHighlight = function useHighlight(text, _ref) {
     };
   }, [theme]);
 
-  // 构建缓存键
+  // Build cache key
   var cacheKey = useMemo(function () {
-    // 长文本使用 hash
+    // Use hash for long text
     var hash = text.length < MD5_LENGTH_THRESHOLD ? text : Md5.hashStr(text);
     return [matchedLanguage, builtinTheme || (isDarkMode ? 'd' : 'l'), hash].filter(Boolean).join('-');
   }, [text, matchedLanguage, isDarkMode, builtinTheme]);
 
-  // 使用SWR获取高亮HTML
+  // Use SWR to get highlighted HTML
   return useSWR(cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
     var codeToHtml, html, _codeToHtml, _html, fallbackHtml;
     return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -118,7 +118,7 @@ export var useHighlight = function useHighlight(text, _ref) {
         case 12:
           _context.prev = 12;
           _context.t0 = _context["catch"](0);
-          console.error('高级渲染失败:', _context.t0);
+          console.error('Advanced rendering failed:', _context.t0);
           _context.prev = 15;
           _context.next = 18;
           return shikiPromise;
@@ -141,7 +141,7 @@ export var useHighlight = function useHighlight(text, _ref) {
         case 27:
           _context.prev = 27;
           _context.t1 = _context["catch"](15);
-          // 最终降级到纯文本
+          // Fallback to plain text
           fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
           return _context.abrupt("return", fallbackHtml);
         case 31:
@@ -151,9 +151,9 @@ export var useHighlight = function useHighlight(text, _ref) {
     }, _callee, null, [[0, 12], [15, 27]]);
   })), {
     dedupingInterval: 3000,
-    // 3秒内相同请求只执行一次
+    // Only execute once for the same request within 3 seconds
     errorRetryCount: 2,
-    // 最多重试2次
+    // Retry at most 2 times
     revalidateOnFocus: false,
     revalidateOnReconnect: false
   });

package/es/hooks/useMarkdown/index.d.ts

@@ -3,10 +3,12 @@ import type { Pluggable } from 'unified';
 import type { MarkdownProps } from "../../Markdown/type";
 /**
  * Processes Markdown content and prepares rendering components and configurations
+ * Optimized version with better memoization and performance
  */
-export declare const useMarkdown: ({ children, fullFeaturedCodeBlock, animated, enableLatex, enableMermaid, enableImageGallery, enableCustomFootnotes, componentProps, allowHtml, showFootnotes, variant, rehypePlugins, remarkPlugins, remarkPluginsAhead, components, citations, }: Pick<MarkdownProps, 'children' | 'fullFeaturedCodeBlock' | 'animated' | 'enableLatex' | 'enableMermaid' | 'enableImageGallery' | 'enableCustomFootnotes' | 'componentProps' | 'allowHtml' | 'showFootnotes' | 'variant' | 'rehypePlugins' | 'remarkPlugins' | 'remarkPluginsAhead' | 'components' | 'citations'>) => {
+export declare const useMarkdown: ({ fullFeaturedCodeBlock, animated, enableLatex, enableMermaid, enableImageGallery, enableCustomFootnotes, componentProps, allowHtml, showFootnotes, variant, rehypePlugins, remarkPlugins, remarkPluginsAhead, components, citations, }: Pick<MarkdownProps, 'fullFeaturedCodeBlock' | 'animated' | 'enableLatex' | 'enableMermaid' | 'enableImageGallery' | 'enableCustomFootnotes' | 'componentProps' | 'allowHtml' | 'showFootnotes' | 'variant' | 'rehypePlugins' | 'remarkPlugins' | 'remarkPluginsAhead' | 'components' | 'citations'>) => {
     escapedContent?: string | undefined;
     memoComponents: Components;
     rehypePluginsList: Pluggable[];
     remarkPluginsList: Pluggable[];
 };
+export declare const useMarkdownContent: ({ children, animated, enableLatex, enableCustomFootnotes, citations, }: Pick<MarkdownProps, 'children' | 'animated' | 'enableLatex' | 'enableCustomFootnotes' | 'citations'>) => string | undefined;