Merge pull request #70 from ileler/master

Fix the problem that the use of br tag causes image export failure

src/components/Links.svelte

@@ -8,8 +8,10 @@
 
   onMount(async () => {});
 
+  const fixBrTag = (svg) => svg.replaceAll('<br>', '<br/>');
+
   export const onDownloadPNG = (event) => {
-    var canvas = document.createElement('canvas');
+    const canvas = document.createElement('canvas');
     const container = document.getElementById('container');
     const svg = document.querySelector('#container svg');
     const box = svg.getBoundingClientRect();
@@ -28,7 +30,7 @@
     context.fillStyle = 'white';
     context.fillRect(0, 0, canvas.width, canvas.height);
 
-    var image = new Image();
+    const image = new Image();
     image.onload = function () {
       context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
@@ -40,9 +42,9 @@
       a.click();
     };
 
-    console.warn('SVG', container.innerHTML);
+    console.warn('SVG', fixBrTag(container.innerHTML));
     image.src = `data:image/svg+xml;base64,${Base64.encode(
-      container.innerHTML
+      fixBrTag(container.innerHTML)
     )}`;
     event.stopPropagation();
     event.preventDefault();
@@ -54,7 +56,7 @@
     console.log('event', event.target);
     const container = document.getElementById('container');
     event.target.href = `data:image/svg+xml;base64,${Base64.encode(
-      container.innerHTML
+      fixBrTag(container.innerHTML)
     )}`;
     event.target.download = `mermaid-diagram-${moment().format(
       'YYYYMMDDHHmmss'