mirror of https://github.com/go-gitea/gitea.git
Add loading spinners and mermaid error handling (#12358)
- Add loading spinners on editor and mermaid renderers - Add error handling and inline error box for mermaid - Fix Mermaid rendering by using the .init apipull/12419/head^2
silverwind
5 years ago
committed by
GitHub
parent
5e5c893555
commit
e61c09ed73
@ -1,5 +1,5 @@
|
||||
import {renderMermaid} from './mermaid.js';
|
||||
|
||||
export default async function renderMarkdownContent() {
|
||||
await renderMermaid(document.querySelectorAll('.language-mermaid'));
|
||||
await renderMermaid(document.querySelectorAll('code.language-mermaid'));
|
||||
}
|
||||
|
||||
@ -1,23 +1,56 @@
|
||||
import {random} from '../utils.js';
|
||||
const MAX_SOURCE_CHARACTERS = 5000;
|
||||
|
||||
function displayError(el, err) {
|
||||
el.closest('pre').classList.remove('is-loading');
|
||||
const errorNode = document.createElement('div');
|
||||
errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
|
||||
errorNode.textContent = err.str || err.message || String(err);
|
||||
el.closest('pre').before(errorNode);
|
||||
}
|
||||
|
||||
export async function renderMermaid(els) {
|
||||
if (!els || !els.length) return;
|
||||
|
||||
const {mermaidAPI} = await import(/* webpackChunkName: "mermaid" */'mermaid');
|
||||
const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid');
|
||||
|
||||
mermaidAPI.initialize({
|
||||
startOnLoad: false,
|
||||
mermaid.initialize({
|
||||
mermaid: {
|
||||
startOnLoad: false,
|
||||
},
|
||||
flowchart: {
|
||||
useMaxWidth: true,
|
||||
htmlLabels: false,
|
||||
},
|
||||
theme: 'neutral',
|
||||
securityLevel: 'strict',
|
||||
});
|
||||
|
||||
for (const el of els) {
|
||||
mermaidAPI.render(`mermaid-${random(12)}`, el.textContent, (svg, bindFunctions) => {
|
||||
const div = document.createElement('div');
|
||||
div.classList.add('mermaid-chart');
|
||||
div.innerHTML = svg;
|
||||
if (typeof bindFunctions === 'function') bindFunctions(div);
|
||||
el.closest('pre').replaceWith(div);
|
||||
});
|
||||
if (el.textContent.length > MAX_SOURCE_CHARACTERS) {
|
||||
displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`));
|
||||
continue;
|
||||
}
|
||||
|
||||
let valid;
|
||||
try {
|
||||
valid = mermaid.parse(el.textContent);
|
||||
} catch (err) {
|
||||
displayError(el, err);
|
||||
}
|
||||
|
||||
if (!valid) {
|
||||
el.closest('pre').classList.remove('is-loading');
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
mermaid.init(undefined, el, (id) => {
|
||||
const svg = document.getElementById(id);
|
||||
svg.classList.add('mermaid-chart');
|
||||
svg.closest('pre').replaceWith(svg);
|
||||
});
|
||||
} catch (err) {
|
||||
displayError(el, err);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
@keyframes isloadingspin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
background: transparent !important;
|
||||
color: transparent !important;
|
||||
border: transparent !important;
|
||||
pointer-events: none !important;
|
||||
position: relative !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.is-loading:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: isloadingspin 500ms infinite linear;
|
||||
border-width: 4px;
|
||||
border-style: solid;
|
||||
border-color: #ececec #ececec #666 #666;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.markdown pre.is-loading,
|
||||
.editor-loading.is-loading {
|
||||
height: 12rem;
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
.mermaid-chart {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
/* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
|
||||
body > div[id*="mermaid-"] {
|
||||
display: none !important;
|
||||
}
|
||||
Loading…
Reference in New Issue