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

package/dist/excalidraw/element/embeddable.js

@@ -1,11 +1,10 @@
 import { register } from "../actions/register";
 import { FONT_FAMILY, VERTICAL_ALIGN } from "../constants";
-import { t } from "../i18n";
 import { getFontString, updateActiveTool } from "../utils";
 import { setCursorForShape } from "../cursor";
 import { newTextElement } from "./newElement";
-import { getContainerElement, wrapText } from "./textElement";
-import { isFrameLikeElement, isIframeElement, isIframeLikeElement, } from "./typeChecks";
+import { wrapText } from "./textElement";
+import { isIframeElement } from "./typeChecks";
 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]+)(?:\?.*)?$/;
@@ -13,8 +12,8 @@ const RE_FIGMA = /^https:\/\/(?:www\.)?figma\.com/;
 const RE_GH_GIST = /^https:\/\/gist\.github\.com/;
 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 = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?twitter.com/;
-const RE_TWITTER_EMBED = /^<blockquote[\s\S]*?\shref=["'](https:\/\/twitter.com\/[^"']*)/i;
+const RE_TWITTER = /(?:http(?:s)?:\/\/)?(?:(?:w){3}.)?(?:twitter|x).com/;
+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;
 const RE_GIPHY = /giphy.com\/(?:clips|embed|gifs)\/[a-zA-Z0-9]*?-?([a-zA-Z0-9]+)(?:[^a-zA-Z0-9]|$)/;
@@ -27,6 +26,7 @@ const ALLOWED_DOMAINS = new Set([
     "link.excalidraw.com",
     "gist.github.com",
     "twitter.com",
+    "x.com",
     "*.simplepdf.eu",
     "stackblitz.com",
     "val.town",
@@ -76,8 +76,8 @@ export const getEmbedLink = (link) => {
     const vimeoLink = link.match(RE_VIMEO);
     if (vimeoLink?.[1]) {
         const target = vimeoLink?.[1];
-        const warning = !/^\d+$/.test(target)
-            ? t("toast.unrecognizedLinkFormat")
+        const error = !/^\d+$/.test(target)
+            ? new URIError("Invalid embed link format")
             : undefined;
         type = "video";
         link = `https://player.vimeo.com/video/${target}?api=1`;
@@ -89,7 +89,7 @@ export const getEmbedLink = (link) => {
             intrinsicSize: aspectRatio,
             type,
         });
-        return { link, intrinsicSize: aspectRatio, type, warning };
+        return { link, intrinsicSize: aspectRatio, type, error };
     }
     const figmaLink = link.match(RE_FIGMA);
     if (figmaLink) {
@@ -115,6 +115,8 @@ export const getEmbedLink = (link) => {
         return { link, intrinsicSize: aspectRatio, type };
     }
     if (RE_TWITTER.test(link)) {
+        // the embed srcdoc still supports twitter.com domain only
+        link = link.replace(/\bx.com\b/, "twitter.com");
         let ret;
         // assume embed code
         if (/<blockquote/.test(link)) {
@@ -168,18 +170,6 @@ export const getEmbedLink = (link) => {
     embeddedLinkCache.set(link, { link, intrinsicSize: aspectRatio, type });
     return { link, intrinsicSize: aspectRatio, type };
 };
-export const isIframeLikeOrItsLabel = (element) => {
-    if (isIframeLikeElement(element)) {
-        return true;
-    }
-    if (element.type === "text") {
-        const container = getContainerElement(element);
-        if (container && isFrameLikeElement(container)) {
-            return true;
-        }
-    }
-    return false;
-};
 export const createPlaceholderEmbeddableLabel = (element) => {
     let text;
     if (isIframeElement(element)) {
@@ -251,23 +241,23 @@ allowedHostnames) => {
     }
     return false;
 };
-export const extractSrc = (htmlString) => {
-    const twitterMatch = htmlString.match(RE_TWITTER_EMBED);
+export const maybeParseEmbedSrc = (str) => {
+    const twitterMatch = str.match(RE_TWITTER_EMBED);
     if (twitterMatch && twitterMatch.length === 2) {
         return twitterMatch[1];
     }
-    const gistMatch = htmlString.match(RE_GH_GIST_EMBED);
+    const gistMatch = str.match(RE_GH_GIST_EMBED);
     if (gistMatch && gistMatch.length === 2) {
         return gistMatch[1];
     }
-    if (RE_GIPHY.test(htmlString)) {
-        return `https://giphy.com/embed/${RE_GIPHY.exec(htmlString)[1]}`;
+    if (RE_GIPHY.test(str)) {
+        return `https://giphy.com/embed/${RE_GIPHY.exec(str)[1]}`;
     }
-    const match = htmlString.match(RE_GENERIC_EMBED);
+    const match = str.match(RE_GENERIC_EMBED);
     if (match && match.length === 2) {
         return match[1];
     }
-    return htmlString;
+    return str;
 };
 export const embeddableURLValidator = (url, validateEmbeddable) => {
     if (!url) {

package/dist/excalidraw/element/image.js

@@ -2,7 +2,6 @@
 // ExcalidrawImageElement & related helpers
 // -----------------------------------------------------------------------------
 import { MIME_TYPES, SVG_NS } from "../constants";
-import { t } from "../i18n";
 import { isInitializedImageElement } from "./typeChecks";
 export const loadHTMLImageElement = (dataURL) => {
     return new Promise((resolve, reject) => {
@@ -67,7 +66,7 @@ export const normalizeSVG = async (SVGString) => {
     const svg = doc.querySelector("svg");
     const errorNode = doc.querySelector("parsererror");
     if (errorNode || !isHTMLSVGElement(svg)) {
-        throw new Error(t("errors.invalidSVGString"));
+        throw new Error("Invalid SVG");
     }
     else {
         if (!svg.hasAttribute("xmlns")) {

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

@@ -7,11 +7,18 @@ export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleT
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";
 export { isTextElement, isExcalidrawElement } from "./typeChecks";
-export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export { getPerfectElementSize, getLockedLinearCursorAlignSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";
+/**
+ * @deprecated unsafe, use hashElementsVersion instead
+ */
 export declare const getSceneVersion: (elements: readonly ExcalidrawElement[]) => number;
+/**
+ * Hashes elements' versionNonce (using djb2 algo). Order of elements matters.
+ */
+export declare const hashElementsVersion: (elements: readonly ExcalidrawElement[]) => number;
+export declare const hashString: (s: string) => number;
 export declare const getVisibleElements: (elements: readonly ExcalidrawElement[]) => readonly NonDeletedExcalidrawElement[];
 export declare const getNonDeletedElements: <T extends ExcalidrawElement>(elements: readonly T[]) => readonly NonDeleted<T>[];
 export declare const isNonDeletedElement: <T extends ExcalidrawElement>(element: T) => element is NonDeleted<T>;

package/dist/excalidraw/element/index.js

@@ -8,11 +8,33 @@ export { resizeTest, getCursorForResizingElement, getElementWithTransformHandleT
 export { transformElements, getResizeOffsetXY, getResizeArrowDirection, } from "./resizeElements";
 export { dragSelectedElements, getDragOffsetXY, dragNewElement, } from "./dragElements";
 export { isTextElement, isExcalidrawElement } from "./typeChecks";
-export { textWysiwyg } from "./textWysiwyg";
 export { redrawTextBoundingBox } from "./textElement";
 export { getPerfectElementSize, getLockedLinearCursorAlignSize, isInvisiblySmallElement, resizePerfectLineForNWHandler, getNormalizedDimensions, } from "./sizeHelpers";
 export { showSelectedShapeActions } from "./showSelectedShapeActions";
+/**
+ * @deprecated unsafe, use hashElementsVersion instead
+ */
 export const getSceneVersion = (elements) => elements.reduce((acc, el) => acc + el.version, 0);
+/**
+ * Hashes elements' versionNonce (using djb2 algo). Order of elements matters.
+ */
+export const hashElementsVersion = (elements) => {
+    let hash = 5381;
+    for (let i = 0; i < elements.length; i++) {
+        hash = (hash << 5) + hash + elements[i].versionNonce;
+    }
+    return hash >>> 0; // Ensure unsigned 32-bit integer
+};
+// string hash function (using djb2). Not cryptographically secure, use only
+// for versioning and such.
+export const hashString = (s) => {
+    let hash = 5381;
+    for (let i = 0; i < s.length; i++) {
+        const char = s.charCodeAt(i);
+        hash = (hash << 5) + hash + char;
+    }
+    return hash >>> 0; // Ensure unsigned 32-bit integer
+};
 export const getVisibleElements = (elements) => elements.filter((el) => !el.isDeleted && !isInvisiblySmallElement(el));
 export const getNonDeletedElements = (elements) => elements.filter((element) => !element.isDeleted);
 export const isNonDeletedElement = (element) => !element.isDeleted;

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
+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 Scene from "../scene/Scene";
 declare const editorMidPointsCache: {
     version: number | null;
     points: (Point | null)[];
@@ -40,47 +39,48 @@ export declare class LinearElementEditor {
     readonly endBindingElement: ExcalidrawBindableElement | null | "keep";
     readonly hoverPointIndex: number;
     readonly segmentMidPointHoveredCoords: Point | null;
-    constructor(element: NonDeleted<ExcalidrawLinearElement>, scene: Scene);
+    constructor(element: NonDeleted<ExcalidrawLinearElement>);
     static POINT_HANDLE_SIZE: number;
     /**
      * @param id the `elementId` from the instance of this class (so that we can
      *  statically guarantee this method returns an ExcalidrawLinearElement)
      */
-    static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"]): NonDeleted<ExcalidrawLinearElement> | null;
-    static handleBoxSelection(event: PointerEvent, appState: AppState, setState: React.Component<any, AppState>["setState"]): false | undefined;
+    static getElement(id: InstanceType<typeof LinearElementEditor>["elementId"], elementsMap: ElementsMap): NonDeleted<ExcalidrawLinearElement> | null;
+    static handleBoxSelection(event: PointerEvent, appState: AppState, setState: React.Component<any, AppState>["setState"], elementsMap: NonDeletedSceneElementsMap): false | undefined;
     /** @returns whether point was dragged */
     static handlePointDragging(event: PointerEvent, appState: AppState, scenePointerX: number, scenePointerY: number, maybeSuggestBinding: (element: NonDeleted<ExcalidrawLinearElement>, pointSceneCoords: {
         x: number;
         y: number;
-    }[]) => void, linearElementEditor: LinearElementEditor): boolean;
-    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState): LinearElementEditor;
-    static getEditorMidPoints: (element: NonDeleted<ExcalidrawLinearElement>, appState: InteractiveCanvasAppState) => (typeof editorMidPointsCache)["points"];
-    static updateEditorMidPointsCache: (element: NonDeleted<ExcalidrawLinearElement>, appState: InteractiveCanvasAppState) => void;
+    }[]) => void, linearElementEditor: LinearElementEditor, elementsMap: NonDeletedSceneElementsMap): boolean;
+    static handlePointerUp(event: PointerEvent, editingLinearElement: LinearElementEditor, appState: AppState, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): 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: {
         x: number;
         y: number;
-    }, appState: AppState) => readonly [number, number] | null;
+    }, appState: AppState, elementsMap: ElementsMap) => readonly [number, number] | null;
     static isSegmentTooShort(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, zoom: AppState["zoom"]): boolean;
-    static getSegmentMidPoint(element: NonDeleted<ExcalidrawLinearElement>, startPoint: Point, endPoint: Point, endPointIndex: number): readonly [number, number];
-    static getSegmentMidPointIndex(linearElementEditor: LinearElementEditor, appState: AppState, midPoint: Point): number;
+    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: {
         x: number;
         y: number;
-    }, linearElementEditor: LinearElementEditor): {
+    }, linearElementEditor: LinearElementEditor, elements: readonly NonDeletedExcalidrawElement[], elementsMap: NonDeletedSceneElementsMap): {
         didAddPoint: boolean;
         hitElement: NonDeleted<ExcalidrawElement> | null;
         linearElementEditor: LinearElementEditor | null;
     };
     static arePointsEqual(point1: Point | null, point2: Point | null): boolean;
-    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState): LinearElementEditor | null;
+    static handlePointerMove(event: React.PointerEvent<HTMLCanvasElement>, scenePointerX: number, scenePointerY: number, appState: AppState, elementsMap: ElementsMap): LinearElementEditor | null;
     /** scene coords */
-    static getPointGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, point: Point): readonly [number, number];
+    static getPointGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, point: Point, elementsMap: ElementsMap): readonly [number, number];
     /** scene coords */
-    static getPointsGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>): Point[];
-    static getPointAtIndexGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, indexMaybeFromEnd: number): Point;
-    static pointFromAbsoluteCoords(element: NonDeleted<ExcalidrawLinearElement>, absoluteCoords: Point): Point;
-    static getPointIndexUnderCursor(element: NonDeleted<ExcalidrawLinearElement>, zoom: AppState["zoom"], x: number, y: number): number;
-    static createPointAt(element: NonDeleted<ExcalidrawLinearElement>, scenePointerX: number, scenePointerY: number, gridSize: number | null): Point;
+    static getPointsGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap): Point[];
+    static getPointAtIndexGlobalCoordinates(element: NonDeleted<ExcalidrawLinearElement>, indexMaybeFromEnd: number, // -1 for last element
+    elementsMap: ElementsMap): Point;
+    static pointFromAbsoluteCoords(element: NonDeleted<ExcalidrawLinearElement>, absoluteCoords: Point, elementsMap: ElementsMap): Point;
+    static getPointIndexUnderCursor(element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, zoom: AppState["zoom"], x: number, y: number): number;
+    static createPointAt(element: NonDeleted<ExcalidrawLinearElement>, elementsMap: ElementsMap, scenePointerX: number, scenePointerY: number, gridSize: number | null): Point;
     /**
      * Normalizes line points so that the start point is at [0,0]. This is
      * expected in various parts of the codebase. Also returns new x/y to account
@@ -92,7 +92,7 @@ export declare class LinearElementEditor {
         y: number;
     };
     static normalizePoints(element: NonDeleted<ExcalidrawLinearElement>): void;
-    static duplicateSelectedPoints(appState: AppState): false | {
+    static duplicateSelectedPoints(appState: AppState, elementsMap: ElementsMap): false | {
         appState: {
             editingLinearElement: {
                 selectedPointsIndices: number[];
@@ -133,13 +133,13 @@ export declare class LinearElementEditor {
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
-                element: import("./types").NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                element: NonDeletedExcalidrawElement;
+                state: "hover" | "active";
             } | null;
-            draggingElement: import("./types").NonDeletedExcalidrawElement | null;
-            resizingElement: import("./types").NonDeletedExcalidrawElement | null;
+            draggingElement: NonDeletedExcalidrawElement | null;
+            resizingElement: NonDeletedExcalidrawElement | null;
             multiElement: NonDeleted<ExcalidrawLinearElement> | null;
-            selectionElement: import("./types").NonDeletedExcalidrawElement | null;
+            selectionElement: 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: import("./types").NonDeletedExcalidrawElement | null;
+            editingElement: NonDeletedExcalidrawElement | null;
             activeTool: {
                 lastActiveTool: import("../types").ActiveTool | null;
                 locked: boolean;
@@ -181,7 +181,7 @@ export declare class LinearElementEditor {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -194,14 +194,14 @@ export declare class LinearElementEditor {
                 tab?: string | undefined;
             } | null;
             openDialog: {
-                name: "help" | "imageExport" | "jsonExport";
+                name: "imageExport" | "help" | "jsonExport";
             } | {
                 name: "settings";
                 source: "settings" | "tool" | "generation";
                 tab: "text-to-diagram" | "diagram-to-code";
             } | {
                 name: "ttd";
-                tab: "mermaid" | "text-to-diagram";
+                tab: "text-to-diagram" | "mermaid";
             } | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
@@ -258,7 +258,7 @@ export declare class LinearElementEditor {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -282,18 +282,18 @@ export declare class LinearElementEditor {
         startBinding?: PointBinding;
         endBinding?: PointBinding;
     }): void;
-    static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState): boolean;
-    static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, snapToGrid: boolean): {
+    static shouldAddMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, elementsMap: ElementsMap): boolean;
+    static addMidpoint(linearElementEditor: LinearElementEditor, pointerCoords: PointerCoords, appState: AppState, snapToGrid: boolean, elementsMap: ElementsMap): {
         pointerDownState: LinearElementEditor["pointerDownState"];
         selectedPointsIndices: LinearElementEditor["selectedPointsIndices"];
     } | undefined;
     private static _updatePoints;
     private static _getShiftLockedDelta;
-    static getBoundTextElementPosition: (element: ExcalidrawLinearElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
+    static getBoundTextElementPosition: (element: ExcalidrawLinearElement, boundTextElement: ExcalidrawTextElementWithContainer, elementsMap: ElementsMap) => {
         x: number;
         y: number;
     };
-    static getMinMaxXYWithBoundText: (element: ExcalidrawLinearElement, elementBounds: Bounds, boundTextElement: ExcalidrawTextElementWithContainer) => [number, number, number, number, number, number];
-    static getElementAbsoluteCoords: (element: ExcalidrawLinearElement, includeBoundText?: boolean) => [number, number, number, number, number, number];
+    static getMinMaxXYWithBoundText: (element: ExcalidrawLinearElement, elementsMap: ElementsMap, elementBounds: Bounds, boundTextElement: ExcalidrawTextElementWithContainer) => [number, number, number, number, number, number];
+    static getElementAbsoluteCoords: (element: ExcalidrawLinearElement, elementsMap: ElementsMap, includeBoundText?: boolean) => [number, number, number, number, number, number];
 }
 export {};