Merge pull request #237 from mermaid-js/refactor/upgrade-tailwind

Refactor/upgrade tailwind
mermaid-js · Jan 8, 2025 · e7fc9a9 · e7fc9a9
2 parents 5004c6b + b95e588
commit e7fc9a9
Show file tree

Hide file tree

Showing 7 changed files with 7,392 additions and 3,966 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,6 @@
       as="style"
       href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap"
     />
-    <!--    <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap'>-->
     <style id="zenumlstyle">
       /* Prefix your CSS rules with `#diagram` */
       /*@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');*/
@@ -79,70 +78,48 @@
           class="col-span-1 m-1 border-2"
           cols="30"
           rows="200"
-          oninput="updateCode(this.value)"
         ></textarea>
       </div>
       <div class="col-span-4">
         <pre class="zenuml" style="margin: 0"></pre>
       </div>
     </div>
-    <script>
+    <script type="module">
+      import { waitUntil, debounce } from "./src/utils.ts";
+      import { createConfig } from "./src/config.ts";
+
       const editor = CodeMirror.fromTextArea(document.getElementById("text"), {
         lineNumbers: true,
         singleCursorHeightPerLine: false,
       });
 
-      // implement a waitUntil function
-      function waitUntil(condition, callback) {
-        if (condition()) {
-          callback();
-        } else {
-          setTimeout(function () {
-            waitUntil(condition, callback);
-          }, 100);
-        }
-      }
+      const updateDiagram = debounce((content) => {
+        const config = createConfig({
+          onContentChange: (code) => editor.setValue(code),
+        });
+
+        window.zenUml.render(content, config).then((r) => {
+          window.parentLogger
+            .child({ name: "index.html" })
+            .debug("render resolved", r);
+        });
+      }, 500);
 
       editor.on("change", function (cm) {
         waitUntil(
+          () => window.zenUml,
           () => {
-            return window.zenUml;
+            updateDiagram(cm.getValue());
+            // Save to localStorage
+            localStorage.setItem("zenuml-cm-code", cm.getValue());
           },
-          (() => {
-            let timer = 0;
-            return () => {
-              clearTimeout(timer);
-              timer = setTimeout(() => {
-                const theme =
-                  localStorage.getItem(`${location.hostname}-zenuml-theme`) ||
-                  "theme-default";
-                window.zenUml
-                  .render(cm.getValue(), {
-                    theme,
-                    onContentChange: (code) => editor.setValue(code),
-                    onThemeChange: ({ theme }) => {
-                      localStorage.setItem(
-                        `${location.hostname}-zenuml-theme`,
-                        theme,
-                      );
-                    },
-                  })
-                  .then((r) => {
-                    window.parentLogger
-                      .child({ name: "index.html" })
-                      .debug("render resolved", r);
-                  });
-              }, 500);
-            };
-          })(),
         );
-        // write cm.getValue() to localStorage
-        localStorage.setItem("zenuml-cm-code", cm.getValue());
       });
-      // read localStorage and set to code mirror
-      const code = localStorage.getItem("zenuml-cm-code");
-      if (code) {
-        editor.setValue(code);
+
+      // Load saved code from localStorage
+      const savedCode = localStorage.getItem("zenuml-cm-code");
+      if (savedCode) {
+        editor.setValue(savedCode);
       }
     </script>
     <script type="module" src="./src/main.ts"></script>

diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "pino": "^8.8.0",
     "postcss": "^8.4.31",
     "ramda": "^0.28.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.4.17",
     "vue": "^3.2.45",
     "vuex": "^4.1.0"
   },