flowchart/mermaid: remove the surrounding pre

src/resources/markdown_template.js

@@ -536,8 +536,7 @@ var renderMermaidOne = function(code) {
     graphDiv.classList.add(VMermaidDivClass);
     graphDiv.innerHTML = graph;
     var preNode = code.parentNode;
-    preNode.classList.add(VMermaidDivClass);
-    preNode.replaceChild(graphDiv, code);
+    preNode.parentNode.replaceChild(graphDiv, preNode);
     return true;
 };
 
@@ -582,19 +581,19 @@ var renderFlowchartOne = function(code) {
     graphDiv.id = 'flowchart-diagram-' + flowchartIdx;
     graphDiv.classList.add(VFlowchartDivClass);
     var preNode = code.parentNode;
-    preNode.replaceChild(graphDiv, code);
+    var preParentNode = preNode.parentNode;
+    preParentNode.replaceChild(graphDiv, preNode);
 
     // Draw on it after adding it to page.
     try {
         graph.drawSVG(graphDiv.id);
     } catch (err) {
         content.setLog("err: " + err);
-        preNode.replaceChild(code, graphDiv);
+        preParentNode.replaceChild(preNode, graphDiv);
         delete graphDiv;
         return false;
     }
 
-    preNode.classList.add(VMermaidDivClass);
     return true;
 };
 

src/resources/themes/v_moonlight/v_moonlight.css

@@ -169,20 +169,12 @@ div.mermaid-diagram {
     color: #6C6C6C;
 }
 
-pre.mermaid-diagram {
-    overflow-y: hidden;
-}
-
 div.flowchart-diagram {
     overflow-y: hidden;
     background: #B0BEC5;
     color: #6C6C6C;
 }
 
-pre.flowchart-diagram {
-    overflow-y: hidden;
-}
-
 .img-package {
     text-align: center;
 }

src/resources/themes/v_pure/v_pure.css

@@ -173,18 +173,10 @@ div.mermaid-diagram {
     overflow-y: hidden;
 }
 
-pre.mermaid-diagram {
-    overflow-y: hidden;
-}
-
 div.flowchart-diagram {
     overflow-y: hidden;
 }
 
-pre.flowchart-diagram {
-    overflow-y: hidden;
-}
-
 .img-package {
     text-align: center;
 }

src/resources/themes/v_white/v_white.css

@@ -172,18 +172,10 @@ div.mermaid-diagram {
     overflow-y: hidden;
 }
 
-pre.mermaid-diagram {
-    overflow-y: hidden;
-}
-
 div.flowchart-diagram {
     overflow-y: hidden;
 }
 
-pre.flowchart-diagram {
-    overflow-y: hidden;
-}
-
 .img-package {
     text-align: center;
 }

src/vnote.cpp

@@ -126,6 +126,8 @@ QString VNote::generateHtmlTemplate(const QString &p_renderBg,
                     "pre code { white-space: pre-wrap !important; "
                                "word-break: break-all !important; }\n"
                     "code { word-break: break-all !important; }\n"
+                    "div.flowchart-diagram { overflow: hidden !important; }\n"
+                    "div.mermaid-diagram { overflow: hidden !important; }\n"
                     "a { word-break: break-all !important; }\n";
         if (!g_config->getEnableImageConstraint()) {
             // Constain the image width by force in PDF, otherwise, the PDF will