feat: introduce font picker (#8012)

Co-authored-by: dwelle <5153846+dwelle@users.noreply.github.com>

examples/excalidraw/components/App.tsx

@@ -872,7 +872,7 @@ export default function App({
                 files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Virgil";
+              ctx.font = "30px Excalifont";
               ctx.strokeText("My custom text", 50, 60);
               setCanvasUrl(canvas.toDataURL());
             }}
@@ -893,7 +893,7 @@ export default function App({
                 files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Virgil";
+              ctx.font = "30px Excalifont";
               ctx.strokeText("My custom text", 50, 60);
               setCanvasUrl(canvas.toDataURL());
             }}

examples/excalidraw/initialData.tsx

@@ -46,7 +46,7 @@ const elements: ExcalidrawElementSkeleton[] = [
 ];
 export default {
   elements,
-  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 5 },
   scrollToContent: true,
   libraryItems: [
     [

examples/excalidraw/with-nextjs/.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# copied assets
+public/*.woff2

examples/excalidraw/with-nextjs/package.json

@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
     "dev": "yarn build:workspace && next dev -p 3005",
     "build": "yarn build:workspace && next build",
     "start": "next start -p 3006",

examples/excalidraw/with-nextjs/src/app/page.tsx

@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
+import Script from "next/script";
 import "../common.scss";
 
 // Since client components get prerenderd on server as well hence importing the excalidraw stuff dynamically
@@ -15,7 +16,9 @@ export default function Page() {
     <>
       <a href="/excalidraw-in-pages">Switch to Pages router</a>
       <h1 className="page-title">App Router</h1>
-
+      <Script id="load-env-variables" strategy="beforeInteractive">
+        {`window["EXCALIDRAW_ASSET_PATH"] = window.origin;`}
+      </Script>
       {/* @ts-expect-error - https://github.com/vercel/next.js/issues/42292 */}
       <ExcalidrawWithClientOnly />
     </>

examples/excalidraw/with-nextjs/src/common.scss

@@ -7,7 +7,7 @@ a {
   color: #1c7ed6;
   font-size: 20px;
   text-decoration: none;
-  font-weight: 550;
+  font-weight: 500;
 }
 
 .page-title {

examples/excalidraw/with-script-in-browser/.gitignore

@@ -0,0 +1,2 @@
+# copied assets
+public/*.woff2

examples/excalidraw/with-script-in-browser/index.html

@@ -11,6 +11,7 @@
     <title>React App</title>
     <script>
       window.name = "codesandbox";
+      window.EXCALIDRAW_ASSET_PATH = window.origin;
     </script>
     <link rel="stylesheet" href="/dist/browser/dev/index.css" />
   </head>

examples/excalidraw/with-script-in-browser/package.json

@@ -12,8 +12,10 @@
     "typescript": "^5"
   },
   "scripts": {
-    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
-    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
+    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
+    "start": "yarn build:workspace && vite",
+    "build": "yarn build:workspace && vite build",
     "build:preview": "yarn build && vite preview --port 5002"
   }
 }