From 4315e313d12bbf0655710b6ab0aad121e0f7dba2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 27 Jul 2020 08:24:09 +0200 Subject: 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 Co-authored-by: techknowlogick --- web_src/js/markdown/content.js | 5 +++++ web_src/js/markdown/mermaid.js | 23 +++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 web_src/js/markdown/content.js create mode 100644 web_src/js/markdown/mermaid.js (limited to 'web_src/js/markdown') diff --git a/web_src/js/markdown/content.js b/web_src/js/markdown/content.js new file mode 100644 index 0000000000..f41800ee30 --- /dev/null +++ b/web_src/js/markdown/content.js @@ -0,0 +1,5 @@ +import {renderMermaid} from './mermaid.js'; + +export default async function renderMarkdownContent() { + await renderMermaid(document.querySelectorAll('.language-mermaid')); +} diff --git a/web_src/js/markdown/mermaid.js b/web_src/js/markdown/mermaid.js new file mode 100644 index 0000000000..1fda101dc0 --- /dev/null +++ b/web_src/js/markdown/mermaid.js @@ -0,0 +1,23 @@ +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); + }); + } +} -- cgit v1.2.3