Remove PDF embedding (#1000)

* Remove PDF embedding
* Add pdf deprecation to CHANGELOG.md

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

CHANGELOG.md

@@ -9,23 +9,30 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 ## [Unreleased]
 
 ### Deprecations
-- This version of HedgeDoc is the last version that supports the following short-code syntaxes for embedding content. Embedding works now instead by putting the plain webpage link to the content into a single line.
+- This version of HedgeDoc is the last version, that supports the following short code syntax for embedding content. The
+  new way to embed this external content is to put the plain link into a single line of the document.
     - `{%youtube someid %}` -> https://youtube.com/watch?v=someid
     - `{%vimeo 123456789 %}` -> https://vimeo.com/123456789
     - `{%gist user/12345 %}` -> https://gist.github.com/user/12345
     - `{%slideshare user/my-awesome-presentation %}` -> Embedding removed
     - `{%speakerdeck foobar %}` -> Embedding removed
+    - `{%pdf https://example.org/example-pdf.pdf %}` -> Embedding removed
 - The use of `sequence` as code block language ([Why?](https://hedgedoc.org/faq/))
 - Comma-separated definition of tags in the yaml-metadata
 
 ### Removed
 
 - SlideShare embedding
-    - If a legacy embedding code is detected it will show the link to the presentation instead of the embedded presentation
+    - If a legacy embedding code is detected, then it will show the link to the presentation instead of the embedded
+      presentation.
 - Speakerdeck embedding
-    - If a legacy embedding code is detected it will show the link to the presentation instead of the embedded presentation
-- We are now using `highlight.js` instead of `highlight.js` + `prism.js` for code highlighting. Check out the [highlight.js demo page](https://highlightjs.org/static/demo/) to see which languages are supported.
- The highlighting for following languages isn't supported by `highlight.js`:
+    - If a legacy embedding code is detected, then it will show the link to the presentation instead of the embedded
+      presentation.
+- PDF embedding (See [#959](https://github.com/hedgedoc/react-client/issues/959))
+    - If a legacy embedding code is detected, then it will show the link to the pdf instead.
+- We are now using `highlight.js` instead of `highlight.js` + `prism.js` for code highlighting. Check out
+  the [highlight.js demo page](https://highlightjs.org/static/demo/) to see which languages are supported. The
+  highlighting for following languages isn't supported by `highlight.js`:
     - tiddlywiki
     - mediawiki
     - jsx
@@ -69,7 +76,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - The sign-in/sign-up functions are now on a separate page
 - The email sign-in/registration does not require an email address anymore but uses a username
 - The history shows both the entries saved in LocalStorage and the entries saved on the server together
-- The gist and pdf embeddings now use a one-click aproach similar to vimeo and youtube
+- The gist embedding uses a click-shield, like vimeo and youtube
 - Use [Twemoji](https://twemoji.twitter.com/) as icon font
 - The `[name=...]`, `[time=...]` and `[color=...]` tags may now be used anywhere in the document and not just inside of blockquotes and lists.
 - The <i class="fa fa-picture-o"/> (add image) and <i class="fa fa-link"/> (add link) toolbar buttons put selected links directly in the `()` instead of the `[]` part of the generated markdown.

src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts

@@ -19,7 +19,6 @@ import { LinemarkerReplacer } from '../replace-components/linemarker/linemarker-
 import { LinkReplacer } from '../replace-components/link-replacer/link-replacer'
 import { MarkmapReplacer } from '../replace-components/markmap/markmap-replacer'
 import { MermaidReplacer } from '../replace-components/mermaid/mermaid-replacer'
-import { PdfReplacer } from '../replace-components/pdf/pdf-replacer'
 import { PossibleWiderReplacer } from '../replace-components/possible-wider/possible-wider-replacer'
 import { QuoteOptionsReplacer } from '../replace-components/quote-options/quote-options-replacer'
 import { SequenceDiagramReplacer } from '../replace-components/sequence-diagram/sequence-diagram-replacer'
@@ -39,7 +38,6 @@ export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMark
     new VimeoReplacer(),
     new AsciinemaReplacer(),
     new AbcReplacer(),
-    new PdfReplacer(),
     new ImageReplacer(onImageClick),
     new SequenceDiagramReplacer(),
     new CsvReplacer(),

src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx

@@ -13,13 +13,13 @@ import { headlineAnchors } from '../markdown-it-plugins/headline-anchors'
 import { highlightedCode } from '../markdown-it-plugins/highlighted-code'
 import { plantumlWithError } from '../markdown-it-plugins/plantuml'
 import { quoteExtra } from '../markdown-it-plugins/quote-extra'
+import { legacyPdfShortCode } from '../regex-plugins/replace-legacy-pdf-short-code'
 import { legacySlideshareShortCode } from '../regex-plugins/replace-legacy-slideshare-short-code'
 import { legacySpeakerdeckShortCode } from '../regex-plugins/replace-legacy-speakerdeck-short-code'
 import { AsciinemaReplacer } from '../replace-components/asciinema/asciinema-replacer'
 import { GistReplacer } from '../replace-components/gist/gist-replacer'
 import { KatexReplacer } from '../replace-components/katex/katex-replacer'
 import { LineMarkers, lineNumberMarker } from '../replace-components/linemarker/line-number-marker'
-import { PdfReplacer } from '../replace-components/pdf/pdf-replacer'
 import { VimeoReplacer } from '../replace-components/vimeo/vimeo-replacer'
 import { YoutubeReplacer } from '../replace-components/youtube/youtube-replacer'
 import { BasicMarkdownItConfigurator } from './BasicMarkdownItConfigurator'
@@ -54,9 +54,9 @@ export class FullMarkdownItConfigurator extends BasicMarkdownItConfigurator {
       YoutubeReplacer.markdownItPlugin,
       VimeoReplacer.markdownItPlugin,
       GistReplacer.markdownItPlugin,
+      legacyPdfShortCode,
       legacySlideshareShortCode,
       legacySpeakerdeckShortCode,
-      PdfReplacer.markdownItPlugin,
       AsciinemaReplacer.markdownItPlugin,
       highlightedCode,
       quoteExtra,

src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import markdownItRegex from 'markdown-it-regex'
+import MarkdownIt from 'markdown-it/lib'
+
+const finalRegex = /^{%pdf (.*) ?%}$/
+
+export const legacyPdfShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
+  markdownItRegex(markdownIt, {
+    name: 'legacy-pdf-short-code',
+    regex: finalRegex,
+    replace: (match: string) => {
+      return `<a target="_blank" rel="noopener noreferrer" href="${match}">${match}</a>`
+    }
+  })
+}

src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts

@@ -6,18 +6,15 @@
 
 import markdownItRegex from 'markdown-it-regex'
 import MarkdownIt from 'markdown-it/lib'
-import { RegexOptions } from '../../../external-types/markdown-it-regex/interface'
 
 const finalRegex = /^{%slideshare (\w+\/[\w-]+) ?%}$/
 
 export const legacySlideshareShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
-  markdownItRegex(markdownIt, replaceLegacySlideshareShortCode)
-}
-
-export const replaceLegacySlideshareShortCode: RegexOptions = {
-  name: 'legacy-slideshare-short-code',
-  regex: finalRegex,
-  replace: (match) => {
-    return `<a target="_blank" rel="noopener noreferrer" href="https://www.slideshare.net/${match}">https://www.slideshare.net/${match}</a>`
-  }
+  markdownItRegex(markdownIt, {
+    name: 'legacy-slideshare-short-code',
+    regex: finalRegex,
+    replace: (match: string) => {
+      return `<a target="_blank" rel="noopener noreferrer" href="https://www.slideshare.net/${match}">https://www.slideshare.net/${match}</a>`
+    }
+  })
 }

src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts

@@ -6,18 +6,16 @@
 
 import markdownItRegex from 'markdown-it-regex'
 import MarkdownIt from 'markdown-it/lib'
-import { RegexOptions } from '../../../external-types/markdown-it-regex/interface'
 
 const finalRegex = /^{%speakerdeck (\w+\/[\w-]+) ?%}$/
 
 export const legacySpeakerdeckShortCode: MarkdownIt.PluginSimple = (markdownIt) => {
-  markdownItRegex(markdownIt, replaceLegacySpeakerdeckShortCode)
-}
-
-export const replaceLegacySpeakerdeckShortCode: RegexOptions = {
-  name: 'legacy-speakerdeck-short-code',
-  regex: finalRegex,
-  replace: (match) => {
-    return `<a target="_blank" rel="noopener noreferrer" href="https://speakerdeck.com//${match}">https://speakerdeck.com/${match}</a>`
-  }
+  markdownItRegex(markdownIt, {
+      name: 'legacy-speakerdeck-short-code',
+      regex: finalRegex,
+      replace: (match: string) => {
+        return `<a target="_blank" rel="noopener noreferrer" href="https://speakerdeck.com/${match}">https://speakerdeck.com/${match}</a>`
+      }
+    }
+  )
 }

src/components/markdown-renderer/replace-components/pdf/pdf-frame.scss

@@ -1,9 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-.pdf-frame {
-  width: 100%;
-}

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

@@ -1,30 +0,0 @@
-/*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
-
-import React, { useState } from 'react'
-import { ExternalLink } from '../../../common/links/external-link'
-import { OneClickEmbedding } from '../one-click-frame/one-click-embedding'
-import './pdf-frame.scss'
-
-export interface PdfFrameProps {
-  url: string
-}
-
-export const PdfFrame: React.FC<PdfFrameProps> = ({ url }) => {
-  const [activated, setActivated] = useState(false)
-
-  return (
-    <OneClickEmbedding containerClassName={`embed-responsive embed-responsive-${activated ? '4by3' : '16by9'}`}
-      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>
-    </OneClickEmbedding>
-  )
-}

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

@@ -1,32 +0,0 @@
-/*
-SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
-SPDX-License-Identifier: AGPL-3.0-only
-*/
-
-import { DomElement } from 'domhandler'
-import MarkdownIt from 'markdown-it'
-import markdownItRegex from 'markdown-it-regex'
-import React from 'react'
-import { ComponentReplacer } from '../ComponentReplacer'
-import { getAttributesFromHedgeDocTag } from '../utils'
-import { PdfFrame } from './pdf-frame'
-import { replacePdfShortCode } from './replace-pdf-short-code'
-
-export class PdfReplacer extends ComponentReplacer {
-  private counterMap: Map<string, number> = new Map<string, number>()
-
-  public getReplacement (node: DomElement): React.ReactElement | undefined {
-    const attributes = getAttributesFromHedgeDocTag(node, 'pdf')
-    if (attributes && attributes.url) {
-      const pdfUrl = attributes.url
-      const count = (this.counterMap.get(pdfUrl) || 0) + 1
-      this.counterMap.set(pdfUrl, count)
-      return <PdfFrame url={pdfUrl}/>
-    }
-  }
-
-  public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => {
-    markdownItRegex(markdownIt, replacePdfShortCode)
-  }
-}

src/components/markdown-renderer/replace-components/pdf/replace-pdf-short-code.ts

@@ -1,17 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-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 `<app-pdf url="${match}"></app-pdf>`
-  }
-}