diff --git a/assets/packs/mermaid/main.js b/assets/packs/mermaid/main.js index b71a8991..cd1dccf1 100644 --- a/assets/packs/mermaid/main.js +++ b/assets/packs/mermaid/main.js @@ -1,20 +1,23 @@ import mermaid from "mermaid"; import "./main.css"; -mermaid.initialize({ startOnLoad: false }); +mermaid.initialize({ startOnLoad: false, htmlLabels: false }); export function init(ctx, {diagram, caption, download}) { ctx.importCSS("main.css") function render() { mermaid.render("diagram", diagram).then(({ svg, bindFunctions }) => { + // Fix for: https://github.com/mermaid-js/mermaid/issues/1766 + const renderedSvg = svg.replace(/
/gi, "
") + let contents = document.createElement("div"); contents.id = "contents"; ctx.root.appendChild(contents); let figure = document.createElement("figure"); figure.id = "figure"; - figure.innerHTML = svg; + figure.innerHTML = renderedSvg; contents.appendChild(figure); if (caption) { @@ -31,9 +34,9 @@ export function init(ctx, {diagram, caption, download}) { contents.prepend(downloadButton); contents.querySelector("#download").addEventListener("click", (event) => { - var binaryData = []; - binaryData.push(svg); - const downloadBlob = URL.createObjectURL(new Blob(binaryData, {type: "image/svg+xml"})); + var downloadData = []; + downloadData.push(renderedSvg); + const downloadBlob = URL.createObjectURL(new Blob(downloadData, {type: "image/svg+xml"})); const downloadLink = document.createElement("a"); downloadLink.href = downloadBlob;