Enhancements: Media File Support, Asset Parsing, and Webpack 5 Integration for Production Environment.

client/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "webpack serve",
     "build": "webpack --mode development",
+    "build:prod": "webpack --mode production",
     "build:excalidraw": "node scripts/build.js"
   },
   "dependencies": {
@@ -98,6 +99,7 @@
     "ts-loader": "^9.4.4",
     "typescript": "^4.9.4",
     "webpack": "^5.88.1",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-plugin": "^1.0.5"

client/public/fonts.css

@@ -1,38 +1,38 @@
 /* http://www.eaglefonts.com/fg-virgil-ttf-131249.htm */
 @font-face {
   font-family: "Virgil";
-  src: url("Virgil.woff2");
+  src: url("./fonts/Virgil.woff2")format("woff2"), url("./fonts/FG_Virgil.ttf")format("truetype");
   font-display: swap;
 }
 
 /* https://github.com/microsoft/cascadia-code */
 @font-face {
   font-family: "Cascadia";
-  src: url("Cascadia.woff2");
+  src: url("./fonts/Cascadia.woff2")format("woff2"), url("./fonts/Cascadia.ttf")format("truetype");
   font-display: swap;
 }
 
 @font-face {
   font-family: "Assistant";
-  src: url("Assistant-Regular.woff2");
+  src: url("./fonts/Assistant-Regular.woff2")format("woff2");
   font-display: swap;
   font-weight: 400;
 }
 @font-face {
   font-family: "Assistant";
-  src: url("Assistant-Medium.woff2");
+  src: url("./fonts/Assistant-Medium.woff2");
   font-display: swap;
   font-weight: 500;
 }
 @font-face {
   font-family: "Assistant";
-  src: url("Assistant-SemiBold.woff2");
+  src: url("./fonts/Assistant-SemiBold.woff2");
   font-display: swap;
   font-weight: 600;
 }
 @font-face {
   font-family: "Assistant";
-  src: url("Assistant-Bold.woff2");
+  src: url("./fonts/Assistant-Bold.woff2");
   font-display: swap;
   font-weight: 700;
 }

client/src/components/ExportDialog.scss

@@ -81,6 +81,7 @@
         margin: 1em auto;
         align-items: flex-start;
         flex-direction: column;
+        font-family: Virgil;
 
         .TextInput {
           width: auto;

client/src/css/styles.scss

@@ -8,7 +8,7 @@
 }
 
 .excalidraw {
-  --ui-font: Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
+  --ui-font: Virgil, Assistant, system-ui, BlinkMacSystemFont, -apple-system, Segoe UI,
     Roboto, Helvetica, Arial, sans-serif;
   font-family: var(--ui-font);
 

client/src/data/index.ts

@@ -79,6 +79,7 @@ export const exportCanvas = async (
     tempCanvas.remove();
     if (appState.exportEmbedScene) {
       blob = await (
+        //here right pth from the webpack is not being imported, so export isnt working
         await import(/* webpackChunkName: "image" */ "./image")
       ).encodePngMetadata({
         blob,
@@ -104,7 +105,7 @@ export const exportCanvas = async (
         throw error;
       }
       // TypeError *probably* suggests ClipboardItem not defined, which
-      // people on Firefox can enable through a flag, so let's tell them.
+      // people on Firefox can enable through a flag, so let's tell them. 
       if (isFirefox && error.name === "TypeError") {
         throw new Error(
           `${t("alerts.couldNotCopyToClipboard")}\n\n${t(

client/src/element/Hyperlink.tsx

@@ -23,7 +23,7 @@ import clsx from "clsx";
 import { KEYS } from "../keys";
 import { DEFAULT_LINK_SIZE } from "../renderer/renderElement";
 import { rotate } from "../math";
-import { EVENT, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
+import { EVENT, FONT_FAMILY, HYPERLINK_TOOLTIP_DELAY, MIME_TYPES } from "../constants";
 import { Bounds } from "./bounds";
 import { getTooltipDiv, updateTooltipPosition } from "../components/Tooltip";
 import { getSelectedElements } from "../scene";
@@ -143,6 +143,7 @@ export const Hyperlink = ({
         left: `${x}px`,
         width: CONTAINER_WIDTH,
         padding: CONTAINER_PADDING,
+        font: `${FONT_FAMILY}`,
       }}
     >
       {isEditing ? (

client/src/scene/export.ts

@@ -138,7 +138,7 @@ export const exportToSvg = async (
     if (assetPath?.startsWith("/")) {
       assetPath = assetPath.replace("/", `${window.location.origin}/`);
     }
-    assetPath = `${assetPath}/dist/excalidraw-assets/`;
+    assetPath = `${assetPath}/dist/`;
   }
   svgRoot.innerHTML = `
   ${SVG_EXPORT_TAG}

client/webpack.config.js

@@ -1,6 +1,9 @@
 import path from "path";
 import webpack from "webpack";
 import CopyPlugin from "copy-webpack-plugin";
+import miniCssExtractPlugin from "mini-css-extract-plugin";
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
 
 const isEnvDevelopment = process.env.NODE_ENV !== "production";
 const isEnvProduction = process.env.NODE_ENV === "production";
@@ -14,7 +17,9 @@ export default {
   output: {
     path: path.resolve(process.cwd(), "dist"),
     filename: "bundle.js",
-    clean: true,
+    clean: {
+      keep: /ignored\/dir\//, // Keep these assets under 'ignored/dir'.
+    },
   },
   resolve: {
     fallback: {
@@ -31,7 +36,7 @@ export default {
         test: /\.scss$/,
         use: [
           // Adds the styles to the DOM by injecting a <style> tag
-          "style-loader",
+          isEnvDevelopment ? "style-loader" : miniCssExtractPlugin.loader,
           // Translates CSS into CommonJS
           "css-loader",
           // Compiles Sass to CSS
@@ -52,9 +57,34 @@ export default {
         exclude: /node_modules/,
         use: "babel-loader",
       },
+      // Rule for media files
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024, // 8kb
+          },
+        },
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        type: "asset",
+        generator: {
+          filename: "fonts/[name][ext]",
+        },
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024, // 8kb
+          },
+        },
+      },
     ],
   },
   plugins: [
+    new BundleAnalyzerPlugin({
+      generateStatsFile: true,
+    }),
     new CopyPlugin({
       patterns: [{ from: "public" }],
     }),
@@ -73,6 +103,11 @@ export default {
     new webpack.ProvidePlugin({
       process: "process/browser",
     }),
+    isEnvProduction &&
+    new miniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }), // this will extract css to a separate file during production build
   ].filter(Boolean),
   devServer: {
     static: {