From 2dcc7e7beb6d18d685b5ee94f99c19367a3837ec Mon Sep 17 00:00:00 2001 From: mrdrogdrog Date: Sat, 20 Jun 2020 19:21:43 +0200 Subject: [PATCH] PDF embedding (#218) * Add pdf embedding Signed-off-by: Tilman Vatteroth Co-authored-by: Erik Michelson --- src/components/editor/editor.tsx | 2 +- .../markdown-preview/markdown-preview.tsx | 8 +++++ .../regex-plugins/replace-pdf-short-code.ts | 11 +++++++ .../replace-components/pdf/pdf-frame.scss | 3 ++ .../replace-components/pdf/pdf-frame.tsx | 29 +++++++++++++++++++ 5 files changed, 52 insertions(+), 1 deletion(-) create mode 100644 src/components/editor/markdown-preview/regex-plugins/replace-pdf-short-code.ts create mode 100644 src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.scss create mode 100644 src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.tsx diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 10c5f7829..4b6d915ee 100644 --- a/src/components/editor/editor.tsx +++ b/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) diff --git a/src/components/editor/markdown-preview/markdown-preview.tsx b/src/components/editor/markdown-preview/markdown-preview.tsx index a60349fcd..34cd77359 100644 --- a/src/components/editor/markdown-preview/markdown-preview.tsx +++ b/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 = ({ 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 = ({ content }) => { return resultGist } + const resultPdf = getPDFReplacement(node, gistIdCounterMap) + if (resultPdf) { + return resultPdf + } + return convertNodeToElement(node, index, transform) } const ret: ReactElement[] = ReactHtmlParser(html, { transform: transform }) diff --git a/src/components/editor/markdown-preview/regex-plugins/replace-pdf-short-code.ts b/src/components/editor/markdown-preview/regex-plugins/replace-pdf-short-code.ts new file mode 100644 index 000000000..6163ab582 --- /dev/null +++ b/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 `` + } +} diff --git a/src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.scss b/src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.scss new file mode 100644 index 000000000..980057ef0 --- /dev/null +++ b/src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.scss @@ -0,0 +1,3 @@ +.pdf-frame { + width: 100%; +} diff --git a/src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.tsx b/src/components/editor/markdown-preview/replace-components/pdf/pdf-frame.tsx new file mode 100644 index 000000000..bd8bcb31b --- /dev/null +++ b/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): (ReactElement | undefined) => { + const pdfUrl = getIdFromCodiMdTag(node, 'pdf') + if (pdfUrl) { + const count = (counterMap.get(pdfUrl) || 0) + 1 + counterMap.set(pdfUrl, count) + return + } +} + +export const PdfFrame: React.FC = ({ id }) => { + return ( + + + + + + ) +} + +export { getElementReplacement as getPDFReplacement }