From 10f5da606037a499cc450baa144b370a2e2b626c Mon Sep 17 00:00:00 2001
From: troff8 <troffibp@gmail.com>
Date: Fri, 11 Aug 2023 15:55:09 +0400
Subject: [PATCH] feat(Md): add fullscreen image

---
 src/components/ImageFullScreen.tsx            | 29 +++++++++++++++++++
 src/components/Page.tsx                       |  7 +++++
 src/hooks/{useMarkdown.ts => useMarkdown.tsx} | 14 +++++++++
 src/utils/dispatchModal.ts                    |  5 ++++
 4 files changed, 55 insertions(+)
 create mode 100644 src/components/ImageFullScreen.tsx
 rename src/hooks/{useMarkdown.ts => useMarkdown.tsx} (54%)

diff --git a/src/components/ImageFullScreen.tsx b/src/components/ImageFullScreen.tsx
new file mode 100644
index 000000000..5a9f450da
--- /dev/null
+++ b/src/components/ImageFullScreen.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ModalContent } from '@taskany/bricks';
+import styled from 'styled-components';
+
+import { ModalEvent, dispatchModalEvent } from '../utils/dispatchModal';
+
+interface ImageFullScreenProps {
+    src?: string;
+    alt?: string;
+}
+const StyledImage = styled.img`
+    cursor: pointer;
+    width: 100vh;
+`;
+const StyledWrapperImage = styled.div`
+    display: flex;
+    justify-content: center;
+`;
+const ImageFullScreen: React.FC<ImageFullScreenProps> = ({ src = '', alt = '' }) => {
+    return (
+        <ModalContent>
+            <StyledWrapperImage>
+                <StyledImage src={src} alt={alt} onClick={dispatchModalEvent(ModalEvent.ImageFullScreen)} />
+            </StyledWrapperImage>
+        </ModalContent>
+    );
+};
+
+export default ImageFullScreen;
diff --git a/src/components/Page.tsx b/src/components/Page.tsx
index 2c4edbf06..ea2b32ebc 100644
--- a/src/components/Page.tsx
+++ b/src/components/Page.tsx
@@ -28,6 +28,7 @@ const HotkeysModal = dynamic(() => import('./HotkeysModal/HotkeysModal'));
 const NotificationsHub = dynamic(() => import('./NotificationsHub/NotificationsHub'));
 const FeedbackCreateForm = dynamic(() => import('./FeedbackCreateForm/FeedbackCreateForm'));
 const WhatsNew = dynamic(() => import('./WhatsNew/WhatsNew'));
+const ImageFullScreen = dynamic(() => import('./ImageFullScreen'));
 
 interface PageProps {
     user: Session['user'];
@@ -107,6 +108,12 @@ export const Page: React.FC<PageProps> = ({ user, ssrTime, title = 'Untitled', c
                 <FeedbackCreateForm />
             </ModalOnEvent>
 
+            <ModalOnEvent event={ModalEvent.ImageFullScreen}>
+                <ModalContext.Consumer>
+                    {(ctx) => <ImageFullScreen {...ctx[ModalEvent.ImageFullScreen]} />}
+                </ModalContext.Consumer>
+            </ModalOnEvent>
+
             <GoalPreview />
 
             <HotkeysModal />
diff --git a/src/hooks/useMarkdown.ts b/src/hooks/useMarkdown.tsx
similarity index 54%
rename from src/hooks/useMarkdown.ts
rename to src/hooks/useMarkdown.tsx
index 827048fa4..67ef89822 100644
--- a/src/hooks/useMarkdown.ts
+++ b/src/hooks/useMarkdown.tsx
@@ -2,9 +2,23 @@ import remarkGFM from 'remark-gfm';
 import remarkEmoji from 'remark-emoji';
 import { useRemark, useRemarkSync } from 'react-remark';
 
+import { ModalEvent, dispatchModalEvent } from '../utils/dispatchModal';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ssrRenderOptions: any = {
     remarkPlugins: [remarkEmoji],
+    rehypeReactOptions: {
+        components: {
+            img: (props: any) => (
+                // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+                <img
+                    {...props}
+                    onClick={dispatchModalEvent(ModalEvent.ImageFullScreen, { src: props.src, alt: props.alt })}
+                    style={{ cursor: 'pointer' }}
+                ></img>
+            ),
+        },
+    },
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const clientRenderOptions: any = {
diff --git a/src/utils/dispatchModal.ts b/src/utils/dispatchModal.ts
index 2afcbda2c..4b903d11a 100644
--- a/src/utils/dispatchModal.ts
+++ b/src/utils/dispatchModal.ts
@@ -12,6 +12,7 @@ export enum ModalEvent {
     FilterDeleteModal = 'FilterDeleteModal',
     FeedbackCreateModal = 'FeedbackCreateModal',
     WhatsNewModal = 'WhatsNewModal',
+    ImageFullScreen = 'ImageFullScreen',
 }
 
 export interface MapModalToComponentProps {
@@ -30,6 +31,10 @@ export interface MapModalToComponentProps {
     [ModalEvent.FilterDeleteModal]: unknown;
     [ModalEvent.FeedbackCreateModal]: unknown;
     [ModalEvent.WhatsNewModal]: unknown;
+    [ModalEvent.ImageFullScreen]: {
+        src: string;
+        alt?: string;
+    };
 }
 
 interface DispatchModalEvent {