github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-10-18 21:30:15 -04:00
Code Issues Projects Releases Packages Wiki Activity

Lazy-load mermaid

Browse source 
This commit moves the import of mermaid into a `require.ensure` block,
that is only executed when a mermaid diagram is actually present
in a note. Webpack automatically splits the library into a separate
chunk and loads that on demand.

To ensure that mermaid code-blocks are not treated as normal
code-blocks while the chunk is loading, a corresponding check is added
to `finishView`.

Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren 2021-06-06 19:08:06 +02:00
parent 3f5755ed80
commit b45b8b9c0d
No known key found for this signature in database
GPG key ID: 185982BA4C42B7C3
1 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
public/js/extra.js
View file

@ -17,7 +17,6 @@ import markdownitContainer from 'markdown-it-container'
/* Defined regex markdown it plugins */ /* Defined regex markdown it plugins */
import Plugin from 'markdown-it-regexp' import Plugin from 'markdown-it-regexp'
import mermaid from 'mermaid'
import handlebars from 'handlebars' import handlebars from 'handlebars'
import 'gist-embed' import 'gist-embed'
import abcjs from 'abcjs' import abcjs from 'abcjs'
@ -253,8 +252,6 @@ function replaceExtraTags (html) {
return html return html
} }
mermaid.startOnLoad = false
// dynamic event or object binding here // dynamic event or object binding here
export function finishView (view) { export function finishView (view) {
// todo list // todo list
@ -388,25 +385,26 @@ export function finishView (view) {
// mermaid // mermaid
const mermaids = view.find('div.mermaid.raw').removeClass('raw') const mermaids = view.find('div.mermaid.raw').removeClass('raw')
mermaids.each((key, value) => { mermaids.each((key, value) => {
let $value const $value = $(value)
try { const $ele = $(value).closest('pre')
$value = $(value) require.ensure([], function (require) {
const $ele = $(value).closest('pre') try {
const mermaid = require('mermaid')
mermaid.mermaidAPI.parse($value.text()) mermaid.startOnLoad = false
$ele.addClass('mermaid') mermaid.mermaidAPI.parse($value.text())
$ele.text($value.text()) $ele.addClass('mermaid')
mermaid.init(undefined, $ele) $ele.text($value.text())
} catch (err) { mermaid.init(undefined, $ele)
let errormessage = err } catch (err) {
if (err.str) { let errormessage = err
errormessage = err.str if (err.str) {
errormessage = err.str
}
$value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(errormessage)}</div>`)
console.warn(errormessage)
} }
})
$value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(errormessage)}</div>`)
console.warn(errormessage)
}
}) })
// abc.js // abc.js
const abcs = view.find('div.abc.raw').removeClass('raw') const abcs = view.find('div.abc.raw').removeClass('raw')
@ -499,6 +497,9 @@ export function finishView (view) {
const langDiv = $(value) const langDiv = $(value)
if (langDiv.length > 0) { if (langDiv.length > 0) {
const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim() const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim()
if (reallang === 'mermaid') {
return
}
const codeDiv = langDiv.find('.code') const codeDiv = langDiv.find('.code')
let code = '' let code = ''
if (codeDiv.length > 0) code = codeDiv.html() if (codeDiv.length > 0) code = codeDiv.html()