@lobehub/ui 2.1.3 → 2.1.5

package/es/Markdown/SyntaxMarkdown/index.js

@@ -41,8 +41,7 @@ var SyntaxMarkdown = /*#__PURE__*/memo(function (_ref2) {
     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,
+    enableImageGallery = _ref2.enableImageGallery,
     enableCustomFootnotes = _ref2.enableCustomFootnotes,
     componentProps = _ref2.componentProps,
     allowHtml = _ref2.allowHtml,

package/es/hooks/useMarkdown/index.js

@@ -68,14 +68,14 @@ var createComponentFactories = function createComponentFactories(params) {
  * Optimized version with better memoization and performance
  */
 export var useMarkdown = function useMarkdown(_ref) {
+  var _componentProps$highl2, _componentProps$merma2;
   var 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,
+    enableImageGallery = _ref.enableImageGallery,
     enableCustomFootnotes = _ref.enableCustomFootnotes,
     componentProps = _ref.componentProps,
     allowHtml = _ref.allowHtml,
@@ -111,18 +111,41 @@ export var useMarkdown = function useMarkdown(_ref) {
     rehypePluginsList = _useMemo.rehypePluginsList,
     remarkPluginsList = _useMemo.remarkPluginsList;
 
+  // Stable references for theme objects to prevent unnecessary re-renders
+  var highlightTheme = useMemo(function () {
+    var _componentProps$highl;
+    return componentProps === null || componentProps === void 0 || (_componentProps$highl = componentProps.highlight) === null || _componentProps$highl === void 0 ? void 0 : _componentProps$highl.theme;
+  }, [JSON.stringify(componentProps === null || componentProps === void 0 || (_componentProps$highl2 = componentProps.highlight) === null || _componentProps$highl2 === void 0 ? void 0 : _componentProps$highl2.theme)]);
+  var mermaidTheme = useMemo(function () {
+    var _componentProps$merma;
+    return componentProps === null || componentProps === void 0 || (_componentProps$merma = componentProps.mermaid) === null || _componentProps$merma === void 0 ? void 0 : _componentProps$merma.theme;
+  }, [JSON.stringify(componentProps === null || componentProps === void 0 || (_componentProps$merma2 = componentProps.mermaid) === null || _componentProps$merma2 === void 0 ? void 0 : _componentProps$merma2.theme)]);
+
+  // Create stable component props reference
+  var stableComponentProps = useMemo(function () {
+    if (!componentProps) return;
+    return _objectSpread(_objectSpread({}, componentProps), {}, {
+      highlight: componentProps.highlight ? _objectSpread(_objectSpread({}, componentProps.highlight), {}, {
+        theme: highlightTheme
+      }) : undefined,
+      mermaid: componentProps.mermaid ? _objectSpread(_objectSpread({}, componentProps.mermaid), {}, {
+        theme: mermaidTheme
+      }) : undefined
+    });
+  }, [componentProps === null || componentProps === void 0 ? void 0 : componentProps.a, componentProps === null || componentProps === void 0 ? void 0 : componentProps.img, componentProps === null || componentProps === void 0 ? void 0 : componentProps.pre, componentProps === null || componentProps === void 0 ? void 0 : componentProps.video, highlightTheme, mermaidTheme]);
+
   // Memoize the factory parameters to prevent recreating component factories
   var factoryParams = useMemo(function () {
     return {
       animated: animated || false,
       // Ensure animated is always a boolean
       citations: citations,
-      componentProps: componentProps,
+      componentProps: stableComponentProps,
       enableMermaid: enableMermaid,
       fullFeaturedCodeBlock: fullFeaturedCodeBlock,
       showFootnotes: showFootnotes
     };
-  }, [animated, citations, componentProps, enableMermaid, fullFeaturedCodeBlock, showFootnotes]);
+  }, [animated, citations, stableComponentProps, enableMermaid, fullFeaturedCodeBlock, showFootnotes]);
 
   // Create component factories once and reuse them
   var componentFactories = useMemo(function () {

package/es/mdx/Mdx/index.js

@@ -46,8 +46,7 @@ var Mdx = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style,
     _ref$fullFeaturedCode = _ref.fullFeaturedCodeBlock,
     fullFeaturedCodeBlock = _ref$fullFeaturedCode === void 0 ? true : _ref$fullFeaturedCode,
-    _ref$enableImageGalle = _ref.enableImageGallery,
-    enableImageGallery = _ref$enableImageGalle === void 0 ? true : _ref$enableImageGalle,
+    enableImageGallery = _ref.enableImageGallery,
     _ref$enableLatex = _ref.enableLatex,
     enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
     _ref$enableMermaid = _ref.enableMermaid,

package/es/mdx/mdxComponents/Pre.js

@@ -22,7 +22,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    margin-block: 1em;\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n  "])))
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    margin-block: 0.5em;\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color) inset;\n  "])))
   };
 });
 export var Pre = function Pre(_ref2) {

package/package.json

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