feat: remove ai token settings

.env.development

@@ -22,7 +22,7 @@ VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=
-VITE_APP_ENABLE_TRACKING=true
+VITE_APP_DISABLE_TRACKING=true
 
 FAST_REFRESH=false
 

.env.production

@@ -14,4 +14,4 @@ VITE_APP_WS_SERVER_URL=https://oss-collab.excalidraw.com
 
 VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-VITE_APP_ENABLE_TRACKING=false
+VITE_APP_DISABLE_TRACKING=

.github/workflows/test.yml

@@ -9,9 +9,9 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
       - name: Setup Node.js 18.x
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v2
         with:
           node-version: 18.x
       - name: Install and test

dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx

@@ -90,7 +90,7 @@ function App() {
         <img src={canvasUrl} alt="" />
       </div>
       <div style={{ height: "400px" }}>
-        <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)}
+        <Excalidraw ref={(api) => setExcalidrawAPI(api)}
 />
       </div>
     </>

dev-docs/src/css/custom.scss

@@ -59,7 +59,7 @@ pre a {
   padding: 5px;
   background: #70b1ec;
   color: white;
-  font-weight: 700;
+  font-weight: bold;
   border: none;
 }
 

examples/excalidraw/components/App.tsx

@@ -872,7 +872,7 @@ export default function App({
                 files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
-              ctx.font = "30px Excalifont";
+              ctx.font = "30px Virgil";
               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 Excalifont";
+              ctx.font = "30px Virgil";
               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: 5 },
+  appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },
   scrollToContent: true,
   libraryItems: [
     [

examples/excalidraw/with-nextjs/.gitignore

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

examples/excalidraw/with-nextjs/package.json

@@ -3,8 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm && yarn copy:assets",
-    "copy:assets": "cp ../../../packages/excalidraw/dist/browser/prod/excalidraw-assets/*.woff2 ./public",
+    "build:workspace": "yarn workspace @excalidraw/excalidraw run build:esm",
     "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,5 +1,4 @@
 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
@@ -16,9 +15,7 @@ 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: 500;
+  font-weight: 550;
 }
 
 .page-title {

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

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

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

@@ -11,7 +11,6 @@
     <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,10 +12,8 @@
     "typescript": "^5"
   },
   "scripts": {
-    "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",
+    "start": "yarn workspace @excalidraw/excalidraw run build:esm && vite",
+    "build": "yarn workspace @excalidraw/excalidraw run build:esm && vite build",
     "build:preview": "yarn build && vite preview --port 5002"
   }
 }

excalidraw-app/App.tsx

@@ -22,11 +22,9 @@ import { t } from "../packages/excalidraw/i18n";
 import {
   Excalidraw,
   LiveCollaborationTrigger,
-  TTDDialog,
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
-  normalizeIndices,
 } from "../packages/excalidraw";
 import type {
   AppState,
@@ -122,6 +120,7 @@ import {
 import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
+import { AIComponents } from "./components/AI";
 
 polyfill();
 
@@ -306,21 +305,14 @@ const initializeScene = async (opts: {
       key: roomLinkData.roomKey,
     };
   } else if (scene) {
-    const normalizedScene = {
-      ...scene,
-      // non-collab scenes are always always normalized on init
-      // collab scenes are normalized only on "first-in-room" as part of collabAPI
-      elements: normalizeIndices(scene.elements),
-    };
-
     return isExternalScene && jsonBackendMatch
       ? {
-          scene: normalizedScene,
+          scene,
           isExternalScene,
           id: jsonBackendMatch[1],
           key: jsonBackendMatch[2],
         }
-      : { scene: normalizedScene, isExternalScene: false };
+      : { scene, isExternalScene: false };
   }
   return { scene: null, isExternalScene: false };
 };
@@ -854,63 +846,8 @@ const ExcalidrawWrapper = () => {
           )}
         </OverwriteConfirmDialog>
         <AppFooter />
-        <TTDDialog
-          onTextSubmit={async (input) => {
-            try {
-              const response = await fetch(
-                `${
-                  import.meta.env.VITE_APP_AI_BACKEND
-                }/v1/ai/text-to-diagram/generate`,
-                {
-                  method: "POST",
-                  headers: {
-                    Accept: "application/json",
-                    "Content-Type": "application/json",
-                  },
-                  body: JSON.stringify({ prompt: input }),
-                },
-              );
+        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
 
-              const rateLimit = response.headers.has("X-Ratelimit-Limit")
-                ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
-                : undefined;
-
-              const rateLimitRemaining = response.headers.has(
-                "X-Ratelimit-Remaining",
-              )
-                ? parseInt(
-                    response.headers.get("X-Ratelimit-Remaining") || "0",
-                    10,
-                  )
-                : undefined;
-
-              const json = await response.json();
-
-              if (!response.ok) {
-                if (response.status === 429) {
-                  return {
-                    rateLimit,
-                    rateLimitRemaining,
-                    error: new Error(
-                      "Too many requests today, please try again tomorrow!",
-                    ),
-                  };
-                }
-
-                throw new Error(json.message || "Generation failed...");
-              }
-
-              const generatedResponse = json.generatedResponse;
-              if (!generatedResponse) {
-                throw new Error("Generation failed...");
-              }
-
-              return { generatedResponse, rateLimit, rateLimitRemaining };
-            } catch (err: any) {
-              throw new Error("Request failed");
-            }
-          }}
-        />
         <TTDDialogTrigger />
         {isCollaborating && isOffline && (
           <div className="collab-offline-warning">

excalidraw-app/app-language/language-detector.ts

@@ -17,7 +17,7 @@ export const getPreferredLanguage = () => {
   const initialLanguage =
     (detectedLanguage
       ? // region code may not be defined if user uses generic preferred language
-        // (e.g. chinese vs instead of chinese-simplified)
+        // (e.g. chinese vs instead of chienese-simplified)
         languages.find((lang) => lang.code.startsWith(detectedLanguage))?.code
       : null) || defaultLang.code;
 

excalidraw-app/collab/Collab.tsx

@@ -18,7 +18,6 @@ import {
   restoreElements,
   zoomToFitBounds,
   reconcileElements,
-  normalizeIndices,
 } from "../../packages/excalidraw";
 import type { Collaborator, Gesture } from "../../packages/excalidraw/types";
 import {
@@ -638,16 +637,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
         fetchScene: true,
         roomLinkData: existingRoomLinkData,
       });
-
-      if (sceneData) {
-        scenePromise.resolve({
-          ...sceneData,
-          // normalize fractional indices on init for shared scenes, while making sure there are no other collaborators
-          elements: normalizeIndices([...sceneData.elements]),
-        });
-      } else {
-        scenePromise.resolve(null);
-      }
+      scenePromise.resolve(sceneData);
     });
 
     this.portal.socket.on(

excalidraw-app/components/AI.tsx

@@ -0,0 +1,152 @@
+import type { ExcalidrawImperativeAPI } from "../../packages/excalidraw/types";
+import {
+  DiagramToCodePlugin,
+  exportToBlob,
+  getTextFromElements,
+  MIME_TYPES,
+  TTDDialog,
+} from "../../packages/excalidraw";
+import { getDataURL } from "../../packages/excalidraw/data/blob";
+import { safelyParseJSON } from "../../packages/excalidraw/utils";
+
+export const AIComponents = ({
+  excalidrawAPI,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI;
+}) => {
+  return (
+    <>
+      <DiagramToCodePlugin
+        generate={async ({ frame, children }) => {
+          const appState = excalidrawAPI.getAppState();
+
+          const blob = await exportToBlob({
+            elements: children,
+            appState: {
+              ...appState,
+              exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
+            },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
+          });
+
+          const dataURL = await getDataURL(blob);
+
+          const textFromFrameChildren = getTextFromElements(children);
+
+          const response = await fetch(
+            `${
+              import.meta.env.VITE_APP_AI_BACKEND
+            }/v1/ai/diagram-to-code/generate`,
+            {
+              method: "POST",
+              headers: {
+                Accept: "application/json",
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                texts: textFromFrameChildren,
+                image: dataURL,
+                theme: appState.theme,
+              }),
+            },
+          );
+
+          if (!response.ok) {
+            const text = await response.text();
+            const error = safelyParseJSON(text);
+
+            if (!error) {
+              throw new Error(text);
+            }
+
+            if (error.statusCode === 429) {
+              return {
+                html: `<html>
+                <body style="margin: 0; text-align: center">
+                <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; padding: 0 60px">
+                  <div style="color:red">Too many requests today,</br>please try again tomorrow!</div>
+                  </br>
+                  </br>
+                  <div>You can also try <a href="${
+                    import.meta.env.VITE_APP_PLUS_LP
+                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
+                </div>
+                </body>
+                </html>`,
+              };
+            }
+
+            throw new Error(error.message || text);
+          }
+
+          const html = await response.text();
+
+          return {
+            html,
+          };
+        }}
+      />
+
+      <TTDDialog
+        onTextSubmit={async (input) => {
+          try {
+            const response = await fetch(
+              `${
+                import.meta.env.VITE_APP_AI_BACKEND
+              }/v1/ai/text-to-diagram/generate`,
+              {
+                method: "POST",
+                headers: {
+                  Accept: "application/json",
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({ prompt: input }),
+              },
+            );
+
+            const rateLimit = response.headers.has("X-Ratelimit-Limit")
+              ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
+              : undefined;
+
+            const rateLimitRemaining = response.headers.has(
+              "X-Ratelimit-Remaining",
+            )
+              ? parseInt(
+                  response.headers.get("X-Ratelimit-Remaining") || "0",
+                  10,
+                )
+              : undefined;
+
+            const json = await response.json();
+
+            if (!response.ok) {
+              if (response.status === 429) {
+                return {
+                  rateLimit,
+                  rateLimitRemaining,
+                  error: new Error(
+                    "Too many requests today, please try again tomorrow!",
+                  ),
+                };
+              }
+
+              throw new Error(json.message || "Generation failed...");
+            }
+
+            const generatedResponse = json.generatedResponse;
+            if (!generatedResponse) {
+              throw new Error("Generation failed...");
+            }
+
+            return { generatedResponse, rateLimit, rateLimitRemaining };
+          } catch (err: any) {
+            throw new Error("Request failed");
+          }
+        }}
+      />
+    </>
+  );
+};

excalidraw-app/data/index.ts

@@ -254,7 +254,7 @@ export const loadScene = async (
       await importFromBackend(id, privateKey),
       localDataState?.appState,
       localDataState?.elements,
-      { repairBindings: true },
+      { repairBindings: true, refreshDimensions: false },
     );
   } else {
     data = restore(localDataState || null, null, null, {

excalidraw-app/index.html

@@ -114,14 +114,6 @@
       ) {
         window.location.href = "https://app.excalidraw.com";
       }
-
-      // point into our CDN in prod
-      window.EXCALIDRAW_ASSET_PATH =
-        "https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/";
-    </script>
-    <% } else { %>
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = window.origin;
     </script>
     <% } %>
 
@@ -132,74 +124,22 @@
     <!-- Excalidraw version -->
     <meta name="version" content="{version}" />
 
-    <!-- Warmup the connection for Google fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-
-    <!-- Preload all default fonts and Virgil for backwards compatibility to avoid swap on init -->
-    <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <link
       rel="preload"
-      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/Excalifont-Regular-C9eKQy_N.woff2"
+      href="/Virgil.woff2"
       as="font"
       type="font/woff2"
       crossorigin="anonymous"
     />
     <link
       rel="preload"
-      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/Virgil-Regular-hO16qHwV.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/oss/ComicShanns-Regular-D0c8wzsC.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <% } else { %>
-    <!-- in DEV we need to preload from the local server and without the hash -->
-    <link
-      rel="preload"
-      href="../packages/excalidraw/fonts/assets/Excalifont-Regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="../packages/excalidraw/fonts/assets/Virgil-Regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <link
-      rel="preload"
-      href="../packages/excalidraw/fonts/assets/ComicShanns-Regular.woff2"
-      as="font"
-      type="font/woff2"
-      crossorigin="anonymous"
-    />
-    <% } %>
-
-    <!-- For Nunito only preload the latin range, which should be enough for now -->
-    <link
-      rel="preload"
-      href="https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2"
+      href="/Cascadia.woff2"
       as="font"
       type="font/woff2"
       crossorigin="anonymous"
     />
 
-    <!-- Register Assistant as the UI font, before the scene inits -->
-    <link
-      rel="stylesheet"
-      href="../packages/excalidraw/fonts/assets/fonts.css"
-      type="text/css"
-    />
-
+    <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
     <% if (typeof VITE_APP_DEV_DISABLE_LIVE_RELOAD != 'undefined' &&
     VITE_APP_DEV_DISABLE_LIVE_RELOAD == true) { %>
     <script>
@@ -218,6 +158,7 @@
     </script>
     <% } %>
     <script>
+      window.EXCALIDRAW_ASSET_PATH = "/";
       // setting this so that libraries installation reuses this window tab.
       window.name = "_excalidraw";
     </script>

excalidraw-app/package.json

@@ -31,13 +31,12 @@
   "prettier": "@excalidraw/prettier-config",
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA cross-env VITE_APP_ENABLE_TRACKING=true vite build",
+    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
+    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
     "build:version": "node ../scripts/build-version.js",
     "build": "yarn build:app && yarn build:version",
     "start": "yarn && vite",
-    "start:production": "yarn build && yarn serve",
-    "serve": "npx http-server build -a localhost -p 5001 -o",
+    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "build:preview": "yarn build && vite preview --port 5000"
   }
 }

excalidraw-app/tests/__snapshots__/MobileMenu.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
   class="welcome-screen-center"
 >
   <div
-    class="welcome-screen-center__logo excalifont welcome-screen-decor"
+    class="welcome-screen-center__logo virgil welcome-screen-decor"
   >
     <div
       class="ExcalidrawLogo is-small"
@@ -48,7 +48,7 @@ exports[`Test MobileMenu > should initialize with welcome screen and hide once u
     </div>
   </div>
   <div
-    class="welcome-screen-center__heading welcome-screen-decor excalifont"
+    class="welcome-screen-center__heading welcome-screen-decor virgil"
   >
     All your data is saved locally in your browser.
   </div>

excalidraw-app/vite.config.mts

@@ -5,7 +5,6 @@ import { ViteEjsPlugin } from "vite-plugin-ejs";
 import { VitePWA } from "vite-plugin-pwa";
 import checker from "vite-plugin-checker";
 import { createHtmlPlugin } from "vite-plugin-html";
-import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
 
 // To load .env.local variables
 const envVars = loadEnv("", `../`);
@@ -23,14 +22,6 @@ export default defineConfig({
     outDir: "build",
     rollupOptions: {
       output: {
-        assetFileNames(chunkInfo) {
-          if (chunkInfo?.name?.endsWith(".woff2")) {
-            // put on root so we are flexible about the CDN path
-            return '[name]-[hash][extname]';
-          }
-
-          return 'assets/[name]-[hash][extname]';
-        },
         // Creating separate chunk for locales except for en and percentages.json so they
         // can be cached at runtime and not merged with
         // app precache. en.json and percentages.json are needed for first load
@@ -44,13 +35,12 @@ export default defineConfig({
             // Taking the substring after "locales/"
             return `locales/${id.substring(index + 8)}`;
           }
-        }
+        },
       },
     },
     sourcemap: true,
   },
   plugins: [
-    woff2BrowserPlugin(),
     react(),
     checker({
       typescript: true,

packages/excalidraw/CHANGELOG.md

@@ -19,8 +19,6 @@ Please add the latest change on the top under the correct section.
 
 - Added support for multiplayer undo/redo, by calculating invertible increments and storing them inside the local-only undo/redo stacks. [#7348](https://github.com/excalidraw/excalidraw/pull/7348)
 
-- Added font picker component to have the ability to choose from a range of different fonts. Also, changed the default fonts to `Excalifont`, `Nunito` and `Comic Shanns` and deprecated `Virgil`, `Helvetica` and `Cascadia`.
-
 - `MainMenu.DefaultItems.ToggleTheme` now supports `onSelect(theme: string)` callback, and optionally `allowSystemTheme: boolean` alongside `theme: string` to indicate you want to allow users to set to system theme (you need to handle this yourself). [#7853](https://github.com/excalidraw/excalidraw/pull/7853)
 
 - Add `useHandleLibrary`'s `opts.adapter` as the new recommended pattern to handle library initialization and persistence on library updates. [#7655](https://github.com/excalidraw/excalidraw/pull/7655)

packages/excalidraw/actions/actionClipboard.tsx

@@ -10,7 +10,7 @@ import {
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { isTextElement } from "../element";
+import { getTextFromElements, isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -239,16 +239,8 @@ export const copyText = register({
       includeBoundTextElement: true,
     });
 
-    const text = selectedElements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
     try {
-      copyTextToSystemClipboard(text);
+      copyTextToSystemClipboard(getTextFromElements(selectedElements));
     } catch (e) {
       throw new Error(t("errors.copyToSystemClipboardFailed"));
     }

packages/excalidraw/actions/actionProperties.test.tsx

@@ -155,15 +155,13 @@ describe("element locking", () => {
       });
       const text = API.createElement({
         type: "text",
-        fontFamily: FONT_FAMILY["Comic Shanns"],
+        fontFamily: FONT_FAMILY.Cascadia,
       });
       h.elements = [rect, text];
       API.setSelectedElements([rect, text]);
 
       expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
-      expect(queryByTestId(document.body, `font-family-code`)).toHaveClass(
-        "active",
-      );
+      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
     });
   });
 });

packages/excalidraw/actions/actionProperties.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
 import type { AppClassProperties, AppState, Primitive } from "../types";
-import type { StoreActionType } from "../store";
 import {
   DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
   DEFAULT_ELEMENT_BACKGROUND_PICKS,
@@ -11,7 +9,6 @@ import { trackEvent } from "../analytics";
 import { ButtonIconSelect } from "../components/ButtonIconSelect";
 import { ColorPicker } from "../components/ColorPicker/ColorPicker";
 import { IconPicker } from "../components/IconPicker";
-import { FontPicker } from "../components/FontPicker/FontPicker";
 // TODO barnabasmolnar/editor-redesign
 // TextAlignTopIcon, TextAlignBottomIcon,TextAlignMiddleIcon,
 // ArrowHead icons
@@ -41,6 +38,9 @@ import {
   FontSizeExtraLargeIcon,
   EdgeSharpIcon,
   EdgeRoundIcon,
+  FreedrawIcon,
+  FontFamilyNormalIcon,
+  FontFamilyCodeIcon,
   TextAlignLeftIcon,
   TextAlignCenterIcon,
   TextAlignRightIcon,
@@ -65,7 +65,10 @@ import {
   redrawTextBoundingBox,
 } from "../element";
 import { mutateElement, newElementWith } from "../element/mutateElement";
-import { getBoundTextElement } from "../element/textElement";
+import {
+  getBoundTextElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
 import {
   isBoundToContainer,
   isLinearElement,
@@ -91,10 +94,9 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import { hasStrokeColor } from "../scene/comparisons";
-import { arrayToMap, getFontFamilyString, getShortcutKey } from "../utils";
+import { arrayToMap, getShortcutKey } from "../utils";
 import { register } from "./register";
 import { StoreAction } from "../store";
-import { Fonts, getLineHeight } from "../fonts";
 
 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;
 
@@ -727,391 +729,104 @@ export const actionIncreaseFontSize = register({
   },
 });
 
-type ChangeFontFamilyData = Partial<
-  Pick<
-    AppState,
-    "openPopup" | "currentItemFontFamily" | "currentHoveredFontFamily"
-  >
-> & {
-  /** cache of selected & editing elements populated on opened popup */
-  cachedElements?: Map<string, ExcalidrawElement>;
-  /** flag to reset all elements to their cached versions  */
-  resetAll?: true;
-  /** flag to reset all containers to their cached versions */
-  resetContainers?: true;
-};
-
 export const actionChangeFontFamily = register({
   name: "changeFontFamily",
   label: "labels.fontFamily",
   trackEvent: false,
   perform: (elements, appState, value, app) => {
-    const { cachedElements, resetAll, resetContainers, ...nextAppState } =
-      value as ChangeFontFamilyData;
-
-    if (resetAll) {
-      const nextElements = changeProperty(
+    return {
+      elements: changeProperty(
         elements,
         appState,
-        (element) => {
-          const cachedElement = cachedElements?.get(element.id);
-          if (cachedElement) {
-            const newElement = newElementWith(element, {
-              ...cachedElement,
-            });
-
+        (oldElement) => {
+          if (isTextElement(oldElement)) {
+            const newElement: ExcalidrawTextElement = newElementWith(
+              oldElement,
+              {
+                fontFamily: value,
+                lineHeight: getDefaultLineHeight(value),
+              },
+            );
+            redrawTextBoundingBox(
+              newElement,
+              app.scene.getContainerElement(oldElement),
+              app.scene.getNonDeletedElementsMap(),
+            );
             return newElement;
           }
 
-          return element;
+          return oldElement;
         },
         true,
-      );
-
-      return {
-        elements: nextElements,
-        appState: {
-          ...appState,
-          ...nextAppState,
-        },
-        storeAction: StoreAction.UPDATE,
-      };
-    }
-
-    const { currentItemFontFamily, currentHoveredFontFamily } = value;
-
-    let nexStoreAction: StoreActionType = StoreAction.NONE;
-    let nextFontFamily: FontFamilyValues | undefined;
-    let skipOnHoverRender = false;
-
-    if (currentItemFontFamily) {
-      nextFontFamily = currentItemFontFamily;
-      nexStoreAction = StoreAction.CAPTURE;
-    } else if (currentHoveredFontFamily) {
-      nextFontFamily = currentHoveredFontFamily;
-      nexStoreAction = StoreAction.NONE;
-
-      const selectedTextElements = getSelectedElements(elements, appState, {
-        includeBoundTextElement: true,
-      }).filter((element) => isTextElement(element));
-
-      // skip on hover re-render for more than 200 text elements or for text element with more than 5000 chars combined
-      if (selectedTextElements.length > 200) {
-        skipOnHoverRender = true;
-      } else {
-        let i = 0;
-        let textLengthAccumulator = 0;
-
-        while (
-          i < selectedTextElements.length &&
-          textLengthAccumulator < 5000
-        ) {
-          const textElement = selectedTextElements[i] as ExcalidrawTextElement;
-          textLengthAccumulator += textElement?.originalText.length || 0;
-          i++;
-        }
-
-        if (textLengthAccumulator > 5000) {
-          skipOnHoverRender = true;
-        }
-      }
-    }
-
-    const result = {
+      ),
       appState: {
         ...appState,
-        ...nextAppState,
+        currentItemFontFamily: value,
       },
-      storeAction: nexStoreAction,
+      storeAction: StoreAction.CAPTURE,
     };
-
-    if (nextFontFamily && !skipOnHoverRender) {
-      const elementContainerMapping = new Map<
-        ExcalidrawTextElement,
-        ExcalidrawElement | null
-      >();
-      let uniqueGlyphs = new Set<string>();
-      let skipFontFaceCheck = false;
-
-      const fontsCache = Array.from(Fonts.loadedFontsCache.values());
-      const fontFamily = Object.entries(FONT_FAMILY).find(
-        ([_, value]) => value === nextFontFamily,
-      )?.[0];
-
-      // skip `document.font.check` check on hover, if at least one font family has loaded as it's super slow (could result in slightly different bbox, which is fine)
-      if (
-        currentHoveredFontFamily &&
-        fontFamily &&
-        fontsCache.some((sig) => sig.startsWith(fontFamily))
-      ) {
-        skipFontFaceCheck = true;
-      }
-
-      // following causes re-render so make sure we changed the family
-      // otherwise it could cause unexpected issues, such as preventing opening the popover when in wysiwyg
-      Object.assign(result, {
-        elements: changeProperty(
-          elements,
-          appState,
-          (oldElement) => {
-            if (
-              isTextElement(oldElement) &&
-              (oldElement.fontFamily !== nextFontFamily ||
-                currentItemFontFamily) // force update on selection
-            ) {
-              const newElement: ExcalidrawTextElement = newElementWith(
-                oldElement,
-                {
-                  fontFamily: nextFontFamily,
-                  lineHeight: getLineHeight(nextFontFamily!),
-                },
-              );
-
-              const cachedContainer =
-                cachedElements?.get(oldElement.containerId || "") || {};
-
-              const container = app.scene.getContainerElement(oldElement);
-
-              if (resetContainers && container && cachedContainer) {
-                // reset the container back to it's cached version
-                mutateElement(container, { ...cachedContainer }, false);
-              }
-
-              if (!skipFontFaceCheck) {
-                uniqueGlyphs = new Set([
-                  ...uniqueGlyphs,
-                  ...Array.from(newElement.originalText),
-                ]);
-              }
-
-              elementContainerMapping.set(newElement, container);
-
-              return newElement;
-            }
-
-            return oldElement;
-          },
-          true,
-        ),
-      });
-
-      // size is irrelevant, but necessary
-      const fontString = `10px ${getFontFamilyString({
-        fontFamily: nextFontFamily,
-      })}`;
-      const glyphs = Array.from(uniqueGlyphs.values()).join();
-
-      if (
-        skipFontFaceCheck ||
-        window.document.fonts.check(fontString, glyphs)
-      ) {
-        // we either skip the check (have at least one font face loaded) or do the check and find out all the font faces have loaded
-        for (const [element, container] of elementContainerMapping) {
-          // trigger synchronous redraw
-          redrawTextBoundingBox(
-            element,
-            container,
-            app.scene.getNonDeletedElementsMap(),
-            false,
-          );
-        }
-      } else {
-        // otherwise try to load all font faces for the given glyphs and redraw elements once our font faces loaded
-        window.document.fonts.load(fontString, glyphs).then((fontFaces) => {
-          for (const [element, container] of elementContainerMapping) {
-            // use latest element state to ensure we don't have closure over an old instance in order to avoid possible race conditions (i.e. font faces load out-of-order while rapidly switching fonts)
-            const latestElement = app.scene.getElement(element.id);
-            const latestContainer = container
-              ? app.scene.getElement(container.id)
-              : null;
-
-            if (latestElement) {
-              // trigger async redraw
-              redrawTextBoundingBox(
-                latestElement as ExcalidrawTextElement,
-                latestContainer,
-                app.scene.getNonDeletedElementsMap(),
-                false,
-              );
-            }
-          }
-
-          // trigger update once we've mutated all the elements, which also updates our cache
-          app.fonts.onLoaded(fontFaces);
-        });
-      }
-    }
-
-    return result;
   },
-  PanelComponent: ({ elements, appState, app, updateData }) => {
-    const cachedElementsRef = useRef<Map<string, ExcalidrawElement>>(new Map());
-    const prevSelectedFontFamilyRef = useRef<number | null>(null);
-    // relying on state batching as multiple `FontPicker` handlers could be called in rapid succession and we want to combine them
-    const [batchedData, setBatchedData] = useState<ChangeFontFamilyData>({});
-    const isUnmounted = useRef(true);
-
-    const selectedFontFamily = useMemo(() => {
-      const getFontFamily = (
-        elementsArray: readonly ExcalidrawElement[],
-        elementsMap: Map<string, ExcalidrawElement>,
-      ) =>
-        getFormValue(
-          elementsArray,
-          appState,
-          (element) => {
-            if (isTextElement(element)) {
-              return element.fontFamily;
-            }
-            const boundTextElement = getBoundTextElement(element, elementsMap);
-            if (boundTextElement) {
-              return boundTextElement.fontFamily;
-            }
-            return null;
-          },
-          (element) =>
-            isTextElement(element) ||
-            getBoundTextElement(element, elementsMap) !== null,
-          (hasSelection) =>
-            hasSelection
-              ? null
-              : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
-        );
-
-      // popup opened, use cached elements
-      if (
-        batchedData.openPopup === "fontFamily" &&
-        appState.openPopup === "fontFamily"
-      ) {
-        return getFontFamily(
-          Array.from(cachedElementsRef.current?.values() ?? []),
-          cachedElementsRef.current,
-        );
-      }
-
-      // popup closed, use all elements
-      if (!batchedData.openPopup && appState.openPopup !== "fontFamily") {
-        return getFontFamily(elements, app.scene.getNonDeletedElementsMap());
-      }
-
-      // popup props are not in sync, hence we are in the middle of an update, so keeping the previous value we've had
-      return prevSelectedFontFamilyRef.current;
-    }, [batchedData.openPopup, appState, elements, app.scene]);
-
-    useEffect(() => {
-      prevSelectedFontFamilyRef.current = selectedFontFamily;
-    }, [selectedFontFamily]);
-
-    useEffect(() => {
-      if (Object.keys(batchedData).length) {
-        updateData(batchedData);
-        // reset the data after we've used the data
-        setBatchedData({});
-      }
-      // call update only on internal state changes
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [batchedData]);
-
-    useEffect(() => {
-      isUnmounted.current = false;
-
-      return () => {
-        isUnmounted.current = true;
-      };
-    }, []);
+  PanelComponent: ({ elements, appState, updateData, app }) => {
+    const options: {
+      value: FontFamilyValues;
+      text: string;
+      icon: JSX.Element;
+      testId: string;
+    }[] = [
+      {
+        value: FONT_FAMILY.Virgil,
+        text: t("labels.handDrawn"),
+        icon: FreedrawIcon,
+        testId: "font-family-virgil",
+      },
+      {
+        value: FONT_FAMILY.Helvetica,
+        text: t("labels.normal"),
+        icon: FontFamilyNormalIcon,
+        testId: "font-family-normal",
+      },
+      {
+        value: FONT_FAMILY.Cascadia,
+        text: t("labels.code"),
+        icon: FontFamilyCodeIcon,
+        testId: "font-family-code",
+      },
+    ];
 
     return (
       <fieldset>
         <legend>{t("labels.fontFamily")}</legend>
-        <FontPicker
-          isOpened={appState.openPopup === "fontFamily"}
-          selectedFontFamily={selectedFontFamily}
-          hoveredFontFamily={appState.currentHoveredFontFamily}
-          onSelect={(fontFamily) => {
-            setBatchedData({
-              openPopup: null,
-              currentHoveredFontFamily: null,
-              currentItemFontFamily: fontFamily,
-            });
-
-            // defensive clear so immediate close won't abuse the cached elements
-            cachedElementsRef.current.clear();
-          }}
-          onHover={(fontFamily) => {
-            setBatchedData({
-              currentHoveredFontFamily: fontFamily,
-              cachedElements: new Map(cachedElementsRef.current),
-              resetContainers: true,
-            });
-          }}
-          onLeave={() => {
-            setBatchedData({
-              currentHoveredFontFamily: null,
-              cachedElements: new Map(cachedElementsRef.current),
-              resetAll: true,
-            });
-          }}
-          onPopupChange={(open) => {
-            if (open) {
-              // open, populate the cache from scratch
-              cachedElementsRef.current.clear();
-
-              const { editingElement } = appState;
-
-              if (editingElement?.type === "text") {
-                // retrieve the latest version from the scene, as `editingElement` isn't mutated
-                const latestEditingElement = app.scene.getElement(
-                  editingElement.id,
-                );
-
-                // inside the wysiwyg editor
-                cachedElementsRef.current.set(
-                  editingElement.id,
-                  newElementWith(
-                    latestEditingElement || editingElement,
-                    {},
-                    true,
-                  ),
-                );
-              } else {
-                const selectedElements = getSelectedElements(
-                  elements,
-                  appState,
-                  {
-                    includeBoundTextElement: true,
-                  },
-                );
-
-                for (const element of selectedElements) {
-                  cachedElementsRef.current.set(
-                    element.id,
-                    newElementWith(element, {}, true),
-                  );
-                }
+        <ButtonIconSelect<FontFamilyValues | false>
+          group="font-family"
+          options={options}
+          value={getFormValue(
+            elements,
+            appState,
+            (element) => {
+              if (isTextElement(element)) {
+                return element.fontFamily;
               }
-
-              setBatchedData({
-                openPopup: "fontFamily",
-              });
-            } else {
-              // close, use the cache and clear it afterwards
-              const data = {
-                openPopup: null,
-                currentHoveredFontFamily: null,
-                cachedElements: new Map(cachedElementsRef.current),
-                resetAll: true,
-              } as ChangeFontFamilyData;
-
-              if (isUnmounted.current) {
-                // in case the component was unmounted by the parent, trigger the update directly
-                updateData({ ...batchedData, ...data });
-              } else {
-                setBatchedData(data);
+              const boundTextElement = getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              );
+              if (boundTextElement) {
+                return boundTextElement.fontFamily;
               }
-
-              cachedElementsRef.current.clear();
-            }
-          }}
+              return null;
+            },
+            (element) =>
+              isTextElement(element) ||
+              getBoundTextElement(
+                element,
+                app.scene.getNonDeletedElementsMap(),
+              ) !== null,
+            (hasSelection) =>
+              hasSelection
+                ? null
+                : appState.currentItemFontFamily || DEFAULT_FONT_FAMILY,
+          )}
+          onChange={(value) => updateData(value)}
         />
       </fieldset>
     );

packages/excalidraw/actions/actionStyles.ts

@@ -12,7 +12,10 @@ import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
-import { getBoundTextElement } from "../element/textElement";
+import {
+  getBoundTextElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
 import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
@@ -24,7 +27,6 @@ import { getSelectedElements } from "../scene";
 import type { ExcalidrawTextElement } from "../element/types";
 import { paintIcon } from "../components/icons";
 import { StoreAction } from "../store";
-import { getLineHeight } from "../fonts";
 
 // `copiedStyles` is exported only for tests.
 export let copiedStyles: string = "{}";
@@ -120,7 +122,7 @@ export const actionPasteStyles = register({
                 DEFAULT_TEXT_ALIGN,
               lineHeight:
                 (elementStylesToCopyFrom as ExcalidrawTextElement).lineHeight ||
-                getLineHeight(fontFamily),
+                getDefaultLineHeight(fontFamily),
             });
             let container = null;
             if (newElement.containerId) {

packages/excalidraw/analytics.ts

@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette"]);
+const ALLOWED_CATEGORIES_TO_TRACK = ["ai", "command_palette"] as string[];
 
 export const trackEvent = (
   category: string,
@@ -9,20 +9,17 @@ export const trackEvent = (
   value?: number,
 ) => {
   try {
+    // prettier-ignore
     if (
-      typeof window === "undefined" ||
-      import.meta.env.VITE_WORKER_ID ||
-      import.meta.env.VITE_APP_ENABLE_TRACKING !== "true"
+      typeof window === "undefined"
+      || import.meta.env.VITE_WORKER_ID
+      // comment out to debug locally
+      || import.meta.env.PROD
     ) {
       return;
     }
 
-    if (!ALLOWED_CATEGORIES_TO_TRACK.has(category)) {
-      return;
-    }
-
-    if (import.meta.env.DEV) {
-      // comment out to debug in dev
+    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
       return;
     }
 

packages/excalidraw/appState.ts

@@ -36,7 +36,6 @@ export const getDefaultAppState = (): Omit<
     currentItemStrokeStyle: DEFAULT_ELEMENT_PROPS.strokeStyle,
     currentItemStrokeWidth: DEFAULT_ELEMENT_PROPS.strokeWidth,
     currentItemTextAlign: DEFAULT_TEXT_ALIGN,
-    currentHoveredFontFamily: null,
     cursorButton: "up",
     activeEmbeddable: null,
     draggingElement: null,
@@ -150,7 +149,6 @@ const APP_STATE_STORAGE_CONF = (<
   currentItemStrokeStyle: { browser: true, export: false, server: false },
   currentItemStrokeWidth: { browser: true, export: false, server: false },
   currentItemTextAlign: { browser: true, export: false, server: false },
-  currentHoveredFontFamily: { browser: false, export: false, server: false },
   cursorButton: { browser: true, export: false, server: false },
   activeEmbeddable: { browser: false, export: false, server: false },
   draggingElement: { browser: false, export: false, server: false },

packages/excalidraw/components/Actions.tsx

@@ -44,7 +44,6 @@ import {
   frameToolIcon,
   mermaidLogoIcon,
   laserPointerToolIcon,
-  OpenAIIcon,
   MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
@@ -158,8 +157,10 @@ export const SelectedShapeActions = ({
       {(appState.activeTool.type === "text" ||
         targetElements.some(isTextElement)) && (
         <>
-          {renderAction("changeFontFamily")}
           {renderAction("changeFontSize")}
+
+          {renderAction("changeFontFamily")}
+
           {(appState.activeTool.type === "text" ||
             suppportsHorizontalAlign(targetElements, elementsMap)) &&
             renderAction("changeTextAlign")}
@@ -393,7 +394,7 @@ export const ShapesSwitcher = ({
           >
             {t("toolBar.mermaidToExcalidraw")}
           </DropdownMenu.Item>
-          {app.props.aiEnabled !== false && (
+          {app.props.aiEnabled !== false && app.plugins.diagramToCode && (
             <>
               <DropdownMenu.Item
                 onSelect={() => app.onMagicframeToolSelect()}
@@ -403,20 +404,6 @@ export const ShapesSwitcher = ({
                 {t("toolBar.magicframe")}
                 <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
               </DropdownMenu.Item>
-              <DropdownMenu.Item
-                onSelect={() => {
-                  trackEvent("ai", "open-settings", "d2c");
-                  app.setOpenDialog({
-                    name: "settings",
-                    source: "settings",
-                    tab: "diagram-to-code",
-                  });
-                }}
-                icon={OpenAIIcon}
-                data-testid="toolbar-magicSettings"
-              >
-                {t("toolBar.magicSettings")}
-              </DropdownMenu.Item>
             </>
           )}
         </DropdownMenu.Content>

packages/excalidraw/components/App.tsx

@@ -49,6 +49,7 @@ import {
 import type { PastedMixedContent } from "../clipboard";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
 import type { EXPORT_IMAGE_TYPES } from "../constants";
+import { DEFAULT_FONT_SIZE } from "../constants";
 import {
   APP_NAME,
   CURSOR_TYPE,
@@ -84,7 +85,6 @@ import {
   ZOOM_STEP,
   POINTER_EVENTS,
   TOOL_TYPE,
-  EDITOR_LS_KEYS,
   isIOS,
   supportsResizeObserver,
   DEFAULT_COLLISION_THRESHOLD,
@@ -182,6 +182,7 @@ import type {
   ExcalidrawIframeElement,
   ExcalidrawEmbeddableElement,
   Ordered,
+  MagicGenerationData,
 } from "../element/types";
 import { getCenter, getDistance } from "../gesture";
 import {
@@ -224,7 +225,8 @@ import type {
   ScrollBars,
 } from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
-import { findShapeByKey, getBoundTextShape, getElementShape } from "../shapes";
+import { findShapeByKey, getElementShape } from "../shapes";
+import type { GeometricShape } from "../../utils/geometry/shape";
 import { getSelectionBoxShape } from "../../utils/geometry/shape";
 import { isPointInShape } from "../../utils/collision";
 import type {
@@ -251,6 +253,7 @@ import type {
   UnsubscribeCallback,
   EmbedsValidationStatus,
   ElementsPendingErasure,
+  GenerateDiagramToCode,
 } from "../types";
 import {
   debounce,
@@ -320,6 +323,7 @@ import {
   getBoundTextElement,
   getContainerCenter,
   getContainerElement,
+  getDefaultLineHeight,
   getLineHeightInPx,
   getMinTextElementWidth,
   isMeasureTextSupported,
@@ -335,7 +339,7 @@ import {
 import { isLocalLink, normalizeLink, toValidURL } from "../data/url";
 import { shouldShowBoundingBox } from "../element/transformHandles";
 import { actionUnlockAllElements } from "../actions/actionElementLock";
-import { Fonts, getLineHeight } from "../fonts";
+import { Fonts } from "../scene/Fonts";
 import {
   getFrameChildren,
   isCursorInFrame,
@@ -396,13 +400,9 @@ import {
 } from "../cursor";
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
-import type { MagicCacheData } from "../data/magic";
-import { diagramToHTML } from "../data/magic";
-import { exportToBlob } from "../../utils/export";
 import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";
-import { EditorLocalStorage } from "../data/EditorLocalStorage";
 import FollowMode from "./FollowMode/FollowMode";
 import { Store, StoreAction } from "../store";
 import { AnimationFrameHandler } from "../animation-frame-handler";
@@ -530,8 +530,8 @@ class App extends React.Component<AppProps, AppState> {
   private excalidrawContainerRef = React.createRef<HTMLDivElement>();
 
   public scene: Scene;
-  public fonts: Fonts;
   public renderer: Renderer;
+  private fonts: Fonts;
   private resizeObserver: ResizeObserver | undefined;
   private nearestScrollableContainer: HTMLElement | Document | undefined;
   public library: AppClassProperties["library"];
@@ -990,7 +990,7 @@ class App extends React.Component<AppProps, AppState> {
           if (isIframeElement(el)) {
             src = null;
 
-            const data: MagicCacheData = (el.customData?.generationData ??
+            const data: MagicGenerationData = (el.customData?.generationData ??
               this.magicGenerations.get(el.id)) || {
               status: "error",
               message: "No generation data",
@@ -1540,10 +1540,6 @@ class App extends React.Component<AppProps, AppState> {
                           }
                           app={this}
                           isCollaborating={this.props.isCollaborating}
-                          openAIKey={this.OPENAI_KEY}
-                          isOpenAIKeyPersisted={this.OPENAI_KEY_IS_PERSISTED}
-                          onOpenAIAPIKeyChange={this.onOpenAIKeyChange}
-                          onMagicSettingsConfirm={this.onMagicSettingsConfirm}
                         >
                           {this.props.children}
                         </LayerUI>
@@ -1786,7 +1782,7 @@ class App extends React.Component<AppProps, AppState> {
 
   private magicGenerations = new Map<
     ExcalidrawIframeElement["id"],
-    MagicCacheData
+    MagicGenerationData
   >();
 
   private updateMagicGeneration = ({
@@ -1794,7 +1790,7 @@ class App extends React.Component<AppProps, AppState> {
     data,
   }: {
     frameElement: ExcalidrawIframeElement;
-    data: MagicCacheData;
+    data: MagicGenerationData;
   }) => {
     if (data.status === "pending") {
       // We don't wanna persist pending state to storage. It should be in-app
@@ -1817,31 +1813,26 @@ class App extends React.Component<AppProps, AppState> {
     this.triggerRender();
   };
 
-  private getTextFromElements(elements: readonly ExcalidrawElement[]) {
-    const text = elements
-      .reduce((acc: string[], element) => {
-        if (isTextElement(element)) {
-          acc.push(element.text);
-        }
-        return acc;
-      }, [])
-      .join("\n\n");
-    return text;
+  public plugins: {
+    diagramToCode?: {
+      generate: GenerateDiagramToCode;
+    };
+  } = {};
+
+  public setPlugins(plugins: Partial<App["plugins"]>) {
+    Object.assign(this.plugins, plugins);
   }
 
   private async onMagicFrameGenerate(
     magicFrame: ExcalidrawMagicFrameElement,
     source: "button" | "upstream",
   ) {
-    if (!this.OPENAI_KEY) {
+    const generateDiagramToCode = this.plugins.diagramToCode?.generate;
+
+    if (!generateDiagramToCode) {
       this.setState({
-        openDialog: {
-          name: "settings",
-          tab: "diagram-to-code",
-          source: "generation",
-        },
+        errorMessage: "No diagram to code plugin found",
       });
-      trackEvent("ai", "generate (missing key)", "d2c");
       return;
     }
 
@@ -1880,68 +1871,50 @@ class App extends React.Component<AppProps, AppState> {
       selectedElementIds: { [frameElement.id]: true },
     });
 
-    const blob = await exportToBlob({
-      elements: this.scene.getNonDeletedElements(),
-      appState: {
-        ...this.state,
-        exportBackground: true,
-        viewBackgroundColor: this.state.viewBackgroundColor,
-      },
-      exportingFrame: magicFrame,
-      files: this.files,
-    });
-
-    const dataURL = await getDataURL(blob);
-
-    const textFromFrameChildren = this.getTextFromElements(magicFrameChildren);
-
     trackEvent("ai", "generate (start)", "d2c");
+    try {
+      const { html } = await generateDiagramToCode({
+        frame: magicFrame,
+        children: magicFrameChildren,
+      });
 
-    const result = await diagramToHTML({
-      image: dataURL,
-      apiKey: this.OPENAI_KEY,
-      text: textFromFrameChildren,
-      theme: this.state.theme,
-    });
+      trackEvent("ai", "generate (success)", "d2c");
 
-    if (!result.ok) {
+      if (!html.trim()) {
+        this.updateMagicGeneration({
+          frameElement,
+          data: {
+            status: "error",
+            code: "ERR_OAI",
+            message: "Nothing genereated :(",
+          },
+        });
+        return;
+      }
+
+      const parsedHtml =
+        html.includes("<!DOCTYPE html>") && html.includes("</html>")
+          ? html.slice(
+              html.indexOf("<!DOCTYPE html>"),
+              html.indexOf("</html>") + "</html>".length,
+            )
+          : html;
+
+      this.updateMagicGeneration({
+        frameElement,
+        data: { status: "done", html: parsedHtml },
+      });
+    } catch (error: any) {
       trackEvent("ai", "generate (failed)", "d2c");
-      console.error(result.error);
       this.updateMagicGeneration({
         frameElement,
         data: {
           status: "error",
           code: "ERR_OAI",
-          message: result.error?.message || "Unknown error during generation",
+          message: error.message || "Unknown error during generation",
         },
       });
-      return;
     }
-    trackEvent("ai", "generate (success)", "d2c");
-
-    if (result.choices[0].message.content == null) {
-      this.updateMagicGeneration({
-        frameElement,
-        data: {
-          status: "error",
-          code: "ERR_OAI",
-          message: "Nothing genereated :(",
-        },
-      });
-      return;
-    }
-
-    const message = result.choices[0].message.content;
-
-    const html = message.slice(
-      message.indexOf("<!DOCTYPE html>"),
-      message.indexOf("</html>") + "</html>".length,
-    );
-
-    this.updateMagicGeneration({
-      frameElement,
-      data: { status: "done", html },
-    });
   }
 
   private onIframeSrcCopy(element: ExcalidrawIframeElement) {
@@ -1955,70 +1928,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  private OPENAI_KEY: string | null = EditorLocalStorage.get(
-    EDITOR_LS_KEYS.OAI_API_KEY,
-  );
-  private OPENAI_KEY_IS_PERSISTED: boolean =
-    EditorLocalStorage.has(EDITOR_LS_KEYS.OAI_API_KEY) || false;
-
-  private onOpenAIKeyChange = (
-    openAIKey: string | null,
-    shouldPersist: boolean,
-  ) => {
-    this.OPENAI_KEY = openAIKey || null;
-    if (shouldPersist) {
-      const didPersist = EditorLocalStorage.set(
-        EDITOR_LS_KEYS.OAI_API_KEY,
-        openAIKey,
-      );
-      this.OPENAI_KEY_IS_PERSISTED = didPersist;
-    } else {
-      this.OPENAI_KEY_IS_PERSISTED = false;
-    }
-  };
-
-  private onMagicSettingsConfirm = (
-    apiKey: string,
-    shouldPersist: boolean,
-    source: "tool" | "generation" | "settings",
-  ) => {
-    this.OPENAI_KEY = apiKey || null;
-    this.onOpenAIKeyChange(this.OPENAI_KEY, shouldPersist);
-
-    if (source === "settings") {
-      return;
-    }
-
-    const selectedElements = this.scene.getSelectedElements({
-      selectedElementIds: this.state.selectedElementIds,
-    });
-
-    if (apiKey) {
-      if (selectedElements.length) {
-        this.onMagicframeToolSelect();
-      } else {
-        this.setActiveTool({ type: "magicframe" });
-      }
-    } else if (!isMagicFrameElement(selectedElements[0])) {
-      // even if user didn't end up setting api key, let's pick the tool
-      // so they can draw up a frame and move forward
-      this.setActiveTool({ type: "magicframe" });
-    }
-  };
-
   public onMagicframeToolSelect = () => {
-    if (!this.OPENAI_KEY) {
-      this.setState({
-        openDialog: {
-          name: "settings",
-          tab: "diagram-to-code",
-          source: "tool",
-        },
-      });
-      trackEvent("ai", "tool-select (missing key)", "d2c");
-      return;
-    }
-
     const selectedElements = this.scene.getSelectedElements({
       selectedElementIds: this.state.selectedElementIds,
     });
@@ -2333,6 +2243,11 @@ class App extends React.Component<AppProps, AppState> {
         }),
       };
     }
+    // FontFaceSet loadingdone event we listen on may not always fire
+    // (looking at you Safari), so on init we manually load fonts for current
+    // text elements on canvas, and rerender them once done. This also
+    // seems faster even in browsers that do fire the loadingdone event.
+    this.fonts.loadFontsForElements(scene.elements);
 
     this.resetStore();
     this.resetHistory();
@@ -2340,12 +2255,6 @@ class App extends React.Component<AppProps, AppState> {
       ...scene,
       storeAction: StoreAction.UPDATE,
     });
-
-    // FontFaceSet loadingdone event we listen on may not always
-    // fire (looking at you Safari), so on init we manually load all
-    // fonts and rerender scene text elements once done. This also
-    // seems faster even in browsers that do fire the loadingdone event.
-    this.fonts.load();
   };
 
   private isMobileBreakpoint = (width: number, height: number) => {
@@ -2438,10 +2347,6 @@ class App extends React.Component<AppProps, AppState> {
           configurable: true,
           value: this.store,
         },
-        fonts: {
-          configurable: true,
-          value: this.fonts,
-        },
       });
     }
 
@@ -2579,7 +2484,7 @@ class App extends React.Component<AppProps, AppState> {
       // rerender text elements on font load to fix #637 && #1553
       addEventListener(document.fonts, "loadingdone", (event) => {
         const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-        this.fonts.onLoaded(loadedFontFaces);
+        this.fonts.onFontsLoaded(loadedFontFaces);
       }),
       // Safari-only desktop pinch zoom
       addEventListener(
@@ -3057,7 +2962,9 @@ class App extends React.Component<AppProps, AppState> {
 
           try {
             const { elements: skeletonElements, files } =
-              await api.parseMermaidToExcalidraw(data.text);
+              await api.parseMermaidToExcalidraw(data.text, {
+                fontSize: DEFAULT_FONT_SIZE,
+              });
 
             const elements = convertToExcalidrawElements(skeletonElements, {
               regenerateIds: true,
@@ -3382,7 +3289,7 @@ class App extends React.Component<AppProps, AppState> {
       fontSize: textElementProps.fontSize,
       fontFamily: textElementProps.fontFamily,
     });
-    const lineHeight = getLineHeight(textElementProps.fontFamily);
+    const lineHeight = getDefaultLineHeight(textElementProps.fontFamily);
     const [x1, , x2] = getVisibleSceneBounds(this.state);
     // long texts should not go beyond 800 pixels in width nor should it go below 200 px
     const maxTextWidth = Math.max(Math.min((x2 - x1) * 0.5, 800), 200);
@@ -3400,13 +3307,13 @@ class App extends React.Component<AppProps, AppState> {
           });
 
           let metrics = measureText(originalText, fontString, lineHeight);
-          const isTextUnwrapped = metrics.width > maxTextWidth;
+          const isTextWrapped = metrics.width > maxTextWidth;
 
-          const text = isTextUnwrapped
+          const text = isTextWrapped
             ? wrapText(originalText, fontString, maxTextWidth)
             : originalText;
 
-          metrics = isTextUnwrapped
+          metrics = isTextWrapped
             ? measureText(text, fontString, lineHeight)
             : metrics;
 
@@ -3420,7 +3327,7 @@ class App extends React.Component<AppProps, AppState> {
             text,
             originalText,
             lineHeight,
-            autoResize: !isTextUnwrapped,
+            autoResize: !isTextWrapped,
             frameId: topLayerFrame ? topLayerFrame.id : null,
           });
           acc.push(element);
@@ -4110,36 +4017,6 @@ class App extends React.Component<AppProps, AppState> {
         }
       }
 
-      if (
-        !event[KEYS.CTRL_OR_CMD] &&
-        event.shiftKey &&
-        event.key.toLowerCase() === KEYS.F
-      ) {
-        const selectedElements = this.scene.getSelectedElements(this.state);
-
-        if (
-          this.state.activeTool.type === "selection" &&
-          !selectedElements.length
-        ) {
-          return;
-        }
-
-        if (
-          this.state.activeTool.type === "text" ||
-          selectedElements.find(
-            (element) =>
-              isTextElement(element) ||
-              getBoundTextElement(
-                element,
-                this.scene.getNonDeletedElementsMap(),
-              ),
-          )
-        ) {
-          event.preventDefault();
-          this.setState({ openPopup: "fontFamily" });
-        }
-      }
-
       if (event.key === KEYS.K && !event.altKey && !event[KEYS.CTRL_OR_CMD]) {
         if (this.state.activeTool.type === "laser") {
           this.setActiveTool({ type: "selection" });
@@ -4514,6 +4391,37 @@ class App extends React.Component<AppProps, AppState> {
     return null;
   }
 
+  private getBoundTextShape(element: ExcalidrawElement): GeometricShape | null {
+    const boundTextElement = getBoundTextElement(
+      element,
+      this.scene.getNonDeletedElementsMap(),
+    );
+
+    if (boundTextElement) {
+      if (element.type === "arrow") {
+        return getElementShape(
+          {
+            ...boundTextElement,
+            // arrow's bound text accurate position is not stored in the element's property
+            // but rather calculated and returned from the following static method
+            ...LinearElementEditor.getBoundTextElementPosition(
+              element,
+              boundTextElement,
+              this.scene.getNonDeletedElementsMap(),
+            ),
+          },
+          this.scene.getNonDeletedElementsMap(),
+        );
+      }
+      return getElementShape(
+        boundTextElement,
+        this.scene.getNonDeletedElementsMap(),
+      );
+    }
+
+    return null;
+  }
+
   private getElementAtPosition(
     x: number,
     y: number,
@@ -4645,7 +4553,7 @@ class App extends React.Component<AppProps, AppState> {
     const hitBoundTextOfElement = hitElementBoundText(
       x,
       y,
-      getBoundTextShape(element, this.scene.getNonDeletedElementsMap()),
+      this.getBoundTextShape(element),
     );
     if (hitBoundTextOfElement) {
       return true;
@@ -4763,7 +4671,7 @@ class App extends React.Component<AppProps, AppState> {
       existingTextElement?.fontFamily || this.state.currentItemFontFamily;
 
     const lineHeight =
-      existingTextElement?.lineHeight || getLineHeight(fontFamily);
+      existingTextElement?.lineHeight || getDefaultLineHeight(fontFamily);
     const fontSize = this.state.currentItemFontSize;
 
     if (

packages/excalidraw/components/ButtonIcon.scss

@@ -1,12 +0,0 @@
-@import "../css/theme";
-
-.excalidraw {
-  button.standalone {
-    @include outlineButtonIconStyles;
-
-    & > * {
-      // dissalow pointer events on children, so we always have event.target on the button itself
-      pointer-events: none;
-    }
-  }
-}

packages/excalidraw/components/ButtonIcon.tsx

@@ -1,36 +0,0 @@
-import { forwardRef } from "react";
-import clsx from "clsx";
-
-import "./ButtonIcon.scss";
-
-interface ButtonIconProps {
-  icon: JSX.Element;
-  title: string;
-  className?: string;
-  testId?: string;
-  /** if not supplied, defaults to value identity check */
-  active?: boolean;
-  /** include standalone style (could interfere with parent styles) */
-  standalone?: boolean;
-  onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
-
-export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
-  (props, ref) => {
-    const { title, className, testId, active, standalone, icon, onClick } =
-      props;
-    return (
-      <button
-        type="button"
-        ref={ref}
-        key={title}
-        title={title}
-        data-testid={testId}
-        className={clsx(className, { standalone, active })}
-        onClick={onClick}
-      >
-        {icon}
-      </button>
-    );
-  },
-);

packages/excalidraw/components/ButtonIconSelect.tsx

@@ -1,5 +1,4 @@
 import clsx from "clsx";
-import { ButtonIcon } from "./ButtonIcon";
 
 // TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
 export const ButtonIconSelect = <T extends Object>(
@@ -25,17 +24,21 @@ export const ButtonIconSelect = <T extends Object>(
       }
   ),
 ) => (
-  <div className="buttonList">
+  <div className="buttonList buttonListIcon">
     {props.options.map((option) =>
       props.type === "button" ? (
-        <ButtonIcon
+        <button
+          type="button"
           key={option.text}
-          icon={option.icon}
-          title={option.text}
-          testId={option.testId}
-          active={option.active ?? props.value === option.value}
           onClick={(event) => props.onClick(option.value, event)}
-        />
+          className={clsx({
+            active: option.active ?? props.value === option.value,
+          })}
+          data-testid={option.testId}
+          title={option.text}
+        >
+          {option.icon}
+        </button>
       ) : (
         <label
           key={option.text}

packages/excalidraw/components/ButtonSeparator.tsx

@@ -1,10 +0,0 @@
-export const ButtonSeparator = () => (
-  <div
-    style={{
-      width: 1,
-      height: "1rem",
-      backgroundColor: "var(--default-border-color)",
-      margin: "0 auto",
-    }}
-  />
-);

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -20,7 +20,7 @@
     align-items: center;
 
     @include isMobile {
-      max-width: 11rem;
+      max-width: 175px;
     }
   }
 

packages/excalidraw/components/ColorPicker/ColorPicker.tsx

@@ -1,24 +1,22 @@
-import { isTransparent } from "../../utils";
+import { isInteractive, isTransparent, isWritableElement } from "../../utils";
 import type { ExcalidrawElement } from "../../element/types";
 import type { AppState } from "../../types";
 import { TopPicks } from "./TopPicks";
-import { ButtonSeparator } from "../ButtonSeparator";
 import { Picker } from "./Picker";
 import * as Popover from "@radix-ui/react-popover";
 import { useAtom } from "jotai";
 import type { ColorPickerType } from "./colorPickerUtils";
 import { activeColorPickerSectionAtom } from "./colorPickerUtils";
-import { useExcalidrawContainer } from "../App";
+import { useDevice, useExcalidrawContainer } from "../App";
 import type { ColorTuple, ColorPaletteCustom } from "../../colors";
 import { COLOR_PALETTE } from "../../colors";
 import PickerHeading from "./PickerHeading";
 import { t } from "../../i18n";
 import clsx from "clsx";
-import { useRef } from "react";
 import { jotaiScope } from "../../jotai";
 import { ColorInput } from "./ColorInput";
+import { useRef } from "react";
 import { activeEyeDropperAtom } from "../EyeDropper";
-import { PropertiesPopover } from "../PropertiesPopover";
 
 import "./ColorPicker.scss";
 
@@ -73,7 +71,6 @@ const ColorPickerPopupContent = ({
   | "palette"
   | "updateData"
 >) => {
-  const { container } = useExcalidrawContainer();
   const [, setActiveColorPickerSection] = useAtom(activeColorPickerSectionAtom);
 
   const [eyeDropperState, setEyeDropperState] = useAtom(
@@ -81,6 +78,9 @@ const ColorPickerPopupContent = ({
     jotaiScope,
   );
 
+  const { container } = useExcalidrawContainer();
+  const device = useDevice();
+
   const colorInputJSX = (
     <div>
       <PickerHeading>{t("colorPicker.hexCode")}</PickerHeading>
@@ -94,7 +94,6 @@ const ColorPickerPopupContent = ({
       />
     </div>
   );
-
   const popoverRef = useRef<HTMLDivElement>(null);
 
   const focusPickerContent = () => {
@@ -104,73 +103,120 @@ const ColorPickerPopupContent = ({
   };
 
   return (
-    <PropertiesPopover
-      container={container}
-      style={{ maxWidth: "208px" }}
-      onFocusOutside={(event) => {
-        // refocus due to eye dropper
-        focusPickerContent();
-        event.preventDefault();
-      }}
-      onPointerDownOutside={(event) => {
-        if (eyeDropperState) {
-          // prevent from closing if we click outside the popover
-          // while eyedropping (e.g. click when clicking the sidebar;
-          // the eye-dropper-backdrop is prevented downstream)
+    <Popover.Portal container={container}>
+      <Popover.Content
+        ref={popoverRef}
+        className="focus-visible-none"
+        data-prevent-outside-click
+        onFocusOutside={(event) => {
+          focusPickerContent();
           event.preventDefault();
-        }
-      }}
-      onClose={() => {
-        updateData({ openPopup: null });
-        setActiveColorPickerSection(null);
-      }}
-    >
-      {palette ? (
-        <Picker
-          palette={palette}
-          color={color}
-          onChange={(changedColor) => {
-            onChange(changedColor);
-          }}
-          onEyeDropperToggle={(force) => {
-            setEyeDropperState((state) => {
-              if (force) {
-                state = state || {
-                  keepOpenOnAlt: true,
-                  onSelect: onChange,
-                  colorPickerType: type,
-                };
-                state.keepOpenOnAlt = true;
-                return state;
-              }
+        }}
+        onPointerDownOutside={(event) => {
+          if (eyeDropperState) {
+            // prevent from closing if we click outside the popover
+            // while eyedropping (e.g. click when clicking the sidebar;
+            // the eye-dropper-backdrop is prevented downstream)
+            event.preventDefault();
+          }
+        }}
+        onCloseAutoFocus={(e) => {
+          e.stopPropagation();
+          // prevents focusing the trigger
+          e.preventDefault();
 
-              return force === false || state
-                ? null
-                : {
-                    keepOpenOnAlt: false,
+          // return focus to excalidraw container unless
+          // user focuses an interactive element, such as a button, or
+          // enters the text editor by clicking on canvas with the text tool
+          if (container && !isInteractive(document.activeElement)) {
+            container.focus();
+          }
+
+          updateData({ openPopup: null });
+          setActiveColorPickerSection(null);
+        }}
+        side={
+          device.editor.isMobile && !device.viewport.isLandscape
+            ? "bottom"
+            : "right"
+        }
+        align={
+          device.editor.isMobile && !device.viewport.isLandscape
+            ? "center"
+            : "start"
+        }
+        alignOffset={-16}
+        sideOffset={20}
+        style={{
+          zIndex: "var(--zIndex-layerUI)",
+          backgroundColor: "var(--popup-bg-color)",
+          maxWidth: "208px",
+          maxHeight: window.innerHeight,
+          padding: "12px",
+          borderRadius: "8px",
+          boxSizing: "border-box",
+          overflowY: "auto",
+          boxShadow:
+            "0px 7px 14px rgba(0, 0, 0, 0.05), 0px 0px 3.12708px rgba(0, 0, 0, 0.0798), 0px 0px 0.931014px rgba(0, 0, 0, 0.1702)",
+        }}
+      >
+        {palette ? (
+          <Picker
+            palette={palette}
+            color={color}
+            onChange={(changedColor) => {
+              onChange(changedColor);
+            }}
+            onEyeDropperToggle={(force) => {
+              setEyeDropperState((state) => {
+                if (force) {
+                  state = state || {
+                    keepOpenOnAlt: true,
                     onSelect: onChange,
                     colorPickerType: type,
                   };
-            });
+                  state.keepOpenOnAlt = true;
+                  return state;
+                }
+
+                return force === false || state
+                  ? null
+                  : {
+                      keepOpenOnAlt: false,
+                      onSelect: onChange,
+                      colorPickerType: type,
+                    };
+              });
+            }}
+            onEscape={(event) => {
+              if (eyeDropperState) {
+                setEyeDropperState(null);
+              } else if (isWritableElement(event.target)) {
+                focusPickerContent();
+              } else {
+                updateData({ openPopup: null });
+              }
+            }}
+            label={label}
+            type={type}
+            elements={elements}
+            updateData={updateData}
+          >
+            {colorInputJSX}
+          </Picker>
+        ) : (
+          colorInputJSX
+        )}
+        <Popover.Arrow
+          width={20}
+          height={10}
+          style={{
+            fill: "var(--popup-bg-color)",
+            filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
           }}
-          onEscape={(event) => {
-            if (eyeDropperState) {
-              setEyeDropperState(null);
-            } else {
-              updateData({ openPopup: null });
-            }
-          }}
-          label={label}
-          type={type}
-          elements={elements}
-          updateData={updateData}
-        >
-          {colorInputJSX}
-        </Picker>
-      ) : (
-        colorInputJSX
-      )}
-    </PropertiesPopover>
+        />
+      </Popover.Content>
+    </Popover.Portal>
   );
 };
 
@@ -186,7 +232,7 @@ const ColorPickerTrigger = ({
   return (
     <Popover.Trigger
       type="button"
-      className={clsx("color-picker__button active-color properties-trigger", {
+      className={clsx("color-picker__button active-color", {
         "is-transparent": color === "transparent" || !color,
       })}
       aria-label={label}
@@ -222,7 +268,14 @@ export const ColorPicker = ({
           type={type}
           topPicks={topPicks}
         />
-        <ButtonSeparator />
+        <div
+          style={{
+            width: 1,
+            height: "100%",
+            backgroundColor: "var(--default-border-color)",
+            margin: "0 auto",
+          }}
+        />
         <Popover.Root
           open={appState.openPopup === type}
           onOpenChange={(open) => {

packages/excalidraw/components/ColorPicker/Picker.tsx

@@ -138,7 +138,7 @@ export const Picker = ({
             event.stopPropagation();
           }
         }}
-        className="color-picker-content properties-content"
+        className="color-picker-content"
         // to allow focusing by clicking but not by tabbing
         tabIndex={-1}
       >

packages/excalidraw/components/DiagramToCodePlugin/DiagramToCodePlugin.tsx

@@ -0,0 +1,17 @@
+import { useLayoutEffect } from "react";
+import { useApp } from "../App";
+import type { GenerateDiagramToCode } from "../../types";
+
+export const DiagramToCodePlugin = (props: {
+  generate: GenerateDiagramToCode;
+}) => {
+  const app = useApp();
+
+  useLayoutEffect(() => {
+    app.setPlugins({
+      diagramToCode: { generate: props.generate },
+    });
+  }, [app, props.generate]);
+
+  return null;
+};

packages/excalidraw/components/FontPicker/FontPicker.scss

@@ -1,15 +0,0 @@
-@import "../../css/variables.module.scss";
-
-.excalidraw {
-  .FontPicker__container {
-    display: grid;
-    grid-template-columns: calc(1rem + 3 * var(--default-button-size)) 1rem 1fr; // calc ~ 2 gaps + 4 buttons
-    align-items: center;
-
-    @include isMobile {
-      max-width: calc(
-        2rem + 4 * var(--default-button-size)
-      ); // 4 gaps + 4 buttons
-    }
-  }
-}

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -1,110 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import * as Popover from "@radix-ui/react-popover";
-
-import { FontPickerList } from "./FontPickerList";
-import { FontPickerTrigger } from "./FontPickerTrigger";
-import { ButtonIconSelect } from "../ButtonIconSelect";
-import {
-  FontFamilyCodeIcon,
-  FontFamilyNormalIcon,
-  FreedrawIcon,
-} from "../icons";
-import { ButtonSeparator } from "../ButtonSeparator";
-import type { FontFamilyValues } from "../../element/types";
-import { FONT_FAMILY } from "../../constants";
-import { t } from "../../i18n";
-
-import "./FontPicker.scss";
-
-export const DEFAULT_FONTS = [
-  {
-    value: FONT_FAMILY.Excalifont,
-    icon: FreedrawIcon,
-    text: t("labels.handDrawn"),
-    testId: "font-family-handrawn",
-  },
-  {
-    value: FONT_FAMILY.Nunito,
-    icon: FontFamilyNormalIcon,
-    text: t("labels.normal"),
-    testId: "font-family-normal",
-  },
-  {
-    value: FONT_FAMILY["Comic Shanns"],
-    icon: FontFamilyCodeIcon,
-    text: t("labels.code"),
-    testId: "font-family-code",
-  },
-];
-
-const defaultFontFamilies = new Set(DEFAULT_FONTS.map((x) => x.value));
-
-export const isDefaultFont = (fontFamily: number | null) => {
-  if (!fontFamily) {
-    return false;
-  }
-
-  return defaultFontFamilies.has(fontFamily);
-};
-
-interface FontPickerProps {
-  isOpened: boolean;
-  selectedFontFamily: FontFamilyValues | null;
-  hoveredFontFamily: FontFamilyValues | null;
-  onSelect: (fontFamily: FontFamilyValues) => void;
-  onHover: (fontFamily: FontFamilyValues) => void;
-  onLeave: () => void;
-  onPopupChange: (open: boolean) => void;
-}
-
-export const FontPicker = React.memo(
-  ({
-    isOpened,
-    selectedFontFamily,
-    hoveredFontFamily,
-    onSelect,
-    onHover,
-    onLeave,
-    onPopupChange,
-  }: FontPickerProps) => {
-    const defaultFonts = useMemo(() => DEFAULT_FONTS, []);
-    const onSelectCallback = useCallback(
-      (value: number | false) => {
-        if (value) {
-          onSelect(value);
-        }
-      },
-      [onSelect],
-    );
-
-    return (
-      <div role="dialog" aria-modal="true" className="FontPicker__container">
-        <ButtonIconSelect<FontFamilyValues | false>
-          type="button"
-          options={defaultFonts}
-          value={selectedFontFamily}
-          onClick={onSelectCallback}
-        />
-        <ButtonSeparator />
-        <Popover.Root open={isOpened} onOpenChange={onPopupChange}>
-          <FontPickerTrigger selectedFontFamily={selectedFontFamily} />
-          {isOpened && (
-            <FontPickerList
-              selectedFontFamily={selectedFontFamily}
-              hoveredFontFamily={hoveredFontFamily}
-              onSelect={onSelectCallback}
-              onHover={onHover}
-              onLeave={onLeave}
-              onOpen={() => onPopupChange(true)}
-              onClose={() => onPopupChange(false)}
-            />
-          )}
-        </Popover.Root>
-      </div>
-    );
-  },
-  (prev, next) =>
-    prev.isOpened === next.isOpened &&
-    prev.selectedFontFamily === next.selectedFontFamily &&
-    prev.hoveredFontFamily === next.hoveredFontFamily,
-);

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -1,268 +0,0 @@
-import React, {
-  useMemo,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  type KeyboardEventHandler,
-} from "react";
-import { useApp, useAppProps, useExcalidrawContainer } from "../App";
-import { PropertiesPopover } from "../PropertiesPopover";
-import { QuickSearch } from "../QuickSearch";
-import { ScrollableList } from "../ScrollableList";
-import DropdownMenuGroup from "../dropdownMenu/DropdownMenuGroup";
-import DropdownMenuItem, {
-  DropDownMenuItemBadgeType,
-  DropDownMenuItemBadge,
-} from "../dropdownMenu/DropdownMenuItem";
-import { type FontFamilyValues } from "../../element/types";
-import { arrayToList, debounce, getFontFamilyString } from "../../utils";
-import { t } from "../../i18n";
-import { fontPickerKeyHandler } from "./keyboardNavHandlers";
-import { Fonts } from "../../fonts";
-import type { ValueOf } from "../../utility-types";
-
-export interface FontDescriptor {
-  value: number;
-  icon: JSX.Element;
-  text: string;
-  deprecated?: true;
-  badge?: {
-    type: ValueOf<typeof DropDownMenuItemBadgeType>;
-    placeholder: string;
-  };
-}
-
-interface FontPickerListProps {
-  selectedFontFamily: FontFamilyValues | null;
-  hoveredFontFamily: FontFamilyValues | null;
-  onSelect: (value: number) => void;
-  onHover: (value: number) => void;
-  onLeave: () => void;
-  onOpen: () => void;
-  onClose: () => void;
-}
-
-export const FontPickerList = React.memo(
-  ({
-    selectedFontFamily,
-    hoveredFontFamily,
-    onSelect,
-    onHover,
-    onLeave,
-    onOpen,
-    onClose,
-  }: FontPickerListProps) => {
-    const { container } = useExcalidrawContainer();
-    const { fonts } = useApp();
-    const { showDeprecatedFonts } = useAppProps();
-
-    const [searchTerm, setSearchTerm] = useState("");
-    const inputRef = useRef<HTMLInputElement>(null);
-    const allFonts = useMemo(
-      () =>
-        Array.from(Fonts.registered.entries())
-          .filter(([_, { metadata }]) => !metadata.serverSide)
-          .map(([familyId, { metadata, fontFaces }]) => {
-            const font = {
-              value: familyId,
-              icon: metadata.icon,
-              text: fontFaces[0].fontFace.family,
-            };
-
-            if (metadata.deprecated) {
-              Object.assign(font, {
-                deprecated: metadata.deprecated,
-                badge: {
-                  type: DropDownMenuItemBadgeType.RED,
-                  placeholder: t("fontList.badge.old"),
-                },
-              });
-            }
-
-            return font as FontDescriptor;
-          })
-          .sort((a, b) =>
-            a.text.toLowerCase() > b.text.toLowerCase() ? 1 : -1,
-          ),
-      [],
-    );
-
-    const sceneFamilies = useMemo(
-      () => new Set(fonts.sceneFamilies),
-      // cache per selected font family, so hover re-render won't mess it up
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [selectedFontFamily],
-    );
-
-    const sceneFonts = useMemo(
-      () => allFonts.filter((font) => sceneFamilies.has(font.value)), // always show all the fonts in the scene, even those that were deprecated
-      [allFonts, sceneFamilies],
-    );
-
-    const availableFonts = useMemo(
-      () =>
-        allFonts.filter(
-          (font) =>
-            !sceneFamilies.has(font.value) &&
-            (showDeprecatedFonts || !font.deprecated), // skip deprecated fonts
-        ),
-      [allFonts, sceneFamilies, showDeprecatedFonts],
-    );
-
-    const filteredFonts = useMemo(
-      () =>
-        arrayToList(
-          [...sceneFonts, ...availableFonts].filter((font) =>
-            font.text?.toLowerCase().includes(searchTerm),
-          ),
-        ),
-      [sceneFonts, availableFonts, searchTerm],
-    );
-
-    const hoveredFont = useMemo(() => {
-      let font;
-
-      if (hoveredFontFamily) {
-        font = filteredFonts.find((font) => font.value === hoveredFontFamily);
-      } else if (selectedFontFamily) {
-        font = filteredFonts.find((font) => font.value === selectedFontFamily);
-      }
-
-      if (!font && searchTerm) {
-        if (filteredFonts[0]?.value) {
-          // hover first element on search
-          onHover(filteredFonts[0].value);
-        } else {
-          // re-render cache on no results
-          onLeave();
-        }
-      }
-
-      return font;
-    }, [
-      hoveredFontFamily,
-      selectedFontFamily,
-      searchTerm,
-      filteredFonts,
-      onHover,
-      onLeave,
-    ]);
-
-    const onKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(
-      (event) => {
-        const handled = fontPickerKeyHandler({
-          event,
-          inputRef,
-          hoveredFont,
-          filteredFonts,
-          onSelect,
-          onHover,
-          onClose,
-        });
-
-        if (handled) {
-          event.preventDefault();
-          event.stopPropagation();
-        }
-      },
-      [hoveredFont, filteredFonts, onSelect, onHover, onClose],
-    );
-
-    useEffect(() => {
-      onOpen();
-
-      return () => {
-        onClose();
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    const sceneFilteredFonts = useMemo(
-      () => filteredFonts.filter((font) => sceneFamilies.has(font.value)),
-      [filteredFonts, sceneFamilies],
-    );
-
-    const availableFilteredFonts = useMemo(
-      () => filteredFonts.filter((font) => !sceneFamilies.has(font.value)),
-      [filteredFonts, sceneFamilies],
-    );
-
-    const renderFont = (font: FontDescriptor, index: number) => (
-      <DropdownMenuItem
-        key={font.value}
-        icon={font.icon}
-        value={font.value}
-        order={index}
-        textStyle={{
-          fontFamily: getFontFamilyString({ fontFamily: font.value }),
-        }}
-        hovered={font.value === hoveredFont?.value}
-        selected={font.value === selectedFontFamily}
-        // allow to tab between search and selected font
-        tabIndex={font.value === selectedFontFamily ? 0 : -1}
-        onClick={(e) => {
-          onSelect(Number(e.currentTarget.value));
-        }}
-        onMouseMove={() => {
-          if (hoveredFont?.value !== font.value) {
-            onHover(font.value);
-          }
-        }}
-      >
-        {font.text}
-        {font.badge && (
-          <DropDownMenuItemBadge type={font.badge.type}>
-            {font.badge.placeholder}
-          </DropDownMenuItemBadge>
-        )}
-      </DropdownMenuItem>
-    );
-
-    const groups = [];
-
-    if (sceneFilteredFonts.length) {
-      groups.push(
-        <DropdownMenuGroup title={t("fontList.sceneFonts")} key="group_1">
-          {sceneFilteredFonts.map(renderFont)}
-        </DropdownMenuGroup>,
-      );
-    }
-
-    if (availableFilteredFonts.length) {
-      groups.push(
-        <DropdownMenuGroup title={t("fontList.availableFonts")} key="group_2">
-          {availableFilteredFonts.map((font, index) =>
-            renderFont(font, index + sceneFilteredFonts.length),
-          )}
-        </DropdownMenuGroup>,
-      );
-    }
-
-    return (
-      <PropertiesPopover
-        className="properties-content"
-        container={container}
-        style={{ width: "15rem" }}
-        onClose={onClose}
-        onPointerLeave={onLeave}
-        onKeyDown={onKeyDown}
-      >
-        <QuickSearch
-          ref={inputRef}
-          placeholder={t("quickSearch.placeholder")}
-          onChange={debounce(setSearchTerm, 20)}
-        />
-        <ScrollableList
-          className="dropdown-menu fonts manual-hover"
-          placeholder={t("fontList.empty")}
-        >
-          {groups.length ? groups : null}
-        </ScrollableList>
-      </PropertiesPopover>
-    );
-  },
-  (prev, next) =>
-    prev.selectedFontFamily === next.selectedFontFamily &&
-    prev.hoveredFontFamily === next.hoveredFontFamily,
-);

packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx

@@ -1,38 +0,0 @@
-import * as Popover from "@radix-ui/react-popover";
-import { useMemo } from "react";
-import { ButtonIcon } from "../ButtonIcon";
-import { TextIcon } from "../icons";
-import type { FontFamilyValues } from "../../element/types";
-import { t } from "../../i18n";
-import { isDefaultFont } from "./FontPicker";
-
-interface FontPickerTriggerProps {
-  selectedFontFamily: FontFamilyValues | null;
-}
-
-export const FontPickerTrigger = ({
-  selectedFontFamily,
-}: FontPickerTriggerProps) => {
-  const isTriggerActive = useMemo(
-    () => Boolean(selectedFontFamily && !isDefaultFont(selectedFontFamily)),
-    [selectedFontFamily],
-  );
-
-  return (
-    <Popover.Trigger asChild>
-      {/* Empty div as trigger so it's stretched 100% due to different button sizes */}
-      <div>
-        <ButtonIcon
-          standalone
-          icon={TextIcon}
-          title={t("labels.showFonts")}
-          className="properties-trigger"
-          testId={"font-family-show-fonts"}
-          active={isTriggerActive}
-          // no-op
-          onClick={() => {}}
-        />
-      </div>
-    </Popover.Trigger>
-  );
-};

packages/excalidraw/components/FontPicker/keyboardNavHandlers.ts

@@ -1,66 +0,0 @@
-import type { Node } from "../../utils";
-import { KEYS } from "../../keys";
-import { type FontDescriptor } from "./FontPickerList";
-
-interface FontPickerKeyNavHandlerProps {
-  event: React.KeyboardEvent<HTMLDivElement>;
-  inputRef: React.RefObject<HTMLInputElement>;
-  hoveredFont: Node<FontDescriptor> | undefined;
-  filteredFonts: Node<FontDescriptor>[];
-  onClose: () => void;
-  onSelect: (value: number) => void;
-  onHover: (value: number) => void;
-}
-
-export const fontPickerKeyHandler = ({
-  event,
-  inputRef,
-  hoveredFont,
-  filteredFonts,
-  onClose,
-  onSelect,
-  onHover,
-}: FontPickerKeyNavHandlerProps) => {
-  if (
-    !event[KEYS.CTRL_OR_CMD] &&
-    event.shiftKey &&
-    event.key.toLowerCase() === KEYS.F
-  ) {
-    // refocus input on the popup trigger shortcut
-    inputRef.current?.focus();
-    return true;
-  }
-
-  if (event.key === KEYS.ESCAPE) {
-    onClose();
-    return true;
-  }
-
-  if (event.key === KEYS.ENTER) {
-    if (hoveredFont?.value) {
-      onSelect(hoveredFont.value);
-    }
-
-    return true;
-  }
-
-  if (event.key === KEYS.ARROW_DOWN) {
-    if (hoveredFont?.next) {
-      onHover(hoveredFont.next.value);
-    } else if (filteredFonts[0]?.value) {
-      onHover(filteredFonts[0].value);
-    }
-
-    return true;
-  }
-
-  if (event.key === KEYS.ARROW_UP) {
-    if (hoveredFont?.prev) {
-      onHover(hoveredFont.prev.value);
-    } else if (filteredFonts[filteredFonts.length - 1]?.value) {
-      onHover(filteredFonts[filteredFonts.length - 1].value);
-    }
-
-    return true;
-  }
-};

packages/excalidraw/components/HelpDialog.scss

@@ -8,7 +8,7 @@
 
     h3 {
       margin: 1.5rem 0;
-      font-weight: 700;
+      font-weight: bold;
       font-size: 1.125rem;
     }
 
@@ -82,7 +82,7 @@
     &__island {
       h4 {
         font-size: 1rem;
-        font-weight: 700;
+        font-weight: bold;
         margin: 0;
         margin-bottom: 0.625rem;
       }

packages/excalidraw/components/HelpDialog.tsx

@@ -458,10 +458,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
               label={t("labels.showBackground")}
               shortcuts={[getShortcutKey("G")]}
             />
-            <Shortcut
-              label={t("labels.showFonts")}
-              shortcuts={[getShortcutKey("Shift+F")]}
-            />
             <Shortcut
               label={t("labels.decreaseFontSize")}
               shortcuts={[getShortcutKey("CtrlOrCmd+Shift+<")]}

packages/excalidraw/components/LayerUI.tsx

@@ -60,7 +60,6 @@ import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserPointerButton";
-import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";
@@ -85,14 +84,6 @@ interface LayerUIProps {
   children?: React.ReactNode;
   app: AppClassProperties;
   isCollaborating: boolean;
-  openAIKey: string | null;
-  isOpenAIKeyPersisted: boolean;
-  onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
-  onMagicSettingsConfirm: (
-    apiKey: string,
-    shouldPersist: boolean,
-    source: "tool" | "generation" | "settings",
-  ) => void;
 }
 
 const DefaultMainMenu: React.FC<{
@@ -149,10 +140,6 @@ const LayerUI = ({
   children,
   app,
   isCollaborating,
-  openAIKey,
-  isOpenAIKeyPersisted,
-  onOpenAIAPIKeyChange,
-  onMagicSettingsConfirm,
 }: LayerUIProps) => {
   const device = useDevice();
   const tunnels = useInitializeTunnels();
@@ -482,25 +469,6 @@ const LayerUI = ({
           }}
         />
       )}
-      {appState.openDialog?.name === "settings" && (
-        <MagicSettings
-          openAIKey={openAIKey}
-          isPersisted={isOpenAIKeyPersisted}
-          onChange={onOpenAIAPIKeyChange}
-          onConfirm={(apiKey, shouldPersist) => {
-            const source =
-              appState.openDialog?.name === "settings"
-                ? appState.openDialog?.source
-                : "settings";
-            setAppState({ openDialog: null }, () => {
-              onMagicSettingsConfirm(apiKey, shouldPersist, source);
-            });
-          }}
-          onClose={() => {
-            setAppState({ openDialog: null });
-          }}
-        />
-      )}
       <ActiveConfirmDialog />
       <tunnels.OverwriteConfirmDialogTunnel.Out />
       {renderImageExportDialog()}

packages/excalidraw/components/LibraryMenu.scss

@@ -11,7 +11,7 @@
   .library-actions-counter {
     background-color: var(--color-primary);
     color: var(--color-primary-light);
-    font-weight: 700;
+    font-weight: bold;
     display: flex;
     align-items: center;
     justify-content: center;

packages/excalidraw/components/LibraryMenuItems.scss

@@ -13,7 +13,7 @@
 
     &__label {
       color: var(--color-primary);
-      font-weight: 700;
+      font-weight: bold;
       font-size: 1.125rem;
       margin-bottom: 0.75rem;
     }
@@ -62,7 +62,7 @@
     &__header {
       color: var(--color-primary);
       font-size: 1.125rem;
-      font-weight: 700;
+      font-weight: bold;
       margin-bottom: 0.75rem;
       width: 100%;
       padding-right: 4rem; // due to dropdown button

packages/excalidraw/components/MagicSettings.scss

@@ -1,18 +0,0 @@
-.excalidraw {
-  .MagicSettings {
-    .Island {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .MagicSettings-confirm {
-    padding: 0.5rem 1rem;
-  }
-
-  .MagicSettings__confirm {
-    margin-top: 2rem;
-    margin-right: auto;
-  }
-}

packages/excalidraw/components/MagicSettings.tsx

@@ -1,160 +0,0 @@
-import { useState } from "react";
-import { Dialog } from "./Dialog";
-import { TextField } from "./TextField";
-import { MagicIcon, OpenAIIcon } from "./icons";
-import { FilledButton } from "./FilledButton";
-import { CheckboxItem } from "./CheckboxItem";
-import { KEYS } from "../keys";
-import { useUIAppState } from "../context/ui-appState";
-import { InlineIcon } from "./InlineIcon";
-import { Paragraph } from "./Paragraph";
-
-import "./MagicSettings.scss";
-import TTDDialogTabs from "./TTDDialog/TTDDialogTabs";
-import { TTDDialogTab } from "./TTDDialog/TTDDialogTab";
-
-export const MagicSettings = (props: {
-  openAIKey: string | null;
-  isPersisted: boolean;
-  onChange: (key: string, shouldPersist: boolean) => void;
-  onConfirm: (key: string, shouldPersist: boolean) => void;
-  onClose: () => void;
-}) => {
-  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
-  const [shouldPersist, setShouldPersist] = useState<boolean>(
-    props.isPersisted,
-  );
-
-  const appState = useUIAppState();
-
-  const onConfirm = () => {
-    props.onConfirm(keyInputValue.trim(), shouldPersist);
-  };
-
-  if (appState.openDialog?.name !== "settings") {
-    return null;
-  }
-
-  return (
-    <Dialog
-      onCloseRequest={() => {
-        props.onClose();
-        props.onConfirm(keyInputValue.trim(), shouldPersist);
-      }}
-      title={
-        <div style={{ display: "flex" }}>
-          Wireframe to Code (AI){" "}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "0.1rem 0.5rem",
-              marginLeft: "1rem",
-              fontSize: 14,
-              borderRadius: "12px",
-              background: "var(--color-promo)",
-              color: "var(--color-surface-lowest)",
-            }}
-          >
-            Experimental
-          </div>
-        </div>
-      }
-      className="MagicSettings"
-      autofocus={false}
-    >
-      {/*  <h2
-        style={{
-          margin: 0,
-          fontSize: "1.25rem",
-          paddingLeft: "2.5rem",
-        }}
-      >
-        AI Settings
-      </h2> */}
-      <TTDDialogTabs dialog="settings" tab={appState.openDialog.tab}>
-        {/* <TTDDialogTabTriggers>
-          <TTDDialogTabTrigger tab="text-to-diagram">
-            <InlineIcon icon={brainIcon} /> Text to diagram
-          </TTDDialogTabTrigger>
-          <TTDDialogTabTrigger tab="diagram-to-code">
-            <InlineIcon icon={MagicIcon} /> Wireframe to code
-          </TTDDialogTabTrigger>
-        </TTDDialogTabTriggers> */}
-        {/* <TTDDialogTab className="ttd-dialog-content" tab="text-to-diagram">
-          TODO
-        </TTDDialogTab> */}
-        <TTDDialogTab
-          //  className="ttd-dialog-content"
-          tab="diagram-to-code"
-        >
-          <Paragraph>
-            For the diagram-to-code feature we use{" "}
-            <InlineIcon icon={OpenAIIcon} />
-            OpenAI.
-          </Paragraph>
-          <Paragraph>
-            While the OpenAI API is in beta, its use is strictly limited — as
-            such we require you use your own API key. You can create an{" "}
-            <a
-              href="https://platform.openai.com/login?launch"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              OpenAI account
-            </a>
-            , add a small credit (5 USD minimum), and{" "}
-            <a
-              href="https://platform.openai.com/api-keys"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              generate your own API key
-            </a>
-            .
-          </Paragraph>
-          <Paragraph>
-            Your OpenAI key does not leave the browser, and you can also set
-            your own limit in your OpenAI account dashboard if needed.
-          </Paragraph>
-          <TextField
-            isRedacted
-            value={keyInputValue}
-            placeholder="Paste your API key here"
-            label="OpenAI API key"
-            onChange={(value) => {
-              setKeyInputValue(value);
-              props.onChange(value.trim(), shouldPersist);
-            }}
-            selectOnRender
-            onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
-          />
-          <Paragraph>
-            By default, your API token is not persisted anywhere so you'll need
-            to insert it again after reload. But, you can persist locally in
-            your browser below.
-          </Paragraph>
-
-          <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
-            Persist API key in browser storage
-          </CheckboxItem>
-
-          <Paragraph>
-            Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
-            tool to wrap your elements in a frame that will then allow you to
-            turn it into code. This dialog can be accessed using the{" "}
-            <b>AI Settings</b> <InlineIcon icon={OpenAIIcon} />.
-          </Paragraph>
-
-          <FilledButton
-            className="MagicSettings__confirm"
-            size="large"
-            label="Confirm"
-            onClick={onConfirm}
-          />
-        </TTDDialogTab>
-      </TTDDialogTabs>
-    </Dialog>
-  );
-};

packages/excalidraw/components/PropertiesPopover.tsx

@@ -1,96 +0,0 @@
-import React, { type ReactNode } from "react";
-import clsx from "clsx";
-import * as Popover from "@radix-ui/react-popover";
-
-import { useDevice } from "./App";
-import { Island } from "./Island";
-import { isInteractive } from "../utils";
-
-interface PropertiesPopoverProps {
-  className?: string;
-  container: HTMLDivElement | null;
-  children: ReactNode;
-  style?: object;
-  onClose: () => void;
-  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-  onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
-  onFocusOutside?: Popover.DismissableLayerProps["onFocusOutside"];
-  onPointerDownOutside?: Popover.DismissableLayerProps["onPointerDownOutside"];
-}
-
-export const PropertiesPopover = React.forwardRef<
-  HTMLDivElement,
-  PropertiesPopoverProps
->(
-  (
-    {
-      className,
-      container,
-      children,
-      style,
-      onClose,
-      onKeyDown,
-      onFocusOutside,
-      onPointerLeave,
-      onPointerDownOutside,
-    },
-    ref,
-  ) => {
-    const device = useDevice();
-
-    return (
-      <Popover.Portal container={container}>
-        <Popover.Content
-          ref={ref}
-          className={clsx("focus-visible-none", className)}
-          data-prevent-outside-click
-          side={
-            device.editor.isMobile && !device.viewport.isLandscape
-              ? "bottom"
-              : "right"
-          }
-          align={
-            device.editor.isMobile && !device.viewport.isLandscape
-              ? "center"
-              : "start"
-          }
-          alignOffset={-16}
-          sideOffset={20}
-          style={{
-            zIndex: "var(--zIndex-popup)",
-          }}
-          onPointerLeave={onPointerLeave}
-          onKeyDown={onKeyDown}
-          onFocusOutside={onFocusOutside}
-          onPointerDownOutside={onPointerDownOutside}
-          onCloseAutoFocus={(e) => {
-            e.stopPropagation();
-            // prevents focusing the trigger
-            e.preventDefault();
-
-            // return focus to excalidraw container unless
-            // user focuses an interactive element, such as a button, or
-            // enters the text editor by clicking on canvas with the text tool
-            if (container && !isInteractive(document.activeElement)) {
-              container.focus();
-            }
-
-            onClose();
-          }}
-        >
-          <Island padding={3} style={style}>
-            {children}
-          </Island>
-          <Popover.Arrow
-            width={20}
-            height={10}
-            style={{
-              fill: "var(--popup-bg-color)",
-              filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
-            }}
-          />
-        </Popover.Content>
-      </Popover.Portal>
-    );
-  },
-);

packages/excalidraw/components/PublishLibrary.scss

@@ -133,7 +133,7 @@
     .required,
     .error {
       color: $oc-red-8;
-      font-weight: 700;
+      font-weight: bold;
       font-size: 1rem;
       margin: 0.2rem;
     }

packages/excalidraw/components/QuickSearch.scss

@@ -1,48 +0,0 @@
-.excalidraw {
-  --list-border-color: var(--color-gray-20);
-
-  .QuickSearch__wrapper {
-    position: relative;
-    height: 2.6rem; // added +0.1 due to Safari
-    border-bottom: 1px solid var(--list-border-color);
-
-    svg {
-      position: absolute;
-      top: 47.5%; // 50% is not exactly in the center of the input
-      transform: translateY(-50%);
-      left: 0.75rem;
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--color-gray-40);
-      z-index: 1;
-    }
-  }
-
-  &.theme--dark {
-    --list-border-color: var(--color-gray-80);
-
-    .QuickSearch__wrapper {
-      border-bottom: none;
-    }
-  }
-
-  .QuickSearch__input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    border: 0 !important;
-    font-size: 0.875rem;
-    padding-left: 2.5rem !important;
-    padding-right: 0.75rem !important;
-
-    &::placeholder {
-      color: var(--color-gray-40);
-    }
-
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
-}

packages/excalidraw/components/QuickSearch.tsx

@@ -1,28 +0,0 @@
-import clsx from "clsx";
-import React from "react";
-import { searchIcon } from "./icons";
-
-import "./QuickSearch.scss";
-
-interface QuickSearchProps {
-  className?: string;
-  placeholder: string;
-  onChange: (term: string) => void;
-}
-
-export const QuickSearch = React.forwardRef<HTMLInputElement, QuickSearchProps>(
-  ({ className, placeholder, onChange }, ref) => {
-    return (
-      <div className={clsx("QuickSearch__wrapper", className)}>
-        {searchIcon}
-        <input
-          ref={ref}
-          className="QuickSearch__input"
-          type="text"
-          placeholder={placeholder}
-          onChange={(e) => onChange(e.target.value.trim().toLowerCase())}
-        />
-      </div>
-    );
-  },
-);

packages/excalidraw/components/ScrollableList.scss

@@ -1,21 +0,0 @@
-.excalidraw {
-  .ScrollableList__wrapper {
-    position: static !important;
-    border: none;
-    font-size: 0.875rem;
-    overflow-y: auto;
-
-    & > .empty,
-    & > .hint {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 0.5rem;
-      font-size: 0.75rem;
-      color: var(--color-gray-60);
-      overflow: hidden;
-      text-align: center;
-      line-height: 150%;
-    }
-  }
-}

packages/excalidraw/components/ScrollableList.tsx

@@ -1,24 +0,0 @@
-import clsx from "clsx";
-import { Children } from "react";
-
-import "./ScrollableList.scss";
-
-interface ScrollableListProps {
-  className?: string;
-  placeholder: string;
-  children: React.ReactNode;
-}
-
-export const ScrollableList = ({
-  className,
-  placeholder,
-  children,
-}: ScrollableListProps) => {
-  const isEmpty = !Children.count(children);
-
-  return (
-    <div className={clsx("ScrollableList__wrapper", className)} role="menu">
-      {isEmpty ? <div className="empty">{placeholder}</div> : children}
-    </div>
-  );
-};

packages/excalidraw/components/TTDDialog/TTDDialog.scss

@@ -139,7 +139,7 @@ $verticalBreakpoint: 861px;
 
   .ttd-dialog-output-error {
     color: red;
-    font-weight: 700;
+    font-weight: 800;
     font-size: 30px;
     word-break: break-word;
     overflow: auto;

packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx

@@ -7,10 +7,7 @@ import { isMemberOf } from "../../utils";
 const TTDDialogTabs = (
   props: {
     children: ReactNode;
-  } & (
-    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
-    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
-  ),
+  } & { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" },
 ) => {
   const setAppState = useExcalidrawSetAppState();
 
@@ -39,13 +36,6 @@ const TTDDialogTabs = (
           }
         }
         if (
-          props.dialog === "settings" &&
-          isMemberOf(["text-to-diagram", "diagram-to-code"], tab)
-        ) {
-          setAppState({
-            openDialog: { name: props.dialog, tab, source: "settings" },
-          });
-        } else if (
           props.dialog === "ttd" &&
           isMemberOf(["text-to-diagram", "mermaid"], tab)
         ) {

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,6 +1,10 @@
-import type { MermaidConfig } from "@excalidraw/mermaid-to-excalidraw";
+import type { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
 import type { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
+import {
+  DEFAULT_EXPORT_PADDING,
+  DEFAULT_FONT_SIZE,
+  EDITOR_LS_KEYS,
+} from "../../constants";
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import type { AppClassProperties, BinaryFiles } from "../../types";
@@ -34,7 +38,7 @@ export interface MermaidToExcalidrawLibProps {
   api: Promise<{
     parseMermaidToExcalidraw: (
       definition: string,
-      config?: MermaidConfig,
+      options: MermaidOptions,
     ) => Promise<MermaidToExcalidrawResult>;
   }>;
 }
@@ -74,10 +78,15 @@ export const convertMermaidToExcalidraw = async ({
 
     let ret;
     try {
-      ret = await api.parseMermaidToExcalidraw(mermaidDefinition);
+      ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
+        fontSize: DEFAULT_FONT_SIZE,
+      });
     } catch (err: any) {
       ret = await api.parseMermaidToExcalidraw(
         mermaidDefinition.replace(/"/g, "'"),
+        {
+          fontSize: DEFAULT_FONT_SIZE,
+        },
       );
     }
     const { elements, files } = ret;

packages/excalidraw/components/UserList.scss

@@ -5,11 +5,10 @@
   --avatarList-gap: 0.625rem;
   --userList-padding: var(--space-factor);
 
-  .UserList__wrapper {
+  .UserList-wrapper {
     display: flex;
     width: 100%;
     justify-content: flex-end;
-    align-items: center;
     pointer-events: none !important;
   }
 
@@ -22,6 +21,10 @@
     align-items: center;
     gap: var(--avatarList-gap);
 
+    &:empty {
+      display: none;
+    }
+
     box-sizing: border-box;
 
     --max-size: calc(
@@ -154,7 +157,66 @@
   }
 
   .UserList__collaborators {
+    position: static;
     top: auto;
+    margin-top: 0;
     max-height: 50vh;
+    overflow-y: auto;
+    padding: 0.25rem 0.5rem;
+    border-top: 1px solid var(--userlist-collaborators-border-color);
+    border-bottom: 1px solid var(--userlist-collaborators-border-color);
+
+    &__empty {
+      color: var(--color-gray-60);
+      font-size: 0.75rem;
+      line-height: 150%;
+      padding: 0.5rem 0;
+    }
+  }
+
+  .UserList__hint {
+    padding: 0.5rem 0.75rem;
+    overflow: hidden;
+    text-align: center;
+    color: var(--userlist-hint-text-color);
+    font-size: 0.75rem;
+    line-height: 150%;
+  }
+
+  .UserList__search-wrapper {
+    position: relative;
+    height: 2.5rem;
+
+    svg {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0.75rem;
+      width: 1.25rem;
+      height: 1.25rem;
+      color: var(--color-gray-40);
+      z-index: 1;
+    }
+  }
+
+  .UserList__search {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    border: 0 !important;
+    border-radius: 0 !important;
+    font-size: 0.875rem;
+    padding-left: 2.5rem !important;
+    padding-right: 0.75rem !important;
+
+    &::placeholder {
+      color: var(--color-gray-40);
+    }
+
+    &:focus {
+      box-shadow: none !important;
+    }
   }
 }

packages/excalidraw/components/UserList.tsx

@@ -9,12 +9,11 @@ import type { ActionManager } from "../actions/manager";
 
 import * as Popover from "@radix-ui/react-popover";
 import { Island } from "./Island";
-import { QuickSearch } from "./QuickSearch";
+import { searchIcon } from "./icons";
 import { t } from "../i18n";
 import { isShallowEqual } from "../utils";
 import { supportsResizeObserver } from "../constants";
 import type { MarkRequired } from "../utility-types";
-import { ScrollableList } from "./ScrollableList";
 
 export type GoToCollaboratorComponentProps = {
   socketId: SocketId;
@@ -41,7 +40,7 @@ const ConditionalTooltipWrapper = ({
   shouldWrap ? (
     <Tooltip label={username || "Unknown user"}>{children}</Tooltip>
   ) : (
-    <>{children}</>
+    <React.Fragment>{children}</React.Fragment>
   );
 
 const renderCollaborator = ({
@@ -129,10 +128,6 @@ export const UserList = React.memo(
     ).filter((collaborator) => collaborator.username?.trim());
 
     const [searchTerm, setSearchTerm] = React.useState("");
-    const filteredCollaborators = uniqueCollaboratorsArray.filter(
-      (collaborator) =>
-        collaborator.username?.toLowerCase().includes(searchTerm),
-    );
 
     const userListWrapper = React.useRef<HTMLDivElement | null>(null);
 
@@ -166,6 +161,14 @@ export const UserList = React.memo(
 
     const [maxAvatars, setMaxAvatars] = React.useState(DEFAULT_MAX_AVATARS);
 
+    const searchTermNormalized = searchTerm.trim().toLowerCase();
+
+    const filteredCollaborators = searchTermNormalized
+      ? uniqueCollaboratorsArray.filter((collaborator) =>
+          collaborator.username?.toLowerCase().includes(searchTerm),
+        )
+      : uniqueCollaboratorsArray;
+
     const firstNCollaborators = uniqueCollaboratorsArray.slice(
       0,
       maxAvatars - 1,
@@ -194,7 +197,7 @@ export const UserList = React.memo(
         )}
       </div>
     ) : (
-      <div className="UserList__wrapper" ref={userListWrapper}>
+      <div className="UserList-wrapper" ref={userListWrapper}>
         <div
           className={clsx("UserList", className)}
           style={{ [`--max-avatars` as any]: maxAvatars }}
@@ -202,7 +205,13 @@ export const UserList = React.memo(
           {firstNAvatarsJSX}
 
           {uniqueCollaboratorsArray.length > maxAvatars - 1 && (
-            <Popover.Root>
+            <Popover.Root
+              onOpenChange={(isOpen) => {
+                if (!isOpen) {
+                  setSearchTerm("");
+                }
+              }}
+            >
               <Popover.Trigger className="UserList__more">
                 +{uniqueCollaboratorsArray.length - maxAvatars + 1}
               </Popover.Trigger>
@@ -215,43 +224,41 @@ export const UserList = React.memo(
                 align="end"
                 sideOffset={10}
               >
-                <Island padding={2}>
+                <Island style={{ overflow: "hidden" }}>
                   {uniqueCollaboratorsArray.length >=
                     SHOW_COLLABORATORS_FILTER_AT && (
-                    <QuickSearch
-                      placeholder={t("quickSearch.placeholder")}
-                      onChange={setSearchTerm}
-                    />
+                    <div className="UserList__search-wrapper">
+                      {searchIcon}
+                      <input
+                        className="UserList__search"
+                        type="text"
+                        placeholder={t("userList.search.placeholder")}
+                        value={searchTerm}
+                        onChange={(e) => {
+                          setSearchTerm(e.target.value);
+                        }}
+                      />
+                    </div>
                   )}
-                  <ScrollableList
-                    className={"dropdown-menu UserList__collaborators"}
-                    placeholder={t("userList.empty")}
-                  >
-                    {/* The list checks for `Children.count()`, hence defensively returning empty list */}
-                    {filteredCollaborators.length > 0
-                      ? [
-                          <div className="hint">{t("userList.hint.text")}</div>,
-                          filteredCollaborators.map((collaborator) =>
-                            renderCollaborator({
-                              actionManager,
-                              collaborator,
-                              socketId: collaborator.socketId,
-                              withName: true,
-                              isBeingFollowed:
-                                collaborator.socketId === userToFollow,
-                            }),
-                          ),
-                        ]
-                      : []}
-                  </ScrollableList>
-                  <Popover.Arrow
-                    width={20}
-                    height={10}
-                    style={{
-                      fill: "var(--popup-bg-color)",
-                      filter: "drop-shadow(rgba(0, 0, 0, 0.05) 0px 3px 2px)",
-                    }}
-                  />
+                  <div className="dropdown-menu UserList__collaborators">
+                    {filteredCollaborators.length === 0 && (
+                      <div className="UserList__collaborators__empty">
+                        {t("userList.search.empty")}
+                      </div>
+                    )}
+                    <div className="UserList__hint">
+                      {t("userList.hint.text")}
+                    </div>
+                    {filteredCollaborators.map((collaborator) =>
+                      renderCollaborator({
+                        actionManager,
+                        collaborator,
+                        socketId: collaborator.socketId,
+                        withName: true,
+                        isBeingFollowed: collaborator.socketId === userToFollow,
+                      }),
+                    )}
+                  </div>
                 </Island>
               </Popover.Content>
             </Popover.Root>

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -105,7 +105,6 @@ const getRelevantAppStateProps = (
   selectedElementIds: appState.selectedElementIds,
   frameToHighlight: appState.frameToHighlight,
   editingGroupId: appState.editingGroupId,
-  currentHoveredFontFamily: appState.currentHoveredFontFamily,
 });
 
 const areEqual = (

packages/excalidraw/components/dropdownMenu/DropdownMenu.scss

@@ -4,7 +4,7 @@
   .dropdown-menu {
     position: absolute;
     top: 100%;
-    margin-top: 0.5rem;
+    margin-top: 0.25rem;
 
     &--mobile {
       left: 0;
@@ -35,69 +35,21 @@
 
     .dropdown-menu-item-base {
       display: flex;
+      padding: 0 0.625rem;
       column-gap: 0.625rem;
       font-size: 0.875rem;
       color: var(--color-on-surface);
       width: 100%;
       box-sizing: border-box;
-      font-weight: 400;
+      font-weight: normal;
       font-family: inherit;
     }
 
-    &.manual-hover {
-      // disable built-in hover due to keyboard navigation
-      .dropdown-menu-item {
-        &:hover {
-          background-color: transparent;
-        }
-
-        &--hovered {
-          background-color: var(--button-hover-bg) !important;
-        }
-
-        &--selected {
-          background-color: var(--color-primary-light) !important;
-        }
-      }
-    }
-
-    &.fonts {
-      margin-top: 1rem;
-      // display max 7 items per list, where each has 2rem (2.25) height and 1px margin top & bottom
-      // count in 2 groups, where each allocates 1.3*0.75rem font-size and 0.5rem margin bottom, plus one extra 1rem margin top
-      max-height: calc(7 * (2rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem);
-
-      @media screen and (min-width: 1921px) {
-        max-height: calc(
-          7 * (2.25rem + 2px) + 2 * (0.5rem + 1.3 * 0.75rem) + 1rem
-        );
-      }
-
-      .dropdown-menu-item-base {
-        display: inline-flex;
-      }
-
-      .dropdown-menu-group:not(:first-child) {
-        margin-top: 1rem;
-      }
-
-      .dropdown-menu-group-title {
-        font-size: 0.75rem;
-        text-align: left;
-        font-weight: 400;
-        margin: 0 0 0.5rem;
-        line-height: 1.3;
-      }
-    }
-
     .dropdown-menu-item {
-      height: 2rem;
-      margin: 1px;
-      padding: 0 0.5rem;
-      width: calc(100% - 2px);
       background-color: transparent;
       border: 1px solid transparent;
       align-items: center;
+      height: 2rem;
       cursor: pointer;
       border-radius: var(--border-radius-md);
 
@@ -105,6 +57,11 @@
         height: 2.25rem;
       }
 
+      &--selected {
+        background: var(--color-primary-light);
+        --icon-fill-color: var(--color-primary-darker);
+      }
+
       &__text {
         display: flex;
         align-items: center;
@@ -126,11 +83,6 @@
         }
       }
 
-      &--selected {
-        background: var(--color-primary-light);
-        --icon-fill-color: var(--color-primary-darker);
-      }
-
       &:hover {
         background-color: var(--button-hover-bg);
         text-decoration: none;

packages/excalidraw/components/dropdownMenu/DropdownMenuItem.tsx

@@ -1,62 +1,37 @@
-import React, { useEffect, useRef } from "react";
+import React from "react";
 import {
   getDropdownMenuItemClassName,
   useHandleDropdownMenuItemClick,
 } from "./common";
 import MenuItemContent from "./DropdownMenuItemContent";
-import { useExcalidrawAppState } from "../App";
-import { THEME } from "../../constants";
-import type { ValueOf } from "../../utility-types";
 
 const DropdownMenuItem = ({
   icon,
-  value,
-  order,
+  onSelect,
   children,
   shortcut,
   className,
-  hovered,
   selected,
-  textStyle,
-  onSelect,
-  onClick,
   ...rest
 }: {
   icon?: JSX.Element;
-  value?: string | number | undefined;
-  order?: number;
-  onSelect?: (event: Event) => void;
+  onSelect: (event: Event) => void;
   children: React.ReactNode;
   shortcut?: string;
-  hovered?: boolean;
   selected?: boolean;
-  textStyle?: React.CSSProperties;
   className?: string;
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">) => {
-  const handleClick = useHandleDropdownMenuItemClick(onClick, onSelect);
-  const ref = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    if (hovered) {
-      if (order === 0) {
-        // scroll into the first item differently, so it's visible what is above (i.e. group title)
-        ref.current?.scrollIntoView({ block: "end" });
-      } else {
-        ref.current?.scrollIntoView({ block: "nearest" });
-      }
-    }
-  }, [hovered, order]);
+  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);
 
   return (
     <button
       {...rest}
-      ref={ref}
-      value={value}
       onClick={handleClick}
-      className={getDropdownMenuItemClassName(className, selected, hovered)}
+      type="button"
+      className={getDropdownMenuItemClassName(className, selected)}
       title={rest.title ?? rest["aria-label"]}
     >
-      <MenuItemContent textStyle={textStyle} icon={icon} shortcut={shortcut}>
+      <MenuItemContent icon={icon} shortcut={shortcut}>
         {children}
       </MenuItemContent>
     </button>
@@ -64,53 +39,24 @@ const DropdownMenuItem = ({
 };
 DropdownMenuItem.displayName = "DropdownMenuItem";
 
-export const DropDownMenuItemBadgeType = {
-  GREEN: "green",
-  RED: "red",
-  BLUE: "blue",
-} as const;
-
 export const DropDownMenuItemBadge = ({
-  type = DropDownMenuItemBadgeType.BLUE,
   children,
 }: {
-  type?: ValueOf<typeof DropDownMenuItemBadgeType>;
   children: React.ReactNode;
 }) => {
-  const { theme } = useExcalidrawAppState();
-  const style = {
-    display: "inline-flex",
-    marginLeft: "auto",
-    padding: "2px 4px",
-    borderRadius: 6,
-    fontSize: 9,
-    fontFamily: "Cascadia, monospace",
-    border: theme === THEME.LIGHT ? "1.5px solid white" : "none",
-  };
-
-  switch (type) {
-    case DropDownMenuItemBadgeType.GREEN:
-      Object.assign(style, {
-        backgroundColor: "var(--background-color-badge)",
-        color: "var(--color-badge)",
-      });
-      break;
-    case DropDownMenuItemBadgeType.RED:
-      Object.assign(style, {
-        backgroundColor: "pink",
-        color: "darkred",
-      });
-      break;
-    case DropDownMenuItemBadgeType.BLUE:
-    default:
-      Object.assign(style, {
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        marginLeft: "auto",
+        padding: "2px 4px",
         background: "var(--color-promo)",
         color: "var(--color-surface-lowest)",
-      });
-  }
-
-  return (
-    <div className="DropDownMenuItemBadge" style={style}>
+        borderRadius: 6,
+        fontSize: 9,
+        fontFamily: "Cascadia, monospace",
+      }}
+    >
       {children}
     </div>
   );

packages/excalidraw/components/dropdownMenu/DropdownMenuItemContent.tsx

@@ -1,23 +1,19 @@
 import { useDevice } from "../App";
 
 const MenuItemContent = ({
-  textStyle,
   icon,
   shortcut,
   children,
 }: {
   icon?: JSX.Element;
   shortcut?: string;
-  textStyle?: React.CSSProperties;
   children: React.ReactNode;
 }) => {
   const device = useDevice();
   return (
     <>
-      {icon && <div className="dropdown-menu-item__icon">{icon}</div>}
-      <div style={textStyle} className="dropdown-menu-item__text">
-        {children}
-      </div>
+      <div className="dropdown-menu-item__icon">{icon}</div>
+      <div className="dropdown-menu-item__text">{children}</div>
       {shortcut && !device.editor.isMobile && (
         <div className="dropdown-menu-item__shortcut">{shortcut}</div>
       )}

packages/excalidraw/components/dropdownMenu/common.ts

@@ -9,11 +9,9 @@ export const DropdownMenuContentPropsContext = React.createContext<{
 export const getDropdownMenuItemClassName = (
   className = "",
   selected = false,
-  hovered = false,
 ) => {
-  return `dropdown-menu-item dropdown-menu-item-base ${className}
-  ${selected ? "dropdown-menu-item--selected" : ""} ${
-    hovered ? "dropdown-menu-item--hovered" : ""
+  return `dropdown-menu-item dropdown-menu-item-base ${className} ${
+    selected ? "dropdown-menu-item--selected" : ""
   }`.trim();
 };
 

packages/excalidraw/components/icons.tsx

@@ -1438,27 +1438,6 @@ export const fontSizeIcon = createIcon(
   tablerIconProps,
 );
 
-export const FontFamilyHeadingIcon = createIcon(
-  <>
-    <g
-      stroke="currentColor"
-      strokeWidth="1.25"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-      <path d="M7 12h10" />
-      <path d="M7 5v14" />
-      <path d="M17 5v14" />
-      <path d="M15 19h4" />
-      <path d="M15 5h4" />
-      <path d="M5 19h4" />
-      <path d="M5 5h4" />
-    </g>
-  </>,
-  tablerIconProps,
-);
-
 export const FontFamilyNormalIcon = createIcon(
   <>
     <g

packages/excalidraw/components/welcome-screen/WelcomeScreen.Center.tsx

@@ -109,7 +109,7 @@ Center.displayName = "Center";
 
 const Logo = ({ children }: { children?: React.ReactNode }) => {
   return (
-    <div className="welcome-screen-center__logo excalifont welcome-screen-decor">
+    <div className="welcome-screen-center__logo virgil welcome-screen-decor">
       {children || <ExcalidrawLogo withText />}
     </div>
   );
@@ -118,7 +118,7 @@ Logo.displayName = "Logo";
 
 const Heading = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="welcome-screen-center__heading welcome-screen-decor excalifont">
+    <div className="welcome-screen-center__heading welcome-screen-decor virgil">
       {children}
     </div>
   );

packages/excalidraw/components/welcome-screen/WelcomeScreen.Hints.tsx

@@ -10,7 +10,7 @@ const MenuHint = ({ children }: { children?: React.ReactNode }) => {
   const { WelcomeScreenMenuHintTunnel } = useTunnels();
   return (
     <WelcomeScreenMenuHintTunnel.In>
-      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
+      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--menu">
         {WelcomeScreenMenuArrow}
         <div className="welcome-screen-decor-hint__label">
           {children || t("welcomeScreen.defaults.menuHint")}
@@ -25,7 +25,7 @@ const ToolbarHint = ({ children }: { children?: React.ReactNode }) => {
   const { WelcomeScreenToolbarHintTunnel } = useTunnels();
   return (
     <WelcomeScreenToolbarHintTunnel.In>
-      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
+      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--toolbar">
         <div className="welcome-screen-decor-hint__label">
           {children || t("welcomeScreen.defaults.toolbarHint")}
         </div>
@@ -40,7 +40,7 @@ const HelpHint = ({ children }: { children?: React.ReactNode }) => {
   const { WelcomeScreenHelpHintTunnel } = useTunnels();
   return (
     <WelcomeScreenHelpHintTunnel.In>
-      <div className="excalifont welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
+      <div className="virgil welcome-screen-decor welcome-screen-decor-hint welcome-screen-decor-hint--help">
         <div>{children || t("welcomeScreen.defaults.helpHint")}</div>
         {WelcomeScreenHelpArrow}
       </div>

packages/excalidraw/components/welcome-screen/WelcomeScreen.scss

@@ -1,6 +1,6 @@
 .excalidraw {
-  .excalifont {
-    font-family: "Excalifont";
+  .virgil {
+    font-family: "Virgil";
   }
 
   // WelcomeSreen common

packages/excalidraw/constants.ts

@@ -114,24 +114,12 @@ export const CLASSES = {
   SHAPE_ACTIONS_MENU: "App-menu__left",
 };
 
-/**
- * // TODO: shouldn't be really `const`, likely neither have integers as values, due to value for the custom fonts, which should likely be some hash.
- *
- * Let's think this through and consider:
- * - https://developer.mozilla.org/en-US/docs/Web/CSS/generic-family
- * - https://drafts.csswg.org/css-fonts-4/#font-family-prop
- * - https://learn.microsoft.com/en-us/typography/opentype/spec/ibmfc
- */
+// 1-based in case we ever do `if(element.fontFamily)`
 export const FONT_FAMILY = {
   Virgil: 1,
   Helvetica: 2,
   Cascadia: 3,
-  // leave 4 unused as it was historically used for Assistant (which we don't use anymore) or custom font (Obsidian)
-  Excalifont: 5,
-  Nunito: 6,
-  "Lilita One": 7,
-  "Comic Shanns": 8,
-  "Liberation Sans": 9,
+  Assistant: 4,
 };
 
 export const THEME = {
@@ -159,7 +147,7 @@ export const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 
 export const MIN_FONT_SIZE = 1;
 export const DEFAULT_FONT_SIZE = 20;
-export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Excalifont;
+export const DEFAULT_FONT_FAMILY: FontFamilyValues = FONT_FAMILY.Virgil;
 export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
@@ -286,7 +274,7 @@ export const DEFAULT_EXPORT_PADDING = 10; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
-export const MAX_ALLOWED_FILE_BYTES = 4 * 1024 * 1024;
+export const MAX_ALLOWED_FILE_BYTES = 2 * 1024 * 1024;
 
 export const SVG_NS = "http://www.w3.org/2000/svg";
 

packages/excalidraw/css/styles.scss

@@ -152,7 +152,7 @@ body.excalidraw-cursor-resize * {
       margin-bottom: 0.25rem;
       font-size: 0.75rem;
       color: var(--text-primary-color);
-      font-weight: 400;
+      font-weight: normal;
       display: block;
     }
 
@@ -227,7 +227,14 @@ body.excalidraw-cursor-resize * {
     label,
     button,
     .zIndexButton {
-      @include outlineButtonIconStyles;
+      @include outlineButtonStyles;
+
+      padding: 0;
+
+      svg {
+        width: var(--default-icon-size);
+        height: var(--default-icon-size);
+      }
     }
   }
 
@@ -387,7 +394,7 @@ body.excalidraw-cursor-resize * {
   .App-menu__left {
     overflow-y: auto;
     padding: 0.75rem;
-    width: 200px;
+    width: 202px;
     box-sizing: border-box;
     position: absolute;
   }
@@ -578,7 +585,7 @@ body.excalidraw-cursor-resize * {
   // use custom, minimalistic scrollbar
   // (doesn't work in Firefox)
   ::-webkit-scrollbar {
-    width: 4px;
+    width: 3px;
     height: 3px;
   }
 
@@ -657,10 +664,6 @@ body.excalidraw-cursor-resize * {
       --button-hover-bg: #363541;
       --button-bg: var(--color-surface-high);
     }
-
-    .buttonList {
-      padding: 0.25rem 0;
-    }
   }
 
   .excalidraw__paragraph {
@@ -754,7 +757,7 @@ body.excalidraw-cursor-resize * {
     padding: 1rem 1.6rem;
     border-radius: 12px;
     color: #fff;
-    font-weight: 700;
+    font-weight: bold;
     letter-spacing: 0.6px;
     font-family: "Assistant";
   }

packages/excalidraw/css/theme.scss

@@ -151,9 +151,6 @@
   --color-border-outline-variant: #c5c5d0;
   --color-surface-primary-container: #e0dfff;
 
-  --color-badge: #0b6513;
-  --background-color-badge: #d3ffd2;
-
   &.theme--dark {
     &.theme--dark-background-none {
       background: none;

packages/excalidraw/css/variables.module.scss

@@ -124,16 +124,6 @@
   }
 }
 
-@mixin outlineButtonIconStyles {
-  @include outlineButtonStyles;
-  padding: 0;
-
-  svg {
-    width: var(--default-icon-size);
-    height: var(--default-icon-size);
-  }
-}
-
 @mixin avatarStyles {
   width: var(--avatar-size, 1.5rem);
   height: var(--avatar-size, 1.5rem);
@@ -145,7 +135,7 @@
   align-items: center;
   cursor: pointer;
   font-size: 0.75rem;
-  font-weight: 700;
+  font-weight: 800;
   line-height: 1;
   color: var(--color-gray-90);
   flex: 0 0 auto;

packages/excalidraw/data/__snapshots__/transform.test.ts.snap

@@ -239,7 +239,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -285,7 +285,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -386,7 +386,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to existing t
   "containerId": "id48",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -487,7 +487,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to shapes whe
   "containerId": "id37",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -662,7 +662,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "containerId": "id41",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -708,7 +708,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -754,7 +754,7 @@ exports[`Test Transform > Test arrow bindings > should bind arrows to text when
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -1207,7 +1207,7 @@ exports[`Test Transform > should transform text element 1`] = `
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -1248,7 +1248,7 @@ exports[`Test Transform > should transform text element 2`] = `
   "containerId": null,
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -1581,7 +1581,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "B",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [
@@ -1624,7 +1624,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "A",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [
@@ -1667,7 +1667,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "Alice",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [
@@ -1710,7 +1710,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "Bob",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [
@@ -1753,7 +1753,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "Bob_Alice",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -1794,7 +1794,7 @@ exports[`Test Transform > should transform the elements correctly when linear el
   "containerId": "Bob_B",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2043,7 +2043,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "containerId": "id25",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2084,7 +2084,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "containerId": "id26",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2125,7 +2125,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "containerId": "id27",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2167,7 +2167,7 @@ exports[`Test Transform > should transform to labelled arrows when label provide
   "containerId": "id28",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2431,7 +2431,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id13",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2472,7 +2472,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id14",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2514,7 +2514,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id15",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2558,7 +2558,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id16",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2600,7 +2600,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id17",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],
@@ -2643,7 +2643,7 @@ exports[`Test Transform > should transform to text containers when label provide
   "containerId": "id18",
   "customData": undefined,
   "fillStyle": "solid",
-  "fontFamily": 5,
+  "fontFamily": 1,
   "fontSize": 20,
   "frameId": null,
   "groupIds": [],

packages/excalidraw/data/blob.ts

@@ -154,11 +154,7 @@ export const loadSceneOrLibraryFromBlob = async (
           },
           localAppState,
           localElements,
-          {
-            repairBindings: true,
-            normalizeIndices: true,
-            refreshDimensions: false,
-          },
+          { repairBindings: true, refreshDimensions: false },
         ),
       };
     } else if (isValidLibrary(data)) {

packages/excalidraw/data/magic.ts

@@ -1,105 +0,0 @@
-import { THEME } from "../constants";
-import type { Theme } from "../element/types";
-import type { DataURL } from "../types";
-import type { OpenAIInput, OpenAIOutput } from "./ai/types";
-
-export type MagicCacheData =
-  | {
-      status: "pending";
-    }
-  | { status: "done"; html: string }
-  | {
-      status: "error";
-      message?: string;
-      code: "ERR_GENERATION_INTERRUPTED" | string;
-    };
-
-const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
-Your role is to transform low-fidelity wireframes into working front-end HTML code.
-
-YOU MUST FOLLOW FOLLOWING RULES:
-
-- Use HTML, CSS, JavaScript to build a responsive, accessible, polished prototype
-- Leverage Tailwind for styling and layout (import as script <script src="https://cdn.tailwindcss.com"></script>)
-- Inline JavaScript when needed
-- Fetch dependencies from CDNs when needed (using unpkg or skypack)
-- Source images from Unsplash or create applicable placeholders
-- Interpret annotations as intended vs literal UI
-- Fill gaps using your expertise in UX and business logic
-- generate primarily for desktop UI, but make it responsive.
-- Use grid and flexbox wherever applicable.
-- Convert the wireframe in its entirety, don't omit elements if possible.
-
-If the wireframes, diagrams, or text is unclear or unreadable, refer to provided text for clarification.
-
-Your goal is a production-ready prototype that brings the wireframes to life.
-
-Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
-
-export async function diagramToHTML({
-  image,
-  apiKey,
-  text,
-  theme = THEME.LIGHT,
-}: {
-  image: DataURL;
-  apiKey: string;
-  text: string;
-  theme?: Theme;
-}) {
-  const body: OpenAIInput.ChatCompletionCreateParamsBase = {
-    model: "gpt-4-vision-preview",
-    // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
-    max_tokens: 4096,
-    temperature: 0.1,
-    messages: [
-      {
-        role: "system",
-        content: SYSTEM_PROMPT,
-      },
-      {
-        role: "user",
-        content: [
-          {
-            type: "image_url",
-            image_url: {
-              url: image,
-              detail: "high",
-            },
-          },
-          {
-            type: "text",
-            text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
-          },
-          {
-            type: "text",
-            text,
-          },
-        ],
-      },
-    ],
-  };
-
-  let result:
-    | ({ ok: true } & OpenAIOutput.ChatCompletion)
-    | ({ ok: false } & OpenAIOutput.APIError);
-
-  const resp = await fetch("https://api.openai.com/v1/chat/completions", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`,
-    },
-    body: JSON.stringify(body),
-  });
-
-  if (resp.ok) {
-    const json: OpenAIOutput.ChatCompletion = await resp.json();
-    result = { ...json, ok: true };
-  } else {
-    const json: OpenAIOutput.APIError = await resp.json();
-    result = { ...json, ok: false };
-  }
-
-  return result;
-}

packages/excalidraw/data/restore.ts

@@ -44,11 +44,14 @@ import { bumpVersion } from "../element/mutateElement";
 import { getUpdatedTimestamp, updateActiveTool } from "../utils";
 import { arrayToMap } from "../utils";
 import type { MarkOptional, Mutable } from "../utility-types";
-import { detectLineHeight, getContainerElement } from "../element/textElement";
+import {
+  detectLineHeight,
+  getContainerElement,
+  getDefaultLineHeight,
+} from "../element/textElement";
 import { normalizeLink } from "./url";
+import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
-import { getLineHeight } from "../fonts";
-import { normalizeIndices, syncInvalidIndices } from "../fractionalIndex";
 
 type RestoredAppState = Omit<
   AppState,
@@ -203,7 +206,7 @@ const restoreElement = (
             detectLineHeight(element)
           : // no element height likely means programmatic use, so default
             // to a fixed line height
-            getLineHeight(element.fontFamily));
+            getDefaultLineHeight(element.fontFamily));
       element = restoreElementWithProperties(element, {
         fontSize,
         fontFamily,
@@ -405,41 +408,36 @@ export const restoreElements = (
   elements: ImportedDataState["elements"],
   /** NOTE doesn't serve for reconciliation */
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  opts?:
-    | {
-        refreshDimensions?: boolean;
-        repairBindings?: boolean;
-        normalizeIndices?: boolean;
-      }
-    | undefined,
+  opts?: { refreshDimensions?: boolean; repairBindings?: boolean } | undefined,
 ): OrderedExcalidrawElement[] => {
   // used to detect duplicate top-level element ids
   const existingIds = new Set<string>();
   const localElementsMap = localElements ? arrayToMap(localElements) : null;
-  const restoredElementsTemp = (elements || []).reduce((elements, element) => {
-    // filtering out selection, which is legacy, no longer kept in elements,
-    // and causing issues if retained
-    if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
-      let migratedElement: ExcalidrawElement | null = restoreElement(element);
-      if (migratedElement) {
-        const localElement = localElementsMap?.get(element.id);
-        if (localElement && localElement.version > migratedElement.version) {
-          migratedElement = bumpVersion(migratedElement, localElement.version);
-        }
-        if (existingIds.has(migratedElement.id)) {
-          migratedElement = { ...migratedElement, id: randomId() };
-        }
-        existingIds.add(migratedElement.id);
+  const restoredElements = syncInvalidIndices(
+    (elements || []).reduce((elements, element) => {
+      // filtering out selection, which is legacy, no longer kept in elements,
+      // and causing issues if retained
+      if (element.type !== "selection" && !isInvisiblySmallElement(element)) {
+        let migratedElement: ExcalidrawElement | null = restoreElement(element);
+        if (migratedElement) {
+          const localElement = localElementsMap?.get(element.id);
+          if (localElement && localElement.version > migratedElement.version) {
+            migratedElement = bumpVersion(
+              migratedElement,
+              localElement.version,
+            );
+          }
+          if (existingIds.has(migratedElement.id)) {
+            migratedElement = { ...migratedElement, id: randomId() };
+          }
+          existingIds.add(migratedElement.id);
 
-        elements.push(migratedElement);
+          elements.push(migratedElement);
+        }
       }
-    }
-    return elements;
-  }, [] as ExcalidrawElement[]);
-
-  const restoredElements = opts?.normalizeIndices
-    ? normalizeIndices(restoredElementsTemp)
-    : syncInvalidIndices(restoredElementsTemp);
+      return elements;
+    }, [] as ExcalidrawElement[]),
+  );
 
   if (!opts?.repairBindings) {
     return restoredElements;
@@ -606,11 +604,7 @@ export const restore = (
    */
   localAppState: Partial<AppState> | null | undefined,
   localElements: readonly ExcalidrawElement[] | null | undefined,
-  elementsConfig?: {
-    refreshDimensions?: boolean;
-    repairBindings?: boolean;
-    normalizeIndices?: boolean;
-  },
+  elementsConfig?: { refreshDimensions?: boolean; repairBindings?: boolean },
 ): RestoredDataState => {
   return {
     elements: restoreElements(data?.elements, localElements, elementsConfig),

packages/excalidraw/data/transform.ts

@@ -18,7 +18,11 @@ import {
   newMagicFrameElement,
   newTextElement,
 } from "../element/newElement";
-import { measureText, normalizeText } from "../element/textElement";
+import {
+  getDefaultLineHeight,
+  measureText,
+  normalizeText,
+} from "../element/textElement";
 import type {
   ElementsMap,
   ExcalidrawArrowElement,
@@ -50,7 +54,6 @@ import {
 import { getSizeFromPoints } from "../points";
 import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
-import { getLineHeight } from "../fonts";
 
 export type ValidLinearElement = {
   type: "arrow" | "line";
@@ -565,7 +568,8 @@ export const convertToExcalidrawElements = (
       case "text": {
         const fontFamily = element?.fontFamily || DEFAULT_FONT_FAMILY;
         const fontSize = element?.fontSize || DEFAULT_FONT_SIZE;
-        const lineHeight = element?.lineHeight || getLineHeight(fontFamily);
+        const lineHeight =
+          element?.lineHeight || getDefaultLineHeight(fontFamily);
         const text = element.text ?? "";
         const normalizedText = normalizeText(text);
         const metrics = measureText(

packages/excalidraw/element/collision.ts

@@ -18,7 +18,6 @@ import {
   isImageElement,
   isTextElement,
 } from "./typeChecks";
-import { getBoundTextShape } from "../shapes";
 
 export const shouldTestInside = (element: ExcalidrawElement) => {
   if (element.type === "arrow") {
@@ -98,12 +97,6 @@ export const hitElementBoundingBoxOnly = (
 ) => {
   return (
     !hitElementItself(hitArgs) &&
-    // bound text is considered part of the element (even if it's outside the bounding box)
-    !hitElementBoundText(
-      hitArgs.x,
-      hitArgs.y,
-      getBoundTextShape(hitArgs.element, elementsMap),
-    ) &&
     hitElementBoundingBox(hitArgs.x, hitArgs.y, hitArgs.element, elementsMap)
   );
 };
@@ -112,6 +105,6 @@ export const hitElementBoundText = (
   x: number,
   y: number,
   textShape: GeometricShape | null,
-): boolean => {
-  return !!textShape && isPointInShape([x, y], textShape);
+) => {
+  return textShape && isPointInShape([x, y], textShape);
 };

packages/excalidraw/element/index.ts

@@ -45,7 +45,7 @@ export {
   dragNewElement,
 } from "./dragElements";
 export { isTextElement, isExcalidrawElement } from "./typeChecks";
-export { redrawTextBoundingBox } from "./textElement";
+export { redrawTextBoundingBox, getTextFromElements } from "./textElement";
 export {
   getPerfectElementSize,
   getLockedLinearCursorAlignSize,

packages/excalidraw/element/mutateElement.ts

@@ -107,8 +107,6 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 export const newElementWith = <TElement extends ExcalidrawElement>(
   element: TElement,
   updates: ElementUpdate<TElement>,
-  /** pass `true` to always regenerate */
-  force = false,
 ): TElement => {
   let didChange = false;
   for (const key in updates) {
@@ -125,7 +123,7 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
     }
   }
 
-  if (!didChange && !force) {
+  if (!didChange) {
     return element;
   }
 

packages/excalidraw/element/newElement.ts

@@ -36,6 +36,7 @@ import {
   normalizeText,
   wrapText,
   getBoundTextMaxWidth,
+  getDefaultLineHeight,
 } from "./textElement";
 import {
   DEFAULT_ELEMENT_PROPS,
@@ -46,7 +47,6 @@ import {
   VERTICAL_ALIGN,
 } from "../constants";
 import type { MarkOptional, Merge, Mutable } from "../utility-types";
-import { getLineHeight } from "../fonts";
 
 export type ElementConstructorOpts = MarkOptional<
   Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
@@ -228,7 +228,7 @@ export const newTextElement = (
 ): NonDeleted<ExcalidrawTextElement> => {
   const fontFamily = opts.fontFamily || DEFAULT_FONT_FAMILY;
   const fontSize = opts.fontSize || DEFAULT_FONT_SIZE;
-  const lineHeight = opts.lineHeight || getLineHeight(fontFamily);
+  const lineHeight = opts.lineHeight || getDefaultLineHeight(fontFamily);
   const text = normalizeText(opts.text);
   const metrics = measureText(
     text,
@@ -514,7 +514,7 @@ export const regenerateId = (
     if (
       window.h?.app
         ?.getSceneElementsIncludingDeleted()
-        .find((el: ExcalidrawElement) => el.id === nextId)
+        .find((el) => el.id === nextId)
     ) {
       nextId += "_copy";
     }

packages/excalidraw/element/textElement.test.ts

@@ -1,5 +1,4 @@
 import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
-import { getLineHeight } from "../fonts";
 import { API } from "../tests/helpers/api";
 import {
   computeContainerDimensionForBoundText,
@@ -9,6 +8,7 @@ import {
   wrapText,
   detectLineHeight,
   getLineHeightInPx,
+  getDefaultLineHeight,
   parseTokens,
 } from "./textElement";
 import type { ExcalidrawTextElementWithContainer, FontString } from "./types";
@@ -418,15 +418,15 @@ describe("Test getLineHeightInPx", () => {
 describe("Test getDefaultLineHeight", () => {
   it("should return line height using default font family when not passed", () => {
     //@ts-ignore
-    expect(getLineHeight()).toBe(1.25);
+    expect(getDefaultLineHeight()).toBe(1.25);
   });
 
   it("should return line height using default font family for unknown font", () => {
     const UNKNOWN_FONT = 5;
-    expect(getLineHeight(UNKNOWN_FONT)).toBe(1.25);
+    expect(getDefaultLineHeight(UNKNOWN_FONT)).toBe(1.25);
   });
 
   it("should return correct line height", () => {
-    expect(getLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
+    expect(getDefaultLineHeight(FONT_FAMILY.Cascadia)).toBe(1.2);
   });
 });

packages/excalidraw/element/textElement.ts

@@ -6,6 +6,7 @@ import type {
   ExcalidrawTextContainer,
   ExcalidrawTextElement,
   ExcalidrawTextElementWithContainer,
+  FontFamilyValues,
   FontString,
   NonDeletedExcalidrawElement,
 } from "./types";
@@ -16,6 +17,7 @@ import {
   BOUND_TEXT_PADDING,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
+  FONT_FAMILY,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
 } from "../constants";
@@ -28,7 +30,7 @@ import {
   resetOriginalContainerCache,
   updateOriginalContainerCache,
 } from "./containerCache";
-import type { ExtractSetType } from "../utility-types";
+import type { ExtractSetType, MakeBrand } from "../utility-types";
 
 export const normalizeText = (text: string) => {
   return (
@@ -319,6 +321,24 @@ export const getLineHeightInPx = (
   return fontSize * lineHeight;
 };
 
+/**
+ * Calculates vertical offset for a text with alphabetic baseline.
+ */
+export const getVerticalOffset = (
+  fontFamily: ExcalidrawTextElement["fontFamily"],
+  fontSize: ExcalidrawTextElement["fontSize"],
+  lineHeightPx: number,
+) => {
+  const { unitsPerEm, ascender, descender } =
+    FONT_METRICS[fontFamily] || FONT_METRICS[FONT_FAMILY.Helvetica];
+
+  const fontSizeEm = fontSize / unitsPerEm;
+  const lineGap = lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender;
+
+  const verticalOffset = fontSizeEm * ascender + lineGap;
+  return verticalOffset;
+};
+
 // FIXME rename to getApproxMinContainerHeight
 export const getApproxMinLineHeight = (
   fontSize: ExcalidrawTextElement["fontSize"],
@@ -329,72 +349,29 @@ export const getApproxMinLineHeight = (
 
 let canvas: HTMLCanvasElement | undefined;
 
-/**
- * @param forceAdvanceWidth use to force retrieve the "advance width" ~ `metrics.width`, instead of the actual boundind box width.
- *
- * > The advance width is the distance between the glyph's initial pen position and the next glyph's initial pen position.
- *
- * We need to use the advance width as that's the closest thing to the browser wrapping algo, hence using it for:
- * - text wrapping
- * - wysiwyg editor (+padding)
- *
- * Everything else should be based on the actual bounding box width.
- *
- * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
- */
-const getLineWidth = (
-  text: string,
-  font: FontString,
-  forceAdvanceWidth?: true,
-) => {
+const getLineWidth = (text: string, font: FontString) => {
   if (!canvas) {
     canvas = document.createElement("canvas");
   }
   const canvas2dContext = canvas.getContext("2d")!;
   canvas2dContext.font = font;
-  const metrics = canvas2dContext.measureText(text);
-
-  const advanceWidth = metrics.width;
-
-  // retrieve the actual bounding box width if these metrics are available (as of now > 95% coverage)
-  if (
-    !forceAdvanceWidth &&
-    window.TextMetrics &&
-    "actualBoundingBoxLeft" in window.TextMetrics.prototype &&
-    "actualBoundingBoxRight" in window.TextMetrics.prototype
-  ) {
-    // could be negative, therefore getting the absolute value
-    const actualWidth =
-      Math.abs(metrics.actualBoundingBoxLeft) +
-      Math.abs(metrics.actualBoundingBoxRight);
-
-    // fallback to advance width if the actual width is zero, i.e. on text editing start
-    // or when actual width does not respect whitespace chars, i.e. spaces
-    // otherwise actual width should always be bigger
-    return Math.max(actualWidth, advanceWidth);
-  }
+  const width = canvas2dContext.measureText(text).width;
 
   // since in test env the canvas measureText algo
   // doesn't measure text and instead just returns number of
   // characters hence we assume that each letteris 10px
   if (isTestEnv()) {
-    return advanceWidth * 10;
+    return width * 10;
   }
-
-  return advanceWidth;
+  return width;
 };
 
-export const getTextWidth = (
-  text: string,
-  font: FontString,
-  forceAdvanceWidth?: true,
-) => {
+export const getTextWidth = (text: string, font: FontString) => {
   const lines = splitIntoLines(text);
   let width = 0;
   lines.forEach((line) => {
-    width = Math.max(width, getLineWidth(line, font, forceAdvanceWidth));
+    width = Math.max(width, getLineWidth(line, font));
   });
-
   return width;
 };
 
@@ -425,11 +402,7 @@ export const parseTokens = (text: string) => {
   return words.join(" ").split(" ");
 };
 
-export const wrapText = (
-  text: string,
-  font: FontString,
-  maxWidth: number,
-): string => {
+export const wrapText = (text: string, font: FontString, maxWidth: number) => {
   // if maxWidth is not finite or NaN which can happen in case of bugs in
   // computation, we need to make sure we don't continue as we'll end up
   // in an infinite loop
@@ -439,7 +412,7 @@ export const wrapText = (
 
   const lines: Array<string> = [];
   const originalLines = text.split("\n");
-  const spaceAdvanceWidth = getLineWidth(" ", font, true);
+  const spaceWidth = getLineWidth(" ", font);
 
   let currentLine = "";
   let currentLineWidthTillNow = 0;
@@ -454,14 +427,13 @@ export const wrapText = (
     currentLine = "";
     currentLineWidthTillNow = 0;
   };
-
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font, true);
+  originalLines.forEach((originalLine) => {
+    const currentLineWidth = getTextWidth(originalLine, font);
 
     // Push the line if its <= maxWidth
     if (currentLineWidth <= maxWidth) {
       lines.push(originalLine);
-      continue;
+      return; // continue
     }
 
     const words = parseTokens(originalLine);
@@ -470,7 +442,7 @@ export const wrapText = (
     let index = 0;
 
     while (index < words.length) {
-      const currentWordWidth = getLineWidth(words[index], font, true);
+      const currentWordWidth = getLineWidth(words[index], font);
 
       // This will only happen when single word takes entire width
       if (currentWordWidth === maxWidth) {
@@ -482,6 +454,7 @@ export const wrapText = (
       else if (currentWordWidth > maxWidth) {
         // push current line since the current word exceeds the max width
         // so will be appended in next line
+
         push(currentLine);
 
         resetParams();
@@ -490,26 +463,20 @@ export const wrapText = (
           const currentChar = String.fromCodePoint(
             words[index].codePointAt(0)!,
           );
-
-          const line = currentLine + currentChar;
-          // use advance width instead of the actual width as it's closest to the browser wapping algo
-          // use width of the whole line instead of calculating individual chars to accomodate for kerning
-          const lineAdvanceWidth = getLineWidth(line, font, true);
-          const charAdvanceWidth = charWidth.calculate(currentChar, font);
-
-          currentLineWidthTillNow = lineAdvanceWidth;
+          const width = charWidth.calculate(currentChar, font);
+          currentLineWidthTillNow += width;
           words[index] = words[index].slice(currentChar.length);
 
           if (currentLineWidthTillNow >= maxWidth) {
             push(currentLine);
             currentLine = currentChar;
-            currentLineWidthTillNow = charAdvanceWidth;
+            currentLineWidthTillNow = width;
           } else {
-            currentLine = line;
+            currentLine += currentChar;
           }
         }
         // push current line if appending space exceeds max width
-        if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
+        if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
           push(currentLine);
           resetParams();
           // space needs to be appended before next word
@@ -518,18 +485,14 @@ export const wrapText = (
           // with css word-wrap
         } else if (!currentLine.endsWith("-")) {
           currentLine += " ";
-          currentLineWidthTillNow += spaceAdvanceWidth;
+          currentLineWidthTillNow += spaceWidth;
         }
         index++;
       } else {
         // Start appending words in a line till max width reached
         while (currentLineWidthTillNow < maxWidth && index < words.length) {
           const word = words[index];
-          currentLineWidthTillNow = getLineWidth(
-            currentLine + word,
-            font,
-            true,
-          );
+          currentLineWidthTillNow = getLineWidth(currentLine + word, font);
 
           if (currentLineWidthTillNow > maxWidth) {
             push(currentLine);
@@ -549,7 +512,7 @@ export const wrapText = (
           }
 
           // Push the word if appending space exceeds max width
-          if (currentLineWidthTillNow + spaceAdvanceWidth >= maxWidth) {
+          if (currentLineWidthTillNow + spaceWidth >= maxWidth) {
             if (shouldAppendSpace) {
               lines.push(currentLine.slice(0, -1));
             } else {
@@ -561,14 +524,12 @@ export const wrapText = (
         }
       }
     }
-
     if (currentLine.slice(-1) === " ") {
       // only remove last trailing space which we have added when joining words
       currentLine = currentLine.slice(0, -1);
       push(currentLine);
     }
-  }
-
+  });
   return lines.join("\n");
 };
 
@@ -581,7 +542,7 @@ export const charWidth = (() => {
       cachedCharWidth[font] = [];
     }
     if (!cachedCharWidth[font][ascii]) {
-      const width = getLineWidth(char, font, true);
+      const width = getLineWidth(char, font);
       cachedCharWidth[font][ascii] = width;
     }
 
@@ -633,9 +594,34 @@ export const getMaxCharWidth = (font: FontString) => {
   return Math.max(...cacheWithOutEmpty);
 };
 
+export const getApproxCharsToFitInWidth = (font: FontString, width: number) => {
+  // Generally lower case is used so converting to lower case
+  const dummyText = DUMMY_TEXT.toLocaleLowerCase();
+  const batchLength = 6;
+  let index = 0;
+  let widthTillNow = 0;
+  let str = "";
+  while (widthTillNow <= width) {
+    const batch = dummyText.substr(index, index + batchLength);
+    str += batch;
+    widthTillNow += getLineWidth(str, font);
+    if (index === dummyText.length - 1) {
+      index = 0;
+    }
+    index = index + batchLength;
+  }
+
+  while (widthTillNow > width) {
+    str = str.substr(0, str.length - 1);
+    widthTillNow = getLineWidth(str, font);
+  }
+  return str.length;
+};
+
 export const getBoundTextElementId = (container: ExcalidrawElement | null) => {
   return container?.boundElements?.length
-    ? container?.boundElements?.find((ele) => ele.type === "text")?.id || null
+    ? container?.boundElements?.filter((ele) => ele.type === "text")[0]?.id ||
+        null
     : null;
 };
 
@@ -880,9 +866,98 @@ export const isMeasureTextSupported = () => {
   return width > 0;
 };
 
+/**
+ * Unitless line height
+ *
+ * In previous versions we used `normal` line height, which browsers interpret
+ * differently, and based on font-family and font-size.
+ *
+ * To make line heights consistent across browsers we hardcode the values for
+ * each of our fonts based on most common average line-heights.
+ * See https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971
+ * where the values come from.
+ */
+const DEFAULT_LINE_HEIGHT = {
+  // ~1.25 is the average for Virgil in WebKit and Blink.
+  // Gecko (FF) uses ~1.28.
+  [FONT_FAMILY.Virgil]: 1.25 as ExcalidrawTextElement["lineHeight"],
+  // ~1.15 is the average for Helvetica in WebKit and Blink.
+  [FONT_FAMILY.Helvetica]: 1.15 as ExcalidrawTextElement["lineHeight"],
+  // ~1.2 is the average for Cascadia in WebKit and Blink, and kinda Gecko too
+  [FONT_FAMILY.Cascadia]: 1.2 as ExcalidrawTextElement["lineHeight"],
+};
+
+/** OS/2 sTypoAscender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypoascender */
+type sTypoAscender = number & MakeBrand<"sTypoAscender">;
+
+/** OS/2 sTypoDescender, https://learn.microsoft.com/en-us/typography/opentype/spec/os2#stypodescender */
+type sTypoDescender = number & MakeBrand<"sTypoDescender">;
+
+/** head.unitsPerEm, usually either 1000 or 2048 */
+type unitsPerEm = number & MakeBrand<"unitsPerEm">;
+
+/**
+ * Hardcoded metrics for default fonts, read by https://opentype.js.org/font-inspector.html.
+ * For custom fonts, read these metrics from OS/2 table and extend this object.
+ *
+ * WARN: opentype does NOT open WOFF2 correctly, make sure to convert WOFF2 to TTF first.
+ */
+export const FONT_METRICS: Record<
+  number,
+  {
+    unitsPerEm: number;
+    ascender: sTypoAscender;
+    descender: sTypoDescender;
+  }
+> = {
+  [FONT_FAMILY.Virgil]: {
+    unitsPerEm: 1000 as unitsPerEm,
+    ascender: 886 as sTypoAscender,
+    descender: -374 as sTypoDescender,
+  },
+  [FONT_FAMILY.Helvetica]: {
+    unitsPerEm: 2048 as unitsPerEm,
+    ascender: 1577 as sTypoAscender,
+    descender: -471 as sTypoDescender,
+  },
+  [FONT_FAMILY.Cascadia]: {
+    unitsPerEm: 2048 as unitsPerEm,
+    ascender: 1977 as sTypoAscender,
+    descender: -480 as sTypoDescender,
+  },
+  [FONT_FAMILY.Assistant]: {
+    unitsPerEm: 1000 as unitsPerEm,
+    ascender: 1021 as sTypoAscender,
+    descender: -287 as sTypoDescender,
+  },
+};
+
+export const getDefaultLineHeight = (fontFamily: FontFamilyValues) => {
+  if (fontFamily in DEFAULT_LINE_HEIGHT) {
+    return DEFAULT_LINE_HEIGHT[fontFamily];
+  }
+  return DEFAULT_LINE_HEIGHT[DEFAULT_FONT_FAMILY];
+};
+
 export const getMinTextElementWidth = (
   font: FontString,
   lineHeight: ExcalidrawTextElement["lineHeight"],
 ) => {
   return measureText("", font, lineHeight).width + BOUND_TEXT_PADDING * 2;
 };
+
+/** retrieves text from text elements and concatenates to a single string */
+export const getTextFromElements = (
+  elements: readonly ExcalidrawElement[],
+  separator = "\n\n",
+) => {
+  const text = elements
+    .reduce((acc: string[], element) => {
+      if (isTextElement(element)) {
+        acc.push(element.text);
+      }
+      return acc;
+    }, [])
+    .join(separator);
+  return text;
+};

packages/excalidraw/element/textWysiwyg.test.tsx

@@ -916,13 +916,13 @@ describe("textWysiwyg", () => {
       await new Promise((r) => setTimeout(r, 0));
       updateTextEditor(editor, "Hello World!");
       editor.blur();
-      expect(text.fontFamily).toEqual(FONT_FAMILY.Excalifont);
+      expect(text.fontFamily).toEqual(FONT_FAMILY.Virgil);
 
       fireEvent.click(screen.getByTitle(/code/i));
 
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY["Comic Shanns"]);
+      ).toEqual(FONT_FAMILY.Cascadia);
 
       //undo
       Keyboard.withModifierKeys({ ctrl: true }, () => {
@@ -930,7 +930,7 @@ describe("textWysiwyg", () => {
       });
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Excalifont);
+      ).toEqual(FONT_FAMILY.Virgil);
 
       //redo
       Keyboard.withModifierKeys({ ctrl: true, shift: true }, () => {
@@ -938,7 +938,7 @@ describe("textWysiwyg", () => {
       });
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY["Comic Shanns"]);
+      ).toEqual(FONT_FAMILY.Cascadia);
     });
 
     it("should wrap text and vertcially center align once text submitted", async () => {
@@ -1330,14 +1330,14 @@ describe("textWysiwyg", () => {
 
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY["Comic Shanns"]);
+      ).toEqual(FONT_FAMILY.Cascadia);
       expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(75);
 
       fireEvent.click(screen.getByTitle(/Very large/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontSize,
       ).toEqual(36);
-      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(100);
+      expect(getOriginalContainerHeightFromCache(rectangle.id)).toBe(97);
     });
 
     it("should update line height when font family updated", async () => {
@@ -1357,18 +1357,18 @@ describe("textWysiwyg", () => {
       fireEvent.click(screen.getByTitle(/code/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY["Comic Shanns"]);
+      ).toEqual(FONT_FAMILY.Cascadia);
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.25);
+      ).toEqual(1.2);
 
       fireEvent.click(screen.getByTitle(/normal/i));
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).fontFamily,
-      ).toEqual(FONT_FAMILY.Nunito);
+      ).toEqual(FONT_FAMILY.Helvetica);
       expect(
         (h.elements[1] as ExcalidrawTextElementWithContainer).lineHeight,
-      ).toEqual(1.35);
+      ).toEqual(1.15);
     });
 
     describe("should align correctly", () => {

packages/excalidraw/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, isSafari } from "../constants";
+import { CLASSES } from "../constants";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -132,15 +132,10 @@ export const textWysiwyg = ({
         updatedTextElement,
         app.scene.getNonDeletedElementsMap(),
       );
-
-      let width = updatedTextElement.width;
-
-      // set to element height by default since that's
-      // what is going to be used for unbounded text
-      let height = updatedTextElement.height;
-
       let maxWidth = updatedTextElement.width;
       let maxHeight = updatedTextElement.height;
+      let textElementWidth = updatedTextElement.width;
+      const textElementHeight = updatedTextElement.height;
 
       if (container && updatedTextElement.containerId) {
         if (isArrowElement(container)) {
@@ -182,9 +177,9 @@ export const textWysiwyg = ({
         );
 
         // autogrow container height if text exceeds
-        if (!isArrowElement(container) && height > maxHeight) {
+        if (!isArrowElement(container) && textElementHeight > maxHeight) {
           const targetContainerHeight = computeContainerDimensionForBoundText(
-            height,
+            textElementHeight,
             container.type,
           );
 
@@ -195,10 +190,10 @@ export const textWysiwyg = ({
           // is reached when text is removed
           !isArrowElement(container) &&
           container.height > originalContainerData.height &&
-          height < maxHeight
+          textElementHeight < maxHeight
         ) {
           const targetContainerHeight = computeContainerDimensionForBoundText(
-            height,
+            textElementHeight,
             container.type,
           );
           mutateElement(container, { height: targetContainerHeight });
@@ -231,41 +226,30 @@ export const textWysiwyg = ({
 
       if (!container) {
         maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
-        width = Math.min(width, maxWidth);
+        textElementWidth = Math.min(textElementWidth, maxWidth);
       } else {
-        width += 0.5;
+        textElementWidth += 0.5;
       }
 
-      // add 5% buffer otherwise it causes wysiwyg to jump
-      height *= 1.05;
-
-      const font = getFontString(updatedTextElement);
-
-      // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)
-      const padding = !isSafari
-        ? Math.ceil(updatedTextElement.fontSize / 2)
-        : 0;
-
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
       Object.assign(editable.style, {
-        font,
+        font: getFontString(updatedTextElement),
         // must be defined *after* font ¯\_(ツ)_/¯
         lineHeight: updatedTextElement.lineHeight,
-        width: `${width}px`,
-        height: `${height}px`,
-        left: `${viewportX - padding}px`,
+        width: `${textElementWidth}px`,
+        height: `${textElementHeight}px`,
+        left: `${viewportX}px`,
         top: `${viewportY}px`,
         transform: getTransform(
-          width,
-          height,
+          textElementWidth,
+          textElementHeight,
           getTextElementAngle(updatedTextElement, container),
           appState,
           maxWidth,
           editorMaxHeight,
         ),
-        padding: `0 ${padding}px`,
         textAlign,
         verticalAlign,
         color: updatedTextElement.strokeColor,
@@ -306,6 +290,7 @@ export const textWysiwyg = ({
     minHeight: "1em",
     backfaceVisibility: "hidden",
     margin: 0,
+    padding: 0,
     border: 0,
     outline: 0,
     resize: "none",
@@ -351,7 +336,7 @@ export const textWysiwyg = ({
           font,
           getBoundTextMaxWidth(container, boundTextElement),
         );
-        const width = getTextWidth(wrappedText, font, true);
+        const width = getTextWidth(wrappedText, font);
         editable.style.width = `${width}px`;
       }
     };
@@ -500,10 +485,8 @@ export const textWysiwyg = ({
   };
 
   const stopEvent = (event: Event) => {
-    if (event.target instanceof HTMLCanvasElement) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
+    event.preventDefault();
+    event.stopPropagation();
   };
 
   // using a state variable instead of passing it to the handleSubmit callback
@@ -596,15 +579,46 @@ export const textWysiwyg = ({
     // in that same tick.
     const target = event?.target;
 
-    const isPropertiesTrigger =
+    const isTargetPickerTrigger =
       target instanceof HTMLElement &&
-      target.classList.contains("properties-trigger");
+      target.classList.contains("active-color");
 
     setTimeout(() => {
       editable.onblur = handleSubmit;
 
+      if (isTargetPickerTrigger) {
+        const callback = (
+          mutationList: MutationRecord[],
+          observer: MutationObserver,
+        ) => {
+          const radixIsRemoved = mutationList.find(
+            (mutation) =>
+              mutation.removedNodes.length > 0 &&
+              (mutation.removedNodes[0] as HTMLElement).dataset
+                ?.radixPopperContentWrapper !== undefined,
+          );
+
+          if (radixIsRemoved) {
+            // should work without this in theory
+            // and i think it does actually but radix probably somewhere,
+            // somehow sets the focus elsewhere
+            setTimeout(() => {
+              editable.focus();
+            });
+
+            observer.disconnect();
+          }
+        };
+
+        const observer = new MutationObserver(callback);
+
+        observer.observe(document.querySelector(".excalidraw-container")!, {
+          childList: true,
+        });
+      }
+
       // case: clicking on the same property → no change → no update → no focus
-      if (!isPropertiesTrigger) {
+      if (!isTargetPickerTrigger) {
         editable.focus();
       }
     });
@@ -612,18 +626,16 @@ export const textWysiwyg = ({
 
   // prevent blur when changing properties from the menu
   const onPointerDown = (event: MouseEvent) => {
-    const target = event?.target;
-
-    const isPropertiesTrigger =
-      target instanceof HTMLElement &&
-      target.classList.contains("properties-trigger");
+    const isTargetPickerTrigger =
+      event.target instanceof HTMLElement &&
+      event.target.classList.contains("active-color");
 
     if (
       ((event.target instanceof HTMLElement ||
         event.target instanceof SVGElement) &&
         event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
         !isWritableElement(event.target)) ||
-      isPropertiesTrigger
+      isTargetPickerTrigger
     ) {
       editable.onblur = null;
       window.addEventListener("pointerup", bindBlurEvent);
@@ -632,7 +644,7 @@ export const textWysiwyg = ({
       window.addEventListener("blur", handleSubmit);
     } else if (
       event.target instanceof HTMLElement &&
-      event.target instanceof HTMLCanvasElement &&
+      !event.target.contains(editable) &&
       // Vitest simply ignores stopPropagation, capture-mode, or rAF
       // so without introducing crazier hacks, nothing we can do
       !isTestEnv()
@@ -652,10 +664,10 @@ export const textWysiwyg = ({
   // handle updates of textElement properties of editing element
   const unbindUpdate = Scene.getScene(element)!.onUpdate(() => {
     updateWysiwygStyle();
-    const isPopupOpened = !!document.activeElement?.closest(
-      ".properties-content",
+    const isColorPickerActive = !!document.activeElement?.closest(
+      ".color-picker-content",
     );
-    if (!isPopupOpened) {
+    if (!isColorPickerActive) {
       editable.focus();
     }
   });

packages/excalidraw/element/types.ts

@@ -7,7 +7,6 @@ import type {
   VERTICAL_ALIGN,
 } from "../constants";
 import type { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
-import type { MagicCacheData } from "../data/magic";
 
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
@@ -96,11 +95,22 @@ export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase &
     type: "embeddable";
   }>;
 
+export type MagicGenerationData =
+  | {
+      status: "pending";
+    }
+  | { status: "done"; html: string }
+  | {
+      status: "error";
+      message?: string;
+      code: "ERR_GENERATION_INTERRUPTED" | string;
+    };
+
 export type ExcalidrawIframeElement = _ExcalidrawElementBase &
   Readonly<{
     type: "iframe";
     // TODO move later to AI-specific frame
-    customData?: { generationData?: MagicCacheData };
+    customData?: { generationData?: MagicGenerationData };
   }>;
 
 export type ExcalidrawIframeLikeElement =

packages/excalidraw/fonts/ExcalidrawFont.ts

@@ -1,78 +0,0 @@
-import { stringToBase64, toByteString } from "../data/encode";
-
-export interface Font {
-  url: URL;
-  fontFace: FontFace;
-  getContent(): Promise<string>;
-}
-export const UNPKG_PROD_URL = `https://unpkg.com/${
-  import.meta.env.VITE_PKG_NAME
-}@${import.meta.env.PKG_VERSION}/dist/prod/`;
-
-export class ExcalidrawFont implements Font {
-  public readonly url: URL;
-  public readonly fontFace: FontFace;
-
-  constructor(family: string, uri: string, descriptors?: FontFaceDescriptors) {
-    // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away
-    const assetUrl: string = uri.replace(/^\/+/, "");
-    let baseUrl: string | undefined = undefined;
-
-    // fallback to unpkg to form a valid URL in case of a passed relative assetUrl
-    let baseUrlBuilder = window.EXCALIDRAW_ASSET_PATH || UNPKG_PROD_URL;
-
-    // in case user passed a root-relative url (~absolute path),
-    // like "/" or "/some/path", or relative (starts with "./"),
-    // prepend it with `location.origin`
-    if (/^\.?\//.test(baseUrlBuilder)) {
-      baseUrlBuilder = new URL(
-        baseUrlBuilder.replace(/^\.?\/+/, ""),
-        window?.location?.origin,
-      ).toString();
-    }
-
-    // ensure there is a trailing slash, otherwise url won't be correctly concatenated
-    baseUrl = `${baseUrlBuilder.replace(/\/+$/, "")}/`;
-
-    this.url = new URL(assetUrl, baseUrl);
-    this.fontFace = new FontFace(family, `url(${this.url})`, {
-      display: "swap",
-      style: "normal",
-      weight: "400",
-      ...descriptors,
-    });
-  }
-
-  /**
-   * Fetches woff2 content based on the registered url (browser).
-   *
-   * Use dataurl outside the browser environment.
-   */
-  public async getContent(): Promise<string> {
-    if (this.url.protocol === "data:") {
-      // it's dataurl, the font is inlined as base64, no need to fetch
-      return this.url.toString();
-    }
-
-    const response = await fetch(this.url, {
-      headers: {
-        Accept: "font/woff2",
-      },
-    });
-
-    if (!response.ok) {
-      console.error(
-        `Couldn't fetch font-family "${this.fontFace.family}" from url "${this.url}"`,
-        response,
-      );
-    }
-
-    const mimeType = await response.headers.get("Content-Type");
-    const buffer = await response.arrayBuffer();
-
-    return `data:${mimeType};base64,${await stringToBase64(
-      await toByteString(buffer),
-      true,
-    )}`;
-  }
-}

packages/excalidraw/fonts/assets/fonts.css

@@ -1,34 +0,0 @@
-/* Only UI fonts here, which are needed before the editor initializes. */
-/* These also cannot be preprended with `EXCALIDRAW_ASSET_PATH`. */
-
-@font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Regular.woff2) format("woff2");
-  font-weight: 400;
-  style: normal;
-  display: swap;
-}
-
-@font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Medium.woff2) format("woff2");
-  font-weight: 500;
-  style: normal;
-  display: swap;
-}
-
-@font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-SemiBold.woff2) format("woff2");
-  font-weight: 600;
-  style: normal;
-  display: swap;
-}
-
-@font-face {
-  font-family: "Assistant";
-  src: url(./Assistant-Bold.woff2) format("woff2");
-  font-weight: 700;
-  style: normal;
-  display: swap;
-}

packages/excalidraw/fonts/index.ts

@@ -1,308 +0,0 @@
-import type Scene from "../scene/Scene";
-import type { ValueOf } from "../utility-types";
-import type { ExcalidrawTextElement, FontFamilyValues } from "../element/types";
-import { ShapeCache } from "../scene/ShapeCache";
-import { isTextElement } from "../element";
-import { getFontString } from "../utils";
-import { FONT_FAMILY } from "../constants";
-import {
-  LOCAL_FONT_PROTOCOL,
-  FONT_METADATA,
-  RANGES,
-  type FontMetadata,
-} from "./metadata";
-import { ExcalidrawFont, type Font } from "./ExcalidrawFont";
-import { getContainerElement } from "../element/textElement";
-
-import Virgil from "./assets/Virgil-Regular.woff2";
-import Excalifont from "./assets/Excalifont-Regular.woff2";
-import Cascadia from "./assets/CascadiaMono-Regular.woff2";
-import ComicShanns from "./assets/ComicShanns-Regular.woff2";
-import LiberationSans from "./assets/LiberationSans-Regular.woff2";
-
-import LilitaLatin from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYEF8RXi4EwQ.woff2";
-import LilitaLatinExt from "https://fonts.gstatic.com/s/lilitaone/v15/i7dPIFZ9Zz-WBtRtedDbYE98RXi4EwSsbg.woff2";
-
-import NunitoLatin from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTQ3j6zbXWjgeg.woff2";
-import NunitoLatinExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTo3j6zbXWjgevT5.woff2";
-import NunitoCyrilic from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTA3j6zbXWjgevT5.woff2";
-import NunitoCyrilicExt from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTk3j6zbXWjgevT5.woff2";
-import NunitoVietnamese from "https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDIkhdTs3j6zbXWjgevT5.woff2";
-
-export class Fonts {
-  // it's ok to track fonts across multiple instances only once, so let's use
-  // a static member to reduce memory footprint
-  public static readonly loadedFontsCache = new Set<string>();
-
-  private static _registered:
-    | Map<
-        number,
-        {
-          metadata: FontMetadata;
-          fontFaces: Font[];
-        }
-      >
-    | undefined;
-
-  public static get registered() {
-    if (!Fonts._registered) {
-      // lazy load the fonts
-      Fonts._registered = Fonts.init();
-    }
-
-    return Fonts._registered;
-  }
-
-  public get registered() {
-    return Fonts.registered;
-  }
-
-  private readonly scene: Scene;
-
-  public get sceneFamilies() {
-    return Array.from(
-      this.scene.getNonDeletedElements().reduce((families, element) => {
-        if (isTextElement(element)) {
-          families.add(element.fontFamily);
-        }
-        return families;
-      }, new Set<number>()),
-    );
-  }
-
-  constructor({ scene }: { scene: Scene }) {
-    this.scene = scene;
-  }
-
-  /**
-   * if we load a (new) font, it's likely that text elements using it have
-   * already been rendered using a fallback font. Thus, we want invalidate
-   * their shapes and rerender. See #637.
-   *
-   * Invalidates text elements and rerenders scene, provided that at least one
-   * of the supplied fontFaces has not already been processed.
-   */
-  public onLoaded = (fontFaces: readonly FontFace[]) => {
-    if (
-      // bail if all fonts with have been processed. We're checking just a
-      // subset of the font properties (though it should be enough), so it
-      // can technically bail on a false positive.
-      fontFaces.every((fontFace) => {
-        const sig = `${fontFace.family}-${fontFace.style}-${fontFace.weight}-${fontFace.unicodeRange}`;
-        if (Fonts.loadedFontsCache.has(sig)) {
-          return true;
-        }
-        Fonts.loadedFontsCache.add(sig);
-        return false;
-      })
-    ) {
-      return false;
-    }
-
-    let didUpdate = false;
-
-    const elementsMap = this.scene.getNonDeletedElementsMap();
-
-    for (const element of this.scene.getNonDeletedElements()) {
-      if (isTextElement(element)) {
-        didUpdate = true;
-        ShapeCache.delete(element);
-        const container = getContainerElement(element, elementsMap);
-        if (container) {
-          ShapeCache.delete(container);
-        }
-      }
-    }
-
-    if (didUpdate) {
-      this.scene.triggerUpdate();
-    }
-  };
-
-  public load = async () => {
-    // Add all registered font faces into the `document.fonts` (if not added already)
-    for (const { fontFaces } of Fonts.registered.values()) {
-      for (const { fontFace, url } of fontFaces) {
-        if (
-          url.protocol !== LOCAL_FONT_PROTOCOL &&
-          !window.document.fonts.has(fontFace)
-        ) {
-          window.document.fonts.add(fontFace);
-        }
-      }
-    }
-
-    const loaded = await Promise.all(
-      this.sceneFamilies.map(async (fontFamily) => {
-        const fontString = getFontString({
-          fontFamily,
-          fontSize: 16,
-        });
-
-        // WARN: without "text" param it does not have to mean that all font faces are loaded, instead it could be just one!
-        if (!window.document.fonts.check(fontString)) {
-          try {
-            // WARN: browser prioritizes loading only font faces with unicode ranges for characters which are present in the document (html & canvas), other font faces could stay unloaded
-            // we might want to retry here, i.e.  in case CDN is down, but so far I didn't experience any issues - maybe it handles retry-like logic under the hood
-            return await window.document.fonts.load(fontString);
-          } catch (e) {
-            // don't let it all fail if just one font fails to load
-            console.error(
-              `Failed to load font: "${fontString}" with error "${e}", given the following registered font:`,
-              JSON.stringify(Fonts.registered.get(fontFamily), undefined, 2),
-            );
-          }
-        }
-
-        return Promise.resolve();
-      }),
-    );
-
-    this.onLoaded(loaded.flat().filter(Boolean) as FontFace[]);
-  };
-
-  /**
-   * WARN: should be called just once on init, even across multiple instances.
-   */
-  private static init() {
-    const fonts = {
-      registered: new Map<
-        ValueOf<typeof FONT_FAMILY>,
-        { metadata: FontMetadata; fontFaces: Font[] }
-      >(),
-    };
-
-    const _register = register.bind(fonts);
-
-    _register("Virgil", FONT_METADATA[FONT_FAMILY.Virgil], {
-      uri: Virgil,
-    });
-
-    _register("Excalifont", FONT_METADATA[FONT_FAMILY.Excalifont], {
-      uri: Excalifont,
-    });
-
-    // keeping for backwards compatibility reasons, uses system font (Helvetica on MacOS, Arial on Win)
-    _register("Helvetica", FONT_METADATA[FONT_FAMILY.Helvetica], {
-      uri: LOCAL_FONT_PROTOCOL,
-    });
-
-    // used for server-side pdf & png export instead of helvetica (technically does not need metrics, but kept in for consistency)
-    _register(
-      "Liberation Sans",
-      FONT_METADATA[FONT_FAMILY["Liberation Sans"]],
-      {
-        uri: LiberationSans,
-      },
-    );
-
-    _register("Cascadia", FONT_METADATA[FONT_FAMILY.Cascadia], {
-      uri: Cascadia,
-    });
-
-    _register("Comic Shanns", FONT_METADATA[FONT_FAMILY["Comic Shanns"]], {
-      uri: ComicShanns,
-    });
-
-    _register(
-      "Lilita One",
-      FONT_METADATA[FONT_FAMILY["Lilita One"]],
-      { uri: LilitaLatinExt, descriptors: { unicodeRange: RANGES.LATIN_EXT } },
-      { uri: LilitaLatin, descriptors: { unicodeRange: RANGES.LATIN } },
-    );
-
-    _register(
-      "Nunito",
-      FONT_METADATA[FONT_FAMILY.Nunito],
-      {
-        uri: NunitoCyrilicExt,
-        descriptors: { unicodeRange: RANGES.CYRILIC_EXT, weight: "500" },
-      },
-      {
-        uri: NunitoCyrilic,
-        descriptors: { unicodeRange: RANGES.CYRILIC, weight: "500" },
-      },
-      {
-        uri: NunitoVietnamese,
-        descriptors: { unicodeRange: RANGES.VIETNAMESE, weight: "500" },
-      },
-      {
-        uri: NunitoLatinExt,
-        descriptors: { unicodeRange: RANGES.LATIN_EXT, weight: "500" },
-      },
-      {
-        uri: NunitoLatin,
-        descriptors: { unicodeRange: RANGES.LATIN, weight: "500" },
-      },
-    );
-
-    return fonts.registered;
-  }
-}
-
-/**
- * Register a new font.
- *
- * @param family font family
- * @param metadata font metadata
- * @param params array of the rest of the FontFace parameters [uri: string, descriptors: FontFaceDescriptors?] ,
- */
-function register(
-  this:
-    | Fonts
-    | {
-        registered: Map<
-          ValueOf<typeof FONT_FAMILY>,
-          { metadata: FontMetadata; fontFaces: Font[] }
-        >;
-      },
-  family: string,
-  metadata: FontMetadata,
-  ...params: Array<{ uri: string; descriptors?: FontFaceDescriptors }>
-) {
-  // TODO: likely we will need to abandon number "id" in order to support custom fonts
-  const familyId = FONT_FAMILY[family as keyof typeof FONT_FAMILY];
-  const registeredFamily = this.registered.get(familyId);
-
-  if (!registeredFamily) {
-    this.registered.set(familyId, {
-      metadata,
-      fontFaces: params.map(
-        ({ uri, descriptors }) => new ExcalidrawFont(family, uri, descriptors),
-      ),
-    });
-  }
-
-  return this.registered;
-}
-
-/**
- * Calculates vertical offset for a text with alphabetic baseline.
- */
-export const getVerticalOffset = (
-  fontFamily: ExcalidrawTextElement["fontFamily"],
-  fontSize: ExcalidrawTextElement["fontSize"],
-  lineHeightPx: number,
-) => {
-  const { unitsPerEm, ascender, descender } =
-    Fonts.registered.get(fontFamily)?.metadata.metrics ||
-    FONT_METADATA[FONT_FAMILY.Virgil].metrics;
-
-  const fontSizeEm = fontSize / unitsPerEm;
-  const lineGap =
-    (lineHeightPx - fontSizeEm * ascender + fontSizeEm * descender) / 2;
-
-  const verticalOffset = fontSizeEm * ascender + lineGap;
-  return verticalOffset;
-};
-
-/**
- * Gets line height forr a selected family.
- */
-export const getLineHeight = (fontFamily: FontFamilyValues) => {
-  const { lineHeight } =
-    Fonts.registered.get(fontFamily)?.metadata.metrics ||
-    FONT_METADATA[FONT_FAMILY.Excalifont].metrics;
-
-  return lineHeight as ExcalidrawTextElement["lineHeight"];
-};

packages/excalidraw/fonts/metadata.ts

@@ -1,125 +0,0 @@
-import {
-  FontFamilyCodeIcon,
-  FontFamilyHeadingIcon,
-  FontFamilyNormalIcon,
-  FreedrawIcon,
-} from "../components/icons";
-import { FONT_FAMILY } from "../constants";
-
-/**
- * Encapsulates font metrics with additional font metadata.
- * */
-export interface FontMetadata {
-  /** for head & hhea metrics read the woff2 with https://fontdrop.info/ */
-  metrics: {
-    /** head.unitsPerEm metric */
-    unitsPerEm: 1000 | 1024 | 2048;
-    /** hhea.ascender metric */
-    ascender: number;
-    /** hhea.descender metric */
-    descender: number;
-    /** harcoded unitless line-height, https://github.com/excalidraw/excalidraw/pull/6360#issuecomment-1477635971 */
-    lineHeight: number;
-  };
-  /** element to be displayed as an icon  */
-  icon: JSX.Element;
-  /** flag to indicate a deprecated font */
-  deprecated?: true;
-  /** flag to indicate a server-side only font */
-  serverSide?: true;
-}
-
-export const FONT_METADATA: Record<number, FontMetadata> = {
-  [FONT_FAMILY.Excalifont]: {
-    metrics: {
-      unitsPerEm: 1000,
-      ascender: 886,
-      descender: -374,
-      lineHeight: 1.25,
-    },
-    icon: FreedrawIcon,
-  },
-  [FONT_FAMILY.Nunito]: {
-    metrics: {
-      unitsPerEm: 1000,
-      ascender: 1011,
-      descender: -353,
-      lineHeight: 1.35,
-    },
-    icon: FontFamilyNormalIcon,
-  },
-  [FONT_FAMILY["Lilita One"]]: {
-    metrics: {
-      unitsPerEm: 1000,
-      ascender: 923,
-      descender: -220,
-      lineHeight: 1.15,
-    },
-    icon: FontFamilyHeadingIcon,
-  },
-  [FONT_FAMILY["Comic Shanns"]]: {
-    metrics: {
-      unitsPerEm: 1000,
-      ascender: 750,
-      descender: -250,
-      lineHeight: 1.25,
-    },
-    icon: FontFamilyCodeIcon,
-  },
-  [FONT_FAMILY.Virgil]: {
-    metrics: {
-      unitsPerEm: 1000,
-      ascender: 886,
-      descender: -374,
-      lineHeight: 1.25,
-    },
-    icon: FreedrawIcon,
-    deprecated: true,
-  },
-  [FONT_FAMILY.Helvetica]: {
-    metrics: {
-      unitsPerEm: 2048,
-      ascender: 1577,
-      descender: -471,
-      lineHeight: 1.15,
-    },
-    icon: FontFamilyNormalIcon,
-    deprecated: true,
-  },
-  [FONT_FAMILY.Cascadia]: {
-    metrics: {
-      unitsPerEm: 2048,
-      ascender: 1900,
-      descender: -480,
-      lineHeight: 1.2,
-    },
-    icon: FontFamilyCodeIcon,
-    deprecated: true,
-  },
-  [FONT_FAMILY["Liberation Sans"]]: {
-    metrics: {
-      unitsPerEm: 2048,
-      ascender: 1854,
-      descender: -434,
-      lineHeight: 1.15,
-    },
-    icon: FontFamilyNormalIcon,
-    serverSide: true,
-  },
-};
-
-/** Unicode ranges */
-export const RANGES = {
-  LATIN:
-    "U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD",
-  LATIN_EXT:
-    "U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF",
-  CYRILIC_EXT:
-    "U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F",
-  CYRILIC: "U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116",
-  VIETNAMESE:
-    "U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB",
-};
-
-/** local protocol to skip the local font from registering or inlining */
-export const LOCAL_FONT_PROTOCOL = "local:";

packages/excalidraw/fractionalIndex.ts

@@ -6,28 +6,20 @@ import type {
   OrderedExcalidrawElement,
 } from "./element/types";
 import { InvalidFractionalIndexError } from "./errors";
-import { arrayToMap } from "./utils";
-
-/**
- * Normalizes indices for all elements, to prevent possible issues caused by using stale (too old, too long) indices.
- */
-export const normalizeIndices = (elements: ExcalidrawElement[]) => {
-  return syncMovedIndices(elements, arrayToMap(elements));
-};
 
 /**
  * Envisioned relation between array order and fractional indices:
  *
  * 1) Array (or array-like ordered data structure) should be used as a cache of elements order, hiding the internal fractional indices implementation.
- * - it's undesirable to perform reorder for each related operation, therefore it's necessary to cache the order defined by fractional indices into an ordered data structure
+ * - it's undesirable to to perform reorder for each related operation, thefeore it's necessary to cache the order defined by fractional indices into an ordered data structure
  * - it's easy enough to define the order of the elements from the outside (boundaries), without worrying about the underlying structure of fractional indices (especially for the host apps)
  * - it's necessary to always keep the array support for backwards compatibility (restore) - old scenes, old libraries, supporting multiple excalidraw versions etc.
  * - it's necessary to always keep the fractional indices in sync with the array order
  * - elements with invalid indices should be detected and synced, without altering the already valid indices
  *
  * 2) Fractional indices should be used to reorder the elements, whenever the cached order is expected to be invalidated.
- * - as the fractional indices are encoded as part of the elements, it opens up possibilities for incremental-like APIs
- * - re-order based on fractional indices should be part of (multiplayer) operations such as reconciliation & undo/redo
+ * - as the fractional indices are encoded as part of the elements, it opens up possibilties for incremental-like APIs
+ * - re-order based on fractional indices should be part of (multiplayer) operations such as reconcillitation & undo/redo
  * - technically all the z-index actions could perform also re-order based on fractional indices,but in current state it would not bring much benefits,
  *   as it's faster & more efficient to perform re-order based on array manipulation and later synchronisation of moved indices with the array order
  */