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>

1 files changed, 7 insertions, 11 deletions

diff --git a/web_src/js/markup/math.js b/web_src/js/markup/math.js
index dcc656ea82..8427637a0f 100644
--- a/web_src/js/markup/math.js
+++ b/web_src/js/markup/math.js
@@ -1,14 +1,8 @@
-function displayError(el, err) {
-  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);
-}
+import {displayError} from './common.js';
 
 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);
     }
   }
 }