removed unwanted console

.vscode/settings.json

@@ -9,7 +9,6 @@
     "corg",
     "cssnano",
     "esserializer",
-    "fontawesome",
     "fsegurai",
     "gantt",
     "gitgraph",
@@ -31,7 +30,6 @@
     "Stackable",
     "tailwindcss",
     "uparrow",
-    "webfonts",
     "zenuml"
   ],
   "vitest.commandLine": "pnpm test:unit",

package.json

@@ -115,7 +115,7 @@
     ]
   },
   "engines": {
-    "node": ">=20.19.0"
+    "node": ">=20.19.1"
   },
   "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "pnpm": {

src/lib/components/Actions.svelte

@@ -19,125 +19,131 @@
   import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
   import WidthIcon from '~icons/material-symbols/width-rounded';
 
-  const fontAwesomeURLs = (() => {
-    const baseUrl = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}`;
-    return {
-      css: `${baseUrl}/css/all.min.css`,
-      woff2: `${baseUrl}/webfonts/fa-solid-900.woff2`
-    };
-  })();
+  const FONT_AWESOME_URL = `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/${FAVersion}`;
 
   type Exporter = (context: CanvasRenderingContext2D, image: HTMLImageElement) => () => void;
 
   const getFileName = (extension: string) =>
     `mermaid-diagram-${dayjs().format('YYYY-MM-DD-HHmmss')}.${extension}`;
 
-  const getSvgElement = async () => {
+  const getSvgElement = () => {
+    const svgElement = document.querySelector('#container svg')?.cloneNode(true) as HTMLElement;
+    svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    return svgElement;
+  };
+
+  /**
+   * Converts a Blob to base64 string
+   */
+  export function blobToBase64(blob: Blob): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.addEventListener('load', () => resolve(reader.result as string));
+      reader.addEventListener('error', () => reject(new Error('Failed to convert blob to base64')));
+      reader.readAsDataURL(blob);
+    });
+  }
+
+  const getBase64SVG = async (
+    svg?: HTMLElement,
+    width?: number,
+    height?: number
+  ): Promise<string> => {
+    if (svg) {
+      // Prevents the SVG size of the interface from being changed
+      svg = svg.cloneNode(true) as HTMLElement;
+    }
+    height && svg?.setAttribute('height', `${height}px`);
+    width && svg?.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
+
+    if (!svg) {
+      svg = getSvgElement();
+    }
+
     try {
-      $inputStateStore.panZoom = false;
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      await waitForRender();
-      const svgElement = document.querySelector('#container svg');
-      if (!svgElement) {
-        throw new Error('svg not found');
+      // Fetch both regular and brands Font Awesome CSS and font files
+      const [fontAwesomeCSS, solidFontBlob, brandsFontBlob, regularFontBlob] = await Promise.all([
+        fetch(`${FONT_AWESOME_URL}/css/all.min.css`).then((response) => response.text()),
+        fetch(`${FONT_AWESOME_URL}/webfonts/fa-solid-900.woff2`)
+          .then((res) => res.blob())
+          .catch(() => new Blob()),
+        fetch(`${FONT_AWESOME_URL}/webfonts/fa-brands-400.woff2`)
+          .then((res) => res.blob())
+          .catch(() => new Blob()),
+        fetch(`${FONT_AWESOME_URL}/webfonts/fa-regular-400.woff2`)
+          .then((res) => res.blob())
+          .catch(() => new Blob())
+      ]);
+
+      // Convert font blobs to base64
+      const [solidFontBase64, brandsFontBase64, regularFontBase64] = await Promise.all([
+        blobToBase64(solidFontBlob).then((data) => data.split(',')[1]),
+        blobToBase64(brandsFontBlob).then((data) => data.split(',')[1]),
+        blobToBase64(regularFontBlob).then((data) => data.split(',')[1])
+      ]);
+
+      // Create font-face definitions for all Font Awesome types
+      const fontFaceCSS = `
+      @font-face {
+        font-family: 'Font Awesome 6 Free';
+        font-style: normal;
+        font-weight: 900;
+        src: url(data:font/woff2;base64,${solidFontBase64}) format('woff2');
       }
-      svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
-      return {
-        svg: svgElement.cloneNode(true) as HTMLElement,
-        box: svgElement.querySelector('g')!.getBoundingClientRect()
-      };
-    } finally {
-      setTimeout(() => {
-        $inputStateStore.panZoom = true;
-      }, 10000);
+      
+      @font-face {
+        font-family: 'Font Awesome 6 Free';
+        font-style: normal;
+        font-weight: 400;
+        src: url(data:font/woff2;base64,${regularFontBase64}) format('woff2');
+      }
+      
+      @font-face {
+        font-family: 'Font Awesome 6 Brands';
+        font-style: normal;
+        font-weight: 400;
+        src: url(data:font/woff2;base64,${brandsFontBase64}) format('woff2');
+      }
+      
+      .fa, .fas {
+        font-family: 'Font Awesome 6 Free';
+        font-weight: 900;
+      }
+      
+      .far {
+        font-family: 'Font Awesome 6 Free';
+        font-weight: 400;
+      }
+      
+      .fab {
+        font-family: 'Font Awesome 6 Brands';
+        font-weight: 400;
+      }
+      
+      .fa, .fas, .far, .fab {
+        font-size: 16px;
+        width: 16px;
+        fill: currentColor;
+      }
+    `;
+
+      // Fix self-closing tags for XML compatibility
+      const svgString = svg.outerHTML
+        .replaceAll('<br>', '<br/>')
+        .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`)
+        .replace('<style>', `<style>${fontFaceCSS} ${fontAwesomeCSS}`);
+
+      return toBase64(svgString);
+    } catch {
+      // Fallback to simple SVG if font loading fails
+      const svgString = svg.outerHTML
+        .replaceAll('<br>', '<br/>')
+        .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
+
+      return toBase64(svgString);
     }
   };
 
-  const injectFontAwesome = async ({
-    svgString,
-    fontAwesomeEmbedMode
-  }: {
-    svgString: string;
-    fontAwesomeEmbedMode: 'raw' | 'url';
-  }) => {
-    if (fontAwesomeEmbedMode === 'url') {
-      return `<?xml version="1.0" encoding="UTF-8"?>
-<?xml-stylesheet href="${fontAwesomeURLs.css}" type="text/css"?>
-${svgString}`;
-    }
-
-    const [fontAwesomeCSS, fontBlob] = await Promise.all([
-      fetch(fontAwesomeURLs.css).then((response) => response.text()),
-      fetch(fontAwesomeURLs.woff2).then((res) => res.blob())
-    ]);
-    const reader = new FileReader();
-    const fontBase64 = await new Promise<string>((resolve) => {
-      reader.onloadend = () => {
-        const base64 = reader.result as string;
-        // Remove the data URL prefix (data:application/octet-stream;base64,)
-        resolve(base64.split(',')[1]);
-      };
-      reader.readAsDataURL(fontBlob);
-    });
-    const styleString = `
-@font-face {
-  font-family: 'Font Awesome 6 Free';
-  font-style: normal;
-  font-weight: 900;
-  src: url(data:font/woff2;base64,${fontBase64}) format('woff2');
-}
-
-.fa {
-  font-family: 'Font Awesome 6 Free';
-  font-weight: 900;
-  // TODO: Make this dynamic from config
-  font-size: 16px;
-  width: 16px;
-  fill: black;
-}
-
-${fontAwesomeCSS}
-`;
-    return svgString.replace('<style>', `<style>${styleString}`);
-  };
-
-  const getBase64SVG = async ({
-    svg,
-    box,
-    width,
-    height,
-    embedFontAwesome
-  }: {
-    svg?: HTMLElement;
-    box?: DOMRect;
-    width?: number;
-    height?: number;
-    embedFontAwesome?: boolean;
-  } = {}): Promise<string> => {
-    if (!svg || !box) {
-      ({ svg, box } = await getSvgElement());
-    }
-
-    console.log(box);
-    // Prevents the SVG size of the interface from being changed
-    // svg = svg.cloneNode(true) as HTMLElement;
-
-    height && svg.setAttribute('height', `${height}px`);
-    width && svg.setAttribute('width', `${width}px`); // Workaround https://stackoverflow.com/questions/28690643/firefox-error-rendering-an-svg-image-to-html5-canvas-with-drawimage
-    svg.setAttribute('viewBox', `0 0 ${box.width} ${box.height}`);
-    const svgString = svg.outerHTML
-      .replaceAll('<br>', '<br/>')
-      .replaceAll(/<img([^>]*)>/g, (m, g: string) => `<img ${g} />`);
-
-    const svgStringWithFontAwesome = await injectFontAwesome({
-      svgString,
-      fontAwesomeEmbedMode: embedFontAwesome ? 'raw' : 'url'
-    });
-
-    console.log(svgStringWithFontAwesome);
-    return toBase64(svgStringWithFontAwesome);
-  };
-
   const simulateDownload = (download: string, href: string): void => {
     const a = document.createElement('a');
     a.download = download;
@@ -147,10 +153,16 @@ ${fontAwesomeCSS}
   };
 
   const exportImage = async (event: Event, exporter: Exporter) => {
-    event.stopPropagation();
-    event.preventDefault();
+    $inputStateStore.panZoom = false;
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await waitForRender();
     const canvas = document.createElement('canvas');
-    const { svg, box } = await getSvgElement();
+    const svg = document.querySelector<HTMLElement>('#container svg');
+    if (!svg) {
+      throw new Error('svg not found');
+    }
+
+    const box = svg.getBoundingClientRect();
 
     if (imageSizeMode === 'width') {
       const ratio = box.height / box.width;
@@ -177,14 +189,18 @@ ${fontAwesomeCSS}
     const image = new Image();
     image.addEventListener('load', () => {
       exporter(context, image)();
+      $inputStateStore.panZoom = true;
     });
-    image.src = `data:image/svg+xml;base64,${await getBase64SVG({ svg, box, height: canvas.height, width: canvas.width, embedFontAwesome: true })}`;
+    image.src = `data:image/svg+xml;base64,${await getBase64SVG(svg, canvas.width, canvas.height)}`;
     // Fallback to set panZoom to true after 2 seconds
     // This is a workaround for the case when the image is not loaded
-    // setTimeout(() => {
-    //   if (!$inputStateStore.panZoom) {
-    //   }
-    // }, 2000);
+    setTimeout(() => {
+      if (!$inputStateStore.panZoom) {
+        $inputStateStore.panZoom = true;
+      }
+    }, 2000);
+    event.stopPropagation();
+    event.preventDefault();
   };
 
   const downloadImage: Exporter = (context, image) => {