LailaTheElf/hedgedoc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lazy-load abcjs

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

To ensure that abc 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 20:57:05 +02:00
parent 938afbddc3
commit 1c023e7881
No known key found for this signature in database
GPG Key ID: 185982BA4C42B7C3
1 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/js/extra.js
View File

@ -18,7 +18,6 @@ import markdownitContainer from 'markdown-it-container'
import Plugin from 'markdown-it-regexp' import Plugin from 'markdown-it-regexp'
import 'gist-embed' import 'gist-embed'
import abcjs from 'abcjs'
require('prismjs/themes/prism.css') require('prismjs/themes/prism.css')
require('prismjs/components/prism-wiki') require('prismjs/components/prism-wiki')
@ -412,14 +411,15 @@ export function finishView (view) {
try { try {
$value = $(value) $value = $(value)
const $ele = $(value).parent().parent() const $ele = $(value).parent().parent()
require.ensure([], function (require) {
const abcjs = require('abcjs')
abcjs.renderAbc(value, $value.text()) abcjs.renderAbc(value, $value.text())
$ele.addClass('abc') $ele.addClass('abc')
$value.children().unwrap().unwrap() $value.children().unwrap().unwrap()
const svg = $ele.find('> svg') const svg = $ele.find('> svg')
svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`) svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`)
svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet') svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet')
})
} catch (err) { } catch (err) {
$value.unwrap() $value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`) $value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@ -496,7 +496,7 @@ 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') { if (reallang === 'mermaid' || reallang === 'abc') {
return return
} }
const codeDiv = langDiv.find('.code') const codeDiv = langDiv.find('.code')