Fullscreen attachments preview

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;

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 />

src/hooks/useMarkdown.ts → src/hooks/useMarkdown.tsx

@@ -2,9 +2,23 @@
 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 = {

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 {