mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-14 07:04:45 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Expand image button (#570)

Browse source 
added full-screen image modal when clicking on img's

Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Philip Molares 2020-09-19 20:12:57 +02:00 • committed by GitHub
parent 553cd3577d
commit cac9b7ea37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,31 @@
import React, { Fragment, useState } from 'react'
import { Modal } from 'react-bootstrap'
import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
export const Frame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
const [showFullscreenImage, setShowFullscreenImage] = useState(false)
return (
<Fragment>
<img alt={alt} {...props} className={'cursor-zoom-in'} onClick={() => setShowFullscreenImage(true)}/>
<Modal
animation={true}
centered={true}
dialogClassName={'text-dark'}
show={showFullscreenImage}
onHide={() => setShowFullscreenImage(false)}
closeButton={true}
size={'xl'}
>
<Modal.Header closeButton={true}>
<Modal.Title className={'h6'}>
<ForkAwesomeIcon icon={'picture-o'}/>
&nbsp;
<span>{alt ?? ''}</span>
</Modal.Title>
</Modal.Header>
<img alt={alt} {...props} className={'w-100 cursor-zoom-out'} onClick={() => setShowFullscreenImage(false)}/>
</Modal>
</Fragment>
)
}

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

@ -2,8 +2,9 @@ import React, { useEffect, useState } from 'react'
import { useSelector } from 'react-redux'
import { getProxiedUrl } from '../../../../api/media'
import { ApplicationState } from '../../../../redux'
import { Frame } from './frame'
export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, src, title, ...props }) => {
export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
const [imageUrl, setImageUrl] = useState('')
const imageProxyEnabled = useSelector((state: ApplicationState) => state.config.useImageProxy)
@ -18,11 +19,11 @@ export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
if (imageProxyEnabled) {
return (
<img alt={alt} src={imageUrl} title={title ?? ''} {...props}/>
<Frame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
)
}
return (
<img alt={alt} src={src ?? ''} title={title ?? ''} {...props}/>
<Frame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
)
}

1
src/components/markdown-renderer/replace-components/image/image-replacer.tsx
View file

@ -7,7 +7,6 @@ export class ImageReplacer extends ComponentReplacer {
public 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}