@excalidraw/excalidraw 0.15.2-b7350f9 → 0.15.2-fc9a9a2

package/types/components/Section.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 export declare const Section: React.FC<{
-    heading: string;
+    heading: "canvasActions" | "selectedShapeActions" | "shapes";
     children?: React.ReactNode | ((heading: React.ReactNode) => React.ReactNode);
     className?: string;
 }>;

package/types/components/Sidebar/SidebarTab.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidebarTabName } from "../../types";
 export declare const SidebarTab: {
     ({ tab, children, ...rest }: {

package/types/components/Sidebar/SidebarTabTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SidebarTabName } from "../../types";
 export declare const SidebarTabTrigger: {
     ({ children, tab, onSelect, ...rest }: {

package/types/components/Sidebar/SidebarTabTriggers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const SidebarTabTriggers: {
     ({ children, ...rest }: {
         children: React.ReactNode;

package/types/components/Sidebar/SidebarTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const SidebarTabs: {
     ({ children, ...rest }: {
         children: React.ReactNode;

package/types/components/Stack.d.ts

@@ -10,7 +10,7 @@ type StackProps = {
     ref: React.RefObject<HTMLDivElement>;
 };
 declare const _default: {
-    Row: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "gap" | "justifyContent" | "align"> & React.RefAttributes<HTMLDivElement>>;
-    Col: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "gap" | "justifyContent" | "align"> & React.RefAttributes<HTMLDivElement>>;
+    Row: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "align" | "gap" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<Pick<StackProps, "style" | "className" | "children" | "align" | "gap" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/types/components/Trans.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
+import { TranslationKeys } from "../i18n";
 declare const Trans: ({ i18nKey, children, ...props }: {
     [key: string]: React.ReactNode | ((el: React.ReactNode) => React.ReactNode);
-    i18nKey: string;
+    i18nKey: TranslationKeys;
 }) => React.FunctionComponentElement<{
     children?: React.ReactNode;
 }>;

package/types/components/dropdownMenu/DropdownMenuTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const MenuTrigger: {
     ({ className, children, onToggle, title, ...rest }: {
         className?: string | undefined;

package/types/components/icons.d.ts

@@ -31,6 +31,7 @@ export declare const EraserIcon: JSX.Element;
 export declare const ZoomInIcon: JSX.Element;
 export declare const ZoomOutIcon: JSX.Element;
 export declare const TrashIcon: JSX.Element;
+export declare const EmbedIcon: JSX.Element;
 export declare const DuplicateIcon: JSX.Element;
 export declare const MoonIcon: JSX.Element;
 export declare const SunIcon: JSX.Element;

package/types/components/live-collaboration/LiveCollaborationTrigger.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./LiveCollaborationTrigger.scss";
 declare const LiveCollaborationTrigger: {
     ({ isCollaborating, onSelect, ...rest }: {

package/types/components/welcome-screen/WelcomeScreen.Center.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const Center: {
     ({ children }: {
         children?: React.ReactNode;

package/types/components/welcome-screen/WelcomeScreen.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./WelcomeScreen.scss";
 declare const WelcomeScreen: {
     (props: {

package/types/constants.d.ts

@@ -57,8 +57,17 @@ export declare enum EVENT {
     VISIBILITY_CHANGE = "visibilitychange",
     SCROLL = "scroll",
     EXCALIDRAW_LINK = "excalidraw-link",
-    MENU_ITEM_SELECT = "menu.itemSelect"
+    MENU_ITEM_SELECT = "menu.itemSelect",
+    MESSAGE = "message"
 }
+export declare const YOUTUBE_STATES: {
+    readonly UNSTARTED: -1;
+    readonly ENDED: 0;
+    readonly PLAYING: 1;
+    readonly PAUSED: 2;
+    readonly BUFFERING: 3;
+    readonly CUED: 5;
+};
 export declare const ENV: {
     TEST: string;
     DEVELOPMENT: string;
@@ -72,8 +81,8 @@ export declare const FONT_FAMILY: {
     Cascadia: number;
 };
 export declare const THEME: {
-    LIGHT: string;
-    DARK: string;
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
 };
 export declare const FRAME_STYLE: {
     strokeColor: string;
@@ -208,3 +217,4 @@ export declare const DEFAULT_SIDEBAR: {
     readonly name: "default";
     readonly defaultTab: "library";
 };
+export declare const LIBRARY_DISABLED_TYPES: Set<"embeddable" | "image">;

package/types/data/url.d.ts

@@ -0,0 +1,7 @@
+export declare const normalizeLink: (link: string) => string;
+export declare const isLocalLink: (link: string | null) => boolean;
+/**
+ * Returns URL sanitized and safe for usage in places such as
+ * iframe's src attribute or <a> href attributes.
+ */
+export declare const toValidURL: (link: string) => string;

package/types/element/Hyperlink.d.ts

@@ -1,16 +1,18 @@
-/// <reference types="react" />
 import { AppState, ExcalidrawProps, UIAppState } from "../types";
 import { NonDeletedExcalidrawElement } from "./types";
 import { Bounds } from "./bounds";
 import "./Hyperlink.scss";
 export declare const EXTERNAL_LINK_IMG: HTMLImageElement;
-export declare const Hyperlink: ({ element, setAppState, onLinkOpen, }: {
+export declare const Hyperlink: ({ element, setAppState, onLinkOpen, setToast, }: {
     element: NonDeletedExcalidrawElement;
     setAppState: React.Component<any, AppState>["setState"];
     onLinkOpen: ExcalidrawProps["onLinkOpen"];
+    setToast: (toast: {
+        message: string;
+        closable?: boolean;
+        duration?: number;
+    } | null) => void;
 }) => JSX.Element | null;
-export declare const normalizeLink: (link: string) => string;
-export declare const isLocalLink: (link: string | null) => boolean;
 export declare const actionLink: {
     name: "hyperlink";
     perform: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => false | {
@@ -26,6 +28,10 @@ export declare const actionLink: {
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
+            activeEmbeddable: {
+                element: NonDeletedExcalidrawElement;
+                state: "active" | "hover";
+            } | null;
             draggingElement: NonDeletedExcalidrawElement | null;
             resizingElement: NonDeletedExcalidrawElement | null;
             multiElement: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;
@@ -34,7 +40,12 @@ export declare const actionLink: {
             startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
             frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
-            shouldRenderFrames: boolean;
+            frameRendering: {
+                enabled: boolean;
+                name: boolean;
+                outline: boolean;
+                clip: boolean;
+            };
             editingFrame: string | null;
             elementsToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawElement>[] | null;
             editingElement: NonDeletedExcalidrawElement | null;
@@ -43,7 +54,7 @@ export declare const actionLink: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -87,11 +98,11 @@ export declare const actionLink: {
             openDialog: "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
@@ -101,7 +112,7 @@ export declare const actionLink: {
                 duration?: number | undefined;
             } | null;
             zenModeEnabled: boolean;
-            theme: string;
+            theme: import("./types").Theme;
             gridSize: number | null;
             viewModeEnabled: boolean;
             selectedGroupIds: {
@@ -133,15 +144,16 @@ export declare const actionLink: {
         action: string;
     };
     keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
-    contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.edit" | "labels.link.create";
+    contextItemLabel: (elements: readonly import("./types").ExcalidrawElement[], appState: Readonly<AppState>) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
     predicate: (elements: readonly import("./types").ExcalidrawElement[], appState: AppState) => boolean;
     PanelComponent: ({ elements, appState, updateData }: import("../actions/types").PanelComponentProps) => JSX.Element;
 } & {
     keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
 };
-export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.edit" | "labels.link.create";
+export declare const getContextMenuLabel: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => "labels.link.editEmbed" | "labels.link.edit" | "labels.link.createEmbed" | "labels.link.create";
 export declare const getLinkHandleFromCoords: ([x1, y1, x2, y2]: Bounds, angle: number, appState: UIAppState) => [x: number, y: number, width: number, height: number];
-export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
+export declare const isPointHittingLinkIcon: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number]) => boolean;
+export declare const isPointHittingLink: (element: NonDeletedExcalidrawElement, appState: AppState, [x, y]: readonly [number, number], isMobile: boolean) => boolean;
 export declare const showHyperlinkTooltip: (element: NonDeletedExcalidrawElement, appState: AppState) => void;
 export declare const hideHyperlinkToolip: () => void;
 export declare const shouldHideLinkPopup: (element: NonDeletedExcalidrawElement, appState: AppState, [clientX, clientY]: readonly [number, number]) => Boolean;

package/types/element/collision.d.ts

@@ -1,5 +1,5 @@
 import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameElement } from "./types";
+import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawEmbeddableElement, ExcalidrawDiamondElement, ExcalidrawTextElement, ExcalidrawEllipseElement, NonDeleted, ExcalidrawImageElement, ExcalidrawFrameElement } from "./types";
 import { FrameNameBoundsCache, Point } from "../types";
 import { AppState } from "../types";
 export declare const hitTest: (element: NonDeletedExcalidrawElement, appState: AppState, frameNameBoundsCache: FrameNameBoundsCache, x: number, y: number) => boolean;
@@ -18,4 +18,4 @@ export declare const determineFocusPoint: (element: ExcalidrawBindableElement, f
 export declare const intersectElementWithLine: (element: ExcalidrawBindableElement, a: readonly [number, number], b: readonly [number, number], gap?: number) => Point[];
 export declare const getCircleIntersections: (center: readonly [number, number, number, number, number, number, number, number], radius: number, line: readonly [number, number, number, number, number, number, number, number]) => GA.Point[];
 export declare const findFocusPointForEllipse: (ellipse: ExcalidrawEllipseElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
-export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawFrameElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];
+export declare const findFocusPointForRectangulars: (element: ExcalidrawRectangleElement | ExcalidrawImageElement | ExcalidrawDiamondElement | ExcalidrawTextElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement, relativeDistance: number, point: readonly [number, number, number, number, number, number, number, number]) => readonly [number, number, number, number, number, number, number, number];

package/types/element/embeddable.d.ts

@@ -0,0 +1,153 @@
+import { ExcalidrawProps } from "../types";
+import { ExcalidrawElement, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement, Theme } from "./types";
+type EmbeddedLink = ({
+    aspectRatio: {
+        w: number;
+        h: number;
+    };
+    warning?: string;
+} & ({
+    type: "video" | "generic";
+    link: string;
+} | {
+    type: "document";
+    srcdoc: (theme: Theme) => string;
+})) | null;
+export declare const getEmbedLink: (link: string | null | undefined) => EmbeddedLink;
+export declare const isEmbeddableOrFrameLabel: (element: NonDeletedExcalidrawElement) => Boolean;
+export declare const createPlaceholderEmbeddableLabel: (element: ExcalidrawEmbeddableElement) => ExcalidrawElement;
+export declare const actionSetEmbeddableAsActiveTool: {
+    name: "setEmbeddableAsActiveTool";
+    trackEvent: {
+        category: "toolbar";
+    };
+    perform: (elements: readonly ExcalidrawElement[], appState: Readonly<import("../types").AppState>, _: any, app: import("../types").AppClassProperties) => {
+        elements: readonly ExcalidrawElement[];
+        appState: {
+            activeTool: {
+                lastActiveTool: import("../types").LastActiveTool;
+                locked: boolean;
+            } & ({
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                customType: null;
+            } | {
+                type: "custom";
+                customType: string;
+            });
+            contextMenu: {
+                items: import("../components/ContextMenu").ContextMenuItems;
+                top: number;
+                left: number;
+            } | null;
+            showWelcomeScreen: boolean;
+            isLoading: boolean;
+            errorMessage: import("react").ReactNode;
+            activeEmbeddable: {
+                element: NonDeletedExcalidrawElement;
+                state: "active" | "hover";
+            } | null;
+            draggingElement: NonDeletedExcalidrawElement | null;
+            resizingElement: NonDeletedExcalidrawElement | null;
+            multiElement: import("./types").NonDeleted<import("./types").ExcalidrawLinearElement> | null;
+            selectionElement: NonDeletedExcalidrawElement | null;
+            isBindingEnabled: boolean;
+            startBoundElement: import("./types").NonDeleted<import("./types").ExcalidrawBindableElement> | null;
+            suggestedBindings: import("./binding").SuggestedBinding[];
+            frameToHighlight: import("./types").NonDeleted<import("./types").ExcalidrawFrameElement> | null;
+            frameRendering: {
+                enabled: boolean;
+                name: boolean;
+                outline: boolean;
+                clip: boolean;
+            };
+            editingFrame: string | null;
+            elementsToHighlight: import("./types").NonDeleted<ExcalidrawElement>[] | null;
+            editingElement: NonDeletedExcalidrawElement | null;
+            editingLinearElement: import("./linearElementEditor").LinearElementEditor | null;
+            penMode: boolean;
+            penDetected: boolean;
+            exportBackground: boolean;
+            exportEmbedScene: boolean;
+            exportWithDarkMode: boolean;
+            exportScale: number;
+            currentItemStrokeColor: string;
+            currentItemBackgroundColor: string;
+            currentItemFillStyle: import("./types").FillStyle;
+            currentItemStrokeWidth: number;
+            currentItemStrokeStyle: import("./types").StrokeStyle;
+            currentItemRoughness: number;
+            currentItemOpacity: number;
+            currentItemFontFamily: number;
+            currentItemFontSize: number;
+            currentItemTextAlign: string;
+            currentItemStartArrowhead: import("./types").Arrowhead | null;
+            currentItemEndArrowhead: import("./types").Arrowhead | null;
+            currentItemRoundness: import("./types").StrokeRoundness;
+            viewBackgroundColor: string;
+            scrollX: number;
+            scrollY: number;
+            cursorButton: "up" | "down";
+            scrolledOutside: boolean;
+            name: string;
+            isResizing: boolean;
+            isRotating: boolean;
+            zoom: Readonly<{
+                value: import("../types").NormalizedZoomValue;
+            }>;
+            openMenu: "canvas" | "shape" | null;
+            openPopup: "canvasBackground" | "elementBackground" | "elementStroke" | null;
+            openSidebar: {
+                name: string;
+                tab?: string | undefined;
+            } | null;
+            openDialog: "imageExport" | "help" | "jsonExport" | null;
+            defaultSidebarDockedPreference: boolean;
+            lastPointerDownWith: import("./types").PointerType;
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
+            previousSelectedElementIds: {
+                [id: string]: true;
+            };
+            selectedElementsAreBeingDragged: boolean;
+            shouldCacheIgnoreZoom: boolean;
+            toast: {
+                message: string;
+                closable?: boolean | undefined;
+                duration?: number | undefined;
+            } | null;
+            zenModeEnabled: boolean;
+            theme: Theme;
+            gridSize: number | null;
+            viewModeEnabled: boolean;
+            selectedGroupIds: {
+                [groupId: string]: boolean;
+            };
+            editingGroupId: string | null;
+            width: number;
+            height: number;
+            offsetTop: number;
+            offsetLeft: number;
+            fileHandle: import("browser-fs-access").FileSystemHandle | null;
+            collaborators: Map<string, import("../types").Collaborator>;
+            showStats: boolean;
+            currentChartType: import("./types").ChartType;
+            pasteDialog: {
+                shown: false;
+                data: null;
+            } | {
+                shown: true;
+                data: import("../charts").Spreadsheet;
+            };
+            pendingImageElementId: string | null;
+            showHyperlinkPopup: false | "editor" | "info";
+            selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
+        };
+        commitToHistory: false;
+    };
+} & {
+    keyTest?: undefined;
+};
+export declare const extractSrc: (htmlString: string) => string;
+export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;
+export {};

package/types/element/linearElementEditor.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { NonDeleted, ExcalidrawLinearElement, ExcalidrawElement, PointBinding, ExcalidrawBindableElement, ExcalidrawTextElementWithContainer } from "./types";
 import { Point, AppState, PointerCoords } from "../types";
 import History from "../history";
@@ -131,6 +130,10 @@ export declare class LinearElementEditor {
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
+            activeEmbeddable: {
+                element: import("./types").NonDeletedExcalidrawElement;
+                state: "active" | "hover";
+            } | null;
             draggingElement: import("./types").NonDeletedExcalidrawElement | null;
             resizingElement: import("./types").NonDeletedExcalidrawElement | null;
             multiElement: NonDeleted<ExcalidrawLinearElement> | null;
@@ -139,7 +142,12 @@ export declare class LinearElementEditor {
             startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
             suggestedBindings: import("./binding").SuggestedBinding[];
             frameToHighlight: NonDeleted<import("./types").ExcalidrawFrameElement> | null;
-            shouldRenderFrames: boolean;
+            frameRendering: {
+                enabled: boolean;
+                name: boolean;
+                outline: boolean;
+                clip: boolean;
+            };
             editingFrame: string | null;
             elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
             editingElement: import("./types").NonDeletedExcalidrawElement | null;
@@ -147,7 +155,7 @@ export declare class LinearElementEditor {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";
@@ -171,7 +179,7 @@ export declare class LinearElementEditor {
             currentItemTextAlign: string;
             currentItemStartArrowhead: import("./types").Arrowhead | null;
             currentItemEndArrowhead: import("./types").Arrowhead | null;
-            currentItemRoundness: import("./types").StrokeRoundness;
+            currentItemRoundness: import("./types").StrokeRoundness; /** @returns whether point was dragged */
             viewBackgroundColor: string;
             scrollX: number;
             scrollY: number;
@@ -192,11 +200,11 @@ export declare class LinearElementEditor {
             openDialog: "imageExport" | "help" | "jsonExport" | null;
             defaultSidebarDockedPreference: boolean;
             lastPointerDownWith: import("./types").PointerType;
-            selectedElementIds: {
-                [id: string]: boolean;
-            };
+            selectedElementIds: Readonly<{
+                [id: string]: true;
+            }>;
             previousSelectedElementIds: {
-                [id: string]: boolean;
+                [id: string]: true;
             };
             selectedElementsAreBeingDragged: boolean;
             shouldCacheIgnoreZoom: boolean;
@@ -206,7 +214,7 @@ export declare class LinearElementEditor {
                 duration?: number | undefined;
             } | null;
             zenModeEnabled: boolean;
-            theme: string;
+            theme: import("./types").Theme;
             gridSize: number | null;
             viewModeEnabled: boolean;
             selectedGroupIds: {
@@ -229,7 +237,7 @@ export declare class LinearElementEditor {
                 data: import("../charts").Spreadsheet;
             };
             pendingImageElementId: string | null;
-            showHyperlinkPopup: false | "info" | "editor";
+            showHyperlinkPopup: false | "editor" | "info";
             selectedLinearElement: LinearElementEditor | null;
         };
     };

package/types/element/newElement.d.ts

@@ -1,10 +1,14 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement } from "../element/types";
+import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "../element/types";
 import { AppState } from "../types";
 import { MarkOptional, Mutable } from "../utility-types";
 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">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
+export declare const newEmbeddableElement: (opts: {
+    type: "embeddable";
+    validated: boolean | undefined;
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawEmbeddableElement>;
 export declare const newFrameElement: (opts: ElementConstructorOpts) => NonDeleted<ExcalidrawFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;
@@ -15,7 +19,6 @@ export declare const newTextElement: (opts: {
     containerId?: ExcalidrawTextContainer["id"];
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
-    isFrameName?: boolean;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;

package/types/element/transformHandles.d.ts

@@ -23,8 +23,8 @@ export declare const OMIT_SIDES_FOR_FRAME: {
 export declare const getTransformHandlesFromCoords: ([x1, y1, x2, y2, cx, cy]: [number, number, number, number, number, number], angle: number, zoom: Zoom, pointerType: PointerType, omitSides?: {
     s?: boolean | undefined;
     e?: boolean | undefined;
-    n?: boolean | undefined;
     w?: boolean | undefined;
+    n?: boolean | undefined;
     nw?: boolean | undefined;
     ne?: boolean | undefined;
     sw?: boolean | undefined;

package/types/element/typeChecks.d.ts

@@ -1,9 +1,10 @@
 import { AppState } from "../types";
 import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType } from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawGenericElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType } from "./types";
 export declare const isGenericElement: (element: ExcalidrawElement | null) => element is ExcalidrawGenericElement;
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
+export declare const isEmbeddableElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawEmbeddableElement;
 export declare const isTextElement: (element: ExcalidrawElement | null) => element is ExcalidrawTextElement;
 export declare const isFrameElement: (element: ExcalidrawElement | null) => element is ExcalidrawFrameElement;
 export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) => element is ExcalidrawFreeDrawElement;

package/types/element/types.d.ts

@@ -73,6 +73,17 @@ export type ExcalidrawDiamondElement = _ExcalidrawElementBase & {
 export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
     type: "ellipse";
 };
+export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase & Readonly<{
+    /**
+     * indicates whether the embeddable src (url) has been validated for rendering.
+     * nullish value indicates that the validation is pending. We reset the
+     * value on each restore (or url change) so that we can guarantee
+     * the validation came from a trusted source (the editor). Also because we
+     * may not have access to host-app supplied url validator during restore.
+     */
+    validated?: boolean;
+    type: "embeddable";
+}>;
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
     fileId: FileId | null;
@@ -89,7 +100,7 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
 /**
  * These are elements that don't have any additional properties.
  */
-export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement;
+export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRectangleElement | ExcalidrawEmbeddableElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement;
 /**
  * ExcalidrawElement should be JSON serializable and (eventually) contain
  * no computed data. The list of all ExcalidrawElements should be shareable
@@ -118,7 +129,7 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
         _brand: "unitlessLineHeight";
     };
 }>;
-export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawFrameElement;
+export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement;
 export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawArrowElement;
 export type ExcalidrawTextElementWithContainer = {
     containerId: ExcalidrawTextContainer["id"];

package/types/frame.d.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawElement, ExcalidrawFrameElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
-import { AppState } from "./types";
+import { AppClassProperties, AppState } from "./types";
 import { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 export declare const bindElementsToFramesAfterDuplication: (nextElements: ExcalidrawElement[], oldElements: readonly ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
 export declare const getElementsCompletelyInFrame: (elements: readonly ExcalidrawElement[], frame: ExcalidrawFrameElement) => ExcalidrawElement[];
@@ -26,7 +26,7 @@ export declare const removeElementsFromFrame: (allElements: ExcalidrawElementsIn
 export declare const removeAllElementsFromFrame: (allElements: ExcalidrawElementsIncludingDeleted, frame: ExcalidrawFrameElement, appState: AppState) => ExcalidrawElement[];
 export declare const replaceAllElementsInFrame: (allElements: ExcalidrawElementsIncludingDeleted, nextElementsInFrame: ExcalidrawElement[], frame: ExcalidrawFrameElement, appState: AppState) => ExcalidrawElement[];
 /** does not mutate elements, but return new ones */
-export declare const updateFrameMembershipOfSelectedElements: (allElements: ExcalidrawElementsIncludingDeleted, appState: AppState) => ExcalidrawElementsIncludingDeleted;
+export declare const updateFrameMembershipOfSelectedElements: (allElements: ExcalidrawElementsIncludingDeleted, appState: AppState, app: AppClassProperties) => ExcalidrawElementsIncludingDeleted;
 /**
  * filters out elements that are inside groups that contain a frame element
  * anywhere in the group tree

package/types/groups.d.ts

@@ -1,5 +1,5 @@
-import { GroupId, ExcalidrawElement, NonDeleted } from "./element/types";
-import { AppState } from "./types";
+import { GroupId, ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement } from "./element/types";
+import { AppClassProperties, AppState } from "./types";
 export declare const selectGroup: (groupId: GroupId, appState: AppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => AppState;
 /**
  * If the element's group is selected, don't render an individual
@@ -12,7 +12,7 @@ export declare const getSelectedGroupIds: (appState: AppState) => GroupId[];
  * When you select an element, you often want to actually select the whole group it's in, unless
  * you're currently editing that group.
  */
-export declare const selectGroupsForSelectedElements: (appState: AppState, elements: readonly NonDeleted<ExcalidrawElement>[]) => AppState;
+export declare const selectGroupsForSelectedElements: (appState: AppState, elements: readonly NonDeletedExcalidrawElement[], prevAppState: AppState, app: AppClassProperties | null) => AppState;
 export declare const selectGroupsFromGivenElements: (elements: readonly NonDeleted<ExcalidrawElement>[], appState: AppState) => {
     [groupId: string]: boolean;
 };

package/types/history.d.ts

@@ -5,9 +5,9 @@ export interface HistoryEntry {
     elements: ExcalidrawElement[];
 }
 declare const clearAppStatePropertiesForHistory: (appState: AppState) => {
-    selectedElementIds: {
-        [id: string]: boolean;
-    };
+    selectedElementIds: Readonly<{
+        [id: string]: true;
+    }>;
     selectedGroupIds: {
         [groupId: string]: boolean;
     };

package/types/hooks/useOutsideClick.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useOutsideClick<T extends HTMLElement>(ref: React.RefObject<T>, 
 /** if performance is of concern, memoize the callback */
 callback: (event: Event) => void, 

package/types/hooks/useScrollPosition.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const useScrollPosition: <T extends HTMLElement>(elementRef: import("react").RefObject<T>) => number;