fix(tabs): add support for Mermaid diagrams within tabs (#671)

apps/test/content/posts/tabs-comprehensive-test.md

@@ -144,3 +144,37 @@ Content for vertical nested tab B.
 {{% /tab %}}
 
 {{< /tabs >}}
+
+## Others
+
+### Mermaid Diagram inside Tabs
+
+{{< tabs >}}
+{{% tab title="Flowchart" %}}
+
+```mermaid
+flowchart TD
+    A[Start] --> B{Is it?}
+    B -->|Yes| C[OK]
+    C --> D[Rethink]
+    D --> B
+    B ---->|No| E[End]
+```
+
+{{% /tab %}}
+{{% tab title="Gantt Chart" %}}
+
+```mermaid
+gantt
+    title A Gantt Diagram
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+```
+
+{{% /tab %}}
+{{< /tabs >}}

assets/js/lib/mermaid.js

@@ -56,7 +56,13 @@ async function loadMermaid({ theme, darkMode, selector }) {
   const isDarkMode = darkMode ?? (document.documentElement.dataset.theme === 'dark')
   const currentTheme = theme ?? getTheme()
   const querySelector = selector ?? (isDarkMode ? '.mermaid-dark' : '.mermaid')
-  const nodes = document.querySelectorAll(querySelector)
+  const nodes = Array.from(document.querySelectorAll(querySelector))
+    .filter((node) => {
+      const p = node.closest('.tab-panel')
+      if (!p) return true
+      const style = getComputedStyle(p)
+      return style.height !== 'auto' || style.width !== 'auto'
+    })
 
   if (!nodes.length) return
 

assets/js/theme.js

@@ -1119,6 +1119,12 @@ class FixIt {
     this._jsonViewerOnSwitchTheme();
   }
 
+  initTabEvents(target = document) {
+    target.addEventListener('tab-container-changed', () => {
+      window.FixItMermaid?.init?.();
+    }, false);
+  }
+
   /**
    * Helper method to initialize content components
    * @param {Element} target - The target element (optional, defaults to document)
@@ -1142,6 +1148,7 @@ class FixIt {
     this.initPangu();
     this.initMathJax();
     this.initJsonViewer();
+    this.initTabEvents(target);
     window.FixItMermaid?.init?.();
     window.FixItAPlayer?.init?.();
   }