mdedit: add optional mermaid support

1 files changed, 10 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");