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

package/dist/excalidraw/element/collision.js

@@ -27,36 +27,36 @@ const isElementDraggableFromInside = (element) => {
     }
     return isDraggableFromInside || isImageElement(element);
 };
-export const hitTest = (element, appState, frameNameBoundsCache, x, y) => {
+export const hitTest = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
     // How many pixels off the shape boundary we still consider a hit
     const threshold = 10 / appState.zoom.value;
     const point = [x, y];
     if (isElementSelected(appState, element) &&
         shouldShowBoundingBox([element], appState)) {
-        return isPointHittingElementBoundingBox(element, point, threshold, frameNameBoundsCache);
+        return isPointHittingElementBoundingBox(element, elementsMap, point, threshold, frameNameBoundsCache);
     }
-    const boundTextElement = getBoundTextElement(element);
+    const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement) {
-        const isHittingBoundTextElement = hitTest(boundTextElement, appState, frameNameBoundsCache, x, y);
+        const isHittingBoundTextElement = hitTest(boundTextElement, appState, frameNameBoundsCache, x, y, elementsMap);
         if (isHittingBoundTextElement) {
             return true;
         }
     }
-    return isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, point);
+    return isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, point, elementsMap);
 };
-export const isHittingElementBoundingBoxWithoutHittingElement = (element, appState, frameNameBoundsCache, x, y) => {
+export const isHittingElementBoundingBoxWithoutHittingElement = (element, appState, frameNameBoundsCache, x, y, elementsMap) => {
     const threshold = 10 / appState.zoom.value;
     // So that bound text element hit is considered within bounding box of container even if its outside actual bounding box of element
     // eg for linear elements text can be outside the element bounding box
-    const boundTextElement = getBoundTextElement(element);
+    const boundTextElement = getBoundTextElement(element, elementsMap);
     if (boundTextElement &&
-        hitTest(boundTextElement, appState, frameNameBoundsCache, x, y)) {
+        hitTest(boundTextElement, appState, frameNameBoundsCache, x, y, elementsMap)) {
         return false;
     }
-    return (!isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, [x, y]) &&
-        isPointHittingElementBoundingBox(element, [x, y], threshold, frameNameBoundsCache));
+    return (!isHittingElementNotConsideringBoundingBox(element, appState, frameNameBoundsCache, [x, y], elementsMap) &&
+        isPointHittingElementBoundingBox(element, elementsMap, [x, y], threshold, frameNameBoundsCache));
 };
-export const isHittingElementNotConsideringBoundingBox = (element, appState, frameNameBoundsCache, point) => {
+export const isHittingElementNotConsideringBoundingBox = (element, appState, frameNameBoundsCache, point, elementsMap) => {
     const threshold = 10 / appState.zoom.value;
     const check = isTextElement(element)
         ? isStrictlyInside
@@ -65,6 +65,7 @@ export const isHittingElementNotConsideringBoundingBox = (element, appState, fra
             : isNearCheck;
     return hitTestPointAgainstElement({
         element,
+        elementsMap,
         point,
         threshold,
         check,
@@ -72,7 +73,7 @@ export const isHittingElementNotConsideringBoundingBox = (element, appState, fra
     });
 };
 const isElementSelected = (appState, element) => appState.selectedElementIds[element.id];
-export const isPointHittingElementBoundingBox = (element, [x, y], threshold, frameNameBoundsCache) => {
+export const isPointHittingElementBoundingBox = (element, elementsMap, [x, y], threshold, frameNameBoundsCache) => {
     // frames needs be checked differently so as to be able to drag it
     // by its frame, whether it has been selected or not
     // this logic here is not ideal
@@ -80,13 +81,14 @@ export const isPointHittingElementBoundingBox = (element, [x, y], threshold, fra
     if (isFrameLikeElement(element)) {
         return hitTestPointAgainstElement({
             element,
+            elementsMap,
             point: [x, y],
             threshold,
             check: isInsideCheck,
             frameNameBoundsCache,
         });
     }
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const elementCenterX = (x1 + x2) / 2;
     const elementCenterY = (y1 + y2) / 2;
     // reverse rotate to take element's angle into account.
@@ -96,12 +98,13 @@ export const isPointHittingElementBoundingBox = (element, [x, y], threshold, fra
         rotatedY > y1 - threshold &&
         rotatedY < y2 + threshold);
 };
-export const bindingBorderTest = (element, { x, y }) => {
+export const bindingBorderTest = (element, { x, y }, elementsMap) => {
     const threshold = maxBindingGap(element, element.width, element.height);
     const check = isOutsideCheck;
     const point = [x, y];
     return hitTestPointAgainstElement({
         element,
+        elementsMap,
         point,
         threshold,
         check,
@@ -124,13 +127,13 @@ const hitTestPointAgainstElement = (args) => {
         case "text":
         case "diamond":
         case "ellipse":
-            const distance = distanceToBindableElement(args.element, args.point);
+            const distance = distanceToBindableElement(args.element, args.point, args.elementsMap);
             return args.check(distance, args.threshold);
         case "freedraw": {
-            if (!args.check(distanceToRectangle(args.element, args.point), args.threshold)) {
+            if (!args.check(distanceToRectangle(args.element, args.point, args.elementsMap), args.threshold)) {
                 return false;
             }
-            return hitTestFreeDrawElement(args.element, args.point, args.threshold);
+            return hitTestFreeDrawElement(args.element, args.point, args.threshold, args.elementsMap);
         }
         case "arrow":
         case "line":
@@ -141,7 +144,7 @@ const hitTestPointAgainstElement = (args) => {
         case "frame":
         case "magicframe": {
             // check distance to frame element first
-            if (args.check(distanceToBindableElement(args.element, args.point), args.threshold)) {
+            if (args.check(distanceToBindableElement(args.element, args.point, args.elementsMap), args.threshold)) {
                 return true;
             }
             const frameNameBounds = args.frameNameBoundsCache?.get(args.element);
@@ -152,7 +155,7 @@ const hitTestPointAgainstElement = (args) => {
         }
     }
 };
-export const distanceToBindableElement = (element, point) => {
+export const distanceToBindableElement = (element, point, elementsMap) => {
     switch (element.type) {
         case "rectangle":
         case "image":
@@ -161,11 +164,11 @@ export const distanceToBindableElement = (element, point) => {
         case "embeddable":
         case "frame":
         case "magicframe":
-            return distanceToRectangle(element, point);
+            return distanceToRectangle(element, point, elementsMap);
         case "diamond":
-            return distanceToDiamond(element, point);
+            return distanceToDiamond(element, point, elementsMap);
         case "ellipse":
-            return distanceToEllipse(element, point);
+            return distanceToEllipse(element, point, elementsMap);
     }
 };
 const isStrictlyInside = (distance, threshold) => {
@@ -180,25 +183,25 @@ const isNearCheck = (distance, threshold) => {
 const isOutsideCheck = (distance, threshold) => {
     return 0 <= distance && distance < threshold;
 };
-const distanceToRectangle = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const distanceToRectangle = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     return Math.max(GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)), GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)));
 };
 const distanceToRectangleBox = (box, point) => {
     const [, pointRel, hwidth, hheight] = pointRelativeToDivElement(point, box);
     return Math.max(GAPoint.distanceToLine(pointRel, GALine.equation(0, 1, -hheight)), GAPoint.distanceToLine(pointRel, GALine.equation(1, 0, -hwidth)));
 };
-const distanceToDiamond = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const distanceToDiamond = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     const side = GALine.equation(hheight, hwidth, -hheight * hwidth);
     return GAPoint.distanceToLine(pointRel, side);
 };
-const distanceToEllipse = (element, point) => {
-    const [pointRel, tangent] = ellipseParamsForTest(element, point);
+const distanceToEllipse = (element, point, elementsMap) => {
+    const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
     return -GALine.sign(tangent) * GAPoint.distanceToLine(pointRel, tangent);
 };
-const ellipseParamsForTest = (element, point) => {
-    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point);
+const ellipseParamsForTest = (element, point, elementsMap) => {
+    const [, pointRel, hwidth, hheight] = pointRelativeToElement(element, point, elementsMap);
     const [px, py] = GAPoint.toTuple(pointRel);
     // We're working in positive quadrant, so start with `t = 45deg`, `tx=cos(t)`
     let tx = 0.707;
@@ -228,7 +231,7 @@ const ellipseParamsForTest = (element, point) => {
     const tangent = GALine.orthogonalThrough(pointRel, closestPoint);
     return [pointRel, tangent];
 };
-const hitTestFreeDrawElement = (element, point, threshold) => {
+const hitTestFreeDrawElement = (element, point, threshold, elementsMap) => {
     // Check point-distance-to-line-segment for every segment in the
     // element's points (its input points, not its outline points).
     // This is... okay? It's plenty fast, but the GA library may
@@ -241,7 +244,7 @@ const hitTestFreeDrawElement = (element, point, threshold) => {
     }
     else {
         // Counter-rotate the point around center before testing
-        const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element);
+        const [minX, minY, maxX, maxY] = getElementAbsoluteCoords(element, elementsMap);
         const rotatedPoint = rotatePoint(point, [minX + (maxX - minX) / 2, minY + (maxY - minY) / 2], -element.angle);
         x = rotatedPoint[0] - element.x;
         y = rotatedPoint[1] - element.y;
@@ -285,7 +288,7 @@ const hitTestLinear = (args) => {
     if (!ShapeCache.get(element)) {
         return false;
     }
-    const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(args.element, args.point);
+    const [point, pointAbs, hwidth, hheight] = pointRelativeToElement(args.element, args.point, args.elementsMap);
     const side1 = GALine.equation(0, 1, -hheight);
     const side2 = GALine.equation(1, 0, -hwidth);
     if (!isInsideCheck(GAPoint.distanceToLine(pointAbs, side1), threshold) ||
@@ -318,9 +321,9 @@ const hitTestLinear = (args) => {
 // Rectangles, diamonds and ellipses are symmetrical over axes,
 // and other elements have a rectangular boundary,
 // so we only need to perform hit tests for the positive quadrant.
-const pointRelativeToElement = (element, pointTuple) => {
+const pointRelativeToElement = (element, pointTuple, elementsMap) => {
     const point = GAPoint.from(pointTuple);
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const center = coordsCenter(x1, y1, x2, y2);
     // GA has angle orientation opposite to `rotate`
     const rotate = GATransform.rotation(center, element.angle);
@@ -348,18 +351,18 @@ const pointRelativeToDivElement = (pointTuple, rectangle) => {
     return [pointRelToPos, pointRelToCenterAbs, halfWidth, halfHeight];
 };
 // Returns point in absolute coordinates
-export const pointInAbsoluteCoords = (element, 
+export const pointInAbsoluteCoords = (element, elementsMap, 
 // Point relative to the element position
 point) => {
     const [x, y] = point;
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const cx = (x2 - x1) / 2;
     const cy = (y2 - y1) / 2;
     const [rotatedX, rotatedY] = rotate(x, y, cx, cy, element.angle);
     return [element.x + rotatedX, element.y + rotatedY];
 };
-const relativizationToElementCenter = (element) => {
-    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+const relativizationToElementCenter = (element, elementsMap) => {
+    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
     const center = coordsCenter(x1, y1, x2, y2);
     // GA has angle orientation opposite to `rotate`
     const rotate = GATransform.rotation(center, element.angle);
@@ -378,8 +381,8 @@ export const determineFocusDistance = (element,
 // Point on the line, in absolute coordinates
 a, 
 // Another point on the line, in absolute coordinates (closer to element)
-b) => {
-    const relateToCenter = relativizationToElementCenter(element);
+b, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
     const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
     const line = GALine.through(aRel, bRel);
@@ -414,13 +417,13 @@ b) => {
 export const determineFocusPoint = (element, 
 // The oriented, relative distance from the center of `element` of the
 // returned focusPoint
-focus, adjecentPoint) => {
+focus, adjecentPoint, elementsMap) => {
     if (focus === 0) {
-        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
+        const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
         const center = coordsCenter(x1, y1, x2, y2);
         return GAPoint.toTuple(center);
     }
-    const relateToCenter = relativizationToElementCenter(element);
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const adjecentPointRel = GATransform.apply(relateToCenter, GAPoint.from(adjecentPoint));
     const reverseRelateToCenter = GA.reverse(relateToCenter);
     let point;
@@ -449,8 +452,8 @@ a,
 // Another point on the line, in absolute coordinates
 b, 
 // If given, the element is inflated by this value
-gap = 0) => {
-    const relateToCenter = relativizationToElementCenter(element);
+gap = 0, elementsMap) => {
+    const relateToCenter = relativizationToElementCenter(element, elementsMap);
     const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
     const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
     const line = GALine.through(aRel, bRel);

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

@@ -0,0 +1,11 @@
+import { ExcalidrawTextContainer } from "./types";
+export declare const originalContainerCache: {
+    [id: ExcalidrawTextContainer["id"]]: {
+        height: ExcalidrawTextContainer["height"];
+    } | undefined;
+};
+export declare const updateOriginalContainerCache: (id: ExcalidrawTextContainer["id"], height: ExcalidrawTextContainer["height"]) => {
+    height: ExcalidrawTextContainer["height"];
+};
+export declare const resetOriginalContainerCache: (id: ExcalidrawTextContainer["id"]) => void;
+export declare const getOriginalContainerHeightFromCache: (id: ExcalidrawTextContainer["id"]) => number | null;

package/dist/excalidraw/element/containerCache.js

@@ -0,0 +1,14 @@
+export const originalContainerCache = {};
+export const updateOriginalContainerCache = (id, height) => {
+    const data = originalContainerCache[id] || (originalContainerCache[id] = { height });
+    data.height = height;
+    return data;
+};
+export const resetOriginalContainerCache = (id) => {
+    if (originalContainerCache[id]) {
+        delete originalContainerCache[id];
+    }
+};
+export const getOriginalContainerHeightFromCache = (id) => {
+    return originalContainerCache[id]?.height ?? null;
+};

package/dist/excalidraw/element/dragElements.js

@@ -3,9 +3,8 @@ import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import { getBoundTextElement } from "./textElement";
-import { isSelectedViaGroup } from "../groups";
 import { getGridPoint } from "../math";
-import { isArrowElement, isBoundToContainer, isFrameLikeElement, } from "./typeChecks";
+import { isArrowElement, isFrameLikeElement } from "./typeChecks";
 export const dragSelectedElements = (pointerDownState, selectedElements, offset, appState, scene, snapOffset, gridSize) => {
     // we do not want a frame and its elements to be selected at the same time
     // but when it happens (due to some bug), we want to avoid updating element
@@ -15,33 +14,25 @@ export const dragSelectedElements = (pointerDownState, selectedElements, offset,
         .filter((e) => isFrameLikeElement(e))
         .map((f) => f.id);
     if (frames.length > 0) {
-        const elementsInFrames = scene
-            .getNonDeletedElements()
-            .filter((e) => !isBoundToContainer(e))
-            .filter((e) => e.frameId !== null)
-            .filter((e) => frames.includes(e.frameId));
-        elementsInFrames.forEach((element) => elementsToUpdate.add(element));
+        for (const element of scene.getNonDeletedElements()) {
+            if (element.frameId !== null && frames.includes(element.frameId)) {
+                elementsToUpdate.add(element);
+            }
+        }
     }
     const commonBounds = getCommonBounds(Array.from(elementsToUpdate).map((el) => pointerDownState.originalElements.get(el.id) ?? el));
     const adjustedOffset = calculateOffset(commonBounds, offset, snapOffset, gridSize);
     elementsToUpdate.forEach((element) => {
         updateElementCoords(pointerDownState, element, adjustedOffset);
-        // update coords of bound text only if we're dragging the container directly
-        // (we don't drag the group that it's part of)
         if (
-        // Don't update coords of arrow label since we calculate its position during render
-        !isArrowElement(element) &&
-            // container isn't part of any group
-            // (perf optim so we don't check `isSelectedViaGroup()` in every case)
-            (!element.groupIds.length ||
-                // container is part of a group, but we're dragging the container directly
-                (appState.editingGroupId && !isSelectedViaGroup(appState, element)))) {
-            const textElement = getBoundTextElement(element);
+        // skip arrow labels since we calculate its position during render
+        !isArrowElement(element)) {
+            const textElement = getBoundTextElement(element, scene.getNonDeletedElementsMap());
             if (textElement) {
                 updateElementCoords(pointerDownState, textElement, adjustedOffset);
             }
         }
-        updateBoundElements(element, {
+        updateBoundElements(element, scene.getElementsMapIncludingDeleted(), {
             simultaneouslyUpdated: Array.from(elementsToUpdate),
         });
     });

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
 import { ExcalidrawProps } from "../types";
-import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData, NonDeletedExcalidrawElement } from "./types";
+import { ExcalidrawElement, ExcalidrawIframeLikeElement, IframeData } from "./types";
 export declare const createSrcDoc: (body: string) => string;
 export declare const getEmbedLink: (link: string | null | undefined) => IframeData | null;
-export declare const isIframeLikeOrItsLabel: (element: NonDeletedExcalidrawElement) => Boolean;
 export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawIframeLikeElement) => ExcalidrawElement;
 export declare const actionSetEmbeddableAsActiveTool: {
     name: "setEmbeddableAsActiveTool";
@@ -26,13 +25,13 @@ export declare const actionSetEmbeddableAsActiveTool: {
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
             activeEmbeddable: {
-                element: NonDeletedExcalidrawElement;
-                state: "active" | "hover";
+                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: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;
-            selectionElement: NonDeletedExcalidrawElement | null;
+            selectionElement: import("./types").NonDeletedExcalidrawElement | null;
             isBindingEnabled: boolean;
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
@@ -45,7 +44,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             };
             editingFrame: string | null;
             elementsToHighlight: import("./types").NonDeleted<ExcalidrawElement>[] | null;
-            editingElement: NonDeletedExcalidrawElement | null;
+            editingElement: import("./types").NonDeletedExcalidrawElement | null;
             editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
             penMode: boolean;
             penDetected: boolean;
@@ -71,7 +70,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
             scrollY: number;
             cursorButton: "up" | "down";
             scrolledOutside: boolean;
-            name: string;
+            name: string | null;
             isResizing: boolean;
             isRotating: boolean;
             zoom: Readonly<{
@@ -91,7 +90,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 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;
@@ -148,7 +147,7 @@ export declare const actionSetEmbeddableAsActiveTool: {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "editor" | "info";
+            showHyperlinkPopup: false | "info" | "editor";
             selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
             snapLines: readonly import("../snapping").SnapLine[];
             originSnapOffset: {
@@ -164,5 +163,5 @@ export declare const actionSetEmbeddableAsActiveTool: {
 } & {
     keyTest?: undefined;
 };
-export declare const extractSrc: (htmlString: string) => string;
+export declare const maybeParseEmbedSrc: (str: string) => string;
 export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;

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,7 +7,6 @@ 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";

package/dist/excalidraw/element/index.js

@@ -8,7 +8,6 @@ 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";