Added click-to-load text for pdf embeddings and general option for texts on the embedding preview (#277)

* Added possibility to add a text below the icon on the preview

* Changes naming of i18nKey argument

* Rebase fixes

* Show preview image only if defined

public/locales/en.json

@@ -254,6 +254,9 @@
                 "question": "Do you really want to delete this note?",
                 "warning": "All users will lose their connection."
             }
+        },
+        "embeddings": {
+          "clickToLoad": "Click to load"
         }
     },
     "common":  {

src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.scss

@@ -17,7 +17,7 @@
     text-shadow: #000000 0 0 5px;
   }
 
-  &:hover > i {
+  &:hover > .one-click-embedding-icon {
     opacity: 0.8;
     text-shadow: #000000 0 0 10px;
   }

src/components/editor/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx

@@ -1,21 +1,23 @@
 import React, { useEffect, useState } from 'react'
+import { Trans } from 'react-i18next'
 import { IconName } from '../../../../common/fork-awesome/fork-awesome-icon'
 import { ShowIf } from '../../../../common/show-if/show-if'
 import './one-click-embedding.scss'
 
 interface OneClickFrameProps {
   onImageFetch?: () => Promise<string>
-  loadingImageUrl: string
+  loadingImageUrl?: string
   hoverIcon?: IconName
+  hoverTextI18nKey?: string
   tooltip?: string
   containerClassName?: string
   previewContainerClassName?: string
   onActivate?: () => void
 }
 
-export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, onActivate }) => {
+export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContainerClassName, containerClassName, onImageFetch, loadingImageUrl, children, tooltip, hoverIcon, hoverTextI18nKey, onActivate }) => {
   const [showFrame, setShowFrame] = useState(false)
-  const [previewImageLink, setPreviewImageLink] = useState<string>(loadingImageUrl)
+  const [previewImageUrl, setPreviewImageUrl] = useState(loadingImageUrl)
 
   const showChildren = () => {
     setShowFrame(true)
@@ -29,7 +31,7 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
       return
     }
     onImageFetch().then((imageLink) => {
-      setPreviewImageLink(imageLink)
+      setPreviewImageUrl(imageLink)
     }).catch((message) => {
       console.error(message)
     })
@@ -42,9 +44,17 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
       </ShowIf>
       <ShowIf condition={!showFrame}>
         <span className={`one-click-embedding ${previewContainerClassName || ''}`} onClick={showChildren}>
-          <img className={'one-click-embedding-preview'} src={previewImageLink} alt={tooltip || ''} title={tooltip || ''}/>
+          <ShowIf condition={!!previewImageUrl}>
+            <img className={'one-click-embedding-preview'} src={previewImageUrl} alt={tooltip || ''} title={tooltip || ''}/>
+          </ShowIf>
           <ShowIf condition={!!hoverIcon}>
-            <i className={`one-click-embedding-icon fa fa-${hoverIcon as string} fa-5x`}/>
+            <span className='one-click-embedding-icon text-center'>
+              <i className={`fa fa-${hoverIcon as string} fa-5x mb-2`} />
+              <ShowIf condition={!!hoverTextI18nKey}>
+                <br />
+                <Trans i18nKey={hoverTextI18nKey} />
+              </ShowIf>
+            </span>
           </ShowIf>
         </span>
       </ShowIf>

src/components/editor/markdown-renderer/replace-components/pdf/pdf-frame.tsx

@@ -12,8 +12,10 @@ export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
 
   return (
     <OneClickEmbedding containerClassName={`embed-responsive embed-responsive-${activated ? '4by3' : '16by9'}`}
-      previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
-      loadingImageUrl={''} onActivate={() => setActivated(true)}>
+      previewContainerClassName={'embed-responsive-item bg-danger'}
+      hoverIcon={'file-pdf-o'}
+      hoverTextI18nKey={'editor.embeddings.clickToLoad'}
+      onActivate={() => setActivated(true)}>
       <object type={'application/pdf'} data={url} className={'pdf-frame'}>
         <ExternalLink text={url} href={url}/>
       </object>