Merge pull request #1537 from TriliumNext/build_webpack-excalidraw-font

build: use webpack for excalidraw

package.json

@@ -70,7 +70,6 @@
   "dependencies": {
     "@braintree/sanitize-url": "7.1.1",
     "@electron/remote": "2.1.2",
-    "@excalidraw/excalidraw": "0.18.0",
     "@highlightjs/cdn-assets": "11.11.1",
     "@mermaid-js/layout-elk": "0.1.7",
     "@triliumnext/express-partial-content": "1.0.1",
@@ -134,8 +133,6 @@
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "rand-token": "1.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "safe-compare": "1.1.4",
     "sanitize-filename": "1.6.3",
     "sanitize-html": "2.15.0",
@@ -166,6 +163,7 @@
     "@electron-forge/plugin-auto-unpack-natives": "7.8.0",
     "@electron/rebuild": "3.7.1",
     "@eslint/js": "9.23.0",
+    "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.15",
     "@fullcalendar/daygrid": "6.1.15",
     "@fullcalendar/interaction": "6.1.15",
@@ -218,6 +216,7 @@
     "@vitest/coverage-v8": "3.0.9",
     "autoprefixer": "10.4.21",
     "bootstrap": "5.3.3",
+    "copy-webpack-plugin": "13.0.0",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
     "dprint": "0.49.1",
@@ -235,6 +234,8 @@
     "nodemon": "3.1.9",
     "postcss-loader": "8.1.1",
     "rcedit": "4.0.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rimraf": "6.0.1",
     "sass": "1.86.0",
     "sass-loader": "16.0.5",

src/public/app/widgets/type_widgets/canvas.ts

@@ -2,6 +2,7 @@ import TypeWidget from "./type_widget.js";
 import utils from "../../services/utils.js";
 import linkService from "../../services/link.js";
 import server from "../../services/server.js";
+import asset_path from "../../../../services/asset_path.js";
 import type FNote from "../../entities/fnote.js";
 import type { ExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
 import type { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem, SceneData } from "@excalidraw/excalidraw/types";
@@ -129,9 +130,9 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         this.SCENE_VERSION_INITIAL = -1; // -1 indicates that it is fresh. excalidraw scene version is always >0
         this.SCENE_VERSION_ERROR = -2; // -2 indicates error
 
-        // ensure that assets are loaded from trilium
-        // TODO:
-        (window as any).EXCALIDRAW_ASSET_PATH = `${window.location.origin}/node_modules/@excalidraw/excalidraw/dist/`;
+        // currently required by excalidraw, in order to allows self-hosting fonts locally.
+        // this avoids making excalidraw load the fonts from an external CDN.
+        (window as any).EXCALIDRAW_ASSET_PATH = `${window.location.origin}/${asset_path}/app-dist/excalidraw/`;
 
         // temporary vars
         this.currentNoteId = "";

webpack.config.ts

@@ -4,6 +4,7 @@ import autoprefixer from "autoprefixer";
 import assetPath from "./src/services/asset_path.js";
 import miniCssExtractPlugin from "mini-css-extract-plugin";
 import type { Configuration } from "webpack";
+import CopyPlugin from "copy-webpack-plugin";
 
 const rootDir = path.dirname(fileURLToPath(import.meta.url));
 const config: Configuration = {
@@ -26,6 +27,15 @@ const config: Configuration = {
         new miniCssExtractPlugin({
             // TriliumNextTODO: enable this, once webpack build outputs into the "build" folder, instead of "src/public/app-dist" folder => @pano9000
             //filename: "../stylesheets/[name].css"
+        }),
+        new CopyPlugin({
+            patterns: [
+                {
+                    context: "node_modules/@excalidraw/excalidraw/dist/prod/fonts/",
+                    from: "**/*",
+                    to: "excalidraw/fonts/"
+                }
+            ]
         })
     ],
     module: {