Merge pull request #1479 from chewnoill/chewy/cleanup-after-failed-re…

…nder cleanup helper dom elements before rendering
mermaid-js · Jun 19, 2020 · e37c7e5 · e37c7e5
2 parents a4d96b0 + d3d15b7
commit e37c7e5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/cypress/integration/other/rerender.spec.js b/cypress/integration/other/rerender.spec.js
@@ -1,5 +1,11 @@
 /* eslint-env jest */
 describe('Rerendering', () => {
+    it('should be able to render after an error has occured', () => {
+      const url = 'http://localhost:9000/render-after-error.html';
+      cy.viewport(1440, 1024);
+      cy.visit(url);
+      cy.get('#graphDiv').should('exist');
+    });
 
     it('should be able to render and rerender a graph via API', () => {
       const url = 'http://localhost:9000/rerender.html';

diff --git a/cypress/platform/render-after-error.html b/cypress/platform/render-after-error.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>Mermaid Quick Test Page</title>
+        <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
+    </head>
+    <body>
+        <div id="graph">
+        </div>
+
+        <script src="./mermaid.js"></script>
+        <script>
+
+         mermaid.init({ startOnLoad: false });
+         mermaid.mermaidAPI.initialize();
+
+         try{
+             mermaid.mermaidAPI.render("graphDiv",
+                                       `>`);
+         } catch(e){}
+
+         mermaid.mermaidAPI.render("graphDiv",
+                                   `graph LR\n a --> b`, html => {
+                                      document.getElementById('graph').innerHTML=html;
+         });
+
+        </script>
+
+    </body>
+</html>
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
@@ -724,7 +724,7 @@ const render = function(id, _txt, cb, container) {
     }
     const element = document.querySelector('#' + 'd' + id);
     if (element) {
-      element.innerHTML = '';
+      element.remove();
     }
 
     select('body')