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>

1 files changed, 23 insertions, 0 deletions

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);
+    });
+  }
+}