diff options
| author | silverwind <me@silverwind.io> | 2022-02-16 04:28:29 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-02-16 11:28:29 +0800 |
| commit | 616146f90400bcf80671410c04926d9dc1f11257 (patch) | |
| tree | 4f6e4d932cfc802ab088a075a967ad7d71c0819a /web_src/js | |
| parent | 1eb6bb9028afb6de155b80a43c8438d843bbe826 (diff) | |
| download | gitea-616146f90400bcf80671410c04926d9dc1f11257.tar.gz gitea-616146f90400bcf80671410c04926d9dc1f11257.zip | |
Various Mermaid improvements (#18776)
* 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>
Diffstat (limited to 'web_src/js')
| -rw-r--r-- | web_src/js/markup/mermaid.js | 39 |
1 files changed, 24 insertions, 15 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 7c7ee26c3c..773c46e791 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -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); |