web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Various Mermaid improvements (#18776)

Browse source 
* Various Mermaid improvments

- Render into iframe for improved security
- Use built-in dark theme instead of color inversion
- Remove flexbox attributes, resulting in more consistent size rendering
- Update API usage and update to latest version

* restart ci

* misc tweaks

* remove unneccesary declaration

* make it work without allow-same-origin, add loading=lazy

* remove loading attribute, does not seem to work

* rename variable

* skip roundtrip to DOM for rendering

* don't guess chart height

* update comment to make it clear it's intentional

* tweak

* replace deprecated 'scrolling' property

* remove unused css file

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2022-02-16 04:28:29 +01:00 • committed by GitHub
parent 1eb6bb9028
commit 616146f904
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 50 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

39
web_src/js/markup/mermaid.js
View file

@ -1,5 +1,11 @@
import {isDarkTheme} from '../utils.js';
const {mermaidMaxSourceCharacters} = window.config;
const iframeCss = `
body {margin: 0; padding: 0}
#mermaid {display: block; margin: 0 auto}
`;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
@ -15,26 +21,22 @@ export async function renderMermaid() {
const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
mermaid.initialize({
mermaid: {
startOnLoad: false,
},
flowchart: {
useMaxWidth: true,
htmlLabels: false,
},
theme: 'neutral',
startOnLoad: false,
theme: isDarkTheme() ? 'dark' : 'neutral',
securityLevel: 'strict',
});
for (const el of els) {
if (mermaidMaxSourceCharacters >= 0 && el.textContent.length > mermaidMaxSourceCharacters) {
displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
const source = el.textContent;
if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
displayError(el, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
continue;
}
let valid;
try {
valid = mermaid.parse(el.textContent);
valid = mermaid.parse(source);
} catch (err) {
displayError(el, err);
}
@ -45,10 +47,17 @@ export async function renderMermaid() {
}
try {
mermaid.init(undefined, el, (id) => {
const svg = document.getElementById(id);
svg.classList.add('mermaid-chart');
svg.closest('pre').replaceWith(svg);
// 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(/height="(.+?)"/) || [])[1];
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>`;
el.closest('pre').replaceWith(iframe);
});
} catch (err) {
displayError(el, err);