github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-11-26 11:43:59 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve key compare in rendering (#1027)

Browse source 
Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Tilman Vatteroth 2021-02-10 16:10:57 +01:00 committed by GitHub
parent ae38ab007a
commit 37234f9c09
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 71 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

6
src/components/markdown-renderer/replace-components/abc/abc-replacer.tsx
View file

@ -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'

10
src/components/markdown-renderer/replace-components/asciinema/asciinema-replacer.tsx
View file

@ -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<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 }/>
)

6
src/components/markdown-renderer/replace-components/csv/csv-replacer.tsx
View file

@ -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'

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

@ -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
src/components/markdown-renderer/replace-components/gist/gist-replacer.tsx
View file

@ -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<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' }
tooltip={ 'click to load gist' }>
<OneClickEmbedding
previewContainerClassName={ 'gist-frame' }
loadingImageUrl={ preview }
hoverIcon={ 'github' }
tooltip={ 'click to load gist' }>
<GistFrame id={ gistId }/>
</OneClickEmbedding>
)

6
src/components/markdown-renderer/replace-components/graphviz/graphviz-replacer.tsx
View file

@ -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'

13
src/components/markdown-renderer/replace-components/highlighted-fence/highlighted-fence-replacer.tsx
View file

@ -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 <HighlightedCode language={ language } startLineNumber={ showLineNumbers ? startLineNumber : undefined }
wrapLines={ wrapLines } code={ code }/>
return <HighlightedCode
language={ language }
startLineNumber={ showLineNumbers ? startLineNumber : undefined }
wrapLines={ wrapLines }
code={ code }/>
}
}

6
src/components/markdown-renderer/replace-components/katex/katex-replacer.tsx
View file

@ -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'

6
src/components/markdown-renderer/replace-components/markmap/markmap-replacer.tsx
View file

@ -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'

6
src/components/markdown-renderer/replace-components/mermaid/mermaid-replacer.tsx
View file

@ -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'

11
src/components/markdown-renderer/replace-components/one-click-frame/one-click-embedding.tsx
View file

@ -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<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 || '' }
title={ tooltip || '' }/>
<ProxyImageFrame className={ 'one-click-embedding-preview' } src={ previewImageUrl } alt={ tooltip || '' }
title={ tooltip || '' }/>
</ShowIf>
<ShowIf condition={ !!hoverIcon }>
<span className='one-click-embedding-icon text-center'>

6
src/components/markdown-renderer/replace-components/sequence-diagram/sequence-diagram-replacer.tsx
View file

@ -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'

6
src/components/markdown-renderer/replace-components/task-list/task-list-replacer.tsx
View file

@ -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'

6
src/components/markdown-renderer/replace-components/vega-lite/vega-replacer.tsx
View file

@ -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'

10
src/components/markdown-renderer/replace-components/vimeo/vimeo-replacer.tsx
View file

@ -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<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 }/>
}
}

10
src/components/markdown-renderer/replace-components/youtube/youtube-replacer.tsx
View file

@ -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<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 }/>
}
}

14
src/components/markdown-renderer/utils/html-react-transformer.tsx
View file

@ -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) {