From 37234f9c090cff31f299d3bdf92f116084384a28 Mon Sep 17 00:00:00 2001 From: Tilman Vatteroth Date: Wed, 10 Feb 2021 16:10:57 +0100 Subject: [PATCH] Improve key compare in rendering (#1027) Signed-off-by: Tilman Vatteroth --- .../hooks/use-replacer-instance-list-creator.ts | 4 ++-- .../replace-components/abc/abc-replacer.tsx | 6 +++--- .../asciinema/asciinema-replacer.tsx | 10 +++------- .../replace-components/csv/csv-replacer.tsx | 6 +++--- .../flow/flowchart-replacer.tsx | 6 +++--- .../replace-components/gist/gist-replacer.tsx | 17 ++++++++--------- .../graphviz/graphviz-replacer.tsx | 6 +++--- .../highlighted-fence-replacer.tsx | 13 ++++++++----- .../replace-components/katex/katex-replacer.tsx | 6 +++--- .../markmap/markmap-replacer.tsx | 6 +++--- .../mermaid/mermaid-replacer.tsx | 6 +++--- .../one-click-frame/one-click-embedding.tsx | 11 ++++++----- .../sequence-diagram-replacer.tsx | 6 +++--- .../task-list/task-list-replacer.tsx | 6 +++--- .../vega-lite/vega-replacer.tsx | 6 +++--- .../replace-components/vimeo/vimeo-replacer.tsx | 10 +++------- .../youtube/youtube-replacer.tsx | 10 +++------- .../utils/html-react-transformer.tsx | 14 ++++++++------ 18 files changed, 71 insertions(+), 78 deletions(-) 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 01d049f9e..87ac97716 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 @@ -29,7 +29,6 @@ import { YoutubeReplacer } from '../replace-components/youtube/youtube-replacer' export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMarkdown: number, checked: boolean) => void, onImageClick?: ImageClickHandler, baseUrl?: string): () => ComponentReplacer[] => useMemo(() => () => [ - new LinkReplacer(baseUrl), new LinemarkerReplacer(), new GistReplacer(), new YoutubeReplacer(), @@ -47,5 +46,6 @@ export const useReplacerInstanceListCreator = (onTaskCheckedChange?: (lineInMark new HighlightedCodeReplacer(), new ColoredBlockquoteReplacer(), new KatexReplacer(), - new TaskListReplacer(onTaskCheckedChange) + new TaskListReplacer(onTaskCheckedChange), + new LinkReplacer(baseUrl) ], [onImageClick, onTaskCheckedChange, baseUrl]) diff --git a/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx b/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx index 3d6bac255..9ba96f606 100644 --- a/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx b/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx index a516b54e0..0de7d84e1 100644 --- a/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' @@ -14,8 +14,6 @@ import { AsciinemaFrame } from './asciinema-frame' import { replaceAsciinemaLink } from './replace-asciinema-link' export class AsciinemaReplacer extends ComponentReplacer { - private counterMap: Map = new Map() - public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => { markdownItRegex(markdownIt, replaceAsciinemaLink) } @@ -24,8 +22,6 @@ export class AsciinemaReplacer extends ComponentReplacer { const attributes = getAttributesFromHedgeDocTag(node, 'asciinema') if (attributes && attributes.id) { const asciinemaId = attributes.id - const count = (this.counterMap.get(asciinemaId) || 0) + 1 - this.counterMap.set(asciinemaId, count) return ( ) diff --git a/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx b/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx index 7705da25b..40dbf1145 100644 --- a/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx b/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx index 8a74ee735..6d63e0163 100644 --- a/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx b/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx index 70b2b8f46..5f8b8189c 100644 --- a/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' @@ -17,8 +17,6 @@ import { replaceGistLink } from './replace-gist-link' import { replaceLegacyGistShortCode } from './replace-legacy-gist-short-code' export class GistReplacer extends ComponentReplacer { - private counterMap: Map = new Map() - public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => { markdownItRegex(markdownIt, replaceGistLink) markdownItRegex(markdownIt, replaceLegacyGistShortCode) @@ -28,11 +26,12 @@ export class GistReplacer extends ComponentReplacer { const attributes = getAttributesFromHedgeDocTag(node, 'gist') if (attributes && attributes.id) { const gistId = attributes.id - const count = (this.counterMap.get(gistId) || 0) + 1 - this.counterMap.set(gistId, count) return ( - + ) diff --git a/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx b/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx index 6af3a7bfd..8c29d063d 100644 --- a/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx index bb5356031..2c2cd0c5b 100644 --- a/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' @@ -39,7 +39,10 @@ export class HighlightedCodeReplacer extends ComponentReplacer { .filter(line => !!line).length } - return + return } } diff --git a/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx b/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx index ed7651586..dde752c78 100644 --- a/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx b/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx index 3059a6305..babf9d53c 100644 --- a/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx b/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx index 1ef6dcee6..b7728d77a 100644 --- a/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx b/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx index 05aa3a25f..9aaf6c766 100644 --- a/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx +++ b/src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import React, { useEffect, useState } from 'react' @@ -9,6 +9,7 @@ import { Trans } from 'react-i18next' import { IconName } from '../../../common/fork-awesome/types' import { ShowIf } from '../../../common/show-if/show-if' import './one-click-embedding.scss' +import { ProxyImageFrame } from '../image/proxy-image-frame' interface OneClickFrameProps { onImageFetch?: () => Promise @@ -53,8 +54,8 @@ export const OneClickEmbedding: React.FC = ({ previewContain - { + diff --git a/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx b/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx index 19dff5cc0..ca791c9c5 100644 --- a/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx b/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx index c6175f052..5ca470d57 100644 --- a/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx b/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx index 56a47ca42..030c22ae0 100644 --- a/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' diff --git a/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx b/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx index 1d923ae26..68da18ad0 100644 --- a/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' @@ -15,8 +15,6 @@ import { replaceVimeoLink } from './replace-vimeo-link' import { VimeoFrame } from './vimeo-frame' export class VimeoReplacer extends ComponentReplacer { - private counterMap: Map = new Map() - public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => { markdownItRegex(markdownIt, replaceVimeoLink) markdownItRegex(markdownIt, replaceLegacyVimeoShortCode) @@ -26,8 +24,6 @@ export class VimeoReplacer extends ComponentReplacer { const attributes = getAttributesFromHedgeDocTag(node, 'vimeo') if (attributes && attributes.id) { const videoId = attributes.id - const count = (this.counterMap.get(videoId) || 0) + 1 - this.counterMap.set(videoId, count) return } } diff --git a/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx b/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx index 74726d878..da1831fb3 100644 --- a/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx +++ b/src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx @@ -1,7 +1,7 @@ /* - SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) - - SPDX-License-Identifier: AGPL-3.0-only + * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file) + * + * SPDX-License-Identifier: AGPL-3.0-only */ import { DomElement } from 'domhandler' @@ -15,8 +15,6 @@ import { replaceYouTubeLink } from './replace-youtube-link' import { YouTubeFrame } from './youtube-frame' export class YoutubeReplacer extends ComponentReplacer { - private counterMap: Map = new Map() - public static readonly markdownItPlugin: MarkdownIt.PluginSimple = (markdownIt) => { markdownItRegex(markdownIt, replaceYouTubeLink) markdownItRegex(markdownIt, replaceLegacyYoutubeShortCode) @@ -26,8 +24,6 @@ export class YoutubeReplacer extends ComponentReplacer { const attributes = getAttributesFromHedgeDocTag(node, 'youtube') if (attributes && attributes.id) { const videoId = attributes.id - const count = (this.counterMap.get(videoId) || 0) + 1 - this.counterMap.set(videoId, count) return } } diff --git a/src/components/markdown-renderer/utils/html-react-transformer.tsx b/src/components/markdown-renderer/utils/html-react-transformer.tsx index 460fbb28b..ea45993d1 100644 --- a/src/components/markdown-renderer/utils/html-react-transformer.tsx +++ b/src/components/markdown-renderer/utils/html-react-transformer.tsx @@ -36,16 +36,18 @@ export const calculateKeyFromLineMarker = (node: DomElement, lineKeys?: LineKeys return } - const startLine = Number(startLineInMarkdown) - const endLine = Number(endLineInMarkdown) - if (lineKeys[startLine] === undefined || lineKeys[endLine] === undefined) { + const startLineIndex = Number(startLineInMarkdown) + const endLineIndex = Number(endLineInMarkdown) + const startLine = lineKeys[startLineIndex - 1] + const endLine = lineKeys[endLineIndex - 2] + if (startLine === undefined || endLine === undefined) { return } - return `${ lineKeys[startLine].id }_${ lineKeys[endLine].id }` + return `${ startLine.id }_${ endLine.id }` } -export const findNodeReplacement = (node: DomElement, key: string, allReplacers: ComponentReplacer[], subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): ReactElement | null | undefined => { +export const findNodeReplacement = (node: DomElement, allReplacers: ComponentReplacer[], subNodeTransform: SubNodeTransform, nativeRenderer: NativeRenderer): ReactElement | null | undefined => { return allReplacers .map((componentReplacer) => componentReplacer.getReplacement(node, subNodeTransform, nativeRenderer)) .find((replacement) => replacement !== undefined) @@ -66,7 +68,7 @@ export const buildTransformer = (lineKeys: (LineKeys[] | undefined), allReplacer const subNodeTransform: SubNodeTransform = (subNode, subIndex) => transform(subNode, subIndex, transform) const key = calculateKeyFromLineMarker(node, lineKeys) ?? (-index).toString() - const tryReplacement = findNodeReplacement(node, key, allReplacers, subNodeTransform, nativeRenderer) + const tryReplacement = findNodeReplacement(node, allReplacers, subNodeTransform, nativeRenderer) if (tryReplacement === null) { return null } else if (tryReplacement === undefined) {