TRKJ/gitea
2
0
Fork 0
mirror of https://gitee.com/gitea/gitea synced 2025-11-04 08:30:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

update to mermaid v10 (#23178)

Browse Source 
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
4 changed files with 233 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web_src/js/markup/mermaid.js
View File

@@ -37,14 +37,10 @@ export async function renderMermaid() {
continue;
}
let valid;
try {
valid = mermaid.parse(source);
await mermaid.parse(source);
} catch (err) {
displayError(el, err);
}
if (!valid) {
el.closest('pre').classList.remove('is-loading');
continue;
}
@@ -52,22 +48,25 @@ export async function renderMermaid() {
try {
// 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
mermaid.mermaidAPI.render('mermaid', source, (svgStr) => {
const heightStr = (svgStr.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3];
if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
const iframe = document.createElement('iframe');
iframe.classList.add('markup-render');
iframe.sandbox = 'allow-scripts';
iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`;
const mermaidBlock = document.createElement('div');
mermaidBlock.classList.add('mermaid-block');
mermaidBlock.append(iframe);
const btn = makeCodeCopyButton();
btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn);
el.closest('pre').replaceWith(mermaidBlock);
});
const {svg} = await mermaid.render('mermaid', source);
const heightStr = (svg.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3];
if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
const iframe = document.createElement('iframe');
iframe.classList.add('markup-render');
iframe.sandbox = 'allow-scripts';
iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
const mermaidBlock = document.createElement('div');
mermaidBlock.classList.add('mermaid-block');
mermaidBlock.append(iframe);
const btn = makeCodeCopyButton();
btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn);
el.closest('pre').replaceWith(mermaidBlock);
} catch (err) {
displayError(el, err);
}