1
0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-04 08:17:24 -05:00
gitea/web_src/js/markdown/mermaid.js
silverwind 4315e313d1
Add mermaid JS renderer (#12334)
* Add mermaid JS renderer

For feature parity with GitLab. Tested in files, issues, wiki, editor.
arc-green only does an inversion because the renderer seems to like to
render white backgrounds on boxes.

Ref: https://github.com/go-gitea/gitea/issues/3340
Fixes: https://github.com/go-gitea/gitea/issues/12307

* add feature entry, switch to neutral theme, remove border

* add bindFunctions support

* remove unnecessary border-radius

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-07-27 02:24:09 -04:00

24 lines
662 B
JavaScript

import {random} from '../utils.js';
export async function renderMermaid(els) {
if (!els || !els.length) return;
const {mermaidAPI} = await import(/* webpackChunkName: "mermaid" */'mermaid');
mermaidAPI.initialize({
startOnLoad: 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);
});
}
}