From dfbb692b15a6207ed4ff445de49ee69a2fcaf2a3 Mon Sep 17 00:00:00 2001
From: Le Tan <tamlokveer@gmail.com>
Date: Fri, 16 Mar 2018 21:38:25 +0800
Subject: [PATCH] flowchart/mermaid: remove the surrounding pre

---
 src/resources/markdown_template.js               | 9 ++++-----
 src/resources/themes/v_moonlight/v_moonlight.css | 8 --------
 src/resources/themes/v_pure/v_pure.css           | 8 --------
 src/resources/themes/v_white/v_white.css         | 8 --------
 src/vnote.cpp                                    | 2 ++
 5 files changed, 6 insertions(+), 29 deletions(-)

diff --git a/src/resources/markdown_template.js b/src/resources/markdown_template.js
index 0e4fc583..dd5fc760 100644
--- a/src/resources/markdown_template.js
+++ b/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;
 };
 
diff --git a/src/resources/themes/v_moonlight/v_moonlight.css b/src/resources/themes/v_moonlight/v_moonlight.css
index 85679a22..9728915a 100644
--- a/src/resources/themes/v_moonlight/v_moonlight.css
+++ b/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;
 }
diff --git a/src/resources/themes/v_pure/v_pure.css b/src/resources/themes/v_pure/v_pure.css
index be22891a..e4f9ce2b 100644
--- a/src/resources/themes/v_pure/v_pure.css
+++ b/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;
 }
diff --git a/src/resources/themes/v_white/v_white.css b/src/resources/themes/v_white/v_white.css
index 7bc81fb1..f49d89c1 100644
--- a/src/resources/themes/v_white/v_white.css
+++ b/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;
 }
diff --git a/src/vnote.cpp b/src/vnote.cpp
index 204be5cf..c41b649c 100644
--- a/src/vnote.cpp
+++ b/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