Various Mermaid improvements (#18776) (#18780)

* Various Mermaid improvments - 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 * restart ci * misc tweaks * remove unneccesary declaration * make it work without allow-same-origin, add loading=lazy * remove loading attribute, does not seem to work * rename variable * skip roundtrip to DOM for rendering * don't guess chart height * update comment to make it clear it's intentional * tweak * replace deprecated 'scrolling' property * remove unused css file Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2022-02-16 10:26:53 +01:00 · 2022-02-16 10:26:53 +01:00 · 1f7802db97
commit 1f7802db97
parent c876124efe
9 changed files with 50 additions and 50 deletions
--- a/package-lock.json
+++ b/package-lock.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.2",
        "monaco-editor": "0.31.1",
        "monaco-editor-webpack-plugin": "7.0.1",
@ -3435,9 +3435,9 @@
      }
    },
    "node_modules/dompurify": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.4.tgz",
-      "integrity": "sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ=="
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.5.tgz",
+      "integrity": "sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ=="
    },
    "node_modules/domutils": {
      "version": "2.8.0",
@ -6797,15 +6797,15 @@
      }
    },
    "node_modules/mermaid": {
-      "version": "8.13.10",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.13.10.tgz",
-      "integrity": "sha512-2ANep359uML87+wiYaWSu83eg9Qc0xCLnNJdCh100m4v0orS3fp8SScsZLcDSElRGHi+1zuVJsEEVEWH05+COQ==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.14.0.tgz",
+      "integrity": "sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==",
      "dependencies": {
        "@braintree/sanitize-url": "^3.1.0",
        "d3": "^7.0.0",
        "dagre": "^0.8.5",
        "dagre-d3": "^0.6.4",
-        "dompurify": "2.3.4",
+        "dompurify": "2.3.5",
        "graphlib": "^2.1.8",
        "khroma": "^1.4.1",
        "moment-mini": "^2.24.0",
@ -12547,9 +12547,9 @@
      }
    },
    "dompurify": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.4.tgz",
-      "integrity": "sha512-6BVcgOAVFXjI0JTjEvZy901Rghm+7fDQOrNIcxB4+gdhj6Kwp6T9VBhBY/AbagKHJocRkDYGd6wvI+p4/10xtQ=="
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.5.tgz",
+      "integrity": "sha512-kD+f8qEaa42+mjdOpKeztu9Mfx5bv9gVLO6K9jRx4uGvh6Wv06Srn4jr1wPNY2OOUGGSKHNFN+A8MA3v0E0QAQ=="
    },
    "domutils": {
      "version": "2.8.0",
@ -15033,15 +15033,15 @@
      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
    },
    "mermaid": {
-      "version": "8.13.10",
-      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.13.10.tgz",
-      "integrity": "sha512-2ANep359uML87+wiYaWSu83eg9Qc0xCLnNJdCh100m4v0orS3fp8SScsZLcDSElRGHi+1zuVJsEEVEWH05+COQ==",
+      "version": "8.14.0",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.14.0.tgz",
+      "integrity": "sha512-ITSHjwVaby1Li738sxhF48sLTxcNyUAoWfoqyztL1f7J6JOLpHOuQPNLBb6lxGPUA0u7xP9IRULgvod0dKu35A==",
      "requires": {
        "@braintree/sanitize-url": "^3.1.0",
        "d3": "^7.0.0",
        "dagre": "^0.8.5",
        "dagre-d3": "^0.6.4",
-        "dompurify": "2.3.4",
+        "dompurify": "2.3.5",
        "graphlib": "^2.1.8",
        "khroma": "^1.4.1",
        "moment-mini": "^2.24.0",
--- 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.2",
    "monaco-editor": "0.31.1",
    "monaco-editor-webpack-plugin": "7.0.1",
--- a/web_src/js/markup/mermaid.js
+++ b/web_src/js/markup/mermaid.js
@ -1,5 +1,11 @@
+import {isDarkTheme} from '../utils.js';
 const {mermaidMaxSourceCharacters} = window.config;

+const iframeCss = `
+  body {margin: 0; padding: 0}
+  #mermaid {display: block; margin: 0 auto}
+`;
+
 function displayError(el, err) {
  el.closest('pre').classList.remove('is-loading');
  const errorNode = document.createElement('div');
@ -15,26 +21,22 @@ 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',
  });

  for (const el of els) {
-    if (mermaidMaxSourceCharacters >= 0 && el.textContent.length > mermaidMaxSourceCharacters) {
-      displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
+    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}.`));
      continue;
    }

    let valid;
    try {
-      valid = mermaid.parse(el.textContent);
+      valid = mermaid.parse(source);
    } catch (err) {
      displayError(el, err);
    }
@ -45,10 +47,17 @@ export async function renderMermaid() {
    }

    try {
-      mermaid.init(undefined, el, (id) => {
-        const svg = document.getElementById(id);
-        svg.classList.add('mermaid-chart');
-        svg.closest('pre').replaceWith(svg);
+      // 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
+      mermaid.mermaidAPI.render('mermaid', source, (svgStr) => {
+        const heightStr = (svgStr.match(/height="(.+?)"/) || [])[1];
+        if (!heightStr) return displayError(el, new Error('Could not determine chart height'));
+        const iframe = document.createElement('iframe');
+        iframe.classList.add('markup-render');
+        iframe.sandbox = 'allow-scripts';
+        iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`;
+        iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`;
+        el.closest('pre').replaceWith(iframe);
      });
    } catch (err) {
      displayError(el, err);
--- 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;
--- 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 {
--- a/web_src/less/index.less
+++ b/web_src/less/index.less
@ -10,7 +10,6 @@
@import "./features/codeeditor.less";
@import "./features/projects.less";
@import "./markup/content.less";
-@import "./markup/mermaid.less";
@import "./markup/codecopy.less";
@import "./code/linebutton.less";

--- 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;
--- a/web_src/less/markup/mermaid.less
+++ b/web_src/less/markup/mermaid.less
@ -1,13 +0,0 @@
-.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;
-}
--- 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;
 }