@excalidraw/excalidraw 0.15.2-3ddcc48 → 0.15.2-5302490

package/types/components/App.d.ts

@@ -8,6 +8,7 @@ import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName } from "../types";
 import { FileSystemHandle } from "../data/filesystem";
+import { Renderer } from "../scene/Renderer";
 export declare const ExcalidrawContainerContext: React.Context<{
     container: HTMLDivElement | null;
     id: string | null;
@@ -31,7 +32,8 @@ export declare const useExcalidrawSetAppState: () => <K extends keyof AppState>(
 export declare const useExcalidrawActionManager: () => ActionManager;
 declare class App extends React.Component<AppProps, AppState> {
     canvas: AppClassProperties["canvas"];
-    rc: RoughCanvas | null;
+    interactiveCanvas: AppClassProperties["interactiveCanvas"];
+    rc: RoughCanvas;
     unmounted: boolean;
     actionManager: ActionManager;
     device: Device;
@@ -39,6 +41,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private excalidrawContainerRef;
     static defaultProps: Partial<AppProps>;
     scene: Scene;
+    renderer: Renderer;
     private fonts;
     private resizeObserver;
     private nearestScrollableContainer;
@@ -49,6 +52,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private excalidrawContainerValue;
     files: BinaryFiles;
     imageCache: AppClassProperties["imageCache"];
+    private iFrameRefs;
     hitLinkElement?: NonDeletedExcalidrawElement;
     lastPointerDown: React.PointerEvent<HTMLElement> | null;
     lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null;
@@ -57,7 +61,13 @@ declare class App extends React.Component<AppProps, AppState> {
         y: number;
     };
     constructor(props: AppProps);
-    private renderCanvas;
+    private onWindowMessage;
+    private updateEmbeddableRef;
+    private getHTMLIFrameElement;
+    private handleEmbeddableCenterClick;
+    private isEmbeddableCenter;
+    private updateEmbeddables;
+    private renderEmbeddables;
     private getFrameNameDOMId;
     frameNameBoundsCache: FrameNameBoundsCache;
     private renderFrameNames;
@@ -86,22 +96,27 @@ declare class App extends React.Component<AppProps, AppState> {
     private removeEventListeners;
     private addEventListeners;
     componentDidUpdate(prevProps: AppProps, prevState: AppState): void;
-    private renderScene;
+    private renderInteractiveSceneCallback;
     private onScroll;
     private onCut;
     private onCopy;
     private cutAll;
     private copyAll;
     private static resetTapTwice;
-    private onTapStart;
-    private onTapEnd;
+    private onTouchStart;
+    private onTouchEnd;
     pasteFromClipboard: (event: ClipboardEvent | null) => Promise<void>;
     private addElementsFromPasteOrLibrary;
     private addTextFromPaste;
     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;
     /**
@@ -199,8 +214,10 @@ declare class App extends React.Component<AppProps, AppState> {
     private isHittingCommonBoundingBoxOfSelectedElements;
     private handleTextOnPointerDown;
     private handleFreeDrawElementOnPointerDown;
+    private insertEmbeddableElement;
     private createImageElement;
     private handleLinearElementOnPointerDown;
+    private getCurrentItemRoundness;
     private createGenericElementOnPointerDown;
     private createFrameElementOnPointerDown;
     private onKeyDownFromPointerDownHandler;
@@ -231,7 +248,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private maybeSuggestBindingsForLinearElementAtCoords;
     private maybeSuggestBindingForAll;
     private clearSelection;
-    private handleCanvasRef;
+    private handleInteractiveCanvasRef;
     private handleAppOnDrop;
     loadFileToCanvas: (file: File, fileHandle: FileSystemHandle | null) => Promise<void>;
     private handleCanvasContextMenu;

package/types/components/Button.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./Button.scss";
 interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     type?: "button" | "submit" | "reset";

package/types/components/Card.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import OpenColor from "open-color";
 import "./Card.scss";
 export declare const Card: React.FC<{

package/types/components/ColorPicker/keyboardNavHandlers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColorPaletteCustom } from "../../colors";
 import { ActiveColorPickerSectionAtomType } from "./colorPickerUtils";
 interface ColorPickerKeyNavHandlerProps {

package/types/components/DefaultSidebar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MarkOptional } from "../utility-types";
 import { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 export declare const DefaultSidebar: import("react").FC<Omit<MarkOptional<Omit<{

package/types/components/ExcalidrawLogo.d.ts

@@ -0,0 +1,15 @@
+import "./ExcalidrawLogo.scss";
+type LogoSize = "xs" | "small" | "normal" | "large" | "custom";
+interface LogoProps {
+    size?: LogoSize;
+    withText?: boolean;
+    style?: React.CSSProperties;
+    /**
+     * If true, the logo will not be wrapped in a Link component.
+     * The link prop will be ignored as well.
+     * It will merely be a plain div.
+     */
+    isNotLink?: boolean;
+}
+export declare const ExcalidrawLogo: ({ style, size, withText, }: LogoProps) => JSX.Element;
+export {};

package/types/components/EyeDropper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./EyeDropper.scss";
 type EyeDropperProperties = {
     keepOpenOnAlt: boolean;

package/types/components/HintViewer.d.ts

@@ -1,11 +1,10 @@
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { Device, UIAppState } from "../types";
+import { AppClassProperties, Device, UIAppState } from "../types";
 import "./HintViewer.scss";
 interface HintViewerProps {
     appState: UIAppState;
-    elements: readonly NonDeletedExcalidrawElement[];
     isMobile: boolean;
     device: Device;
+    app: AppClassProperties;
 }
-export declare const HintViewer: ({ appState, elements, isMobile, device, }: HintViewerProps) => JSX.Element | null;
+export declare const HintViewer: ({ appState, isMobile, device, app, }: HintViewerProps) => JSX.Element | null;
 export {};

package/types/components/JSONExportDialog.d.ts

@@ -10,6 +10,6 @@ export declare const JSONExportDialog: ({ elements, appState, files, actionManag
     files: BinaryFiles;
     actionManager: ActionManager;
     exportOpts: ExportOpts;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
     setAppState: React.Component<any, UIAppState>["setState"];
 }) => JSX.Element;

package/types/components/LayerUI.d.ts

@@ -9,7 +9,8 @@ interface LayerUIProps {
     actionManager: ActionManager;
     appState: UIAppState;
     files: BinaryFiles;
-    canvas: HTMLCanvasElement | null;
+    canvas: HTMLCanvasElement;
+    interactiveCanvas: HTMLCanvasElement | null;
     setAppState: React.Component<any, AppState>["setState"];
     elements: readonly NonDeletedExcalidrawElement[];
     onLockToggle: () => void;
@@ -26,6 +27,7 @@ interface LayerUIProps {
     onExportImage: AppClassProperties["onExportImage"];
     renderWelcomeScreen: boolean;
     children?: React.ReactNode;
+    app: AppClassProperties;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, interactiveCanvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onImageAction, onExportImage, renderWelcomeScreen, children, app, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/LibraryMenuHeaderContent.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LibraryItem, UIAppState } from "../types";
 import Library from "../data/library";
 export declare const LibraryDropdownMenuButton: React.FC<{

package/types/components/LibraryUnit.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { LibraryItem } from "../types";
 import "./LibraryUnit.scss";
 import { SvgCache } from "../hooks/useLibraryItemSvg";

package/types/components/LoadingMessage.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Theme } from "../element/types";
 export declare const LoadingMessage: React.FC<{
     delay?: number;

package/types/components/MobileMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps, UIAppState } from "../types";
+import { AppClassProperties, AppState, Device, ExcalidrawProps, UIAppState } from "../types";
 import { ActionManager } from "../actions/manager";
 import { NonDeletedExcalidrawElement } from "../element/types";
 type MobileMenuProps = {
@@ -12,7 +12,7 @@ type MobileMenuProps = {
     onLockToggle: () => void;
     onHandToolToggle: () => void;
     onPenModeToggle: () => void;
-    canvas: HTMLCanvasElement | null;
+    interactiveCanvas: HTMLCanvasElement | null;
     onImageAction: (data: {
         insertOnCanvasDirectly: boolean;
     }) => void;
@@ -21,6 +21,7 @@ type MobileMenuProps = {
     renderSidebars: () => JSX.Element | null;
     device: Device;
     renderWelcomeScreen: boolean;
+    app: AppClassProperties;
 };
-export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, canvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, }: MobileMenuProps) => JSX.Element;
+export declare const MobileMenu: ({ appState, elements, actionManager, setAppState, onLockToggle, onHandToolToggle, onPenModeToggle, interactiveCanvas, onImageAction, renderTopRightUI, renderCustomStats, renderSidebars, device, renderWelcomeScreen, app, }: MobileMenuProps) => JSX.Element;
 export {};

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/canvases/InteractiveCanvas.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+import type { DOMAttributes } from "react";
+import type { InteractiveCanvasAppState } from "../../types";
+import type { RenderInteractiveSceneCallback } from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+type InteractiveCanvasProps = {
+    containerRef: React.RefObject<HTMLDivElement>;
+    canvas: HTMLCanvasElement | null;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    selectedElements: readonly NonDeletedExcalidrawElement[];
+    versionNonce: number | undefined;
+    selectionNonce: number | undefined;
+    scale: number;
+    appState: InteractiveCanvasAppState;
+    renderInteractiveSceneCallback: (data: RenderInteractiveSceneCallback) => void;
+    handleCanvasRef: (canvas: HTMLCanvasElement | null) => void;
+    onContextMenu: Exclude<DOMAttributes<HTMLCanvasElement | HTMLDivElement>["onContextMenu"], undefined>;
+    onPointerMove: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerMove"], undefined>;
+    onPointerUp: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerUp"], undefined>;
+    onPointerCancel: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerCancel"], undefined>;
+    onTouchMove: Exclude<DOMAttributes<HTMLCanvasElement>["onTouchMove"], undefined>;
+    onPointerDown: Exclude<DOMAttributes<HTMLCanvasElement>["onPointerDown"], undefined>;
+    onDoubleClick: Exclude<DOMAttributes<HTMLCanvasElement>["onDoubleClick"], undefined>;
+};
+declare const _default: React.MemoExoticComponent<(props: InteractiveCanvasProps) => JSX.Element>;
+export default _default;

package/types/components/canvases/StaticCanvas.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { RoughCanvas } from "roughjs/bin/canvas";
+import type { StaticCanvasAppState } from "../../types";
+import type { StaticCanvasRenderConfig } from "../../scene/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
+type StaticCanvasProps = {
+    canvas: HTMLCanvasElement;
+    rc: RoughCanvas;
+    elements: readonly NonDeletedExcalidrawElement[];
+    visibleElements: readonly NonDeletedExcalidrawElement[];
+    versionNonce: number | undefined;
+    selectionNonce: number | undefined;
+    scale: number;
+    appState: StaticCanvasAppState;
+    renderConfig: StaticCanvasRenderConfig;
+};
+declare const _default: React.MemoExoticComponent<(props: StaticCanvasProps) => JSX.Element>;
+export default _default;

package/types/components/canvases/index.d.ts

@@ -0,0 +1,3 @@
+import InteractiveCanvas from "./InteractiveCanvas";
+import StaticCanvas from "./StaticCanvas";
+export { InteractiveCanvas, StaticCanvas };

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;
@@ -89,6 +98,7 @@ export declare const FRAME_STYLE: {
     radius: number;
 };
 export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
+export declare const MIN_FONT_SIZE = 1;
 export declare const DEFAULT_FONT_SIZE = 20;
 export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
 export declare const DEFAULT_TEXT_ALIGN = "left";
@@ -133,6 +143,7 @@ export declare const EXPORT_DATA_TYPES: {
     readonly excalidraw: "excalidraw";
     readonly excalidrawClipboard: "excalidraw/clipboard";
     readonly excalidrawLibrary: "excalidrawlib";
+    readonly excalidrawClipboardWithAPI: "excalidraw-api/clipboard";
 };
 export declare const EXPORT_SOURCE: string;
 export declare const IMAGE_RENDER_TIMEOUT = 500;
@@ -172,6 +183,8 @@ export declare const VERSIONS: {
     readonly excalidrawLibrary: 2;
 };
 export declare const BOUND_TEXT_PADDING = 5;
+export declare const ARROW_LABEL_WIDTH_FRACTION = 0.7;
+export declare const ARROW_LABEL_FONT_SIZE_TO_MIN_WIDTH_RATIO = 11;
 export declare const VERTICAL_ALIGN: {
     TOP: string;
     MIDDLE: string;
@@ -208,3 +221,4 @@ export declare const DEFAULT_SIDEBAR: {
     readonly name: "default";
     readonly defaultTab: "library";
 };
+export declare const LIBRARY_DISABLED_TYPES: Set<"embeddable" | "image">;

package/types/data/transform.d.ts

@@ -0,0 +1,71 @@
+import { ElementConstructorOpts } from "../element/newElement";
+import { ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawEmbeddableElement, ExcalidrawFrameElement, ExcalidrawFreeDrawElement, ExcalidrawGenericElement, ExcalidrawImageElement, ExcalidrawLinearElement, ExcalidrawSelectionElement, ExcalidrawTextElement, FileId, FontFamilyValues, TextAlign, VerticalAlign } from "../element/types";
+import { MarkOptional } from "../utility-types";
+export type ValidLinearElement = {
+    type: "arrow" | "line";
+    x: number;
+    y: number;
+    label?: {
+        text: string;
+        fontSize?: number;
+        fontFamily?: FontFamilyValues;
+        textAlign?: TextAlign;
+        verticalAlign?: VerticalAlign;
+    } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+    end?: (({
+        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        id?: ExcalidrawGenericElement["id"];
+    } | {
+        id: ExcalidrawGenericElement["id"];
+        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+    }) | (({
+        type: "text";
+        text: string;
+    } | {
+        type?: "text";
+        id: ExcalidrawTextElement["id"];
+        text: string;
+    }) & Partial<ExcalidrawTextElement>)) & MarkOptional<ElementConstructorOpts, "x" | "y">;
+    start?: (({
+        type: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+        id?: ExcalidrawGenericElement["id"];
+    } | {
+        id: ExcalidrawGenericElement["id"];
+        type?: Exclude<ExcalidrawBindableElement["type"], "image" | "text" | "frame" | "embeddable">;
+    }) | (({
+        type: "text";
+        text: string;
+    } | {
+        type?: "text";
+        id: ExcalidrawTextElement["id"];
+        text: string;
+    }) & Partial<ExcalidrawTextElement>)) & MarkOptional<ElementConstructorOpts, "x" | "y">;
+} & Partial<ExcalidrawLinearElement>;
+export type ValidContainer = {
+    type: Exclude<ExcalidrawGenericElement["type"], "selection">;
+    id?: ExcalidrawGenericElement["id"];
+    label?: {
+        text: string;
+        fontSize?: number;
+        fontFamily?: FontFamilyValues;
+        textAlign?: TextAlign;
+        verticalAlign?: VerticalAlign;
+    } & MarkOptional<ElementConstructorOpts, "x" | "y">;
+} & ElementConstructorOpts;
+export type ExcalidrawElementSkeleton = Extract<Exclude<ExcalidrawElement, ExcalidrawSelectionElement>, ExcalidrawEmbeddableElement | ExcalidrawFreeDrawElement | ExcalidrawFrameElement> | ({
+    type: Extract<ExcalidrawLinearElement["type"], "line">;
+    x: number;
+    y: number;
+} & Partial<ExcalidrawLinearElement>) | ValidContainer | ValidLinearElement | ({
+    type: "text";
+    text: string;
+    x: number;
+    y: number;
+    id?: ExcalidrawTextElement["id"];
+} & Partial<ExcalidrawTextElement>) | ({
+    type: Extract<ExcalidrawImageElement["type"], "image">;
+    x: number;
+    y: number;
+    fileId: FileId;
+} & Partial<ExcalidrawImageElement>);
+export declare const convertToExcalidrawElements: (elements: ExcalidrawElementSkeleton[] | null) => ExcalidrawElement[];

package/types/data/url.d.ts

@@ -1,2 +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,13 +1,17 @@
-/// <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 actionLink: {
     name: "hyperlink";
@@ -24,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;
@@ -32,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;
@@ -41,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";
@@ -85,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;
@@ -99,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: {
@@ -131,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 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 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: Pick<UIAppState, "zoom">) => [x: number, y: number, width: number, height: number];
+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/binding.d.ts

@@ -15,6 +15,7 @@ export declare const maybeBindLinearElement: (linearElement: NonDeleted<Excalidr
     x: number;
     y: number;
 }) => void;
+export declare const bindLinearElement: (linearElement: NonDeleted<ExcalidrawLinearElement>, hoveredElement: ExcalidrawBindableElement, startOrEnd: "start" | "end") => void;
 export declare const isLinearElementSimpleAndAlreadyBound: (linearElement: NonDeleted<ExcalidrawLinearElement>, alreadyBoundToId: ExcalidrawBindableElement["id"] | undefined, bindableElement: ExcalidrawBindableElement) => boolean;
 export declare const unbindLinearElements: (elements: NonDeleted<ExcalidrawElement>[]) => void;
 export declare const getHoveredElementForBinding: (pointerCoords: {