Improve key compare in rendering (#1027)

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

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])

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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<string, number> = new Map<string, number>()
-
   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 (
         <AsciinemaFrame id={ asciinemaId }/>
       )

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

src/components/markdown-renderer/replace-components/flow/flowchart-replacer.tsx

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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<string, number> = new Map<string, number>()
-
   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 (
-        <OneClickEmbedding previewContainerClassName={ 'gist-frame' } loadingImageUrl={ preview } hoverIcon={ 'github' }
+        <OneClickEmbedding
-                           tooltip={ 'click to load gist' }>
+          previewContainerClassName={ 'gist-frame' }
+          loadingImageUrl={ preview }
+          hoverIcon={ 'github' }
+          tooltip={ 'click to load gist' }>
           <GistFrame id={ gistId }/>
         </OneClickEmbedding>
       )

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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 <HighlightedCode language={ language } startLineNumber={ showLineNumbers ? startLineNumber : undefined }
+    return <HighlightedCode
-                            wrapLines={ wrapLines } code={ code }/>
+      language={ language }
+      startLineNumber={ showLineNumbers ? startLineNumber : undefined }
+      wrapLines={ wrapLines }
+      code={ code }/>
   }
 }

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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<string>
@@ -53,8 +54,8 @@ export const OneClickEmbedding: React.FC<OneClickFrameProps> = ({ previewContain
       <ShowIf condition={ !showFrame }>
         <span className={ `one-click-embedding ${ previewContainerClassName || '' }` } onClick={ showChildren }>
           <ShowIf condition={ !!previewImageUrl }>
-            <img className={ 'one-click-embedding-preview' } src={ previewImageUrl } alt={ tooltip || '' }
+            <ProxyImageFrame className={ 'one-click-embedding-preview' } src={ previewImageUrl } alt={ tooltip || '' }
-                 title={ tooltip || '' }/>
+                             title={ tooltip || '' }/>
           </ShowIf>
           <ShowIf condition={ !!hoverIcon }>
             <span className='one-click-embedding-icon text-center'>

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-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * SPDX-License-Identifier: AGPL-3.0-only
  */
 
 import { DomElement } from 'domhandler'

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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<string, number> = new Map<string, number>()
-
   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 <VimeoFrame id={ videoId }/>
     }
   }

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

@@ -1,7 +1,7 @@
 /*
- SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
-
+ *
- SPDX-License-Identifier: AGPL-3.0-only
+ * 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<string, number> = new Map<string, number>()
-
   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 <YouTubeFrame id={ videoId }/>
     }
   }

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 startLineIndex = Number(startLineInMarkdown)
-  const endLine = Number(endLineInMarkdown)
+  const endLineIndex = Number(endLineInMarkdown)
-  if (lineKeys[startLine] === undefined || lineKeys[endLine] === undefined) {
+  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) {