github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-06 04:11:48 +00: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 */
import Plugin from 'markdown-it-regexp'
import mermaid from 'mermaid'
import handlebars from 'handlebars'
import 'gist-embed'
import abcjs from 'abcjs'
@ -253,8 +252,6 @@ function replaceExtraTags (html) {
return html
}
mermaid.startOnLoad = false
// dynamic event or object binding here
export function finishView (view) {
// todo list
@ -388,25 +385,26 @@ export function finishView (view) {
// mermaid
const mermaids = view.find('div.mermaid.raw').removeClass('raw')
mermaids.each((key, value) => {
let $value
try {
$value = $(value)
const $ele = $(value).closest('pre')
mermaid.mermaidAPI.parse($value.text())
$ele.addClass('mermaid')
$ele.text($value.text())
mermaid.init(undefined, $ele)
} catch (err) {
let errormessage = err
if (err.str) {
errormessage = err.str
const $value = $(value)
const $ele = $(value).closest('pre')
require.ensure([], function (require) {
try {
const mermaid = require('mermaid')
mermaid.startOnLoad = false
mermaid.mermaidAPI.parse($value.text())
$ele.addClass('mermaid')
$ele.text($value.text())
mermaid.init(undefined, $ele)
} catch (err) {
let errormessage = err
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
const abcs = view.find('div.abc.raw').removeClass('raw')
@ -499,6 +497,9 @@ export function finishView (view) {
const langDiv = $(value)
if (langDiv.length > 0) {
const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim()
if (reallang === 'mermaid') {
return
}
const codeDiv = langDiv.find('.code')
let code = ''
if (codeDiv.length > 0) code = codeDiv.html()