diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index b4ed48cba..450239eff 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 7ca6283e2..6c5fd56e5 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 93660ee66..0e1f8c3db 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 d404e822b..9dacc755b 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 (
`;
-
// 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 1b6f72113..bab87a15c 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 91b67fd2b..fd20f7535 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -575,6 +575,9 @@ export const arrayToMap = (
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 = (name: EVENT, nativeEvent: T) => {
return new CustomEvent(name, {
detail: {