From bd11c2663bc7688f594c65c42cd859934ace9f26 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Mon, 8 Mar 2021 21:19:19 +0000
Subject: [PATCH] fix: Mermaid diagrams not rendered on race condition

Appears to be race condition when using Mermaid's automatic rendering with `startOnLoad: true` option.

Workaround by manually rendering diagrams.
---
 wowchemy/assets/js/wowchemy-slides.js  |  2 +-
 wowchemy/assets/js/wowchemy-theming.js |  7 +++++--
 wowchemy/assets/js/wowchemy-utils.js   |  9 ++++++++-
 wowchemy/assets/js/wowchemy.js         | 11 +++++------
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/wowchemy/assets/js/wowchemy-slides.js b/wowchemy/assets/js/wowchemy-slides.js
index 229c7614..c465dfc7 100644
--- a/wowchemy/assets/js/wowchemy-slides.js
+++ b/wowchemy/assets/js/wowchemy-slides.js
@@ -143,6 +143,6 @@ if (params.slides.diagram) {
 
   // Fix Mermaid conflict with Hightlight JS.
   document.addEventListener('DOMContentLoaded', function () {
-    fixMermaid();
+    fixMermaid(false);
   });
 }
diff --git a/wowchemy/assets/js/wowchemy-theming.js b/wowchemy/assets/js/wowchemy-theming.js
index 155e1f3c..2e9e7d43 100644
--- a/wowchemy/assets/js/wowchemy-theming.js
+++ b/wowchemy/assets/js/wowchemy-theming.js
@@ -7,6 +7,7 @@
  **************************************************/
 
 import {fadeIn} from './wowchemy-animation';
+import {fixMermaid} from './wowchemy-utils';
 
 const body = document.body;
 
@@ -191,7 +192,8 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with light theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: true, theme: 'default', securityLevel: 'loose'});
+        window.mermaid.initialize({startOnLoad: false, theme: 'default', securityLevel: 'loose'});
+        fixMermaid(true);
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();
@@ -217,7 +219,8 @@ function renderThemeVariation(isDarkTheme, themeMode = 2, init = false) {
       console.debug('Initializing Mermaid with dark theme');
       if (init) {
         /** @namespace window.mermaid **/
-        window.mermaid.initialize({startOnLoad: true, theme: 'dark', securityLevel: 'loose'});
+        window.mermaid.initialize({startOnLoad: false, theme: 'dark', securityLevel: 'loose'});
+        fixMermaid(true);
       } else {
         // Have to reload to re-initialise Mermaid with the new theme and re-parse the Mermaid code blocks.
         location.reload();
diff --git a/wowchemy/assets/js/wowchemy-utils.js b/wowchemy/assets/js/wowchemy-utils.js
index ad28d727..37f31323 100644
--- a/wowchemy/assets/js/wowchemy-utils.js
+++ b/wowchemy/assets/js/wowchemy-utils.js
@@ -8,8 +8,9 @@
 /**
  * Fix Mermaid.js clash with Highlight.js.
  * Refactor Mermaid code blocks as divs to prevent Highlight parsing them and enable Mermaid to parse them.
+ * @param {boolean} render
  */
-function fixMermaid() {
+function fixMermaid(render = false) {
   let mermaids = [];
   // Note that `language-mermaid` class is applied to <code> block within <pre>, so we wish to replace parent node.
   [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
@@ -19,8 +20,14 @@ function fixMermaid() {
     let newElement = document.createElement('div');
     newElement.innerHTML = mermaidCodeElement.innerHTML;
     newElement.classList.add('mermaid');
+    if (render) {
+      window.mermaid.mermaidAPI.render(`mermaid-${i}`, newElement.textContent, function (svgCode) {
+        newElement.innerHTML = svgCode;
+      });
+    }
     mermaidCodeElement.parentNode.replaceWith(newElement);
   }
+  console.debug(`Processed ${mermaids.length} Mermaid code blocks`);
 }
 
 /**
diff --git a/wowchemy/assets/js/wowchemy.js b/wowchemy/assets/js/wowchemy.js
index 02b9bf7a..9d6dc87e 100644
--- a/wowchemy/assets/js/wowchemy.js
+++ b/wowchemy/assets/js/wowchemy.js
@@ -7,7 +7,7 @@
 
 import mediumZoom from './_vendor/medium-zoom.esm';
 import {hugoEnvironment, codeHighlighting, searchEnabled} from '@params';
-import {fixMermaid, scrollParentToChild} from './wowchemy-utils';
+import {scrollParentToChild} from './wowchemy-utils';
 import {
   changeThemeModeClick,
   initThemeVariation,
@@ -423,7 +423,10 @@ function getSiblings(elem) {
 
 $(document).ready(function () {
   fixHugoOutput();
-  fixMermaid();
+
+  // Render theme variation, including any HLJS and Mermaid themes.
+  let {isDarkTheme, themeMode} = initThemeVariation();
+  renderThemeVariation(isDarkTheme, themeMode, true);
 
   // Initialise code highlighting if enabled for this page.
   // Note: this block should be processed after the Mermaid code-->div conversion.
@@ -431,10 +434,6 @@ $(document).ready(function () {
     hljs.initHighlighting();
   }
 
-  // Render theme variation, including any HLJS and Mermaid themes.
-  let {isDarkTheme, themeMode} = initThemeVariation();
-  renderThemeVariation(isDarkTheme, themeMode, true);
-
   // Scroll Book page's active menu sidebar link into view.
   let child = document.querySelector('.docs-links .active');
   let parent = document.querySelector('.docs-links');