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,