@lobehub/ui 1.119.2 → 1.119.3

package/es/Markdown/index.js

@@ -6,6 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { Collapse, Divider, Image, Typography } from 'antd';
 import { memo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { Flexbox } from 'react-layout-kit';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import remarkGfm from 'remark-gfm';
@@ -41,7 +42,19 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
       });
     },
     img: function img(props) {
-      return /*#__PURE__*/_jsx(Image, _objectSpread({}, props));
+      return /*#__PURE__*/_jsx(Flexbox, {
+        className: styles.imageWrapper,
+        children: /*#__PURE__*/_jsx(Image, _objectSpread({
+          preview: {
+            styles: {
+              mask: {
+                backdropFilter: 'blur(2px)'
+              }
+            }
+          },
+          wrapperClassName: styles.image
+        }, props))
+      });
     },
     pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite
   };
@@ -49,22 +62,31 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     className: className,
     onDoubleClick: onDoubleClick,
     style: style,
-    children: /*#__PURE__*/_jsx(ErrorBoundary, {
-      fallback: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
-        className: styles.markdown,
-        components: components,
-        remarkPlugins: [remarkGfm]
-      }, rest), {}, {
-        children: children
-      })),
-      children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
-        className: styles.markdown,
-        components: components,
-        rehypePlugins: [rehypeKatex],
-        remarkPlugins: [remarkGfm, remarkMath]
-      }, rest), {}, {
-        children: children
-      }))
+    children: /*#__PURE__*/_jsx(Image.PreviewGroup, {
+      preview: {
+        styles: {
+          mask: {
+            backdropFilter: 'blur(2px)'
+          }
+        }
+      },
+      children: /*#__PURE__*/_jsx(ErrorBoundary, {
+        fallback: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
+          className: styles.markdown,
+          components: components,
+          remarkPlugins: [remarkGfm]
+        }, rest), {}, {
+          children: children
+        })),
+        children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
+          className: styles.markdown,
+          components: components,
+          rehypePlugins: [rehypeKatex],
+          remarkPlugins: [remarkGfm, remarkMath]
+        }, rest), {}, {
+          children: children
+        }))
+      })
     })
   });
 });

package/es/Markdown/style.d.ts

@@ -1,3 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    image: import("antd-style").SerializedStyles;
+    imageWrapper: import("antd-style").SerializedStyles;
     markdown: any;
 }>;

package/es/Markdown/style.js

@@ -1,7 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
-  var stylish = _ref.stylish;
+  var stylish = _ref.stylish,
+    token = _ref.token,
+    css = _ref.css;
   return {
+    image: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      overflow: hidden;\n      width: 100%;\n      height: 100%;\n\n      img {\n        width: 100% !important;\n        height: 100% !important;\n        object-fit: contain;\n      }\n    "]))),
+    imageWrapper: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      overflow: hidden;\n\n      margin-block: 0 1em;\n\n      background: ", ";\n      border-radius: ", "px;\n      box-shadow: 0 0 0 1px ", ";\n    "])), rgba(token.colorBgLayout, 0.25), token.borderRadius, token.colorFillTertiary),
     markdown: stylish.markdown
   };
 });

package/package.json

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