Restructure repository (#426)

organized repository 

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Philip Molares <git@molar.es>

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

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { getProxiedUrl } from '../../../../api/media'
+import { ApplicationState } from '../../../../redux'
+
+export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, src, ...props }) => {
+  const [imageUrl, setImageUrl] = useState('')
+  const imageProxyEnabled = useSelector((state: ApplicationState) => state.config.useImageProxy)
+
+  useEffect(() => {
+    if (!imageProxyEnabled || !src) {
+      return
+    }
+    getProxiedUrl(src)
+      .then(proxyResponse => setImageUrl(proxyResponse.src))
+      .catch(err => console.error(err))
+  }, [imageProxyEnabled, src])
+
+  if (imageProxyEnabled) {
+    return (
+      <img alt={alt} src={imageUrl} {...props}/>
+    )
+  }
+
+  return (
+    <img alt={alt} src={src ?? ''} {...props}/>
+  )
+}

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

@@ -0,0 +1,20 @@
+import { DomElement } from 'domhandler'
+import React from 'react'
+import { ComponentReplacer } from '../ComponentReplacer'
+import { ImageFrame } from './image-frame'
+
+export class ImageReplacer implements ComponentReplacer {
+  getReplacement (node: DomElement, index: number): React.ReactElement | undefined {
+    if (node.name === 'img' && node.attribs) {
+      return <ImageFrame
+        key={index}
+        id={node.attribs.id}
+        className={node.attribs.class}
+        src={node.attribs.src}
+        alt={node.attribs.alt}
+        width={node.attribs.width}
+        height={node.attribs.height}
+      />
+    }
+  }
+}

src/components/markdown-renderer/replace-components/image/types.ts

@@ -0,0 +1,3 @@
+export interface ImageProxyResponse {
+  src: string
+}