From 74b9aaaeedd878129a41ede5493a8af86008505d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Mon, 11 Mar 2024 21:37:55 +0100
Subject: [PATCH] mermaid: let it behave like block level element #795

---
 static/css/theme.css | 11 +++++------
 static/js/theme.js   | 25 ++++++++++---------------
 2 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/static/css/theme.css b/static/css/theme.css
index 940916d7d1..2053def70b 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -1369,7 +1369,6 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 }
 
 .mermaid {
-    border: 1px solid transparent;
     display: inline-block;
     padding: .5rem .5rem 0 .5rem;
     position: relative;
@@ -1380,17 +1379,17 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
 .mermaid.mermaid-render {
     visibility: visible;
 }
-.mermaid.zoomable:hover {
-    border-color: rgba( 134, 134, 134, .333 );
-}
-
 .mermaid > svg {
     /* remove inline height from generated diagram */
+    border: 1px solid transparent;
     height: initial !important;
 }
-.mermaid.zoomable > svg {
+.mermaid-container.zoomable > .mermaid > svg {
     cursor: grab;
 }
+.mermaid-container.zoomable > .mermaid:hover > svg{
+    border-color: rgba( 134, 134, 134, .333 );
+}
 
 .svg-reset-button {
     background-color: rgba( 160, 160, 160, .2 );
diff --git a/static/js/theme.js b/static/js/theme.js
index bfd1025403..fef8238c65 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -217,24 +217,19 @@ function initMermaid( update, attrs ) {
             is_initialized = true;
 
             var graph = serializeGraph( parse );
+            var new_element = document.createElement( 'div' );
+            for( var attr of element.attributes ){
+                new_element.setAttribute( attr.name, attr.value );
+                element.removeAttribute( attr.name );
+            }
+            new_element.classList.add( 'mermaid-container' );
+            new_element.classList.remove( 'mermaid' );
+            element.classList.add( 'mermaid' );
+
             element.innerHTML = graph;
             if( element.offsetParent !== null ){
                 element.classList.add( 'mermaid-render' );
             }
-            var new_element = document.createElement( 'div' );
-            new_element.classList.add( 'mermaid-container' );
-            if( element.classList.contains( 'align-right' ) ){
-                new_element.classList.add( 'align-right' );
-                element.classList.remove( 'align-right' );
-            }
-            if( element.classList.contains( 'align-center' ) ){
-                new_element.classList.add( 'align-center' );
-                element.classList.remove( 'align-center' );
-            }
-            if( element.classList.contains( 'align-left' ) ){
-                new_element.classList.add( 'align-left' );
-                element.classList.remove( 'align-left' );
-            }
             new_element.innerHTML = '<div class="mermaid-code">' + graph + '</div>' + element.outerHTML;
             element.parentNode.replaceChild( new_element, element );
         });
@@ -314,7 +309,7 @@ function initMermaid( update, attrs ) {
             postRenderCallback: function( id ){
                 // zoom for Mermaid
                 // https://github.com/mermaid-js/mermaid/issues/1860#issuecomment-1345440607
-                var svgs = d3.selectAll( 'body:not(.print) .mermaid.zoomable > #' + id );
+                var svgs = d3.selectAll( 'body:not(.print) .mermaid-container.zoomable > .mermaid > #' + id );
                 svgs.each( function(){
                     var parent = this.parentElement;
                     // we need to copy the maxWidth, otherwise our reset button will not align in the upper right