[getsentry/action-github-commit] Auto commit

Author: getsantry[bot]

src/components/mermaid.tsx

@@ -8,16 +8,25 @@ export default function Mermaid() {
 
   useEffect(() => {
     const renderMermaid = async () => {
-      const mermaidBlocks = document.querySelectorAll<HTMLDivElement>('.language-mermaid');
+      const mermaidBlocks =
+        document.querySelectorAll<HTMLDivElement>('.language-mermaid');
       if (mermaidBlocks.length === 0) return;
 
-      const escapeHTML = (str: string) => 
-        str.replace(/[&<>"']/g, (match) => ({
-          '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
-        }[match] || match));
+      const escapeHTML = (str: string) =>
+        str.replace(
+          /[&<>"']/g,
+          match =>
+            ({
+              '&': '&amp;',
+              '<': '&lt;',
+              '>': '&gt;',
+              '"': '&quot;',
+              "'": '&#39;',
+            })[match] || match
+        );
 
       const {default: mermaid} = await import('mermaid/dist/mermaid.esm.min.mjs');
-      
+
       // Create light and dark versions
       mermaidBlocks.forEach(block => {
         const code = block.textContent ?? '';
@@ -43,7 +52,7 @@ export default function Mermaid() {
       // Render both themes
       mermaid.initialize({startOnLoad: false, theme: 'default'});
       await mermaid.run({nodes: document.querySelectorAll('.language-mermaid.light')});
-      
+
       mermaid.initialize({startOnLoad: false, theme: 'dark'});
       await mermaid.run({nodes: document.querySelectorAll('.language-mermaid.dark')});
 
@@ -54,19 +63,19 @@ export default function Mermaid() {
 
     const initializePanZoom = async () => {
       const svgPanZoom = (await import('svg-pan-zoom')).default;
-      
+
       document.querySelectorAll('.language-mermaid svg').forEach(svg => {
         const svgElement = svg as SVGSVGElement;
         const container = svgElement.closest('.language-mermaid') as HTMLElement;
         const isVisible = window.getComputedStyle(container).display !== 'none';
-        
+
         if (isVisible) {
           const rect = svgElement.getBoundingClientRect();
           if (rect.width > 0 && rect.height > 0) {
             svgElement.setAttribute('width', rect.width.toString());
             svgElement.setAttribute('height', rect.height.toString());
           }
-          
+
           svgPanZoom(svgElement, {
             zoomEnabled: true,
             panEnabled: true,
@@ -89,23 +98,24 @@ export default function Mermaid() {
   // Initialize pan/zoom for newly visible SVGs on theme change
   useEffect(() => {
     if (!isDoneRendering) return;
-    
+
     const initializeDelayedPanZoom = async () => {
       const svgPanZoom = (await import('svg-pan-zoom')).default;
-      
-      document.querySelectorAll('.language-mermaid svg[data-needs-pan-zoom="true"]')
+
+      document
+        .querySelectorAll('.language-mermaid svg[data-needs-pan-zoom="true"]')
         .forEach(svg => {
           const svgElement = svg as SVGSVGElement;
           const container = svgElement.closest('.language-mermaid') as HTMLElement;
           const isVisible = window.getComputedStyle(container).display !== 'none';
-          
+
           if (isVisible) {
             const rect = svgElement.getBoundingClientRect();
             if (rect.width > 0 && rect.height > 0) {
               svgElement.setAttribute('width', rect.width.toString());
               svgElement.setAttribute('height', rect.height.toString());
             }
-            
+
             svgPanZoom(svgElement, {
               zoomEnabled: true,
               panEnabled: true,
@@ -116,7 +126,7 @@ export default function Mermaid() {
               maxZoom: 10,
               zoomScaleSensitivity: 0.2,
             });
-            
+
             svgElement.removeAttribute('data-needs-pan-zoom');
           }
         });
@@ -135,4 +145,4 @@ export default function Mermaid() {
       `}
     </style>
   ) : null;
-}
+}