diff --git a/CHANGELOG.md b/CHANGELOG.md index 3403e5ebe0..74b89801f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -39,6 +39,7 @@ - Added shortcodes for [fork-awesome icons](https://forkaweso.me/Fork-Awesome/icons/) (e.g. `:fa-picture-o:`) - The code button now adds code fences even if the user selected nothing beforehand - Code blocks with 'csv' as language render as tables. +- All images can be clicked to show them in full screen. - Code blocks with 'vega-lite' as language are rendered as [vega-lite diagrams](https://vega.github.io/vega-lite/examples/). ### Changed diff --git a/public/highres.jpg b/public/highres.jpg new file mode 100644 index 0000000000..5973a530c1 Binary files /dev/null and b/public/highres.jpg differ diff --git a/src/components/common/modals/common-modal.tsx b/src/components/common/modals/common-modal.tsx index e97388a3b7..5ccbcd0bab 100644 --- a/src/components/common/modals/common-modal.tsx +++ b/src/components/common/modals/common-modal.tsx @@ -8,14 +8,15 @@ import { ShowIf } from '../show-if/show-if' export interface CommonModalProps { show: boolean onHide: () => void - titleI18nKey: string + titleI18nKey?: string + title?: string closeButton?: boolean icon?: IconName size?: 'lg' | 'sm' | 'xl' additionalClasses?: string } -export const CommonModal: React.FC = ({ show, onHide, titleI18nKey, closeButton, icon, additionalClasses, size, children }) => { +export const CommonModal: React.FC = ({ show, onHide, titleI18nKey, title, closeButton, icon, additionalClasses, size, children }) => { useTranslation() return ( @@ -25,7 +26,10 @@ export const CommonModal: React.FC = ({ show, onHide, titleI18   - + { titleI18nKey + ? + : {title} + } { children } diff --git a/src/components/editor/editorTestContent.ts b/src/components/editor/editorTestContent.ts index d97273df7b..0e6fe587ed 100644 --- a/src/components/editor/editorTestContent.ts +++ b/src/components/editor/editorTestContent.ts @@ -103,6 +103,10 @@ digraph D { } \`\`\` +## High Res Image + +![Wheat Field with Cypresses](/highres.jpg) + ## Sequence Diagram (deprecated) \`\`\`sequence diff --git a/src/components/markdown-renderer/replace-components/image/frame.tsx b/src/components/markdown-renderer/replace-components/image/frame.tsx new file mode 100644 index 0000000000..dd412f57ec --- /dev/null +++ b/src/components/markdown-renderer/replace-components/image/frame.tsx @@ -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> = ({ alt, ...props }) => { + const [showFullscreenImage, setShowFullscreenImage] = useState(false) + + return ( + + {alt} setShowFullscreenImage(true)}/> + setShowFullscreenImage(false)} + closeButton={true} + size={'xl'} + > + + + +   + {alt ?? ''} + + + {alt} setShowFullscreenImage(false)}/> + + + ) +} diff --git a/src/components/markdown-renderer/replace-components/image/image-frame.tsx b/src/components/markdown-renderer/replace-components/image/image-frame.tsx index d34bf26046..78af3e9a9a 100644 --- a/src/components/markdown-renderer/replace-components/image/image-frame.tsx +++ b/src/components/markdown-renderer/replace-components/image/image-frame.tsx @@ -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> = ({ alt, src, title, ...props }) => { +export const ImageFrame: React.FC> = ({ 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> = ( if (imageProxyEnabled) { return ( - {alt} + ) } return ( - {alt} + ) } diff --git a/src/components/markdown-renderer/replace-components/image/image-replacer.tsx b/src/components/markdown-renderer/replace-components/image/image-replacer.tsx index 27e7448943..e1506ad865 100644 --- a/src/components/markdown-renderer/replace-components/image/image-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/image/image-replacer.tsx @@ -7,7 +7,6 @@ export class ImageReplacer extends ComponentReplacer { public getReplacement (node: DomElement): React.ReactElement | undefined { if (node.name === 'img' && node.attribs) { return