update to mermaid v10 (#23178)

fix #23153

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
techknowlogick 2023-03-04 00:39:07 -05:00 committed by GitHub
parent 787a05a3a2
commit af4b00c283
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 233 additions and 68 deletions

256
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -31,7 +31,7 @@
"less": "4.1.3", "less": "4.1.3",
"less-loader": "11.1.0", "less-loader": "11.1.0",
"license-checker-webpack-plugin": "0.2.1", "license-checker-webpack-plugin": "0.2.1",
"mermaid": "9.3.0", "mermaid": "10.0.2",
"mini-css-extract-plugin": "2.7.2", "mini-css-extract-plugin": "2.7.2",
"monaco-editor": "0.34.1", "monaco-editor": "0.34.1",
"monaco-editor-webpack-plugin": "7.0.1", "monaco-editor-webpack-plugin": "7.0.1",

View File

@ -37,14 +37,10 @@ export async function renderMermaid() {
continue; continue;
} }
let valid;
try { try {
valid = mermaid.parse(source); await mermaid.parse(source);
} catch (err) { } catch (err) {
displayError(el, err); displayError(el, err);
}
if (!valid) {
el.closest('pre').classList.remove('is-loading'); el.closest('pre').classList.remove('is-loading');
continue; continue;
} }
@ -52,22 +48,25 @@ export async function renderMermaid() {
try { try {
// can't use bindFunctions here because we can't cross the iframe boundary. This // can't use bindFunctions here because we can't cross the iframe boundary. This
// means js-based interactions won't work but they aren't intended to work either // means js-based interactions won't work but they aren't intended to work either
mermaid.mermaidAPI.render('mermaid', source, (svgStr) => { const {svg} = await mermaid.render('mermaid', source);
const heightStr = (svgStr.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3]; const heightStr = (svg.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3];
if (!heightStr) return displayError(el, new Error('Could not determine chart height')); if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
const iframe = document.createElement('iframe');
iframe.classList.add('markup-render'); const iframe = document.createElement('iframe');
iframe.sandbox = 'allow-scripts'; iframe.classList.add('markup-render');
iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; iframe.sandbox = 'allow-scripts';
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`; iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
const mermaidBlock = document.createElement('div'); iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
mermaidBlock.classList.add('mermaid-block');
mermaidBlock.append(iframe); const mermaidBlock = document.createElement('div');
const btn = makeCodeCopyButton(); mermaidBlock.classList.add('mermaid-block');
btn.setAttribute('data-clipboard-text', source); mermaidBlock.append(iframe);
mermaidBlock.append(btn);
el.closest('pre').replaceWith(mermaidBlock); const btn = makeCodeCopyButton();
}); btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn);
el.closest('pre').replaceWith(mermaidBlock);
} catch (err) { } catch (err) {
displayError(el, err); displayError(el, err);
} }

View File

@ -234,7 +234,7 @@ export default {
'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33 'khroma@*': {licenseName: 'MIT'}, // https://github.com/fabiospampinato/khroma/pull/33
}, },
emitError: true, emitError: true,
allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense)', allow: '(Apache-2.0 OR BSD-2-Clause OR BSD-3-Clause OR MIT OR ISC OR CPAL-1.0 OR Unlicense OR EPL-1.0 OR EPL-2.0)',
ignore: [ ignore: [
'font-awesome', 'font-awesome',
], ],