diff --git a/CHANGELOG.md b/CHANGELOG.md index 72992e671..7ac2e1770 100644 --- a/CHANGELOG.md +++ b/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 (add image) and (add link) toolbar buttons put selected links directly in the `()` instead of the `[]` part of the generated markdown. diff --git a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts b/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts index 80417e32e..e77adecb9 100644 --- a/src/components/markdown-renderer/hooks/use-replacer-instance-list-creator.ts +++ b/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(), diff --git a/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx b/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx index d40c80b17..2fb82eb60 100644 --- a/src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx +++ b/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, diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-pdf-short-code.ts new file mode 100644 index 000000000..c3244f953 --- /dev/null +++ b/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 `${match}` + } + }) +} diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts index a2950fa60..726d05b3d 100644 --- a/src/components/markdown-renderer/regex-plugins/replace-legacy-slideshare-short-code.ts +++ b/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 `https://www.slideshare.net/${match}` - } + markdownItRegex(markdownIt, { + name: 'legacy-slideshare-short-code', + regex: finalRegex, + replace: (match: string) => { + return `https://www.slideshare.net/${match}` + } + }) } diff --git a/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts b/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts index 788f15724..80f09cabb 100644 --- a/src/components/markdown-renderer/regex-plugins/replace-legacy-speakerdeck-short-code.ts +++ b/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 `https://speakerdeck.com/${match}` - } + markdownItRegex(markdownIt, { + name: 'legacy-speakerdeck-short-code', + regex: finalRegex, + replace: (match: string) => { + return `https://speakerdeck.com/${match}` + } + } + ) } diff --git a/src/components/markdown-renderer/replace-components/pdf/pdf-frame.scss b/src/components/markdown-renderer/replace-components/pdf/pdf-frame.scss deleted file mode 100644 index cd9b65822..000000000 --- a/src/components/markdown-renderer/replace-components/pdf/pdf-frame.scss +++ /dev/null @@ -1,9 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - * - * SPDX-License-Identifier: AGPL-3.0-only - */ - -.pdf-frame { - width: 100%; -} diff --git a/src/components/markdown-renderer/replace-components/pdf/pdf-frame.tsx b/src/components/markdown-renderer/replace-components/pdf/pdf-frame.tsx deleted file mode 100644 index 901010565..000000000 --- a/src/components/markdown-renderer/replace-components/pdf/pdf-frame.tsx +++ /dev/null @@ -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 = ({ url }) => { - const [activated, setActivated] = useState(false) - - return ( - setActivated(true)}> - - - - - ) -} diff --git a/src/components/markdown-renderer/replace-components/pdf/pdf-replacer.tsx b/src/components/markdown-renderer/replace-components/pdf/pdf-replacer.tsx deleted file mode 100644 index 932d79d67..000000000 --- a/src/components/markdown-renderer/replace-components/pdf/pdf-replacer.tsx +++ /dev/null @@ -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 = new Map() - - 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 - } - } - - public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => { - markdownItRegex(markdownIt, replacePdfShortCode) - } -} diff --git a/src/components/markdown-renderer/replace-components/pdf/replace-pdf-short-code.ts b/src/components/markdown-renderer/replace-components/pdf/replace-pdf-short-code.ts deleted file mode 100644 index 0522a37dc..000000000 --- a/src/components/markdown-renderer/replace-components/pdf/replace-pdf-short-code.ts +++ /dev/null @@ -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 `` - } -}