Various Mermaid improvments

silverwind · silverwind · commit f50132594df6 · 2022-02-15T20:29:08.000+01:00
- Render into iframe for improved security
- Use built-in dark theme instead of color inversion
- Remove flexbox attributes, resulting in more consistent size rendering
- Update API usage and update to latest version
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "less": "4.1.2",
     "less-loader": "10.2.0",
     "license-checker-webpack-plugin": "0.2.1",
-    "mermaid": "8.13.10",
+    "mermaid": "8.14.0",
     "mini-css-extract-plugin": "2.5.3",
     "monaco-editor": "0.32.1",
     "monaco-editor-webpack-plugin": "7.0.1",
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js
@@ -1,3 +1,4 @@
+import {isDarkTheme} from '../utils.js';
 const {mermaidMaxSourceCharacters} = window.config;
 
 function displayError(el, err) {
@@ -15,14 +16,8 @@ export async function renderMermaid() {
   const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
 
   mermaid.initialize({
-    mermaid: {
-      startOnLoad: false,
-    },
-    flowchart: {
-      useMaxWidth: true,
-      htmlLabels: false,
-    },
-    theme: 'neutral',
+    startOnLoad: false,
+    theme: isDarkTheme() ? 'dark' : 'neutral',
     securityLevel: 'strict',
   });
 
@@ -48,7 +43,21 @@ export async function renderMermaid() {
       mermaid.init(undefined, el, (id) => {
         const svg = document.getElementById(id);
         svg.classList.add('mermaid-chart');
-        svg.closest('pre').replaceWith(svg);
+        const iframe = document.createElement('iframe');
+        iframe.classList.add('markup-render');
+        // allow-same-origin is to set inline style below
+        iframe.sandbox = 'allow-scripts allow-same-origin';
+        iframe.srcdoc = svg.outerHTML;
+        iframe.addEventListener('load', () => {
+          const style = document.createElement('style');
+          style.appendChild(document.createTextNode(`
+            body {margin: 0; padding: 0; overflow: hidden}
+            .mermaid-chart {display: block; margin: 0 auto}
+          `));
+          iframe.contentWindow.document.head.appendChild(style);
+          iframe.style.height = `${iframe.contentWindow.document.body.scrollHeight}px`;
+        });
+        svg.closest('pre').replaceWith(iframe);
       });
     } catch (err) {
       displayError(el, err);
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
@@ -6,6 +6,7 @@
   /* other variables */
   --border-radius: .28571429rem;
   --opacity-disabled: .55;
+  --height-loading: 12rem;
   --color-primary: #4183c4;
   --color-primary-dark-1: #3876b3;
   --color-primary-dark-2: #31699f;
diff --git a/web_src/less/animations.less b/web_src/less/animations.less
@@ -30,7 +30,7 @@
 
 .markup pre.is-loading,
 .editor-loading.is-loading {
-  height: 12rem;
+  height: var(--height-loading);
 }
 
 @keyframes fadein {
diff --git a/web_src/less/markup/content.less b/web_src/less/markup/content.less
@@ -536,6 +536,14 @@
   }
 }
 
+.markup-render {
+  display: block;
+  border: none;
+  width: 100%;
+  height: var(--height-loading); // actual height is set in JS after loading
+  overflow: hidden;
+}
+
 .markup-block-error {
   margin-bottom: 0 !important;
   border-bottom-left-radius: 0 !important;
diff --git a/web_src/less/markup/mermaid.less b/web_src/less/markup/mermaid.less
@@ -1,12 +1,3 @@
-.mermaid-chart {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 1rem;
-  margin: 1rem auto;
-  height: auto;
-}
-
 /* mermaid's errorRenderer seems to unavoidably spew stuff into <body>, hide it */
 body > div[id*="mermaid-"] {
   display: none !important;
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
@@ -455,10 +455,6 @@ img[src$="/img/matrix.svg"] {
   filter: invert(80%);
 }
 
-.mermaid-chart {
-  filter: invert(84%) hue-rotate(180deg);
-}
-
 .is-loading::after {
   border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;
 }

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@`
`30`	`30`
`31`	`31`	`.markup pre.is-loading,`
`32`	`32`	`.editor-loading.is-loading {`
`33`		`- height: 12rem;`
	`33`	`+ height: var(--height-loading);`
`34`	`34`	`}`
`35`	`35`
`36`	`36`	`@keyframes fadein {`
Original file line number	Diff line number	Diff line change
`@@ -536,6 +536,14 @@`
`536`	`536`	`}`
`537`	`537`	`}`
`538`	`538`
	`539`	`+.markup-render {`
	`540`	`+ display: block;`
	`541`	`+ border: none;`
	`542`	`+ width: 100%;`
	`543`	`+ height: var(--height-loading); // actual height is set in JS after loading`
	`544`	`+ overflow: hidden;`
	`545`	`+}`
	`546`	`+`
`539`	`547`	`.markup-block-error {`
`540`	`548`	`margin-bottom: 0 !important;`
`541`	`549`	`border-bottom-left-radius: 0 !important;`
Original file line number	Diff line number	Diff line change
`@@ -455,10 +455,6 @@ img[src$="/img/matrix.svg"] {`
`455`	`455`	`filter: invert(80%);`
`456`	`456`	`}`
`457`	`457`
`458`		`-.mermaid-chart {`
`459`		`- filter: invert(84%) hue-rotate(180deg);`
`460`		`-}`
`461`		`-`
`462`	`458`	`.is-loading::after {`
`463`	`459`	`border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da;`
`464`	`460`	`}`