From c015d9795750ebffa7567b6b92ed4e8c8ac6ff28 Mon Sep 17 00:00:00 2001
From: Yash-Singh1 <saiansh2525@gmail.com>
Date: Mon, 1 Nov 2021 18:00:39 -0700
Subject: [PATCH] Multiple pages through async before page load

---
 docs/index.html | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 6a8a729e6..00fb06fa7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -38,16 +38,20 @@
 <body>
   <div id="app"></div>
   <script>
-    const initEditor = exports.default;
-
+    var initEditor = exports.default;
+    var parser = new DOMParser();
     var currentCodeExample = 0;
     var colorize = [];
 
-    function colorizeEverything() {
-      colorize.map((id) => {
-        monaco.editor.colorizeElement(document.getElementById('code' + id), { theme: 'mermaid' })
+    function colorizeEverything(html) {
+      initEditor(monaco)
+      return new Promise((resolve, reject) => {
+        var parsed = parser.parseFromString(html, 'text/html').body
+        Promise.all([...parsed.querySelectorAll('pre[id*="code"]')].map(codeBlock => monaco.editor.colorize(codeBlock.innerText, 'mermaid', { theme: 'mermaid' }))).then(result => {
+          parsed.querySelectorAll('pre[id*="code"]').forEach((codeBlock, index) => codeBlock.innerHTML = result[index])
+          resolve(parsed.innerHTML)
+        })
       })
-      colorize = colorize.filter(colorizeEl => colorizeEl)
     }
 
     window.$docsify = {
@@ -69,7 +73,7 @@
               currentCodeExample++;
               colorize.push(currentCodeExample);
               return (
-                '<pre id="code' + currentCodeExample + '" data-lang="mermaid">' + code + '</pre>'
+                '<pre id="code' + currentCodeExample + '">' + code + '</pre>'
               )
             }
             return this.origin.code.apply(this, arguments);
@@ -84,11 +88,12 @@
             return editHtml + html
           })
 
-          hook.ready(function () {
-            if (document.readyState !== 'complete') {
-              return;
-            }
-            colorizeEverything()
+          hook.afterEach(function (html, next) {
+            (async() => {
+                while (!window.hasOwnProperty("monaco"))
+                    await new Promise(resolve => setTimeout(resolve, 1000));
+                colorizeEverything(html).then(newHTML => next(newHTML))
+            })();
           })
         }
       ]
@@ -109,10 +114,6 @@
        ga('send', 'pageview', location.hash);
      }
   }
-  window.onload = () => {
-    initEditor(monaco)
-    colorizeEverything()
-  }
   </script>
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
