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>

web_src/js/index.js

@@ -13,6 +13,7 @@ import initClipboard from './features/clipboard.js';
 import initUserHeatmap from './features/userheatmap.js';
 import initServiceWorker from './features/serviceworker.js';
 import initMarkdownAnchors from './markdown/anchors.js';
+import renderMarkdownContent from './markdown/content.js';
 import attachTribute from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
 import initTableSort from './features/tablesort.js';
@@ -46,6 +47,7 @@ function initCommentPreviewTab($form) {
     }, (data) => {
       const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
       $previewPanel.html(data);
+      renderMarkdownContent();
     });
   });
 
@@ -75,6 +77,7 @@ function initEditPreviewTab($form) {
       }, (data) => {
         const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`);
         $previewPanel.html(data);
+        renderMarkdownContent();
       });
     });
   }
@@ -1007,6 +1010,7 @@ async function initRepository() {
             }
             dz.emit('submit');
             dz.emit('reload');
+            renderMarkdownContent();
           });
         });
       } else {
@@ -1347,6 +1351,7 @@ function initWikiForm() {
               wiki: true
             }, (data) => {
               preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
+              renderMarkdownContent();
             });
           };
           if (!simplemde.isSideBySideActive()) {
@@ -2484,6 +2489,7 @@ $(document).ready(async () => {
     initUserHeatmap(),
     initServiceWorker(),
     initNotificationCount(),
+    renderMarkdownContent(),
   ]);
 });
 

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

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

web_src/js/utils.js

@@ -23,3 +23,14 @@ export function isDarkTheme() {
 export function uniq(arr) {
   return Array.from(new Set(arr));
 }
+
+const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+// generate a random string
+export function random(length) {
+  let str = '';
+  for (let i = 0; i < length; i++) {
+    str += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return str;
+}

web_src/less/_markdown.less

@@ -494,3 +494,11 @@
         user-select: none;
     }
 }
+
+.mermaid-chart {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1rem;
+    margin: 1rem 0;
+}

web_src/less/themes/theme-arc-green.less

@@ -1898,3 +1898,7 @@ footer .container .links > * {
 .repository .repo-header .ui.huge.breadcrumb.repo-title .repo-header-icon .avatar {
     color: #2a2e3a;
 }
+
+.mermaid-chart {
+    filter: invert(84%) hue-rotate(180deg);
+}