Nemcio/Gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-10-31 19:06:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix math and mermaid rendering bugs (#24049)

Browse Source 
1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
https://github.com/mermaid-js/mermaid/issues/4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind
2023-04-17 12:10:22 +02:00
committed by GitHub
parent 7681d582cd
commit dcde4701a5
8 changed files with 46 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,21 +1,12 @@
import {isDarkTheme} from '../utils.js';
import {makeCodeCopyButton} from './codecopy.js';
import {displayError} from './common.js';
const {mermaidMaxSourceCharacters} = window.config;
const iframeCss = `
:root {color-scheme: normal}
body {margin: 0; padding: 0; overflow: hidden}
#mermaid {display: block; margin: 0 auto}
`;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode);
}
const iframeCss = `:root {color-scheme: normal}
body {margin: 0; padding: 0; overflow: hidden}
#mermaid {display: block; margin: 0 auto}`;
export async function renderMermaid() {
const els = document.querySelectorAll('.markup code.language-mermaid');
@@ -30,18 +21,19 @@ export async function renderMermaid() {
});
for (const el of els) {
const source = el.textContent;
const pre = el.closest('pre');
if (pre.hasAttribute('data-render-done')) continue;
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}.`));
displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
continue;
}
try {
await mermaid.parse(source);
} catch (err) {
displayError(el, err);
el.closest('pre').classList.remove('is-loading');
displayError(pre, err);
continue;
}
@@ -49,26 +41,32 @@ export async function renderMermaid() {
// 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
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.classList.add('markup-render', 'gt-invisible');
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
const mermaidBlock = document.createElement('div');
mermaidBlock.classList.add('mermaid-block');
mermaidBlock.classList.add('mermaid-block', 'is-loading', 'gt-hidden');
mermaidBlock.append(iframe);
const btn = makeCodeCopyButton();
btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn);
el.closest('pre').replaceWith(mermaidBlock);
iframe.addEventListener('load', () => {
pre.replaceWith(mermaidBlock);
mermaidBlock.classList.remove('gt-hidden');
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
setTimeout(() => { // avoid flash of iframe background
mermaidBlock.classList.remove('is-loading');
iframe.classList.remove('gt-invisible');
}, 0);
});
document.body.append(mermaidBlock);
} catch (err) {
displayError(el, err);
displayError(pre, err);
}
}
}