PDF embedding (#218)

* Add pdf embedding

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>

src/components/editor/editor.tsx

@@ -12,7 +12,7 @@ import { TaskBar } from './task-bar/task-bar'
 
 const Editor: React.FC = () => {
   const editorMode: EditorMode = useSelector((state: ApplicationState) => state.editorConfig.editorMode)
-  const [markdownContent, setMarkdownContent] = useState('# Embedding demo\n\n## Slideshare\n{%slideshare mazlan1/internet-of-things-the-tip-of-an-iceberg %}\n\n## Gist\nhttps://gist.github.com/schacon/1\n\n## YouTube\nhttps://www.youtube.com/watch?v=KgMpKsp23yY\n\n## Vimeo\nhttps://vimeo.com/23237102')
+  const [markdownContent, setMarkdownContent] = useState('# Embedding demo\n\n## Slideshare\n{%slideshare mazlan1/internet-of-things-the-tip-of-an-iceberg %}\n\n## Gist\nhttps://gist.github.com/schacon/1\n\n## YouTube\nhttps://www.youtube.com/watch?v=KgMpKsp23yY\n\n## Vimeo\nhttps://vimeo.com/23237102\n\n## PDF\n{%pdf https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf %}')
   const isWide = useMedia({ minWidth: 576 })
   const [firstDraw, setFirstDraw] = useState(true)
 

src/components/editor/markdown-preview/markdown-preview.tsx

@@ -12,9 +12,11 @@ import { replaceLegacySlideshareShortCode } from './regex-plugins/replace-legacy
 import { replaceLegacySpeakerdeckShortCode } from './regex-plugins/replace-legacy-speakerdeck-short-code'
 import { replaceLegacyVimeoShortCode } from './regex-plugins/replace-legacy-vimeo-short-code'
 import { replaceLegacyYoutubeShortCode } from './regex-plugins/replace-legacy-youtube-short-code'
+import { replacePdfShortCode } from './regex-plugins/replace-pdf-short-code'
 import { replaceVimeoLink } from './regex-plugins/replace-vimeo-link'
 import { replaceYouTubeLink } from './regex-plugins/replace-youtube-link'
 import { getGistReplacement } from './replace-components/gist/gist-frame'
+import { getPDFReplacement } from './replace-components/pdf/pdf-frame'
 import { getVimeoReplacement } from './replace-components/vimeo/vimeo-frame'
 import { getYouTubeReplacement } from './replace-components/youtube/youtube-frame'
 
@@ -38,6 +40,7 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
     md.use(markdownItRegex, replaceLegacyGistShortCode)
     md.use(markdownItRegex, replaceLegacySlideshareShortCode)
     md.use(markdownItRegex, replaceLegacySpeakerdeckShortCode)
+    md.use(markdownItRegex, replacePdfShortCode)
     md.use(markdownItRegex, replaceYouTubeLink)
     md.use(markdownItRegex, replaceVimeoLink)
     md.use(markdownItRegex, replaceGistLink)
@@ -67,6 +70,11 @@ const MarkdownPreview: React.FC<MarkdownPreviewProps> = ({ content }) => {
         return resultGist
       }
 
+      const resultPdf = getPDFReplacement(node, gistIdCounterMap)
+      if (resultPdf) {
+        return resultPdf
+      }
+
       return convertNodeToElement(node, index, transform)
     }
     const ret: ReactElement[] = ReactHtmlParser(html, { transform: transform })

src/components/editor/markdown-preview/regex-plugins/replace-pdf-short-code.ts

@@ -0,0 +1,11 @@
+import { RegexOptions } from '../../../../external-types/markdown-it-regex/interface'
+
+export const replacePdfShortCode: RegexOptions = {
+  name: 'pdf-short-code',
+  regex: /^{%pdf (.*) ?%}$/,
+  replace: (match) => {
+    // ESLint wants to collapse this tag, but then the tag won't be valid html anymore.
+    // noinspection CheckTagEmptyBody
+    return `<codimd-pdf id="${match}"></codimd-pdf>`
+  }
+}

src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.scss

@@ -0,0 +1,3 @@
+.pdf-frame {
+  width: 100%;
+}

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

@@ -0,0 +1,29 @@
+import { DomElement } from 'domhandler'
+import React, { ReactElement } from 'react'
+import { ExternalLink } from '../../../../common/links/external-link'
+import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
+import { getIdFromCodiMdTag, VideoFrameProps } from '../video-util'
+import './pdf-frame.scss'
+
+const getElementReplacement = (node: DomElement, counterMap: Map<string, number>): (ReactElement | undefined) => {
+  const pdfUrl = getIdFromCodiMdTag(node, 'pdf')
+  if (pdfUrl) {
+    const count = (counterMap.get(pdfUrl) || 0) + 1
+    counterMap.set(pdfUrl, count)
+    return <PdfFrame key={`pdf_${pdfUrl}_${count}`} id={pdfUrl}/>
+  }
+}
+
+export const PdfFrame: React.FC<VideoFrameProps> = ({ id }) => {
+  return (
+    <OneClickEmbedding containerClassName={'embed-responsive embed-responsive-4by3'}
+      previewContainerClassName={'embed-responsive-item bg-danger'} hoverIcon={'file-pdf-o'}
+      loadingImageUrl={''}>
+      <object type={'application/pdf'} data={id} className={'pdf-frame'}>
+        <ExternalLink text={id} href={id}/>
+      </object>
+    </OneClickEmbedding>
+  )
+}
+
+export { getElementReplacement as getPDFReplacement }