@lobehub/ui 2.1.4 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -41,8 +41,7 @@ var SyntaxMarkdown = /*#__PURE__*/memo(function (_ref2) {
41
41
  enableLatex = _ref2$enableLatex === void 0 ? true : _ref2$enableLatex,
42
42
  _ref2$enableMermaid = _ref2.enableMermaid,
43
43
  enableMermaid = _ref2$enableMermaid === void 0 ? true : _ref2$enableMermaid,
44
- _ref2$enableImageGall = _ref2.enableImageGallery,
45
- enableImageGallery = _ref2$enableImageGall === void 0 ? true : _ref2$enableImageGall,
44
+ enableImageGallery = _ref2.enableImageGallery,
46
45
  enableCustomFootnotes = _ref2.enableCustomFootnotes,
47
46
  componentProps = _ref2.componentProps,
48
47
  allowHtml = _ref2.allowHtml,
@@ -68,6 +68,7 @@ var createComponentFactories = function createComponentFactories(params) {
68
68
  * Optimized version with better memoization and performance
69
69
  */
70
70
  export var useMarkdown = function useMarkdown(_ref) {
71
+ var _componentProps$highl2, _componentProps$merma2;
71
72
  var fullFeaturedCodeBlock = _ref.fullFeaturedCodeBlock,
72
73
  animated = _ref.animated,
73
74
  _ref$enableLatex = _ref.enableLatex,
@@ -110,18 +111,41 @@ export var useMarkdown = function useMarkdown(_ref) {
110
111
  rehypePluginsList = _useMemo.rehypePluginsList,
111
112
  remarkPluginsList = _useMemo.remarkPluginsList;
112
113
 
114
+ // Stable references for theme objects to prevent unnecessary re-renders
115
+ var highlightTheme = useMemo(function () {
116
+ var _componentProps$highl;
117
+ return componentProps === null || componentProps === void 0 || (_componentProps$highl = componentProps.highlight) === null || _componentProps$highl === void 0 ? void 0 : _componentProps$highl.theme;
118
+ }, [JSON.stringify(componentProps === null || componentProps === void 0 || (_componentProps$highl2 = componentProps.highlight) === null || _componentProps$highl2 === void 0 ? void 0 : _componentProps$highl2.theme)]);
119
+ var mermaidTheme = useMemo(function () {
120
+ var _componentProps$merma;
121
+ return componentProps === null || componentProps === void 0 || (_componentProps$merma = componentProps.mermaid) === null || _componentProps$merma === void 0 ? void 0 : _componentProps$merma.theme;
122
+ }, [JSON.stringify(componentProps === null || componentProps === void 0 || (_componentProps$merma2 = componentProps.mermaid) === null || _componentProps$merma2 === void 0 ? void 0 : _componentProps$merma2.theme)]);
123
+
124
+ // Create stable component props reference
125
+ var stableComponentProps = useMemo(function () {
126
+ if (!componentProps) return;
127
+ return _objectSpread(_objectSpread({}, componentProps), {}, {
128
+ highlight: componentProps.highlight ? _objectSpread(_objectSpread({}, componentProps.highlight), {}, {
129
+ theme: highlightTheme
130
+ }) : undefined,
131
+ mermaid: componentProps.mermaid ? _objectSpread(_objectSpread({}, componentProps.mermaid), {}, {
132
+ theme: mermaidTheme
133
+ }) : undefined
134
+ });
135
+ }, [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]);
136
+
113
137
  // Memoize the factory parameters to prevent recreating component factories
114
138
  var factoryParams = useMemo(function () {
115
139
  return {
116
140
  animated: animated || false,
117
141
  // Ensure animated is always a boolean
118
142
  citations: citations,
119
- componentProps: componentProps,
143
+ componentProps: stableComponentProps,
120
144
  enableMermaid: enableMermaid,
121
145
  fullFeaturedCodeBlock: fullFeaturedCodeBlock,
122
146
  showFootnotes: showFootnotes
123
147
  };
124
- }, [animated, citations, componentProps, enableMermaid, fullFeaturedCodeBlock, showFootnotes]);
148
+ }, [animated, citations, stableComponentProps, enableMermaid, fullFeaturedCodeBlock, showFootnotes]);
125
149
 
126
150
  // Create component factories once and reuse them
127
151
  var componentFactories = useMemo(function () {
@@ -46,8 +46,7 @@ var Mdx = /*#__PURE__*/memo(function (_ref) {
46
46
  style = _ref.style,
47
47
  _ref$fullFeaturedCode = _ref.fullFeaturedCodeBlock,
48
48
  fullFeaturedCodeBlock = _ref$fullFeaturedCode === void 0 ? true : _ref$fullFeaturedCode,
49
- _ref$enableImageGalle = _ref.enableImageGallery,
50
- enableImageGallery = _ref$enableImageGalle === void 0 ? true : _ref$enableImageGalle,
49
+ enableImageGallery = _ref.enableImageGallery,
51
50
  _ref$enableLatex = _ref.enableLatex,
52
51
  enableLatex = _ref$enableLatex === void 0 ? true : _ref$enableLatex,
53
52
  _ref$enableMermaid = _ref.enableMermaid,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "2.1.4",
3
+ "version": "2.1.5",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",