expandable image

src/cloud/components/MarkdownView/index.tsx

@@ -46,6 +46,7 @@ import throttle from 'lodash.throttle'
 import CodeFence from '../../../design/components/atoms/markdown/CodeFence'
 import { agentType, sendPostMessage } from '../../../mobile/lib/nativeMobile'
 import { TableOfContents } from './TableOfContents'
+import ExpandableImage from '../../../design/components/molecules/Image/ExpandableImage'
 
 const remarkAdmonitionOptions = {
   tag: ':::',
@@ -156,6 +157,9 @@ const MarkdownView = ({
       createElement: React.createElement,
       Fragment: React.Fragment,
       components: {
+        img: ({ src }: any) => {
+          return <ExpandableImage src={src} />
+        },
         a: ({ href, children }: any) => {
           if (agentType === 'ios-native' || agentType === 'android-native') {
             return (

src/design/components/molecules/Image/ExpandableImage.tsx

@@ -0,0 +1,101 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import styled from '../../../lib/styled'
+import Image from '../../atoms/Image'
+import { mdiArrowExpandAll } from '@mdi/js'
+import Icon from '../../atoms/Icon'
+import { flexCenter } from '../../../lib/styled/styleFunctions'
+import {
+  isSingleKeyEventOutsideOfInput,
+  preventKeyboardEventPropagation,
+  useGlobalKeyDownHandler,
+} from '../../../../cloud/lib/keyboard'
+import { useModal } from '../../../lib/stores/modal'
+import ImagePreview from './ImagePreview'
+
+interface ExpandableImageProps {
+  src: string
+}
+
+const ExpandableImage = ({ src }: ExpandableImageProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false)
+  const [showingEnlargedImage, setShowingEnlargedImage] = useState<boolean>(
+    false
+  )
+  const { closeLastModal, openModal } = useModal()
+  const onImageExpand = useCallback(() => {
+    closeLastModal()
+
+    openModal(<ImagePreview src={src} />, {
+      showCloseIcon: true,
+      width: 'full',
+    })
+    setShowingEnlargedImage(true)
+  }, [closeLastModal, openModal, src])
+
+  const keydownHandler = useMemo(() => {
+    return (event: KeyboardEvent) => {
+      if (
+        isSingleKeyEventOutsideOfInput(event, 'escape') &&
+        showingEnlargedImage
+      ) {
+        preventKeyboardEventPropagation(event)
+        closeLastModal()
+      }
+    }
+  }, [closeLastModal, showingEnlargedImage])
+  useGlobalKeyDownHandler(keydownHandler)
+
+  return (
+    <ImageContainer
+      onClick={() => onImageExpand()}
+      onMouseOver={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <Image src={src} />
+
+      {isHovered && (
+        <>
+          <ImageActionButton
+            onClick={() => {
+              onImageExpand()
+            }}
+          >
+            <Icon path={mdiArrowExpandAll} />
+          </ImageActionButton>
+        </>
+      )}
+    </ImageContainer>
+  )
+}
+
+const ImageContainer = styled.span`
+  position: relative;
+  cursor: pointer;
+  display: block;
+`
+
+const ImageActionButton = styled.button`
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 30px;
+  width: 30px;
+  box-sizing: border-box;
+  font-size: 18px;
+  outline: none;
+  background-color: rgba(0, 0, 0, 0.3);
+  ${flexCenter};
+  border: none;
+  cursor: pointer;
+  transition: color 200ms ease-in-out;
+  color: ${({ theme }) => theme.colors.text.primary};
+  &:hover {
+    color: ${({ theme }) => theme.colors.text.link};
+  }
+  &:active,
+  &.active {
+    color: ${({ theme }) => theme.colors.text.subtle};
+  }
+`
+
+export default ExpandableImage

src/design/components/molecules/Image/ImagePreview.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import styled from '../../../lib/styled'
+import Image from '../../atoms/Image'
+
+interface ImagePreviewProps {
+  src: string
+}
+
+const ImagePreview = ({ src }: ImagePreviewProps) => {
+  return (
+    <Container>
+      <Image className={'image__preview_width'} src={src} />
+    </Container>
+  )
+}
+
+const Container = styled.div`
+  padding: 1em 10%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .image__preview_width {
+    max-width: 100%;
+  }
+`
+
+export default ImagePreview

src/design/components/organisms/Modal/index.tsx

@@ -293,6 +293,10 @@ const Container = styled.div`
     &.modal__window__width--large {
       width: 1100px;
     }
+
+    &.modal__window__width--full {
+      width: 100%;
+    }
   }
 
   .modal__window__close {

src/design/lib/stores/modal/types.ts

@@ -2,7 +2,7 @@ export interface ModalElement {
   title?: React.ReactNode
   content: React.ReactNode
   showCloseIcon?: boolean
-  width: 'large' | 'default' | 'small' | number
+  width: 'large' | 'default' | 'small' | 'full' | number
   height?: number
   maxHeight?: number
   position?: {
@@ -21,7 +21,7 @@ export type ContextModalAlignment = 'bottom-left' | 'bottom-right' | 'top-left'
 export type ModalOpeningOptions = {
   showCloseIcon?: boolean
   keepAll?: boolean
-  width?: 'large' | 'default' | 'small' | number
+  width?: 'large' | 'default' | 'small' | 'full' | number
   title?: string
   onClose?: () => void
 }