github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-25 11:16:31 -05:00
Code Issues Projects Releases Packages Wiki Activity

added image-replacer (#273)

Browse source 
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>
This commit is contained in:
Philip Molares 2020-06-25 22:25:22 +02:00 committed by GitHub
parent 0a48fd0aa5
commit 1db1bcf248
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/editor/markdown-renderer/markdown-renderer.tsx
View file

@ -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(),

7
src/components/editor/markdown-renderer/replace-components/image/image-frame.tsx Normal file
View file

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

19
src/components/editor/markdown-renderer/replace-components/image/image-replacer.tsx Normal file
View file

@ -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}
/>
}
}
}