Merge pull request #51 from interledger/am/safari-mermaid

fix: mermaid not respecting <br> in safari

Author: JonathanMatthey

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interledger/docs-design-system",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "type": "module",
   "description": "Shared styles and components used across all Interledger Starlight documentation sites",
   "exports": {

src/components/Mermaid.astro

@@ -24,5 +24,26 @@ const { graph, hasBorder = false } = Astro.props;
 
 <script>
   import mermaid from "/node_modules/mermaid/dist/mermaid.esm.min.mjs";
-  mermaid.initialize({ startOnLoad: true });
+  mermaid.initialize({ startOnLoad: false });
+
+  const mermaidElements = document.querySelectorAll("pre.mermaid");
+
+  function unescapeHTML(str) {
+    return str
+      .replaceAll("&gt;", ">")
+      .replaceAll("&lt;", "<")
+      .replaceAll("&amp;", "&");
+  }
+
+  async function drawDiagram(mermaidElement) {
+    let graphDefinition = mermaidElement.innerHTML;
+    graphDefinition = unescapeHTML(graphDefinition);
+    const id = `graphDiv${Math.floor(Math.random() * 10000)}`;
+    const { svg } = await mermaid.render(id, graphDefinition);
+    mermaidElement.innerHTML = svg;
+  }
+
+  for (let mermaidElement of mermaidElements) {
+    await drawDiagram(mermaidElement);
+  }
 </script>