feat: markdown渲染的图片允许被放大预览

顺便升级了一下markdown渲染组件的版本

Author: moonrailgun

client/web/package.json

@@ -53,7 +53,7 @@
     "react-easy-crop": "^3.5.3",
     "react-helmet": "^6.1.0",
     "react-is": "^18.2.0",
-    "react-markdown": "^6.0.3",
+    "react-markdown": "^8.0.4",
     "react-mentions": "^4.4.7",
     "react-router": "^6.5.0",
     "react-router-dom": "^6.5.0",

client/web/src/components/Markdown.tsx

@@ -1,7 +1,8 @@
 import { markAbsoluteUrl } from '@/utils/url-helper';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { isValidStr } from 'tailchat-shared';
 import { Loadable } from './Loadable';
+import { Image } from 'tailchat-design';
 import './Markdown.less';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -23,12 +24,25 @@ export const Markdown: React.FC<{
     [baseUrl]
   );
 
+  /**
+   * Markdown自定义渲染组件
+   */
+  const components = useMemo<
+    React.ComponentProps<typeof ReactMarkdown>['components']
+  >(
+    () => ({
+      img: (props) => <Image src={props.src} preview={true} />,
+    }),
+    []
+  );
+
   return (
     <ReactMarkdown
       className="tailchat-markdown"
       transformImageUri={(src) => transformUrl(src)}
       transformLinkUri={(href) => transformUrl(href)}
       skipHtml={true}
+      components={components}
     >
       {raw}
     </ReactMarkdown>