Fix lint

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>

excalidraw-app/App.tsx

@@ -126,6 +126,8 @@ import DebugCanvas, {
   loadSavedDebugState,
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
+import type { SaveWarningRef } from "./components/SaveWarning";
+import { SaveWarning } from "./components/SaveWarning";
 
 polyfill();
 
@@ -331,6 +333,8 @@ const ExcalidrawWrapper = () => {
 
   const [langCode, setLangCode] = useAppLangCode();
 
+  const activityRef = useRef<SaveWarningRef | null>(null);
+
   // initial state
   // ---------------------------------------------------------------------------
 
@@ -615,6 +619,8 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
+    activityRef.current?.activity();
+
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -856,6 +862,7 @@ const ExcalidrawWrapper = () => {
           setTheme={(theme) => setAppTheme(theme)}
           refresh={() => forceRefresh((prev) => !prev)}
         />
+        <SaveWarning ref={activityRef} />
         <AppWelcomeScreen
           onCollabDialogOpen={onCollabDialogOpen}
           isCollabEnabled={!isCollabDisabled}

excalidraw-app/components/SaveWarning.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { t } from "../../packages/excalidraw/i18n";
+import { getShortcutKey } from "../../packages/excalidraw/utils";
+
+export type SaveWarningRef = {
+  activity: () => Promise<void>;
+};
+
+export const SaveWarning = forwardRef<SaveWarningRef, {}>((props, ref) => {
+  const dialogRef = useRef<HTMLDivElement | null>(null);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useImperativeHandle(ref, () => ({
+    /**
+     * Call this API method via the ref to hide warning message
+     * and start an idle timer again.
+     */
+    activity: async () => {
+      if (timerRef.current != null) {
+        clearTimeout(timerRef.current);
+        dialogRef.current?.classList.remove("animate");
+      }
+
+      timerRef.current = setTimeout(() => {
+        timerRef.current = null;
+        dialogRef.current?.classList.add("animate");
+      }, 5000);
+    },
+  }));
+
+  return (
+    <div ref={dialogRef} className="alert-save">
+      <div className="dialog">
+        {t("alerts.saveYourContent", {
+          shortcut: getShortcutKey("CtrlOrCmd + S"),
+        })}
+      </div>
+    </div>
+  );
+});

excalidraw-app/index.html

@@ -130,6 +130,15 @@
     </script>
     <% } %>
 
+    <!-- For Nunito only preload the latin range, which should be good enough for now -->
+    <link
+      rel="preload"
+      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+
     <!-- Register Assistant as the UI font, before the scene inits -->
     <link
       rel="stylesheet"

excalidraw-app/index.scss

@@ -18,6 +18,43 @@
     margin-inline-start: auto;
   }
 
+  .alert-save {
+    position: absolute;
+    z-index: 10;
+    left: 0;
+    right: 0;
+    bottom: 10vh;
+    margin-inline: auto;
+    width: fit-content;
+
+    opacity: 0;
+    transition: all 0s;
+
+    &.animate {
+      opacity: 1;
+      transition: all 0.2s ease-in;
+    }
+
+    .dialog {
+      margin-inline: 10px;
+      padding: 1rem;
+      padding-inline: 1.25rem;
+
+      resize: none;
+      white-space: pre-wrap;
+      box-sizing: border-box;
+
+      background-color: var(--color-warning);
+      border-radius: var(--border-radius-md);
+      border: 1px solid var(--dialog-border-color);
+
+      font-size: 0.875rem;
+      text-align: center;
+      line-height: 1.5;
+      color: var(--color-text-warning);
+    }
+  }
+
   .encrypted-icon {
     border-radius: var(--space-factor);
     color: var(--color-primary);

excalidraw-app/vite.config.mts

@@ -48,8 +48,6 @@ export default defineConfig({
       },
     },
     sourcemap: true,
-    // don't auto-inline small assets (i.e. fonts hosted on CDN)
-    assetsInlineLimit: 0,
   },
   plugins: [
     woff2BrowserPlugin(),

packages/excalidraw/CHANGELOG.md

@@ -15,8 +15,6 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Prefer user defined coordinates and dimensions when creating a frame using [`convertToExcalidrawElements`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements) [#8517](https://github.com/excalidraw/excalidraw/pull/8517)
-
 - `props.initialData` can now be a function that returns `ExcalidrawInitialDataState` or `Promise<ExcalidrawInitialDataState>`. [#8107](https://github.com/excalidraw/excalidraw/pull/8135)
 
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)

packages/excalidraw/css/variables.module.scss

@@ -190,7 +190,7 @@
 }
 
 $theme-filter: "invert(93%) hue-rotate(180deg)";
-$right-sidebar-width: "19rem";
+$right-sidebar-width: "302px";
 
 :export {
   themeFilter: unquote($theme-filter);

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -6,11 +6,11 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "#d8f5a2",
   "boundElements": [
     {
-      "id": "id47",
+      "id": "id45",
       "type": "arrow",
     },
     {
-      "id": "id48",
+      "id": "id46",
       "type": "arrow",
     },
   ],
@@ -47,7 +47,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id48",
+      "id": "id46",
       "type": "arrow",
     },
   ],
@@ -118,7 +118,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id49",
+    "elementId": "id47",
     "fixedPoint": null,
     "focus": -0.08139534883720931,
     "gap": 1,
@@ -200,7 +200,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing s
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id47",
+      "id": "id45",
       "type": "arrow",
     },
   ],
@@ -238,7 +238,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id50",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -284,7 +284,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id50",
+      "id": "id48",
       "type": "arrow",
     },
   ],
@@ -329,7 +329,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id51",
+      "id": "id49",
       "type": "text",
     },
   ],
@@ -392,7 +392,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id50",
+  "containerId": "id48",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -433,7 +433,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id40",
+      "id": "id38",
       "type": "text",
     },
   ],
@@ -441,7 +441,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id42",
+    "elementId": "id40",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -472,7 +472,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id41",
+    "elementId": "id39",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -496,7 +496,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id39",
+  "containerId": "id37",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -537,7 +537,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id39",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -574,7 +574,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id39",
+      "id": "id37",
       "type": "arrow",
     },
   ],
@@ -611,7 +611,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id44",
+      "id": "id42",
       "type": "text",
     },
   ],
@@ -619,7 +619,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "elbowed": false,
   "endArrowhead": "arrow",
   "endBinding": {
-    "elementId": "id46",
+    "elementId": "id44",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -650,7 +650,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "seed": Any<Number>,
   "startArrowhead": null,
   "startBinding": {
-    "elementId": "id45",
+    "elementId": "id43",
     "fixedPoint": null,
     "focus": 0,
     "gap": 1,
@@ -674,7 +674,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "autoResize": true,
   "backgroundColor": "transparent",
   "boundElements": null,
-  "containerId": "id43",
+  "containerId": "id41",
   "customData": undefined,
   "fillStyle": "solid",
   "fontFamily": 5,
@@ -716,7 +716,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id41",
       "type": "arrow",
     },
   ],
@@ -762,7 +762,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id43",
+      "id": "id41",
       "type": "arrow",
     },
   ],
@@ -1303,7 +1303,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id56",
+      "id": "id54",
       "type": "text",
     },
     {
@@ -1346,7 +1346,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id57",
+      "id": "id55",
       "type": "text",
     },
   ],
@@ -1385,7 +1385,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id58",
+      "id": "id56",
       "type": "text",
     },
     {
@@ -1428,7 +1428,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id59",
+      "id": "id57",
       "type": "text",
     },
     {
@@ -1475,7 +1475,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id60",
+      "id": "id58",
       "type": "text",
     },
   ],
@@ -1540,7 +1540,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "backgroundColor": "transparent",
   "boundElements": [
     {
-      "id": "id61",
+      "id": "id59",
       "type": "text",
     },
   ],

packages/excalidraw/data/transform.test.ts

@@ -309,32 +309,28 @@ describe("Test Transform", () => {
   });
 
   describe("Test Frames", () => {
-    const elements: ExcalidrawElementSkeleton[] = [
-      {
-        type: "rectangle",
-        x: 10,
-        y: 10,
-        strokeWidth: 2,
-        id: "1",
-      },
-      {
-        type: "diamond",
-        x: 120,
-        y: 20,
-        backgroundColor: "#fff3bf",
-        strokeWidth: 2,
-        label: {
-          text: "HELLO EXCALIDRAW",
-          strokeColor: "#099268",
-          fontSize: 30,
-        },
-        id: "2",
-      },
-    ];
-
     it("should transform frames and update frame ids when regenerated", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
         {
           type: "frame",
           children: ["1", "2"],
@@ -356,9 +352,28 @@ describe("Test Transform", () => {
       });
     });
 
-    it("should consider user defined frame dimensions over calculated when provided", () => {
+    it("should consider max of calculated and frame dimensions when provided", () => {
       const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
+        {
+          type: "rectangle",
+          x: 10,
+          y: 10,
+          strokeWidth: 2,
+          id: "1",
+        },
+        {
+          type: "diamond",
+          x: 120,
+          y: 20,
+          backgroundColor: "#fff3bf",
+          strokeWidth: 2,
+          label: {
+            text: "HELLO EXCALIDRAW",
+            strokeColor: "#099268",
+            fontSize: 30,
+          },
+          id: "2",
+        },
         {
           type: "frame",
           children: ["1", "2"],
@@ -373,27 +388,7 @@ describe("Test Transform", () => {
       );
       const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
       expect(frame.width).toBe(800);
-      expect(frame.height).toBe(100);
+      expect(frame.height).toBe(126);
-    });
-
-    it("should consider user defined frame coordinates calculated when provided", () => {
-      const elementsSkeleton: ExcalidrawElementSkeleton[] = [
-        ...elements,
-        {
-          type: "frame",
-          children: ["1", "2"],
-          name: "My frame",
-          x: 100,
-          y: 300,
-        },
-      ];
-      const excalidrawElements = convertToExcalidrawElements(
-        elementsSkeleton,
-        opts,
-      );
-      const frame = excalidrawElements.find((ele) => ele.type === "frame")!;
-      expect(frame.x).toBe(100);
-      expect(frame.y).toBe(300);
     });
   });
 

packages/excalidraw/data/transform.ts

@@ -46,7 +46,6 @@ import {
   assertNever,
   cloneJSON,
   getFontString,
-  isDevEnv,
   toBrandedType,
 } from "../utils";
 import { getSizeFromPoints } from "../points";
@@ -718,7 +717,7 @@ export const convertToExcalidrawElements = (
   }
 
   // Once all the excalidraw elements are created, we can add frames since we
-  // need to calculate coordinates and dimensions of frame which is possible after all
+  // need to calculate coordinates and dimensions of frame which is possibe after all
   // frame children are processed.
   for (const [id, element] of elementsWithIds) {
     if (element.type !== "frame" && element.type !== "magicframe") {
@@ -765,26 +764,10 @@ export const convertToExcalidrawElements = (
     maxX = maxX + PADDING;
     maxY = maxY + PADDING;
 
-    const frameX = frame?.x || minX;
+    // Take the max of calculated and provided frame dimensions, whichever is higher
-    const frameY = frame?.y || minY;
+    const width = Math.max(frame?.width, maxX - minX);
-    const frameWidth = frame?.width || maxX - minX;
+    const height = Math.max(frame?.height, maxY - minY);
-    const frameHeight = frame?.height || maxY - minY;
+    Object.assign(frame, { x: minX, y: minY, width, height });
-
-    Object.assign(frame, {
-      x: frameX,
-      y: frameY,
-      width: frameWidth,
-      height: frameHeight,
-    });
-    if (
-      isDevEnv() &&
-      element.children.length &&
-      (frame?.x || frame?.y || frame?.width || frame?.height)
-    ) {
-      console.info(
-        "User provided frame attributes are being considered, if you find this inaccurate, please remove any of the attributes - x, y, width and height so frame coordinates and dimensions are calculated automatically",
-      );
-    }
   }
 
   return elementStore.getElements();

packages/excalidraw/fonts/index.ts

@@ -24,14 +24,14 @@ import Cascadia from "./assets/CascadiaCode-Regular.woff2";
 import ComicShanns from "./assets/ComicShanns-Regular.woff2";
 import LiberationSans from "./assets/LiberationSans-Regular.woff2";
 
-import LilitaLatin from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
+import LilitaLatin from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
-import LilitaLatinExt from "./assets/Lilita-Regular-i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
+import LilitaLatinExt from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
 
-import NunitoLatin from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
+import NunitoLatin from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
-import NunitoLatinExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
+import NunitoLatinExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
-import NunitoCyrilic from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
+import NunitoCyrilic from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
-import NunitoCyrilicExt from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
+import NunitoCyrilicExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
-import NunitoVietnamese from "./assets/Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
+import NunitoVietnamese from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
 
 export class Fonts {
   // it's ok to track fonts across multiple instances only once, so let's use

packages/excalidraw/locales/en.json

@@ -230,7 +230,8 @@
     "resetLibrary": "This will clear your library. Are you sure?",
     "removeItemsFromsLibrary": "Delete {{count}} item(s) from library?",
     "invalidEncryptionKey": "Encryption key must be of 22 characters. Live collaboration is disabled.",
-    "collabOfflineWarning": "No internet connection available.\nYour changes will not be saved!"
+    "collabOfflineWarning": "No internet connection available.\nYour changes will not be saved!",
+    "saveYourContent": "Don't forget to save your content ({{shortcut}})!"
   },
   "errors": {
     "unsupportedFileType": "Unsupported file type.",

packages/utils/package.json

@@ -68,6 +68,7 @@
     "css-loader": "6.7.1",
     "file-loader": "6.2.0",
     "fonteditor-core": "2.4.0",
+    "node-fetch": "3.3.2",
     "sass-loader": "13.0.2",
     "ts-loader": "9.3.1",
     "typescript": "4.9.4",

scripts/buildPackage.js

@@ -1,6 +1,7 @@
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
 const { externalGlobalPlugin } = require("esbuild-plugin-external-global");
+const { woff2BrowserPlugin } = require("./woff2/woff2-esbuild-plugins");
 
 // Will be used later for treeshaking
 //const fs = require("fs");
@@ -44,15 +45,13 @@ const browserConfig = {
   format: "esm",
   plugins: [
     sassPlugin(),
+    woff2BrowserPlugin(),
     externalGlobalPlugin({
       react: "React",
       "react-dom": "ReactDOM",
     }),
   ],
   splitting: true,
-  loader: {
-    ".woff2": "file",
-  },
 };
 const createESMBrowserBuild = async () => {
   // Development unminified build with source maps
@@ -101,10 +100,9 @@ const rawConfig = {
   entryPoints: ["index.tsx"],
   bundle: true,
   format: "esm",
-  plugins: [sassPlugin()],
+  plugins: [sassPlugin(), woff2BrowserPlugin()],
   loader: {
     ".json": "copy",
-    ".woff2": "file",
   },
   packages: "external",
 };

scripts/buildUtils.js

@@ -1,17 +1,17 @@
 const fs = require("fs");
 const { build } = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
-const { woff2ServerPlugin } = require("./woff2/woff2-esbuild-plugins");
+const {
+  woff2BrowserPlugin,
+  woff2ServerPlugin,
+} = require("./woff2/woff2-esbuild-plugins");
 
 const browserConfig = {
   entryPoints: ["index.ts"],
   bundle: true,
   format: "esm",
-  plugins: [sassPlugin()],
+  plugins: [sassPlugin(), woff2BrowserPlugin()],
   assetNames: "assets/[name]",
-  loader: {
-    ".woff2": "file",
-  },
 };
 
 // Will be used later for treeshaking

scripts/woff2/woff2-esbuild-plugins.js

@@ -2,9 +2,45 @@ const fs = require("fs");
 const path = require("path");
 const { execSync } = require("child_process");
 const which = require("which");
+const fetch = require("node-fetch");
 const wawoff = require("wawoff2");
 const { Font } = require("fonteditor-core");
 
+/**
+ * Custom esbuild plugin to convert url woff2 imports into a text.
+ * Other woff2 imports are handled by a "file" loader.
+ *
+ * @returns {import("esbuild").Plugin}
+ */
+module.exports.woff2BrowserPlugin = () => {
+  return {
+    name: "woff2BrowserPlugin",
+    setup(build) {
+      build.initialOptions.loader = {
+        ".woff2": "file",
+        ...build.initialOptions.loader,
+      };
+
+      build.onResolve({ filter: /^https:\/\/.+?\.woff2$/ }, (args) => {
+        return {
+          path: args.path,
+          namespace: "woff2BrowserPlugin",
+        };
+      });
+
+      build.onLoad(
+        { filter: /.*/, namespace: "woff2BrowserPlugin" },
+        async (args) => {
+          return {
+            contents: args.path,
+            loader: "text",
+          };
+        },
+      );
+    },
+  };
+};
+
 /**
  * Custom esbuild plugin to:
  * 1. inline all woff2 (url and relative imports) as base64 for server-side use cases (no need for additional font fetch; works in both esm and commonjs)
@@ -17,6 +53,27 @@ const { Font } = require("fonteditor-core");
  * @returns {import("esbuild").Plugin}
  */
 module.exports.woff2ServerPlugin = (options = {}) => {
+  // google CDN fails time to time, so let's retry
+  async function fetchRetry(url, options = {}, retries = 0, delay = 1000) {
+    try {
+      const response = await fetch(url, options);
+
+      if (!response.ok) {
+        throw new Error(`Status: ${response.status}, ${await response.json()}`);
+      }
+
+      return response;
+    } catch (e) {
+      if (retries > 0) {
+        await new Promise((resolve) => setTimeout(resolve, delay));
+        return fetchRetry(url, options, retries - 1, delay * 2);
+      }
+
+      console.error(`Couldn't fetch: ${url}, error: ${e.message}`);
+      throw e;
+    }
+  }
+
   return {
     name: "woff2ServerPlugin",
     setup(build) {
@@ -25,7 +82,9 @@ module.exports.woff2ServerPlugin = (options = {}) => {
       const fonts = new Map();
 
       build.onResolve({ filter: /\.woff2$/ }, (args) => {
-        const resolvedPath = path.resolve(args.resolveDir, args.path);
+        const resolvedPath = args.path.startsWith("http")
+          ? args.path // url
+          : path.resolve(args.resolveDir, args.path); // absolute path
 
         return {
           path: resolvedPath,
@@ -42,7 +101,9 @@ module.exports.woff2ServerPlugin = (options = {}) => {
             // read local woff2 as a buffer (WARN: `readFileSync` does not work!)
             woff2Buffer = await fs.promises.readFile(args.path);
           } else {
-            throw new Error(`Font path has to be absolute! "${args.path}"`);
+            // fetch remote woff2 as a buffer (i.e. from a cdn)
+            const response = await fetchRetry(args.path, {}, 3);
+            woff2Buffer = await response.buffer();
           }
 
           // google's brotli decompression into snft

scripts/woff2/woff2-vite-plugins.js

@@ -1,13 +1,15 @@
-// `EXCALIDRAW_ASSET_PATH` as a SSOT
 const OSS_FONTS_CDN =
   "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/";
 
 /**
- * Custom vite plugin for auto-prefixing `EXCALIDRAW_ASSET_PATH` woff2 fonts in `excalidraw-app`.
+ * Custom vite plugin to convert url woff2 imports into a text.
+ * Other woff2 imports are automatically served and resolved as a file uri.
  *
  * @returns {import("vite").PluginOption}
  */
 module.exports.woff2BrowserPlugin = () => {
+  // for now limited to woff2 only, might be extended to any assets in the future
+  const regex = /^https:\/\/.+?\.woff2$/;
   let isDev;
 
   return {
@@ -16,9 +18,34 @@ module.exports.woff2BrowserPlugin = () => {
     config(_, { command }) {
       isDev = command === "serve";
     },
+    resolveId(source) {
+      if (!regex.test(source)) {
+        return null;
+      }
+
+      // getting the url to the dependency tree
+      return source;
+    },
+    load(id) {
+      if (!regex.test(id)) {
+        return null;
+      }
+
+      // loading the url as string
+      return `export default "${id}"`;
+    },
+    // necessary for dev as vite / rollup does skips https imports in serve (~dev) mode
+    // aka dev mode equivalent of "export default x" above (resolveId + load)
     transform(code, id) {
-      // using copy / replace as fonts defined in the `.css` don't have to be manually copied over (vite/rollup does this automatically),
+      // treat https woff2 imports as a text
-      // but at the same time can't be easily prefixed with the `EXCALIDRAW_ASSET_PATH` only for the `excalidraw-app`
+      if (isDev && id.endsWith("/excalidraw/fonts/index.ts")) {
+        return code.replaceAll(
+          /import\s+(\w+)\s+from\s+(["']https:\/\/.+?\.woff2["'])/g,
+          `const $1 = $2`,
+        );
+      }
+
+      // use CDN for Assistant
       if (!isDev && id.endsWith("/excalidraw/fonts/assets/fonts.css")) {
         return `/* WARN: The following content is generated during excalidraw-app build */
 
@@ -63,6 +90,7 @@ module.exports.woff2BrowserPlugin = () => {
       }`;
       }
 
+      // using EXCALIDRAW_ASSET_PATH as a SSOT
       if (!isDev && id.endsWith("excalidraw-app/index.html")) {
         return code.replace(
           "<!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->",
@@ -82,10 +110,9 @@ module.exports.woff2BrowserPlugin = () => {
         type="font/woff2"
         crossorigin="anonymous"
       />
-      <!-- For Nunito only preload the latin range, which should be good enough for now -->
       <link
         rel="preload"
-        href="${OSS_FONTS_CDN}Nunito-Regular-XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg-DqUjjPte.woff2"
+        href="${OSS_FONTS_CDN}Virgil-Regular-hO16qHwV.woff2"
         as="font"
         type="font/woff2"
         crossorigin="anonymous"
@@ -97,13 +124,6 @@ module.exports.woff2BrowserPlugin = () => {
         type="font/woff2"
         crossorigin="anonymous"
       />
-      <link
-        rel="preload"
-        href="${OSS_FONTS_CDN}Virgil-Regular-hO16qHwV.woff2"
-        as="font"
-        type="font/woff2"
-        crossorigin="anonymous"
-      />
     `,
         );
       }

vitest.config.mts

@@ -1,7 +1,9 @@
 import { defineConfig } from "vitest/config";
+import { woff2BrowserPlugin } from "./scripts/woff2/woff2-vite-plugins";
 
 export default defineConfig({
   //@ts-ignore
+  plugins: [woff2BrowserPlugin()],
   test: {
     // Since hooks are running in stack in v2, which means all hooks run serially whereas
     // we need to run them in parallel
@@ -17,10 +19,10 @@ export default defineConfig({
       // Additionally the thresholds also needs to be updated slightly as a result of this change
       ignoreEmptyLines: false,
       thresholds: {
-        lines: 60,
+        lines: 66,
         branches: 70,
         functions: 63,
-        statements: 60,
+        statements: 66,
       },
     },
   },

yarn.lock

@@ -5194,6 +5194,11 @@ damerau-levenshtein@^1.0.8:
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
   integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
 
+data-uri-to-buffer@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz#d8feb2b2881e6a4f58c2e08acfd0e2834e26222e"
+  integrity sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==
+
 data-urls@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-4.0.0.tgz#333a454eca6f9a5b7b0f1013ff89074c3f522dd4"
@@ -6257,6 +6262,14 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
+fetch-blob@^3.1.2, fetch-blob@^3.1.4:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.2.0.tgz#f09b8d4bbd45adc6f0c20b7e787e793e309dcce9"
+  integrity sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==
+  dependencies:
+    node-domexception "^1.0.0"
+    web-streams-polyfill "^3.0.3"
+
 fflate@^0.8.2:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/fflate/-/fflate-0.8.2.tgz#fc8631f5347812ad6028bbe4a2308b2792aa1dea"
@@ -6395,6 +6408,13 @@ form-data@^4.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+formdata-polyfill@^4.0.10:
+  version "4.0.10"
+  resolved "https://registry.yarnpkg.com/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz#24807c31c9d402e002ab3d8c720144ceb8848423"
+  integrity sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==
+  dependencies:
+    fetch-blob "^3.1.2"
+
 fraction.js@^4.2.0:
   version "4.3.7"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
@@ -8236,6 +8256,11 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-domexception@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5"
+  integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==
+
 node-fetch@2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -8248,6 +8273,15 @@ node-fetch@2.6.7:
   dependencies:
     whatwg-url "^5.0.0"
 
+node-fetch@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-3.3.2.tgz#d1e889bacdf733b4ff3b2b243eb7a12866a0b78b"
+  integrity sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==
+  dependencies:
+    data-uri-to-buffer "^4.0.0"
+    fetch-blob "^3.1.4"
+    formdata-polyfill "^4.0.10"
+
 node-html-parser@^5.3.3:
   version "5.4.2"
   resolved "https://registry.yarnpkg.com/node-html-parser/-/node-html-parser-5.4.2.tgz#93e004038c17af80226c942336990a0eaed8136a"
@@ -9633,7 +9667,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9651,6 +9685,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -9722,7 +9765,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10512,6 +10562,11 @@ wawoff2@2.0.1:
   dependencies:
     argparse "^2.0.1"
 
+web-streams-polyfill@^3.0.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b"
+  integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==
+
 web-worker@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/web-worker/-/web-worker-1.3.0.tgz#e5f2df5c7fe356755a5fb8f8410d4312627e6776"
@@ -10954,7 +11009,7 @@ workbox-window@7.1.0, workbox-window@^7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10972,6 +11027,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"