Add support for image-proxies by (optional) piping of image urls through the backend (#315)

* Added config property for image proxies

* Added API call and image url replacing

* Added comment explaining why a local function is needed inside the useEffect

* Added CHANGELOG entry

* Changed wording of the CHANGELOG sentence

* Changed CHANGELOG entry

Co-Authored-By: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Removed fallback to original src

* Removed unnecessary API call for empty src URLs

* Simplify image url fetching

* Refactored imageframe to avoid rerendering of images

Co-Authored-By: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

* Renamed config property to useImageProxy

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>

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

@@ -1,7 +1,28 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { getProxiedUrl } from '../../../../../api/imageProxy'
+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.backendConfig.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}/>
+    )
+  }
 
-export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({alt, ...props}) => {
   return (
-    <img alt={alt} {...props}/>
+    <img alt={alt} src={src ?? ''} {...props}/>
   )
 }

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

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