Collected minor changes from #837 (#962)

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

src/components/markdown-renderer/replace-components/ComponentReplacer.ts

@@ -10,10 +10,10 @@ import { ReactElement } from 'react'
 
 export type SubNodeTransform = (node: DomElement, subIndex: number) => ReactElement | void | null
 
-export type NativeRenderer = (node: DomElement, key: number) => ReactElement
+export type NativeRenderer = () => ReactElement
 
 export type MarkdownItPlugin = MarkdownIt.PluginSimple | MarkdownIt.PluginWithOptions | MarkdownIt.PluginWithParams
 
 export abstract class ComponentReplacer {
-  public abstract getReplacement (node: DomElement, subNodeTransform: SubNodeTransform): (ReactElement | null | undefined);
+  public abstract getReplacement (node: DomElement, subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): (ReactElement | null | undefined);
 }

src/components/markdown-renderer/replace-components/image/image-lightbox-modal.tsx

@@ -0,0 +1,39 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React from 'react'
+import { Modal } from 'react-bootstrap'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import "./lightbox.scss"
+
+export interface ImageLightboxModalProps {
+  show: boolean
+  onHide: () => void
+  alt?: string
+  src?: string
+  title?: string
+}
+
+export const ImageLightboxModal: React.FC<ImageLightboxModalProps> = ({ show, onHide, src, alt, title }) => {
+  return (
+    <Modal
+      animation={true}
+      centered={true}
+      dialogClassName={'text-dark lightbox'}
+      show={show && !!src}
+      onHide={onHide}
+      size={'xl'}>
+      <Modal.Header closeButton={true}>
+        <Modal.Title className={'h6'}>
+          <ForkAwesomeIcon icon={'picture-o'}/>
+          &nbsp;
+          <span>{alt ?? title ?? ''}</span>
+        </Modal.Title>
+      </Modal.Header>
+      <img alt={alt} src={src} title={title} className={'w-100 cursor-zoom-out'} onClick={onHide}/>
+    </Modal>
+  )
+}

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

@@ -1,18 +1,18 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import { DomElement } from 'domhandler'
 import React from 'react'
 import { ComponentReplacer } from '../ComponentReplacer'
-import { ImageFrame } from './image-frame'
+import { ProxyImageFrame } from './proxy-image-frame'
 
 export class ImageReplacer extends ComponentReplacer {
   public getReplacement (node: DomElement): React.ReactElement | undefined {
     if (node.name === 'img' && node.attribs) {
-      return <ImageFrame
+      return <ProxyImageFrame
         id={node.attribs.id}
         className={node.attribs.class}
         src={node.attribs.src}

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

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { Fragment, useState } from 'react'
+import { ImageLightboxModal } from './image-lightbox-modal'
+import "./lightbox.scss"
+
+export const LightboxImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
+  {
+    alt,
+    title,
+    src,
+    ...props
+  }) => {
+  const [showFullscreenImage, setShowFullscreenImage] = useState(false)
+
+  return (
+    <Fragment>
+      <img alt={alt} src={src} title={title} {...props} className={'cursor-zoom-in'}
+           onClick={() => setShowFullscreenImage(true)}/>
+      <ImageLightboxModal
+        show={showFullscreenImage}
+        onHide={() => setShowFullscreenImage(false)} title={title} src={src} alt={alt}/>
+    </Fragment>
+  )
+}

src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx

@@ -1,36 +0,0 @@
-/*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
-
-import React, { Fragment, useState } from 'react'
-import { Modal } from 'react-bootstrap'
-import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
-import "./lightbox.scss"
-
-export const LightboxedImageFrame: 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 lightbox'}
-        show={showFullscreenImage}
-        onHide={() => setShowFullscreenImage(false)}
-        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>
-  )
-}

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

@@ -1,16 +1,22 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React, { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { getProxiedUrl } from '../../../../api/media'
 import { ApplicationState } from '../../../../redux'
-import { LightboxedImageFrame } from './lightboxedImageFrame'
+import { LightboxImageFrame } from './lightbox-image-frame'
 
-export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ src, title, alt, ...props }) => {
+export const ProxyImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
+  {
+    src,
+    title,
+    alt,
+    ...props
+  }) => {
   const [imageUrl, setImageUrl] = useState('')
   const imageProxyEnabled = useSelector((state: ApplicationState) => state.config.useImageProxy)
 
@@ -25,11 +31,11 @@ export const ImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (
 
   if (imageProxyEnabled) {
     return (
-      <LightboxedImageFrame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
+      <LightboxImageFrame src={imageUrl} title={title ?? alt ?? ''} alt={alt} {...props}/>
     )
   }
 
   return (
-    <LightboxedImageFrame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
+    <LightboxImageFrame src={src ?? ''} title={title ?? alt ?? ''} alt={alt} {...props}/>
   )
 }

src/components/markdown-renderer/replace-components/sequence-diagram/deprecation-warning.tsx

@@ -1,8 +1,8 @@
 /*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
 
 import React from 'react'
 import { Alert } from 'react-bootstrap'
@@ -15,8 +15,10 @@ export const DeprecationWarning: React.FC = () => {
 
   return (
     <Alert data-cy={'yaml'} className={'mt-2'} variant={'warning'}>
-      <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
-      &nbsp;
+      <span className={'text-wrap'}>
+        <Trans i18nKey={'renderer.sequence.deprecationWarning'}/>
+      </span>
+      <br/>
       <TranslatedExternalLink i18nKey={'common.readForMoreInfo'} className={'text-primary'} href={links.faq}/>
     </Alert>
   )