@excalidraw/excalidraw 0.17.1-7500-ac247a0 → 0.17.1-a38e82f

package/dist/excalidraw/animated-trail.d.ts

@@ -0,0 +1,33 @@
+import { LaserPointerOptions } from "@excalidraw/laser-pointer";
+import { AnimationFrameHandler } from "./animation-frame-handler";
+import type App from "./components/App";
+export interface Trail {
+    start(container: SVGSVGElement): void;
+    stop(): void;
+    startPath(x: number, y: number): void;
+    addPointToPath(x: number, y: number): void;
+    endPath(): void;
+}
+export interface AnimatedTrailOptions {
+    fill: (trail: AnimatedTrail) => string;
+}
+export declare class AnimatedTrail implements Trail {
+    private animationFrameHandler;
+    private app;
+    private options;
+    private currentTrail?;
+    private pastTrails;
+    private container?;
+    private trailElement;
+    constructor(animationFrameHandler: AnimationFrameHandler, app: App, options: Partial<LaserPointerOptions> & Partial<AnimatedTrailOptions>);
+    get hasCurrentTrail(): boolean;
+    hasLastPoint(x: number, y: number): boolean;
+    start(container?: SVGSVGElement): void;
+    stop(): void;
+    startPath(x: number, y: number): void;
+    addPointToPath(x: number, y: number): void;
+    endPath(): void;
+    private update;
+    private onFrame;
+    private drawTrail;
+}

package/dist/excalidraw/animated-trail.js

@@ -0,0 +1,96 @@
+import { LaserPointer } from "@excalidraw/laser-pointer";
+import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
+import { SVG_NS } from "./constants";
+export class AnimatedTrail {
+    animationFrameHandler;
+    app;
+    options;
+    currentTrail;
+    pastTrails = [];
+    container;
+    trailElement;
+    constructor(animationFrameHandler, app, options) {
+        this.animationFrameHandler = animationFrameHandler;
+        this.app = app;
+        this.options = options;
+        this.animationFrameHandler.register(this, this.onFrame.bind(this));
+        this.trailElement = document.createElementNS(SVG_NS, "path");
+    }
+    get hasCurrentTrail() {
+        return !!this.currentTrail;
+    }
+    hasLastPoint(x, y) {
+        if (this.currentTrail) {
+            const len = this.currentTrail.originalPoints.length;
+            return (this.currentTrail.originalPoints[len - 1][0] === x &&
+                this.currentTrail.originalPoints[len - 1][1] === y);
+        }
+        return false;
+    }
+    start(container) {
+        if (container) {
+            this.container = container;
+        }
+        if (this.trailElement.parentNode !== this.container && this.container) {
+            this.container.appendChild(this.trailElement);
+        }
+        this.animationFrameHandler.start(this);
+    }
+    stop() {
+        this.animationFrameHandler.stop(this);
+        if (this.trailElement.parentNode === this.container) {
+            this.container?.removeChild(this.trailElement);
+        }
+    }
+    startPath(x, y) {
+        this.currentTrail = new LaserPointer(this.options);
+        this.currentTrail.addPoint([x, y, performance.now()]);
+        this.update();
+    }
+    addPointToPath(x, y) {
+        if (this.currentTrail) {
+            this.currentTrail.addPoint([x, y, performance.now()]);
+            this.update();
+        }
+    }
+    endPath() {
+        if (this.currentTrail) {
+            this.currentTrail.close();
+            this.currentTrail.options.keepHead = false;
+            this.pastTrails.push(this.currentTrail);
+            this.currentTrail = undefined;
+            this.update();
+        }
+    }
+    update() {
+        this.start();
+    }
+    onFrame() {
+        const paths = [];
+        for (const trail of this.pastTrails) {
+            paths.push(this.drawTrail(trail, this.app.state));
+        }
+        if (this.currentTrail) {
+            const currentPath = this.drawTrail(this.currentTrail, this.app.state);
+            paths.push(currentPath);
+        }
+        this.pastTrails = this.pastTrails.filter((trail) => {
+            return trail.getStrokeOutline().length !== 0;
+        });
+        if (paths.length === 0) {
+            this.stop();
+        }
+        const svgPaths = paths.join(" ").trim();
+        this.trailElement.setAttribute("d", svgPaths);
+        this.trailElement.setAttribute("fill", (this.options.fill ?? (() => "black"))(this));
+    }
+    drawTrail(trail, state) {
+        const stroke = trail
+            .getStrokeOutline(trail.options.size / state.zoom.value)
+            .map(([x, y]) => {
+            const result = sceneCoordsToViewportCoords({ sceneX: x, sceneY: y }, state);
+            return [result.x, result.y];
+        });
+        return getSvgPathFromStroke(stroke, true);
+    }
+}

package/dist/excalidraw/animation-frame-handler.d.ts

@@ -0,0 +1,16 @@
+export type AnimationCallback = (timestamp: number) => void | boolean;
+export type AnimationTarget = {
+    callback: AnimationCallback;
+    stopped: boolean;
+};
+export declare class AnimationFrameHandler {
+    private targets;
+    private rafIds;
+    register(key: object, callback: AnimationCallback): void;
+    start(key: object): void;
+    stop(key: object): void;
+    private constructFrame;
+    private scheduleFrame;
+    private cancelFrame;
+    private onFrame;
+}

package/dist/excalidraw/animation-frame-handler.js

@@ -0,0 +1,55 @@
+export class AnimationFrameHandler {
+    targets = new WeakMap();
+    rafIds = new WeakMap();
+    register(key, callback) {
+        this.targets.set(key, { callback, stopped: true });
+    }
+    start(key) {
+        const target = this.targets.get(key);
+        if (!target) {
+            return;
+        }
+        if (this.rafIds.has(key)) {
+            return;
+        }
+        this.targets.set(key, { ...target, stopped: false });
+        this.scheduleFrame(key);
+    }
+    stop(key) {
+        const target = this.targets.get(key);
+        if (target && !target.stopped) {
+            this.targets.set(key, { ...target, stopped: true });
+        }
+        this.cancelFrame(key);
+    }
+    constructFrame(key) {
+        return (timestamp) => {
+            const target = this.targets.get(key);
+            if (!target) {
+                return;
+            }
+            const shouldAbort = this.onFrame(target, timestamp);
+            if (!target.stopped && !shouldAbort) {
+                this.scheduleFrame(key);
+            }
+            else {
+                this.cancelFrame(key);
+            }
+        };
+    }
+    scheduleFrame(key) {
+        const rafId = requestAnimationFrame(this.constructFrame(key));
+        this.rafIds.set(key, rafId);
+    }
+    cancelFrame(key) {
+        if (this.rafIds.has(key)) {
+            const rafId = this.rafIds.get(key);
+            cancelAnimationFrame(rafId);
+        }
+        this.rafIds.delete(key);
+    }
+    onFrame(target, timestamp) {
+        const shouldAbort = target.callback(timestamp);
+        return shouldAbort ?? false;
+    }
+}

package/dist/excalidraw/appState.d.ts

@@ -30,7 +30,7 @@ export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>)
     scrollY?: number | undefined;
     cursorButton?: "up" | "down" | undefined;
     scrolledOutside?: boolean | undefined;
-    name?: string | undefined;
+    name?: string | null | undefined;
     zoom?: Readonly<{
         value: NormalizedZoomValue;
     }> | undefined;

package/dist/excalidraw/appState.js

@@ -1,7 +1,5 @@
 import { COLOR_PALETTE } from "./colors";
 import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, EXPORT_SCALES, THEME, } from "./constants";
-import { t } from "./i18n";
-import { getDateTime } from "./utils";
 const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
     ? devicePixelRatio
     : 1;
@@ -52,7 +50,7 @@ export const getDefaultAppState = () => {
         isRotating: false,
         lastPointerDownWith: "mouse",
         multiElement: null,
-        name: `${t("labels.untitled")}-${getDateTime()}`,
+        name: null,
         contextMenu: null,
         openMenu: null,
         openPopup: null,

package/dist/excalidraw/clipboard.js

@@ -4,8 +4,7 @@ import { isFrameLikeElement, isInitializedImageElement, } from "./element/typeCh
 import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
-import { isMemberOf, isPromiseLike } from "./utils";
-import { t } from "./i18n";
+import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
 export const probablySupportsClipboardReadText = "clipboard" in navigator && "readText" in navigator.clipboard;
 export const probablySupportsClipboardWriteText = "clipboard" in navigator && "writeText" in navigator.clipboard;
 export const probablySupportsClipboardBlob = "clipboard" in navigator &&
@@ -61,6 +60,7 @@ export const createPasteEvent = ({ types, files, }) => {
     return event;
 };
 export const serializeAsClipboardJSON = ({ elements, files, }) => {
+    const elementsMap = arrayToMap(elements);
     const framesToCopy = new Set(elements.filter((element) => isFrameLikeElement(element)));
     let foundFile = false;
     const _files = elements.reduce((acc, element) => {
@@ -79,8 +79,8 @@ export const serializeAsClipboardJSON = ({ elements, files, }) => {
     const contents = {
         type: EXPORT_DATA_TYPES.excalidrawClipboard,
         elements: elements.map((element) => {
-            if (getContainingFrame(element) &&
-                !framesToCopy.has(getContainingFrame(element))) {
+            if (getContainingFrame(element, elementsMap) &&
+                !framesToCopy.has(getContainingFrame(element, elementsMap))) {
                 const copiedElement = deepCopyElement(element);
                 mutateElement(copiedElement, {
                     frameId: null,
@@ -313,7 +313,7 @@ export const copyTextToSystemClipboard = async (text, clipboardEvent) => {
     }
     // (3) if that fails, use document.execCommand
     if (!copyTextViaExecCommand(text)) {
-        throw new Error(t("errors.copyToSystemClipboardFailed"));
+        throw new Error("Error copying to clipboard.");
     }
 };
 // adapted from https://github.com/zenorocha/clipboard.js/blob/ce79f170aa655c408b6aab33c9472e8e4fa52e19/src/clipboard-action.js#L48

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { ActionManager } from "../actions/manager";
-import { ExcalidrawElement } from "../element/types";
+import { NonDeletedElementsMap, NonDeletedSceneElementsMap } from "../element/types";
 import { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import "./Actions.scss";
-export declare const SelectedShapeActions: ({ appState, elements, renderAction, }: {
+export declare const SelectedShapeActions: ({ appState, elementsMap, renderAction, }: {
     appState: UIAppState;
-    elements: readonly ExcalidrawElement[];
+    elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
     renderAction: ActionManager["renderAction"];
 }) => JSX.Element;
 export declare const ShapesSwitcher: ({ activeTool, appState, app, UIOptions, }: {

package/dist/excalidraw/components/Actions.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { getNonDeletedElements } from "../element";
 import { t } from "../i18n";
 import { useDevice } from "./App";
 import { canChangeRoundness, canHaveArrowheads, getTargetElements, hasBackground, hasStrokeStyle, hasStrokeWidth, } from "../scene";
@@ -20,8 +19,8 @@ import DropdownMenu from "./dropdownMenu/DropdownMenu";
 import { EmbedIcon, extraToolsIcon, frameToolIcon, mermaidLogoIcon, laserPointerToolIcon, OpenAIIcon, MagicIcon, } from "./icons";
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
-export const SelectedShapeActions = ({ appState, elements, renderAction, }) => {
-    const targetElements = getTargetElements(getNonDeletedElements(elements), appState);
+export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) => {
+    const targetElements = getTargetElements(elementsMap, appState);
     let isSingleElementBoundContainer = false;
     if (targetElements.length === 2 &&
         (hasBoundTextElement(targetElements[0]) ||
@@ -58,8 +57,8 @@ export const SelectedShapeActions = ({ appState, elements, renderAction, }) => {
                 targetElements.some((element) => hasStrokeStyle(element.type))) && (_jsxs(_Fragment, { children: [renderAction("changeStrokeStyle"), renderAction("changeSloppiness")] })), (canChangeRoundness(appState.activeTool.type) ||
                 targetElements.some((element) => canChangeRoundness(element.type))) && (_jsx(_Fragment, { children: renderAction("changeRoundness") })), (appState.activeTool.type === "text" ||
                 targetElements.some(isTextElement)) && (_jsxs(_Fragment, { children: [renderAction("changeFontSize"), renderAction("changeFontFamily"), (appState.activeTool.type === "text" ||
-                        suppportsHorizontalAlign(targetElements)) &&
-                        renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements) &&
+                        suppportsHorizontalAlign(targetElements, elementsMap)) &&
+                        renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
                 targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringToFront"), renderAction("bringForward")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
                                 renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
@@ -103,14 +102,26 @@ export const ShapesSwitcher = ({ activeTool, appState, app, UIOptions, }) => {
                             app.setActiveTool({ type: value });
                         }
                     } }, value));
-            }), _jsx("div", { className: "App-toolbar__divider" }), _jsxs(DropdownMenu, { open: isExtraToolsMenuOpen, children: [_jsx(DropdownMenu.Trigger, { className: clsx("App-toolbar__extra-tools-trigger", {
+            }), _jsx("div", { className: "App-toolbar__divider" }), _jsxs(DropdownMenu, { open: isExtraToolsMenuOpen, children: [_jsxs(DropdownMenu.Trigger, { className: clsx("App-toolbar__extra-tools-trigger", {
                             "App-toolbar__extra-tools-trigger--selected": frameToolSelected ||
                                 embeddableToolSelected ||
                                 // in collab we're already highlighting the laser button
                                 // outside toolbar, so let's not highlight extra-tools button
                                 // on top of it
                                 (laserToolSelected && !app.props.isCollaborating),
-                        }), onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen), title: t("toolBar.extraTools"), children: extraToolsIcon }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {
+                        }), onToggle: () => setIsExtraToolsMenuOpen(!isExtraToolsMenuOpen), title: t("toolBar.extraTools"), children: [extraToolsIcon, app.props.aiEnabled !== false && (_jsx("div", { style: {
+                                    display: "inline-flex",
+                                    marginLeft: "auto",
+                                    padding: "2px 4px",
+                                    borderRadius: 6,
+                                    fontSize: 8,
+                                    fontFamily: "Cascadia, monospace",
+                                    position: "absolute",
+                                    background: "pink",
+                                    color: "black",
+                                    bottom: 3,
+                                    right: 4,
+                                }, children: "AI" }))] }), _jsxs(DropdownMenu.Content, { onClickOutside: () => setIsExtraToolsMenuOpen(false), onSelect: () => setIsExtraToolsMenuOpen(false), className: "App-toolbar__extra-tools-dropdown", children: [_jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "frame" }), icon: frameToolIcon, shortcut: KEYS.F.toLocaleUpperCase(), "data-testid": "toolbar-frame", selected: frameToolSelected, children: t("toolBar.frame") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "embeddable" }), icon: EmbedIcon, "data-testid": "toolbar-embeddable", selected: embeddableToolSelected, children: t("toolBar.embeddable") }), _jsx(DropdownMenu.Item, { onSelect: () => app.setActiveTool({ type: "laser" }), icon: laserPointerToolIcon, "data-testid": "toolbar-laser", selected: laserToolSelected, shortcut: KEYS.K.toLocaleUpperCase(), children: t("toolBar.laser") }), _jsx("div", { style: { margin: "6px 0", fontSize: 14, fontWeight: 600 }, children: "Generate" }), app.props.aiEnabled !== false && _jsx(TTDDialogTriggerTunnel.Out, {}), _jsx(DropdownMenu.Item, { onSelect: () => app.setOpenDialog({ name: "ttd", tab: "mermaid" }), icon: mermaidLogoIcon, "data-testid": "toolbar-embeddable", children: t("toolBar.mermaidToExcalidraw") }), app.props.aiEnabled !== false && (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu.Item, { onSelect: () => app.onMagicframeToolSelect(), icon: MagicIcon, "data-testid": "toolbar-magicframe", children: [t("toolBar.magicframe"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }), _jsx(DropdownMenu.Item, { onSelect: () => {
                                             trackEvent("ai", "open-settings", "d2c");
                                             app.setOpenDialog({
                                                 name: "settings",

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

@@ -4,14 +4,16 @@ import { ActionManager } from "../actions/manager";
 import { EXPORT_IMAGE_TYPES } from "../constants";
 import { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement } from "../element/types";
+import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement, ExcalidrawEmbeddableElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType, OnUserFollowedPayload } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
 import { Renderer } from "../scene/Renderer";
-import { LaserPathManager } from "./LaserTool/LaserPathManager";
 import { Emitter } from "../emitter";
+import { AnimationFrameHandler } from "../animation-frame-handler";
+import { AnimatedTrail } from "../animated-trail";
+import { LaserTrails } from "../laser-trails";
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
     id: string | null;
@@ -58,6 +60,17 @@ declare class App extends React.Component<AppProps, AppState> {
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
     private iFrameRefs;
+    /**
+     * Indicates whether the embeddable's url has been validated for rendering.
+     * If value not set, indicates that the validation is pending.
+     * Initially or on url change the flag is not reset so that we can guarantee
+     * the validation came from a trusted source (the editor).
+     **/
+    private embedsValidationStatus;
+    /** embeds that have been inserted to DOM (as a perf optim, we don't want to
+     * insert to DOM before user initially scrolls to them) */
+    private initializedEmbeds;
+    private elementsPendingErasure;
     hitLinkElement?: NonDeletedExcalidrawElement;
     lastPointerDownEvent: React.PointerEvent<HTMLElement> | null;
     lastPointerUpEvent: React.PointerEvent<HTMLElement> | PointerEvent | null;
@@ -66,7 +79,9 @@ declare class App extends React.Component<AppProps, AppState> {
         x: number;
         y: number;
     };
-    laserPathManager: LaserPathManager;
+    animationFrameHandler: AnimationFrameHandler;
+    laserTrails: LaserTrails;
+    eraserTrail: AnimatedTrail;
     onChangeEmitter: Emitter<[elements: readonly ExcalidrawElement[], appState: AppState, files: BinaryFiles]>;
     onPointerDownEmitter: Emitter<[activeTool: {
         lastActiveTool: import("../types").ActiveTool | null;
@@ -131,12 +146,6 @@ declare class App extends React.Component<AppProps, AppState> {
         boxSelection: {
             hasOccurred: boolean;
         };
-        elementIdsToErase: {
-            [key: string]: {
-                opacity: number;
-                erase: boolean;
-            };
-        };
     }>, event: React.PointerEvent<HTMLElement>]>;
     onPointerUpEmitter: Emitter<[activeTool: {
         lastActiveTool: import("../types").ActiveTool | null;
@@ -201,12 +210,6 @@ declare class App extends React.Component<AppProps, AppState> {
         boxSelection: {
             hasOccurred: boolean;
         };
-        elementIdsToErase: {
-            [key: string]: {
-                opacity: number;
-                erase: boolean;
-            };
-        };
     }>, event: PointerEvent]>;
     onUserFollowEmitter: Emitter<[payload: OnUserFollowedPayload]>;
     onScrollChangeEmitter: Emitter<[scrollX: number, scrollY: number, zoom: Readonly<{
@@ -220,11 +223,13 @@ declare class App extends React.Component<AppProps, AppState> {
     private getHTMLIFrameElement;
     private handleEmbeddableCenterClick;
     private isIframeLikeElementCenter;
+    private updateEmbedValidationStatus;
     private updateEmbeddables;
     private renderEmbeddables;
     private getFrameNameDOMId;
     frameNameBoundsCache: FrameNameBoundsCache;
     private renderFrameNames;
+    private toggleOverscrollBehavior;
     render(): JSX.Element;
     focusContainer: AppClassProperties["focusContainer"];
     getSceneElementsIncludingDeleted: () => readonly ExcalidrawElement[];
@@ -370,6 +375,7 @@ declare class App extends React.Component<AppProps, AppState> {
      * GestureEvent is standardized.
      */
     private isTouchScreenMultiTouchGesture;
+    getName: () => string;
     private onGestureStart;
     private onGestureChange;
     private onGestureEnd;
@@ -420,7 +426,7 @@ declare class App extends React.Component<AppProps, AppState> {
         sceneX: number;
         sceneY: number;
         link: string;
-    }) => NonDeleted<import("../element/types").ExcalidrawEmbeddableElement> | undefined;
+    }) => NonDeleted<ExcalidrawEmbeddableElement> | undefined;
     private createImageElement;
     private handleLinearElementOnPointerDown;
     private getCurrentItemRoundness;
@@ -483,4 +489,5 @@ declare global {
         };
     }
 }
+export declare const createTestHook: () => void;
 export default App;