Add image placeholder and upload indicating frame (#1666)

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
Co-authored-by: Philip Molares <philip.molares@udo.edu>

src/components/markdown-renderer/markdown-extension/image-placeholder/image-placeholder.tsx

@@ -0,0 +1,112 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import { Button } from 'react-bootstrap'
+import { Trans, useTranslation } from 'react-i18next'
+import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import './image-placeholder.scss'
+import { acceptedMimeTypes } from '../../../common/upload-image-mimetypes'
+import { useOnImageUpload } from './hooks/use-on-image-upload'
+import { usePlaceholderSizeStyle } from './hooks/use-placeholder-size-style'
+
+export interface PlaceholderImageFrameProps {
+  alt?: string
+  title?: string
+  width?: string | number
+  height?: string | number
+  lineIndex?: number
+  placeholderIndexInLine?: number
+}
+
+/**
+ * Shows a placeholder for an actual image with the possibility to upload images via button or drag'n'drop.
+ *
+ * @param alt The alt text of the image. Will be shown in the placeholder
+ * @param title The title text of the image. Will be shown in the placeholder
+ * @param width The width of the placeholder
+ * @param height The height of the placeholder
+ * @param lineIndex The index of the line in the markdown content where the placeholder is defined
+ * @param placeholderIndexInLine The index of the placeholder in the markdown line
+ */
+export const ImagePlaceholder: React.FC<PlaceholderImageFrameProps> = ({
+  alt,
+  title,
+  width,
+  height,
+  lineIndex,
+  placeholderIndexInLine
+}) => {
+  useTranslation()
+  const fileInputReference = useRef<HTMLInputElement>(null)
+  const onImageUpload = useOnImageUpload(lineIndex, placeholderIndexInLine)
+
+  const [showDragStatus, setShowDragStatus] = useState(false)
+
+  const onDropHandler = useCallback(
+    (event: React.DragEvent<HTMLSpanElement>) => {
+      event.preventDefault()
+      if (event?.dataTransfer?.files?.length > 0) {
+        onImageUpload(event.dataTransfer.files[0])
+      }
+    },
+    [onImageUpload]
+  )
+
+  const onDragOverHandler = useCallback((event: React.DragEvent<HTMLSpanElement>) => {
+    event.preventDefault()
+    setShowDragStatus(true)
+  }, [])
+
+  const onDragLeave = useCallback(() => {
+    setShowDragStatus(false)
+  }, [])
+
+  const onChangeHandler = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const fileList = event.target.files
+      if (!fileList || fileList.length < 1) {
+        return
+      }
+      onImageUpload(fileList[0])
+    },
+    [onImageUpload]
+  )
+
+  const uploadButtonClicked = useCallback(() => fileInputReference.current?.click(), [])
+  const containerStyle = usePlaceholderSizeStyle(width, height)
+
+  const containerDragClasses = useMemo(() => (showDragStatus ? 'bg-primary text-white' : 'text-dark'), [showDragStatus])
+
+  return (
+    <span
+      className={`image-drop d-inline-flex flex-column align-items-center ${containerDragClasses} p-1`}
+      style={containerStyle}
+      onDrop={onDropHandler}
+      onDragOver={onDragOverHandler}
+      onDragLeave={onDragLeave}>
+      <input
+        type='file'
+        className='d-none'
+        accept={acceptedMimeTypes}
+        onChange={onChangeHandler}
+        ref={fileInputReference}
+      />
+      <div className={'align-items-center flex-column justify-content-center flex-fill d-flex'}>
+        <div className={'d-flex flex-column'}>
+          <span className='my-2'>
+            <Trans i18nKey={'editor.embeddings.placeholderImage.placeholderText'} />
+          </span>
+          <span className={'altText'}>{alt ?? title ?? ''}</span>
+        </div>
+      </div>
+      <Button size={'sm'} variant={'primary'} onClick={uploadButtonClicked}>
+        <ForkAwesomeIcon icon={'upload'} fixedWidth={true} className='my-2' />
+        <Trans i18nKey={'editor.embeddings.placeholderImage.upload'} className='my-2' />
+      </Button>
+    </span>
+  )
+}