Use dark theme for mermaid graphs in on-hover docs (#2667)

assets/js/hooks/cell_editor/live_editor.js

@@ -466,6 +466,7 @@ export default class LiveEditor {
           node.classList.add("cm-markdown");
           new Markdown(node, item.documentation, {
             defaultCodeLanguage: this.language,
+            useDarkTheme: this.usesDarkTheme(),
           });
           return node;
         });
@@ -511,6 +512,7 @@ export default class LiveEditor {
               dom.appendChild(item);
               new Markdown(item, content, {
                 defaultCodeLanguage: this.language,
+                useDarkTheme: this.usesDarkTheme(),
               });
             }
 
@@ -596,4 +598,10 @@ export default class LiveEditor {
 
     this.initialWidgets = {};
   }
+
+  /** @private */
+  usesDarkTheme() {
+    const settings = settingsStore.get();
+    return settings.editor_theme !== "light";
+  }
 }

assets/js/lib/markdown.js

@@ -33,6 +33,7 @@ class Markdown {
       defaultCodeLanguage = null,
       emptyText = "",
       allowedUriSchemes = [],
+      useDarkTheme = false,
     } = {},
   ) {
     this.container = container;
@@ -41,6 +42,7 @@ class Markdown {
     this.defaultCodeLanguage = defaultCodeLanguage;
     this.emptyText = emptyText;
     this.allowedUriSchemes = allowedUriSchemes;
+    this.useDarkTheme = useDarkTheme;
 
     this.render();
   }
@@ -81,7 +83,7 @@ class Markdown {
         .use(rehypeExpandUrls, { baseUrl: this.baseUrl })
         .use(rehypeSanitize, sanitizeSchema(this.allowedUriSchemes))
         .use(rehypeKatex)
-        .use(rehypeMermaid)
+        .use(rehypeMermaid, { useDarkTheme: this.useDarkTheme })
         .use(rehypeExternalLinks, { baseUrl: this.baseUrl })
         .use(rehypeStringify, {
           // Mermaid allows HTML tags, such as <br /> in diagram labels.
@@ -236,7 +238,8 @@ function rehypeMermaid(options) {
         }
 
         const value = toText(element, { whitespace: "pre" });
-        const promise = renderMermaid(value).then(updateNode);
+        const theme = options.useDarkTheme ? "dark" : "default";
+        const promise = renderMermaid(value, { theme }).then(updateNode);
         promises.push(promise);
       }
     });

assets/js/lib/markdown/mermaid.js

@@ -4,8 +4,6 @@ import CacheLRU from "../../lib/cache_lru";
 let idCount = 0;
 let getId = () => `mermaid-graph-${idCount++}`;
 
-let mermaidInitialized = false;
-
 const fontAwesomeVersion = "5.15.4";
 
 const cache = new CacheLRU(25);
@@ -13,7 +11,7 @@ const cache = new CacheLRU(25);
 /**
  * Renders SVG graph from mermaid definition.
  */
-export function renderMermaid(definition) {
+export function renderMermaid(definition, options) {
   const hash = md5Base64(definition);
   const svg = cache.get(hash);
 
@@ -24,6 +22,11 @@ export function renderMermaid(definition) {
   return importMermaid().then((mermaid) => {
     injectFontAwesomeIfNeeded(definition);
 
+    // There is no way to specify options for individual render, so
+    // we call initialize every time to set the global options.
+    // See https://github.com/mermaid-js/mermaid/issues/5427
+    mermaid.initialize({ startOnLoad: false, ...options });
+
     return mermaid
       .render(getId(), definition)
       .then(({ svg }) => {
@@ -37,13 +40,7 @@ export function renderMermaid(definition) {
 }
 
 function importMermaid() {
-  return import("mermaid").then(({ default: mermaid }) => {
+  return import("mermaid").then(({ default: mermaid }) => mermaid);
-    if (!mermaidInitialized) {
-      mermaid.initialize({ startOnLoad: false });
-      mermaidInitialized = true;
-    }
-    return mermaid;
-  });
 }
 
 function injectFontAwesomeIfNeeded(definition) {