@excalidraw/excalidraw 0.17.1-7441-4e2c539 → 0.17.1-a38e82f

package/dist/excalidraw/components/Button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 import "./Button.scss";
 interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     type?: "button" | "submit" | "reset";

package/dist/excalidraw/components/FilledButton.d.ts

@@ -6,12 +6,12 @@ export type ButtonSize = "medium" | "large";
 export type FilledButtonProps = {
     label: string;
     children?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: (event: React.MouseEvent) => void;
     variant?: ButtonVariant;
     color?: ButtonColor;
     size?: ButtonSize;
     className?: string;
     fullWidth?: boolean;
-    startIcon?: React.ReactNode;
+    icon?: React.ReactNode;
 };
 export declare const FilledButton: React.ForwardRefExoticComponent<FilledButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/excalidraw/components/FilledButton.js

@@ -1,7 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useState } from "react";
 import clsx from "clsx";
 import "./FilledButton.scss";
-export const FilledButton = forwardRef(({ children, startIcon, onClick, label, variant = "filled", color = "primary", size = "medium", fullWidth, className, }, ref) => {
-    return (_jsxs("button", { className: clsx("ExcButton", `ExcButton--color-${color}`, `ExcButton--variant-${variant}`, `ExcButton--size-${size}`, { "ExcButton--fullWidth": fullWidth }, className), onClick: onClick, type: "button", "aria-label": label, ref: ref, children: [startIcon && (_jsx("div", { className: "ExcButton__icon", "aria-hidden": true, children: startIcon })), variant !== "icon" && (children ?? label)] }));
+import { AbortError } from "../errors";
+import Spinner from "./Spinner";
+import { isPromiseLike } from "../utils";
+export const FilledButton = forwardRef(({ children, icon, onClick, label, variant = "filled", color = "primary", size = "medium", fullWidth, className, }, ref) => {
+    const [isLoading, setIsLoading] = useState(false);
+    const _onClick = async (event) => {
+        const ret = onClick?.(event);
+        if (isPromiseLike(ret)) {
+            try {
+                setIsLoading(true);
+                await ret;
+            }
+            catch (error) {
+                if (!(error instanceof AbortError)) {
+                    throw error;
+                }
+                else {
+                    console.warn(error);
+                }
+            }
+            finally {
+                setIsLoading(false);
+            }
+        }
+    };
+    return (_jsx("button", { className: clsx("ExcButton", `ExcButton--color-${color}`, `ExcButton--variant-${variant}`, `ExcButton--size-${size}`, { "ExcButton--fullWidth": fullWidth }, className), onClick: _onClick, type: "button", "aria-label": label, ref: ref, disabled: isLoading, children: _jsxs("div", { className: "ExcButton__contents", children: [isLoading && _jsx(Spinner, {}), icon && (_jsx("div", { className: "ExcButton__icon", "aria-hidden": true, children: icon })), variant !== "icon" && (children ?? label)] }) }));
 });

package/dist/excalidraw/components/FollowMode/FollowMode.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "../icons";
 import "./FollowMode.scss";
 const FollowMode = ({ height, width, userToFollow, onDisconnect, }) => {
-    return (_jsx("div", { style: { position: "relative" }, children: _jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }) }));
+    return (_jsx("div", { className: "follow-mode", style: { width, height }, children: _jsxs("div", { className: "follow-mode__badge", children: [_jsxs("div", { className: "follow-mode__badge__label", children: ["Following", " ", _jsx("span", { className: "follow-mode__badge__username", title: userToFollow.username, children: userToFollow.username })] }), _jsx("button", { onClick: onDisconnect, className: "follow-mode__disconnect-btn", children: CloseIcon })] }) }));
 };
 export default FollowMode;

package/dist/excalidraw/components/ImageExportDialog.d.ts

@@ -4,11 +4,12 @@ import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import "./ImageExportDialog.scss";
 export declare const ErrorCanvasPreview: () => JSX.Element;
-export declare const ImageExportDialog: ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, }: {
+export declare const ImageExportDialog: ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, name, }: {
     appState: UIAppState;
     elements: readonly NonDeletedExcalidrawElement[];
     files: BinaryFiles;
     actionManager: ActionManager;
     onExportImage: AppClassProperties["onExportImage"];
     onCloseRequest: () => void;
+    name: string;
 }) => JSX.Element;

package/dist/excalidraw/components/ImageExportDialog.js

@@ -14,7 +14,6 @@ import { RadioGroup } from "./RadioGroup";
 import { Switch } from "./Switch";
 import { Tooltip } from "./Tooltip";
 import "./ImageExportDialog.scss";
-import { useAppProps } from "./App";
 import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
@@ -22,10 +21,9 @@ const supportsContextFilters = "filter" in document.createElement("canvas").getC
 export const ErrorCanvasPreview = () => {
     return (_jsxs("div", { children: [_jsx("h3", { children: t("canvasError.cannotShowPreview") }), _jsx("p", { children: _jsx("span", { children: t("canvasError.canvasTooBig") }) }), _jsxs("em", { children: ["(", t("canvasError.canvasTooBigTip"), ")"] })] }));
 };
-const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionManager, onExportImage, }) => {
+const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionManager, onExportImage, name, }) => {
     const hasSelection = isSomeElementSelected(elementsSnapshot, appStateSnapshot);
-    const appProps = useAppProps();
-    const [projectName, setProjectName] = useState(appStateSnapshot.name);
+    const [projectName, setProjectName] = useState(name);
     const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
     const [exportWithBackground, setExportWithBackground] = useState(appStateSnapshot.exportBackground);
     const [exportDarkMode, setExportDarkMode] = useState(appStateSnapshot.exportWithDarkMode);
@@ -63,8 +61,15 @@ const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionMan
             setRenderError(null);
             // if converting to blob fails, there's some problem that will
             // likely prevent preview and export (e.g. canvas too big)
-            return canvasToBlob(canvas).then(() => {
+            return canvasToBlob(canvas)
+                .then(() => {
                 previewNode.replaceChildren(canvas);
+            })
+                .catch((e) => {
+                if (e.name === "CANVAS_POSSIBLY_TOO_BIG") {
+                    throw new Error(t("canvasError.canvasTooBig"));
+                }
+                throw e;
             });
         })
             .catch((error) => {
@@ -82,8 +87,7 @@ const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionMan
         exportScale,
         embedScene,
     ]);
-    return (_jsxs("div", { className: "ImageExportModal", children: [_jsx("h3", { children: t("imageExportDialog.header") }), _jsxs("div", { className: "ImageExportModal__preview", children: [_jsx("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && _jsx(ErrorCanvasPreview, {}) }), _jsx("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && (_jsx("input", { type: "text", className: "TextInput", value: projectName, style: { width: "30ch" }, disabled: typeof appProps.name !== "undefined" ||
-                                appStateSnapshot.viewModeEnabled, onChange: (event) => {
+    return (_jsxs("div", { className: "ImageExportModal", children: [_jsx("h3", { children: t("imageExportDialog.header") }), _jsxs("div", { className: "ImageExportModal__preview", children: [_jsx("div", { className: "ImageExportModal__preview__canvas", ref: previewRef, children: renderError && _jsx(ErrorCanvasPreview, {}) }), _jsx("div", { className: "ImageExportModal__preview__filename", children: !nativeFileSystemSupported && (_jsx("input", { type: "text", className: "TextInput", value: projectName, style: { width: "30ch" }, onChange: (event) => {
                                 setProjectName(event.target.value);
                                 actionManager.executeAction(actionChangeProjectName, "ui", event.target.value);
                             } })) })] }), _jsxs("div", { className: "ImageExportModal__settings", children: [_jsx("h3", { children: t("imageExportDialog.header") }), hasSelection && (_jsx(ExportSetting, { label: t("imageExportDialog.label.onlySelected"), name: "exportOnlySelected", children: _jsx(Switch, { name: "exportOnlySelected", checked: exportSelectionOnly, onChange: (checked) => {
@@ -105,16 +109,16 @@ const ImageExportModal = ({ appStateSnapshot, elementsSnapshot, files, actionMan
                                 label: `${scale}\u00d7`,
                             })) }) }), _jsxs("div", { className: "ImageExportModal__settings__buttons", children: [_jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.exportToPng"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements, {
                                     exportingFrame,
-                                }), startIcon: downloadIcon, children: t("imageExportDialog.button.exportToPng") }), _jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.exportToSvg"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
+                                }), icon: downloadIcon, children: t("imageExportDialog.button.exportToPng") }), _jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.exportToSvg"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
                                     exportingFrame,
-                                }), startIcon: downloadIcon, children: t("imageExportDialog.button.exportToSvg") }), (probablySupportsClipboardBlob || isFirefox) && (_jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.copyPngToClipboard"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
+                                }), icon: downloadIcon, children: t("imageExportDialog.button.exportToSvg") }), (probablySupportsClipboardBlob || isFirefox) && (_jsx(FilledButton, { className: "ImageExportModal__settings__buttons__button", label: t("imageExportDialog.title.copyPngToClipboard"), onClick: () => onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
                                     exportingFrame,
-                                }), startIcon: copyIcon, children: t("imageExportDialog.button.copyPngToClipboard") }))] })] })] }));
+                                }), icon: copyIcon, children: t("imageExportDialog.button.copyPngToClipboard") }))] })] })] }));
 };
 const ExportSetting = ({ label, children, tooltip, name, }) => {
     return (_jsxs("div", { className: "ImageExportModal__settings__setting", title: label, children: [_jsxs("label", { htmlFor: name, className: "ImageExportModal__settings__setting__label", children: [label, tooltip && (_jsx(Tooltip, { label: tooltip, long: true, children: helpIcon }))] }), _jsx("div", { className: "ImageExportModal__settings__setting__content", children: children })] }));
 };
-export const ImageExportDialog = ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, }) => {
+export const ImageExportDialog = ({ elements, appState, files, actionManager, onExportImage, onCloseRequest, name, }) => {
     // we need to take a snapshot so that the exported state can't be modified
     // while the dialog is open
     const [{ appStateSnapshot, elementsSnapshot }] = useState(() => {
@@ -123,5 +127,5 @@ export const ImageExportDialog = ({ elements, appState, files, actionManager, on
             elementsSnapshot: cloneJSON(elements),
         };
     });
-    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, size: "wide", title: false, children: _jsx(ImageExportModal, { elementsSnapshot: elementsSnapshot, appStateSnapshot: appStateSnapshot, files: files, actionManager: actionManager, onExportImage: onExportImage }) }));
+    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, size: "wide", title: false, children: _jsx(ImageExportModal, { elementsSnapshot: elementsSnapshot, appStateSnapshot: appStateSnapshot, files: files, actionManager: actionManager, onExportImage: onExportImage, name: name }) }));
 };

package/dist/excalidraw/components/JSONExportDialog.js

@@ -18,7 +18,7 @@ const JSONExportModal = ({ elements, appState, setAppState, files, actionManager
                             } })] })), onExportToBackend && (_jsxs(Card, { color: "pink", children: [_jsx("div", { className: "Card-icon", children: LinkIcon }), _jsx("h2", { children: t("exportDialog.link_title") }), _jsx("div", { className: "Card-details", children: t("exportDialog.link_details") }), _jsx(ToolButton, { className: "Card-button", type: "button", title: t("exportDialog.link_button"), "aria-label": t("exportDialog.link_button"), showAriaLabel: true, onClick: async () => {
                                 try {
                                     trackEvent("export", "link", `ui (${getFrame()})`);
-                                    await onExportToBackend(elements, appState, files, canvas);
+                                    await onExportToBackend(elements, appState, files);
                                     onCloseRequest();
                                 }
                                 catch (error) {

package/dist/excalidraw/components/{LaserTool/LaserPointerButton.d.ts → LaserPointerButton.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import "../ToolIcon.scss";
+import "./ToolIcon.scss";
 type LaserPointerIconProps = {
     title?: string;
     name?: string;

package/dist/excalidraw/components/{LaserTool/LaserPointerButton.js → LaserPointerButton.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "../ToolIcon.scss";
+import "./ToolIcon.scss";
 import clsx from "clsx";
-import { laserPointerToolIcon } from "../icons";
+import { laserPointerToolIcon } from "./icons";
 const DEFAULT_SIZE = "small";
 export const LaserPointerButton = (props) => {
     return (_jsxs("label", { className: clsx("ToolIcon ToolIcon__LaserPointer", `ToolIcon_size_${DEFAULT_SIZE}`, {

package/dist/excalidraw/components/LayerUI.js

@@ -45,7 +45,7 @@ import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
-import { LaserPointerButton } from "./LaserTool/LaserPointerButton";
+import { LaserPointerButton } from "./LaserPointerButton";
 import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 const DefaultMainMenu = ({ UIOptions }) => {
@@ -69,7 +69,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
             appState.openDialog?.name !== "imageExport") {
             return null;
         }
-        return (_jsx(ImageExportDialog, { elements: elements, appState: appState, files: files, actionManager: actionManager, onExportImage: onExportImage, onCloseRequest: () => setAppState({ openDialog: null }) }));
+        return (_jsx(ImageExportDialog, { elements: elements, appState: appState, files: files, actionManager: actionManager, onExportImage: onExportImage, onCloseRequest: () => setAppState({ openDialog: null }), name: app.getName() }));
     };
     const renderCanvasActions = () => (_jsxs("div", { style: { position: "relative" }, children: [_jsx(tunnels.MainMenuTunnel.Out, {}), renderWelcomeScreen && _jsx(tunnels.WelcomeScreenMenuHintTunnel.Out, {})] }));
     const renderSelectedShapeActions = () => (_jsx(Section, { heading: "selectedShapeActions", className: clsx("selected-shape-actions zen-mode-transition", {
@@ -78,7 +78,7 @@ const LayerUI = ({ actionManager, appState, files, setAppState, elements, canvas
                 // we want to make sure this doesn't overflow so subtracting the
                 // approximate height of hamburgerMenu + footer
                 maxHeight: `${appState.height - 166}px`,
-            }, children: _jsx(SelectedShapeActions, { appState: appState, elements: elements, renderAction: actionManager.renderAction }) }) }));
+            }, children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) }) }));
     const renderFixedSideContainer = () => {
         const shouldRenderSelectedShapeActions = showSelectedShapeActions(appState, elements);
         return (_jsx(FixedSideContainer, { side: "top", children: _jsxs("div", { className: "App-menu App-menu_top", children: [_jsxs(Stack.Col, { gap: 6, className: clsx("App-menu_top__left"), children: [renderCanvasActions(), shouldRenderSelectedShapeActions && renderSelectedShapeActions()] }), !appState.viewModeEnabled && (_jsx(Section, { heading: "shapes", className: "shapes-section", children: (heading) => (_jsxs("div", { style: { position: "relative" }, children: [renderWelcomeScreen && (_jsx(tunnels.WelcomeScreenToolbarHintTunnel.Out, {})), _jsx(Stack.Col, { gap: 4, align: "start", children: _jsxs(Stack.Row, { gap: 1, className: clsx("App-toolbar-container", {

package/dist/excalidraw/components/MobileMenu.js

@@ -35,7 +35,7 @@ export const MobileMenu = ({ appState, elements, actionManager, setAppState, onL
                     marginRight: SCROLLBAR_WIDTH + SCROLLBAR_MARGIN * 2,
                 }, children: _jsxs(Island, { padding: 0, children: [appState.openMenu === "shape" &&
                             !appState.viewModeEnabled &&
-                            showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elements: elements, renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
+                            showSelectedShapeActions(appState, elements) ? (_jsx(Section, { className: "App-mobile-menu", heading: "selectedShapeActions", children: _jsx(SelectedShapeActions, { appState: appState, elementsMap: app.scene.getNonDeletedElementsMap(), renderAction: actionManager.renderAction }) })) : null, _jsxs("footer", { className: "App-toolbar", children: [renderAppToolbar(), appState.scrolledOutside &&
                                     !appState.openMenu &&
                                     !appState.openSidebar && (_jsx("button", { className: "scroll-back-to-content", onClick: () => {
                                         setAppState((appState) => ({

package/dist/excalidraw/components/ProjectName.d.ts

@@ -5,7 +5,6 @@ type Props = {
     value: string;
     onChange: (value: string) => void;
     label: string;
-    isNameEditable: boolean;
     ignoreFocus?: boolean;
 };
 export declare const ProjectName: (props: Props) => JSX.Element;

package/dist/excalidraw/components/ProjectName.js

@@ -26,5 +26,5 @@ export const ProjectName = (props) => {
             event.currentTarget.blur();
         }
     };
-    return (_jsxs("div", { className: "ProjectName", children: [_jsx("label", { className: "ProjectName-label", htmlFor: "filename", children: `${props.label}${props.isNameEditable ? "" : ":"}` }), props.isNameEditable ? (_jsx("input", { type: "text", className: "TextInput", onBlur: handleBlur, onKeyDown: handleKeyDown, id: `${id}-filename`, value: fileName, onChange: (event) => setFileName(event.target.value) })) : (_jsx("span", { className: "TextInput TextInput--readonly", id: `${id}-filename`, children: props.value }))] }));
+    return (_jsxs("div", { className: "ProjectName", children: [_jsx("label", { className: "ProjectName-label", htmlFor: "filename", children: `${props.label}:` }), _jsx("input", { type: "text", className: "TextInput", onBlur: handleBlur, onKeyDown: handleKeyDown, id: `${id}-filename`, value: fileName, onChange: (event) => setFileName(event.target.value) })] }));
 };

package/dist/excalidraw/components/SVGLayer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Trail } from "../animated-trail";
+import "./SVGLayer.scss";
+type SVGLayerProps = {
+    trails: Trail[];
+};
+export declare const SVGLayer: ({ trails }: SVGLayerProps) => JSX.Element;
+export {};

package/dist/excalidraw/components/SVGLayer.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import "./SVGLayer.scss";
+export const SVGLayer = ({ trails }) => {
+    const svgRef = useRef(null);
+    useEffect(() => {
+        if (svgRef.current) {
+            for (const trail of trails) {
+                trail.start(svgRef.current);
+            }
+        }
+        return () => {
+            for (const trail of trails) {
+                trail.stop();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, trails);
+    return (_jsx("div", { className: "SVGLayer", children: _jsx("svg", { ref: svgRef }) }));
+};

package/dist/excalidraw/components/ShareableLinkDialog.js

@@ -16,18 +16,18 @@ export const ShareableLinkDialog = ({ link, onCloseRequest, setErrorMessage, })
     const copyRoomLink = async () => {
         try {
             await copyTextToSystemClipboard(link);
-            setJustCopied(true);
-            if (timerRef.current) {
-                window.clearTimeout(timerRef.current);
-            }
-            timerRef.current = window.setTimeout(() => {
-                setJustCopied(false);
-            }, 3000);
         }
-        catch (error) {
-            setErrorMessage(error.message);
+        catch (e) {
+            setErrorMessage(t("errors.copyToSystemClipboardFailed"));
         }
+        setJustCopied(true);
+        if (timerRef.current) {
+            window.clearTimeout(timerRef.current);
+        }
+        timerRef.current = window.setTimeout(() => {
+            setJustCopied(false);
+        }, 3000);
         ref.current?.select();
     };
-    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, title: false, size: "small", children: _jsxs("div", { className: "ShareableLinkDialog", children: [_jsx("h3", { children: "Shareable link" }), _jsxs("div", { className: "ShareableLinkDialog__linkRow", children: [_jsx(TextField, { ref: ref, label: "Link", readonly: true, fullWidth: true, value: link, selectOnRender: true }), _jsxs(Popover.Root, { open: justCopied, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(FilledButton, { size: "large", label: "Copy link", startIcon: copyIcon, onClick: copyRoomLink }) }), _jsxs(Popover.Content, { onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), className: "ShareableLinkDialog__popover", side: "top", align: "end", sideOffset: 5.5, children: [tablerCheckIcon, " copied"] })] })] }), _jsxs("div", { className: "ShareableLinkDialog__description", children: ["\uD83D\uDD12 ", t("alerts.uploadedSecurly")] })] }) }));
+    return (_jsx(Dialog, { onCloseRequest: onCloseRequest, title: false, size: "small", children: _jsxs("div", { className: "ShareableLinkDialog", children: [_jsx("h3", { children: "Shareable link" }), _jsxs("div", { className: "ShareableLinkDialog__linkRow", children: [_jsx(TextField, { ref: ref, label: "Link", readonly: true, fullWidth: true, value: link, selectOnRender: true }), _jsxs(Popover.Root, { open: justCopied, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(FilledButton, { size: "large", label: "Copy link", icon: copyIcon, onClick: copyRoomLink }) }), _jsxs(Popover.Content, { onOpenAutoFocus: (event) => event.preventDefault(), onCloseAutoFocus: (event) => event.preventDefault(), className: "ShareableLinkDialog__popover", side: "top", align: "end", sideOffset: 5.5, children: [tablerCheckIcon, " copied"] })] })] }), _jsxs("div", { className: "ShareableLinkDialog__description", children: ["\uD83D\uDD12 ", t("alerts.uploadedSecurly")] })] }) }));
 };

package/dist/excalidraw/components/Stack.d.ts

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "align" | "gap" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "align" | "gap" | "className" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Pick<StackProps, "children" | "style" | "gap" | "className" | "align" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/dist/excalidraw/components/TTDDialog/common.js

@@ -2,6 +2,7 @@ import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE, EDITOR_LS_KEYS, } from "../.
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import { canvasToBlob } from "../../data/blob";
 import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+import { t } from "../../i18n";
 const resetPreview = ({ canvasRef, setError, }) => {
     const canvasNode = canvasRef.current;
     if (!canvasNode) {
@@ -55,7 +56,15 @@ export const convertMermaidToExcalidraw = async ({ canvasRef, mermaidToExcalidra
         });
         // if converting to blob fails, there's some problem that will
         // likely prevent preview and export (e.g. canvas too big)
-        await canvasToBlob(canvas);
+        try {
+            await canvasToBlob(canvas);
+        }
+        catch (e) {
+            if (e.name === "CANVAS_POSSIBLY_TOO_BIG") {
+                throw new Error(t("canvasError.canvasTooBig"));
+            }
+            throw e;
+        }
         parent.style.background = "var(--default-bg-color)";
         canvasNode.replaceChildren(canvas);
     }

package/dist/excalidraw/components/TextField.d.ts

@@ -1,7 +1,6 @@
 import { KeyboardEvent } from "react";
 import "./TextField.scss";
 type TextFieldProps = {
-    value?: string;
     onChange?: (value: string) => void;
     onClick?: () => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -11,6 +10,10 @@ type TextFieldProps = {
     label?: string;
     placeholder?: string;
     isRedacted?: boolean;
-};
+} & ({
+    value: string;
+} | {
+    defaultValue: string;
+});
 export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/excalidraw/components/TextField.js

@@ -4,7 +4,7 @@ import clsx from "clsx";
 import "./TextField.scss";
 import { Button } from "./Button";
 import { eyeIcon, eyeClosedIcon } from "./icons";
-export const TextField = forwardRef(({ value, onChange, label, fullWidth, placeholder, readonly, selectOnRender, onKeyDown, isRedacted = false, }, ref) => {
+export const TextField = forwardRef(({ onChange, label, fullWidth, placeholder, readonly, selectOnRender, onKeyDown, isRedacted = false, ...rest }, ref) => {
     const innerRef = useRef(null);
     useImperativeHandle(ref, () => innerRef.current);
     useLayoutEffect(() => {
@@ -20,6 +20,9 @@ export const TextField = forwardRef(({ value, onChange, label, fullWidth, placeh
         }, children: [_jsx("div", { className: "ExcTextField__label", children: label }), _jsxs("div", { className: clsx("ExcTextField__input", {
                     "ExcTextField__input--readonly": readonly,
                 }), children: [_jsx("input", { className: clsx({
-                            "is-redacted": value && isRedacted && !isTemporarilyUnredacted,
-                        }), readOnly: readonly, value: value, placeholder: placeholder, ref: innerRef, onChange: (event) => onChange?.(event.target.value), onKeyDown: onKeyDown }), isRedacted && (_jsx(Button, { onSelect: () => setIsTemporarilyUnredacted(!isTemporarilyUnredacted), style: { border: 0, userSelect: "none" }, children: isTemporarilyUnredacted ? eyeClosedIcon : eyeIcon }))] })] }));
+                            "is-redacted": "value" in rest &&
+                                rest.value &&
+                                isRedacted &&
+                                !isTemporarilyUnredacted,
+                        }), readOnly: readonly, value: "value" in rest ? rest.value : undefined, defaultValue: "defaultValue" in rest ? rest.defaultValue : undefined, placeholder: placeholder, ref: innerRef, onChange: (event) => onChange?.(event.target.value), onKeyDown: onKeyDown }), isRedacted && (_jsx(Button, { onSelect: () => setIsTemporarilyUnredacted(!isTemporarilyUnredacted), style: { border: 0, userSelect: "none" }, children: isTemporarilyUnredacted ? eyeClosedIcon : eyeIcon }))] })] }));
 });

package/dist/excalidraw/components/Toast.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from "react";
 import "./Toast.scss";
-export declare const Toast: ({ message, onClose, closable, duration, }: {
+export declare const Toast: ({ message, onClose, closable, duration, style, }: {
     message: string;
     onClose: () => void;
     closable?: boolean | undefined;
     duration?: number | undefined;
+    style?: CSSProperties | undefined;
 }) => JSX.Element;

package/dist/excalidraw/components/Toast.js

@@ -6,7 +6,7 @@ import { ToolButton } from "./ToolButton";
 const DEFAULT_TOAST_TIMEOUT = 5000;
 export const Toast = ({ message, onClose, closable = false, 
 // To prevent autoclose, pass duration as Infinity
-duration = DEFAULT_TOAST_TIMEOUT, }) => {
+duration = DEFAULT_TOAST_TIMEOUT, style, }) => {
     const timerRef = useRef(0);
     const shouldAutoClose = duration !== Infinity;
     const scheduleTimeout = useCallback(() => {
@@ -26,5 +26,5 @@ duration = DEFAULT_TOAST_TIMEOUT, }) => {
         ? () => clearTimeout(timerRef?.current)
         : undefined;
     const onMouseLeave = shouldAutoClose ? scheduleTimeout : undefined;
-    return (_jsxs("div", { className: "Toast", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsx("p", { className: "Toast__message", children: message }), closable && (_jsx(ToolButton, { icon: CloseIcon, "aria-label": "close", type: "icon", onClick: onClose, className: "close" }))] }));
+    return (_jsxs("div", { className: "Toast", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, children: [_jsx("p", { className: "Toast__message", children: message }), closable && (_jsx(ToolButton, { icon: CloseIcon, "aria-label": "close", type: "icon", onClick: onClose, className: "close" }))] }));
 };

package/dist/excalidraw/components/ToolButton.js

@@ -5,6 +5,7 @@ import clsx from "clsx";
 import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
 import Spinner from "./Spinner";
+import { isPromiseLike } from "../utils";
 export const ToolButton = React.forwardRef((props, ref) => {
     const { id: excalId } = useExcalidrawContainer();
     const innerRef = React.useRef(null);
@@ -14,7 +15,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
     const isMountedRef = useRef(true);
     const onClick = async (event) => {
         const ret = "onClick" in props && props.onClick?.(event);
-        if (ret && "then" in ret) {
+        if (isPromiseLike(ret)) {
             try {
                 setIsLoading(true);
                 await ret;

package/dist/excalidraw/components/canvases/InteractiveCanvas.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import type { DOMAttributes } from "react";
 import type { InteractiveCanvasAppState } from "../../types";
-import type { RenderInteractiveSceneCallback } from "../../scene/types";
+import type { RenderableElementsMap, RenderInteractiveSceneCallback } from "../../scene/types";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 type InteractiveCanvasProps = {
     containerRef: React.RefObject<HTMLDivElement>;
     canvas: HTMLCanvasElement | null;
-    elements: readonly NonDeletedExcalidrawElement[];
+    elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
     versionNonce: number | undefined;

package/dist/excalidraw/components/canvases/InteractiveCanvas.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import { renderInteractiveScene } from "../../renderer/renderScene";
-import { isRenderThrottlingEnabled, isShallowEqual, sceneCoordsToViewportCoords, } from "../../utils";
+import { isShallowEqual, sceneCoordsToViewportCoords } from "../../utils";
 import { CURSOR_TYPE } from "../../constants";
 import { t } from "../../i18n";
+import { isRenderThrottlingEnabled } from "../../reactUtils";
+import { renderInteractiveScene } from "../../renderer/interactiveScene";
 const InteractiveCanvas = (props) => {
     const isComponentMounted = useRef(false);
     useEffect(() => {
@@ -45,7 +46,7 @@ const InteractiveCanvas = (props) => {
             "#6965db";
         renderInteractiveScene({
             canvas: props.canvas,
-            elements: props.elements,
+            elementsMap: props.elementsMap,
             visibleElements: props.visibleElements,
             selectedElements: props.selectedElements,
             scale: window.devicePixelRatio,
@@ -103,10 +104,10 @@ const areEqual = (prevProps, nextProps) => {
     if (prevProps.selectionNonce !== nextProps.selectionNonce ||
         prevProps.versionNonce !== nextProps.versionNonce ||
         prevProps.scale !== nextProps.scale ||
-        // we need to memoize on element arrays because they may have renewed
+        // we need to memoize on elementsMap because they may have renewed
         // even if versionNonce didn't change (e.g. we filter elements out based
         // on appState)
-        prevProps.elements !== nextProps.elements ||
+        prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements ||
         prevProps.selectedElements !== nextProps.selectedElements) {
         return false;

package/dist/excalidraw/components/canvases/StaticCanvas.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
 import { RoughCanvas } from "roughjs/bin/canvas";
 import type { StaticCanvasAppState } from "../../types";
-import type { StaticCanvasRenderConfig } from "../../scene/types";
-import type { NonDeletedExcalidrawElement } from "../../element/types";
+import type { RenderableElementsMap, StaticCanvasRenderConfig } from "../../scene/types";
+import type { NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "../../element/types";
 type StaticCanvasProps = {
     canvas: HTMLCanvasElement;
     rc: RoughCanvas;
-    elements: readonly NonDeletedExcalidrawElement[];
+    elementsMap: RenderableElementsMap;
+    allElementsMap: NonDeletedSceneElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     versionNonce: number | undefined;
     selectionNonce: number | undefined;

package/dist/excalidraw/components/canvases/StaticCanvas.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect, useRef } from "react";
-import { renderStaticScene } from "../../renderer/renderScene";
-import { isRenderThrottlingEnabled, isShallowEqual } from "../../utils";
+import { renderStaticScene } from "../../renderer/staticScene";
+import { isShallowEqual } from "../../utils";
+import { isRenderThrottlingEnabled } from "../../reactUtils";
 const StaticCanvas = (props) => {
     const wrapperRef = useRef(null);
     const isComponentMounted = useRef(false);
@@ -38,7 +39,8 @@ const StaticCanvas = (props) => {
             canvas,
             rc: props.rc,
             scale: props.scale,
-            elements: props.elements,
+            elementsMap: props.elementsMap,
+            allElementsMap: props.allElementsMap,
             visibleElements: props.visibleElements,
             appState: props.appState,
             renderConfig: props.renderConfig,
@@ -70,10 +72,10 @@ const getRelevantAppStateProps = (appState) => ({
 const areEqual = (prevProps, nextProps) => {
     if (prevProps.versionNonce !== nextProps.versionNonce ||
         prevProps.scale !== nextProps.scale ||
-        // we need to memoize on element arrays because they may have renewed
+        // we need to memoize on elementsMap because they may have renewed
         // even if versionNonce didn't change (e.g. we filter elements out based
         // on appState)
-        prevProps.elements !== nextProps.elements ||
+        prevProps.elementsMap !== nextProps.elementsMap ||
         prevProps.visibleElements !== nextProps.visibleElements) {
         return false;
     }

package/dist/excalidraw/components/dropdownMenu/DropdownMenuContent.js

@@ -3,15 +3,35 @@ import { Island } from "../Island";
 import { useDevice } from "../App";
 import clsx from "clsx";
 import Stack from "../Stack";
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { DropdownMenuContentPropsContext } from "./common";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
+import { KEYS } from "../../keys";
+import { EVENT } from "../../constants";
+import { useStable } from "../../hooks/useStable";
 const MenuContent = ({ children, onClickOutside, className = "", onSelect, style, }) => {
     const device = useDevice();
     const menuRef = useRef(null);
+    const callbacksRef = useStable({ onClickOutside });
     useOutsideClick(menuRef, () => {
-        onClickOutside?.();
+        callbacksRef.onClickOutside?.();
     });
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (event.key === KEYS.ESCAPE) {
+                event.stopImmediatePropagation();
+                callbacksRef.onClickOutside?.();
+            }
+        };
+        document.addEventListener(EVENT.KEYDOWN, onKeyDown, {
+            // so that we can stop propagation of the event before it reaches
+            // event handlers that were bound before this one
+            capture: true,
+        });
+        return () => {
+            document.removeEventListener(EVENT.KEYDOWN, onKeyDown);
+        };
+    }, [callbacksRef]);
     const classNames = clsx(`dropdown-menu ${className}`, {
         "dropdown-menu--mobile": device.editor.isMobile,
     }).trim();

package/dist/excalidraw/components/dropdownMenu/common.d.ts

@@ -3,4 +3,4 @@ export declare const DropdownMenuContentPropsContext: React.Context<{
     onSelect?: ((event: Event) => void) | undefined;
 }>;
 export declare const getDropdownMenuItemClassName: (className?: string, selected?: boolean) => string;
-export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void;
+export declare const useHandleDropdownMenuItemClick: (origOnClick: React.MouseEventHandler<HTMLAnchorElement | HTMLButtonElement> | undefined, onSelect: ((event: Event) => void) | undefined) => (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;