mdedit: add optional mermaid support

2 files changed, 11 insertions, 1 deletions

diff --git a/internal/mdedit/res/app.js b/internal/mdedit/res/app.js
index c934697..f022bae 100644
--- a/internal/mdedit/res/app.js
+++ b/internal/mdedit/res/app.js
@@ -29,9 +29,13 @@
   const receiveHTML = body => {
     $("div#preview").innerHTML = body;
     $("span#status").innerText = "Saved";
+
+    if (window.mermaid) {
+      mermaid.run({ querySelector: "div#preview code.language-mermaid" });
+    }
   };
 
-  // whenever the <textedit> changes, wait 3 seconds and then save all changes
+  // whenever the <textedit> changes, wait 1 second and then save all changes
   let timeoutID = null;
   const onTextChange = event => {
     if (timeoutID !== null) {
@@ -52,6 +56,11 @@
     handleResponse(fetch("/data.md", opts), receiveHTML);
   };
 
+  // initialize Mermaid on startup
+  if (window.mermaid) {
+    window.mermaid.initialize({ startOnLoad: false });
+  }
+
   // load Markdown and rendered HTML on startup
   handleResponse(fetch("/data.md"), body => {
     const editor = $("textarea#editor");
diff --git a/internal/mdedit/res/index.html b/internal/mdedit/res/index.html
index 20aea13..601d41d 100644
--- a/internal/mdedit/res/index.html
+++ b/internal/mdedit/res/index.html
@@ -14,5 +14,6 @@
   <textarea id="editor"></textarea>
   <div id="preview"></div>
 </body>
+<with-mermaid><script src="/mermaid.js"></script></with-mermaid>
 <script src="/res.js"></script>
 </html>