build(deps): bump http-proxy-middleware from 2.0.6 to 2.0.7 in /dev-docs

Bumps [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware) from 2.0.6 to 2.0.7.
- [Release notes](https://github.com/chimurai/http-proxy-middleware/releases)
- [Changelog](https://github.com/chimurai/http-proxy-middleware/blob/v2.0.7/CHANGELOG.md)
- [Commits](https://github.com/chimurai/http-proxy-middleware/compare/v2.0.6...v2.0.7)

---
updated-dependencies:
- dependency-name: http-proxy-middleware
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.env.development

@@ -8,7 +8,7 @@ VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfu
 VITE_APP_WS_SERVER_URL=http://localhost:3002
 
 VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=http://localhost:3000
+VITE_APP_PLUS_APP=https://app.excalidraw.com
 
 VITE_APP_AI_BACKEND=http://localhost:3015
 
@@ -37,14 +37,3 @@ VITE_APP_COLLAPSE_OVERLAY=true
 
 # Set this flag to false to disable eslint
 VITE_APP_ENABLE_ESLINT=true
-
-# Enable PWA in dev server
-VITE_APP_ENABLE_PWA=false
-
-VITE_APP_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0
-7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij
-ba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y
-UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
-s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
-kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
-HQIDAQAB'

.env.production

@@ -15,18 +15,3 @@ 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_PLUS_EXPORT_PUBLIC_KEY='MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEApQ0jM9Qz8TdFLzcuAZZX
-/WvuKSOJxiw6AR/ZcE3eFQWM/mbFdhQgyK8eHGkKQifKzH1xUZjCxyXcxW6ZO02t
-kPOPxhz+nxUrIoWCD/V4NGmUA1lxwHuO21HN1gzKrN3xHg5EGjyouR9vibT9VDGF
-gq6+4Ic/kJX+AD2MM7Yre2+FsOdysrmuW2Fu3ahuC1uQE7pOe1j0k7auNP0y1q53
-PrB8Ts2LUpepWC1l7zIXFm4ViDULuyWXTEpUcHSsEH8vpd1tckjypxCwkipfZsXx
-iPszy0o0Dx2iArPfWMXlFAI9mvyFCyFC3+nSvfyAUb2C4uZgCwAuyFh/ydPF4DEE
-PQIDAQAB'
-
-# Set the below flags explicitly to false in production mode since vite loads and merges .env.local vars when  running the build command
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=false
-VITE_APP_COLLAPSE_OVERLAY=false
-# Enable eslint in dev server
-VITE_APP_ENABLE_ESLINT=false
-

.github/workflows/locales-coverage.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v2
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 

.github/workflows/semantic-pr-title.yml

@@ -11,6 +11,6 @@ jobs:
   semantic:
     runs-on: ubuntu-latest
     steps:
-      - uses: amannn/action-semantic-pull-request@v5
+      - uses: amannn/action-semantic-pull-request@v3.0.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

dev-docs/yarn.lock

@@ -4557,9 +4557,9 @@ http-parser-js@>=0.5.1:
   integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
 http-proxy-middleware@^2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
-  integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz#915f236d92ae98ef48278a95dedf17e991936ec6"
+  integrity sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==
   dependencies:
     "@types/http-proxy" "^1.17.8"
     http-proxy "^1.18.1"

examples/excalidraw/components/ExampleApp.tsx

@@ -369,12 +369,10 @@ export default function ExampleApp({
       return false;
     }
     await exportToClipboard({
-      data: {
-        elements: excalidrawAPI.getSceneElements(),
-        appState: excalidrawAPI.getAppState(),
-        files: excalidrawAPI.getFiles(),
-      },
-      type: "json",
+      elements: excalidrawAPI.getSceneElements(),
+      appState: excalidrawAPI.getAppState(),
+      files: excalidrawAPI.getFiles(),
+      type,
     });
     window.alert(`Copied to clipboard as ${type} successfully`);
   };
@@ -819,17 +817,15 @@ export default function ExampleApp({
                 return;
               }
               const svg = await exportToSvg({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                    exportEmbedScene,
-                    width: 300,
-                    height: 100,
-                  },
-                  files: excalidrawAPI?.getFiles(),
+                elements: excalidrawAPI?.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
+                  exportEmbedScene,
+                  width: 300,
+                  height: 100,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               appRef.current.querySelector(".export-svg").innerHTML =
                 svg.outerHTML;
@@ -845,18 +841,14 @@ export default function ExampleApp({
                 return;
               }
               const blob = await exportToBlob({
-                data: {
-                  elements: excalidrawAPI?.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportEmbedScene,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI?.getFiles(),
-                },
-                config: {
-                  mimeType: "image/png",
+                elements: excalidrawAPI?.getSceneElements(),
+                mimeType: "image/png",
+                appState: {
+                  ...initialData.appState,
+                  exportEmbedScene,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI?.getFiles(),
               });
               setBlobUrl(window.URL.createObjectURL(blob));
             }}
@@ -872,14 +864,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";
@@ -895,14 +885,12 @@ export default function ExampleApp({
                 return;
               }
               const canvas = await exportToCanvas({
-                data: {
-                  elements: excalidrawAPI.getSceneElements(),
-                  appState: {
-                    ...initialData.appState,
-                    exportWithDarkMode,
-                  },
-                  files: excalidrawAPI.getFiles(),
+                elements: excalidrawAPI.getSceneElements(),
+                appState: {
+                  ...initialData.appState,
+                  exportWithDarkMode,
                 },
+                files: excalidrawAPI.getFiles(),
               });
               const ctx = canvas.getContext("2d")!;
               ctx.font = "30px Excalifont";

excalidraw-app/App.tsx

@@ -25,13 +25,7 @@ import {
   TTDDialogTrigger,
   StoreAction,
   reconcileElements,
-  exportToCanvas,
-  exportToSvg,
 } from "../packages/excalidraw";
-import {
-  exportToBlob,
-  getNonDeletedElements,
-} from "../packages/excalidraw/index";
 import type {
   AppState,
   ExcalidrawImperativeAPI,
@@ -132,10 +126,6 @@ import DebugCanvas, {
   loadSavedDebugState,
 } from "./components/DebugCanvas";
 import { AIComponents } from "./components/AI";
-import { ExcalidrawPlusIframeExport } from "./ExcalidrawPlusIframeExport";
-import { fileSave } from "../packages/excalidraw/data/filesystem";
-import { type ExportSceneConfig } from "../packages/excalidraw/scene/export";
-import { round } from "../packages/math";
 
 polyfill();
 
@@ -616,19 +606,6 @@ const ExcalidrawWrapper = () => {
     };
   }, [excalidrawAPI]);
 
-  const canvasPreviewContainerRef = useRef<HTMLDivElement>(null);
-  const svgPreviewContainerRef = useRef<HTMLDivElement>(null);
-
-  const [config, setConfig] = useState<ExportSceneConfig>({
-    scale: 1,
-    position: "center",
-    fit: "contain",
-  });
-
-  useEffect(() => {
-    localStorage.setItem("_exportConfig", JSON.stringify(config));
-  }, [config]);
-
   const onChange = (
     elements: readonly OrderedExcalidrawElement[],
     appState: AppState,
@@ -638,84 +615,6 @@ const ExcalidrawWrapper = () => {
       collabAPI.syncElements(elements);
     }
 
-    const nonDeletedElements = getNonDeletedElements(elements);
-
-    const frame = nonDeletedElements.find(
-      (el) => el.strokeStyle === "dashed" && el.type === "rectangle",
-    );
-
-    exportToCanvas({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        // .concat(
-        //   restoreElements(
-        //     [
-        //       // @ts-ignore
-        //       {
-        //         type: "rectangle",
-        //         width: appState.width / zoom,
-        //         height: appState.height / zoom,
-        //         x: -appState.scrollX,
-        //         y: -appState.scrollY,
-        //         fillStyle: "solid",
-        //         strokeColor: "transparent",
-        //         backgroundColor: "rgba(0,0,0,0.05)",
-        //         roundness: { type: ROUNDNESS.ADAPTIVE_RADIUS, value: 40 },
-        //       },
-        //     ],
-        //     null,
-        //   ),
-        // ),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((canvas) => {
-      if (canvasPreviewContainerRef.current) {
-        canvasPreviewContainerRef.current.replaceChildren(canvas);
-        document.querySelector(
-          ".canvas_dims",
-        )!.innerHTML = `${canvas.width}x${canvas.height} (canvas)`;
-      }
-    });
-
-    exportToSvg({
-      data: {
-        elements: nonDeletedElements.filter((x) => x.id !== frame?.id),
-        appState,
-        files,
-      },
-      config: {
-        ...(frame
-          ? {
-              ...config,
-              width: frame.width,
-              height: frame.height,
-              x: frame.x,
-              y: frame.y,
-            }
-          : config),
-      },
-    }).then((svg) => {
-      if (svgPreviewContainerRef.current) {
-        svgPreviewContainerRef.current.replaceChildren(svg);
-        document.querySelector(".svg_dims")!.innerHTML = `${round(
-          parseFloat(svg.getAttribute("width") ?? ""),
-          0,
-        )}x${round(parseFloat(svg.getAttribute("height") ?? ""), 0)} (svg)`;
-      }
-    });
-
     // this check is redundant, but since this is a hot path, it's best
     // not to evaludate the nested expression every time
     if (!LocalData.isSavePaused()) {
@@ -1221,269 +1120,11 @@ const ExcalidrawWrapper = () => {
           />
         )}
       </Excalidraw>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          position: "fixed",
-          bottom: 60,
-          right: 60,
-          zIndex: 9999999999,
-          color: "black",
-        }}
-      >
-        <div style={{ display: "flex", gap: "1rem", flexDirection: "column" }}>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label>
-              center{" "}
-              <input
-                type="checkbox"
-                checked={config.position === "center"}
-                onChange={() =>
-                  setConfig((s) => ({
-                    ...s,
-                    position: s.position === "center" ? "topLeft" : "center",
-                  }))
-                }
-              />
-            </label>
-            <label>
-              fit{" "}
-              <select
-                value={config.fit}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    fit: event.target.value as any,
-                  }))
-                }
-              >
-                <option value="none">none</option>
-                <option value="contain">contain</option>
-              </select>
-            </label>
-            <label>
-              padding{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.padding}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    padding: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              scale{" "}
-              <input
-                type="number"
-                max={4}
-                style={{ width: "3rem" }}
-                value={config.scale}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    scale: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseFloat(event.target.value as any), 4),
-                  }))
-                }
-              />
-            </label>
-          </div>
-          <div style={{ display: "flex", gap: "1rem" }}>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              width{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.width}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    width: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity:
-                  config.maxWidthOrHeight != null ||
-                  config.widthOrHeight != null
-                    ? 0.5
-                    : undefined,
-              }}
-            >
-              height{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.height}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    height: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              x{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.x}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    x: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label>
-              y{" "}
-              <input
-                type="number"
-                style={{ width: "3rem" }}
-                value={config.y}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    y: !event.target.value.trim()
-                      ? undefined
-                      : parseFloat(event.target.value as any) ?? undefined,
-                  }))
-                }
-              />
-            </label>
-            <label
-              style={{
-                opacity: config.widthOrHeight != null ? 0.5 : undefined,
-              }}
-            >
-              maxWH{" "}
-              <input
-                type="number"
-                // max={600}
-                style={{ width: "3rem" }}
-                value={config.maxWidthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    maxWidthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : parseInt(event.target.value as any),
-                  }))
-                }
-              />
-            </label>
-            <label>
-              widthOrHeight{" "}
-              <input
-                type="number"
-                max={600}
-                style={{ width: "3rem" }}
-                value={config.widthOrHeight}
-                onChange={(event) =>
-                  setConfig((s) => ({
-                    ...s,
-                    widthOrHeight: !event.target.value.trim()
-                      ? undefined
-                      : Math.min(parseInt(event.target.value as any), 600),
-                  }))
-                }
-              />
-            </label>
-          </div>
-        </div>
-        <div className="canvas_dims">0x0</div>
-        <div
-          ref={canvasPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-        <div className="svg_dims">0x0</div>
-        <div
-          ref={svgPreviewContainerRef}
-          onClick={() => {
-            exportToBlob({
-              data: {
-                elements: excalidrawAPI!.getSceneElements(),
-                files: excalidrawAPI?.getFiles() || null,
-              },
-              config,
-            }).then((blob) => {
-              fileSave(blob, {
-                name: "xx",
-                extension: "png",
-                description: "xxx",
-              });
-            });
-          }}
-          style={{
-            borderRadius: 12,
-            border: "1px solid #777",
-            overflow: "hidden",
-            padding: 10,
-            backgroundColor: "pink",
-          }}
-        />
-      </div>
     </div>
   );
 };
 
 const ExcalidrawApp = () => {
-  const isCloudExportWindow =
-    window.location.pathname === "/excalidraw-plus-export";
-  if (isCloudExportWindow) {
-    return <ExcalidrawPlusIframeExport />;
-  }
-
   return (
     <TopErrorBoundary>
       <Provider unstable_createStore={() => appJotaiStore}>

excalidraw-app/ExcalidrawPlusIframeExport.tsx

@@ -1,222 +0,0 @@
-import { useLayoutEffect, useRef } from "react";
-import { STORAGE_KEYS } from "./app_constants";
-import { LocalData } from "./data/LocalData";
-import type {
-  FileId,
-  OrderedExcalidrawElement,
-} from "../packages/excalidraw/element/types";
-import type { AppState, BinaryFileData } from "../packages/excalidraw/types";
-import { ExcalidrawError } from "../packages/excalidraw/errors";
-import { base64urlToString } from "../packages/excalidraw/data/encode";
-
-const EVENT_REQUEST_SCENE = "REQUEST_SCENE";
-
-const EXCALIDRAW_PLUS_ORIGIN = import.meta.env.VITE_APP_PLUS_APP;
-
-// -----------------------------------------------------------------------------
-// outgoing message
-// -----------------------------------------------------------------------------
-type MESSAGE_REQUEST_SCENE = {
-  type: "REQUEST_SCENE";
-  jwt: string;
-};
-
-type MESSAGE_FROM_PLUS = MESSAGE_REQUEST_SCENE;
-
-// incoming messages
-// -----------------------------------------------------------------------------
-type MESSAGE_READY = { type: "READY" };
-type MESSAGE_ERROR = { type: "ERROR"; message: string };
-type MESSAGE_SCENE_DATA = {
-  type: "SCENE_DATA";
-  elements: OrderedExcalidrawElement[];
-  appState: Pick<AppState, "viewBackgroundColor">;
-  files: { loadedFiles: BinaryFileData[]; erroredFiles: Map<FileId, true> };
-};
-
-type MESSAGE_FROM_EDITOR = MESSAGE_ERROR | MESSAGE_SCENE_DATA | MESSAGE_READY;
-// -----------------------------------------------------------------------------
-
-const parseSceneData = async ({
-  rawElementsString,
-  rawAppStateString,
-}: {
-  rawElementsString: string | null;
-  rawAppStateString: string | null;
-}): Promise<MESSAGE_SCENE_DATA> => {
-  if (!rawElementsString || !rawAppStateString) {
-    throw new ExcalidrawError("Elements or appstate is missing.");
-  }
-
-  try {
-    const elements = JSON.parse(
-      rawElementsString,
-    ) as OrderedExcalidrawElement[];
-
-    if (!elements.length) {
-      throw new ExcalidrawError("Scene is empty, nothing to export.");
-    }
-
-    const appState = JSON.parse(rawAppStateString) as Pick<
-      AppState,
-      "viewBackgroundColor"
-    >;
-
-    const fileIds = elements.reduce((acc, el) => {
-      if ("fileId" in el && el.fileId) {
-        acc.push(el.fileId);
-      }
-      return acc;
-    }, [] as FileId[]);
-
-    const files = await LocalData.fileStorage.getFiles(fileIds);
-
-    return {
-      type: "SCENE_DATA",
-      elements,
-      appState,
-      files,
-    };
-  } catch (error: any) {
-    throw error instanceof ExcalidrawError
-      ? error
-      : new ExcalidrawError("Failed to parse scene data.");
-  }
-};
-
-const verifyJWT = async ({
-  token,
-  publicKey,
-}: {
-  token: string;
-  publicKey: string;
-}) => {
-  try {
-    if (!publicKey) {
-      throw new ExcalidrawError("Public key is undefined");
-    }
-
-    const [header, payload, signature] = token.split(".");
-
-    if (!header || !payload || !signature) {
-      throw new ExcalidrawError("Invalid JWT format");
-    }
-
-    // JWT is using Base64URL encoding
-    const decodedPayload = base64urlToString(payload);
-    const decodedSignature = base64urlToString(signature);
-
-    const data = `${header}.${payload}`;
-    const signatureArrayBuffer = Uint8Array.from(decodedSignature, (c) =>
-      c.charCodeAt(0),
-    );
-
-    const keyData = publicKey.replace(/-----\w+ PUBLIC KEY-----/g, "");
-    const keyArrayBuffer = Uint8Array.from(atob(keyData), (c) =>
-      c.charCodeAt(0),
-    );
-
-    const key = await crypto.subtle.importKey(
-      "spki",
-      keyArrayBuffer,
-      { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
-      true,
-      ["verify"],
-    );
-
-    const isValid = await crypto.subtle.verify(
-      "RSASSA-PKCS1-v1_5",
-      key,
-      signatureArrayBuffer,
-      new TextEncoder().encode(data),
-    );
-
-    if (!isValid) {
-      throw new Error("Invalid JWT");
-    }
-
-    const parsedPayload = JSON.parse(decodedPayload);
-
-    // Check for expiration
-    const currentTime = Math.floor(Date.now() / 1000);
-    if (parsedPayload.exp && parsedPayload.exp < currentTime) {
-      throw new Error("JWT has expired");
-    }
-  } catch (error) {
-    console.error("Failed to verify JWT:", error);
-    throw new Error(error instanceof Error ? error.message : "Invalid JWT");
-  }
-};
-
-export const ExcalidrawPlusIframeExport = () => {
-  const readyRef = useRef(false);
-
-  useLayoutEffect(() => {
-    const handleMessage = async (event: MessageEvent<MESSAGE_FROM_PLUS>) => {
-      if (event.origin !== EXCALIDRAW_PLUS_ORIGIN) {
-        throw new ExcalidrawError("Invalid origin");
-      }
-
-      if (event.data.type === EVENT_REQUEST_SCENE) {
-        if (!event.data.jwt) {
-          throw new ExcalidrawError("JWT is missing");
-        }
-
-        try {
-          try {
-            await verifyJWT({
-              token: event.data.jwt,
-              publicKey: import.meta.env.VITE_APP_PLUS_EXPORT_PUBLIC_KEY,
-            });
-          } catch (error: any) {
-            console.error(`Failed to verify JWT: ${error.message}`);
-            throw new ExcalidrawError("Failed to verify JWT");
-          }
-
-          const parsedSceneData: MESSAGE_SCENE_DATA = await parseSceneData({
-            rawAppStateString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-            ),
-            rawElementsString: localStorage.getItem(
-              STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
-            ),
-          });
-
-          event.source!.postMessage(parsedSceneData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        } catch (error) {
-          const responseData: MESSAGE_ERROR = {
-            type: "ERROR",
-            message:
-              error instanceof ExcalidrawError
-                ? error.message
-                : "Failed to export scene data",
-          };
-          event.source!.postMessage(responseData, {
-            targetOrigin: EXCALIDRAW_PLUS_ORIGIN,
-          });
-        }
-      }
-    };
-
-    window.addEventListener("message", handleMessage);
-
-    // so we don't send twice in StrictMode
-    if (!readyRef.current) {
-      readyRef.current = true;
-      const message: MESSAGE_FROM_EDITOR = { type: "READY" };
-      window.parent.postMessage(message, EXCALIDRAW_PLUS_ORIGIN);
-    }
-
-    return () => {
-      window.removeEventListener("message", handleMessage);
-    };
-  }, []);
-
-  // Since this component is expected to run in a hidden iframe on Excaildraw+,
-  // it doesn't need to render anything. All the data we need is available in
-  // LocalStorage and IndexedDB. It only needs to handle the messaging between
-  // the parent window and the iframe with the relevant data.
-  return null;
-};

excalidraw-app/collab/Collab.tsx

@@ -1,7 +1,6 @@
 import throttle from "lodash.throttle";
 import { PureComponent } from "react";
 import type {
-  BinaryFileData,
   ExcalidrawImperativeAPI,
   SocketId,
 } from "../../packages/excalidraw/types";
@@ -10,7 +9,6 @@ import { APP_NAME, ENV, EVENT } from "../../packages/excalidraw/constants";
 import type { ImportedDataState } from "../../packages/excalidraw/data/types";
 import type {
   ExcalidrawElement,
-  FileId,
   InitializedExcalidrawImageElement,
   OrderedExcalidrawElement,
 } from "../../packages/excalidraw/element/types";
@@ -159,7 +157,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
           throw new AbortError();
         }
 
-        const { savedFiles, erroredFiles } = await saveFilesToFirebase({
+        return saveFilesToFirebase({
           prefix: `${FIREBASE_STORAGE_PREFIXES.collabFiles}/${roomId}`,
           files: await encodeFilesForUpload({
             files: addedFiles,
@@ -167,29 +165,6 @@ class Collab extends PureComponent<CollabProps, CollabState> {
             maxBytes: FILE_UPLOAD_MAX_BYTES,
           }),
         });
-
-        return {
-          savedFiles: savedFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-          erroredFiles: erroredFiles.reduce(
-            (acc: Map<FileId, BinaryFileData>, id) => {
-              const fileData = addedFiles.get(id);
-              if (fileData) {
-                acc.set(id, fileData);
-              }
-              return acc;
-            },
-            new Map(),
-          ),
-        };
       },
     });
     this.excalidrawAPI = props.excalidrawAPI;
@@ -419,7 +394,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       .filter((element) => {
         return (
           isInitializedImageElement(element) &&
-          !this.fileManager.isFileTracked(element.fileId) &&
+          !this.fileManager.isFileHandled(element.fileId) &&
           !element.isDeleted &&
           (opts.forceFetchFiles
             ? element.status !== "pending" ||

excalidraw-app/components/AI.tsx

@@ -21,19 +21,15 @@ export const AIComponents = ({
           const appState = excalidrawAPI.getAppState();
 
           const blob = await exportToBlob({
-            data: {
-              elements: children,
-              appState: {
-                ...appState,
-                exportBackground: true,
-                viewBackgroundColor: appState.viewBackgroundColor,
-              },
-              files: excalidrawAPI.getFiles(),
-            },
-            config: {
-              exportingFrame: frame,
-              mimeType: MIME_TYPES.jpg,
+            elements: children,
+            appState: {
+              ...appState,
+              exportBackground: true,
+              viewBackgroundColor: appState.viewBackgroundColor,
             },
+            exportingFrame: frame,
+            files: excalidrawAPI.getFiles(),
+            mimeType: MIME_TYPES.jpg,
           });
 
           const dataURL = await getDataURL(blob);

excalidraw-app/components/DebugCanvas.tsx

@@ -84,7 +84,7 @@ const _debugRenderer = (
     scale,
     normalizedWidth,
     normalizedHeight,
-    canvasBackgroundColor: "transparent",
+    viewBackgroundColor: "transparent",
   });
 
   // Apply zoom

excalidraw-app/data/FileManager.ts

@@ -16,26 +16,14 @@ import type {
   BinaryFiles,
 } from "../../packages/excalidraw/types";
 
-type FileVersion = Required<BinaryFileData>["version"];
-
 export class FileManager {
   /** files being fetched */
   private fetchingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
-  private erroredFiles_fetch = new Map<
-    ExcalidrawImageElement["fileId"],
-    true
-  >();
   /** files being saved */
-  private savingFiles = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savingFiles = new Map<ExcalidrawImageElement["fileId"], true>();
   /* files already saved to persistent storage */
-  private savedFiles = new Map<ExcalidrawImageElement["fileId"], FileVersion>();
-  private erroredFiles_save = new Map<
-    ExcalidrawImageElement["fileId"],
-    FileVersion
-  >();
+  private savedFiles = new Map<ExcalidrawImageElement["fileId"], true>();
+  private erroredFiles = new Map<ExcalidrawImageElement["fileId"], true>();
 
   private _getFiles;
   private _saveFiles;
@@ -49,8 +37,8 @@ export class FileManager {
       erroredFiles: Map<FileId, true>;
     }>;
     saveFiles: (data: { addedFiles: Map<FileId, BinaryFileData> }) => Promise<{
-      savedFiles: Map<FileId, BinaryFileData>;
-      erroredFiles: Map<FileId, BinaryFileData>;
+      savedFiles: Map<FileId, true>;
+      erroredFiles: Map<FileId, true>;
     }>;
   }) {
     this._getFiles = getFiles;
@@ -58,28 +46,19 @@ export class FileManager {
   }
 
   /**
-   * returns whether file is saved/errored, or being processed
+   * returns whether file is already saved or being processed
    */
-  isFileTracked = (id: FileId) => {
+  isFileHandled = (id: FileId) => {
     return (
       this.savedFiles.has(id) ||
-      this.savingFiles.has(id) ||
       this.fetchingFiles.has(id) ||
-      this.erroredFiles_fetch.has(id) ||
-      this.erroredFiles_save.has(id)
+      this.savingFiles.has(id) ||
+      this.erroredFiles.has(id)
     );
   };
 
-  isFileSavedOrBeingSaved = (file: BinaryFileData) => {
-    const fileVersion = this.getFileVersion(file);
-    return (
-      this.savedFiles.get(file.id) === fileVersion ||
-      this.savingFiles.get(file.id) === fileVersion
-    );
-  };
-
-  getFileVersion = (file: BinaryFileData) => {
-    return file.version ?? 1;
+  isFileSaved = (id: FileId) => {
+    return this.savedFiles.has(id);
   };
 
   saveFiles = async ({
@@ -92,16 +71,13 @@ export class FileManager {
     const addedFiles: Map<FileId, BinaryFileData> = new Map();
 
     for (const element of elements) {
-      const fileData =
-        isInitializedImageElement(element) && files[element.fileId];
-
       if (
-        fileData &&
-        // NOTE if errored during save, won't retry due to this check
-        !this.isFileSavedOrBeingSaved(fileData)
+        isInitializedImageElement(element) &&
+        files[element.fileId] &&
+        !this.isFileHandled(element.fileId)
       ) {
         addedFiles.set(element.fileId, files[element.fileId]);
-        this.savingFiles.set(element.fileId, this.getFileVersion(fileData));
+        this.savingFiles.set(element.fileId, true);
       }
     }
 
@@ -110,12 +86,8 @@ export class FileManager {
         addedFiles,
       });
 
-      for (const [fileId, fileData] of savedFiles) {
-        this.savedFiles.set(fileId, this.getFileVersion(fileData));
-      }
-
-      for (const [fileId, fileData] of erroredFiles) {
-        this.erroredFiles_save.set(fileId, this.getFileVersion(fileData));
+      for (const [fileId] of savedFiles) {
+        this.savedFiles.set(fileId, true);
       }
 
       return {
@@ -149,10 +121,10 @@ export class FileManager {
       const { loadedFiles, erroredFiles } = await this._getFiles(ids);
 
       for (const file of loadedFiles) {
-        this.savedFiles.set(file.id, this.getFileVersion(file));
+        this.savedFiles.set(file.id, true);
       }
       for (const [fileId] of erroredFiles) {
-        this.erroredFiles_fetch.set(fileId, true);
+        this.erroredFiles.set(fileId, true);
       }
 
       return { loadedFiles, erroredFiles };
@@ -188,7 +160,7 @@ export class FileManager {
   ): element is InitializedExcalidrawImageElement => {
     return (
       isInitializedImageElement(element) &&
-      this.savedFiles.has(element.fileId) &&
+      this.isFileSaved(element.fileId) &&
       element.status === "pending"
     );
   };
@@ -197,8 +169,7 @@ export class FileManager {
     this.fetchingFiles.clear();
     this.savingFiles.clear();
     this.savedFiles.clear();
-    this.erroredFiles_fetch.clear();
-    this.erroredFiles_save.clear();
+    this.erroredFiles.clear();
   }
 }
 

excalidraw-app/data/LocalData.ts

@@ -183,8 +183,8 @@ export class LocalData {
       );
     },
     async saveFiles({ addedFiles }) {
-      const savedFiles = new Map<FileId, BinaryFileData>();
-      const erroredFiles = new Map<FileId, BinaryFileData>();
+      const savedFiles = new Map<FileId, true>();
+      const erroredFiles = new Map<FileId, true>();
 
       // before we use `storage` event synchronization, let's update the flag
       // optimistically. Hopefully nothing fails, and an IDB read executed
@@ -195,10 +195,10 @@ export class LocalData {
         [...addedFiles].map(async ([id, fileData]) => {
           try {
             await set(id, fileData, filesStore);
-            savedFiles.set(id, fileData);
+            savedFiles.set(id, true);
           } catch (error: any) {
             console.error(error);
-            erroredFiles.set(id, fileData);
+            erroredFiles.set(id, true);
           }
         }),
       );

excalidraw-app/data/firebase.ts

@@ -177,8 +177,8 @@ export const saveFilesToFirebase = async ({
 }) => {
   const firebase = await loadFirebaseStorage();
 
-  const erroredFiles: FileId[] = [];
-  const savedFiles: FileId[] = [];
+  const erroredFiles = new Map<FileId, true>();
+  const savedFiles = new Map<FileId, true>();
 
   await Promise.all(
     files.map(async ({ id, buffer }) => {
@@ -194,9 +194,9 @@ export const saveFilesToFirebase = async ({
               cacheControl: `public, max-age=${FILE_CACHE_MAX_AGE_SEC}`,
             },
           );
-        savedFiles.push(id);
+        savedFiles.set(id, true);
       } catch (error: any) {
-        erroredFiles.push(id);
+        erroredFiles.set(id, true);
       }
     }),
   );

excalidraw-app/index.html

@@ -54,6 +54,12 @@
       content="https://excalidraw.com/og-image-3.png"
     />
 
+    <!-- General tags -->
+    <meta
+      name="description"
+      content="Excalidraw is a virtual collaborative whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them."
+    />
+
     <!------------------------------------------------------------------------->
     <!--   to minimize white flash on load when user has dark mode enabled   -->
     <script>
@@ -118,6 +124,12 @@
     <!-- Following placeholder is replaced during the build step -->
     <!-- PLACEHOLDER:EXCALIDRAW_APP_FONTS -->
 
+    <% } else { %>
+    <script>
+      window.EXCALIDRAW_ASSET_PATH = window.origin;
+    </script>
+    <% } %>
+
     <!-- Register Assistant as the UI font, before the scene inits -->
     <link
       rel="stylesheet"
@@ -125,12 +137,6 @@
       type="text/css"
     />
 
-    <% } else { %>
-    <script>
-      window.EXCALIDRAW_ASSET_PATH = window.origin;
-    </script>
-    <% } %>
-
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
@@ -212,7 +218,6 @@
     </header>
     <div id="root"></div>
     <script type="module" src="index.tsx"></script>
-    <% if (typeof PROD != 'undefined' && PROD == true) { %>
     <!-- 100% privacy friendly analytics -->
     <script>
       // need to load this script dynamically bcs. of iframe embed tracking
@@ -245,6 +250,5 @@
       }
     </script>
     <!-- end LEGACY GOOGLE ANALYTICS -->
-    <% } %>
   </body>
 </html>

excalidraw-app/package.json

@@ -23,7 +23,7 @@
     ]
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": ">=18.0.0"
   },
   "dependencies": {
     "@excalidraw/random-username": "1.0.0",

excalidraw-app/vite-env.d.ts

@@ -29,9 +29,6 @@ interface ImportMetaEnv {
   // Enable eslint in dev server
   VITE_APP_ENABLE_ESLINT: string;
 
-  // Enable PWA in dev server
-  VITE_APP_ENABLE_PWA: string;
-
   VITE_APP_PLUS_LP: string;
 
   VITE_APP_PLUS_APP: string;

excalidraw-app/vite.config.mts

@@ -8,234 +8,231 @@ import { createHtmlPlugin } from "vite-plugin-html";
 import Sitemap from "vite-plugin-sitemap";
 import { woff2BrowserPlugin } from "../scripts/woff2/woff2-vite-plugins";
 
-export default defineConfig(({ mode }) => {
-  // To load .env variables
-  const envVars = loadEnv(mode, `../`);
-  // https://vitejs.dev/config/
-  return {
-    server: {
-      port: Number(envVars.VITE_APP_PORT || 3000),
-      // open the browser
-      open: true,
-    },
-    // We need to specify the envDir since now there are no
-    //more located in parallel with the vite.config.ts file but in parent dir
-    envDir: "../",
-    build: {
-      outDir: "build",
-      rollupOptions: {
-        output: {
-          assetFileNames(chunkInfo) {
-            if (chunkInfo?.name?.endsWith(".woff2")) {
-              const family = chunkInfo.name.split("-")[0];
-              return `fonts/${family}/[name][extname]`;
-            }
+// To load .env.local variables
+const envVars = loadEnv("", `../`);
+// https://vitejs.dev/config/
+export default defineConfig({
+  server: {
+    port: Number(envVars.VITE_APP_PORT || 3000),
+    // open the browser
+    open: true,
+  },
+  // We need to specify the envDir since now there are no
+  //more located in parallel with the vite.config.ts file but in parent dir
+  envDir: "../",
+  build: {
+    outDir: "build",
+    rollupOptions: {
+      output: {
+        assetFileNames(chunkInfo) {
+          if (chunkInfo?.name?.endsWith(".woff2")) {
+            const family = chunkInfo.name.split("-")[0];
+            return `fonts/${family}/[name][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
-          // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
-          manualChunks(id) {
-            if (
-              id.includes("packages/excalidraw/locales") &&
-              id.match(/en.json|percentages.json/) === null
-            ) {
-              const index = id.indexOf("locales/");
-              // Taking the substring after "locales/"
-              return `locales/${id.substring(index + 8)}`;
-            }
-          },
+          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
+        // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
+        manualChunks(id) {
+          if (
+            id.includes("packages/excalidraw/locales") &&
+            id.match(/en.json|percentages.json/) === null
+          ) {
+            const index = id.indexOf("locales/");
+            // Taking the substring after "locales/"
+            return `locales/${id.substring(index + 8)}`;
+          }
         },
       },
-      sourcemap: true,
-      // don't auto-inline small assets (i.e. fonts hosted on CDN)
-      assetsInlineLimit: 0,
     },
-    plugins: [
-      Sitemap({
-        hostname: "https://excalidraw.com",
-        outDir: "build",
-        changefreq: "monthly",
-        // its static in public folder
-        generateRobotsTxt: false,
-      }),
-      woff2BrowserPlugin(),
-      react(),
-      checker({
-        typescript: true,
-        eslint:
-          envVars.VITE_APP_ENABLE_ESLINT === "false"
-            ? undefined
-            : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
-        overlay: {
-          initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
-          badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
-        },
-      }),
-      svgrPlugin(),
-      ViteEjsPlugin(),
-      VitePWA({
-        registerType: "autoUpdate",
-        devOptions: {
-          /* set this flag to true to enable in Development mode */
-          enabled: envVars.VITE_APP_ENABLE_PWA === "true",
-        },
+    sourcemap: true,
+    // don't auto-inline small assets (i.e. fonts hosted on CDN)
+    assetsInlineLimit: 0,
+  },
+  plugins: [
+    Sitemap({
+      hostname: "https://excalidraw.com",
+      outDir: "build",
+      changefreq: "monthly",
+      // its static in public folder
+      generateRobotsTxt: false,
+    }),
+    woff2BrowserPlugin(),
+    react(),
+    checker({
+      typescript: true,
+      eslint:
+        envVars.VITE_APP_ENABLE_ESLINT === "false"
+          ? undefined
+          : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
+      overlay: {
+        initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
+        badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
+      },
+    }),
+    svgrPlugin(),
+    ViteEjsPlugin(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        /* set this flag to true to enable in Development mode */
+        enabled: false,
+      },
 
-        workbox: {
-          // don't precache fonts, locales and separate chunks
-          globIgnores: [
-            "fonts.css",
-            "**/locales/**",
-            "service-worker.js",
-            "**/*.chunk-*.js",
-          ],
-          runtimeCaching: [
-            {
-              urlPattern: new RegExp(".+.woff2"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 1000,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
-                },
-                cacheableResponse: {
-                  // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
-                  statuses: [0, 200],
-                },
+      workbox: {
+        // don't precache fonts, locales and separate chunks
+        globIgnores: [
+          "fonts.css",
+          "**/locales/**",
+          "service-worker.js",
+          "**/*.chunk-*.js",
+        ],
+        runtimeCaching: [
+          {
+            urlPattern: new RegExp(".+.woff2"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 1000,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // 90 days
               },
-            },
-            {
-              urlPattern: new RegExp("fonts.css"),
-              handler: "StaleWhileRevalidate",
-              options: {
-                cacheName: "fonts",
-                expiration: {
-                  maxEntries: 50,
-                },
+              cacheableResponse: {
+                // 0 to cache "opaque" responses from cross-origin requests (i.e. CDN)
+                statuses: [0, 200],
               },
             },
-            {
-              urlPattern: new RegExp("locales/[^/]+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "locales",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
-                },
-              },
-            },
-            {
-              urlPattern: new RegExp(".chunk-.+.js"),
-              handler: "CacheFirst",
-              options: {
-                cacheName: "chunk",
-                expiration: {
-                  maxEntries: 50,
-                  maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-                },
-              },
-            },
-          ],
-        },
-        manifest: {
-          short_name: "Excalidraw",
-          name: "Excalidraw",
-          description:
-            "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
-          icons: [
-            {
-              src: "android-chrome-192x192.png",
-              sizes: "192x192",
-              type: "image/png",
-            },
-            {
-              src: "apple-touch-icon.png",
-              type: "image/png",
-              sizes: "180x180",
-            },
-            {
-              src: "favicon-32x32.png",
-              sizes: "32x32",
-              type: "image/png",
-            },
-            {
-              src: "favicon-16x16.png",
-              sizes: "16x16",
-              type: "image/png",
-            },
-          ],
-          start_url: "/",
-          id:"excalidraw",
-          display: "standalone",
-          theme_color: "#121212",
-          background_color: "#ffffff",
-          file_handlers: [
-            {
-              action: "/",
-              accept: {
-                "application/vnd.excalidraw+json": [".excalidraw"],
-              },
-            },
-          ],
-          share_target: {
-            action: "/web-share-target",
-            method: "POST",
-            enctype: "multipart/form-data",
-            params: {
-              files: [
-                {
-                  name: "file",
-                  accept: [
-                    "application/vnd.excalidraw+json",
-                    "application/json",
-                    ".excalidraw",
-                  ],
-                },
-              ],
-            },
           },
-          screenshots: [
-            {
-              src: "/screenshots/virtual-whiteboard.png",
-              type: "image/png",
-              sizes: "462x945",
+          {
+            urlPattern: new RegExp("fonts.css"),
+            handler: "StaleWhileRevalidate",
+            options: {
+              cacheName: "fonts",
+              expiration: {
+                maxEntries: 50,
+              },
             },
-            {
-              src: "/screenshots/wireframe.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp("locales/[^/]+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "locales",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
+              },
             },
-            {
-              src: "/screenshots/illustration.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+          {
+            urlPattern: new RegExp(".chunk-.+.js"),
+            handler: "CacheFirst",
+            options: {
+              cacheName: "chunk",
+              expiration: {
+                maxEntries: 50,
+                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
+              },
             },
-            {
-              src: "/screenshots/shapes.png",
-              type: "image/png",
-              sizes: "462x945",
+          },
+        ],
+      },
+      manifest: {
+        short_name: "Excalidraw",
+        name: "Excalidraw",
+        description:
+          "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
+        icons: [
+          {
+            src: "android-chrome-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "apple-touch-icon.png",
+            type: "image/png",
+            sizes: "180x180",
+          },
+          {
+            src: "favicon-32x32.png",
+            sizes: "32x32",
+            type: "image/png",
+          },
+          {
+            src: "favicon-16x16.png",
+            sizes: "16x16",
+            type: "image/png",
+          },
+        ],
+        start_url: "/",
+        display: "standalone",
+        theme_color: "#121212",
+        background_color: "#ffffff",
+        file_handlers: [
+          {
+            action: "/",
+            accept: {
+              "application/vnd.excalidraw+json": [".excalidraw"],
             },
-            {
-              src: "/screenshots/collaboration.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-            {
-              src: "/screenshots/export.png",
-              type: "image/png",
-              sizes: "462x945",
-            },
-          ],
+          },
+        ],
+        share_target: {
+          action: "/web-share-target",
+          method: "POST",
+          enctype: "multipart/form-data",
+          params: {
+            files: [
+              {
+                name: "file",
+                accept: [
+                  "application/vnd.excalidraw+json",
+                  "application/json",
+                  ".excalidraw",
+                ],
+              },
+            ],
+          },
         },
-      }),
-      createHtmlPlugin({
-        minify: true,
-      }),
-    ],
-    publicDir: "../public",
-  };
+        screenshots: [
+          {
+            src: "/screenshots/virtual-whiteboard.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/wireframe.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/illustration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/shapes.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/collaboration.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+          {
+            src: "/screenshots/export.png",
+            type: "image/png",
+            sizes: "462x945",
+          },
+        ],
+      },
+    }),
+    createHtmlPlugin({
+      minify: true,
+    }),
+  ],
+  publicDir: "../public",
 });

package.json

@@ -45,7 +45,7 @@
     "vitest-canvas-mock": "0.3.3"
   },
   "engines": {
-    "node": "18.0.0 - 22.x.x"
+    "node": "18.0.0 - 20.x.x"
   },
   "homepage": ".",
   "prettier": "@excalidraw/prettier-config",
@@ -55,9 +55,15 @@
     "build:app": "yarn --cwd ./excalidraw-app build:app",
     "build:version": "yarn --cwd ./excalidraw-app build:version",
     "build": "yarn --cwd ./excalidraw-app build",
-    "build:preview": "yarn --cwd ./excalidraw-app build:preview",
+    "fix:code": "yarn test:code --fix",
+    "fix:other": "yarn prettier --write",
+    "fix": "yarn fix:other && yarn fix:code",
+    "locales-coverage": "node scripts/build-locales-coverage.js",
+    "locales-coverage:description": "node scripts/locales-coverage-description.js",
+    "prepare": "husky install",
+    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "start": "yarn --cwd ./excalidraw-app start",
-    "start:production": "yarn --cwd ./excalidraw-app start:production",
+    "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
     "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
     "test:app": "vitest",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
@@ -68,15 +74,9 @@
     "test:coverage": "vitest --coverage",
     "test:coverage:watch": "vitest --coverage --watch",
     "test:ui": "yarn test --ui --coverage.enabled=true",
-    "fix:code": "yarn test:code --fix",
-    "fix:other": "yarn prettier --write",
-    "fix": "yarn fix:other && yarn fix:code",
-    "locales-coverage": "node scripts/build-locales-coverage.js",
-    "locales-coverage:description": "node scripts/locales-coverage-description.js",
-    "prepare": "husky install",
-    "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "autorelease": "node scripts/autorelease.js",
     "prerelease:excalidraw": "node scripts/prerelease.js",
+    "build:preview": "yarn build && vite preview --port 5000",
     "release:excalidraw": "node scripts/release.js",
     "rm:build": "rm -rf excalidraw-app/{build,dist,dev-dist} && rm -rf packages/*/{dist,build} && rm -rf examples/*/*/{build,dist}",
     "rm:node_modules": "rm -rf node_modules && rm -rf excalidraw-app/node_modules && rm -rf packages/*/node_modules",

packages/excalidraw/actions/actionClipboard.tsx

@@ -9,9 +9,8 @@ import {
   readSystemClipboard,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
-import { exportAsImage } from "../data/index";
+import { exportCanvas, prepareElementsForExport } from "../data/index";
 import { getTextFromElements, isTextElement } from "../element";
-import { prepareElementsForExport } from "../data/index";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -137,15 +136,17 @@ export const actionCopyAsSvg = register({
     );
 
     try {
-      await exportAsImage({
-        type: "clipboard-svg",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
+      await exportCanvas(
+        "clipboard-svg",
+        exportedElements,
+        appState,
+        app.files,
+        {
           ...appState,
           exportingFrame,
           name: app.getName(),
         },
-      });
+      );
 
       const selectedElements = app.scene.getSelectedElements({
         selectedElementIds: appState.selectedElementIds,
@@ -207,16 +208,11 @@ export const actionCopyAsPng = register({
       true,
     );
     try {
-      await exportAsImage({
-        type: "clipboard",
-        data: { elements: exportedElements, appState, files: app.files },
-        config: {
-          ...appState,
-          exportingFrame,
-          name: appState.name || app.getName(),
-        },
+      await exportCanvas("clipboard", exportedElements, appState, app.files, {
+        ...appState,
+        exportingFrame,
+        name: app.getName(),
       });
-
       return {
         appState: {
           ...appState,

packages/excalidraw/actions/actionExport.tsx

@@ -10,13 +10,13 @@ import { useDevice } from "../components/App";
 import { KEYS } from "../keys";
 import { register } from "./register";
 import { CheckboxItem } from "../components/CheckboxItem";
-import { getCanvasSize } from "../scene/export";
+import { getExportSize } from "../scene/export";
 import { DEFAULT_EXPORT_PADDING, EXPORT_SCALES, THEME } from "../constants";
 import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { getNonDeletedElements } from "../element";
 import { isImageFileHandle } from "../data/blob";
 import { nativeFileSystemSupported } from "../data/filesystem";
-import type { NonDeletedExcalidrawElement, Theme } from "../element/types";
+import type { Theme } from "../element/types";
 
 import "../components/ToolIcon.scss";
 import { StoreAction } from "../store";
@@ -58,18 +58,6 @@ export const actionChangeExportScale = register({
       ? getSelectedElements(elements, appState)
       : elements;
 
-    const getExportSize = (
-      elements: readonly NonDeletedExcalidrawElement[],
-      padding: number,
-      scale: number,
-    ): [number, number] => {
-      const [, , width, height] = getCanvasSize(elements).map((dimension) =>
-        Math.trunc(dimension * scale),
-      );
-
-      return [width + padding * 2, height + padding * 2];
-    };
-
     return (
       <>
         {EXPORT_SCALES.map((s) => {

packages/excalidraw/appState.ts

@@ -1,18 +1,17 @@
+import { COLOR_PALETTE } from "./colors";
 import {
   ARROW_TYPE,
-  COLOR_WHITE,
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   DEFAULT_TEXT_ALIGN,
   DEFAULT_GRID_SIZE,
-  DEFAULT_ZOOM_VALUE,
   EXPORT_SCALES,
   STATS_PANELS,
   THEME,
   DEFAULT_GRID_STEP,
 } from "./constants";
-import type { AppState } from "./types";
+import type { AppState, NormalizedZoomValue } from "./types";
 
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
   ? devicePixelRatio
@@ -100,10 +99,10 @@ export const getDefaultAppState = (): Omit<
     editingFrame: null,
     elementsToHighlight: null,
     toast: null,
-    viewBackgroundColor: COLOR_WHITE,
+    viewBackgroundColor: COLOR_PALETTE.white,
     zenModeEnabled: false,
     zoom: {
-      value: DEFAULT_ZOOM_VALUE,
+      value: 1 as NormalizedZoomValue,
     },
     viewModeEnabled: false,
     pendingImageElementId: null,

packages/excalidraw/charts.ts

@@ -1,8 +1,11 @@
 import type { Radians } from "../math";
 import { pointFrom } from "../math";
-import { DEFAULT_CHART_COLOR_INDEX, getAllColorsSpecificShade } from "./colors";
 import {
-  COLOR_CHARCOAL_BLACK,
+  COLOR_PALETTE,
+  DEFAULT_CHART_COLOR_INDEX,
+  getAllColorsSpecificShade,
+} from "./colors";
+import {
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
   VERTICAL_ALIGN,
@@ -170,7 +173,7 @@ const commonProps = {
   fontSize: DEFAULT_FONT_SIZE,
   opacity: 100,
   roughness: 1,
-  strokeColor: COLOR_CHARCOAL_BLACK,
+  strokeColor: COLOR_PALETTE.black,
   roundness: null,
   strokeStyle: "solid",
   strokeWidth: 1,
@@ -321,7 +324,7 @@ const chartBaseElements = (
         y: y - chartHeight,
         width: chartWidth,
         height: chartHeight,
-        strokeColor: COLOR_CHARCOAL_BLACK,
+        strokeColor: COLOR_PALETTE.black,
         fillStyle: "solid",
         opacity: 6,
       })

packages/excalidraw/colors.ts

@@ -1,25 +1,27 @@
 import oc from "open-color";
-import {
-  COLOR_WHITE,
-  COLOR_CHARCOAL_BLACK,
-  COLOR_TRANSPARENT,
-} from "./constants";
-import { type Merge } from "./utility-types";
-import { pick } from "./utils";
+import type { Merge } from "./utility-types";
+
+// FIXME can't put to utils.ts rn because of circular dependency
+const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
+  source: R,
+  keys: K,
+) => {
+  return keys.reduce((acc, key: K[number]) => {
+    if (key in source) {
+      acc[key] = source[key];
+    }
+    return acc;
+  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
+};
 
 export type ColorPickerColor =
-  | Exclude<keyof oc, "indigo" | "lime" | "black">
+  | Exclude<keyof oc, "indigo" | "lime">
   | "transparent"
-  | "charcoal"
   | "bronze";
 export type ColorTuple = readonly [string, string, string, string, string];
 export type ColorPalette = Merge<
   Record<ColorPickerColor, ColorTuple>,
-  {
-    charcoal: typeof COLOR_CHARCOAL_BLACK;
-    white: typeof COLOR_WHITE;
-    transparent: typeof COLOR_TRANSPARENT;
-  }
+  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
 >;
 
 // used general type instead of specific type (ColorPalette) to support custom colors
@@ -39,7 +41,7 @@ export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
 export const getSpecificColorShades = (
   color: Exclude<
     ColorPickerColor,
-    "transparent" | "charcoal" | "black" | "white" | "bronze"
+    "transparent" | "white" | "black" | "bronze"
   >,
   indexArr: Readonly<ColorShadesIndexes>,
 ) => {
@@ -47,9 +49,9 @@ export const getSpecificColorShades = (
 };
 
 export const COLOR_PALETTE = {
-  transparent: COLOR_TRANSPARENT,
-  charcoal: COLOR_CHARCOAL_BLACK,
-  white: COLOR_WHITE,
+  transparent: "transparent",
+  black: "#1e1e1e",
+  white: "#ffffff",
   // open-colors
   gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
   red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
@@ -85,7 +87,7 @@ const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
 
 // ORDER matters for positioning in quick picker
 export const DEFAULT_ELEMENT_STROKE_PICKS = [
-  COLOR_PALETTE.charcoal,
+  COLOR_PALETTE.black,
   COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
   COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
@@ -123,7 +125,7 @@ export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
   // rest
   ...COMMON_ELEMENT_SHADES,
@@ -134,7 +136,7 @@ export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
   transparent: COLOR_PALETTE.transparent,
   white: COLOR_PALETTE.white,
   gray: COLOR_PALETTE.gray,
-  charcoal: COLOR_PALETTE.charcoal,
+  black: COLOR_PALETTE.black,
   bronze: COLOR_PALETTE.bronze,
 
   ...COMMON_ELEMENT_SHADES,

packages/excalidraw/components/App.tsx

@@ -49,7 +49,7 @@ import {
 } from "../appState";
 import type { PastedMixedContent } from "../clipboard";
 import { copyTextToSystemClipboard, parseClipboard } from "../clipboard";
-import { ARROW_TYPE, isSafari, type EXPORT_IMAGE_TYPES } from "../constants";
+import { ARROW_TYPE, type EXPORT_IMAGE_TYPES } from "../constants";
 import {
   APP_NAME,
   CURSOR_TYPE,
@@ -90,7 +90,7 @@ import {
   DEFAULT_TEXT_ALIGN,
 } from "../constants";
 import type { ExportedElements } from "../data";
-import { exportAsImage, loadFromBlob } from "../data";
+import { exportCanvas, loadFromBlob } from "../data";
 import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library";
 import { restore, restoreElements } from "../data/restore";
 import {
@@ -304,10 +304,8 @@ import { Toast } from "./Toast";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
 import {
   dataURLToFile,
-  dataURLToString,
   generateIdFromFile,
   getDataURL,
-  getDataURL_sync,
   getFileFromEvent,
   ImageURLToFile,
   isImageFileHandle,
@@ -340,6 +338,7 @@ import {
   isValidTextContainer,
   measureText,
   normalizeText,
+  wrapText,
 } from "../element/textElement";
 import {
   showHyperlinkTooltip,
@@ -460,7 +459,6 @@ import {
   vectorNormalize,
 } from "../../math";
 import { cropElement } from "../element/cropElement";
-import { wrapText } from "../element/textWrapping";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -1815,20 +1813,18 @@ class App extends React.Component<AppProps, AppState> {
     opts: { exportingFrame: ExcalidrawFrameLikeElement | null },
   ) => {
     trackEvent("export", type, "ui");
-    const fileHandle = await exportAsImage({
+    const fileHandle = await exportCanvas(
       type,
-      data: {
-        elements,
-        appState: this.state,
-        files: this.files,
-      },
-      config: {
+      elements,
+      this.state,
+      this.files,
+      {
         exportBackground: this.state.exportBackground,
         name: this.getName(),
         viewBackgroundColor: this.state.viewBackgroundColor,
         exportingFrame: opts.exportingFrame,
       },
-    })
+    )
       .catch(muteFSAbortError)
       .catch((error) => {
         console.error(error);
@@ -2126,7 +2122,9 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     if (actionResult.files) {
-      this.addMissingFiles(actionResult.files, actionResult.replaceFiles);
+      this.files = actionResult.replaceFiles
+        ? actionResult.files
+        : { ...this.files, ...actionResult.files };
       this.addNewImagesToImageCache();
     }
 
@@ -2322,11 +2320,11 @@ class App extends React.Component<AppProps, AppState> {
     // clear the shape and image cache so that any images in initialData
     // can be loaded fresh
     this.clearImageShapeCache();
-
-    // manually loading the font faces seems faster even in browsers that do fire the loadingdone event
-    this.fonts.loadSceneFonts().then((fontFaces) => {
-      this.fonts.onLoaded(fontFaces);
-    });
+    // 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.loadSceneFonts();
   };
 
   private isMobileBreakpoint = (width: number, height: number) => {
@@ -2559,27 +2557,19 @@ class App extends React.Component<AppProps, AppState> {
         { passive: false },
       ),
       addEventListener(window, EVENT.MESSAGE, this.onWindowMessage, false),
-      addEventListener(document, EVENT.POINTER_UP, this.removePointer, {
-        passive: false,
-      }), // #3553
-      addEventListener(document, EVENT.COPY, this.onCopy, { passive: false }),
+      addEventListener(document, EVENT.POINTER_UP, this.removePointer), // #3553
+      addEventListener(document, EVENT.COPY, this.onCopy),
       addEventListener(document, EVENT.KEYUP, this.onKeyUp, { passive: true }),
       addEventListener(
         document,
         EVENT.POINTER_MOVE,
         this.updateCurrentCursorPosition,
-        { passive: false },
       ),
       // rerender text elements on font load to fix #637 && #1553
-      addEventListener(
-        document.fonts,
-        "loadingdone",
-        (event) => {
-          const fontFaces = (event as FontFaceSetLoadEvent).fontfaces;
-          this.fonts.onLoaded(fontFaces);
-        },
-        { passive: false },
-      ),
+      addEventListener(document.fonts, "loadingdone", (event) => {
+        const loadedFontFaces = (event as FontFaceSetLoadEvent).fontfaces;
+        this.fonts.onLoaded(loadedFontFaces);
+      }),
       // Safari-only desktop pinch zoom
       addEventListener(
         document,
@@ -2599,17 +2589,12 @@ class App extends React.Component<AppProps, AppState> {
         this.onGestureEnd as any,
         false,
       ),
-      addEventListener(
-        window,
-        EVENT.FOCUS,
-        () => {
-          this.maybeCleanupAfterMissingPointerUp(null);
-          // browsers (chrome?) tend to free up memory a lot, which results
-          // in canvas context being cleared. Thus re-render on focus.
-          this.triggerRender(true);
-        },
-        { passive: false },
-      ),
+      addEventListener(window, EVENT.FOCUS, () => {
+        this.maybeCleanupAfterMissingPointerUp(null);
+        // browsers (chrome?) tend to free up memory a lot, which results
+        // in canvas context being cleared. Thus re-render on focus.
+        this.triggerRender(true);
+      }),
     );
 
     if (this.state.viewModeEnabled) {
@@ -2625,12 +2610,9 @@ class App extends React.Component<AppProps, AppState> {
         document,
         EVENT.FULLSCREENCHANGE,
         this.onFullscreenChange,
-        { passive: false },
       ),
-      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard, {
-        passive: false,
-      }),
-      addEventListener(document, EVENT.CUT, this.onCut, { passive: false }),
+      addEventListener(document, EVENT.PASTE, this.pasteFromClipboard),
+      addEventListener(document, EVENT.CUT, this.onCut),
       addEventListener(window, EVENT.RESIZE, this.onResize, false),
       addEventListener(window, EVENT.UNLOAD, this.onUnload, false),
       addEventListener(window, EVENT.BLUR, this.onBlur, false),
@@ -2638,7 +2620,6 @@ class App extends React.Component<AppProps, AppState> {
         this.excalidrawContainerRef.current,
         EVENT.WHEEL,
         this.handleWheel,
-        { passive: false },
       ),
       addEventListener(
         this.excalidrawContainerRef.current,
@@ -2660,7 +2641,6 @@ class App extends React.Component<AppProps, AppState> {
           getNearestScrollableContainer(this.excalidrawContainerRef.current!),
           EVENT.SCROLL,
           this.onScroll,
-          { passive: false },
         ),
       );
     }
@@ -3256,15 +3236,8 @@ class App extends React.Component<AppProps, AppState> {
       }
     });
 
-    // paste event may not fire FontFace loadingdone event in Safari, hence loading font faces manually
-    if (isSafari) {
-      Fonts.loadElementsFonts(newElements).then((fontFaces) => {
-        this.fonts.onLoaded(fontFaces);
-      });
-    }
-
     if (opts.files) {
-      this.addMissingFiles(opts.files);
+      this.files = { ...this.files, ...opts.files };
     }
 
     this.store.shouldCaptureIncrement();
@@ -3773,56 +3746,23 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  /**
-   * adds supplied files to existing files in the appState.
-   * NOTE if file already exists in editor state, the file data is not updated
-   * */
+  /** adds supplied files to existing files in the appState */
   public addFiles: ExcalidrawImperativeAPI["addFiles"] = withBatchedUpdates(
     (files) => {
-      const { addedFiles } = this.addMissingFiles(files);
+      const filesMap = files.reduce((acc, fileData) => {
+        acc.set(fileData.id, fileData);
+        return acc;
+      }, new Map<FileId, BinaryFileData>());
 
-      this.clearImageShapeCache(addedFiles);
+      this.files = { ...this.files, ...Object.fromEntries(filesMap) };
+
+      this.clearImageShapeCache(Object.fromEntries(filesMap));
       this.scene.triggerUpdate();
 
       this.addNewImagesToImageCache();
     },
   );
 
-  private addMissingFiles = (
-    files: BinaryFiles | BinaryFileData[],
-    replace = false,
-  ) => {
-    const nextFiles = replace ? {} : { ...this.files };
-    const addedFiles: BinaryFiles = {};
-
-    const _files = Array.isArray(files) ? files : Object.values(files);
-
-    for (const fileData of _files) {
-      if (nextFiles[fileData.id]) {
-        continue;
-      }
-
-      addedFiles[fileData.id] = fileData;
-      nextFiles[fileData.id] = fileData;
-
-      if (fileData.mimeType === MIME_TYPES.svg) {
-        const restoredDataURL = getDataURL_sync(
-          normalizeSVG(dataURLToString(fileData.dataURL)),
-          MIME_TYPES.svg,
-        );
-        if (fileData.dataURL !== restoredDataURL) {
-          // bump version so persistence layer can update the store
-          fileData.version = (fileData.version ?? 1) + 1;
-          fileData.dataURL = restoredDataURL;
-        }
-      }
-    }
-
-    this.files = nextFiles;
-
-    return { addedFiles };
-  };
-
   public updateScene = withBatchedUpdates(
     <K extends keyof AppState>(sceneData: {
       elements?: SceneData["elements"];
@@ -7942,14 +7882,10 @@ class App extends React.Component<AppProps, AppState> {
           isFrameLikeElement(e),
         );
         const topLayerFrame = this.getTopLayerFrameAtSceneCoords(pointerCoords);
-        const frameToHighlight =
-          topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null;
-        // Only update the state if there is a difference
-        if (this.state.frameToHighlight !== frameToHighlight) {
-          flushSync(() => {
-            this.setState({ frameToHighlight });
-          });
-        }
+        this.setState({
+          frameToHighlight:
+            topLayerFrame && !selectedElementsHasAFrame ? topLayerFrame : null,
+        });
 
         // Marking that click was used for dragging to check
         // if elements should be deselected on pointerup
@@ -8096,9 +8032,7 @@ class App extends React.Component<AppProps, AppState> {
             this.scene.getNonDeletedElementsMap(),
           );
 
-          flushSync(() => {
-            this.setState({ snapLines });
-          });
+          this.setState({ snapLines });
 
           // when we're editing the name of a frame, we want the user to be
           // able to select and interact with the text input
@@ -9351,7 +9285,7 @@ class App extends React.Component<AppProps, AppState> {
     if (mimeType === MIME_TYPES.svg) {
       try {
         imageFile = SVGStringToFile(
-          normalizeSVG(await imageFile.text()),
+          await normalizeSVG(await imageFile.text()),
           imageFile.name,
         );
       } catch (error: any) {
@@ -9419,15 +9353,16 @@ class App extends React.Component<AppProps, AppState> {
     return new Promise<NonDeleted<InitializedExcalidrawImageElement>>(
       async (resolve, reject) => {
         try {
-          this.addMissingFiles([
-            {
+          this.files = {
+            ...this.files,
+            [fileId]: {
               mimeType,
               id: fileId,
               dataURL,
               created: Date.now(),
               lastRetrieved: Date.now(),
             },
-          ]);
+          };
           const cachedImageData = this.imageCache.get(fileId);
           if (!cachedImageData) {
             this.addNewImagesToImageCache();
@@ -9832,7 +9767,6 @@ class App extends React.Component<AppProps, AppState> {
       this.interactiveCanvas.addEventListener(
         EVENT.TOUCH_START,
         this.onTouchStart,
-        { passive: false },
       );
       this.interactiveCanvas.addEventListener(EVENT.TOUCH_END, this.onTouchEnd);
       // -----------------------------------------------------------------------
@@ -10264,7 +10198,7 @@ class App extends React.Component<AppProps, AppState> {
           croppingElement,
           this.scene.getNonDeletedElementsMap(),
           {
-            newSize: {
+            oldSize: {
               width: croppingElement.width,
               height: croppingElement.height,
             },

packages/excalidraw/components/ColorPicker/keyboardNavHandlers.ts

@@ -204,7 +204,7 @@ export const colorPickerKeyNavHandler = ({
       });
 
       if (!baseColorName) {
-        onChange(COLOR_PALETTE.charcoal);
+        onChange(COLOR_PALETTE.black);
       }
     }
 

packages/excalidraw/components/HelpDialog.tsx

@@ -22,7 +22,7 @@ const Header = () => (
     </a>
     <a
       className="HelpDialog__btn"
-      href="https://plus.excalidraw.com/blog"
+      href="https://blog.excalidraw.com"
       target="_blank"
       rel="noopener noreferrer"
     >

packages/excalidraw/components/ImageExportDialog.tsx

@@ -23,6 +23,7 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import type { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
+import { exportToCanvas } from "../../utils/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";
@@ -35,7 +36,6 @@ import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
 import { useCopyStatus } from "../hooks/useCopiedIndicator";
-import { exportToCanvas } from "../scene/export";
 
 const supportsContextFilters =
   "filter" in document.createElement("canvas").getContext("2d")!;
@@ -123,25 +123,19 @@ const ImageExportModal = ({
     }
 
     exportToCanvas({
-      data: {
-        elements: exportedElements,
-        appState: {
-          ...appStateSnapshot,
-          name: projectName,
-          exportEmbedScene: embedScene,
-        },
-        files,
-      },
-      config: {
-        canvasBackgroundColor: !exportWithBackground
-          ? false
-          : appStateSnapshot.viewBackgroundColor,
-        padding: DEFAULT_EXPORT_PADDING,
-        theme: exportDarkMode ? "dark" : "light",
-        scale: exportScale,
-        maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-        exportingFrame,
+      elements: exportedElements,
+      appState: {
+        ...appStateSnapshot,
+        name: projectName,
+        exportBackground: exportWithBackground,
+        exportWithDarkMode: exportDarkMode,
+        exportScale,
+        exportEmbedScene: embedScene,
       },
+      files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
+      exportingFrame,
     })
       .then((canvas) => {
         setRenderError(null);

packages/excalidraw/components/PasteChartDialog.tsx

@@ -1,9 +1,9 @@
+import oc from "open-color";
 import React, { useLayoutEffect, useRef, useState } from "react";
 import { trackEvent } from "../analytics";
 import type { ChartElements, Spreadsheet } from "../charts";
 import { renderSpreadsheet } from "../charts";
 import type { ChartType } from "../element/types";
-import { COLOR_WHITE } from "../constants";
 import { t } from "../i18n";
 import { exportToSvg } from "../scene/export";
 import type { UIAppState } from "../types";
@@ -41,16 +41,17 @@ const ChartPreviewBtn = (props: {
     const previewNode = previewRef.current!;
 
     (async () => {
-      svg = await exportToSvg({
-        data: {
-          elements,
-          appState: {
-            exportBackground: false,
-            viewBackgroundColor: COLOR_WHITE,
-          },
-          files: null,
+      svg = await exportToSvg(
+        elements,
+        {
+          exportBackground: false,
+          viewBackgroundColor: oc.white,
         },
-      });
+        null, // files
+        {
+          skipInliningFonts: true,
+        },
+      );
       svg.querySelector(".style-fonts")?.remove();
       previewNode.replaceChildren();
       previewNode.appendChild(svg);

packages/excalidraw/components/PublishLibrary.tsx

@@ -7,8 +7,8 @@ import { t } from "../i18n";
 import Trans from "./Trans";
 
 import type { LibraryItems, LibraryItem, UIAppState } from "../types";
+import { exportToCanvas, exportToSvg } from "../../utils/export";
 import {
-  COLOR_WHITE,
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,
   EXPORT_SOURCE,
@@ -24,7 +24,6 @@ import { ToolButton } from "./ToolButton";
 import { EditorLocalStorage } from "../data/EditorLocalStorage";
 
 import "./PublishLibrary.scss";
-import { exportToCanvas, exportToSvg } from "../scene/export";
 
 interface PublishLibraryDataParams {
   authorName: string;
@@ -56,20 +55,16 @@ const generatePreviewImage = async (libraryItems: LibraryItems) => {
 
   const ctx = canvas.getContext("2d")!;
 
-  ctx.fillStyle = COLOR_WHITE;
+  ctx.fillStyle = OpenColor.white;
   ctx.fillRect(0, 0, canvas.width, canvas.height);
 
   // draw items
   // ---------------------------------------------------------------------------
   for (const [index, item] of libraryItems.entries()) {
     const itemCanvas = await exportToCanvas({
-      data: {
-        elements: item.elements,
-        files: null,
-      },
-      config: {
-        maxWidthOrHeight: BOX_SIZE,
-      },
+      elements: item.elements,
+      files: null,
+      maxWidthOrHeight: BOX_SIZE,
     });
 
     const { width, height } = itemCanvas;
@@ -131,15 +126,14 @@ const SingleLibraryItem = ({
     }
     (async () => {
       const svg = await exportToSvg({
-        data: {
-          elements: libItem.elements,
-          appState: {
-            ...appState,
-            viewBackgroundColor: COLOR_WHITE,
-            exportBackground: true,
-          },
-          files: null,
+        elements: libItem.elements,
+        appState: {
+          ...appState,
+          viewBackgroundColor: OpenColor.white,
+          exportBackground: true,
         },
+        files: null,
+        skipInliningFonts: true,
       });
       node.innerHTML = svg.outerHTML;
     })();

packages/excalidraw/components/SearchMenu.tsx

@@ -294,7 +294,6 @@ export const SearchMenu = () => {
     // as well as to handle events before App ones
     return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
       capture: true,
-      passive: false,
     });
   }, [setAppState, stableState, app]);
 

packages/excalidraw/components/Stats/MultiDimension.tsx

@@ -69,6 +69,7 @@ const resizeElementInGroup = (
   originalElementsMap: ElementsMap,
 ) => {
   const updates = getResizedUpdates(anchorX, anchorY, scale, origElement);
+  const { width: oldWidth, height: oldHeight } = latestElement;
 
   mutateElement(latestElement, updates, false);
   const boundTextElement = getBoundTextElement(
@@ -78,7 +79,7 @@ const resizeElementInGroup = (
   if (boundTextElement) {
     const newFontSize = boundTextElement.fontSize * scale;
     updateBoundElements(latestElement, elementsMap, {
-      newSize: { width: updates.width, height: updates.height },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
     const latestBoundTextElement = elementsMap.get(boundTextElement.id);
     if (latestBoundTextElement && isTextElement(latestBoundTextElement)) {

packages/excalidraw/components/Stats/utils.ts

@@ -151,6 +151,8 @@ export const resizeElement = (
     nextHeight = Math.max(nextHeight, minHeight);
   }
 
+  const { width: oldWidth, height: oldHeight } = latestElement;
+
   mutateElement(
     latestElement,
     {
@@ -199,7 +201,7 @@ export const resizeElement = (
   }
 
   updateBoundElements(latestElement, elementsMap, {
-    newSize: { width: nextWidth, height: nextHeight },
+    oldSize: { width: oldWidth, height: oldHeight },
   });
 
   if (boundTextElement && boundTextFont) {

packages/excalidraw/components/TTDDialog/common.ts

@@ -91,16 +91,12 @@ export const convertMermaidToExcalidraw = async ({
     };
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: data.current.elements,
-        files: data.current.files,
-      },
-      config: {
-        padding: DEFAULT_EXPORT_PADDING,
-        maxWidthOrHeight:
-          Math.max(parent.offsetWidth, parent.offsetHeight) *
-          window.devicePixelRatio,
-      },
+      elements: data.current.elements,
+      files: data.current.files,
+      exportPadding: DEFAULT_EXPORT_PADDING,
+      maxWidthOrHeight:
+        Math.max(parent.offsetWidth, parent.offsetHeight) *
+        window.devicePixelRatio,
     });
     // if converting to blob fails, there's some problem that will
     // likely prevent preview and export (e.g. canvas too big)

packages/excalidraw/components/canvases/StaticCanvas.tsx

@@ -97,6 +97,7 @@ const getRelevantAppStateProps = (
   theme: appState.theme,
   pendingImageElementId: appState.pendingImageElementId,
   shouldCacheIgnoreZoom: appState.shouldCacheIgnoreZoom,
+  viewBackgroundColor: appState.viewBackgroundColor,
   exportScale: appState.exportScale,
   selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
   gridSize: appState.gridSize,

packages/excalidraw/constants.ts

@@ -1,8 +1,7 @@
 import cssVariables from "./css/variables.module.scss";
 import type { AppProps, AppState } from "./types";
 import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
-import type { NormalizedZoomValue } from "./types";
-
+import { COLOR_PALETTE } from "./colors";
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);
 export const isAndroid = /\b(android)\b/i.test(navigator.userAgent);
@@ -108,6 +107,7 @@ export const YOUTUBE_STATES = {
 
 export const ENV = {
   TEST: "test",
+  DEVELOPMENT: "development",
 };
 
 export const CLASSES = {
@@ -183,14 +183,6 @@ export const DEFAULT_TEXT_ALIGN = "left";
 export const DEFAULT_VERTICAL_ALIGN = "top";
 export const DEFAULT_VERSION = "{version}";
 export const DEFAULT_TRANSFORM_HANDLE_SPACING = 2;
-export const DEFAULT_ZOOM_VALUE = 1 as NormalizedZoomValue;
-
-// -----------------------------------------------
-// !!! these colors are tied to color picker !!!
-export const COLOR_WHITE = "#ffffff";
-export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
-export const COLOR_TRANSPARENT = "transparent";
-// -----------------------------------------------
 
 export const SIDE_RESIZING_THRESHOLD = 2 * DEFAULT_TRANSFORM_HANDLE_SPACING;
 // a small epsilon to make side resizing always take precedence
@@ -199,6 +191,8 @@ const EPSILON = 0.00001;
 export const DEFAULT_COLLISION_THRESHOLD =
   2 * SIDE_RESIZING_THRESHOLD - EPSILON;
 
+export const COLOR_WHITE = "#ffffff";
+export const COLOR_CHARCOAL_BLACK = "#1e1e1e";
 // keep this in sync with CSS
 export const COLOR_VOICE_CALL = "#a2f1a6";
 
@@ -309,7 +303,6 @@ export const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 
 export const EXPORT_SCALES = [1, 2, 3];
 export const DEFAULT_EXPORT_PADDING = 10; // px
-export const DEFAULT_SMALLEST_EXPORT_SIZE = 20; // px
 
 export const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
 
@@ -390,8 +383,8 @@ export const DEFAULT_ELEMENT_PROPS: {
   opacity: ExcalidrawElement["opacity"];
   locked: ExcalidrawElement["locked"];
 } = {
-  strokeColor: COLOR_CHARCOAL_BLACK,
-  backgroundColor: COLOR_TRANSPARENT,
+  strokeColor: COLOR_PALETTE.black,
+  backgroundColor: COLOR_PALETTE.transparent,
   fillStyle: "solid",
   strokeWidth: 2,
   strokeStyle: "solid",

packages/excalidraw/data/blob.ts

@@ -8,14 +8,13 @@ import { calculateScrollCenter } from "../scene";
 import type { AppState, DataURL, LibraryItem } from "../types";
 import type { ValueOf } from "../utility-types";
 import { bytesToHexString, isPromiseLike } from "../utils";
-import { base64ToString, stringToBase64, toByteString } from "./encode";
 import type { FileSystemHandle } from "./filesystem";
 import { nativeFileSystemSupported } from "./filesystem";
 import { isValidExcalidrawData, isValidLibrary } from "./json";
 import { restore, restoreLibraryItems } from "./restore";
 import type { ImportedLibraryData } from "./types";
 
-const parseFileContents = async (blob: Blob | File): Promise<string> => {
+const parseFileContents = async (blob: Blob | File) => {
   let contents: string;
 
   if (blob.type === MIME_TYPES.png) {
@@ -47,7 +46,9 @@ const parseFileContents = async (blob: Blob | File): Promise<string> => {
     }
     if (blob.type === MIME_TYPES.svg) {
       try {
-        return (await import("./image")).decodeSvgMetadata({
+        return await (
+          await import("./image")
+        ).decodeSvgMetadata({
           svg: contents,
         });
       } catch (error: any) {
@@ -248,7 +249,6 @@ export const generateIdFromFile = async (file: File): Promise<FileId> => {
   }
 };
 
-/** async. For sync variant, use getDataURL_sync */
 export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
@@ -261,16 +261,6 @@ export const getDataURL = async (file: Blob | File): Promise<DataURL> => {
   });
 };
 
-export const getDataURL_sync = (
-  data: string | Uint8Array | ArrayBuffer,
-  mimeType: ValueOf<typeof MIME_TYPES>,
-): DataURL => {
-  return `data:${mimeType};base64,${stringToBase64(
-    toByteString(data),
-    true,
-  )}` as DataURL;
-};
-
 export const dataURLToFile = (dataURL: DataURL, filename = "") => {
   const dataIndexStart = dataURL.indexOf(",");
   const byteString = atob(dataURL.slice(dataIndexStart + 1));
@@ -284,10 +274,6 @@ export const dataURLToFile = (dataURL: DataURL, filename = "") => {
   return new File([ab], filename, { type: mimeType });
 };
 
-export const dataURLToString = (dataURL: DataURL) => {
-  return base64ToString(dataURL.slice(dataURL.indexOf(",") + 1));
-};
-
 export const resizeImageFile = async (
   file: File,
   opts: {

packages/excalidraw/data/encode.ts

@@ -5,23 +5,24 @@ import { encryptData, decryptData } from "./encryption";
 // byte (binary) strings
 // -----------------------------------------------------------------------------
 
-// Buffer-compatible implem.
-//
-// Note that in V8, spreading the uint8array (by chunks) into
-// `String.fromCharCode(...uint8array)` tends to be faster for large
-// strings/buffers, in case perf is needed in the future.
-export const toByteString = (data: string | Uint8Array | ArrayBuffer) => {
-  const bytes =
-    typeof data === "string"
-      ? new TextEncoder().encode(data)
-      : data instanceof Uint8Array
-      ? data
-      : new Uint8Array(data);
-  let bstring = "";
-  for (const byte of bytes) {
-    bstring += String.fromCharCode(byte);
-  }
-  return bstring;
+// fast, Buffer-compatible implem
+export const toByteString = (
+  data: string | Uint8Array | ArrayBuffer,
+): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const blob =
+      typeof data === "string"
+        ? new Blob([new TextEncoder().encode(data)])
+        : new Blob([data instanceof Uint8Array ? data : new Uint8Array(data)]);
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (!event.target || typeof event.target.result !== "string") {
+        return reject(new Error("couldn't convert to byte string"));
+      }
+      resolve(event.target.result);
+    };
+    reader.readAsBinaryString(blob);
+  });
 };
 
 const byteStringToArrayBuffer = (byteString: string) => {
@@ -45,12 +46,12 @@ const byteStringToString = (byteString: string) => {
  * @param isByteString set to true if already byte string to prevent bloat
  *  due to reencoding
  */
-export const stringToBase64 = (str: string, isByteString = false) => {
-  return isByteString ? window.btoa(str) : window.btoa(toByteString(str));
+export const stringToBase64 = async (str: string, isByteString = false) => {
+  return isByteString ? window.btoa(str) : window.btoa(await toByteString(str));
 };
 
 // async to align with stringToBase64
-export const base64ToString = (base64: string, isByteString = false) => {
+export const base64ToString = async (base64: string, isByteString = false) => {
   return isByteString
     ? window.atob(base64)
     : byteStringToString(window.atob(base64));
@@ -65,20 +66,6 @@ export const base64ToArrayBuffer = (base64: string): ArrayBuffer => {
   return byteStringToArrayBuffer(atob(base64));
 };
 
-// -----------------------------------------------------------------------------
-// base64url
-// -----------------------------------------------------------------------------
-
-export const base64urlToString = (str: string) => {
-  return window.atob(
-    // normalize base64URL to base64
-    str
-      .replace(/-/g, "+")
-      .replace(/_/g, "/")
-      .padEnd(str.length + ((4 - (str.length % 4)) % 4), "="),
-  );
-};
-
 // -----------------------------------------------------------------------------
 // text encoding
 // -----------------------------------------------------------------------------
@@ -95,18 +82,18 @@ type EncodedData = {
 /**
  * Encodes (and potentially compresses via zlib) text to byte string
  */
-export const encode = ({
+export const encode = async ({
   text,
   compress,
 }: {
   text: string;
   /** defaults to `true`. If compression fails, falls back to bstring alone. */
   compress?: boolean;
-}): EncodedData => {
+}): Promise<EncodedData> => {
   let deflated!: string;
   if (compress !== false) {
     try {
-      deflated = toByteString(deflate(text));
+      deflated = await toByteString(deflate(text));
     } catch (error: any) {
       console.error("encode: cannot deflate", error);
     }
@@ -115,11 +102,11 @@ export const encode = ({
     version: "1",
     encoding: "bstring",
     compressed: !!deflated,
-    encoded: deflated || toByteString(text),
+    encoded: deflated || (await toByteString(text)),
   };
 };
 
-export const decode = (data: EncodedData): string => {
+export const decode = async (data: EncodedData): Promise<string> => {
   let decoded: string;
 
   switch (data.encoding) {
@@ -127,7 +114,7 @@ export const decode = (data: EncodedData): string => {
       // if compressed, do not double decode the bstring
       decoded = data.compressed
         ? data.encoded
-        : byteStringToString(data.encoded);
+        : await byteStringToString(data.encoded);
       break;
     default:
       throw new Error(`decode: unknown encoding "${data.encoding}"`);

packages/excalidraw/data/image.ts

@@ -32,7 +32,7 @@ export const encodePngMetadata = async ({
   const metadataChunk = tEXt.encode(
     MIME_TYPES.excalidraw,
     JSON.stringify(
-      encode({
+      await encode({
         text: metadata,
         compress: true,
       }),
@@ -59,7 +59,7 @@ export const decodePngMetadata = async (blob: Blob) => {
         }
         throw new Error("FAILED");
       }
-      return decode(encodedData);
+      return await decode(encodedData);
     } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");
@@ -72,9 +72,9 @@ export const decodePngMetadata = async (blob: Blob) => {
 // SVG
 // -----------------------------------------------------------------------------
 
-export const encodeSvgMetadata = ({ text }: { text: string }) => {
-  const base64 = stringToBase64(
-    JSON.stringify(encode({ text })),
+export const encodeSvgMetadata = async ({ text }: { text: string }) => {
+  const base64 = await stringToBase64(
+    JSON.stringify(await encode({ text })),
     true /* is already byte string */,
   );
 
@@ -87,7 +87,7 @@ export const encodeSvgMetadata = ({ text }: { text: string }) => {
   return metadata;
 };
 
-export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
+export const decodeSvgMetadata = async ({ svg }: { svg: string }) => {
   if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
     const match = svg.match(
       /<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/,
@@ -100,7 +100,7 @@ export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
     const isByteString = version !== "1";
 
     try {
-      const json = base64ToString(match[1], isByteString);
+      const json = await base64ToString(match[1], isByteString);
       const encodedData = JSON.parse(json);
       if (!("encoded" in encodedData)) {
         // legacy, un-encoded scene JSON
@@ -112,7 +112,7 @@ export const decodeSvgMetadata = ({ svg }: { svg: string }) => {
         }
         throw new Error("FAILED");
       }
-      return decode(encodedData);
+      return await decode(encodedData);
     } catch (error: any) {
       console.error(error);
       throw new Error("FAILED");

packages/excalidraw/data/index.ts

@@ -81,53 +81,46 @@ export const prepareElementsForExport = (
   };
 };
 
-export const exportAsImage = async ({
-  type,
-  data,
-  config,
-}: {
-  type: Omit<ExportType, "backend">;
-  data: {
-    elements: ExportedElements;
-    appState: AppState;
-    files: BinaryFiles;
-  };
-  config: {
+export const exportCanvas = async (
+  type: Omit<ExportType, "backend">,
+  elements: ExportedElements,
+  appState: AppState,
+  files: BinaryFiles,
+  {
+    exportBackground,
+    exportPadding = DEFAULT_EXPORT_PADDING,
+    viewBackgroundColor,
+    name = appState.name || DEFAULT_FILENAME,
+    fileHandle = null,
+    exportingFrame = null,
+  }: {
     exportBackground: boolean;
-    padding?: number;
+    exportPadding?: number;
     viewBackgroundColor: string;
     /** filename, if applicable */
     name?: string;
     fileHandle?: FileSystemHandle | null;
     exportingFrame: ExcalidrawFrameLikeElement | null;
-  };
-}) => {
-  // clone
-  const cfg = Object.assign({}, config);
-
-  cfg.padding = cfg.padding ?? DEFAULT_EXPORT_PADDING;
-  cfg.fileHandle = cfg.fileHandle ?? null;
-  cfg.exportingFrame = cfg.exportingFrame ?? null;
-  cfg.name = cfg.name || DEFAULT_FILENAME;
-
-  if (data.elements.length === 0) {
+  },
+) => {
+  if (elements.length === 0) {
     throw new Error(t("alerts.cannotExportEmptyCanvas"));
   }
   if (type === "svg" || type === "clipboard-svg") {
-    const svgPromise = exportToSvg({
-      data: {
-        elements: data.elements,
-        appState: {
-          exportBackground: cfg.exportBackground,
-          exportWithDarkMode: data.appState.exportWithDarkMode,
-          viewBackgroundColor: data.appState.viewBackgroundColor,
-          exportScale: data.appState.exportScale,
-          exportEmbedScene: data.appState.exportEmbedScene && type === "svg",
-        },
-        files: data.files,
+    const svgPromise = exportToSvg(
+      elements,
+      {
+        exportBackground,
+        exportWithDarkMode: appState.exportWithDarkMode,
+        viewBackgroundColor,
+        exportPadding,
+        exportScale: appState.exportScale,
+        exportEmbedScene: appState.exportEmbedScene && type === "svg",
       },
-      config: { exportingFrame: cfg.exportingFrame, padding: cfg.padding },
-    });
+      files,
+      { exportingFrame },
+    );
+
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
@@ -135,9 +128,9 @@ export const exportAsImage = async ({
         }),
         {
           description: "Export to SVG",
-          name: cfg.name,
-          extension: data.appState.exportEmbedScene ? "excalidraw.svg" : "svg",
-          fileHandle: cfg.fileHandle,
+          name,
+          extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+          fileHandle,
         },
       );
     } else if (type === "clipboard-svg") {
@@ -151,33 +144,22 @@ export const exportAsImage = async ({
     }
   }
 
-  const tempCanvas = exportToCanvas({
-    data,
-    config: {
-      canvasBackgroundColor: !cfg.exportBackground
-        ? false
-        : cfg.viewBackgroundColor,
-      padding: cfg.padding,
-      theme: data.appState.exportWithDarkMode ? "dark" : "light",
-      scale: data.appState.exportScale,
-      fit: "none",
-      exportingFrame: cfg.exportingFrame,
-    },
+  const tempCanvas = exportToCanvas(elements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    exportPadding,
+    exportingFrame,
   });
 
   if (type === "png") {
-    const blob = canvasToBlob(tempCanvas);
-    if (data.appState.exportEmbedScene) {
-      blob.then((blob) =>
+    let blob = canvasToBlob(tempCanvas);
+
+    if (appState.exportEmbedScene) {
+      blob = blob.then((blob) =>
         import("./image").then(({ encodePngMetadata }) =>
           encodePngMetadata({
             blob,
-            metadata: serializeAsJSON(
-              data.elements,
-              data.appState,
-              data.files,
-              "local",
-            ),
+            metadata: serializeAsJSON(elements, appState, files, "local"),
           }),
         ),
       );
@@ -185,11 +167,11 @@ export const exportAsImage = async ({
 
     return fileSave(blob, {
       description: "Export to PNG",
-      name: cfg.name,
+      name,
       // FIXME reintroduce `excalidraw.png` when most people upgrade away
       // from 111.0.5563.64 (arm64), see #6349
       extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
-      fileHandle: cfg.fileHandle,
+      fileHandle,
     });
   } else if (type === "clipboard") {
     try {

packages/excalidraw/data/resave.ts

@@ -1,7 +1,6 @@
 import type { ExcalidrawElement } from "../element/types";
 import type { AppState, BinaryFiles } from "../types";
-import { prepareElementsForExport } from ".";
-import { exportAsImage } from ".";
+import { exportCanvas, prepareElementsForExport } from ".";
 import { getFileHandleType, isImageFileHandleType } from "./blob";
 
 export const resaveAsImageWithScene = async (
@@ -30,16 +29,12 @@ export const resaveAsImageWithScene = async (
     false,
   );
 
-  await exportAsImage({
-    type: fileHandleType,
-    data: { elements: exportedElements, appState, files },
-    config: {
-      exportBackground,
-      viewBackgroundColor,
-      name,
-      fileHandle,
-      exportingFrame,
-    },
+  await exportCanvas(fileHandleType, exportedElements, appState, files, {
+    exportBackground,
+    viewBackgroundColor,
+    name,
+    fileHandle,
+    exportingFrame,
   });
 
   return { fileHandle };

packages/excalidraw/element/binding.ts

@@ -576,11 +576,11 @@ export const updateBoundElements = (
   elementsMap: NonDeletedSceneElementsMap | SceneElementsMap,
   options?: {
     simultaneouslyUpdated?: readonly ExcalidrawElement[];
-    newSize?: { width: number; height: number };
+    oldSize?: { width: number; height: number };
     changedElements?: Map<string, OrderedExcalidrawElement>;
   },
 ) => {
-  const { newSize, simultaneouslyUpdated, changedElements } = options ?? {};
+  const { oldSize, simultaneouslyUpdated, changedElements } = options ?? {};
   const simultaneouslyUpdatedElementIds = getSimultaneouslyUpdatedElementIds(
     simultaneouslyUpdated,
   );
@@ -603,12 +603,12 @@ export const updateBoundElements = (
       startBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.startBinding,
-        newSize,
+        oldSize,
       ),
       endBinding: maybeCalculateNewGapWhenScaling(
         changedElement,
         element.endBinding,
-        newSize,
+        oldSize,
       ),
     };
 

packages/excalidraw/element/embeddable.ts

@@ -4,7 +4,7 @@ import type { ExcalidrawProps } from "../types";
 import { getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
-import { wrapText } from "./textWrapping";
+import { wrapText } from "./textElement";
 import { isIframeElement } from "./typeChecks";
 import type {
   ExcalidrawElement,

packages/excalidraw/element/image.ts

@@ -94,7 +94,7 @@ export const isHTMLSVGElement = (node: Node | null): node is SVGElement => {
   return node?.nodeName.toLowerCase() === "svg";
 };
 
-export const normalizeSVG = (SVGString: string) => {
+export const normalizeSVG = async (SVGString: string) => {
   const doc = new DOMParser().parseFromString(SVGString, MIME_TYPES.svg);
   const svg = doc.querySelector("svg");
   const errorNode = doc.querySelector("parsererror");

packages/excalidraw/element/newElement.ts

@@ -34,9 +34,9 @@ import { getResizedElementAbsoluteCoords } from "./bounds";
 import {
   measureText,
   normalizeText,
+  wrapText,
   getBoundTextMaxWidth,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import {
   DEFAULT_ELEMENT_PROPS,
   DEFAULT_FONT_FAMILY,

packages/excalidraw/element/resizeElements.ts

@@ -47,10 +47,10 @@ import {
   handleBindTextResize,
   getBoundTextMaxWidth,
   getApproxMinLineHeight,
+  wrapText,
   measureText,
   getMinTextElementWidth,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import { LinearElementEditor } from "./linearElementEditor";
 import { isInGroup } from "../groups";
 import { mutateElbowArrow } from "./routing";
@@ -739,9 +739,9 @@ export const resizeSingleElement = (
     mutateElement(element, resizedElement);
 
     updateBoundElements(element, elementsMap, {
-      newSize: {
-        width: resizedElement.width,
-        height: resizedElement.height,
+      oldSize: {
+        width: stateAtResizeStart.width,
+        height: stateAtResizeStart.height,
       },
     });
 
@@ -999,13 +999,14 @@ export const resizeMultipleElements = (
     element,
     update: { boundTextFontSize, ...update },
   } of elementsAndUpdates) {
-    const { angle, width: newWidth, height: newHeight } = update;
+    const { angle } = update;
+    const { width: oldWidth, height: oldHeight } = element;
 
     mutateElement(element, update, false);
 
     updateBoundElements(element, elementsMap, {
       simultaneouslyUpdated: elementsToUpdate,
-      newSize: { width: newWidth, height: newHeight },
+      oldSize: { width: oldWidth, height: oldHeight },
     });
 
     const boundTextElement = getBoundTextElement(element, elementsMap);

packages/excalidraw/element/textElement.test.ts

@@ -1,4 +1,4 @@
-import { FONT_FAMILY } from "../constants";
+import { BOUND_TEXT_PADDING, FONT_FAMILY } from "../constants";
 import { getLineHeight } from "../fonts";
 import { API } from "../tests/helpers/api";
 import {
@@ -6,10 +6,642 @@ import {
   getContainerCoords,
   getBoundTextMaxWidth,
   getBoundTextMaxHeight,
+  wrapText,
   detectLineHeight,
   getLineHeightInPx,
+  parseTokens,
 } from "./textElement";
-import type { ExcalidrawTextElementWithContainer } from "./types";
+import type { ExcalidrawTextElementWithContainer, FontString } from "./types";
+
+describe("Test wrapText", () => {
+  // font is irrelevant as jsdom does not support FontFace API
+  // `measureText` width is mocked to return `text.length` by `jest-canvas-mock`
+  // https://github.com/hustcc/jest-canvas-mock/blob/master/src/classes/TextMetrics.js
+  const font = "10px Cascadia, Segoe UI Emoji" as FontString;
+
+  it("should wrap the text correctly when word length is exactly equal to max width", () => {
+    const text = "Hello Excalidraw";
+    // Length of "Excalidraw" is 100 and exacty equal to max width
+    const res = wrapText(text, font, 100);
+    expect(res).toEqual(`Hello\nExcalidraw`);
+  });
+
+  it("should return the text as is if max width is invalid", () => {
+    const text = "Hello Excalidraw";
+    expect(wrapText(text, font, NaN)).toEqual(text);
+    expect(wrapText(text, font, -1)).toEqual(text);
+    expect(wrapText(text, font, Infinity)).toEqual(text);
+  });
+
+  it("should show the text correctly when max width reached", () => {
+    const text = "Hello😀";
+    const maxWidth = 10;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("H\ne\nl\nl\no\n😀");
+  });
+
+  it("should not wrap number when wrapping line", () => {
+    const text = "don't wrap this number 99,100.99";
+    const maxWidth = 300;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("don't wrap this number\n99,100.99");
+  });
+
+  it("should support multiple (multi-codepoint) emojis", () => {
+    const text = "😀🗺🔥👩🏽‍🦰👨‍👩‍👧‍👦🇨🇿";
+    const maxWidth = 1;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("😀\n🗺\n🔥\n👩🏽‍🦰\n👨‍👩‍👧‍👦\n🇨🇿");
+  });
+
+  it("should wrap the text correctly when text contains hyphen", () => {
+    let text =
+      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+    const res = wrapText(text, font, 110);
+    expect(res).toBe(
+      `Wikipedia\nis hosted\nby\nWikimedia-\nFoundation,\na non-\nprofit\norganizatio\nn that also\nhosts a\nrange-of\nother\nprojects`,
+    );
+
+    text = "Hello thereusing-now";
+    expect(wrapText(text, font, 100)).toEqual("Hello\nthereusing\n-now");
+  });
+
+  it("should support wrapping nested lists", () => {
+    const text = `\tA) one tab\t\t- two tabs        - 8 spaces`;
+
+    const maxWidth = 100;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe(`\tA) one\ntab\t\t- two\ntabs\n- 8 spaces`);
+
+    const maxWidth2 = 50;
+    const res2 = wrapText(text, font, maxWidth2);
+    expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
+  });
+
+  describe("When text is CJK", () => {
+    it("should break each CJK character when width is very small", () => {
+      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
+      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
+      const maxWidth = 10;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe(
+        "안\n녕\n하\n세\n요\nこ\nん\nに\nち\nは\n世\n界\nｺ\nﾝ\nﾆ\nﾁ\nハ\n你\n好",
+      );
+    });
+
+    it("should break CJK text into longer segments when width is larger", () => {
+      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
+      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
+      const maxWidth = 30;
+      const res = wrapText(text, font, maxWidth);
+
+      // measureText is mocked, so it's not precisely what would happen in prod
+      expect(res).toBe("안녕하\n세요こ\nんにち\nは世界\nｺﾝﾆ\nﾁハ你\n好");
+    });
+
+    it("should handle a combination of CJK, latin, emojis and whitespaces", () => {
+      const text = `a醫 醫      bb  你好  world-i-😀🗺🔥`;
+
+      const maxWidth = 150;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe(`a醫 醫      bb  你\n好  world-i-😀🗺\n🔥`);
+
+      const maxWidth2 = 50;
+      const res2 = wrapText(text, font, maxWidth2);
+      expect(res2).toBe(`a醫 醫\nbb  你\n好\nworld\n-i-😀\n🗺🔥`);
+
+      const maxWidth3 = 30;
+      const res3 = wrapText(text, font, maxWidth3);
+      expect(res3).toBe(`a醫\n醫\nbb\n你好\nwor\nld-\ni-\n😀\n🗺\n🔥`);
+    });
+
+    it("should break before and after a regular CJK character", () => {
+      const text = "HelloたWorld";
+      const maxWidth1 = 50;
+      const res1 = wrapText(text, font, maxWidth1);
+      expect(res1).toBe("Hello\nた\nWorld");
+
+      const maxWidth2 = 60;
+      const res2 = wrapText(text, font, maxWidth2);
+      expect(res2).toBe("Helloた\nWorld");
+    });
+
+    it("should break before and after certain CJK symbols", () => {
+      const text = "こんにちは〃世界";
+      const maxWidth1 = 50;
+      const res1 = wrapText(text, font, maxWidth1);
+      expect(res1).toBe("こんにちは\n〃世界");
+
+      const maxWidth2 = 60;
+      const res2 = wrapText(text, font, maxWidth2);
+      expect(res2).toBe("こんにちは〃\n世界");
+    });
+
+    it("should break after, not before for certain CJK pairs", () => {
+      const text = "Hello た。";
+      const maxWidth = 70;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("Hello\nた。");
+    });
+
+    it("should break before, not after for certain CJK pairs", () => {
+      const text = "Hello「たWorld」";
+      const maxWidth = 60;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("Hello\n「た\nWorld」");
+    });
+
+    it("should break after, not before for certain CJK character pairs", () => {
+      const text = "「Helloた」World";
+      const maxWidth = 70;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("「Hello\nた」World");
+    });
+
+    it("should break Chinese sentences", () => {
+      const text = `中国你好！这是一个测试。
+我们来看看：人民币¥1234「很贵」
+（括号）、逗号，句号。空格 换行　全角符号…—`;
+
+      const maxWidth1 = 80;
+      const res1 = wrapText(text, font, maxWidth1);
+      expect(res1).toBe(`中国你好！这是一\n个测试。
+我们来看看：人民\n币¥1234「很\n贵」
+（括号）、逗号，\n句号。空格 换行\n全角符号…—`);
+
+      const maxWidth2 = 50;
+      const res2 = wrapText(text, font, maxWidth2);
+      expect(res2).toBe(`中国你好！\n这是一个测\n试。
+我们来看\n看：人民币\n¥1234\n「很贵」
+（括号）、\n逗号，句\n号。空格\n换行　全角\n符号…—`);
+    });
+  });
+
+  it("should break Japanese sentences", () => {
+    const text = `日本こんにちは！これはテストです。
+  見てみましょう：円￥1234「高い」
+  （括弧）、読点、句点。
+  空白 改行　全角記号…ー`;
+
+    const maxWidth1 = 80;
+    const res1 = wrapText(text, font, maxWidth1);
+    expect(res1).toBe(`日本こんにちは！\nこれはテストで\nす。
+  見てみましょ\nう：円￥1234\n「高い」
+  （括弧）、読\n点、句点。
+  空白 改行\n全角記号…ー`);
+
+    const maxWidth2 = 50;
+    const res2 = wrapText(text, font, maxWidth2);
+    expect(res2).toBe(`日本こんに\nちは！これ\nはテストで\nす。
+  見てみ\nましょう：\n円\n￥1234\n「高い」
+  （括\n弧）、読\n点、句点。
+  空白\n改行　全角\n記号…ー`);
+  });
+
+  it("should break Korean sentences", () => {
+    const text = `한국 안녕하세요! 이것은 테스트입니다.
+우리 보자: 원화₩1234「비싸다」
+(괄호), 쉼표, 마침표.
+공백 줄바꿈　전각기호…—`;
+
+    const maxWidth1 = 80;
+    const res1 = wrapText(text, font, maxWidth1);
+    expect(res1).toBe(`한국 안녕하세\n요! 이것은 테\n스트입니다.
+우리 보자: 원\n화₩1234「비\n싸다」
+(괄호), 쉼\n표, 마침표.
+공백 줄바꿈　전\n각기호…—`);
+
+    const maxWidth2 = 60;
+    const res2 = wrapText(text, font, maxWidth2);
+    expect(res2).toBe(`한국 안녕하\n세요! 이것\n은 테스트입\n니다.
+우리 보자:\n원화\n₩1234\n「비싸다」
+(괄호),\n쉼표, 마침\n표.
+공백 줄바꿈\n전각기호…—`);
+  });
+
+  describe("When text contains leading whitespaces", () => {
+    const text = "  \t   Hello world";
+
+    it("should preserve leading whitespaces", () => {
+      const maxWidth = 120;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("  \t   Hello\nworld");
+    });
+
+    it("should break and collapse leading whitespaces when line breaks", () => {
+      const maxWidth = 60;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("\nHello\nworld");
+    });
+
+    it("should break and collapse leading whitespaces whe words break", () => {
+      const maxWidth = 30;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("\nHel\nlo\nwor\nld");
+    });
+  });
+
+  describe("When text contains trailing whitespaces", () => {
+    it("shouldn't add new lines for trailing spaces", () => {
+      const text = "Hello whats up     ";
+      const maxWidth = 200 - BOUND_TEXT_PADDING * 2;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe(text);
+    });
+
+    it("should ignore trailing whitespaces when line breaks", () => {
+      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
+      const maxWidth = 400;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("Hippopotomonstrosesquippedaliophobia\n??????");
+    });
+
+    it("should not ignore trailing whitespaces when word breaks", () => {
+      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
+      const maxWidth = 300;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("Hippopotomonstrosesquippedalio\nphobia        ??????");
+    });
+
+    it("should ignore trailing whitespaces when word breaks and line breaks", () => {
+      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
+      const maxWidth = 180;
+      const res = wrapText(text, font, maxWidth);
+      expect(res).toBe("Hippopotomonstrose\nsquippedaliophobia\n??????");
+    });
+  });
+
+  describe("When text doesn't contain new lines", () => {
+    const text = "Hello whats up";
+
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 80,
+        res: `Hello\nwhats\nup`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 140,
+        res: `Hello whats\nup`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: "Hello whats up",
+      },
+      {
+        desc: "should push the word if its equal to max width",
+        width: 60,
+        res: `Hello
+whats
+up`,
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  describe("When text contain new lines", () => {
+    const text = `Hello
+whats up`;
+    [
+      {
+        desc: "break all words when width of each word is less than container width",
+        width: 80,
+        res: `Hello\nwhats\nup`,
+      },
+      {
+        desc: "break all characters when width of each character is less than container width",
+        width: 25,
+        res: `H
+e
+l
+l
+o
+w
+h
+a
+t
+s
+u
+p`,
+      },
+      {
+        desc: "break words as per the width",
+
+        width: 150,
+        res: `Hello
+whats up`,
+      },
+      {
+        desc: "fit the container",
+
+        width: 250,
+        res: `Hello
+whats up`,
+      },
+    ].forEach((data) => {
+      it(`should respect new lines and ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  describe("When text is long", () => {
+    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
+    [
+      {
+        desc: "fit characters of long string as per container width",
+        width: 170,
+        res: `hellolongtextthi\nsiswhatsupwithyo\nuIamtypingggggan\ndtypinggg break\nit now`,
+      },
+      {
+        desc: "fit characters of long string as per container width and break words as per the width",
+
+        width: 130,
+        res: `hellolongtex
+tthisiswhats
+upwithyouIam
+typingggggan
+dtypinggg
+break it now`,
+      },
+      {
+        desc: "fit the long text when container width is greater than text length and move the rest to next line",
+
+        width: 600,
+        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg\nbreak it now`,
+      },
+    ].forEach((data) => {
+      it(`should ${data.desc}`, () => {
+        const res = wrapText(text, font, data.width - BOUND_TEXT_PADDING * 2);
+        expect(res).toEqual(data.res);
+      });
+    });
+  });
+
+  describe("Test parseTokens", () => {
+    it("should tokenize latin", () => {
+      let text = "Excalidraw is a virtual collaborative whiteboard";
+
+      expect(parseTokens(text)).toEqual([
+        "Excalidraw",
+        " ",
+        "is",
+        " ",
+        "a",
+        " ",
+        "virtual",
+        " ",
+        "collaborative",
+        " ",
+        "whiteboard",
+      ]);
+
+      text =
+        "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
+      expect(parseTokens(text)).toEqual([
+        "Wikipedia",
+        " ",
+        "is",
+        " ",
+        "hosted",
+        " ",
+        "by",
+        " ",
+        "Wikimedia-",
+        " ",
+        "Foundation,",
+        " ",
+        "a",
+        " ",
+        "non-",
+        "profit",
+        " ",
+        "organization",
+        " ",
+        "that",
+        " ",
+        "also",
+        " ",
+        "hosts",
+        " ",
+        "a",
+        " ",
+        "range-",
+        "of",
+        " ",
+        "other",
+        " ",
+        "projects",
+      ]);
+    });
+
+    it("should not tokenize number", () => {
+      const text = "99,100.99";
+      const tokens = parseTokens(text);
+      expect(tokens).toEqual(["99,100.99"]);
+    });
+
+    it("should tokenize joined emojis", () => {
+      const text = `😬🌍🗺🔥☂️👩🏽‍🦰👨‍👩‍👧‍👦👩🏾‍🔬🏳️‍🌈🧔‍♀️🧑‍🤝‍🧑🙅🏽‍♂️✅0️⃣🇨🇿🦅`;
+      const tokens = parseTokens(text);
+
+      expect(tokens).toEqual([
+        "😬",
+        "🌍",
+        "🗺",
+        "🔥",
+        "☂️",
+        "👩🏽‍🦰",
+        "👨‍👩‍👧‍👦",
+        "👩🏾‍🔬",
+        "🏳️‍🌈",
+        "🧔‍♀️",
+        "🧑‍🤝‍🧑",
+        "🙅🏽‍♂️",
+        "✅",
+        "0️⃣",
+        "🇨🇿",
+        "🦅",
+      ]);
+    });
+
+    it("should tokenize emojis mixed with mixed text", () => {
+      const text = `😬a🌍b🗺c🔥d☂️《👩🏽‍🦰》👨‍👩‍👧‍👦德👩🏾‍🔬こ🏳️‍🌈안🧔‍♀️g🧑‍🤝‍🧑h🙅🏽‍♂️e✅f0️⃣g🇨🇿10🦅#hash`;
+      const tokens = parseTokens(text);
+
+      expect(tokens).toEqual([
+        "😬",
+        "a",
+        "🌍",
+        "b",
+        "🗺",
+        "c",
+        "🔥",
+        "d",
+        "☂️",
+        "《",
+        "👩🏽‍🦰",
+        "》",
+        "👨‍👩‍👧‍👦",
+        "德",
+        "👩🏾‍🔬",
+        "こ",
+        "🏳️‍🌈",
+        "안",
+        "🧔‍♀️",
+        "g",
+        "🧑‍🤝‍🧑",
+        "h",
+        "🙅🏽‍♂️",
+        "e",
+        "✅",
+        "f0️⃣g", // bummer, but ok, as we traded kecaps not breaking (less common) for hash and numbers not breaking (more common)
+        "🇨🇿",
+        "10", // nice! do not break the number, as it's by default matched by \p{Emoji}
+        "🦅",
+        "#hash", // nice! do not break the hash, as it's by default matched by \p{Emoji}
+      ]);
+    });
+
+    it("should tokenize decomposed chars into their composed variants", () => {
+      // each input character is in a decomposed form
+      const text = "čでäぴέ다й한";
+      expect(text.normalize("NFC").length).toEqual(8);
+      expect(text).toEqual(text.normalize("NFD"));
+
+      const tokens = parseTokens(text);
+      expect(tokens.length).toEqual(8);
+      expect(tokens).toEqual(["č", "で", "ä", "ぴ", "έ", "다", "й", "한"]);
+    });
+
+    it("should tokenize artificial CJK", () => {
+      const text = `《道德經》醫-醫こんにちは世界！안녕하세요세계；다.다...원/달(((다)))[[1]]〚({((한))>)〛た…[Hello] World？ニューヨーク・￥3700.55す。090-1234-5678￥1,000〜＄5,000「素晴らしい！」〔重要〕＃１：Taro君30％は、（たなばた）〰￥110±￥570で20℃〜9:30〜10:00【一番】`;
+
+      // [
+      //   '《道',        '德',             '經》',    '醫-',
+      //   '醫',          'こ',             'ん',      'に',
+      //   'ち',          'は',             '世',      '界！',
+      //   '안',          '녕',             '하',      '세',
+      //   '요',          '세',             '계；',    '다.',
+      //   '다...',       '원/',            '달',      '(((다)))',
+      //   '[[1]]',       '〚({((한))>)〛', 'た…',     '[Hello]',
+      //   ' ',           'World？',        'ニ',      'ュ',
+      //   'ー',          'ヨ',             'ー',      'ク・',
+      //   '￥3700.55',   'す。',           '090-',    '1234-',
+      //   '5678￥1,000', '〜',             '＄5,000', '「素',
+      //   '晴',          'ら',             'し',      'い！」',
+      //   '〔重',        '要〕',           '＃',      '１：',
+      //   'Taro',        '君',             '30％',    'は、',
+      //   '（た',        'な',             'ば',      'た）',
+      //   '〰',          '￥110±',         '￥570',   'で',
+      //   '20℃',         '〜',             '9:30',    '〜',
+      //   '10:00',       '【一',           '番】'
+      // ]
+      const tokens = parseTokens(text);
+
+      // Latin
+      expect(tokens).toContain("[[1]]");
+      expect(tokens).toContain("[Hello]");
+      expect(tokens).toContain("World？");
+      expect(tokens).toContain("Taro");
+
+      // Chinese
+      expect(tokens).toContain("《道");
+      expect(tokens).toContain("德");
+      expect(tokens).toContain("經》");
+      expect(tokens).toContain("醫-");
+      expect(tokens).toContain("醫");
+
+      // Japanese
+      expect(tokens).toContain("こ");
+      expect(tokens).toContain("ん");
+      expect(tokens).toContain("に");
+      expect(tokens).toContain("ち");
+      expect(tokens).toContain("は");
+      expect(tokens).toContain("世");
+      expect(tokens).toContain("ニ");
+      expect(tokens).toContain("ク・");
+      expect(tokens).toContain("界！");
+      expect(tokens).toContain("た…");
+      expect(tokens).toContain("す。");
+      expect(tokens).toContain("ュ");
+      expect(tokens).toContain("ー");
+      expect(tokens).toContain("「素");
+      expect(tokens).toContain("晴");
+      expect(tokens).toContain("ら");
+      expect(tokens).toContain("し");
+      expect(tokens).toContain("い！」");
+      expect(tokens).toContain("君");
+      expect(tokens).toContain("は、");
+      expect(tokens).toContain("（た");
+      expect(tokens).toContain("な");
+      expect(tokens).toContain("ば");
+      expect(tokens).toContain("た）");
+      expect(tokens).toContain("で");
+      expect(tokens).toContain("【一");
+      expect(tokens).toContain("番】");
+
+      // Check for Korean
+      expect(tokens).toContain("안");
+      expect(tokens).toContain("녕");
+      expect(tokens).toContain("하");
+      expect(tokens).toContain("세");
+      expect(tokens).toContain("요");
+      expect(tokens).toContain("세");
+      expect(tokens).toContain("계；");
+      expect(tokens).toContain("다.");
+      expect(tokens).toContain("다...");
+      expect(tokens).toContain("원/");
+      expect(tokens).toContain("달");
+      expect(tokens).toContain("(((다)))");
+      expect(tokens).toContain("〚({((한))>)〛");
+
+      // Numbers and units
+      expect(tokens).toContain("￥3700.55");
+      expect(tokens).toContain("090-");
+      expect(tokens).toContain("1234-");
+      expect(tokens).toContain("5678￥1,000");
+      expect(tokens).toContain("＄5,000");
+      expect(tokens).toContain("１：");
+      expect(tokens).toContain("30％");
+      expect(tokens).toContain("￥110±");
+      expect(tokens).toContain("￥570");
+      expect(tokens).toContain("20℃");
+      expect(tokens).toContain("9:30");
+      expect(tokens).toContain("10:00");
+
+      // Punctuation and symbols
+      expect(tokens).toContain("〜");
+      expect(tokens).toContain("〰");
+      expect(tokens).toContain("＃");
+    });
+  });
+});
 
 describe("Test measureText", () => {
   describe("Test getContainerCoords", () => {

packages/excalidraw/element/textElement.ts

@@ -16,12 +16,12 @@ import {
   BOUND_TEXT_PADDING,
   DEFAULT_FONT_FAMILY,
   DEFAULT_FONT_SIZE,
+  ENV,
   TEXT_ALIGN,
   VERTICAL_ALIGN,
 } from "../constants";
 import type { MaybeTransformHandleType } from "./transformHandles";
 import { isTextElement } from ".";
-import { wrapText } from "./textWrapping";
 import { isBoundToContainer, isArrowElement } from "./typeChecks";
 import { LinearElementEditor } from "./linearElementEditor";
 import type { AppState } from "../types";
@@ -31,6 +31,172 @@ import {
 } from "./containerCache";
 import type { ExtractSetType } from "../utility-types";
 
+/**
+ * Matches various emoji types.
+ *
+ * 1. basic emojis (😀, 🌍)
+ * 2. flags (🇨🇿)
+ * 3. multi-codepoint emojis:
+ *    - skin tones (👍🏽)
+ *    - variation selectors (☂️)
+ *    - keycaps (1️⃣)
+ *    - tag sequences (🏴󠁧󠁢󠁥󠁮󠁧󠁿)
+ *    - emoji sequences (👨‍👩‍👧‍👦, 👩‍🚀, 🏳️‍🌈)
+ *
+ * Unicode points:
+ * - \uFE0F: presentation selector
+ * - \u20E3: enclosing keycap
+ * - \u200D: ZWJ (zero width joiner)
+ * - \u{E0020}-\u{E007E}: tags
+ * - \u{E007F}: cancel tag
+ *
+ * @see https://unicode.org/reports/tr51/#EBNF_and_Regex, with changes:
+ * - replaced \p{Emoji} with [\p{Extended_Pictographic}\p{Emoji_Presentation}], see more in `should tokenize emojis mixed with mixed text` test
+ * - replaced \p{Emod} with \p{Emoji_Modifier} as some do not understand the abbreviation (i.e. https://devina.io/redos-checker)
+ */
+const _EMOJI_CHAR =
+  /(\p{RI}\p{RI}|[\p{Extended_Pictographic}\p{Emoji_Presentation}](?:\p{Emoji_Modifier}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?(?:\u200D(?:\p{RI}\p{RI}|[\p{Emoji}](?:\p{Emoji_Modifier}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?))*)/u;
+
+/**
+ * Detect a CJK char, though does not include every possible char used in CJK texts,
+ * such as symbols and punctuations.
+ *
+ * By default every CJK is a breaking point, though CJK has additional breaking points,
+ * including full width punctuations or symbols (Chinese and Japanese) and western punctuations (Korean).
+ *
+ * Additional CJK breaking point rules:
+ * - expect a break before (lookahead), but not after (negative lookbehind),  i.e. "(" or "("
+ * - expect a break after (lookbehind), but not before (negative lookahead), i.e. "）" or ")"
+ * - expect a break always (lookahead and lookbehind), i.e. "〃"
+ */
+const _CJK_CHAR =
+  /\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}/u;
+
+/**
+ * Following characters break only with CJK, not with alphabetic characters.
+ * This is essential for Korean, as it uses alphabetic punctuation, but expects CJK-like breaking points.
+ *
+ * Hello((た)) → ["Hello", "((た))"]
+ * Hello((World)) → ["Hello((World))"]
+ */
+const _CJK_BREAK_NOT_AFTER_BUT_BEFORE = /<\(\[\{/u;
+const _CJK_BREAK_NOT_BEFORE_BUT_AFTER = />\)\]\}.,:;\?!/u;
+const _CJK_BREAK_ALWAYS = /　〃〜～〰＃＆＊＋－ー／＝｜￢￣￤/u;
+const _CJK_SYMBOLS_AND_PUNCTUATION =
+  /（）［］｛｝〈〉《》｟｠｢｣「」『』【】〖〗〔〕〘〙〚〛＜＞〝〞＇〟・。ﾟﾞ，、．：；？！％ー/u;
+
+/**
+ * Following characters break with any character, even though are mostly used with CJK.
+ *
+ * Hello た。→ ["Hello", "た。"]
+ *        ↑ DON'T BREAK "た。" (negative lookahead)
+ * Hello「た」 World → ["Hello", "「た」", "World"]
+ *       ↑ DON'T BREAK "「た" (negative lookbehind)
+ *        ↑ DON'T BREAK "た」"(negative lookahead)
+ *      ↑ BREAK BEFORE "「" (lookahead)
+ *         ↑ BREAK AFTER "」" (lookbehind)
+ */
+const _ANY_BREAK_NOT_AFTER_BUT_BEFORE = /（［｛〈《｟｢「『【〖〔〘〚＜〝/u;
+const _ANY_BREAK_NOT_BEFORE_BUT_AFTER =
+  /）］｝〉》｠｣」』】〗〕〙〛＞〞＇〟・。ﾟﾞ，、．：；？！％±‥…\//u;
+
+/**
+ * Natural breaking points for any grammars.
+ *
+ * Hello-world
+ *       ↑ BREAK AFTER "-" → ["Hello-", "world"]
+ * Hello world
+ *      ↑ BREAK ALWAYS " " → ["Hello", " ", "world"]
+ */
+const _ANY_BREAK_AFTER = /-/u;
+const _ANY_BREAK_ALWAYS = /\s/u;
+
+/**
+ * Simple fallback for browsers (mainly Safari < 16.4) that don't support "Lookbehind assertion".
+ *
+ * Browser support as of 10/2024:
+ * - 91% Lookbehind assertion https://caniuse.com/mdn-javascript_regular_expressions_lookbehind_assertion
+ * - 94% Unicode character class escape https://caniuse.com/mdn-javascript_regular_expressions_unicode_character_class_escape
+ *
+ * Does not include advanced CJK breaking rules, but covers most of the core cases, especially for latin.
+ */
+const BREAK_LINE_REGEX_SIMPLE = new RegExp(
+  `${_EMOJI_CHAR.source}|([${_ANY_BREAK_ALWAYS.source}${_CJK_CHAR.source}${_CJK_BREAK_ALWAYS.source}${_ANY_BREAK_AFTER.source}])`,
+  "u",
+);
+
+// Hello World → ["Hello", " World"]
+//      ↑ BREAK BEFORE " "
+// HelloたWorld → ["Hello", "たWorld"]
+//      ↑ BREAK BEFORE "た"
+// Hello「World」→ ["Hello", "「World」"]
+//      ↑ BREAK BEFORE "「"
+const getLookaheadBreakingPoints = () => {
+  const ANY_BREAKING_POINT = `(?<![${_ANY_BREAK_NOT_AFTER_BUT_BEFORE.source}])(?=[${_ANY_BREAK_NOT_AFTER_BUT_BEFORE.source}${_ANY_BREAK_ALWAYS.source}])`;
+  const CJK_BREAKING_POINT = `(?<![${_ANY_BREAK_NOT_AFTER_BUT_BEFORE.source}${_CJK_BREAK_NOT_AFTER_BUT_BEFORE.source}])(?=[${_CJK_BREAK_NOT_AFTER_BUT_BEFORE.source}]*[${_CJK_CHAR.source}${_CJK_BREAK_ALWAYS.source}])`;
+  return new RegExp(`(?:${ANY_BREAKING_POINT}|${CJK_BREAKING_POINT})`, "u");
+};
+
+// Hello World → ["Hello ", "World"]
+//       ↑ BREAK AFTER " "
+// Hello-World → ["Hello-", "World"]
+//       ↑ BREAK AFTER "-"
+// HelloたWorld → ["Helloた", "World"]
+//       ↑ BREAK AFTER "た"
+//「Hello」World → ["「Hello」", "World"]
+//       ↑ BREAK AFTER "」"
+const getLookbehindBreakingPoints = () => {
+  const ANY_BREAKING_POINT = `(?![${_ANY_BREAK_NOT_BEFORE_BUT_AFTER.source}])(?<=[${_ANY_BREAK_NOT_BEFORE_BUT_AFTER.source}${_ANY_BREAK_ALWAYS.source}${_ANY_BREAK_AFTER.source}])`;
+  const CJK_BREAKING_POINT = `(?![${_ANY_BREAK_NOT_BEFORE_BUT_AFTER.source}${_CJK_BREAK_NOT_BEFORE_BUT_AFTER.source}${_ANY_BREAK_AFTER.source}])(?<=[${_CJK_CHAR.source}${_CJK_BREAK_ALWAYS.source}][${_CJK_BREAK_NOT_BEFORE_BUT_AFTER.source}]*)`;
+  return new RegExp(`(?:${ANY_BREAKING_POINT}|${CJK_BREAKING_POINT})`, "u");
+};
+
+/**
+ * Break a line based on the whitespaces, CJK / emoji chars and language specific breaking points,
+ * like hyphen for alphabetic and various full-width codepoints for CJK - especially Japanese, e.g.:
+ *
+ *  "Hello 世界。🌎🗺" → ["Hello", " ", "世", "界。", "🌎", "🗺"]
+ *  "Hello-world" → ["Hello-", "world"]
+ *  "「Hello World」" → ["「Hello", " ", "World」"]
+ */
+const getBreakLineRegexAdvanced = () =>
+  new RegExp(
+    `${_EMOJI_CHAR.source}|${getLookaheadBreakingPoints().source}|${
+      getLookbehindBreakingPoints().source
+    }`,
+    "u",
+  );
+
+let cachedBreakLineRegex: RegExp | undefined;
+
+// Lazy-load for browsers that don't support "Lookbehind assertion"
+const getBreakLineRegex = () => {
+  if (!cachedBreakLineRegex) {
+    try {
+      cachedBreakLineRegex = getBreakLineRegexAdvanced();
+    } catch {
+      cachedBreakLineRegex = BREAK_LINE_REGEX_SIMPLE;
+    }
+  }
+
+  return cachedBreakLineRegex;
+};
+
+const CJK_REGEX = new RegExp(
+  `[${_CJK_CHAR.source}${_CJK_BREAK_ALWAYS.source}${_CJK_SYMBOLS_AND_PUNCTUATION.source}]`,
+  "u",
+);
+
+const EMOJI_REGEX = new RegExp(`${_EMOJI_CHAR.source}`, "u");
+
+export const containsCJK = (text: string) => {
+  return CJK_REGEX.test(text);
+};
+
+export const containsEmoji = (text: string) => {
+  return EMOJI_REGEX.test(text);
+};
+
 export const normalizeText = (text: string) => {
   return (
     normalizeEOL(text)
@@ -344,7 +510,7 @@ let canvas: HTMLCanvasElement | undefined;
  *
  * `Math.ceil` of the final width adds additional buffer which stabilizes slight wrapping incosistencies.
  */
-export const getLineWidth = (
+const getLineWidth = (
   text: string,
   font: FontString,
   forceAdvanceWidth?: true,
@@ -409,6 +575,164 @@ export const getTextHeight = (
   return getLineHeightInPx(fontSize, lineHeight) * lineCount;
 };
 
+export const parseTokens = (line: string) => {
+  const breakLineRegex = getBreakLineRegex();
+
+  // normalizing to single-codepoint composed chars due to canonical equivalence of multi-codepoint versions for chars like č, で (~ so that we don't break a line in between c and ˇ)
+  // filtering due to multi-codepoint chars like 👨‍👩‍👧‍👦, 👩🏽‍🦰
+  return line.normalize("NFC").split(breakLineRegex).filter(Boolean);
+};
+
+// handles multi-byte chars (é, 中) and purposefully does not handle multi-codepoint char (👨‍👩‍👧‍👦, 👩🏽‍🦰)
+const isSingleCharacter = (maybeSingleCharacter: string) => {
+  return (
+    maybeSingleCharacter.codePointAt(0) !== undefined &&
+    maybeSingleCharacter.codePointAt(1) === undefined
+  );
+};
+
+const satisfiesWordInvariant = (word: string) => {
+  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    if (/\s/.test(word)) {
+      throw new Error("Word should not contain any whitespaces!");
+    }
+  }
+};
+
+const wrapWord = (
+  word: string,
+  font: FontString,
+  maxWidth: number,
+): Array<string> => {
+  // multi-codepoint emojis are already broken apart and shouldn't be broken further
+  if (EMOJI_REGEX.test(word)) {
+    return [word];
+  }
+
+  satisfiesWordInvariant(word);
+
+  const lines: Array<string> = [];
+  const chars = Array.from(word);
+
+  let currentLine = "";
+  let currentLineWidth = 0;
+
+  for (const char of chars) {
+    const _charWidth = charWidth.calculate(char, font);
+    const testLineWidth = currentLineWidth + _charWidth;
+
+    if (testLineWidth <= maxWidth) {
+      currentLine = currentLine + char;
+      currentLineWidth = testLineWidth;
+      continue;
+    }
+
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    currentLine = char;
+    currentLineWidth = _charWidth;
+  }
+
+  if (currentLine) {
+    lines.push(currentLine);
+  }
+
+  return lines;
+};
+
+const wrapLine = (
+  line: string,
+  font: FontString,
+  maxWidth: number,
+): string[] => {
+  const lines: Array<string> = [];
+  const tokens = parseTokens(line);
+  const tokenIterator = tokens[Symbol.iterator]();
+
+  let currentLine = "";
+  let currentLineWidth = 0;
+
+  let iterator = tokenIterator.next();
+
+  while (!iterator.done) {
+    const token = iterator.value;
+    const testLine = currentLine + token;
+
+    // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
+    const testLineWidth = isSingleCharacter(token)
+      ? currentLineWidth + charWidth.calculate(token, font)
+      : getLineWidth(testLine, font, true);
+
+    // build up the current line, skipping length check for possibly trailing whitespaces
+    if (/\s/.test(token) || testLineWidth <= maxWidth) {
+      currentLine = testLine;
+      currentLineWidth = testLineWidth;
+      iterator = tokenIterator.next();
+      continue;
+    }
+
+    // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
+    if (!currentLine) {
+      const wrappedWord = wrapWord(token, font, maxWidth);
+      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
+      const precedingLines = wrappedWord.slice(0, -1);
+
+      lines.push(...precedingLines);
+
+      // trailing line of the wrapped word might still be joined with next token/s
+      currentLine = trailingLine;
+      currentLineWidth = getLineWidth(trailingLine, font, true);
+      iterator = tokenIterator.next();
+    } else {
+      // push & reset, but don't iterate on the next token, as we didn't use it yet!
+      lines.push(currentLine.trimEnd());
+
+      // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
+      currentLine = "";
+      currentLineWidth = 0;
+    }
+  }
+
+  // iterator done, push the trailing line if exists
+  if (currentLine) {
+    lines.push(currentLine.trimEnd());
+  }
+
+  return lines;
+};
+
+export const wrapText = (
+  text: string,
+  font: FontString,
+  maxWidth: number,
+): string => {
+  // 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
+  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
+    return text;
+  }
+
+  const lines: Array<string> = [];
+  const originalLines = text.split("\n");
+
+  for (const originalLine of originalLines) {
+    const currentLineWidth = getLineWidth(originalLine, font, true);
+
+    if (currentLineWidth <= maxWidth) {
+      lines.push(originalLine);
+      continue;
+    }
+
+    const wrappedLine = wrapLine(originalLine, font, maxWidth);
+    lines.push(...wrappedLine);
+  }
+
+  return lines.join("\n");
+};
+
 export const charWidth = (() => {
   const cachedCharWidth: { [key: FontString]: Array<number> } = {};
 

packages/excalidraw/element/textWrapping.test.ts

@@ -1,633 +0,0 @@
-import { wrapText, parseTokens } from "./textWrapping";
-import type { FontString } from "./types";
-
-describe("Test wrapText", () => {
-  // font is irrelevant as jsdom does not support FontFace API
-  // `measureText` width is mocked to return `text.length` by `jest-canvas-mock`
-  // https://github.com/hustcc/jest-canvas-mock/blob/master/src/classes/TextMetrics.js
-  const font = "10px Cascadia, Segoe UI Emoji" as FontString;
-
-  it("should wrap the text correctly when word length is exactly equal to max width", () => {
-    const text = "Hello Excalidraw";
-    // Length of "Excalidraw" is 100 and exacty equal to max width
-    const res = wrapText(text, font, 100);
-    expect(res).toEqual(`Hello\nExcalidraw`);
-  });
-
-  it("should return the text as is if max width is invalid", () => {
-    const text = "Hello Excalidraw";
-    expect(wrapText(text, font, NaN)).toEqual(text);
-    expect(wrapText(text, font, -1)).toEqual(text);
-    expect(wrapText(text, font, Infinity)).toEqual(text);
-  });
-
-  it("should show the text correctly when max width reached", () => {
-    const text = "Hello😀";
-    const maxWidth = 10;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("H\ne\nl\nl\no\n😀");
-  });
-
-  it("should not wrap number when wrapping line", () => {
-    const text = "don't wrap this number 99,100.99";
-    const maxWidth = 300;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("don't wrap this number\n99,100.99");
-  });
-
-  it("should trim all trailing whitespaces", () => {
-    const text = "Hello     ";
-    const maxWidth = 50;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello");
-  });
-
-  it("should trim all but one trailing whitespaces", () => {
-    const text = "Hello     ";
-    const maxWidth = 60;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello ");
-  });
-
-  it("should keep preceding whitespaces and trim all trailing whitespaces", () => {
-    const text = "  Hello  World";
-    const maxWidth = 90;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("  Hello\nWorld");
-  });
-
-  it("should keep some preceding whitespaces, trim trailing whitespaces, but kep those that fit in the trailing line", () => {
-    const text = "   Hello  World            ";
-    const maxWidth = 90;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("   Hello\nWorld    ");
-  });
-
-  it("should trim keep those whitespace that fit in the trailing line", () => {
-    const text = "Hello   Wo rl  d                     ";
-    const maxWidth = 100;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("Hello   Wo\nrl  d     ");
-  });
-
-  it("should support multiple (multi-codepoint) emojis", () => {
-    const text = "😀🗺🔥👩🏽‍🦰👨‍👩‍👧‍👦🇨🇿";
-    const maxWidth = 1;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe("😀\n🗺\n🔥\n👩🏽‍🦰\n👨‍👩‍👧‍👦\n🇨🇿");
-  });
-
-  it("should wrap the text correctly when text contains hyphen", () => {
-    let text =
-      "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-    const res = wrapText(text, font, 110);
-    expect(res).toBe(
-      `Wikipedia\nis hosted\nby\nWikimedia-\nFoundation,\na non-\nprofit\norganizatio\nn that also\nhosts a\nrange-of\nother\nprojects`,
-    );
-
-    text = "Hello thereusing-now";
-    expect(wrapText(text, font, 100)).toEqual("Hello\nthereusing\n-now");
-  });
-
-  it("should support wrapping nested lists", () => {
-    const text = `\tA) one tab\t\t- two tabs        - 8 spaces`;
-
-    const maxWidth = 100;
-    const res = wrapText(text, font, maxWidth);
-    expect(res).toBe(`\tA) one\ntab\t\t- two\ntabs\n- 8 spaces`);
-
-    const maxWidth2 = 50;
-    const res2 = wrapText(text, font, maxWidth2);
-    expect(res2).toBe(`\tA)\none\ntab\n- two\ntabs\n- 8\nspace\ns`);
-  });
-
-  describe("When text is CJK", () => {
-    it("should break each CJK character when width is very small", () => {
-      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
-      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
-      const maxWidth = 10;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(
-        "안\n녕\n하\n세\n요\nこ\nん\nに\nち\nは\n世\n界\nｺ\nﾝ\nﾆ\nﾁ\nハ\n你\n好",
-      );
-    });
-
-    it("should break CJK text into longer segments when width is larger", () => {
-      // "안녕하세요" (Hangul) + "こんにちは世界" (Hiragana, Kanji) + "ｺﾝﾆﾁハ" (Katakana) + "你好" (Han) = "Hello Hello World Hello Hi"
-      const text = "안녕하세요こんにちは世界ｺﾝﾆﾁハ你好";
-      const maxWidth = 30;
-      const res = wrapText(text, font, maxWidth);
-
-      // measureText is mocked, so it's not precisely what would happen in prod
-      expect(res).toBe("안녕하\n세요こ\nんにち\nは世界\nｺﾝﾆ\nﾁハ你\n好");
-    });
-
-    it("should handle a combination of CJK, latin, emojis and whitespaces", () => {
-      const text = `a醫 醫      bb  你好  world-i-😀🗺🔥`;
-
-      const maxWidth = 150;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(`a醫 醫      bb  你\n好  world-i-😀🗺\n🔥`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`a醫 醫\nbb  你\n好\nworld\n-i-😀\n🗺🔥`);
-
-      const maxWidth3 = 30;
-      const res3 = wrapText(text, font, maxWidth3);
-      expect(res3).toBe(`a醫\n醫\nbb\n你好\nwor\nld-\ni-\n😀\n🗺\n🔥`);
-    });
-
-    it("should break before and after a regular CJK character", () => {
-      const text = "HelloたWorld";
-      const maxWidth1 = 50;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe("Hello\nた\nWorld");
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe("Helloた\nWorld");
-    });
-
-    it("should break before and after certain CJK symbols", () => {
-      const text = "こんにちは〃世界";
-      const maxWidth1 = 50;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe("こんにちは\n〃世界");
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe("こんにちは〃\n世界");
-    });
-
-    it("should break after, not before for certain CJK pairs", () => {
-      const text = "Hello た。";
-      const maxWidth = 70;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hello\nた。");
-    });
-
-    it("should break before, not after for certain CJK pairs", () => {
-      const text = "Hello「たWorld」";
-      const maxWidth = 60;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hello\n「た\nWorld」");
-    });
-
-    it("should break after, not before for certain CJK character pairs", () => {
-      const text = "「Helloた」World";
-      const maxWidth = 70;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("「Hello\nた」World");
-    });
-
-    it("should break Chinese sentences", () => {
-      const text = `中国你好！这是一个测试。
-我们来看看：人民币¥1234「很贵」
-（括号）、逗号，句号。空格 换行　全角符号…—`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`中国你好！这是一\n个测试。
-我们来看看：人民\n币¥1234「很\n贵」
-（括号）、逗号，\n句号。空格 换行\n全角符号…—`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`中国你好！\n这是一个测\n试。
-我们来看\n看：人民币\n¥1234\n「很贵」
-（括号）、\n逗号，句\n号。空格\n换行　全角\n符号…—`);
-    });
-
-    it("should break Japanese sentences", () => {
-      const text = `日本こんにちは！これはテストです。
-  見てみましょう：円￥1234「高い」
-  （括弧）、読点、句点。
-  空白 改行　全角記号…ー`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`日本こんにちは！\nこれはテストで\nす。
-  見てみましょ\nう：円￥1234\n「高い」
-  （括弧）、読\n点、句点。
-  空白 改行\n全角記号…ー`);
-
-      const maxWidth2 = 50;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`日本こんに\nちは！これ\nはテストで\nす。
-  見てみ\nましょう：\n円\n￥1234\n「高い」
-  （括\n弧）、読\n点、句点。
-  空白\n改行　全角\n記号…ー`);
-    });
-
-    it("should break Korean sentences", () => {
-      const text = `한국 안녕하세요! 이것은 테스트입니다.
-우리 보자: 원화₩1234「비싸다」
-(괄호), 쉼표, 마침표.
-공백 줄바꿈　전각기호…—`;
-
-      const maxWidth1 = 80;
-      const res1 = wrapText(text, font, maxWidth1);
-      expect(res1).toBe(`한국 안녕하세\n요! 이것은 테\n스트입니다.
-우리 보자: 원\n화₩1234「비\n싸다」
-(괄호), 쉼\n표, 마침표.
-공백 줄바꿈　전\n각기호…—`);
-
-      const maxWidth2 = 60;
-      const res2 = wrapText(text, font, maxWidth2);
-      expect(res2).toBe(`한국 안녕하\n세요! 이것\n은 테스트입\n니다.
-우리 보자:\n원화\n₩1234\n「비싸다」
-(괄호),\n쉼표, 마침\n표.
-공백 줄바꿈\n전각기호…—`);
-    });
-  });
-
-  describe("When text contains leading whitespaces", () => {
-    const text = "  \t   Hello world";
-
-    it("should preserve leading whitespaces", () => {
-      const maxWidth = 120;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("  \t   Hello\nworld");
-    });
-
-    it("should break and collapse leading whitespaces when line breaks", () => {
-      const maxWidth = 60;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("\nHello\nworld");
-    });
-
-    it("should break and collapse leading whitespaces whe words break", () => {
-      const maxWidth = 30;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("\nHel\nlo\nwor\nld");
-    });
-  });
-
-  describe("When text contains trailing whitespaces", () => {
-    it("shouldn't add new lines for trailing spaces", () => {
-      const text = "Hello whats up     ";
-      const maxWidth = 190;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe(text);
-    });
-
-    it("should ignore trailing whitespaces when line breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 400;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrosesquippedaliophobia\n??????");
-    });
-
-    it("should not ignore trailing whitespaces when word breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 300;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrosesquippedalio\nphobia        ??????");
-    });
-
-    it("should ignore trailing whitespaces when word breaks and line breaks", () => {
-      const text = "Hippopotomonstrosesquippedaliophobia        ??????";
-      const maxWidth = 180;
-      const res = wrapText(text, font, maxWidth);
-      expect(res).toBe("Hippopotomonstrose\nsquippedaliophobia\n??????");
-    });
-  });
-
-  describe("When text doesn't contain new lines", () => {
-    const text = "Hello whats up";
-
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 70,
-        res: `Hello\nwhats\nup`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 15,
-        res: `H\ne\nl\nl\no\nw\nh\na\nt\ns\nu\np`,
-      },
-      {
-        desc: "break words as per the width",
-
-        width: 130,
-        res: `Hello whats\nup`,
-      },
-      {
-        desc: "fit the container",
-
-        width: 240,
-        res: "Hello whats up",
-      },
-      {
-        desc: "push the word if its equal to max width",
-        width: 50,
-        res: `Hello\nwhats\nup`,
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("When text contain new lines", () => {
-    const text = `Hello\n  whats up`;
-    [
-      {
-        desc: "break all words when width of each word is less than container width",
-        width: 70,
-        res: `Hello\n  whats\nup`,
-      },
-      {
-        desc: "break all characters when width of each character is less than container width",
-        width: 15,
-        res: `H\ne\nl\nl\no\n\nw\nh\na\nt\ns\nu\np`,
-      },
-      {
-        desc: "break words as per the width",
-        width: 140,
-        res: `Hello\n  whats up`,
-      },
-    ].forEach((data) => {
-      it(`should respect new lines and ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("When text is long", () => {
-    const text = `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg break it now`;
-    [
-      {
-        desc: "fit characters of long string as per container width",
-        width: 160,
-        res: `hellolongtextthi\nsiswhatsupwithyo\nuIamtypingggggan\ndtypinggg break\nit now`,
-      },
-      {
-        desc: "fit characters of long string as per container width and break words as per the width",
-
-        width: 120,
-        res: `hellolongtex\ntthisiswhats\nupwithyouIam\ntypingggggan\ndtypinggg\nbreak it now`,
-      },
-      {
-        desc: "fit the long text when container width is greater than text length and move the rest to next line",
-
-        width: 590,
-        res: `hellolongtextthisiswhatsupwithyouIamtypingggggandtypinggg\nbreak it now`,
-      },
-    ].forEach((data) => {
-      it(`should ${data.desc}`, () => {
-        const res = wrapText(text, font, data.width);
-        expect(res).toEqual(data.res);
-      });
-    });
-  });
-
-  describe("Test parseTokens", () => {
-    it("should tokenize latin", () => {
-      let text = "Excalidraw is a virtual collaborative whiteboard";
-
-      expect(parseTokens(text)).toEqual([
-        "Excalidraw",
-        " ",
-        "is",
-        " ",
-        "a",
-        " ",
-        "virtual",
-        " ",
-        "collaborative",
-        " ",
-        "whiteboard",
-      ]);
-
-      text =
-        "Wikipedia is hosted by Wikimedia- Foundation, a non-profit organization that also hosts a range-of other projects";
-      expect(parseTokens(text)).toEqual([
-        "Wikipedia",
-        " ",
-        "is",
-        " ",
-        "hosted",
-        " ",
-        "by",
-        " ",
-        "Wikimedia-",
-        " ",
-        "Foundation,",
-        " ",
-        "a",
-        " ",
-        "non-",
-        "profit",
-        " ",
-        "organization",
-        " ",
-        "that",
-        " ",
-        "also",
-        " ",
-        "hosts",
-        " ",
-        "a",
-        " ",
-        "range-",
-        "of",
-        " ",
-        "other",
-        " ",
-        "projects",
-      ]);
-    });
-
-    it("should not tokenize number", () => {
-      const text = "99,100.99";
-      const tokens = parseTokens(text);
-      expect(tokens).toEqual(["99,100.99"]);
-    });
-
-    it("should tokenize joined emojis", () => {
-      const text = `😬🌍🗺🔥☂️👩🏽‍🦰👨‍👩‍👧‍👦👩🏾‍🔬🏳️‍🌈🧔‍♀️🧑‍🤝‍🧑🙅🏽‍♂️✅0️⃣🇨🇿🦅`;
-      const tokens = parseTokens(text);
-
-      expect(tokens).toEqual([
-        "😬",
-        "🌍",
-        "🗺",
-        "🔥",
-        "☂️",
-        "👩🏽‍🦰",
-        "👨‍👩‍👧‍👦",
-        "👩🏾‍🔬",
-        "🏳️‍🌈",
-        "🧔‍♀️",
-        "🧑‍🤝‍🧑",
-        "🙅🏽‍♂️",
-        "✅",
-        "0️⃣",
-        "🇨🇿",
-        "🦅",
-      ]);
-    });
-
-    it("should tokenize emojis mixed with mixed text", () => {
-      const text = `😬a🌍b🗺c🔥d☂️《👩🏽‍🦰》👨‍👩‍👧‍👦德👩🏾‍🔬こ🏳️‍🌈안🧔‍♀️g🧑‍🤝‍🧑h🙅🏽‍♂️e✅f0️⃣g🇨🇿10🦅#hash`;
-      const tokens = parseTokens(text);
-
-      expect(tokens).toEqual([
-        "😬",
-        "a",
-        "🌍",
-        "b",
-        "🗺",
-        "c",
-        "🔥",
-        "d",
-        "☂️",
-        "《",
-        "👩🏽‍🦰",
-        "》",
-        "👨‍👩‍👧‍👦",
-        "德",
-        "👩🏾‍🔬",
-        "こ",
-        "🏳️‍🌈",
-        "안",
-        "🧔‍♀️",
-        "g",
-        "🧑‍🤝‍🧑",
-        "h",
-        "🙅🏽‍♂️",
-        "e",
-        "✅",
-        "f0️⃣g", // bummer, but ok, as we traded kecaps not breaking (less common) for hash and numbers not breaking (more common)
-        "🇨🇿",
-        "10", // nice! do not break the number, as it's by default matched by \p{Emoji}
-        "🦅",
-        "#hash", // nice! do not break the hash, as it's by default matched by \p{Emoji}
-      ]);
-    });
-
-    it("should tokenize decomposed chars into their composed variants", () => {
-      // each input character is in a decomposed form
-      const text = "čでäぴέ다й한";
-      expect(text.normalize("NFC").length).toEqual(8);
-      expect(text).toEqual(text.normalize("NFD"));
-
-      const tokens = parseTokens(text);
-      expect(tokens.length).toEqual(8);
-      expect(tokens).toEqual(["č", "で", "ä", "ぴ", "έ", "다", "й", "한"]);
-    });
-
-    it("should tokenize artificial CJK", () => {
-      const text = `《道德經》醫-醫こんにちは世界！안녕하세요세계；요』,다.다...원/달(((다)))[[1]]〚({((한))>)〛(「た」)た…[Hello] \t　World？ニューヨーク・￥3700.55す。090-1234-5678￥1,000〜＄5,000「素晴らしい！」〔重要〕＃１：Taro君30％は、（たなばた）〰￥110±￥570で20℃〜9:30〜10:00【一番】`;
-      // [
-      //   '《道',      '德',        '經》',           '醫-',
-      //   '醫',        'こ',        'ん',             'に',
-      //   'ち',        'は',        '世',             '界！',
-      //   '안',        '녕',        '하',             '세',
-      //   '요',        '세',        '계；',           '요』,',
-      //   '다.',       '다...',     '원/',            '달',
-      //   '(((다)))',  '[[1]]',     '〚({((한))>)〛', '(「た」)',
-      //   'た…',       '[Hello]',   ' ',              '\t',
-      //   '　',        'World？',   'ニ',             'ュ',
-      //   'ー',        'ヨ',        'ー',             'ク・',
-      //   '￥3700.55', 'す。',      '090-',           '1234-',
-      //   '5678',      '￥1,000〜', '＄5,000',        '「素',
-      //   '晴',        'ら',        'し',             'い！」',
-      //   '〔重',      '要〕',      '＃',             '１：',
-      //   'Taro',      '君',        '30％',           'は、',
-      //   '（た',      'な',        'ば',             'た）',
-      //   '〰',        '￥110±',    '￥570',          'で',
-      //   '20℃〜',     '9:30〜',    '10:00',          '【一',
-      //   '番】'
-      // ]
-      const tokens = parseTokens(text);
-
-      // Latin
-      expect(tokens).toContain("[[1]]");
-      expect(tokens).toContain("[Hello]");
-      expect(tokens).toContain("World？");
-      expect(tokens).toContain("Taro");
-
-      // Chinese
-      expect(tokens).toContain("《道");
-      expect(tokens).toContain("德");
-      expect(tokens).toContain("經》");
-      expect(tokens).toContain("醫-");
-      expect(tokens).toContain("醫");
-
-      // Japanese
-      expect(tokens).toContain("こ");
-      expect(tokens).toContain("ん");
-      expect(tokens).toContain("に");
-      expect(tokens).toContain("ち");
-      expect(tokens).toContain("は");
-      expect(tokens).toContain("世");
-      expect(tokens).toContain("ク・");
-      expect(tokens).toContain("界！");
-      expect(tokens).toContain("た…");
-      expect(tokens).toContain("す。");
-      expect(tokens).toContain("ュ");
-      expect(tokens).toContain("「素");
-      expect(tokens).toContain("晴");
-      expect(tokens).toContain("ら");
-      expect(tokens).toContain("し");
-      expect(tokens).toContain("い！」");
-      expect(tokens).toContain("君");
-      expect(tokens).toContain("は、");
-      expect(tokens).toContain("（た");
-      expect(tokens).toContain("な");
-      expect(tokens).toContain("ば");
-      expect(tokens).toContain("た）");
-      expect(tokens).toContain("で");
-      expect(tokens).toContain("【一");
-      expect(tokens).toContain("番】");
-
-      // Check for Korean
-      expect(tokens).toContain("안");
-      expect(tokens).toContain("녕");
-      expect(tokens).toContain("하");
-      expect(tokens).toContain("세");
-      expect(tokens).toContain("요");
-      expect(tokens).toContain("세");
-      expect(tokens).toContain("계；");
-      expect(tokens).toContain("요』,");
-      expect(tokens).toContain("다.");
-      expect(tokens).toContain("다...");
-      expect(tokens).toContain("원/");
-      expect(tokens).toContain("달");
-      expect(tokens).toContain("(((다)))");
-      expect(tokens).toContain("〚({((한))>)〛");
-      expect(tokens).toContain("(「た」)");
-
-      // Numbers and units
-      expect(tokens).toContain("￥3700.55");
-      expect(tokens).toContain("090-");
-      expect(tokens).toContain("1234-");
-      expect(tokens).toContain("5678");
-      expect(tokens).toContain("￥1,000〜");
-      expect(tokens).toContain("＄5,000");
-      expect(tokens).toContain("１：");
-      expect(tokens).toContain("30％");
-      expect(tokens).toContain("￥110±");
-      expect(tokens).toContain("20℃〜");
-      expect(tokens).toContain("9:30〜");
-      expect(tokens).toContain("10:00");
-
-      // Punctuation and symbols
-      expect(tokens).toContain(" ");
-      expect(tokens).toContain("\t");
-      expect(tokens).toContain("　");
-      expect(tokens).toContain("ニ");
-      expect(tokens).toContain("ー");
-      expect(tokens).toContain("ヨ");
-      expect(tokens).toContain("〰");
-      expect(tokens).toContain("＃");
-    });
-  });
-});

packages/excalidraw/element/textWrapping.ts

@@ -1,568 +0,0 @@
-import { ENV } from "../constants";
-import { charWidth, getLineWidth } from "./textElement";
-import type { FontString } from "./types";
-
-let cachedCjkRegex: RegExp | undefined;
-let cachedLineBreakRegex: RegExp | undefined;
-let cachedEmojiRegex: RegExp | undefined;
-
-/**
- * Test if a given text contains any CJK characters (including symbols, punctuation, etc,).
- */
-export const containsCJK = (text: string) => {
-  if (!cachedCjkRegex) {
-    cachedCjkRegex = Regex.class(...Object.values(CJK));
-  }
-
-  return cachedCjkRegex.test(text);
-};
-
-const getLineBreakRegex = () => {
-  if (!cachedLineBreakRegex) {
-    try {
-      cachedLineBreakRegex = getLineBreakRegexAdvanced();
-    } catch {
-      cachedLineBreakRegex = getLineBreakRegexSimple();
-    }
-  }
-
-  return cachedLineBreakRegex;
-};
-
-const getEmojiRegex = () => {
-  if (!cachedEmojiRegex) {
-    cachedEmojiRegex = getEmojiRegexUnicode();
-  }
-
-  return cachedEmojiRegex;
-};
-
-/**
- * Common symbols used across different languages.
- */
-const COMMON = {
-  /**
-   * Natural breaking points for any grammars.
-   *
-   * Hello world
-   *      ↑ BREAK ALWAYS " " → ["Hello", " ", "world"]
-   * Hello-world
-   *       ↑ BREAK AFTER "-" → ["Hello-", "world"]
-   */
-  WHITESPACE: /\s/u,
-  HYPHEN: /-/u,
-  /**
-   * Generally do not break, unless closed symbol is followed by an opening symbol.
-   *
-   * Also, western punctation is often used in modern Korean and expects to be treated
-   * similarly to the CJK opening and closing symbols.
-   *
-   * Hello(한글)→ ["Hello", "(한", "글)"]
-   *      ↑ BREAK BEFORE "("
-   *          ↑ BREAK AFTER ")"
-   */
-  OPENING: /<\(\[\{/u,
-  CLOSING: />\)\]\}.,:;!\?…\//u,
-};
-
-/**
- * Characters and symbols used in Chinese, Japanese and Korean.
- */
-const CJK = {
-  /**
-   * Every CJK breaks before and after, unless it's paired with an opening or closing symbol.
-   *
-   * Does not include every possible char used in CJK texts, such as currency, parentheses or punctuation.
-   */
-  CHAR: /\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}｀＇＾〃〰〆＃＆＊＋－ー／＼＝｜￤〒￢￣/u,
-  /**
-   * Opening and closing CJK punctuation breaks before and after all such characters (in case of many),
-   * and creates pairs with neighboring characters.
-   *
-   * Hello た。→ ["Hello", "た。"]
-   *        ↑ DON'T BREAK "た。"
-   * * Hello「た」 World → ["Hello", "「た」", "World"]
-   *       ↑ DON'T BREAK "「た"
-   *        ↑ DON'T BREAK "た"
-   *      ↑ BREAK BEFORE "「"
-   *         ↑ BREAK AFTER "」"
-   */
-  // eslint-disable-next-line prettier/prettier
-  OPENING:/（［｛〈《｟｢「『【〖〔〘〚＜〝/u,
-  CLOSING: /）］｝〉》｠｣」』】〗〕〙〛＞。．，、〟‥？！：；・〜〞/u,
-  /**
-   * Currency symbols break before, not after
-   *
-   * Price￥100 → ["Price", "￥100"]
-   *      ↑ BREAK BEFORE "￥"
-   */
-  CURRENCY: /￥￦￡￠＄/u,
-};
-
-const EMOJI = {
-  FLAG: /\p{RI}\p{RI}/u,
-  JOINER:
-    /(?:\p{Emoji_Modifier}|\uFE0F\u20E3?|[\u{E0020}-\u{E007E}]+\u{E007F})?/u,
-  ZWJ: /\u200D/u,
-  ANY: /[\p{Emoji}]/u,
-  MOST: /[\p{Extended_Pictographic}\p{Emoji_Presentation}]/u,
-};
-
-/**
- * Simple fallback for browsers (mainly Safari < 16.4) that don't support "Lookbehind assertion".
- *
- * Browser support as of 10/2024:
- * - 91% Lookbehind assertion https://caniuse.com/mdn-javascript_regular_expressions_lookbehind_assertion
- * - 94% Unicode character class escape https://caniuse.com/mdn-javascript_regular_expressions_unicode_character_class_escape
- *
- * Does not include advanced CJK breaking rules, but covers most of the core cases, especially for latin.
- */
-const getLineBreakRegexSimple = () =>
-  Regex.or(
-    getEmojiRegex(),
-    Break.On(COMMON.HYPHEN, COMMON.WHITESPACE, CJK.CHAR),
-  );
-
-/**
- * Specifies the line breaking rules based for alphabetic-based languages,
- * Chinese, Japanese, Korean and Emojis.
- *
- * "Hello-world" → ["Hello-", "world"]
- * "Hello 「世界。」🌎🗺" → ["Hello", " ", "「世", "界。」", "🌎", "🗺"]
- */
-const getLineBreakRegexAdvanced = () =>
-  Regex.or(
-    // Unicode-defined regex for (multi-codepoint) Emojis
-    getEmojiRegex(),
-    // Rules for whitespace and hyphen
-    Break.Before(COMMON.WHITESPACE).Build(),
-    Break.After(COMMON.WHITESPACE, COMMON.HYPHEN).Build(),
-    // Rules for CJK (chars, symbols, currency)
-    Break.Before(CJK.CHAR, CJK.CURRENCY)
-      .NotPrecededBy(COMMON.OPENING, CJK.OPENING)
-      .Build(),
-    Break.After(CJK.CHAR)
-      .NotFollowedBy(COMMON.HYPHEN, COMMON.CLOSING, CJK.CLOSING)
-      .Build(),
-    // Rules for opening and closing punctuation
-    Break.BeforeMany(CJK.OPENING).NotPrecededBy(COMMON.OPENING).Build(),
-    Break.AfterMany(CJK.CLOSING).NotFollowedBy(COMMON.CLOSING).Build(),
-    Break.AfterMany(COMMON.CLOSING).FollowedBy(COMMON.OPENING).Build(),
-  );
-
-/**
- * Matches various emoji types.
- *
- * 1. basic emojis (😀, 🌍)
- * 2. flags (🇨🇿)
- * 3. multi-codepoint emojis:
- *    - skin tones (👍🏽)
- *    - variation selectors (☂️)
- *    - keycaps (1️⃣)
- *    - tag sequences (🏴󠁧󠁢󠁥󠁮󠁧󠁿)
- *    - emoji sequences (👨‍👩‍👧‍👦, 👩‍🚀, 🏳️‍🌈)
- *
- * Unicode points:
- * - \uFE0F: presentation selector
- * - \u20E3: enclosing keycap
- * - \u200D: zero width joiner
- * - \u{E0020}-\u{E007E}: tags
- * - \u{E007F}: cancel tag
- *
- * @see https://unicode.org/reports/tr51/#EBNF_and_Regex, with changes:
- * - replaced \p{Emoji} with [\p{Extended_Pictographic}\p{Emoji_Presentation}], see more in `should tokenize emojis mixed with mixed text` test
- * - replaced \p{Emod} with \p{Emoji_Modifier} as some engines do not understand the abbreviation (i.e. https://devina.io/redos-checker)
- */
-const getEmojiRegexUnicode = () =>
-  Regex.group(
-    Regex.or(
-      EMOJI.FLAG,
-      Regex.and(
-        EMOJI.MOST,
-        EMOJI.JOINER,
-        Regex.build(
-          `(?:${EMOJI.ZWJ.source}(?:${EMOJI.FLAG.source}|${EMOJI.ANY.source}${EMOJI.JOINER.source}))*`,
-        ),
-      ),
-    ),
-  );
-
-/**
- * Regex utilities for unicode character classes.
- */
-const Regex = {
-  /**
-   * Builds a regex from a string.
-   */
-  build: (regex: string): RegExp => new RegExp(regex, "u"),
-  /**
-   * Joins regexes into a single string.
-   */
-  join: (...regexes: RegExp[]): string => regexes.map((x) => x.source).join(""),
-  /**
-   * Joins regexes into a single regex as with "and" operator.
-   */
-  and: (...regexes: RegExp[]): RegExp => Regex.build(Regex.join(...regexes)),
-  /**
-   * Joins regexes into a single regex with "or" operator.
-   */
-  or: (...regexes: RegExp[]): RegExp =>
-    Regex.build(regexes.map((x) => x.source).join("|")),
-  /**
-   * Puts regexes into a matching group.
-   */
-  group: (...regexes: RegExp[]): RegExp =>
-    Regex.build(`(${Regex.join(...regexes)})`),
-  /**
-   * Puts regexes into a character class.
-   */
-  class: (...regexes: RegExp[]): RegExp =>
-    Regex.build(`[${Regex.join(...regexes)}]`),
-};
-
-/**
- * Human-readable lookahead and lookbehind utilities for defining line break
- * opportunities between pairs of character classes.
- */
-const Break = {
-  /**
-   * Break on the given class of characters.
-   */
-  On: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    return Regex.build(`([${joined}])`);
-  },
-  /**
-   * Break before the given class of characters.
-   */
-  Before: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "FollowedBy"
-    >;
-  },
-  /**
-   * Break after the given class of characters.
-   */
-  After: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "PreceededBy"
-    >;
-  },
-  /**
-   * Break before one or multiple characters of the same class.
-   */
-  BeforeMany: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<![${joined}])(?=[${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "FollowedBy"
-    >;
-  },
-  /**
-   * Break after one or multiple character from the same class.
-   */
-  AfterMany: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<=[${joined}])(?![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "PreceededBy"
-    >;
-  },
-  /**
-   * Do not break before the given class of characters.
-   */
-  NotBefore: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "NotFollowedBy"
-    >;
-  },
-  /**
-   * Do not break after the given class of characters.
-   */
-  NotAfter: (...regexes: RegExp[]) => {
-    const joined = Regex.join(...regexes);
-    const builder = () => Regex.build(`(?<![${joined}])`);
-    return Break.Chain(builder) as Omit<
-      ReturnType<typeof Break.Chain>,
-      "NotPrecededBy"
-    >;
-  },
-  Chain: (rootBuilder: () => RegExp) => ({
-    /**
-     * Build the root regex.
-     */
-    Build: rootBuilder,
-    /**
-     * Specify additional class of characters that should precede the root regex.
-     */
-    PreceededBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const preceeded = Break.After(...regexes).Build();
-      const builder = () => Regex.and(preceeded, root);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "PreceededBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should follow the root regex.
-     */
-    FollowedBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const followed = Break.Before(...regexes).Build();
-      const builder = () => Regex.and(root, followed);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "FollowedBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should not precede the root regex.
-     */
-    NotPrecededBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const notPreceeded = Break.NotAfter(...regexes).Build();
-      const builder = () => Regex.and(notPreceeded, root);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "NotPrecededBy"
-      >;
-    },
-    /**
-     * Specify additional class of characters that should not follow the root regex.
-     */
-    NotFollowedBy: (...regexes: RegExp[]) => {
-      const root = rootBuilder();
-      const notFollowed = Break.NotBefore(...regexes).Build();
-      const builder = () => Regex.and(root, notFollowed);
-      return Break.Chain(builder) as Omit<
-        ReturnType<typeof Break.Chain>,
-        "NotFollowedBy"
-      >;
-    },
-  }),
-};
-
-/**
- * Breaks the line into the tokens based on the found line break opporutnities.
- */
-export const parseTokens = (line: string) => {
-  const breakLineRegex = getLineBreakRegex();
-
-  // normalizing to single-codepoint composed chars due to canonical equivalence
-  // of multi-codepoint versions for chars like č, で (~ so that we don't break a line in between c and ˇ)
-  // filtering due to multi-codepoint chars like 👨‍👩‍👧‍👦, 👩🏽‍🦰
-  return line.normalize("NFC").split(breakLineRegex).filter(Boolean);
-};
-
-/**
- * Wraps the original text into the lines based on the given width.
- */
-export const wrapText = (
-  text: string,
-  font: FontString,
-  maxWidth: number,
-): string => {
-  // 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
-  if (!Number.isFinite(maxWidth) || maxWidth < 0) {
-    return text;
-  }
-
-  const lines: Array<string> = [];
-  const originalLines = text.split("\n");
-
-  for (const originalLine of originalLines) {
-    const currentLineWidth = getLineWidth(originalLine, font, true);
-
-    if (currentLineWidth <= maxWidth) {
-      lines.push(originalLine);
-      continue;
-    }
-
-    const wrappedLine = wrapLine(originalLine, font, maxWidth);
-    lines.push(...wrappedLine);
-  }
-
-  return lines.join("\n");
-};
-
-/**
- * Wraps the original line into the lines based on the given width.
- */
-const wrapLine = (
-  line: string,
-  font: FontString,
-  maxWidth: number,
-): string[] => {
-  const lines: Array<string> = [];
-  const tokens = parseTokens(line);
-  const tokenIterator = tokens[Symbol.iterator]();
-
-  let currentLine = "";
-  let currentLineWidth = 0;
-
-  let iterator = tokenIterator.next();
-
-  while (!iterator.done) {
-    const token = iterator.value;
-    const testLine = currentLine + token;
-
-    // cache single codepoint whitespace, CJK or emoji width calc. as kerning should not apply here
-    const testLineWidth = isSingleCharacter(token)
-      ? currentLineWidth + charWidth.calculate(token, font)
-      : getLineWidth(testLine, font, true);
-
-    // build up the current line, skipping length check for possibly trailing whitespaces
-    if (/\s/.test(token) || testLineWidth <= maxWidth) {
-      currentLine = testLine;
-      currentLineWidth = testLineWidth;
-      iterator = tokenIterator.next();
-      continue;
-    }
-
-    // current line is empty => just the token (word) is longer than `maxWidth` and needs to be wrapped
-    if (!currentLine) {
-      const wrappedWord = wrapWord(token, font, maxWidth);
-      const trailingLine = wrappedWord[wrappedWord.length - 1] ?? "";
-      const precedingLines = wrappedWord.slice(0, -1);
-
-      lines.push(...precedingLines);
-
-      // trailing line of the wrapped word might still be joined with next token/s
-      currentLine = trailingLine;
-      currentLineWidth = getLineWidth(trailingLine, font, true);
-      iterator = tokenIterator.next();
-    } else {
-      // push & reset, but don't iterate on the next token, as we didn't use it yet!
-      lines.push(currentLine.trimEnd());
-
-      // purposefully not iterating and not setting `currentLine` to `token`, so that we could use a simple !currentLine check above
-      currentLine = "";
-      currentLineWidth = 0;
-    }
-  }
-
-  // iterator done, push the trailing line if exists
-  if (currentLine) {
-    const trailingLine = trimLine(currentLine, font, maxWidth);
-    lines.push(trailingLine);
-  }
-
-  return lines;
-};
-
-/**
- * Wraps the word into the lines based on the given width.
- */
-const wrapWord = (
-  word: string,
-  font: FontString,
-  maxWidth: number,
-): Array<string> => {
-  // multi-codepoint emojis are already broken apart and shouldn't be broken further
-  if (getEmojiRegex().test(word)) {
-    return [word];
-  }
-
-  satisfiesWordInvariant(word);
-
-  const lines: Array<string> = [];
-  const chars = Array.from(word);
-
-  let currentLine = "";
-  let currentLineWidth = 0;
-
-  for (const char of chars) {
-    const _charWidth = charWidth.calculate(char, font);
-    const testLineWidth = currentLineWidth + _charWidth;
-
-    if (testLineWidth <= maxWidth) {
-      currentLine = currentLine + char;
-      currentLineWidth = testLineWidth;
-      continue;
-    }
-
-    if (currentLine) {
-      lines.push(currentLine);
-    }
-
-    currentLine = char;
-    currentLineWidth = _charWidth;
-  }
-
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-
-  return lines;
-};
-
-/**
- * Similarly to browsers, does not trim all trailing whitespaces, but only those exceeding the `maxWidth`.
- */
-const trimLine = (line: string, font: FontString, maxWidth: number) => {
-  const shouldTrimWhitespaces = getLineWidth(line, font, true) > maxWidth;
-
-  if (!shouldTrimWhitespaces) {
-    return line;
-  }
-
-  // defensively default to `trimeEnd` in case the regex does not match
-  let [, trimmedLine, whitespaces] = line.match(/^(.+?)(\s+)$/) ?? [
-    line,
-    line.trimEnd(),
-    "",
-  ];
-
-  let trimmedLineWidth = getLineWidth(trimmedLine, font, true);
-
-  for (const whitespace of Array.from(whitespaces)) {
-    const _charWidth = charWidth.calculate(whitespace, font);
-    const testLineWidth = trimmedLineWidth + _charWidth;
-
-    if (testLineWidth > maxWidth) {
-      break;
-    }
-
-    trimmedLine = trimmedLine + whitespace;
-    trimmedLineWidth = testLineWidth;
-  }
-
-  return trimmedLine;
-};
-
-/**
- * Check if the given string is a single character.
- *
- * Handles multi-byte chars (é, 中) and purposefully does not handle multi-codepoint char (👨‍👩‍👧‍👦, 👩🏽‍🦰).
- */
-const isSingleCharacter = (maybeSingleCharacter: string) => {
-  return (
-    maybeSingleCharacter.codePointAt(0) !== undefined &&
-    maybeSingleCharacter.codePointAt(1) === undefined
-  );
-};
-
-/**
- * Invariant for the word wrapping algorithm.
- */
-const satisfiesWordInvariant = (word: string) => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
-    if (/\s/.test(word)) {
-      throw new Error("Word should not contain any whitespaces!");
-    }
-  }
-};

packages/excalidraw/element/textWysiwyg.tsx

@@ -11,7 +11,7 @@ import {
   isBoundToContainer,
   isTextElement,
 } from "./typeChecks";
-import { CLASSES, POINTER_BUTTON } from "../constants";
+import { CLASSES, isSafari, POINTER_BUTTON } from "../constants";
 import type {
   ExcalidrawElement,
   ExcalidrawLinearElement,
@@ -27,13 +27,13 @@ import {
   getTextWidth,
   normalizeText,
   redrawTextBoundingBox,
+  wrapText,
   getBoundTextMaxHeight,
   getBoundTextMaxWidth,
   computeContainerDimensionForBoundText,
   computeBoundTextPosition,
   getBoundTextElement,
 } from "./textElement";
-import { wrapText } from "./textWrapping";
 import {
   actionDecreaseFontSize,
   actionIncreaseFontSize,
@@ -245,6 +245,11 @@ export const textWysiwyg = ({
 
       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 / appState.zoom.value / 2)
+        : 0;
+
       // Make sure text editor height doesn't go beyond viewport
       const editorMaxHeight =
         (appState.height - viewportY) / appState.zoom.value;
@@ -254,7 +259,7 @@ export const textWysiwyg = ({
         lineHeight: updatedTextElement.lineHeight,
         width: `${width}px`,
         height: `${height}px`,
-        left: `${viewportX}px`,
+        left: `${viewportX - padding}px`,
         top: `${viewportY}px`,
         transform: getTransform(
           width,
@@ -264,6 +269,7 @@ export const textWysiwyg = ({
           maxWidth,
           editorMaxHeight,
         ),
+        padding: `0 ${padding}px`,
         textAlign,
         verticalAlign,
         color: updatedTextElement.strokeColor,
@@ -304,7 +310,6 @@ export const textWysiwyg = ({
     minHeight: "1em",
     backfaceVisibility: "hidden",
     margin: 0,
-    padding: 0,
     border: 0,
     outline: 0,
     resize: "none",

packages/excalidraw/errors.ts

@@ -50,7 +50,6 @@ export class WorkerUrlNotDefinedError extends Error {
     this.code = code;
   }
 }
-
 export class WorkerInTheMainChunkError extends Error {
   public code;
   constructor(
@@ -62,14 +61,3 @@ export class WorkerInTheMainChunkError extends Error {
     this.code = code;
   }
 }
-
-/**
- * Use this for generic, handled errors, so you can check against them
- * and rethrow if needed
- */
-export class ExcalidrawError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "ExcalidrawError";
-  }
-}

packages/excalidraw/fonts/Fonts.ts

@@ -3,14 +3,11 @@ import {
   FONT_FAMILY_FALLBACKS,
   CJK_HAND_DRAWN_FALLBACK_FONT,
   WINDOWS_EMOJI_FALLBACK_FONT,
-  isSafari,
-  getFontFamilyFallbacks,
 } from "../constants";
 import { isTextElement } from "../element";
 import { charWidth, getContainerElement } from "../element/textElement";
-import { containsCJK } from "../element/textWrapping";
 import { ShapeCache } from "../scene/ShapeCache";
-import { getFontString, PromisePool, promiseTry } from "../utils";
+import { getFontString } from "../utils";
 import { ExcalidrawFontFace } from "./ExcalidrawFontFace";
 
 import { CascadiaFontFaces } from "./Cascadia";
@@ -76,13 +73,6 @@ export class Fonts {
     this.scene = scene;
   }
 
-  /**
-   * Get all the font families for the given scene.
-   */
-  public getSceneFamilies = () => {
-    return Fonts.getUniqueFamilies(this.scene.getNonDeletedElements());
-  };
-
   /**
    * 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
@@ -91,7 +81,7 @@ export class Fonts {
    * 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[]): void => {
+  public onLoaded = (fontFaces: readonly FontFace[]) => {
     // 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.
@@ -137,40 +127,12 @@ export class Fonts {
 
   /**
    * Load font faces for a given scene and trigger scene 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.
-   *
-   * For Safari we make sure to check against each loaded font face
-   * with the unique characters per family in the scene,
-   * otherwise fonts might remain unloaded.
    */
   public loadSceneFonts = async (): Promise<FontFace[]> => {
     const sceneFamilies = this.getSceneFamilies();
-    const charsPerFamily = isSafari
-      ? Fonts.getCharsPerFamily(this.scene.getNonDeletedElements())
-      : undefined;
-
-    return Fonts.loadFontFaces(sceneFamilies, charsPerFamily);
-  };
-
-  /**
-   * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
-   *
-   * For Safari we make sure to check against each loaded font face,
-   * with the unique characters per family in the elements
-   * otherwise fonts might remain unloaded.
-   */
-  public static loadElementsFonts = async (
-    elements: readonly ExcalidrawElement[],
-  ): Promise<FontFace[]> => {
-    const fontFamilies = Fonts.getUniqueFamilies(elements);
-    const charsPerFamily = isSafari
-      ? Fonts.getCharsPerFamily(elements)
-      : undefined;
-
-    return Fonts.loadFontFaces(fontFamilies, charsPerFamily);
+    const loaded = await Fonts.loadFontFaces(sceneFamilies);
+    this.onLoaded(loaded);
+    return loaded;
   };
 
   /**
@@ -182,48 +144,17 @@ export class Fonts {
   };
 
   /**
-   * Generate CSS @font-face declarations for the given elements.
+   * Load font faces for passed elements - use when the scene is unavailable (i.e. export).
    */
-  public static async generateFontFaceDeclarations(
+  public static loadElementsFonts = async (
     elements: readonly ExcalidrawElement[],
-  ) {
-    const families = Fonts.getUniqueFamilies(elements);
-    const charsPerFamily = Fonts.getCharsPerFamily(elements);
-
-    // for simplicity, assuming we have just one family with the CJK handdrawn fallback
-    const familyWithCJK = families.find((x) =>
-      getFontFamilyFallbacks(x).includes(CJK_HAND_DRAWN_FALLBACK_FONT),
-    );
-
-    if (familyWithCJK) {
-      const characters = Fonts.getCharacters(charsPerFamily, familyWithCJK);
-
-      if (containsCJK(characters)) {
-        const family = FONT_FAMILY_FALLBACKS[CJK_HAND_DRAWN_FALLBACK_FONT];
-
-        // adding the same characters to the CJK handrawn family
-        charsPerFamily[family] = new Set(characters);
-
-        // the order between the families and fallbacks is important, as fallbacks need to be defined first and in the reversed order
-        // so that they get overriden with the later defined font faces, i.e. in case they share some codepoints
-        families.unshift(FONT_FAMILY_FALLBACKS[CJK_HAND_DRAWN_FALLBACK_FONT]);
-      }
-    }
-
-    // don't trigger hundreds of concurrent requests (each performing fetch, creating a worker, etc.),
-    // instead go three requests at a time, in a controlled manner, without completely blocking the main thread
-    // and avoiding potential issues such as rate limits
-    const iterator = Fonts.fontFacesStylesGenerator(families, charsPerFamily);
-    const concurrency = 3;
-    const fontFaces = await new PromisePool(iterator, concurrency).all();
-
-    // dedup just in case (i.e. could be the same font faces with 0 glyphs)
-    return Array.from(new Set(fontFaces));
-  }
+  ): Promise<FontFace[]> => {
+    const fontFamilies = Fonts.getElementsFamilies(elements);
+    return await Fonts.loadFontFaces(fontFamilies);
+  };
 
   private static async loadFontFaces(
     fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>,
-    charsPerFamily?: Record<number, Set<string>>,
   ) {
     // add all registered font faces into the `document.fonts` (if not added already)
     for (const { fontFaces, metadata } of Fonts.registered.values()) {
@@ -239,136 +170,35 @@ export class Fonts {
       }
     }
 
-    // loading 10 font faces at a time, in a controlled manner
-    const iterator = Fonts.fontFacesLoader(fontFamilies, charsPerFamily);
-    const concurrency = 10;
-    const fontFaces = await new PromisePool(iterator, concurrency).all();
-    return fontFaces.flat().filter(Boolean);
-  }
+    const loadedFontFaces = await Promise.all(
+      fontFamilies.map(async (fontFamily) => {
+        const fontString = getFontString({
+          fontFamily,
+          fontSize: 16,
+        });
 
-  private static *fontFacesLoader(
-    fontFamilies: Array<ExcalidrawTextElement["fontFamily"]>,
-    charsPerFamily?: Record<number, Set<string>>,
-  ): Generator<Promise<void | readonly [number, FontFace[]]>> {
-    for (const [index, fontFamily] of fontFamilies.entries()) {
-      const font = 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!
-      // for Safari on init, we rather check with the "text" param, even though it's less efficient, as otherwise fonts might remain unloaded
-      const text =
-        isSafari && charsPerFamily
-          ? Fonts.getCharacters(charsPerFamily, fontFamily)
-          : "";
-
-      if (!window.document.fonts.check(font, text)) {
-        yield promiseTry(async () => {
+        // 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
-            const fontFaces = await window.document.fonts.load(font, text);
-
-            return [index, fontFaces];
+            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 "${font}" from urls "${Fonts.registered
+              `Failed to load font "${fontString}" from urls "${Fonts.registered
                 .get(fontFamily)
                 ?.fontFaces.map((x) => x.urls)}"`,
               e,
             );
           }
-        });
-      }
-    }
-  }
+        }
 
-  private static *fontFacesStylesGenerator(
-    families: Array<number>,
-    charsPerFamily: Record<number, Set<string>>,
-  ): Generator<Promise<void | readonly [number, string]>> {
-    for (const [familyIndex, family] of families.entries()) {
-      const { fontFaces, metadata } = Fonts.registered.get(family) ?? {};
+        return Promise.resolve();
+      }),
+    );
 
-      if (!Array.isArray(fontFaces)) {
-        console.error(
-          `Couldn't find registered fonts for font-family "${family}"`,
-          Fonts.registered,
-        );
-        continue;
-      }
-
-      if (metadata?.local) {
-        // don't inline local fonts
-        continue;
-      }
-
-      for (const [fontFaceIndex, fontFace] of fontFaces.entries()) {
-        yield promiseTry(async () => {
-          try {
-            const characters = Fonts.getCharacters(charsPerFamily, family);
-            const fontFaceCSS = await fontFace.toCSS(characters);
-
-            if (!fontFaceCSS) {
-              return;
-            }
-
-            // giving a buffer of 10K font faces per family
-            const fontFaceOrder = familyIndex * 10_000 + fontFaceIndex;
-            const fontFaceTuple = [fontFaceOrder, fontFaceCSS] as const;
-
-            return fontFaceTuple;
-          } catch (error) {
-            console.error(
-              `Couldn't transform font-face to css for family "${fontFace.fontFace.family}"`,
-              error,
-            );
-          }
-        });
-      }
-    }
-  }
-
-  /**
-   * Register a new font.
-   *
-   * @param family font family
-   * @param metadata font metadata
-   * @param fontFacesDecriptors font faces descriptors
-   */
-  private static register(
-    this:
-      | Fonts
-      | {
-          registered: Map<
-            number,
-            { metadata: FontMetadata; fontFaces: ExcalidrawFontFace[] }
-          >;
-        },
-    family: string,
-    metadata: FontMetadata,
-    ...fontFacesDecriptors: ExcalidrawFontFaceDescriptor[]
-  ) {
-    // TODO: likely we will need to abandon number value in order to support custom fonts
-    const fontFamily =
-      FONT_FAMILY[family as keyof typeof FONT_FAMILY] ??
-      FONT_FAMILY_FALLBACKS[family as keyof typeof FONT_FAMILY_FALLBACKS];
-
-    const registeredFamily = this.registered.get(fontFamily);
-
-    if (!registeredFamily) {
-      this.registered.set(fontFamily, {
-        metadata,
-        fontFaces: fontFacesDecriptors.map(
-          ({ uri, descriptors }) =>
-            new ExcalidrawFontFace(family, uri, descriptors),
-        ),
-      });
-    }
-
-    return this.registered;
+    return loadedFontFaces.flat().filter(Boolean) as FontFace[];
   }
 
   /**
@@ -418,9 +248,57 @@ export class Fonts {
   }
 
   /**
-   * Get all the unique font families for the given elements.
+   * Register a new font.
+   *
+   * @param family font family
+   * @param metadata font metadata
+   * @param fontFacesDecriptors font faces descriptors
    */
-  private static getUniqueFamilies(
+  private static register(
+    this:
+      | Fonts
+      | {
+          registered: Map<
+            number,
+            { metadata: FontMetadata; fontFaces: ExcalidrawFontFace[] }
+          >;
+        },
+    family: string,
+    metadata: FontMetadata,
+    ...fontFacesDecriptors: ExcalidrawFontFaceDescriptor[]
+  ) {
+    // TODO: likely we will need to abandon number value in order to support custom fonts
+    const fontFamily =
+      FONT_FAMILY[family as keyof typeof FONT_FAMILY] ??
+      FONT_FAMILY_FALLBACKS[family as keyof typeof FONT_FAMILY_FALLBACKS];
+
+    const registeredFamily = this.registered.get(fontFamily);
+
+    if (!registeredFamily) {
+      this.registered.set(fontFamily, {
+        metadata,
+        fontFaces: fontFacesDecriptors.map(
+          ({ uri, descriptors }) =>
+            new ExcalidrawFontFace(family, uri, descriptors),
+        ),
+      });
+    }
+
+    return this.registered;
+  }
+
+  /**
+   * Gets all the font families for the given scene.
+   */
+  public getSceneFamilies = () => {
+    return Fonts.getElementsFamilies(this.scene.getNonDeletedElements());
+  };
+
+  private static getAllFamilies() {
+    return Array.from(Fonts.registered.keys());
+  }
+
+  private static getElementsFamilies(
     elements: ReadonlyArray<ExcalidrawElement>,
   ): Array<ExcalidrawTextElement["fontFamily"]> {
     return Array.from(
@@ -432,51 +310,6 @@ export class Fonts {
       }, new Set<number>()),
     );
   }
-
-  /**
-   * Get all the unique characters per font family for the given scene.
-   */
-  private static getCharsPerFamily(
-    elements: ReadonlyArray<ExcalidrawElement>,
-  ): Record<number, Set<string>> {
-    const charsPerFamily: Record<number, Set<string>> = {};
-
-    for (const element of elements) {
-      if (!isTextElement(element)) {
-        continue;
-      }
-
-      // gather unique codepoints only when inlining fonts
-      for (const char of element.originalText) {
-        if (!charsPerFamily[element.fontFamily]) {
-          charsPerFamily[element.fontFamily] = new Set();
-        }
-
-        charsPerFamily[element.fontFamily].add(char);
-      }
-    }
-
-    return charsPerFamily;
-  }
-
-  /**
-   * Get characters for a given family.
-   */
-  private static getCharacters(
-    charsPerFamily: Record<number, Set<string>>,
-    family: number,
-  ) {
-    return charsPerFamily[family]
-      ? Array.from(charsPerFamily[family]).join("")
-      : "";
-  }
-
-  /**
-   * Get all registered font families.
-   */
-  private static getAllFamilies() {
-    return Array.from(Fonts.registered.keys());
-  }
 }
 
 /**

packages/excalidraw/hooks/useLibraryItemSvg.ts

@@ -2,8 +2,8 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
+import { exportToSvg } from "../../utils/export";
 import type { LibraryItem } from "../types";
-import { exportToSvg } from "../scene/export";
 
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;
 
@@ -11,14 +11,14 @@ export const libraryItemSvgsCache = atom<SvgCache>(new Map());
 
 const exportLibraryItemToSvg = async (elements: LibraryItem["elements"]) => {
   return await exportToSvg({
-    data: {
-      elements,
-      appState: {
-        exportBackground: false,
-        viewBackgroundColor: COLOR_PALETTE.white,
-      },
-      files: null,
+    elements,
+    appState: {
+      exportBackground: false,
+      viewBackgroundColor: COLOR_PALETTE.white,
     },
+    files: null,
+    renderEmbeddables: false,
+    skipInliningFonts: true,
   });
 };
 

packages/excalidraw/index-node.ts

@@ -1,6 +1,5 @@
 import { exportToCanvas } from "./scene/export";
 import { getDefaultAppState } from "./appState";
-import { COLOR_WHITE } from "./constants";
 
 const { registerFont, createCanvas } = require("canvas");
 
@@ -58,21 +57,22 @@ const elements = [
 registerFont("./public/Virgil.woff2", { family: "Virgil" });
 registerFont("./public/Cascadia.woff2", { family: "Cascadia" });
 
-const canvas = exportToCanvas({
-  data: {
-    elements: elements as any,
-    appState: {
-      ...getDefaultAppState(),
-      width: 0,
-      height: 0,
-    },
-    files: {}, // files
+const canvas = exportToCanvas(
+  elements as any,
+  {
+    ...getDefaultAppState(),
+    offsetTop: 0,
+    offsetLeft: 0,
+    width: 0,
+    height: 0,
   },
-  config: {
-    canvasBackgroundColor: COLOR_WHITE,
-    createCanvas,
+  {}, // files
+  {
+    exportBackground: true,
+    viewBackgroundColor: "#ffffff",
   },
-});
+  createCanvas,
+);
 
 const fs = require("fs");
 const out = fs.createWriteStream("test.png");

packages/excalidraw/index.tsx

@@ -225,6 +225,13 @@ export {
 
 export { reconcileElements } from "./data/reconcile";
 
+export {
+  exportToCanvas,
+  exportToBlob,
+  exportToSvg,
+  exportToClipboard,
+} from "../utils/export";
+
 export { serializeAsJSON, serializeLibraryAsJSON } from "./data/json";
 export {
   loadFromBlob,
@@ -267,13 +274,6 @@ export { WelcomeScreen };
 export { LiveCollaborationTrigger };
 export { Stats } from "./components/Stats";
 
-export {
-  exportToCanvas,
-  exportToBlob,
-  exportToClipboard,
-  exportToSvg,
-} from "./scene/export";
-
 export { DefaultSidebar } from "./components/DefaultSidebar";
 export { TTDDialog } from "./components/TTDDialog/TTDDialog";
 export { TTDDialogTrigger } from "./components/TTDDialog/TTDDialogTrigger";

packages/excalidraw/package.json

@@ -58,10 +58,11 @@
   "dependencies": {
     "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "1.1.2",
+    "@excalidraw/mermaid-to-excalidraw": "1.1.0",
     "@excalidraw/random-username": "1.1.0",
     "@radix-ui/react-popover": "1.0.3",
     "@radix-ui/react-tabs": "1.0.2",
+    "@tldraw/vec": "1.7.1",
     "browser-fs-access": "0.29.1",
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",

packages/excalidraw/renderer/helpers.ts

@@ -1,4 +1,4 @@
-import type { AppState } from "../types";
+import type { StaticCanvasAppState, AppState } from "../types";
 
 import type { StaticCanvasRenderConfig } from "../scene/types";
 
@@ -34,16 +34,15 @@ export const bootstrapCanvas = ({
   normalizedHeight,
   theme,
   isExporting,
-  canvasBackgroundColor,
+  viewBackgroundColor,
 }: {
   canvas: HTMLCanvasElement;
   scale: number;
   normalizedWidth: number;
   normalizedHeight: number;
   theme?: AppState["theme"];
-  // static canvas only
   isExporting?: StaticCanvasRenderConfig["isExporting"];
-  canvasBackgroundColor?: string | null;
+  viewBackgroundColor?: StaticCanvasAppState["viewBackgroundColor"];
 }): CanvasRenderingContext2D => {
   const context = canvas.getContext("2d")!;
 
@@ -55,17 +54,17 @@ export const bootstrapCanvas = ({
   }
 
   // Paint background
-  if (typeof canvasBackgroundColor === "string") {
+  if (typeof viewBackgroundColor === "string") {
     const hasTransparence =
-      canvasBackgroundColor === "transparent" ||
-      canvasBackgroundColor.length === 5 || // #RGBA
-      canvasBackgroundColor.length === 9 || // #RRGGBBA
-      /(hsla|rgba)\(/.test(canvasBackgroundColor);
+      viewBackgroundColor === "transparent" ||
+      viewBackgroundColor.length === 5 || // #RGBA
+      viewBackgroundColor.length === 9 || // #RRGGBBA
+      /(hsla|rgba)\(/.test(viewBackgroundColor);
     if (hasTransparence) {
       context.clearRect(0, 0, normalizedWidth, normalizedHeight);
     }
     context.save();
-    context.fillStyle = canvasBackgroundColor;
+    context.fillStyle = viewBackgroundColor;
     context.fillRect(0, 0, normalizedWidth, normalizedHeight);
     context.restore();
   } else {

packages/excalidraw/renderer/staticScene.ts

@@ -216,7 +216,7 @@ const _renderStaticScene = ({
     normalizedHeight,
     theme: appState.theme,
     isExporting,
-    canvasBackgroundColor: renderConfig.canvasBackgroundColor,
+    viewBackgroundColor: appState.viewBackgroundColor,
   });
 
   // Apply zoom

packages/excalidraw/renderer/staticSvgScene.ts

@@ -7,7 +7,7 @@ import {
   SVG_NS,
 } from "../constants";
 import { normalizeLink, toValidURL } from "../data/url";
-import { getElementAbsoluteCoords, hashString } from "../element";
+import { getElementAbsoluteCoords } from "../element";
 import {
   createPlaceholderEmbeddableLabel,
   getEmbedLink,
@@ -411,25 +411,7 @@ const renderElementToSvg = (
       const fileData =
         isInitializedImageElement(element) && files[element.fileId];
       if (fileData) {
-        const { reuseImages = true } = renderConfig;
-
-        let symbolId = `image-${fileData.id}`;
-
-        let uncroppedWidth = element.width;
-        let uncroppedHeight = element.height;
-        if (element.crop) {
-          ({ width: uncroppedWidth, height: uncroppedHeight } =
-            getUncroppedWidthAndHeight(element));
-
-          symbolId = `image-crop-${fileData.id}-${hashString(
-            `${uncroppedWidth}x${uncroppedHeight}`,
-          )}`;
-        }
-
-        if (!reuseImages) {
-          symbolId = `image-${element.id}`;
-        }
-
+        const symbolId = `image-${fileData.id}`;
         let symbol = svgRoot.querySelector(`#${symbolId}`);
         if (!symbol) {
           symbol = svgRoot.ownerDocument!.createElementNS(SVG_NS, "symbol");
@@ -439,7 +421,18 @@ const renderElementToSvg = (
           image.setAttribute("href", fileData.dataURL);
           image.setAttribute("preserveAspectRatio", "none");
 
-          if (element.crop || !reuseImages) {
+          if (element.crop) {
+            const { width: uncroppedWidth, height: uncroppedHeight } =
+              getUncroppedWidthAndHeight(element);
+
+            symbol.setAttribute(
+              "viewBox",
+              `${
+                element.crop.x / (element.crop.naturalWidth / uncroppedWidth)
+              } ${
+                element.crop.y / (element.crop.naturalHeight / uncroppedHeight)
+              } ${width} ${height}`,
+            );
             image.setAttribute("width", `${uncroppedWidth}`);
             image.setAttribute("height", `${uncroppedHeight}`);
           } else {
@@ -463,23 +456,8 @@ const renderElementToSvg = (
           use.setAttribute("filter", IMAGE_INVERT_FILTER);
         }
 
-        let normalizedCropX = 0;
-        let normalizedCropY = 0;
-
-        if (element.crop) {
-          const { width: uncroppedWidth, height: uncroppedHeight } =
-            getUncroppedWidthAndHeight(element);
-          normalizedCropX =
-            element.crop.x / (element.crop.naturalWidth / uncroppedWidth);
-          normalizedCropY =
-            element.crop.y / (element.crop.naturalHeight / uncroppedHeight);
-        }
-
-        const adjustedCenterX = cx + normalizedCropX;
-        const adjustedCenterY = cy + normalizedCropY;
-
-        use.setAttribute("width", `${width + normalizedCropX}`);
-        use.setAttribute("height", `${height + normalizedCropY}`);
+        use.setAttribute("width", `${width}`);
+        use.setAttribute("height", `${height}`);
         use.setAttribute("opacity", `${opacity}`);
 
         // We first apply `scale` transforms (horizontal/vertical mirroring)
@@ -489,43 +467,21 @@ const renderElementToSvg = (
         // the transformations correctly (the transform-origin was not being
         // applied correctly).
         if (element.scale[0] !== 1 || element.scale[1] !== 1) {
+          const translateX = element.scale[0] !== 1 ? -width : 0;
+          const translateY = element.scale[1] !== 1 ? -height : 0;
           use.setAttribute(
             "transform",
-            `translate(${adjustedCenterX} ${adjustedCenterY}) scale(${
-              element.scale[0]
-            } ${
-              element.scale[1]
-            }) translate(${-adjustedCenterX} ${-adjustedCenterY})`,
+            `scale(${element.scale[0]}, ${element.scale[1]}) translate(${translateX} ${translateY})`,
           );
         }
 
         const g = svgRoot.ownerDocument!.createElementNS(SVG_NS, "g");
-
-        if (element.crop) {
-          const mask = svgRoot.ownerDocument!.createElementNS(SVG_NS, "mask");
-          mask.setAttribute("id", `mask-image-crop-${element.id}`);
-          mask.setAttribute("fill", "#fff");
-          const maskRect = svgRoot.ownerDocument!.createElementNS(
-            SVG_NS,
-            "rect",
-          );
-
-          maskRect.setAttribute("x", `${normalizedCropX}`);
-          maskRect.setAttribute("y", `${normalizedCropY}`);
-          maskRect.setAttribute("width", `${width}`);
-          maskRect.setAttribute("height", `${height}`);
-
-          mask.appendChild(maskRect);
-          root.appendChild(mask);
-          g.setAttribute("mask", `url(#${mask.id})`);
-        }
-
         g.appendChild(use);
         g.setAttribute(
           "transform",
-          `translate(${offsetX - normalizedCropX} ${
-            offsetY - normalizedCropY
-          }) rotate(${degree} ${adjustedCenterX} ${adjustedCenterY})`,
+          `translate(${offsetX || 0} ${
+            offsetY || 0
+          }) rotate(${degree} ${cx} ${cy})`,
         );
 
         if (element.roundness) {

packages/excalidraw/scene/Shape.ts

@@ -164,10 +164,8 @@ const getArrowheadShapes = (
   arrowhead: Arrowhead,
   generator: RoughGenerator,
   options: Options,
-  canvasBackgroundColor: string | null,
+  canvasBackgroundColor: string,
 ) => {
-  canvasBackgroundColor = canvasBackgroundColor || "transparent";
-
   const arrowheadPoints = getArrowheadPoints(
     element,
     shape,
@@ -295,7 +293,7 @@ export const _generateElementShape = (
     embedsValidationStatus,
   }: {
     isExporting: boolean;
-    canvasBackgroundColor: string | null;
+    canvasBackgroundColor: string;
     embedsValidationStatus: EmbedsValidationStatus | null;
   },
 ): Drawable | Drawable[] | null => {

packages/excalidraw/scene/ShapeCache.ts

@@ -8,8 +8,7 @@ import { elementWithCanvasCache } from "../renderer/renderElement";
 import { _generateElementShape } from "./Shape";
 import type { ElementShape, ElementShapes } from "./types";
 import { COLOR_PALETTE } from "../colors";
-import type { EmbedsValidationStatus } from "../types";
-import type { StaticCanvasRenderConfig } from "./types";
+import type { AppState, EmbedsValidationStatus } from "../types";
 
 export class ShapeCache {
   private static rg = new RoughGenerator();
@@ -51,7 +50,7 @@ export class ShapeCache {
     element: T,
     renderConfig: {
       isExporting: boolean;
-      canvasBackgroundColor: StaticCanvasRenderConfig["canvasBackgroundColor"];
+      canvasBackgroundColor: AppState["viewBackgroundColor"];
       embedsValidationStatus: EmbedsValidationStatus;
     } | null,
   ) => {

packages/excalidraw/scene/types.ts

@@ -24,6 +24,7 @@ export type RenderableElementsMap = NonDeletedElementsMap &
   MakeBrand<"RenderableElementsMap">;
 
 export type StaticCanvasRenderConfig = {
+  canvasBackgroundColor: AppState["viewBackgroundColor"];
   // extra options passed to the renderer
   // ---------------------------------------------------------------------------
   imageCache: AppClassProperties["imageCache"];
@@ -31,8 +32,6 @@ export type StaticCanvasRenderConfig = {
   /** when exporting the behavior is slightly different (e.g. we can't use
    CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
-  /** null indicates transparent bg */
-  canvasBackgroundColor: string | null;
   embedsValidationStatus: EmbedsValidationStatus;
   elementsPendingErasure: ElementsPendingErasure;
   pendingFlowchartNodes: PendingExcalidrawElements | null;
@@ -47,13 +46,6 @@ export type SVGRenderConfig = {
   frameRendering: AppState["frameRendering"];
   canvasBackgroundColor: AppState["viewBackgroundColor"];
   embedsValidationStatus: EmbedsValidationStatus;
-  /**
-   * whether to attempt to reuse images as much as possible through symbols
-   * (reduces SVG size, but may be incompoatible with some SVG renderers)
-   *
-   * @default true
-   */
-  reuseImages: boolean;
 };
 
 export type InteractiveCanvasRenderConfig = {
@@ -82,13 +74,6 @@ export type StaticSceneRenderConfig = {
   elementsMap: RenderableElementsMap;
   allElementsMap: NonDeletedSceneElementsMap;
   visibleElements: readonly NonDeletedExcalidrawElement[];
-  /**
-   * canvas scale factor. Not related to zoom. In browsers, it's the
-   * devicePixelRatio. For export, it's the `appState.exportScale`
-   * (user setting) or whatever scale you want to use when exporting elsewhere.
-   *
-   * Bigger the scale, the more pixels (=quality).
-   */
   scale: number;
   appState: StaticCanvasAppState;
   renderConfig: StaticCanvasRenderConfig;

packages/excalidraw/tests/__snapshots__/MermaidToExcalidraw.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Test <MermaidToExcalidraw/> > should open mermaid popup when active too
  B --&gt; C{Let me think}
  C --&gt;|One| D[Laptop]
  C --&gt;|Two| E[iPhone]
- C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="300" height="0" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
+ C --&gt;|Three| F[Car]</textarea><div class="ttd-dialog-panel-button-container invisible" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class=""></div></button></div></div><div class="ttd-dialog-panel"><div class="ttd-dialog-panel__header"><label>Preview</label></div><div class="ttd-dialog-output-wrapper"><div style="opacity: 1;" class="ttd-dialog-output-canvas-container"><canvas width="89" height="158" dir="ltr"></canvas></div></div><div class="ttd-dialog-panel-button-container" style="display: flex; align-items: center;"><button type="button" class="excalidraw-button ttd-dialog-panel-button"><div class="">Insert<span><svg aria-hidden="true" focusable="false" role="img" viewBox="0 0 20 20" class="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><g stroke-width="1.25"><path d="M4.16602 10H15.8327"></path><path d="M12.5 13.3333L15.8333 10"></path><path d="M12.5 6.66666L15.8333 9.99999"></path></g></svg></span></div></button><div class="ttd-dialog-submit-shortcut"><div class="ttd-dialog-submit-shortcut__key">Ctrl</div><div class="ttd-dialog-submit-shortcut__key">Enter</div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Test <MermaidToExcalidraw/> > should show error in preview when mermaid library throws error 1`] = `

packages/excalidraw/tests/__snapshots__/linearElementEditor.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`Test Linear Elements > Test bound text element > should match styles fo
   class="excalidraw-wysiwyg"
   data-type="wysiwyg"
   dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, Segoe UI Emoji;"
+  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 26.25px; left: 25px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); padding: 0px 10px; text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Excalifont, Xiaolai, Segoe UI Emoji;"
   tabindex="0"
   wrap="off"
 />

packages/excalidraw/tests/cropElement.test.tsx

@@ -156,8 +156,8 @@ describe("Crop an image", () => {
       [-initialWidth / 3, 0],
       true,
     );
-    expect(image.width).toBeCloseTo(resizedWidth, 10);
-    expect(image.height).toBeCloseTo(resizedHeight, 10);
+    expect(image.width).toBe(resizedWidth);
+    expect(image.height).toBe(resizedHeight);
 
     // re-crop to initial state
     UI.crop(image, "w", naturalWidth, naturalHeight, [-initialWidth / 3, 0]);
@@ -315,28 +315,20 @@ describe("Cropping and other features", async () => {
     const widthToHeightRatio = image.width / image.height;
 
     const canvas = await exportToCanvas({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const exportedCanvasRatio = canvas.width / canvas.height;
 
     expect(widthToHeightRatio).toBeCloseTo(exportedCanvasRatio);
 
     const svg = await exportToSvg({
-      data: {
-        elements: [image],
-        appState: h.state,
-        files: h.app.files,
-      },
-      config: {
-        padding: 0,
-      },
+      elements: [image],
+      appState: h.state,
+      files: h.app.files,
+      exportPadding: 0,
     });
     const svgWidth = svg.getAttribute("width");
     const svgHeight = svg.getAttribute("height");

packages/excalidraw/tests/export.test.tsx

@@ -62,10 +62,10 @@ describe("export", () => {
   });
 
   it("test encoding/decoding scene for SVG export", async () => {
-    const encoded = encodeSvgMetadata({
+    const encoded = await encodeSvgMetadata({
       text: serializeAsJSON(testElements, h.state, {}, "local"),
     });
-    const decoded = JSON.parse(decodeSvgMetadata({ svg: encoded }));
+    const decoded = JSON.parse(await decodeSvgMetadata({ svg: encoded }));
     expect(decoded.elements).toEqual([
       expect.objectContaining({ type: "text", text: "😀" }),
     ]);
@@ -163,7 +163,7 @@ describe("export", () => {
       },
     } as const;
 
-    const svg = await exportToSvg({ data: { elements, appState, files } });
+    const svg = await exportToSvg(elements, appState, files);
 
     const svgText = svg.outerHTML;
 

packages/excalidraw/tests/history.test.tsx

@@ -15,11 +15,7 @@ import { getDefaultAppState } from "../appState";
 import { fireEvent, queryByTestId, waitFor } from "@testing-library/react";
 import { createUndoAction, createRedoAction } from "../actions/actionHistory";
 import { actionToggleViewMode } from "../actions/actionToggleViewMode";
-import {
-  COLOR_CHARCOAL_BLACK,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "../constants";
+import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import type { AppState } from "../types";
 import { arrayToMap } from "../utils";
 import {
@@ -81,7 +77,7 @@ const checkpoint = (name: string) => {
 const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 
 const transparent = COLOR_PALETTE.transparent;
-const black = COLOR_CHARCOAL_BLACK;
+const black = COLOR_PALETTE.black;
 const red = COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const blue = COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];
 const yellow = COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX];

packages/excalidraw/tests/linearElementEditor.test.tsx

@@ -20,6 +20,7 @@ import { LinearElementEditor } from "../element/linearElementEditor";
 import { act, queryByTestId, queryByText } from "@testing-library/react";
 import {
   getBoundTextElementPosition,
+  wrapText,
   getBoundTextMaxWidth,
 } from "../element/textElement";
 import * as textElementUtils from "../element/textElement";
@@ -28,7 +29,6 @@ import { vi } from "vitest";
 import { arrayToMap } from "../utils";
 import type { GlobalPoint } from "../../math";
 import { pointCenter, pointFrom } from "../../math";
-import { wrapText } from "../element/textWrapping";
 
 const renderInteractiveScene = vi.spyOn(
   InteractiveCanvas,
@@ -1235,7 +1235,8 @@ describe("Test Linear Elements", () => {
       mouse.downAt(rect.x, rect.y);
       mouse.moveTo(200, 0);
       mouse.upAt(200, 0);
-      expect(arrow.width).toBe(200);
+
+      expect(arrow.width).toBe(205);
       expect(rect.x).toBe(200);
       expect(rect.y).toBe(0);
       expect(handleBindTextResizeSpy).toHaveBeenCalledWith(

packages/excalidraw/tests/resize.test.tsx

@@ -882,11 +882,11 @@ describe("multiple selection", () => {
 
     expect(leftBoundArrow.x).toBeCloseTo(-110);
     expect(leftBoundArrow.y).toBeCloseTo(50);
-    expect(leftBoundArrow.width).toBeCloseTo(140, 0);
+    expect(leftBoundArrow.width).toBeCloseTo(137.5, 0);
     expect(leftBoundArrow.height).toBeCloseTo(7, 0);
     expect(leftBoundArrow.angle).toEqual(0);
     expect(leftBoundArrow.startBinding).toBeNull();
-    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(10);
+    expect(leftBoundArrow.endBinding?.gap).toBeCloseTo(12.352);
     expect(leftBoundArrow.endBinding?.elementId).toBe(
       leftArrowBinding.elementId,
     );

packages/excalidraw/types.ts

@@ -106,11 +106,6 @@ export type BinaryFileData = {
    * Epoch timestamp in milliseconds.
    */
   lastRetrieved?: number;
-  /**
-   * indicates the version of the file. This can be used to determine whether
-   * the file dataURL has changed e.g. as part of restore due to schema update.
-   */
-  version?: number;
 };
 
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
@@ -173,6 +168,8 @@ type _CommonCanvasAppState = {
 export type StaticCanvasAppState = Readonly<
   _CommonCanvasAppState & {
     shouldCacheIgnoreZoom: AppState["shouldCacheIgnoreZoom"];
+    /** null indicates transparent bg */
+    viewBackgroundColor: AppState["viewBackgroundColor"] | null;
     exportScale: AppState["exportScale"];
     selectedElementsAreBeingDragged: AppState["selectedElementsAreBeingDragged"];
     gridSize: AppState["gridSize"];

packages/excalidraw/utils.ts

@@ -1,8 +1,8 @@
 import Pool from "es6-promise-pool";
 import { average } from "../math";
+import { COLOR_PALETTE } from "./colors";
 import type { EVENT } from "./constants";
 import {
-  COLOR_TRANSPARENT,
   DEFAULT_VERSION,
   FONT_FAMILY,
   getFontFamilyFallbacks,
@@ -536,7 +536,11 @@ export const findLastIndex = <T>(
 export const isTransparent = (color: string) => {
   const isRGBTransparent = color.length === 5 && color.substr(4, 1) === "0";
   const isRRGGBBTransparent = color.length === 9 && color.substr(7, 2) === "00";
-  return isRGBTransparent || isRRGGBBTransparent || color === COLOR_TRANSPARENT;
+  return (
+    isRGBTransparent ||
+    isRRGGBBTransparent ||
+    color === COLOR_PALETTE.transparent
+  );
 };
 
 export type ResolvablePromise<T> = Promise<T> & {
@@ -1221,18 +1225,3 @@ export class PromisePool<T> {
     });
   }
 }
-
-export const pick = <
-  R extends Record<string, any>,
-  K extends readonly (keyof R)[],
->(
-  source: R,
-  keys: K,
-) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
-};

packages/utils/export.test.ts

@@ -0,0 +1,132 @@
+import * as utils from ".";
+import { diagramFactory } from "../excalidraw/tests/fixtures/diagramFixture";
+import { vi } from "vitest";
+import * as mockedSceneExportUtils from "../excalidraw/scene/export";
+
+import { MIME_TYPES } from "../excalidraw/constants";
+
+const exportToSvgSpy = vi.spyOn(mockedSceneExportUtils, "exportToSvg");
+
+describe("exportToCanvas", async () => {
+  const EXPORT_PADDING = 10;
+
+  it("with default arguments", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+    });
+
+    expect(canvas.width).toBe(100 + 2 * EXPORT_PADDING);
+    expect(canvas.height).toBe(100 + 2 * EXPORT_PADDING);
+  });
+
+  it("when custom width and height", async () => {
+    const canvas = await utils.exportToCanvas({
+      ...diagramFactory({ elementOverrides: { width: 100, height: 100 } }),
+      getDimensions: () => ({ width: 200, height: 200, scale: 1 }),
+    });
+
+    expect(canvas.width).toBe(200);
+    expect(canvas.height).toBe(200);
+  });
+});
+
+describe("exportToBlob", async () => {
+  describe("mime type", () => {
+    it("should change image/jpg to image/jpeg", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+        getDimensions: (width, height) => ({ width, height, scale: 1 }),
+        // testing typo in MIME type (jpg → jpeg)
+        mimeType: "image/jpg",
+        appState: {
+          exportBackground: true,
+        },
+      });
+      expect(blob?.type).toBe(MIME_TYPES.jpg);
+    });
+    it("should default to image/png", async () => {
+      const blob = await utils.exportToBlob({
+        ...diagramFactory(),
+      });
+      expect(blob?.type).toBe(MIME_TYPES.png);
+    });
+
+    it("should warn when using quality with image/png", async () => {
+      const consoleSpy = vi
+        .spyOn(console, "warn")
+        .mockImplementationOnce(() => void 0);
+      await utils.exportToBlob({
+        ...diagramFactory(),
+        mimeType: MIME_TYPES.png,
+        quality: 1,
+      });
+      expect(consoleSpy).toHaveBeenCalledWith(
+        `"quality" will be ignored for "${MIME_TYPES.png}" mimeType`,
+      );
+    });
+  });
+});
+
+describe("exportToSvg", () => {
+  const passedElements = () => exportToSvgSpy.mock.calls[0][0];
+  const passedOptions = () => exportToSvgSpy.mock.calls[0][1];
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("with default arguments", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+      }),
+    });
+
+    const passedOptionsWhenDefault = {
+      ...passedOptions(),
+      // To avoid varying snapshots
+      name: "name",
+    };
+    expect(passedElements().length).toBe(3);
+    expect(passedOptionsWhenDefault).toMatchSnapshot();
+  });
+
+  // FIXME the utils.exportToSvg no longer filters out deleted elements.
+  // It's already supposed to be passed non-deleted elements by we're not
+  // type-checking for it correctly.
+  it.skip("with deleted elements", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: { appState: void 0 },
+        elementOverrides: { isDeleted: true },
+      }),
+    });
+
+    expect(passedElements().length).toBe(0);
+  });
+
+  it("with exportPadding", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({ overrides: { appState: { name: "diagram name" } } }),
+      exportPadding: 0,
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions()).toEqual(
+      expect.objectContaining({ exportPadding: 0 }),
+    );
+  });
+
+  it("with exportEmbedScene", async () => {
+    await utils.exportToSvg({
+      ...diagramFactory({
+        overrides: {
+          appState: { name: "diagram name", exportEmbedScene: true },
+        },
+      }),
+    });
+
+    expect(passedElements().length).toBe(3);
+    expect(passedOptions().exportEmbedScene).toBe(true);
+  });
+});

packages/utils/export.ts

@@ -0,0 +1,210 @@
+import {
+  exportToCanvas as _exportToCanvas,
+  exportToSvg as _exportToSvg,
+} from "../excalidraw/scene/export";
+import { getDefaultAppState } from "../excalidraw/appState";
+import type { AppState, BinaryFiles } from "../excalidraw/types";
+import type {
+  ExcalidrawElement,
+  ExcalidrawFrameLikeElement,
+  NonDeleted,
+} from "../excalidraw/element/types";
+import { restore } from "../excalidraw/data/restore";
+import { MIME_TYPES } from "../excalidraw/constants";
+import { encodePngMetadata } from "../excalidraw/data/image";
+import { serializeAsJSON } from "../excalidraw/data/json";
+import {
+  copyBlobToClipboardAsPng,
+  copyTextToSystemClipboard,
+  copyToClipboard,
+} from "../excalidraw/clipboard";
+
+export { MIME_TYPES };
+
+type ExportOpts = {
+  elements: readonly NonDeleted<ExcalidrawElement>[];
+  appState?: Partial<Omit<AppState, "offsetTop" | "offsetLeft">>;
+  files: BinaryFiles | null;
+  maxWidthOrHeight?: number;
+  exportingFrame?: ExcalidrawFrameLikeElement | null;
+  getDimensions?: (
+    width: number,
+    height: number,
+  ) => { width: number; height: number; scale?: number };
+};
+
+export const exportToCanvas = ({
+  elements,
+  appState,
+  files,
+  maxWidthOrHeight,
+  getDimensions,
+  exportPadding,
+  exportingFrame,
+}: ExportOpts & {
+  exportPadding?: number;
+}) => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+  const { exportBackground, viewBackgroundColor } = restoredAppState;
+  return _exportToCanvas(
+    restoredElements,
+    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    files || {},
+    { exportBackground, exportPadding, viewBackgroundColor, exportingFrame },
+    (width: number, height: number) => {
+      const canvas = document.createElement("canvas");
+
+      if (maxWidthOrHeight) {
+        if (typeof getDimensions === "function") {
+          console.warn(
+            "`getDimensions()` is ignored when `maxWidthOrHeight` is supplied.",
+          );
+        }
+
+        const max = Math.max(width, height);
+
+        // if content is less then maxWidthOrHeight, fallback on supplied scale
+        const scale =
+          maxWidthOrHeight < max
+            ? maxWidthOrHeight / max
+            : appState?.exportScale ?? 1;
+
+        canvas.width = width * scale;
+        canvas.height = height * scale;
+
+        return {
+          canvas,
+          scale,
+        };
+      }
+
+      const ret = getDimensions?.(width, height) || { width, height };
+
+      canvas.width = ret.width;
+      canvas.height = ret.height;
+
+      return {
+        canvas,
+        scale: ret.scale ?? 1,
+      };
+    },
+  );
+};
+
+export const exportToBlob = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    exportPadding?: number;
+  },
+): Promise<Blob> => {
+  let { mimeType = MIME_TYPES.png, quality } = opts;
+
+  if (mimeType === MIME_TYPES.png && typeof quality === "number") {
+    console.warn(`"quality" will be ignored for "${MIME_TYPES.png}" mimeType`);
+  }
+
+  // typo in MIME type (should be "jpeg")
+  if (mimeType === "image/jpg") {
+    mimeType = MIME_TYPES.jpg;
+  }
+
+  if (mimeType === MIME_TYPES.jpg && !opts.appState?.exportBackground) {
+    console.warn(
+      `Defaulting "exportBackground" to "true" for "${MIME_TYPES.jpg}" mimeType`,
+    );
+    opts = {
+      ...opts,
+      appState: { ...opts.appState, exportBackground: true },
+    };
+  }
+
+  const canvas = await exportToCanvas(opts);
+
+  quality = quality ? quality : /image\/jpe?g/.test(mimeType) ? 0.92 : 0.8;
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      async (blob) => {
+        if (!blob) {
+          return reject(new Error("couldn't export to blob"));
+        }
+        if (
+          blob &&
+          mimeType === MIME_TYPES.png &&
+          opts.appState?.exportEmbedScene
+        ) {
+          blob = await encodePngMetadata({
+            blob,
+            metadata: serializeAsJSON(
+              // NOTE as long as we're using the Scene hack, we need to ensure
+              // we pass the original, uncloned elements when serializing
+              // so that we keep ids stable
+              opts.elements,
+              opts.appState,
+              opts.files || {},
+              "local",
+            ),
+          });
+        }
+        resolve(blob);
+      },
+      mimeType,
+      quality,
+    );
+  });
+};
+
+export const exportToSvg = async ({
+  elements,
+  appState = getDefaultAppState(),
+  files = {},
+  exportPadding,
+  renderEmbeddables,
+  exportingFrame,
+  skipInliningFonts,
+}: Omit<ExportOpts, "getDimensions"> & {
+  exportPadding?: number;
+  renderEmbeddables?: boolean;
+  skipInliningFonts?: true;
+}): Promise<SVGSVGElement> => {
+  const { elements: restoredElements, appState: restoredAppState } = restore(
+    { elements, appState },
+    null,
+    null,
+  );
+
+  const exportAppState = {
+    ...restoredAppState,
+    exportPadding,
+  };
+
+  return _exportToSvg(restoredElements, exportAppState, files, {
+    exportingFrame,
+    renderEmbeddables,
+    skipInliningFonts,
+  });
+};
+
+export const exportToClipboard = async (
+  opts: ExportOpts & {
+    mimeType?: string;
+    quality?: number;
+    type: "png" | "svg" | "json";
+  },
+) => {
+  if (opts.type === "svg") {
+    const svg = await exportToSvg(opts);
+    await copyTextToSystemClipboard(svg.outerHTML);
+  } else if (opts.type === "png") {
+    await copyBlobToClipboardAsPng(exportToBlob(opts));
+  } else if (opts.type === "json") {
+    await copyToClipboard(opts.elements, opts.files);
+  } else {
+    throw new Error("Invalid export type");
+  }
+};

packages/utils/index.ts

@@ -1,3 +1,4 @@
+export * from "./export";
 export * from "./withinBounds";
 export * from "./bbox";
 export { getCommonBounds } from "../excalidraw/element/bounds";

packages/utils/utils.unmocked.test.ts

@@ -1,6 +1,6 @@
 import { decodePngMetadata, decodeSvgMetadata } from "../excalidraw/data/image";
 import type { ImportedDataState } from "../excalidraw/data/types";
-import { exportToBlob, exportToSvg } from "../excalidraw/scene/export";
+import * as utils from "../utils";
 import { API } from "../excalidraw/tests/helpers/api";
 
 // NOTE this test file is using the actual API, unmocked. Hence splitting it
@@ -15,22 +15,19 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const svgNode = await exportToSvg({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-            exportBackground: true,
-          },
-          files: null,
+      const svgNode = await utils.exportToSvg({
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const svg = svgNode.outerHTML;
 
-      const parsedString = decodeSvgMetadata({ svg });
+      const parsedString = await decodeSvgMetadata({ svg });
       const importedData: ImportedDataState = JSON.parse(parsedString);
 
       expect(sourceElements.map((x) => x.id)).toEqual(
@@ -48,19 +45,15 @@ describe("embedding scene data", () => {
 
       const sourceElements = [rectangle, ellipse];
 
-      const blob = await exportToBlob({
-        data: {
-          elements: sourceElements,
-          appState: {
-            viewBackgroundColor: "#ffffff",
-            gridModeEnabled: false,
-            exportEmbedScene: true,
-          },
-          files: null,
-        },
-        config: {
-          mimeType: "image/png",
+      const blob = await utils.exportToBlob({
+        mimeType: "image/png",
+        elements: sourceElements,
+        appState: {
+          viewBackgroundColor: "#ffffff",
+          gridModeEnabled: false,
+          exportEmbedScene: true,
         },
+        files: null,
       });
 
       const parsedString = await decodePngMetadata(blob);

public/manifest.json

@@ -0,0 +1,74 @@
+{
+  "short_name": "Excalidraw",
+  "name": "Excalidraw",
+  "description": "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "180x180"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff",
+  "file_handlers": [
+    {
+      "action": "/",
+      "accept": {
+        "application/vnd.excalidraw+json": [".excalidraw"]
+      }
+    }
+  ],
+  "share_target": {
+    "action": "/web-share-target",
+    "method": "POST",
+    "enctype": "multipart/form-data",
+    "params": {
+      "files": [
+        {
+          "name": "file",
+          "accept": ["application/vnd.excalidraw+json", "application/json", ".excalidraw"]
+        }
+      ]
+    }
+  },
+  "screenshots": [
+    {
+      "src": "/screenshots/virtual-whiteboard.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/wireframe.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/illustration.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/shapes.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/collaboration.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    },
+    {
+      "src": "/screenshots/export.png",
+      "type": "image/png",
+      "sizes": "462x945"
+    }
+  ]
+}

yarn.lock

@@ -1891,13 +1891,13 @@
   resolved "https://registry.yarnpkg.com/@excalidraw/markdown-to-text/-/markdown-to-text-0.1.2.tgz#1703705e7da608cf478f17bfe96fb295f55a23eb"
   integrity sha512-1nDXBNAojfi3oSFwJswKREkFm5wrSjqay81QlyRv2pkITG/XYB5v+oChENVBQLcxQwX4IUATWvXM5BcaNhPiIg==
 
-"@excalidraw/mermaid-to-excalidraw@1.1.2":
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.2.tgz#74d9507971976a7d3d960a1b2e8fb49a9f1f0d22"
-  integrity sha512-hAFv/TTIsOdoy0dL5v+oBd297SQ+Z88gZ5u99fCIFuEMHfQuPgLhU/ztKhFSTs7fISwVo6fizny/5oQRR3d4tQ==
+"@excalidraw/mermaid-to-excalidraw@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/mermaid-to-excalidraw/-/mermaid-to-excalidraw-1.1.0.tgz#a24a7aa3ad2e4f671054fdb670a8508bab463814"
+  integrity sha512-YP2roqrImzek1SpUAeToSTNhH5Gfw9ogdI5KHp7c+I/mX7SEW8oNqqX7CP+oHcUgNF6RrYIkqSrnMRN9/3EGLg==
   dependencies:
     "@excalidraw/markdown-to-text" "0.1.2"
-    mermaid "10.9.3"
+    mermaid "10.9.0"
     nanoid "4.0.2"
 
 "@excalidraw/prettier-config@1.0.2":
@@ -3068,6 +3068,11 @@
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+"@tldraw/vec@1.7.1":
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/@tldraw/vec/-/vec-1.7.1.tgz#5bfac9a56e11ad890cbd1c620293d7fcb23bf1ea"
+  integrity sha512-qM6Z9RvkLFFEzr91mmsA4HI14msyDgDDOu36csIzG5BYu2bFmEz5siQ8WntHgDtUjzJHP+VSSOTbAXhklEZHLA==
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -4814,9 +4819,9 @@ cross-fetch@3.1.5:
     node-fetch "2.6.7"
 
 cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.6.tgz#8a58fe78f00dcd70c370451759dfbfaf03e8ee9f"
-  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
     shebang-command "^2.0.0"
@@ -5423,10 +5428,10 @@ domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-"dompurify@^3.0.5 <3.1.7":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.6.tgz#43c714a94c6a7b8801850f82e756685300a027e2"
-  integrity sha512-cTOAhc36AalkjtBpfG6O8JimdTMWNXjiePT2xQH/ppBGi/4uIpmj8eKyIkMJErXWARyINV/sB38yf8JCLF5pbQ==
+dompurify@^3.0.5:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.1.4.tgz#42121304b2b3a6bae22f80131ff8a8f3f3c56be2"
+  integrity sha512-2gnshi6OshmuKil8rMZuQCGiUF3cUxHY3NGDzUAdUx/NPEe5DVnO8BDoAQouvgwnx0R/+a6jUn36Z0FSdq8vww==
 
 domutils@^2.8.0:
   version "2.8.0"
@@ -7813,10 +7818,10 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
-mermaid@10.9.3:
-  version "10.9.3"
-  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.3.tgz#90bc6f15c33dbe5d9507fed31592cc0d88fee9f7"
-  integrity sha512-V80X1isSEvAewIL3xhmz/rVmc27CVljcsbWxkxlWJWY/1kQa4XOABqpDl2qQLGKzpKm6WbTfUEKImBlUfFYArw==
+mermaid@10.9.0:
+  version "10.9.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-10.9.0.tgz#4d1272fbe434bd8f3c2c150554dc8a23a9bf9361"
+  integrity sha512-swZju0hFox/B/qoLKK0rOxxgh8Cf7rJSfAUc1u8fezVihYMvrJAS45GzAxTVf4Q+xn9uMgitBcmWk7nWGXOs/g==
   dependencies:
     "@braintree/sanitize-url" "^6.0.1"
     "@types/d3-scale" "^4.0.3"
@@ -7827,7 +7832,7 @@ mermaid@10.9.3:
     d3-sankey "^0.12.3"
     dagre-d3-es "7.0.10"
     dayjs "^1.11.7"
-    dompurify "^3.0.5 <3.1.7"
+    dompurify "^3.0.5"
     elkjs "^0.9.0"
     katex "^0.16.9"
     khroma "^2.0.0"
@@ -9633,7 +9638,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -9651,6 +9656,15 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.0, string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -9722,7 +9736,14 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@6.0.1, strip-ansi@^3.0.0, strip-ansi@^6.0.0, strip-ansi@^6.0.1, strip-ansi@^7.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10959,7 +10980,7 @@ workbox-window@7.1.0, workbox-window@^7.0.0:
     "@types/trusted-types" "^2.0.2"
     workbox-core "7.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -10977,6 +10998,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"