From da94eb1284b9f49835ef0a4e9cd8a34177d2a378 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Thu, 28 Apr 2022 20:19:41 +0530
Subject: [PATCH] fix: use excalidraw asset path in fonts when exporting to svg
 (#5065)

* fix: use excalidraw asset path in fonts when exporting

* fix

* fix

* introduce env variables and determine asset path correctly

* fix snaps

* use env vars to determine pkg name and version

* update docs

* quotes
---
 src/packages/excalidraw/CHANGELOG.md  |  1 +
 src/packages/excalidraw/env.js        |  8 ++++++--
 src/packages/excalidraw/publicPath.js |  3 +--
 src/scene/export.ts                   | 18 +++++++++++++++---
 src/tests/scene/export.test.ts        |  1 +
 src/utils.ts                          |  3 +++
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index b4ed48cb..450239ef 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -23,6 +23,7 @@ Please add the latest change on the top under the correct section.
 
 #### Fixes
 
+- Use `window.EXCALIDRAW_ASSET_PATH` for fonts when exporting to svg [#5065](https://github.com/excalidraw/excalidraw/pull/5065).
 - Library menu now properly rerenders if open when library is updated using `updateScene({ libraryItems })` [#4995](https://github.com/excalidraw/excalidraw/pull/4995).
 
 #### Refactor
diff --git a/src/packages/excalidraw/env.js b/src/packages/excalidraw/env.js
index 7ca6283e..6c5fd56e 100644
--- a/src/packages/excalidraw/env.js
+++ b/src/packages/excalidraw/env.js
@@ -1,14 +1,18 @@
 const dotenv = require("dotenv");
 const { readFileSync } = require("fs");
-
+const pkg = require("./package.json");
 const parseEnvVariables = (filepath) => {
-  return Object.entries(dotenv.parse(readFileSync(filepath))).reduce(
+  const envVars = Object.entries(dotenv.parse(readFileSync(filepath))).reduce(
     (env, [key, value]) => {
       env[key] = JSON.stringify(value);
       return env;
     },
     {},
   );
+  envVars.PKG_NAME = JSON.stringify(pkg.name);
+  envVars.PKG_VERSION = JSON.stringify(pkg.version);
+  envVars.IS_EXCALIDRAW_NPM_PACKAGE = JSON.stringify(true);
+  return envVars;
 };
 
 module.exports = { parseEnvVariables };
diff --git a/src/packages/excalidraw/publicPath.js b/src/packages/excalidraw/publicPath.js
index 93660ee6..0e1f8c3d 100644
--- a/src/packages/excalidraw/publicPath.js
+++ b/src/packages/excalidraw/publicPath.js
@@ -1,9 +1,8 @@
 import { ENV } from "../../constants";
-import pkg from "./package.json";
 if (process.env.NODE_ENV !== ENV.TEST) {
   /* eslint-disable */
   /* global __webpack_public_path__:writable */
   __webpack_public_path__ =
     window.EXCALIDRAW_ASSET_PATH ||
-    `https://unpkg.com/${pkg.name}@${pkg.version}/dist/`;
+    `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}/dist/`;
 }
diff --git a/src/scene/export.ts b/src/scene/export.ts
index d404e822..9dacc755 100644
--- a/src/scene/export.ts
+++ b/src/scene/export.ts
@@ -115,6 +115,19 @@ export const exportToSvg = async (
     svgRoot.setAttribute("filter", THEME_FILTER);
   }
 
+  let assetPath = "https://excalidraw.com/";
+
+  // Asset path needs to be determined only when using package
+  if (process.env.IS_EXCALIDRAW_NPM_PACKAGE) {
+    assetPath =
+      window.EXCALIDRAW_ASSET_PATH ||
+      `https://unpkg.com/${process.env.PKG_NAME}@${process.env.PKG_VERSION}`;
+
+    if (assetPath?.startsWith("/")) {
+      assetPath = assetPath.replace("/", `${window.location.origin}/`);
+    }
+    assetPath = `${assetPath}/dist/excalidraw-assets/`;
+  }
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}
   ${metadata}
@@ -122,16 +135,15 @@ export const exportToSvg = async (
     <style>
       @font-face {
         font-family: "Virgil";
-        src: url("https://excalidraw.com/Virgil.woff2");
+        src: url("${assetPath}Virgil.woff2");
       }
       @font-face {
         font-family: "Cascadia";
-        src: url("https://excalidraw.com/Cascadia.woff2");
+        src: url("${assetPath}Cascadia.woff2");
       }
     </style>
   </defs>
   `;
-
   // render background rect
   if (appState.exportBackground && viewBackgroundColor) {
     const rect = svgRoot.ownerDocument!.createElementNS(SVG_NS, "rect");
diff --git a/src/tests/scene/export.test.ts b/src/tests/scene/export.test.ts
index 1b6f7211..bab87a15 100644
--- a/src/tests/scene/export.test.ts
+++ b/src/tests/scene/export.test.ts
@@ -7,6 +7,7 @@ import {
 } from "../fixtures/elementFixture";
 
 describe("exportToSvg", () => {
+  window.EXCALIDRAW_ASSET_PATH = "/";
   const ELEMENT_HEIGHT = 100;
   const ELEMENT_WIDTH = 100;
   const ELEMENTS = [
diff --git a/src/utils.ts b/src/utils.ts
index 91b67fd2..fd20f753 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -575,6 +575,9 @@ export const arrayToMap = <T extends { id: string } | string>(
 export const isTestEnv = () =>
   typeof process !== "undefined" && process.env?.NODE_ENV === "test";
 
+export const isProdEnv = () =>
+  typeof process !== "undefined" && process.env?.NODE_ENV === "production";
+
 export const wrapEvent = <T extends Event>(name: EVENT, nativeEvent: T) => {
   return new CustomEvent(name, {
     detail: {