added image-replacer (#273)

added image-replacer

this component replaces all `<img>`'s in the markdown-it output with an ImageFrame component. This enables us to implement image proxies and other per image customization in the future.

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

src/components/editor/markdown-renderer/markdown-renderer.tsx

@@ -38,6 +38,7 @@ import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { ComponentReplacer, SubNodeConverter } from './replace-components/ComponentReplacer'
 import { GistReplacer } from './replace-components/gist/gist-replacer'
 import { HighlightedCodeReplacer } from './replace-components/highlighted-fence/highlighted-fence-replacer'
+import { ImageReplacer } from './replace-components/image/image-replacer'
 import { MathjaxReplacer } from './replace-components/mathjax/mathjax-replacer'
 import { PdfReplacer } from './replace-components/pdf/pdf-replacer'
 import { QuoteOptionsReplacer } from './replace-components/quote-options/quote-options-replacer'
@@ -123,6 +124,7 @@ const MarkdownRenderer: React.FC<MarkdownPreviewProps> = ({ content }) => {
       new YoutubeReplacer(),
       new VimeoReplacer(),
       new PdfReplacer(),
+      new ImageReplacer(),
       new TocReplacer(),
       new HighlightedCodeReplacer(),
       new QuoteOptionsReplacer(),

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

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({alt, ...props}) => {
+  return (
+    <img alt={alt} {...props}/>
+  )
+}

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

@@ -0,0 +1,19 @@
+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): React.ReactElement | undefined {
+    if (node.name === 'img' && node.attribs) {
+      return <ImageFrame
+        id={node.attribs.id}
+        className={node.attribs.class}
+        src={node.attribs.src}
+        alt={node.attribs.alt}
+        width={node.attribs.width}
+        height={node.attribs.height}
+      />
+    }
+  }
+}