From 3167fb53b408b642531097e93a0b8e35297f3cd1 Mon Sep 17 00:00:00 2001
From: canisminor1990 <i@canisminor.cc>
Date: Sat, 2 Dec 2023 16:38:04 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20style:=20Remove=20image=20hover?=
 =?UTF-8?q?=20in=20mobile=20mode?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Image/index.tsx    |  4 +++-
 src/Markdown/index.tsx | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/Image/index.tsx b/src/Image/index.tsx
index baa8917f..a69881bf 100644
--- a/src/Image/index.tsx
+++ b/src/Image/index.tsx
@@ -1,4 +1,5 @@
 import { Image as AntImage, type ImageProps as AntImageProps, Skeleton } from 'antd';
+import { useResponsive } from 'antd-style';
 import { Eye } from 'lucide-react';
 import { ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -30,6 +31,7 @@ const Image = memo<ImageProps>(
     objectFit = 'cover',
     ...rest
   }) => {
+    const { mobile } = useResponsive();
     const { styles, cx, theme } = useStyles({ alwaysShowActions, minSize, objectFit, size });
     const mergePreivew = usePreview(preview);
 
@@ -54,7 +56,7 @@ const Image = memo<ImageProps>(
           fallback={styles.imageOff}
           loading={'lazy'}
           preview={{
-            mask: actions ? <div /> : <Icon icon={Eye} size={'normal'} />,
+            mask: mobile ? false : actions ? <div /> : <Icon icon={Eye} size={'normal'} />,
             ...(mergePreivew as any),
           }}
           wrapperClassName={styles.image}
diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
index 97cd2c71..bdad3d02 100644
--- a/src/Markdown/index.tsx
+++ b/src/Markdown/index.tsx
@@ -22,25 +22,34 @@ export interface MarkdownProps {
    * @description The class name for the Markdown component
    */
   className?: string;
+  enableImageGallery?: boolean;
   fullFeaturedCodeBlock?: boolean;
   onDoubleClick?: () => void;
   style?: CSSProperties;
 }
 
 const Markdown = memo<MarkdownProps>(
-  ({ children, className, style, fullFeaturedCodeBlock, onDoubleClick, ...rest }) => {
+  ({
+    children,
+    className,
+    style,
+    fullFeaturedCodeBlock,
+    onDoubleClick,
+    enableImageGallery = true,
+    ...rest
+  }) => {
     const { styles } = useStyles();
     const components: Components = {
       a: (props: any) => <Typography.Link {...props} rel="noopener noreferrer" target="_blank" />,
       details: (props: any) => <Collapse {...props} />,
       hr: () => <Divider style={{ marginBottom: '1em', marginTop: 0 }} />,
-      img: (props: any) => <Image {...props} />,
+      img: enableImageGallery ? (props: any) => <Image {...props} /> : undefined,
       pre: fullFeaturedCodeBlock ? CodeFullFeatured : CodeLite,
     };
 
     return (
       <Typography className={className} onDoubleClick={onDoubleClick} style={style}>
-        <ImageGallery>
+        <ImageGallery enable={enableImageGallery}>
           <ErrorBoundary
             fallback={
               <ReactMarkdown