@zsviczian/excalidraw 0.15.2-obsidian-7 → 0.15.2-obsidian-8

package/types/components/App.d.ts

@@ -64,12 +64,12 @@ declare class App extends React.Component<AppProps, AppState> {
     constructor(props: AppProps);
     private renderCanvas;
     private onWindowMessage;
-    private updateIFrameRef;
-    private getIFrameElementById;
-    private handleIFrameCenterClick;
-    private isIFrameCenter;
-    private updateIFrames;
-    private renderIFrames;
+    private updateEmbeddableRef;
+    private getHTMLIFrameElement;
+    private handleEmbeddableCenterClick;
+    private isEmbeddableCenter;
+    private updateEmbeddables;
+    private renderEmbeddables;
     private getFrameNameDOMId;
     frameNameBoundsCache: FrameNameBoundsCache;
     private renderFrameNames;
@@ -113,7 +113,12 @@ declare class App extends React.Component<AppProps, AppState> {
     setAppState: React.Component<any, AppState>["setState"];
     removePointer: (event: React.PointerEvent<HTMLElement> | PointerEvent) => void;
     toggleLock: (source?: "keyboard" | "ui") => void;
-    toggleFrameRendering: () => void;
+    updateFrameRendering: (opts: Partial<{
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    }> | ((prevState: AppState["frameRendering"]) => Partial<AppState["frameRendering"]>)) => void;
     togglePenMode: () => void;
     onHandToolToggle: () => void;
     /**
@@ -222,7 +227,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private isHittingCommonBoundingBoxOfSelectedElements;
     private handleTextOnPointerDown;
     private handleFreeDrawElementOnPointerDown;
-    private insertIFrameElement;
+    private insertEmbeddableElement;
     private createImageElement;
     private handleLinearElementOnPointerDown;
     private getCurrentItemRoundness;

package/types/element/Hyperlink.d.ts

@@ -29,7 +29,7 @@ export declare const actionLink: {
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
-            activeIFrame: {
+            activeEmbeddable: {
                 element: NonDeletedExcalidrawElement;
                 state: "active" | "hover";
             } | null;
@@ -41,7 +41,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;
@@ -50,7 +55,7 @@ export declare const actionLink: {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "iframe" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";

package/types/element/collision.d.ts

@@ -1,5 +1,5 @@
 import * as GA from "../ga";
-import { NonDeletedExcalidrawElement, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawRectangleElement, ExcalidrawIFrameElement, 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 | ExcalidrawIFrameElement | 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,171 @@
+/// <reference types="react" />
+import { ExcalidrawProps } from "../types";
+import { ExcalidrawElement, ExcalidrawEmbeddableElement, NonDeletedExcalidrawElement } from "./types";
+type EmbeddedLink = {
+    link: string;
+    aspectRatio: {
+        w: number;
+        h: number;
+    };
+    type: "video" | "generic";
+} | null;
+export declare const getEmbedLink: (link?: string | null) => 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: string;
+            gridSize: number | null;
+            previousGridSize: 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 | "info" | "editor";
+            linkOpacity: number;
+            trayModeEnabled: boolean;
+            colorPalette?: {
+                canvasBackground: import("../colors").ColorPaletteCustom;
+                elementBackground: import("../colors").ColorPaletteCustom;
+                elementStroke: import("../colors").ColorPaletteCustom;
+                topPicks: {
+                    canvasBackground: [string, string, string, string, string];
+                    elementStroke: [string, string, string, string, string];
+                    elementBackground: [string, string, string, string, string];
+                };
+            } | undefined;
+            allowWheelZoom?: boolean | undefined;
+            allowPinchZoom?: boolean | undefined;
+            pinnedScripts?: string[] | undefined;
+            customPens?: any[] | undefined;
+            currentStrokeOptions?: any;
+            resetCustomPen?: any;
+            gridColor: string;
+            dynamicStyle: string;
+            invertBindingBehaviour: boolean;
+            selectedLinearElement: import("./linearElementEditor").LinearElementEditor | null;
+        };
+        commitToHistory: false;
+    };
+    keyTest: (event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean;
+} & {
+    keyTest?: ((event: KeyboardEvent | import("react").KeyboardEvent<Element>) => boolean) | undefined;
+};
+export declare const embeddableURLValidator: (url: string | null | undefined, validateEmbeddable: ExcalidrawProps["validateEmbeddable"]) => boolean;
+export {};

package/types/element/linearElementEditor.d.ts

@@ -131,7 +131,7 @@ export declare class LinearElementEditor {
             showWelcomeScreen: boolean;
             isLoading: boolean;
             errorMessage: import("react").ReactNode;
-            activeIFrame: {
+            activeEmbeddable: {
                 element: import("./types").NonDeletedExcalidrawElement;
                 state: "active" | "hover";
             } | null;
@@ -143,7 +143,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;
@@ -151,7 +156,7 @@ export declare class LinearElementEditor {
                 lastActiveTool: import("../types").LastActiveTool;
                 locked: boolean;
             } & ({
-                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "iframe" | "image" | "frame" | "freedraw" | "eraser" | "hand";
+                type: "line" | "arrow" | "text" | "selection" | "rectangle" | "diamond" | "ellipse" | "embeddable" | "image" | "frame" | "freedraw" | "eraser" | "hand";
                 customType: null;
             } | {
                 type: "custom";

package/types/element/newElement.d.ts

@@ -1,14 +1,14 @@
-import { ExcalidrawElement, ExcalidrawImageElement, ExcalidrawTextElement, ExcalidrawLinearElement, ExcalidrawGenericElement, NonDeleted, TextAlign, GroupId, VerticalAlign, Arrowhead, ExcalidrawFreeDrawElement, FontFamilyValues, ExcalidrawTextContainer, ExcalidrawFrameElement, ExcalidrawIFrameElement } 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 newIFrameElement: (opts: {
-    type: "iframe";
+export declare const newEmbeddableElement: (opts: {
+    type: "embeddable";
     validated: boolean | undefined;
-} & ElementConstructorOpts) => NonDeleted<ExcalidrawIFrameElement>;
+} & ElementConstructorOpts) => NonDeleted<ExcalidrawEmbeddableElement>;
 export declare const newFrameElement: (opts: ElementConstructorOpts) => NonDeleted<ExcalidrawFrameElement>;
 export declare const newTextElement: (opts: {
     text: string;

package/types/element/typeChecks.d.ts

@@ -1,19 +1,19 @@
 import { AppState } from "../types";
 import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawIFrameElement, 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 isIFrameElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawIFrameElement;
+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;
 export declare const isFreeDrawElementType: (elementType: ExcalidrawElement["type"]) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
 export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
-export declare const isLinearElementType: (elementType: AppState["activeTool"]["type"] | "iframe") => boolean;
+export declare const isLinearElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
 export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
-export declare const isBindingElementType: (elementType: AppState["activeTool"]["type"] | "iframe") => boolean;
+export declare const isBindingElementType: (elementType: AppState["activeTool"]["type"]) => boolean;
 export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => boolean;

package/types/element/types.d.ts

@@ -73,16 +73,16 @@ export type ExcalidrawDiamondElement = _ExcalidrawElementBase & {
 export type ExcalidrawEllipseElement = _ExcalidrawElementBase & {
     type: "ellipse";
 };
-export type ExcalidrawIFrameElement = _ExcalidrawElementBase & Readonly<{
+export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase & Readonly<{
     /**
-     * indicates whether the iframe src (url) has been validated for rendering.
+     * 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: "iframe";
+    type: "embeddable";
 }>;
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
@@ -100,7 +100,7 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & {
 /**
  * These are elements that don't have any additional properties.
  */
-export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRectangleElement | ExcalidrawIFrameElement | 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
@@ -130,8 +130,8 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
         _brand: "unitlessLineHeight";
     };
 }>;
-export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawIFrameElement | ExcalidrawFrameElement;
-export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawArrowElement | ExcalidrawIFrameElement;
+export type ExcalidrawBindableElement = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawTextElement | ExcalidrawImageElement | ExcalidrawEmbeddableElement | ExcalidrawFrameElement;
+export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement | ExcalidrawArrowElement;
 export type ExcalidrawTextElementWithContainer = {
     containerId: ExcalidrawTextContainer["id"];
 } & ExcalidrawTextElement;

package/types/types.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, ExcalidrawTextElement, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, ExcalidrawTextElement, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement, ExcalidrawEmbeddableElement } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -58,7 +58,7 @@ export type BinaryFileData = {
 export type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export type BinaryFiles = Record<ExcalidrawElement["id"], BinaryFileData>;
 export type LastActiveTool = {
-    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
     customType: null;
 } | {
     type: "custom";
@@ -75,7 +75,7 @@ export type AppState = {
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: React.ReactNode;
-    activeIFrame: {
+    activeEmbeddable: {
         element: NonDeletedExcalidrawElement;
         state: "hover" | "active";
     } | null;
@@ -87,7 +87,12 @@ export type AppState = {
     startBoundElement: NonDeleted<ExcalidrawBindableElement> | null;
     suggestedBindings: SuggestedBinding[];
     frameToHighlight: NonDeleted<ExcalidrawFrameElement> | null;
-    shouldRenderFrames: boolean;
+    frameRendering: {
+        enabled: boolean;
+        name: boolean;
+        outline: boolean;
+        clip: boolean;
+    };
     editingFrame: string | null;
     elementsToHighlight: NonDeleted<ExcalidrawElement>[] | null;
     editingElement: NonDeletedExcalidrawElement | null;
@@ -100,7 +105,7 @@ export type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
         customType: null;
     } | {
         type: "custom";
@@ -306,10 +311,10 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
-    validateIFrame?: boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined);
-    renderCustomIFrame?: (element: NonDeletedExcalidrawElement, radius: number, appState: UIAppState) => JSX.Element | null;
+    validateEmbeddable?: boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined);
+    renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
     renderWebview?: boolean;
-    renderIFrameMenu?: (//zsivzian
+    renderEmbeddableMenu?: (//zsivzian
     appState: AppState) => JSX.Element | null;
 }
 export type SceneData = {
@@ -466,13 +471,13 @@ export type ExcalidrawImperativeAPI = {
     setCursor: InstanceType<typeof App>["setCursor"];
     resetCursor: InstanceType<typeof App>["resetCursor"];
     toggleSidebar: InstanceType<typeof App>["toggleSidebar"];
-    getIFrameElementById: InstanceType<typeof App>["getIFrameElementById"];
+    getHTMLIFrameElement: InstanceType<typeof App>["getHTMLIFrameElement"];
     /**
      * Disables rendering of frames (including element clipping), but currently
      * the frames are still interactive in edit mode. As such, this API should be
      * used in conjunction with view mode (props.viewModeEnabled).
      */
-    toggleFrameRendering: InstanceType<typeof App>["toggleFrameRendering"];
+    updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
 };
 export type Device = Readonly<{
     isSmScreen: boolean;

package/types/utils.d.ts

@@ -81,7 +81,7 @@ export declare const selectNode: (node: Element) => void;
 export declare const removeSelection: () => void;
 export declare const distance: (x: number, y: number) => number;
 export declare const updateActiveTool: (appState: Pick<AppState, "activeTool">, data: ({
-    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "iframe";
+    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
 } | {
     type: "custom";
     customType: string;