mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-21 02:35:23 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve render performance (#511)

Browse source 
Massive improvement of render performance by:
- replacing the codimd-line-marker with an in-memory map
- an observation of the changed markdown code to identify changed lines
- a unique react-key calculation
This commit is contained in:
mrdrogdrog 2020-09-02 20:51:47 +02:00 • committed by GitHub
parent df7c4cb19e
commit 3a0e35a9f3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 360 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.scss Normal file
View file

@ -0,0 +1,8 @@
.wider .markdown-body {
max-width: 1500px;
width: 100%;
&>.wider-possible {
max-width: 1500px;
}
}

35
src/components/markdown-renderer/replace-components/possible-wider/possible-wider-replacer.tsx
View file

@ -1,26 +1,29 @@
import { DomElement } from 'domhandler'
import React from 'react'
import { ComponentReplacer, SubNodeConverter } from '../ComponentReplacer'
import { ComponentReplacer, NativeRenderer, SubNodeTransform } from '../ComponentReplacer'
import './possible-wider-replacer.scss'
export class PossibleWiderReplacer implements ComponentReplacer {
getReplacement (node: DomElement, index: number, subNodeConverter: SubNodeConverter): React.ReactElement | undefined {
const enabledTags = ['img', 'codimd-youtube', 'codimd-vimeo', 'codimd-asciinema', 'codimd-pdf']
/**
* This replacer doesn't actually replace something.
* It just uses the ComponentReplacer-Class to get access to the DOM and
* appends the "wider-possible" class to paragraphs with special content.
*/
export class PossibleWiderReplacer extends ComponentReplacer {
public getReplacement (node: DomElement, index: number, subNodeTransformer: SubNodeTransform, nativeRenderer: NativeRenderer): (undefined) {
if (node.name !== 'p') {
return
}
if (!node.children || node.children.length !== 1) {
return
}
const childIsImage = node.children[0].name === 'img'
const childIsYoutube = node.children[0].name === 'codimd-youtube'
const childIsVimeo = node.children[0].name === 'codimd-vimeo'
const childIsAsciinema = node.children[0].name === 'codimd-asciinema'
const childIsPDF = node.children[0].name === 'codimd-pdf'
if (!(childIsImage || childIsYoutube || childIsVimeo || childIsAsciinema || childIsPDF)) {
if (!node.children || node.children.length === 0) {
return
}
// This appends the 'wider-possible' class to the node for a wider view in view-mode
node.attribs = Object.assign(node.attribs || {}, { class: `wider-possible ${node.attribs?.class || ''}` })
return subNodeConverter(node, index)
if (node.children.find((subNode) => subNode.name && enabledTags.includes(subNode.name))) {
if (!node.attribs) {
node.attribs = {}
}
node.attribs.class = `${node.attribs.class ?? ''} wider-possible`
}
}
}