Wrap markdown rendering in iframe (#837)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx

@@ -8,6 +8,7 @@ import React from 'react'
 import { Modal } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
 import "./lightbox.scss"
+import { ProxyImageFrame } from './proxy-image-frame'
 
 export interface ImageLightboxModalProps {
   show: boolean
@@ -33,7 +34,7 @@ export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, on
           <span>{alt ?? title ?? ''}</span>
         </Modal.Title>
       </Modal.Header>
-      <img alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide}/>
+      <ProxyImageFrame alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide}/>
     </Modal>
   )
 }

src/components/markdown-renderer/replace-components/image/image-replacer.tsx

@@ -9,17 +9,27 @@ import React from 'react'
 import { ComponentReplacer } from '../ComponentReplacer'
 import { ProxyImageFrame } from './proxy-image-frame'
 
+export type ImageClickHandler = (event: React.MouseEvent<HTMLImageElement, MouseEvent>) => void;
+
 export class ImageReplacer extends ComponentReplacer {
+  private readonly clickHandler?: ImageClickHandler
+
+  constructor (clickHandler?: ImageClickHandler) {
+    super()
+    this.clickHandler = clickHandler
+  }
+
   public getReplacement (node: DomElement): React.ReactElement | undefined {
     if (node.name === 'img' && node.attribs) {
       return <ProxyImageFrame
         id={node.attribs.id}
-        className={node.attribs.class}
+        className={`${node.attribs.class} cursor-zoom-in`}
         src={node.attribs.src}
         alt={node.attribs.alt}
         title={node.attribs.title}
         width={node.attribs.width}
         height={node.attribs.height}
+        onClick={this.clickHandler}
       />
     }
   }

src/components/markdown-renderer/replace-components/image/lightbox-image-frame.tsx

@@ -1,29 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import React, { Fragment, useState } from 'react'
-import { ImageLightboxModal } from './image-lightbox-modal'
-import "./lightbox.scss"
-
-export const LightboxImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
-  {
-    alt,
-    title,
-    src,
-    ...props
-  }) => {
-  const [showFullscreenImage, setShowFullscreenImage] = useState(false)
-
-  return (
-    <Fragment>
-      <img alt={alt} src={src} title={title} {...props} className={'cursor-zoom-in'}
-           onClick={() => setShowFullscreenImage(true)}/>
-      <ImageLightboxModal
-        show={showFullscreenImage}
-        onHide={() => setShowFullscreenImage(false)} title={title} src={src} alt={alt}/>
-    </Fragment>
-  )
-}

src/components/markdown-renderer/replace-components/image/proxy-image-frame.tsx

@@ -8,7 +8,6 @@ import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { getProxiedUrl } from '../../../../api/media'
 import { ApplicationState } from '../../../../redux'
-import { LightboxImageFrame } from './lightbox-image-frame'
 
 export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
   {
@@ -29,13 +28,6 @@ export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>
       .catch(err => console.error(err))
   }, [imageProxyEnabled, src])
 
-  if (imageProxyEnabled) {
-    return (
-      <LightboxImageFrame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
-    )
-  }
-
-  return (
-    <LightboxImageFrame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
-  )
+  return <img src={imageProxyEnabled ? imageUrl : (src ?? '')} title={title ?? alt ?? ''} alt={alt} {...props}/>
 }
+