fix: upgrade @excalidraw/excalidraw 0.17.6 → 0.18.0 with compatibility fixes (#146)

- Bump @excalidraw/excalidraw to ^0.18.0 (ESM-only bundle)
- Add explicit CSS import for ESM bundle (main.tsx)
- Update asset copy script for new dist/prod/fonts layout
- Add es2022 target for optimizeDeps esbuild
- Inline @excalidraw/excalidraw in vitest to fix roughjs ESM resolution
- Update .gitignore to add fonts/ directory
- Replace commitToHistory with captureUpdate (NEVER/IMMEDIATELY constants)
- Use local CAPTURE_UPDATE_NEVER constant in shared.ts to avoid
  importing full excalidraw UI bundle in jsdom test environment

Change-Id: I75ccfa0544a5460ad7ab5c4d92d9a054006b7507

Author: OhYee

.gitignore

@@ -47,6 +47,7 @@ backend/dist/
 # Generated Excalidraw assets (copied from node_modules for runtime)
 frontend/public/excalidraw-assets/
 frontend/public/excalidraw-assets-dev/
+frontend/public/fonts/
 
 # E2E Testing
 e2e/node_modules/

frontend/package-lock.json

@@ -17,7 +17,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/utilities": "^3.2.2",
-    "@excalidraw/excalidraw": "0.17.6",
+    "@excalidraw/excalidraw": "^0.18.0",
     "@types/lodash": "^4.17.20",
     "axios": "^1.15.0",
     "clsx": "^2.1.1",

frontend/package.json

@@ -5,6 +5,10 @@ import { fileURLToPath } from "node:url";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const frontendRoot = path.resolve(__dirname, "..");
 
+// In 0.18.0 the old excalidraw-assets / excalidraw-assets-dev directories were
+// replaced by dist/prod and dist/dev.  Only the fonts sub-directory needs to be
+// copied to the public / dist output so that Excalidraw can load them at runtime
+// via window.EXCALIDRAW_ASSET_PATH (which is set to "/" in index.html).
 const EXCALIDRAW_DIST_DIR = path.join(
   frontendRoot,
   "node_modules",
@@ -13,7 +17,10 @@ const EXCALIDRAW_DIST_DIR = path.join(
   "dist"
 );
 
-const assetDirs = ["excalidraw-assets", "excalidraw-assets-dev"];
+// src relative to EXCALIDRAW_DIST_DIR  →  dest name inside the target root
+const ASSET_COPIES = [
+  { src: path.join("prod", "fonts"), dest: "fonts" },
+];
 
 const copyDir = async (src, dest) => {
   await fs.rm(dest, { recursive: true, force: true });
@@ -36,9 +43,9 @@ const main = async () => {
     const targetRoot = path.join(frontendRoot, targetName);
     await fs.mkdir(targetRoot, { recursive: true });
 
-    for (const dirName of assetDirs) {
-      const src = path.join(EXCALIDRAW_DIST_DIR, dirName);
-      const destRoot = path.join(targetRoot, dirName);
+    for (const { src: srcRel, dest: destName } of ASSET_COPIES) {
+      const src = path.join(EXCALIDRAW_DIST_DIR, srcRel);
+      const dest = path.join(targetRoot, destName);
 
       try {
         await fs.access(src);
@@ -47,9 +54,9 @@ const main = async () => {
         throw err;
       }
 
-      await copyDir(src, destRoot);
+      await copyDir(src, dest);
 
-      console.log(`[copy-excalidraw-assets] Copied ${dirName} -> ${targetName}`);
+      console.log(`[copy-excalidraw-assets] Copied ${srcRel} -> ${targetName}/${destName}`);
     }
   }
 };

frontend/scripts/copy-excalidraw-assets.mjs

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import '@excalidraw/excalidraw/index.css'
 import './index.css'
 import App from './App.tsx'
 

frontend/src/main.tsx

@@ -4,6 +4,7 @@ import { ArrowLeft, Download, Loader2, ChevronUp, ChevronDown, Share2 } from 'lu
 import clsx from 'clsx';
 import {
   Excalidraw,
+  CaptureUpdateAction,
   convertToExcalidrawElements,
   exportToSvg,
   viewportCoordsToSceneCoords,
@@ -1585,7 +1586,7 @@ export const Editor: React.FC = () => {
               imageElements.map((element: any) => [element.id, true])
             ),
           },
-          commitToHistory: true,
+          captureUpdate: CaptureUpdateAction.IMMEDIATELY,
         });
       } catch (err) {
         console.error("[Editor] Failed to import dropped images", err);

frontend/src/pages/Editor.tsx

@@ -70,7 +70,7 @@ describe("editor/shared scene guards", () => {
 
     expect(result.sceneUpdate).toEqual({
       collaborators,
-      commitToHistory: false,
+      captureUpdate: "NEVER",
     });
     expect(result.mergedElements).toBeNull();
     expect(result.shouldUpdateFiles).toBe(false);
@@ -96,7 +96,7 @@ describe("editor/shared scene guards", () => {
         localElements[0],
         pendingElements[0],
       ],
-      commitToHistory: false,
+      captureUpdate: "NEVER",
     });
     expect(result.mergedElements).toEqual([
       localElements[0],
@@ -120,7 +120,7 @@ describe("editor/shared scene guards", () => {
 
     expect(result.sceneUpdate).toEqual({
       files: incomingFiles,
-      commitToHistory: false,
+      captureUpdate: "NEVER",
     });
     expect(result.mergedElements).toBeNull();
     expect(result.nextFiles).toEqual(incomingFiles);
@@ -144,7 +144,7 @@ describe("editor/shared scene guards", () => {
         localElements[1],
         localElements[0],
       ],
-      commitToHistory: false,
+      captureUpdate: "NEVER",
     });
     expect(result.mergedElements).toEqual([
       localElements[1],

frontend/src/pages/editor/shared.test.ts

@@ -7,19 +7,26 @@ export interface ElementVersionInfo {
   contentSig: string;
 }
 
+/**
+ * Matches CaptureUpdateAction.NEVER from @excalidraw/excalidraw.
+ * Kept as a local constant so that shared.ts doesn't pull in the full
+ * excalidraw UI bundle, which breaks jsdom-based unit tests.
+ */
+const CAPTURE_UPDATE_NEVER = "NEVER" as const;
+
 type RemoteSceneUpdate =
   | {
       collaborators: Map<string, any>;
-      commitToHistory: false;
+      captureUpdate: typeof CAPTURE_UPDATE_NEVER;
     }
   | {
       elements: any[];
       files?: Record<string, any>;
-      commitToHistory: false;
+      captureUpdate: typeof CAPTURE_UPDATE_NEVER;
     }
   | {
       files: Record<string, any>;
-      commitToHistory: false;
+      captureUpdate: typeof CAPTURE_UPDATE_NEVER;
     };
 
 type BuildRemoteSceneUpdateInput = {
@@ -53,7 +60,7 @@ export const buildRemoteSceneUpdate = ({
     return {
       sceneUpdate: {
         collaborators,
-        commitToHistory: false,
+        captureUpdate: CAPTURE_UPDATE_NEVER,
       },
       mergedElements: null,
       nextFiles: lastSyncedFiles,
@@ -78,7 +85,7 @@ export const buildRemoteSceneUpdate = ({
       sceneUpdate: {
         elements: mergedElements,
         ...(shouldUpdateFiles ? { files: nextFiles } : {}),
-        commitToHistory: false,
+        captureUpdate: CAPTURE_UPDATE_NEVER,
       },
       mergedElements,
       nextFiles,
@@ -90,7 +97,7 @@ export const buildRemoteSceneUpdate = ({
     return {
       sceneUpdate: {
         files: nextFiles,
-        commitToHistory: false,
+        captureUpdate: CAPTURE_UPDATE_NEVER,
       },
       mergedElements: null,
       nextFiles,

frontend/src/pages/editor/shared.ts

@@ -36,6 +36,7 @@ export default defineConfig(({ command }) => {
     optimizeDeps: {
       esbuildOptions: {
         define: processEnvDefines,
+        target: "es2022",
       },
     },
     server: {

frontend/vite.config.ts

@@ -11,6 +11,11 @@ export default defineConfig({
     include: ["src/**/*.test.ts", "src/**/*.test.tsx"],
     testTimeout: 10000,
     css: true,
+    server: {
+      deps: {
+        inline: ["@excalidraw/excalidraw"],
+      },
+    },
   },
   resolve: {
     alias: {