@excalidraw/excalidraw 0.17.1-1ed53b1 → 0.17.1-22b3927

package/dist/excalidraw/element/textWysiwyg.js

@@ -23,7 +23,7 @@ const getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
     }
     return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
-export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }) => {
+export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect = true, }) => {
     const textPropertiesUpdated = (updatedTextElement, editable) => {
         if (!editable.style.fontFamily || !editable.style.fontSize) {
             return false;
@@ -53,8 +53,6 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
             let textElementWidth = updatedTextElement.width;
-            // Set to element height by default since that's
-            // what is going to be used for unbounded text
             const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
@@ -113,6 +111,9 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
                 textElementWidth = Math.min(textElementWidth, maxWidth);
             }
+            else {
+                textElementWidth += 0.5;
+            }
             // Make sure text editor height doesn't go beyond viewport
             const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
             Object.assign(editable.style, {
@@ -149,7 +150,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     editable.classList.add("excalidraw-wysiwyg");
     let whiteSpace = "pre";
     let wordBreak = "normal";
-    if (isBoundToContainer(element)) {
+    if (isBoundToContainer(element) || !element.autoResize) {
         whiteSpace = "pre-wrap";
         wordBreak = "break-word";
     }
@@ -326,6 +327,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     // so that we don't need to create separate a callback for event handlers
     let submittedViaKeyboard = false;
     const handleSubmit = () => {
+        // prevent double submit
+        if (isDestroyed) {
+            return;
+        }
+        isDestroyed = true;
         // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg
         // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
         // wysiwyg on update
@@ -334,10 +340,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         if (!updateElement) {
             return;
         }
-        let text = editable.value;
         const container = getContainerElement(updateElement, app.scene.getNonDeletedElementsMap());
         if (container) {
-            text = updateElement.text;
             if (editable.value.trim()) {
                 const boundTextElementId = getBoundTextElementId(container);
                 if (!boundTextElementId || boundTextElementId !== element.id) {
@@ -361,16 +365,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             redrawTextBoundingBox(updateElement, container, app.scene.getNonDeletedElementsMap());
         }
         onSubmit({
-            text,
             viaKeyboard: submittedViaKeyboard,
-            originalText: editable.value,
+            nextOriginalText: editable.value,
         });
     };
     const cleanup = () => {
-        if (isDestroyed) {
-            return;
-        }
-        isDestroyed = true;
         // remove events to ensure they don't late-fire
         editable.onblur = null;
         editable.oninput = null;
@@ -439,9 +438,24 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             // alt-tabbing away
             window.addEventListener("blur", handleSubmit);
         }
+        else if (event.target instanceof HTMLElement &&
+            !event.target.contains(editable) &&
+            // Vitest simply ignores stopPropagation, capture-mode, or rAF
+            // so without introducing crazier hacks, nothing we can do
+            !isTestEnv()) {
+            // On mobile, blur event doesn't seem to always fire correctly,
+            // so we want to also submit on pointerdown outside the wysiwyg.
+            // Done in the next frame to prevent pointerdown from creating a new text
+            // immediately (if tools locked) so that users on mobile have chance
+            // to submit first (to hide virtual keyboard).
+            // Note: revisit if we want to differ this behavior on Desktop
+            requestAnimationFrame(() => {
+                handleSubmit();
+            });
+        }
     };
     // handle updates of textElement properties of editing element
-    const unbindUpdate = Scene.getScene(element).addCallback(() => {
+    const unbindUpdate = Scene.getScene(element).onUpdate(() => {
         updateWysiwygStyle();
         const isColorPickerActive = !!document.activeElement?.closest(".color-picker-content");
         if (!isColorPickerActive) {
@@ -450,9 +464,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     });
     // ---------------------------------------------------------------------------
     let isDestroyed = false;
-    // select on init (focusing is done separately inside the bindBlurEvent()
-    // because we need it to happen *after* the blur event from `pointerdown`)
-    editable.select();
+    if (autoSelect) {
+        // select on init (focusing is done separately inside the bindBlurEvent()
+        // because we need it to happen *after* the blur event from `pointerdown`)
+        editable.select();
+    }
     bindBlurEvent();
     // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
     // is preferred so we catch changes from host, where window may not resize.
@@ -466,7 +482,12 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     else {
         window.addEventListener("resize", updateWysiwygStyle);
     }
-    window.addEventListener("pointerdown", onPointerDown);
+    editable.onpointerdown = (event) => event.stopPropagation();
+    // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that
+    // triggered the wysiwyg
+    requestAnimationFrame(() => {
+        window.addEventListener("pointerdown", onPointerDown, { capture: true });
+    });
     window.addEventListener("wheel", stopEvent, {
         passive: false,
         capture: true,

package/dist/excalidraw/element/transformHandles.js

@@ -1,6 +1,5 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isTextElement } from ".";
 import { isFrameLikeElement, isLinearElement } from "./typeChecks";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
@@ -28,12 +27,6 @@ export const OMIT_SIDES_FOR_FRAME = {
     w: true,
     rotation: true,
 };
-const OMIT_SIDES_FOR_TEXT_ELEMENT = {
-    e: true,
-    s: true,
-    n: true,
-    w: true,
-};
 const OMIT_SIDES_FOR_LINE_SLASH = {
     e: true,
     s: true,
@@ -147,9 +140,6 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
             }
         }
     }
-    else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-    }
     else if (isFrameLikeElement(element)) {
         omitSides = {
             ...omitSides,

package/dist/excalidraw/element/types.d.ts

@@ -154,6 +154,13 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
     originalText: string;
+    /**
+     * If `true` the width will fit the text. If `false`, the text will
+     * wrap to fit the width.
+     *
+     * @default true
+     */
+    autoResize: boolean;
     /**
      * Unitless line height (aligned to W3C). To get line height in px, multiply
      *  with font size (using `getLineHeightInPx` helper).

package/dist/excalidraw/fractionalIndex.js

@@ -97,12 +97,10 @@ const getMovedIndicesGroups = (elements, movedElements) => {
     const indicesGroups = [];
     let i = 0;
     while (i < elements.length) {
-        if (movedElements.has(elements[i].id) &&
-            !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index)) {
+        if (movedElements.has(elements[i].id)) {
             const indicesGroup = [i - 1, i]; // push the lower bound index as the first item
             while (++i < elements.length) {
-                if (!(movedElements.has(elements[i].id) &&
-                    !isValidFractionalIndex(elements[i]?.index, elements[i - 1]?.index, elements[i + 1]?.index))) {
+                if (!movedElements.has(elements[i].id)) {
                     break;
                 }
                 indicesGroup.push(i);

package/dist/excalidraw/locales/en.json

@@ -148,7 +148,9 @@
         "discordChat": "Discord chat",
         "zoomToFitViewport": "Zoom to fit in viewport",
         "zoomToFitSelection": "Zoom to fit selection",
-        "zoomToFit": "Zoom to fit all elements"
+        "zoomToFit": "Zoom to fit all elements",
+        "installPWA": "Install Excalidraw locally (PWA)",
+        "autoResize": "Enable text auto-resizing"
     },
     "library": {
         "noItems": "No items added yet...",

package/dist/excalidraw/mermaid.d.ts

@@ -0,0 +1,2 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export declare const isMaybeMermaidDefinition: (text: string) => boolean;

package/dist/excalidraw/mermaid.js

@@ -0,0 +1,28 @@
+/** heuristically checks whether the text may be a mermaid diagram definition */
+export const isMaybeMermaidDefinition = (text) => {
+    const chartTypes = [
+        "flowchart",
+        "sequenceDiagram",
+        "classDiagram",
+        "stateDiagram",
+        "stateDiagram-v2",
+        "erDiagram",
+        "journey",
+        "gantt",
+        "pie",
+        "quadrantChart",
+        "requirementDiagram",
+        "gitGraph",
+        "C4Context",
+        "mindmap",
+        "timeline",
+        "zenuml",
+        "sankey",
+        "xychart",
+        "block",
+    ];
+    const re = new RegExp(`^(?:%%{.*?}%%[\\s\\n]*)?\\b${chartTypes
+        .map((x) => `${x}(-beta)?`)
+        .join("|")}\\b`);
+    return re.test(text.trim());
+};

package/dist/excalidraw/renderer/interactiveScene.d.ts

@@ -9,7 +9,7 @@ export declare const renderInteractiveSceneThrottled: {
  * Interactive scene is the ui-canvas where we render bounding boxes, selections
  * and other ui stuff.
  */
-export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
+export declare const renderInteractiveScene: <U extends ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }: InteractiveSceneRenderConfig) => {
     atLeastOneVisibleElement: boolean;
     elementsMap: RenderableElementsMap;
     scrollBars?: undefined;

package/dist/excalidraw/renderer/interactiveScene.js

@@ -12,7 +12,7 @@ import { maxBindingGap } from "../element/binding";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bootstrapCanvas, fillCircle, getNormalizedCanvasDimensions, } from "./helpers";
 import oc from "open-color";
-import { isFrameLikeElement, isLinearElement } from "../element/typeChecks";
+import { isFrameLikeElement, isLinearElement, isTextElement, } from "../element/typeChecks";
 const renderLinearElementPointHighlight = (context, appState, elementsMap) => {
     const { elementId, hoverPointIndex } = appState.selectedLinearElement;
     if (appState.editingLinearElement?.selectedPointsIndices?.includes(hoverPointIndex)) {
@@ -124,10 +124,11 @@ const renderBindingHighlightForSuggestedPointBinding = (context, suggestedBindin
         fillCircle(context, x, y, threshold);
     });
 };
-const renderSelectionBorder = (context, appState, elementProperties, padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2) => {
+const renderSelectionBorder = (context, appState, elementProperties) => {
     const { angle, elementX1, elementY1, elementX2, elementY2, selectionColors, cx, cy, dashed, activeEmbeddable, } = elementProperties;
     const elementWidth = elementX2 - elementX1;
     const elementHeight = elementY2 - elementY1;
+    const padding = DEFAULT_TRANSFORM_HANDLE_SPACING * 2;
     const linePadding = padding / appState.zoom.value;
     const lineWidth = 8 / appState.zoom.value;
     const spaceWidth = 4 / appState.zoom.value;
@@ -264,7 +265,23 @@ const renderTransformHandles = (context, renderConfig, appState, transformHandle
         }
     });
 };
-const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, scale, appState, renderConfig, device, }) => {
+const renderTextBox = (text, context, appState, selectionColor) => {
+    context.save();
+    const padding = (DEFAULT_TRANSFORM_HANDLE_SPACING * 2) / appState.zoom.value;
+    const width = text.width + padding * 2;
+    const height = text.height + padding * 2;
+    const cx = text.x + width / 2;
+    const cy = text.y + height / 2;
+    const shiftX = -(width / 2 + padding);
+    const shiftY = -(height / 2 + padding);
+    context.translate(cx + appState.scrollX, cy + appState.scrollY);
+    context.rotate(text.angle);
+    context.lineWidth = 1 / appState.zoom.value;
+    context.strokeStyle = selectionColor;
+    context.strokeRect(shiftX, shiftY, width, height);
+    context.restore();
+};
+const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selectedElements, allElementsMap, scale, appState, renderConfig, device, }) => {
     if (canvas === null) {
         return { atLeastOneVisibleElement: false, elementsMap };
     }
@@ -295,12 +312,18 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
     // Paint selection element
     if (appState.selectionElement) {
         try {
-            renderSelectionElement(appState.selectionElement, context, appState);
+            renderSelectionElement(appState.selectionElement, context, appState, renderConfig.selectionColor);
         }
         catch (error) {
             console.error(error);
         }
     }
+    if (appState.editingElement && isTextElement(appState.editingElement)) {
+        const textElement = allElementsMap.get(appState.editingElement.id);
+        if (textElement && !textElement.autoResize) {
+            renderTextBox(textElement, context, appState, renderConfig.selectionColor);
+        }
+    }
     if (appState.isBindingEnabled) {
         appState.suggestedBindings
             .filter((binding) => binding != null)
@@ -405,7 +428,10 @@ const _renderInteractiveScene = ({ canvas, elementsMap, visibleElements, selecte
             context.fillStyle = oc.white;
             const transformHandles = getTransformHandles(selectedElements[0], appState.zoom, elementsMap, "mouse", // when we render we don't know which pointer type so use mouse,
             getOmitSidesForDevice(device));
-            if (!appState.viewModeEnabled && showBoundingBox) {
+            if (!appState.viewModeEnabled &&
+                showBoundingBox &&
+                // do not show transform handles when text is being edited
+                !isTextElement(appState.editingElement)) {
                 renderTransformHandles(context, renderConfig, appState, transformHandles, selectedElements[0].angle);
             }
         }

package/dist/excalidraw/renderer/renderElement.d.ts

@@ -1,6 +1,6 @@
 import type { ExcalidrawElement, ExcalidrawTextElement, NonDeletedExcalidrawElement, ExcalidrawFreeDrawElement, ExcalidrawFrameLikeElement, NonDeletedSceneElementsMap } from "../element/types";
 import type { RoughCanvas } from "roughjs/bin/canvas";
-import type { StaticCanvasRenderConfig, RenderableElementsMap } from "../scene/types";
+import type { StaticCanvasRenderConfig, RenderableElementsMap, InteractiveCanvasRenderConfig } from "../scene/types";
 import type { AppState, StaticCanvasAppState, InteractiveCanvasAppState, ElementsPendingErasure } from "../types";
 export declare const IMAGE_INVERT_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
 export declare const getRenderOpacity: (element: ExcalidrawElement, containingFrame: ExcalidrawFrameLikeElement | null, elementsPendingErasure: ElementsPendingErasure) => number;
@@ -17,7 +17,7 @@ export interface ExcalidrawElementWithCanvas {
 }
 export declare const DEFAULT_LINK_SIZE = 14;
 export declare const elementWithCanvasCache: WeakMap<ExcalidrawElement, ExcalidrawElementWithCanvas>;
-export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState) => void;
+export declare const renderSelectionElement: (element: NonDeletedExcalidrawElement, context: CanvasRenderingContext2D, appState: InteractiveCanvasAppState, selectionColor: InteractiveCanvasRenderConfig["selectionColor"]) => void;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, elementsMap: RenderableElementsMap, allElementsMap: NonDeletedSceneElementsMap, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: StaticCanvasRenderConfig, appState: StaticCanvasAppState) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;

package/dist/excalidraw/renderer/renderElement.js

@@ -323,7 +323,7 @@ const drawElementFromCanvas = (elementWithCanvas, context, renderConfig, appStat
     context.restore();
     // Clear the nested element we appended to the DOM
 };
-export const renderSelectionElement = (element, context, appState) => {
+export const renderSelectionElement = (element, context, appState, selectionColor) => {
     context.save();
     context.translate(element.x + appState.scrollX, element.y + appState.scrollY);
     context.fillStyle = "rgba(0, 0, 200, 0.04)";
@@ -334,7 +334,7 @@ export const renderSelectionElement = (element, context, appState) => {
     const offset = 0.5 / appState.zoom.value;
     context.fillRect(offset, offset, element.width, element.height);
     context.lineWidth = 1 / appState.zoom.value;
-    context.strokeStyle = " rgb(105, 101, 219)";
+    context.strokeStyle = selectionColor;
     context.strokeRect(offset, offset, element.width, element.height);
     context.restore();
 };

package/dist/excalidraw/scene/Fonts.d.ts

@@ -2,10 +2,8 @@ import type { ExcalidrawElement } from "../element/types";
 import type Scene from "./Scene";
 export declare class Fonts {
     private scene;
-    private onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }: {
+    constructor({ scene }: {
         scene: Scene;
-        onSceneUpdated: () => void;
     });
     private static loadedFontFaces;
     /**

package/dist/excalidraw/scene/Fonts.js

@@ -1,15 +1,11 @@
-import { isTextElement, refreshTextDimensions } from "../element";
+import { isTextElement } from "../element";
 import { newElementWith } from "../element/mutateElement";
-import { getContainerElement } from "../element/textElement";
-import { isBoundToContainer } from "../element/typeChecks";
 import { getFontString } from "../utils";
 import { ShapeCache } from "./ShapeCache";
 export class Fonts {
     scene;
-    onSceneUpdated;
-    constructor({ scene, onSceneUpdated, }) {
+    constructor({ scene }) {
         this.scene = scene;
-        this.onSceneUpdated = onSceneUpdated;
     }
     // it's ok to track fonts across multiple instances only once, so let's use
     // a static member to reduce memory footprint
@@ -39,17 +35,15 @@ export class Fonts {
         }
         let didUpdate = false;
         this.scene.mapElements((element) => {
-            if (isTextElement(element) && !isBoundToContainer(element)) {
-                ShapeCache.delete(element);
+            if (isTextElement(element)) {
                 didUpdate = true;
-                return newElementWith(element, {
-                    ...refreshTextDimensions(element, getContainerElement(element, this.scene.getNonDeletedElementsMap()), this.scene.getNonDeletedElementsMap()),
-                });
+                ShapeCache.delete(element);
+                return newElementWith(element, {}, true);
             }
             return element;
         });
         if (didUpdate) {
-            this.onSceneUpdated();
+            this.scene.triggerUpdate();
         }
     };
     loadFontsForElements = async (elements) => {

package/dist/excalidraw/scene/Renderer.d.ts

@@ -14,7 +14,7 @@ export declare class Renderer {
         width: AppState["width"];
         editingElement: AppState["editingElement"];
         pendingImageElementId: AppState["pendingImageElementId"];
-        versionNonce: ReturnType<InstanceType<typeof Scene>["getVersionNonce"]>;
+        sceneNonce: ReturnType<InstanceType<typeof Scene>["getSceneNonce"]>;
     }) => {
         elementsMap: Map<string, NonDeletedExcalidrawElement> & import("../utility-types").MakeBrand<"NonDeletedElementsMap"> & import("../utility-types").MakeBrand<"RenderableElementsMap">;
         visibleElements: readonly NonDeletedExcalidrawElement[];

package/dist/excalidraw/scene/Renderer.js

@@ -45,9 +45,8 @@ export class Renderer {
             return elementsMap;
         };
         return memoize(({ zoom, offsetLeft, offsetTop, scrollX, scrollY, height, width, editingElement, pendingImageElementId, 
-        // unused but serves we cache on it to invalidate elements if they
-        // get mutated
-        versionNonce: _versionNonce, }) => {
+        // cache-invalidation nonce
+        sceneNonce: _sceneNonce, }) => {
             const elements = this.scene.getNonDeletedElements();
             const elementsMap = getRenderableElements({
                 elements,

package/dist/excalidraw/scene/Scene.d.ts

@@ -19,7 +19,14 @@ declare class Scene {
     private frames;
     private elementsMap;
     private selectedElementsCache;
-    private versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    private sceneNonce;
+    getSceneNonce(): number | undefined;
     getNonDeletedElementsMap(): Map<string, Ordered<NonDeletedExcalidrawElement>> & import("../utility-types").MakeBrand<"NonDeletedSceneElementsMap">;
     getElementsIncludingDeleted(): readonly OrderedExcalidrawElement[];
     getElementsMapIncludingDeleted(): Map<string, Ordered<ExcalidrawElement>> & import("../utility-types").MakeBrand<"SceneElementsMap">;
@@ -38,7 +45,6 @@ declare class Scene {
     }): NonDeleted<ExcalidrawElement>[];
     getNonDeletedFramesLikes(): readonly NonDeleted<ExcalidrawFrameLikeElement>[];
     getElement<T extends ExcalidrawElement>(id: T["id"]): T | null;
-    getVersionNonce(): number | undefined;
     getNonDeletedElement(id: ExcalidrawElement["id"]): NonDeleted<ExcalidrawElement> | null;
     /**
      * A utility method to help with updating all scene elements, with the added
@@ -54,8 +60,8 @@ declare class Scene {
      */
     mapElements(iteratee: (element: ExcalidrawElement) => ExcalidrawElement): boolean;
     replaceAllElements(nextElements: ElementsMapOrArray): void;
-    informMutation(): void;
-    addCallback(cb: SceneStateCallback): SceneStateCallbackRemover;
+    triggerUpdate(): void;
+    onUpdate(cb: SceneStateCallback): SceneStateCallbackRemover;
     destroy(): void;
     insertElementAtIndex(element: ExcalidrawElement, index: number): void;
     insertElementsAtIndex(elements: ExcalidrawElement[], index: number): void;

package/dist/excalidraw/scene/Scene.js

@@ -72,7 +72,16 @@ class Scene {
         elements: null,
         cache: new Map(),
     };
-    versionNonce;
+    /**
+     * Random integer regenerated each scene update.
+     *
+     * Does not relate to elements versions, it's only a renderer
+     * cache-invalidation nonce at the moment.
+     */
+    sceneNonce;
+    getSceneNonce() {
+        return this.sceneNonce;
+    }
     getNonDeletedElementsMap() {
         return this.nonDeletedElementsMap;
     }
@@ -118,9 +127,6 @@ class Scene {
     getElement(id) {
         return this.elementsMap.get(id) || null;
     }
-    getVersionNonce() {
-        return this.versionNonce;
-    }
     getNonDeletedElement(id) {
         const element = this.getElement(id);
         if (element && isNonDeletedElement(element)) {
@@ -179,15 +185,15 @@ class Scene {
         this.nonDeletedElementsMap = nonDeletedElements.elementsMap;
         this.frames = nextFrameLikes;
         this.nonDeletedFramesLikes = getNonDeletedElements(this.frames).elements;
-        this.informMutation();
+        this.triggerUpdate();
     }
-    informMutation() {
-        this.versionNonce = randomInteger();
+    triggerUpdate() {
+        this.sceneNonce = randomInteger();
         for (const callback of Array.from(this.callbacks)) {
             callback();
         }
     }
-    addCallback(cb) {
+    onUpdate(cb) {
         if (this.callbacks.has(cb)) {
             throw new Error();
         }

package/dist/excalidraw/scene/export.js

@@ -200,7 +200,7 @@ export const exportToSvg = async (elements, appState, files, opts) => {
     if (import.meta.env.VITE_IS_EXCALIDRAW_NPM_PACKAGE) {
         assetPath =
             window.EXCALIDRAW_ASSET_PATH ||
-                `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}`;
+                `https://unpkg.com/${import.meta.env.VITE_PKG_NAME}@${import.meta.env.VITE_PKG_VERSION}`;
         if (assetPath?.startsWith("/")) {
             assetPath = assetPath.replace("/", `${window.location.origin}/`);
         }

package/dist/excalidraw/scene/types.d.ts

@@ -33,7 +33,7 @@ export type InteractiveCanvasRenderConfig = {
     remotePointerUserStates: Map<SocketId, UserIdleState>;
     remotePointerUsernames: Map<SocketId, string>;
     remotePointerButton: Map<SocketId, string | undefined>;
-    selectionColor?: string;
+    selectionColor: string;
     renderScrollbars?: boolean;
 };
 export type RenderInteractiveSceneCallback = {
@@ -56,6 +56,7 @@ export type InteractiveSceneRenderConfig = {
     elementsMap: RenderableElementsMap;
     visibleElements: readonly NonDeletedExcalidrawElement[];
     selectedElements: readonly NonDeletedExcalidrawElement[];
+    allElementsMap: NonDeletedSceneElementsMap;
     scale: number;
     appState: InteractiveCanvasAppState;
     renderConfig: InteractiveCanvasRenderConfig;

package/dist/excalidraw/snapping.js

@@ -835,5 +835,6 @@ export const isActiveToolNonLinearSnappable = (activeToolType) => {
         activeToolType === TOOL_TYPE.diamond ||
         activeToolType === TOOL_TYPE.frame ||
         activeToolType === TOOL_TYPE.magicframe ||
-        activeToolType === TOOL_TYPE.image);
+        activeToolType === TOOL_TYPE.image ||
+        activeToolType === TOOL_TYPE.text);
 };

package/dist/excalidraw/store.d.ts

@@ -2,11 +2,41 @@ import { AppStateChange, ElementsChange } from "./change";
 import type { OrderedExcalidrawElement } from "./element/types";
 import { Emitter } from "./emitter";
 import type { AppState, ObservedAppState } from "./types";
+import type { ValueOf } from "./utility-types";
 export declare const getObservedAppState: (appState: AppState) => ObservedAppState;
-export type StoreActionType = "capture" | "update" | "none";
 export declare const StoreAction: {
-    [K in Uppercase<StoreActionType>]: StoreActionType;
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
+    readonly CAPTURE: "capture";
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
+    readonly UPDATE: "update";
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
+    readonly NONE: "none";
 };
+export type StoreActionType = ValueOf<typeof StoreAction>;
 /**
  * Represent an increment to the Store.
  */

package/dist/excalidraw/store.js

@@ -25,8 +25,35 @@ export const getObservedAppState = (appState) => {
 };
 const isObservedAppState = (appState) => !!Reflect.get(appState, hiddenObservedAppStateProp);
 export const StoreAction = {
+    /**
+     * Immediately undoable.
+     *
+     * Use for updates which should be captured.
+     * Should be used for most of the local updates.
+     *
+     * These updates will _immediately_ make it to the local undo / redo stacks.
+     */
     CAPTURE: "capture",
+    /**
+     * Never undoable.
+     *
+     * Use for updates which should never be recorded, such as remote updates
+     * or scene initialization.
+     *
+     * These updates will _never_ make it to the local undo / redo stacks.
+     */
     UPDATE: "update",
+    /**
+     * Eventually undoable.
+     *
+     * Use for updates which should not be captured immediately - likely
+     * exceptions which are part of some async multi-step process. Otherwise, all
+     * such updates would end up being captured with the next
+     * `StoreAction.CAPTURE` - triggered either by the next `updateScene`
+     * or internally by the editor.
+     *
+     * These updates will _eventually_ make it to the local undo / redo stacks.
+     */
     NONE: "none",
 };
 /**

package/dist/excalidraw/types.d.ts

@@ -134,6 +134,7 @@ export type InteractiveCanvasAppState = Readonly<_CommonCanvasAppState & {
     collaborators: AppState["collaborators"];
     snapLines: AppState["snapLines"];
     zenModeEnabled: AppState["zenModeEnabled"];
+    editingElement: AppState["editingElement"];
 }>;
 export type ObservedAppState = ObservedStandaloneAppState & ObservedElementsAppState;
 export type ObservedStandaloneAppState = {