From 6a29104d0913ab01bbfb11cdc7cd57c1547369c5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 15 Mar 2023 22:51:40 -0400
Subject: [PATCH] fix: Mermaid diagrams flash when editing and multiple in
 document

---
 shared/editor/plugins/Mermaid.ts | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/shared/editor/plugins/Mermaid.ts b/shared/editor/plugins/Mermaid.ts
index 7bd4bbad5..24c98184a 100644
--- a/shared/editor/plugins/Mermaid.ts
+++ b/shared/editor/plugins/Mermaid.ts
@@ -49,12 +49,17 @@ function getNewState({
     const diagramDecoration = Decoration.widget(
       block.pos + block.node.nodeSize,
       () => {
-        const diagramWrapper = document.createElement("div");
-        diagramWrapper.classList.add("mermaid-diagram-wrapper");
+        const elementId = "mermaid-diagram-wrapper-" + diagramId;
+        const element =
+          document.getElementById(elementId) || document.createElement("div");
+        element.id = elementId;
+        element.classList.add("mermaid-diagram-wrapper");
 
         if (pluginState.diagramVisibility[diagramId] === false) {
-          diagramWrapper.classList.add("diagram-hidden");
-          return diagramWrapper;
+          element.classList.add("diagram-hidden");
+          return element;
+        } else {
+          element.classList.remove("diagram-hidden");
         }
 
         import("mermaid").then((module) => {
@@ -76,7 +81,7 @@ function getNewState({
               "mermaid-diagram-" + diagramId,
               block.node.textContent,
               (svgCode) => {
-                diagramWrapper.innerHTML = svgCode;
+                element.innerHTML = svgCode;
               }
             );
           } catch (error) {
@@ -85,12 +90,12 @@ function getNewState({
               "d" + "mermaid-diagram-" + diagramId
             );
             if (errorNode) {
-              diagramWrapper.appendChild(errorNode);
+              element.appendChild(errorNode);
             }
           }
         });
 
-        return diagramWrapper;
+        return element;
       },
       {
         diagramId,