feat: upgrade to Excalidraw 0.18.0 with legacy file compatibility

CHANGELOG.md

@@ -4,6 +4,19 @@
 
 ## [Unreleased]
 
+### Changed
+
+- Upgraded Excalidraw to version 0.18.0
+- Migrated from create-react-app (Webpack) to Vite for faster builds
+- Font assets are now self-hosted (no CDN dependency)
+- Added support for legacy file format compatibility (boundElements, frameId, lineHeight fixes)
+
+### Fixed
+
+- Fixed IDE theme not being applied when opening Excalidraw files
+- Fixed loading of SVG and PNG files with embedded Excalidraw scenes
+- Fixed font loading for deprecated fonts (Virgil, Helvetica, Cascadia)
+
 ## 0.4.2 - 2024-11-12
 
 Same as 0.4.1, 2024.3 compatibility, disable off-screen rendering by default, Excalidraw 0.17.6 (website runs unreleased version).

excalidraw-assets/build.gradle.kts

@@ -10,30 +10,19 @@ plugins {
 
 frontend {
     nodeVersion.set("20.9.0")
-    // DON'T use the `build` directory if it also the output of the `react-scripts`
-    // otherwise it causes 'Error: write EPIPE' because `node` location is also
-    // in the output folder of react-scripts.
-    // This projects set up the BUILD_PATH=./build/react-build/ for react-scripts
+    // DON'T use the `build` directory if it also the output of the Vite build
+    // otherwise it causes issues because `node` location is also
+    // in the output folder.
+    // This project sets up outDir in vite.config.ts to ./build/react-build/
     nodeInstallDirectory.set(project.layout.buildDirectory.dir("node"))
 
-    assembleScript.set("run build") // "build" script in package.json
-    // not implemented yet ?
-    //   checkScript.set("run check")
+    assembleScript.set("run build") // "build" script in package.json (vite build)
     verboseModeEnabled.set(true)
 }
 
 val port = providers.provider {
-    // PORT might be is in package.json "/scripts/start" value
-    // dumb solution to extract the port if possible
-    val defaultPort = 3000
-    file("package.json").useLines { lines ->
-        val startScriptRegex = Regex("\"start\"\\s?:\\s?\"[^\"]+\"")
-        lines
-            .filter { startScriptRegex.containsMatchIn(it) }
-            .map { Regex("\".*PORT=(\\d+).*\"").find(it)?.groups?.get(1)?.value }
-            .map { it?.toInt() }
-            .first() ?: defaultPort
-    }
+    // PORT is configured in vite.config.ts, defaulting to 3006
+    3006
 }
 val webappExcalidrawAssets by extra(project.layout.buildDirectory.dir("assets"))
 val webappExcalidrawAssetsPath by extra(project.layout.buildDirectory.dir("assets").map { it.asFile.absolutePath })
@@ -86,14 +75,15 @@ tasks {
         args = "install"
     }
 
+    // Excalidraw 0.18.0: fonts are now in dist/prod/fonts instead of excalidraw-assets folder
     val copyExcalidrawAssets by registering(Copy::class) {
         dependsOn(runYarnInstall, installFrontend)
         group = "frontend"
-        description = "copy necessary files to run the embedded app"
+        description = "copy necessary files to run the embedded app (fonts for self-hosting)"
 
-        val excalidrawDist = "node_modules/@excalidraw/excalidraw/dist"
+        val excalidrawDist = "node_modules/@excalidraw/excalidraw/dist/prod"
         from(excalidrawDist)
-        include("excalidraw-assets/*")  // production assets
+        include("fonts/**")  // production fonts for self-hosting
         into(webappExcalidrawAssets)
 
         inputs.dir(excalidrawDist)
@@ -125,7 +115,7 @@ tasks {
 
     assembleFrontend {
         dependsOn(copyExcalidrawAssets)
-        inputs.files("package.json", "src", "public")
+        inputs.files("package.json", "src", "public", "index.html", "vite.config.ts", "tsconfig.json")
         outputs.dirs(webappFiles)
     }
 
@@ -144,7 +134,7 @@ tasks {
     register<RunYarnTaskType>("runYarnStart") {
         dependsOn(installFrontend, stopYarnServer)
         group = "frontend"
-        description = "Starts yarn, you'll need to actively kill the server after (`kill ${'$'}(lsof -t -i :${port.get()})`)"
+        description = "Starts Vite dev server, you'll need to actively kill the server after (`kill ${'$'}(lsof -t -i :${port.get()})`)"
 
         args = "run start"
 
@@ -204,4 +194,4 @@ open class YarnProxy @Inject constructor(
     init {
         super.getArgs().set(yarnArgs)
     }
-}
+}

excalidraw-assets/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="Excalidraw Integration for JetBrains IDEs"/>
+    <title>Excalidraw Integration</title>
+    <script>
+        // Set asset path for self-hosted fonts
+        // This will be overridden by the plugin to point to the correct path
+        window.EXCALIDRAW_ASSET_PATH = "/";
+    </script>
+</head>
+<body>
+<div id="root"></div>
+<script type="module" src="/src/index.tsx"></script>
+</body>
+</html>

excalidraw-assets/package.json

@@ -1,41 +1,30 @@
 {
   "name": "excalidraw-plugin-assets",
   "version": "0.1.0",
-  "main": "src/index.js",
-  "description": "",
+  "type": "module",
+  "main": "src/index.tsx",
+  "description": "Excalidraw React app for JetBrains plugin",
   "keywords": [],
   "license": "MIT",
   "dependencies": {
-    "@excalidraw/excalidraw": "^0.17.6",
-    "@types/jest": "^30.0.0",
-    "@types/node": "^22.0.0",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@excalidraw/excalidraw": "^0.18.0",
     "awesome-debounce-promise": "^2.1.0",
-    "react": "^18.0.0",
-    "react-app-rewired": "^2.1.8",
-    "react-dom": "^18.0.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@types/pako": "^2.0.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "cross-env": "^7.0.2",
-    "eslint": "^8.29.0",
-    "eslint-config-react-app": "^7.0.1"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2020
-    }
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11"
   },
   "scripts": {
-    "start": "PORT=3006 BROWSER=none cross-env NODE_ENV=development react-app-rewired start",
-    "build": "CI=false BUILD_PATH=./build/react-build/ react-app-rewired build",
-    "test": "react-app-rewired test --env=jsdom"
+    "start": "vite --port 3006",
+    "build": "vite build",
+    "preview": "vite preview --port 3006"
   },
   "browserslist": {
     "production": [