4.6.7 first pr (#726)

projects/app/src/components/Markdown/img/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { WheelEventHandler, useState } from 'react';
 import {
   Box,
   Image,
@@ -14,6 +14,17 @@ const MdImage = ({ src }: { src?: string }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [succeed, setSucceed] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scale, setScale] = useState(1);
+
+  const handleWheel: WheelEventHandler<HTMLImageElement> = (e) => {
+    setScale((prevScale) => {
+      const newScale = prevScale + e.deltaY * 0.5 * -0.01;
+      if (newScale < 0.5) return 0.5;
+      if (newScale > 10) return 10;
+      return newScale;
+    });
+  };
+
   return (
     <Skeleton
       minH="100px"
@@ -48,6 +59,7 @@ const MdImage = ({ src }: { src?: string }) => {
         <ModalOverlay />
         <ModalContent boxShadow={'none'} maxW={'auto'} w="auto" bg={'transparent'}>
           <Image
+            transform={`scale(${scale})`}
             borderRadius={'md'}
             src={src}
             alt={''}
@@ -57,6 +69,7 @@ const MdImage = ({ src }: { src?: string }) => {
             fallbackSrc={'/imgs/errImg.png'}
             fallbackStrategy={'onError'}
             objectFit={'contain'}
+            onWheel={handleWheel}
           />
         </ModalContent>
         <ModalCloseButton bg={'myWhite.500'} zIndex={999999} />