feat(extensions): Introduce app extensions

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

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

@@ -0,0 +1,38 @@
+/*
+ * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useEffect, useState } from 'react'
+import { getProxiedUrl } from '../../../../api/media'
+import { useApplicationState } from '../../../../hooks/common/use-application-state'
+import { Logger } from '../../../../utils/logger'
+
+const log = new Logger('ProxyImageFrame')
+
+/**
+ * Renders an image using the image proxy.
+ *
+ * @param src The image source
+ * @param title The title of the image
+ * @param alt The alt text of the image
+ * @param props Additional props directly given to the image
+ */
+export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
+  const [imageUrl, setImageUrl] = useState('')
+  const imageProxyEnabled = useApplicationState((state) => state.config.useImageProxy)
+
+  useEffect(() => {
+    if (!imageProxyEnabled || !src) {
+      return
+    }
+    getProxiedUrl(src)
+      .then((proxyResponse) => setImageUrl(proxyResponse.url))
+      .catch((err) => log.error(err))
+  }, [imageProxyEnabled, src])
+
+  // The next image processor works with a whitelist of origins. Therefore, we can't use it for general images.
+  // eslint-disable-next-line @next/next/no-img-element
+  return <img src={imageProxyEnabled ? imageUrl : src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props} />
+}