github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-01-06 04:43:12 +00:00
Code Issues Projects Releases Packages 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

20
public/js/extra.js
View file

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