github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-10-19 05:40:16 -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

17
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,11 +385,12 @@ 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 {
$value = $(value)
const $ele = $(value).closest('pre') const $ele = $(value).closest('pre')
require.ensure([], function (require) {
try {
const mermaid = require('mermaid')
mermaid.startOnLoad = false
mermaid.mermaidAPI.parse($value.text()) mermaid.mermaidAPI.parse($value.text())
$ele.addClass('mermaid') $ele.addClass('mermaid')
$ele.text($value.text()) $ele.text($value.text())
@ -402,12 +400,12 @@ export function finishView (view) {
if (err.str) { if (err.str) {
errormessage = err.str errormessage = err.str
} }
$value.unwrap() $value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(errormessage)}</div>`) $value.parent().append(`<div class="alert alert-warning">${escapeHTML(errormessage)}</div>`)
console.warn(errormessage) 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')
abcs.each((key, value) => { abcs.each((key, value) => {
@ -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()