Fix math and mermaid rendering bugs (#24049)

1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
https://github.com/mermaid-js/mermaid/issues/4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>

web_src/css/base.css

@@ -9,7 +9,7 @@
   /* non-color variables */
   --border-radius: 0.28571429rem;
   --opacity-disabled: 0.55;
-  --height-loading: 12rem;
+  --height-loading: 16rem;
   /* base colors */
   --color-primary: #4183c4;
   --color-primary-contrast: #ffffff;

web_src/css/helpers.css

@@ -25,7 +25,8 @@
 .gt-overflow-x-scroll { overflow-x: scroll !important; }
 .gt-cursor-default { cursor: default !important; }
 .gt-items-start { align-items: flex-start !important; }
-.gt-whitespace-pre { white-space: pre !important }
+.gt-whitespace-pre { white-space: pre !important; }
+.gt-invisible { visibility: hidden !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;

web_src/css/markup/content.css

@@ -542,7 +542,7 @@
 
 .markup-block-error {
   display: block !important; /* override fomantic .ui.form .error.message {display: none} */
-  border: 1px solid var(--color-error-border) !important;
+  border: none !important;
   margin-bottom: 0 !important;
   border-bottom-left-radius: 0 !important;
   border-bottom-right-radius: 0 !important;

web_src/js/markup/asciicast.js

@@ -1,4 +1,4 @@
-export async function renderAsciinemaPlayer() {
+export async function renderAsciicast() {
   const els = document.querySelectorAll('.asciinema-player-container');
   if (!els.length) return;
 

web_src/js/markup/common.js

@@ -0,0 +1,8 @@
+export function displayError(el, err) {
+  el.classList.remove('is-loading');
+  const errorNode = document.createElement('pre');
+  errorNode.setAttribute('class', 'ui message error markup-block-error');
+  errorNode.textContent = err.str || err.message || String(err);
+  el.before(errorNode);
+  el.setAttribute('data-render-done', 'true');
+}

web_src/js/markup/content.js

@@ -1,7 +1,7 @@
 import {renderMermaid} from './mermaid.js';
 import {renderMath} from './math.js';
 import {renderCodeCopy} from './codecopy.js';
-import {renderAsciinemaPlayer} from './asciicast.js';
+import {renderAsciicast} from './asciicast.js';
 import {initMarkupTasklist} from './tasklist.js';
 
 // code that runs for all markup content
@@ -9,7 +9,7 @@ export function initMarkupContent() {
   renderMermaid();
   renderMath();
   renderCodeCopy();
-  renderAsciinemaPlayer();
+  renderAsciicast();
 }
 
 // code that only runs for comments

web_src/js/markup/math.js

@@ -1,14 +1,8 @@
-function displayError(el, err) {
+import {displayError} from './common.js';
-  const target = targetElement(el);
-  target.classList.remove('is-loading');
-  const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
-  errorNode.textContent = err.str || err.message || String(err);
-  target.before(errorNode);
-}
 
 function targetElement(el) {
-  // The target element is either the current element if it has the `is-loading` class or the pre that contains it
+  // The target element is either the current element if it has the
+  // `is-loading` class or the pre that contains it
   return el.classList.contains('is-loading') ? el : el.closest('pre');
 }
 
@@ -22,6 +16,8 @@ export async function renderMath() {
   ]);
 
   for (const el of els) {
+    const target = targetElement(el);
+    if (target.hasAttribute('data-render-done')) continue;
     const source = el.textContent;
     const displayMode = el.classList.contains('display');
     const nodeName = displayMode ? 'p' : 'span';
@@ -33,9 +29,9 @@ export async function renderMath() {
         maxExpand: 50,
         displayMode,
       });
-      targetElement(el).replaceWith(tempEl);
+      target.replaceWith(tempEl);
     } catch (error) {
-      displayError(el, error);
+      displayError(target, error);
     }
   }
 }

web_src/js/markup/mermaid.js

@@ -1,21 +1,12 @@
 import {isDarkTheme} from '../utils.js';
 import {makeCodeCopyButton} from './codecopy.js';
+import {displayError} from './common.js';
 
 const {mermaidMaxSourceCharacters} = window.config;
 
-const iframeCss = `
+const iframeCss = `:root {color-scheme: normal}
-  :root {color-scheme: normal}
 body {margin: 0; padding: 0; overflow: hidden}
-  #mermaid {display: block; margin: 0 auto}
+#mermaid {display: block; margin: 0 auto}`;
-`;
-
-function displayError(el, err) {
-  el.closest('pre').classList.remove('is-loading');
-  const errorNode = document.createElement('div');
-  errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
-  errorNode.textContent = err.str || err.message || String(err);
-  el.closest('pre').before(errorNode);
-}
 
 export async function renderMermaid() {
   const els = document.querySelectorAll('.markup code.language-mermaid');
@@ -30,18 +21,19 @@ export async function renderMermaid() {
   });
 
   for (const el of els) {
-    const source = el.textContent;
+    const pre = el.closest('pre');
+    if (pre.hasAttribute('data-render-done')) continue;
 
+    const source = el.textContent;
     if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
-      displayError(el, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
+      displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
       continue;
     }
 
     try {
       await mermaid.parse(source);
     } catch (err) {
-      displayError(el, err);
+      displayError(pre, err);
-      el.closest('pre').classList.remove('is-loading');
       continue;
     }
 
@@ -49,26 +41,32 @@ export async function renderMermaid() {
       // can't use bindFunctions here because we can't cross the iframe boundary. This
       // means js-based interactions won't work but they aren't intended to work either
       const {svg} = await mermaid.render('mermaid', source);
-      const heightStr = (svg.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3];
-      if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
 
       const iframe = document.createElement('iframe');
-      iframe.classList.add('markup-render');
+      iframe.classList.add('markup-render', 'gt-invisible');
-      iframe.sandbox = 'allow-scripts';
-      iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
       iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
 
       const mermaidBlock = document.createElement('div');
-      mermaidBlock.classList.add('mermaid-block');
+      mermaidBlock.classList.add('mermaid-block', 'is-loading', 'gt-hidden');
       mermaidBlock.append(iframe);
 
       const btn = makeCodeCopyButton();
       btn.setAttribute('data-clipboard-text', source);
-
       mermaidBlock.append(btn);
-      el.closest('pre').replaceWith(mermaidBlock);
+
+      iframe.addEventListener('load', () => {
+        pre.replaceWith(mermaidBlock);
+        mermaidBlock.classList.remove('gt-hidden');
+        iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
+        setTimeout(() => { // avoid flash of iframe background
+          mermaidBlock.classList.remove('is-loading');
+          iframe.classList.remove('gt-invisible');
+        }, 0);
+      });
+
+      document.body.append(mermaidBlock);
     } catch (err) {
-      displayError(el, err);
+      displayError(pre, err);
     }
   }
 }