@excalidraw/excalidraw 0.15.2-6546-eae7ba2 → 0.15.2-6546-3398d86

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;
@@ -152,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";
@@ -176,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;
@@ -211,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: {
@@ -234,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";
 export type ElementConstructorOpts = MarkOptional<Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">, "width" | "height" | "angle" | "groupIds" | "frameId" | "boundElements" | "seed" | "version" | "versionNonce" | "link" | "strokeStyle" | "fillStyle" | "strokeColor" | "backgroundColor" | "roughness" | "strokeWidth" | "roundness" | "locked" | "opacity">;
 export declare const newElement: (opts: {
     type: ExcalidrawGenericElement["type"];
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawGenericElement>;
+export declare const newEmbeddableElement: (opts: {
+    type: "embeddable";
+    validated: ExcalidrawEmbeddableElement["validated"];
+} & 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"] | null;
     lineHeight?: ExcalidrawTextElement["lineHeight"];
     strokeWidth?: ExcalidrawTextElement["strokeWidth"];
-    isFrameName?: boolean;
 } & ElementConstructorOpts) => NonDeleted<ExcalidrawTextElement>;
 export declare const refreshTextDimensions: (textElement: ExcalidrawTextElement, text?: string) => {
     x: number;

package/types/element/textElement.d.ts

@@ -6,7 +6,7 @@ export declare const normalizeText: (text: string) => string;
 export declare const splitIntoLines: (text: string) => string[];
 export declare const redrawTextBoundingBox: (textElement: ExcalidrawTextElement, container: ExcalidrawElement | null) => void;
 export declare const bindTextToShapeAfterDuplication: (sceneElements: ExcalidrawElement[], oldElements: ExcalidrawElement[], oldIdToDuplicatedId: Map<ExcalidrawElement["id"], ExcalidrawElement["id"]>) => void;
-export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType) => void;
+export declare const handleBindTextResize: (container: NonDeletedExcalidrawElement, transformHandleType: MaybeTransformHandleType, shouldMaintainAspectRatio?: boolean) => void;
 export declare const computeBoundTextPosition: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => {
     x: number;
     y: number;
@@ -47,10 +47,6 @@ export declare const getBoundTextElement: (element: ExcalidrawElement | null) =>
 export declare const getContainerElement: (element: (ExcalidrawElement & {
     containerId: ExcalidrawElement["id"] | null;
 }) | null) => ExcalidrawElement | null;
-export declare const getContainerDims: (element: ExcalidrawElement) => {
-    width: number;
-    height: number;
-};
 export declare const getContainerCenter: (container: ExcalidrawElement, appState: AppState) => {
     x: number;
     y: number;
@@ -68,14 +64,15 @@ export declare const getBoundTextElementPosition: (container: ExcalidrawElement,
 export declare const shouldAllowVerticalAlign: (selectedElements: NonDeletedExcalidrawElement[]) => boolean;
 export declare const suppportsHorizontalAlign: (selectedElements: NonDeletedExcalidrawElement[]) => boolean;
 export declare const getTextBindableContainerAtPosition: (elements: readonly ExcalidrawElement[], appState: AppState, x: number, y: number) => ExcalidrawTextContainer | null;
-export declare const VALID_CONTAINER_TYPES: Set<string>;
+declare const VALID_CONTAINER_TYPES: Set<string>;
 export declare const isValidTextContainer: (element: {
     type: ExcalidrawElement["type"];
 }) => boolean;
 export declare const computeContainerDimensionForBoundText: (dimension: number, containerType: ExtractSetType<typeof VALID_CONTAINER_TYPES>) => number;
-export declare const getBoundTextMaxWidth: (container: ExcalidrawElement) => number;
+export declare const getBoundTextMaxWidth: (container: ExcalidrawElement, boundTextElement?: ExcalidrawTextElement | null) => number;
 export declare const getBoundTextMaxHeight: (container: ExcalidrawElement, boundTextElement: ExcalidrawTextElementWithContainer) => number;
 export declare const isMeasureTextSupported: () => boolean;
 export declare const getDefaultLineHeight: (fontFamily: FontFamilyValues) => number & {
     _brand: "unitlessLineHeight";
 };
+export {};

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<{
+    type: "embeddable";
+    /**
+     * indicates whether the embeddable src (url) has been validated for rendering.
+     * null 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 | null;
+}>;
 export type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
     fileId: FileId | null;
@@ -95,7 +106,7 @@ export type ExcalidrawGenericElement = ExcalidrawSelectionElement | ExcalidrawRe
  * no computed data. The list of all ExcalidrawElements should be shareable
  * between peers and contain no state local to the peer.
  */
-export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement;
+export type ExcalidrawElement = ExcalidrawGenericElement | ExcalidrawTextElement | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement | ExcalidrawFrameElement | ExcalidrawEmbeddableElement;
 export type NonDeleted<TElement extends ExcalidrawElement> = TElement & {
     isDeleted: boolean;
 };
@@ -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/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;

package/types/i18n.d.ts

@@ -1,8 +1,11 @@
+import fallbackLangData from "./locales/en.json";
+import { NestedKeyOf } from "./utility-types";
 export interface Language {
     code: string;
     label: string;
     rtl?: boolean;
 }
+export type TranslationKeys = NestedKeyOf<typeof fallbackLangData>;
 export declare const defaultLang: {
     code: string;
     label: string;
@@ -10,11 +13,11 @@ export declare const defaultLang: {
 export declare const languages: Language[];
 export declare const setLanguage: (lang: Language) => Promise<void>;
 export declare const getLanguage: () => Language;
-export declare const t: (path: string, replacement?: {
+export declare const t: (path: NestedKeyOf<typeof fallbackLangData>, replacement?: {
     [key: string]: string | number;
 } | null | undefined, fallback?: string) => string;
 export declare const useI18n: () => {
-    t: (path: string, replacement?: {
+    t: (path: NestedKeyOf<typeof fallbackLangData>, replacement?: {
         [key: string]: string | number;
     } | null | undefined, fallback?: string) => string;
     langCode: string;

package/types/keys.d.ts

@@ -61,6 +61,7 @@ export declare const KEYS: {
     readonly Y: "y";
     readonly Z: "z";
     readonly K: "k";
+    readonly W: "w";
     readonly 0: "0";
     readonly 1: "1";
     readonly 2: "2";

package/types/packages/excalidraw/example/initialData.d.ts

@@ -1,5 +1,6 @@
+import { ExcalidrawElementSkeleton } from "../../../data/transform";
 declare const _default: {
-    elements: readonly import("../../../data/transform").ExcalidrawProgrammaticElement[];
+    elements: ExcalidrawElementSkeleton[];
     appState: {
         viewBackgroundColor: string;
         currentItemFontFamily: number;

package/types/packages/excalidraw/webpack.dev.config.d.ts

@@ -36,13 +36,16 @@ export namespace module {
     } | {
         test: RegExp;
         exclude: RegExp;
-        use: {
+        use: ({
+            loader: string;
+            options?: undefined;
+        } | {
             loader: string;
             options: {
                 transpileOnly: boolean;
                 configFile: string;
             };
-        }[];
+        })[];
         type?: undefined;
     } | {
         test: RegExp;

package/types/packages/excalidraw/webpack.prod.config.d.ts

@@ -36,6 +36,9 @@ export namespace module {
         test: RegExp;
         exclude: RegExp;
         use: ({
+            loader: string;
+            options?: undefined;
+        } | {
             loader: string;
             options: {
                 transpileOnly: boolean;

package/types/packages/utils.d.ts

@@ -21,8 +21,9 @@ export declare const exportToBlob: (opts: ExportOpts & {
     quality?: number;
     exportPadding?: number;
 }) => Promise<Blob>;
-export declare const exportToSvg: ({ elements, appState, files, exportPadding, }: Omit<ExportOpts, "getDimensions"> & {
+export declare const exportToSvg: ({ elements, appState, files, exportPadding, renderEmbeddables, }: Omit<ExportOpts, "getDimensions"> & {
     exportPadding?: number | undefined;
+    renderEmbeddables?: boolean | undefined;
 }) => Promise<SVGSVGElement>;
 export declare const exportToClipboard: (opts: ExportOpts & {
     mimeType?: string;

package/types/renderer/renderElement.d.ts

@@ -29,7 +29,7 @@ export declare const setShapeForElement: <T extends ExcalidrawElement>(element:
 export declare const invalidateShapeForElement: (element: ExcalidrawElement) => boolean;
 export declare const generateRoughOptions: (element: ExcalidrawElement, continuousPath?: boolean) => Options;
 export declare const renderElement: (element: NonDeletedExcalidrawElement, rc: RoughCanvas, context: CanvasRenderingContext2D, renderConfig: RenderConfig, appState: AppState) => void;
-export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null) => void;
+export declare const renderElementToSvg: (element: NonDeletedExcalidrawElement, rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, offsetX: number, offsetY: number, exportWithDarkMode?: boolean, exportingFrameId?: string | null, renderEmbeddables?: boolean) => void;
 export declare const pathsCache: WeakMap<ExcalidrawFreeDrawElement, Path2D>;
 export declare function generateFreeDrawShape(element: ExcalidrawFreeDrawElement): Path2D;
 export declare function getFreeDrawPath2D(element: ExcalidrawFreeDrawElement): Path2D | undefined;

package/types/renderer/renderScene.d.ts

@@ -42,9 +42,10 @@ export declare const isVisibleElement: (element: ExcalidrawElement, canvasWidth:
     scrollX: number;
     scrollY: number;
 }) => boolean;
-export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, }?: {
+export declare const renderSceneToSvg: (elements: readonly NonDeletedExcalidrawElement[], rsvg: RoughSVG, svgRoot: SVGElement, files: BinaryFiles, { offsetX, offsetY, exportWithDarkMode, exportingFrameId, renderEmbeddables, }?: {
     offsetX?: number | undefined;
     offsetY?: number | undefined;
     exportWithDarkMode?: boolean | undefined;
     exportingFrameId?: string | null | undefined;
+    renderEmbeddables?: boolean | undefined;
 }) => void;

package/types/scene/export.d.ts

@@ -20,5 +20,6 @@ export declare const exportToSvg: (elements: readonly NonDeletedExcalidrawElemen
     renderFrame?: boolean;
 }, files: BinaryFiles | null, opts?: {
     serializeAsJSON?: () => string;
+    renderEmbeddables?: boolean;
 }) => Promise<SVGSVGElement>;
 export declare const getExportSize: (elements: readonly NonDeletedExcalidrawElement[], exportPadding: number, scale: number) => [number, number];

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, FileId, ExcalidrawImageElement, Theme, StrokeRoundness, ExcalidrawFrameElement } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, 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";
@@ -57,7 +57,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";
+    type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
     customType: null;
 } | {
     type: "custom";
@@ -74,6 +74,10 @@ export type AppState = {
     showWelcomeScreen: boolean;
     isLoading: boolean;
     errorMessage: React.ReactNode;
+    activeEmbeddable: {
+        element: NonDeletedExcalidrawElement;
+        state: "hover" | "active";
+    } | null;
     draggingElement: NonDeletedExcalidrawElement | null;
     resizingElement: NonDeletedExcalidrawElement | null;
     multiElement: NonDeleted<ExcalidrawLinearElement> | null;
@@ -100,7 +104,7 @@ export type AppState = {
         lastActiveTool: LastActiveTool;
         locked: boolean;
     } & ({
-        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame";
+        type: typeof SHAPES[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
         customType: null;
     } | {
         type: "custom";
@@ -277,6 +281,8 @@ export interface ExcalidrawProps {
     onPointerDown?: (activeTool: AppState["activeTool"], pointerDownState: PointerDownState) => void;
     onScrollChange?: (scrollX: number, scrollY: number) => void;
     children?: React.ReactNode;
+    validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined);
+    renderEmbeddable?: (element: NonDeleted<ExcalidrawEmbeddableElement>, appState: AppState) => JSX.Element | null;
 }
 export type SceneData = {
     elements?: ImportedDataState["elements"];

package/types/utility-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Mutable<T> = {
     -readonly [P in keyof T]: T[P];
 };
@@ -22,3 +21,4 @@ export type ForwardRef<T, P = any> = Parameters<CallableType<React.ForwardRefRen
 export type ExtractSetType<T extends Set<any>> = T extends Set<infer U> ? U : never;
 export type SameType<T, U> = T extends U ? (U extends T ? true : false) : false;
 export type Assert<T extends true> = T;
+export type NestedKeyOf<T, K = keyof T> = K extends keyof T & (string | number) ? `${K}` | (T[K] extends object ? `${K}.${NestedKeyOf<T[K]>}` : never) : never;

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";
+    type: (typeof SHAPES)[number]["value"] | "eraser" | "hand" | "frame" | "embeddable";
 } | {
     type: "custom";
     customType: string;
@@ -190,3 +190,4 @@ export declare const composeEventHandlers: <E>(originalEventHandler?: ((event: E
     checkForDefaultPrevented?: boolean | undefined;
 }) => (event: E) => void;
 export declare const isOnlyExportingSingleFrame: (elements: readonly NonDeletedExcalidrawElement[]) => boolean;
+export declare const assertNever: (value: never, message: string, softAssert?: boolean) => never;