@dwelle/excalidraw 0.5.0-da1c822 → 0.5.0-e8bcd96

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

@@ -1,4 +1,4 @@
-import { ExcalidrawTextContainer } from "./types";
+import type { ExcalidrawTextContainer } from "./types";
 export declare const originalContainerCache: {
     [id: ExcalidrawTextContainer["id"]]: {
         height: ExcalidrawTextContainer["height"];

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

@@ -1,6 +1,6 @@
-import { NonDeletedExcalidrawElement } from "./types";
-import { AppState, PointerDownState } from "../types";
-import Scene from "../scene/Scene";
+import type { NonDeletedExcalidrawElement } from "./types";
+import type { AppState, PointerDownState } from "../types";
+import type Scene from "../scene/Scene";
 export declare const dragSelectedElements: (pointerDownState: PointerDownState, selectedElements: NonDeletedExcalidrawElement[], offset: {
     x: number;
     y: number;

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
-import { ExcalidrawProps } from "../types";
-import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
+import type { ExcalidrawProps } from "../types";
+import type { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
+import type { MarkRequired } from "../utility-types";
+type IframeDataWithSandbox = MarkRequired<IframeData, "sandbox">;
 export declare const createSrcDoc: (body: string) => string;
-export declare const getEmbedLink: (link: string | null | undefined) => IframeData | null;
+export declare const getEmbedLink: (link: string | null | undefined) => IframeDataWithSandbox | null;
 export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawIframeLikeElement) => ExcalidrawElement;
 export declare const actionSetEmbeddableAsActiveTool: {
     name: "setEmbeddableAsActiveTool";
@@ -11,8 +13,8 @@ export declare const actionSetEmbeddableAsActiveTool: {
     };
     target: string;
     label: string;
-    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => {
-        elements: readonly ExcalidrawElement[];
+    perform: (elements: readonly import("./types").OrderedExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => {
+        elements: readonly import("./types").OrderedExcalidrawElement[];
         appState: {
             activeTool: {
                 lastActiveTool: import("../types").ActiveTool | null;
@@ -165,10 +167,11 @@ export declare const actionSetEmbeddableAsActiveTool: {
             userToFollow: import("../types").UserToFollow | null;
             followedBy: Set<import("../types").SocketId>;
         };
-        commitToHistory: false;
+        storeAction: import("../store").StoreActionType;
     };
 } & {
     keyTest?: undefined;
 };
 export declare const maybeParseEmbedSrc: (str: string) => string;
 export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;
+export {};

package/dist/excalidraw/element/embeddable.js

@@ -5,14 +5,16 @@ import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
 import { wrapText } from "./textElement";
 import { isIframeElement } from "./typeChecks";
+import { sanitizeHTMLAttribute } from "../data/url";
+import { StoreAction } from "../store";
 const embeddedLinkCache = new Map();
 const RE_YOUTUBE = /^(?:http(?:s)?:\/\/)?(?:www\.)?youtu(?:be\.com|\.be)\/(embed\/|watch\?v=|shorts\/|playlist\?list=|embed\/videoseries\?list=)?([a-zA-Z0-9_-]+)(?:\?t=|&t=|\?start=|&start=)?([a-zA-Z0-9_-]+)?[^\s]*$/;
 const RE_VIMEO = /^(?:http(?:s)?:\/\/)?(?:(?:w){3}\.)?(?:player\.)?vimeo\.com\/(?:video\/)?([^?\s]+)(?:\?.*)?$/;
 const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
-const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
-const RE_GH_GIST_EMBED = /https?:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)\.js["']/i;
+const RE_GH_GIST = /^https:\/\/gist\.github\.com\/([\w_-]+)\/([\w_-]+)/;
+const RE_GH_GIST_EMBED = /^<script[\s\S]*?\ssrc=["'](https:\/\/gist\.github\.com\/.*?)\.js["']/i;
 // not anchored to start to allow <blockquote> twitter embeds
-const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com/;
+const RE_TWITTER = /(?:https?:\/\/)?(?:(?:w){3}\.)?(?:twitter|x)\.com\/[^/]+\/status\/(\d+)/;
 const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https?:\/\/(?:twitter|x)\.com\/[^"']*)/i;
 const RE_VALTOWN = /^https:\/\/(?:www\.)?val\.town\/(v|embed)\/[a-zA-Z_$][0-9a-zA-Z_$]+\.[a-zA-Z_$][0-9a-zA-Z_$]+/;
 const RE_GENERIC_EMBED = /^<(?:iframe|blockquote)[\s\S]*?\s(?:src|href)=["']([^"']*)["'][\s\S]*?>$/i;
@@ -31,7 +33,17 @@ const ALLOWED_DOMAINS = new Set([
     "stackblitz.com",
     "val.town",
     "giphy.com",
-    "dddice.com",
+]);
+const ALLOW_SAME_ORIGIN = new Set([
+    "youtube.com",
+    "youtu.be",
+    "vimeo.com",
+    "player.vimeo.com",
+    "figma.com",
+    "twitter.com",
+    "x.com",
+    "*.simplepdf.eu",
+    "stackblitz.com",
 ]);
 export const createSrcDoc = (body) => {
     return `<html><body>${body}</body></html>`;
@@ -44,6 +56,7 @@ export const getEmbedLink = (link) => {
         return embeddedLinkCache.get(link);
     }
     const originalLink = link;
+    const allowSameOrigin = ALLOW_SAME_ORIGIN.has(matchHostname(link, ALLOW_SAME_ORIGIN) || "");
     let type = "generic";
     let aspectRatio = { w: 560, h: 840 };
     const ytLink = link.match(RE_YOUTUBE);
@@ -70,8 +83,14 @@ export const getEmbedLink = (link) => {
             link,
             intrinsicSize: aspectRatio,
             type,
+            sandbox: { allowSameOrigin },
         });
-        return { link, intrinsicSize: aspectRatio, type };
+        return {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+            sandbox: { allowSameOrigin },
+        };
     }
     const vimeoLink = link.match(RE_VIMEO);
     if (vimeoLink?.[1]) {
@@ -88,8 +107,15 @@ export const getEmbedLink = (link) => {
             link,
             intrinsicSize: aspectRatio,
             type,
+            sandbox: { allowSameOrigin },
         });
-        return { link, intrinsicSize: aspectRatio, type, error };
+        return {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+            error,
+            sandbox: { allowSameOrigin },
+        };
     }
     const figmaLink = link.match(RE_FIGMA);
     if (figmaLink) {
@@ -100,8 +126,14 @@ export const getEmbedLink = (link) => {
             link,
             intrinsicSize: aspectRatio,
             type,
+            sandbox: { allowSameOrigin },
         });
-        return { link, intrinsicSize: aspectRatio, type };
+        return {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+            sandbox: { allowSameOrigin },
+        };
     }
     const valLink = link.match(RE_VALTOWN);
     if (valLink) {
@@ -111,26 +143,38 @@ export const getEmbedLink = (link) => {
             link,
             intrinsicSize: aspectRatio,
             type,
+            sandbox: { allowSameOrigin },
         });
-        return { link, intrinsicSize: aspectRatio, type };
+        return {
+            link,
+            intrinsicSize: aspectRatio,
+            type,
+            sandbox: { allowSameOrigin },
+        };
     }
     if (RE_TWITTER.test(link)) {
-        // the embed srcdoc still supports twitter.com domain only
-        link = link.replace(/\bx.com\b/, "twitter.com");
+        const postId = link.match(RE_TWITTER)[1];
+        // the embed srcdoc still supports twitter.com domain only.
+        // Note that we don't attempt to parse the username as it can consist of
+        // non-latin1 characters, and the username in the url can be set to anything
+        // without affecting the embed.
+        const safeURL = sanitizeHTMLAttribute(`https://twitter.com/x/status/${postId}`);
         const ret = {
             type: "document",
-            srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${link}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
+            srcdoc: (theme) => createSrcDoc(`<blockquote class="twitter-tweet" data-dnt="true" data-theme="${theme}"><a href="${safeURL}"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>`),
             intrinsicSize: { w: 480, h: 480 },
-            sandbox: { allowSameOrigin: true },
+            sandbox: { allowSameOrigin },
         };
         embeddedLinkCache.set(originalLink, ret);
         return ret;
     }
     if (RE_GH_GIST.test(link)) {
+        const [, user, gistId] = link.match(RE_GH_GIST);
+        const safeURL = sanitizeHTMLAttribute(`https://gist.github.com/${user}/${gistId}`);
         const ret = {
             type: "document",
             srcdoc: () => createSrcDoc(`
-          <script src="${link}.js"></script>
+          <script src="${safeURL}.js"></script>
           <style type="text/css">
             * { margin: 0px; }
             table, .gist { height: 100%; }
@@ -138,12 +182,23 @@ export const getEmbedLink = (link) => {
           </style>
         `),
             intrinsicSize: { w: 550, h: 720 },
+            sandbox: { allowSameOrigin },
         };
         embeddedLinkCache.set(link, ret);
         return ret;
     }
-    embeddedLinkCache.set(link, { link, intrinsicSize: aspectRatio, type });
-    return { link, intrinsicSize: aspectRatio, type };
+    embeddedLinkCache.set(link, {
+        link,
+        intrinsicSize: aspectRatio,
+        type,
+        sandbox: { allowSameOrigin },
+    });
+    return {
+        link,
+        intrinsicSize: aspectRatio,
+        type,
+        sandbox: { allowSameOrigin },
+    };
 };
 export const createPlaceholderEmbeddableLabel = (element) => {
     let text;
@@ -194,29 +249,35 @@ export const actionSetEmbeddableAsActiveTool = register({
                     type: "embeddable",
                 }),
             },
-            commitToHistory: false,
+            storeAction: StoreAction.NONE,
         };
     },
 });
-const validateHostname = (url, 
+const matchHostname = (url, 
 /** using a Set assumes it already contains normalized bare domains */
 allowedHostnames) => {
     try {
         const { hostname } = new URL(url);
         const bareDomain = hostname.replace(/^www\./, "");
-        const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(/^([^.]+)/, "*");
         if (allowedHostnames instanceof Set) {
-            return (ALLOWED_DOMAINS.has(bareDomain) ||
-                ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded));
+            if (ALLOWED_DOMAINS.has(bareDomain)) {
+                return bareDomain;
+            }
+            const bareDomainWithFirstSubdomainWildcarded = bareDomain.replace(/^([^.]+)/, "*");
+            if (ALLOWED_DOMAINS.has(bareDomainWithFirstSubdomainWildcarded)) {
+                return bareDomainWithFirstSubdomainWildcarded;
+            }
+            return null;
         }
-        if (bareDomain === allowedHostnames.replace(/^www\./, "")) {
-            return true;
+        const bareAllowedHostname = allowedHostnames.replace(/^www\./, "");
+        if (bareDomain === bareAllowedHostname) {
+            return bareAllowedHostname;
         }
     }
     catch (error) {
         // ignore
     }
-    return false;
+    return null;
 };
 export const maybeParseEmbedSrc = (str) => {
     const twitterMatch = str.match(RE_TWITTER_EMBED);
@@ -224,8 +285,8 @@ export const maybeParseEmbedSrc = (str) => {
         return twitterMatch[1];
     }
     const gistMatch = str.match(RE_GH_GIST_EMBED);
-    if (gistMatch && gistMatch.length === 3) {
-        return `https://gist.github.com/${gistMatch[1]}/${gistMatch[2]}`;
+    if (gistMatch && gistMatch.length === 2) {
+        return gistMatch[1];
     }
     if (RE_GIPHY.test(str)) {
         return `https://giphy.com/embed/${RE_GIPHY.exec(str)[1]}`;
@@ -261,12 +322,12 @@ export const embeddableURLValidator = (url, validateEmbeddable) => {
                         return true;
                     }
                 }
-                else if (validateHostname(url, domain)) {
+                else if (matchHostname(url, domain)) {
                     return true;
                 }
             }
             return false;
         }
     }
-    return validateHostname(url, ALLOWED_DOMAINS);
+    return !!matchHostname(url, ALLOWED_DOMAINS);
 };

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

@@ -1,5 +1,5 @@
-import { AppClassProperties, DataURL, BinaryFiles } from "../types";
-import { ExcalidrawElement, FileId, InitializedExcalidrawImageElement } from "./types";
+import type { AppClassProperties, DataURL, BinaryFiles } from "../types";
+import type { ExcalidrawElement, FileId, InitializedExcalidrawImageElement } from "./types";
 export declare const loadHTMLImageElement: (dataURL: DataURL) => Promise<HTMLImageElement>;
 /** NOTE: updates cache even if already populated with given image. Thus,
  * you should filter out the images upstream if you want to optimize this. */

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

@@ -1,8 +1,7 @@
-import { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+import type { ExcalidrawElement, NonDeletedExcalidrawElement, NonDeleted } from "./types";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
-export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";

package/dist/excalidraw/element/index.js

@@ -1,9 +1,8 @@
 import { isInvisiblySmallElement } from "./sizeHelpers";
 import { isLinearElementType } from "./typeChecks";
-export { newElement, newTextElement, updateTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
+export { newElement, newTextElement, refreshTextDimensions, newLinearElement, newImageElement, duplicateElement, } from "./newElement";
 export { getElementAbsoluteCoords, getElementBounds, getCommonBounds, getDiamondPoints, getArrowheadPoints, getClosestElementBounds, } from "./bounds";
 export { OMIT_SIDES_FOR_MULTIPLE_ELEMENTS, getTransformHandlesFromCoords, getTransformHandles, } from "./transformHandles";
-export { hitTest, isHittingElementBoundingBoxWithoutHittingElement, } from "./collision";
 export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleType, getTransformHandleTypeFromCoords, } from "./resizeTest";
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";

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

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedExcalidrawElement, NonDeletedSceneElementsMap } from "./types";
-import { Bounds } from "./bounds";
-import { Point, AppState, PointerCoords, InteractiveCanvasAppState } from "../types";
-import History from "../history";
+import type { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer, ElementsMap, NonDeletedSceneElementsMap } from "./types";
+import type { Bounds } from "./bounds";
+import type { Point, AppState, PointerCoords, InteractiveCanvasAppState, AppClassProperties } from "../types";
+import type { Store } from "../store";
 declare const editorMidPointsCache: {
     version: number | null;
     points: (Point | null)[];
@@ -52,7 +52,7 @@ export declare class LinearElementEditor {
         x: number;
         y: number;
     }[]) => void, linearElementEditor: LinearElementEditor, elementsMap: NonDeletedSceneElementsMap): boolean;
-    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): LinearElementEditor;
+    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, app: AppClassProperties): LinearElementEditor;
     static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => (typeof editorMidPointsCache)["points"];
     static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, appState: InteractiveCanvasAppState) => void;
     static getSegmentMidpointHitCoords: (linearElementEditor: LinearElementEditor, scenePointer: {
@@ -62,10 +62,10 @@ export declare class LinearElementEditor {
     static isSegmentTooShort(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, zoom: AppState["zoom"]): boolean;
     static getSegmentMidPoint(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, endPointIndex: number, elementsMap: ElementsMap): readonly [number, number];
     static getSegmentMidPointIndex(linearElementEditor: LinearElementEditor, appState: AppState, midPoint: Point, elementsMap: ElementsMap): number;
-    static handlePointerDown(event: React.PointerEvent<HTMLElement>, appState: AppState, history: History, scenePointer: {
+    static handlePointerDown(event: React.PointerEvent<HTMLElement>, appState: AppState, store: Store, scenePointer: {
         x: number;
         y: number;
-    }, linearElementEditor: LinearElementEditor, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): {
+    }, linearElementEditor: LinearElementEditor, app: AppClassProperties): {
         didAddPoint: boolean;
         hitElement: NonDeleted<ExcalidrawElement> | null;
         linearElementEditor: LinearElementEditor | null;
@@ -133,13 +133,13 @@ export declare class LinearElementEditor {
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
-                element: NonDeletedExcalidrawElement;
+                element: import("./types").NonDeletedExcalidrawElement;
                 state: "hover" | "active";
             } | null;
-            draggingElement: NonDeletedExcalidrawElement | null;
-            resizingElement: NonDeletedExcalidrawElement | null;
+            draggingElement: import("./types").NonDeletedExcalidrawElement | null;
+            resizingElement: import("./types").NonDeletedExcalidrawElement | null;
             multiElement: NonDeleted<ExcalidrawLinearElement> | null;
-            selectionElement: NonDeletedExcalidrawElement | null;
+            selectionElement: import("./types").NonDeletedExcalidrawElement | null;
             isBindingEnabled: boolean;
             startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
@@ -152,7 +152,7 @@ export declare class LinearElementEditor {
             };
             editingFrame: string | null;
             elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
-            editingElement: NonDeletedExcalidrawElement | null;
+            editingElement: import("./types").NonDeletedExcalidrawElement | null;
             activeTool: {
                 lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;

package/dist/excalidraw/element/linearElementEditor.js

@@ -163,7 +163,8 @@ export class LinearElementEditor {
         }
         return false;
     }
-    static handlePointerUp(event, editingLinearElement, appState, elements, elementsMap) {
+    static handlePointerUp(event, editingLinearElement, appState, app) {
+        const elementsMap = app.scene.getNonDeletedElementsMap();
         const { elementId, selectedPointsIndices, isDragging, pointerDownState } = editingLinearElement;
         const element = LinearElementEditor.getElement(elementId, elementsMap);
         if (!element) {
@@ -185,7 +186,7 @@ export class LinearElementEditor {
                         ]);
                     }
                     const bindingElement = isBindingEnabled(appState)
-                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), elements, elementsMap)
+                        ? getHoveredElementForBinding(tupleToCoors(LinearElementEditor.getPointAtIndexGlobalCoordinates(element, selectedPoint, elementsMap)), app)
                         : null;
                     bindings[selectedPoint === 0 ? "startBindingElement" : "endBindingElement"] = bindingElement;
                 }
@@ -313,7 +314,8 @@ export class LinearElementEditor {
         }
         return -1;
     }
-    static handlePointerDown(event, appState, history, scenePointer, linearElementEditor, elements, elementsMap) {
+    static handlePointerDown(event, appState, store, scenePointer, linearElementEditor, app) {
+        const elementsMap = app.scene.getNonDeletedElementsMap();
         const ret = {
             didAddPoint: false,
             hitElement: null,
@@ -342,7 +344,7 @@ export class LinearElementEditor {
                 });
                 ret.didAddPoint = true;
             }
-            history.resumeRecording();
+            store.shouldCaptureIncrement();
             ret.linearElementEditor = {
                 ...linearElementEditor,
                 pointerDownState: {
@@ -357,7 +359,7 @@ export class LinearElementEditor {
                 },
                 selectedPointsIndices: [element.points.length - 1],
                 lastUncommittedPoint: null,
-                endBindingElement: getHoveredElementForBinding(scenePointer, elements, elementsMap),
+                endBindingElement: getHoveredElementForBinding(scenePointer, app),
             };
             ret.didAddPoint = true;
             return ret;

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

@@ -1,12 +1,11 @@
-import { ExcalidrawElement } from "./types";
-import { Mutable } from "../utility-types";
-type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce">;
+import type { ExcalidrawElement } from "./types";
+import type { Mutable } from "../utility-types";
+export type ElementUpdate<TElement extends ExcalidrawElement> = Omit<Partial<TElement>, "id" | "version" | "versionNonce" | "updated">;
 export declare const mutateElement: <TElement extends Mutable<ExcalidrawElement>>(element: TElement, updates: ElementUpdate<TElement>, informMutation?: boolean) => TElement;
-export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>) => TElement;
+export declare const newElementWith: <TElement extends ExcalidrawElement>(element: TElement, updates: ElementUpdate<TElement>, force?: boolean) => TElement;
 /**
  * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *
  * NOTE: does not trigger re-render.
  */
 export declare const bumpVersion: <T extends Mutable<ExcalidrawElement>>(element: T, version?: ExcalidrawElement["version"]) => T;
-export {};

package/dist/excalidraw/element/mutateElement.js

@@ -71,11 +71,13 @@ export const mutateElement = (element, updates, informMutation = true) => {
     element.versionNonce = randomInteger();
     element.updated = getUpdatedTimestamp();
     if (informMutation) {
-        Scene.getScene(element)?.informMutation();
+        Scene.getScene(element)?.triggerUpdate();
     }
     return element;
 };
-export const newElementWith = (element, updates) => {
+export const newElementWith = (element, updates, 
+/** pass `true` to always regenerate */
+force = false) => {
     let didChange = false;
     for (const key in updates) {
         const value = updates[key];
@@ -88,7 +90,7 @@ export const newElementWith = (element, updates) => {
             didChange = true;
         }
     }
-    if (!didChange) {
+    if (!didChange && !force) {
         return element;
     }
     return {

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

@@ -1,7 +1,7 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
-import { AppState } from "../types";
-import { MarkOptional, Mutable } from "../utility-types";
-export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
+import type { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement, ExcalidrawMagicFrameElement, ExcalidrawIframeElement, ElementsMap } from "./types";
+import type { AppState } from "../types";
+import type { MarkOptional, Mutable } from "../utility-types";
+export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "index" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity" | "customData">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
@@ -34,11 +34,6 @@ export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement,
     height: number;
     text: string;
 } | undefined;
-export declare const updateTextElement: (textElement: ExcalidrawTextElement, container: ExcalidrawTextContainer | null, elementsMap: ElementsMap, { text, isDeleted, originalText, }: {
-    text: string;
-    isDeleted?: boolean | undefined;
-    originalText: string;
-}) => ExcalidrawTextElement;
 export declare const newFreeDrawElement: (opts: {
     type: "freedraw";
     points?: ExcalidrawFreeDrawElement["points"];

package/dist/excalidraw/element/newElement.js

@@ -7,7 +7,7 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 import { measureText, normalizeText, wrapText, getBoundTextMaxWidth, getDefaultLineHeight, } from "./textElement";
 import { DEFAULT_ELEMENT_PROPS, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_TEXT_ALIGN, DEFAULT_VERTICAL_ALIGN, VERTICAL_ALIGN, } from "../constants";
-const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor, backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor, fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle, strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth, strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle, roughness = DEFAULT_ELEMENT_PROPS.roughness, opacity = DEFAULT_ELEMENT_PROPS.opacity, width = 0, height = 0, angle = 0, groupIds = [], frameId = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
+const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strokeColor, backgroundColor = DEFAULT_ELEMENT_PROPS.backgroundColor, fillStyle = DEFAULT_ELEMENT_PROPS.fillStyle, strokeWidth = DEFAULT_ELEMENT_PROPS.strokeWidth, strokeStyle = DEFAULT_ELEMENT_PROPS.strokeStyle, roughness = DEFAULT_ELEMENT_PROPS.roughness, opacity = DEFAULT_ELEMENT_PROPS.opacity, width = 0, height = 0, angle = 0, groupIds = [], frameId = null, index = null, roundness = null, boundElements = null, link = null, locked = DEFAULT_ELEMENT_PROPS.locked, ...rest }) => {
     // assign type to guard against excess properties
     const element = {
         id: rest.id || randomId(),
@@ -26,6 +26,7 @@ const _newElementBase = (type, { x, y, strokeColor = DEFAULT_ELEMENT_PROPS.strok
         opacity,
         groupIds,
         frameId,
+        index,
         roundness,
         seed: rest.seed ?? randomInteger(),
         version: rest.version || 1,
@@ -84,7 +85,7 @@ export const newTextElement = (opts) => {
     const textAlign = opts.textAlign || DEFAULT_TEXT_ALIGN;
     const verticalAlign = opts.verticalAlign || DEFAULT_VERTICAL_ALIGN;
     const offsets = getTextElementPositionOffsets({ textAlign, verticalAlign }, metrics);
-    const textElement = newElementWith({
+    const textElementProps = {
         ..._newElementBase("text", opts),
         text,
         fontSize,
@@ -97,18 +98,25 @@ export const newTextElement = (opts) => {
         height: metrics.height,
         containerId: opts.containerId || null,
         originalText: text,
+        autoResize: true,
         lineHeight,
-    }, {});
+    };
+    const textElement = newElementWith(textElementProps, {});
     return textElement;
 };
 const getAdjustedDimensions = (element, elementsMap, nextText) => {
-    const { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    let { width: nextWidth, height: nextHeight } = measureText(nextText, getFontString(element), element.lineHeight);
+    // wrapped text
+    if (!element.autoResize) {
+        nextWidth = element.width;
+    }
     const { textAlign, verticalAlign } = element;
     let x;
     let y;
     if (textAlign === "center" &&
         verticalAlign === VERTICAL_ALIGN.MIDDLE &&
-        !element.containerId) {
+        !element.containerId &&
+        element.autoResize) {
         const prevMetrics = measureText(element.text, getFontString(element), element.lineHeight);
         const offsets = getTextElementPositionOffsets(element, {
             width: nextWidth - prevMetrics.width,
@@ -141,19 +149,14 @@ export const refreshTextDimensions = (textElement, container, elementsMap, text
     if (textElement.isDeleted) {
         return;
     }
-    if (container) {
-        text = wrapText(text, getFontString(textElement), getBoundTextMaxWidth(container, textElement));
+    if (container || !textElement.autoResize) {
+        text = wrapText(text, getFontString(textElement), container
+            ? getBoundTextMaxWidth(container, textElement)
+            : textElement.width);
     }
     const dimensions = getAdjustedDimensions(textElement, elementsMap, text);
     return { text, ...dimensions };
 };
-export const updateTextElement = (textElement, container, elementsMap, { text, isDeleted, originalText, }) => {
-    return newElementWith(textElement, {
-        originalText,
-        isDeleted: isDeleted ?? textElement.isDeleted,
-        ...refreshTextDimensions(textElement, container, elementsMap, originalText),
-    });
-};
 export const newFreeDrawElement = (opts) => {
     return {
         ..._newElementBase(opts.type, opts),

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

@@ -1,9 +1,9 @@
-import { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
-import { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
-import { PointerDownState } from "../types";
+import type { ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, ElementsMap } from "./types";
+import type { MaybeTransformHandleType, TransformHandleDirection } from "./transformHandles";
+import type { PointerDownState } from "../types";
 export declare const normalizeAngle: (angle: number) => number;
 export declare const transformElements: (originalElements: PointerDownState["originalElements"], transformHandleType: MaybeTransformHandleType, selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, shouldRotateWithDiscreteAngle: boolean, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number, centerX: number, centerY: number) => boolean;
 export declare const resizeSingleElement: (originalElements: PointerDownState["originalElements"], shouldMaintainAspectRatio: boolean, element: NonDeletedExcalidrawElement, elementsMap: ElementsMap, transformHandleDirection: TransformHandleDirection, shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
-export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: "nw" | "ne" | "sw" | "se", shouldResizeFromCenter: boolean, pointerX: number, pointerY: number) => void;
+export declare const resizeMultipleElements: (originalElements: PointerDownState["originalElements"], selectedElements: readonly NonDeletedExcalidrawElement[], elementsMap: ElementsMap, transformHandleType: TransformHandleDirection, shouldResizeFromCenter: boolean, shouldMaintainAspectRatio: boolean, pointerX: number, pointerY: number) => void;
 export declare const getResizeOffsetXY: (transformHandleType: MaybeTransformHandleType, selectedElements: NonDeletedExcalidrawElement[], elementsMap: ElementsMap, x: number, y: number) => [number, number];
 export declare const getResizeArrowDirection: (transformHandleType: MaybeTransformHandleType, element: NonDeleted<ExcalidrawLinearElement>) => "origin" | "end";