@excalidraw/excalidraw 0.17.0-a528769 → 0.17.0-dd220bc

package/types/components/App.d.ts

@@ -4,7 +4,7 @@ import { ActionManager } from "../actions/manager";
 import { EXPORT_IMAGE_TYPES } from "../constants";
 import { ExportedElements } from "../data";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameElement } from "../element/types";
+import { ExcalidrawElement, NonDeleted, NonDeletedExcalidrawElement, ExcalidrawFrameLikeElement, ExcalidrawIframeElement } from "../element/types";
 import History from "../history";
 import Scene from "../scene/Scene";
 import { AppClassProperties, AppProps, AppState, ExcalidrawImperativeAPI, BinaryFiles, LibraryItems, SceneData, Device, FrameNameBoundsCache, SidebarName, SidebarTabName, ToolType } from "../types";
@@ -45,7 +45,6 @@ declare class App extends React.Component<AppProps, AppState> {
     actionManager: ActionManager;
     device: Device;
     private excalidrawContainerRef;
-    static defaultProps: Partial<AppProps>;
     scene: Scene;
     renderer: Renderer;
     private fonts;
@@ -210,10 +209,10 @@ declare class App extends React.Component<AppProps, AppState> {
     }>, event: PointerEvent]>;
     constructor(props: AppProps);
     private onWindowMessage;
-    private updateEmbeddableRef;
+    private cacheEmbeddableRef;
     private getHTMLIFrameElement;
     private handleEmbeddableCenterClick;
-    private isEmbeddableCenter;
+    private isIframeLikeElementCenter;
     private updateEmbeddables;
     private renderEmbeddables;
     private getFrameNameDOMId;
@@ -225,8 +224,18 @@ declare class App extends React.Component<AppProps, AppState> {
     getSceneElements: () => readonly NonDeletedExcalidrawElement[];
     onInsertElements: (elements: readonly ExcalidrawElement[]) => void;
     onExportImage: (type: keyof typeof EXPORT_IMAGE_TYPES, elements: ExportedElements, opts: {
-        exportingFrame: ExcalidrawFrameElement | null;
+        exportingFrame: ExcalidrawFrameLikeElement | null;
     }) => Promise<void>;
+    private magicGenerations;
+    private updateMagicGeneration;
+    private getTextFromElements;
+    private onMagicFrameGenerate;
+    private onIframeSrcCopy;
+    private OPENAI_KEY;
+    private OPENAI_KEY_IS_PERSISTED;
+    private onOpenAIKeyChange;
+    private onMagicSettingsConfirm;
+    onMagicframeToolSelect: () => void;
     private openEyeDropper;
     private syncActionResult;
     private onBlur;
@@ -246,6 +255,8 @@ declare class App extends React.Component<AppProps, AppState> {
     componentWillUnmount(): void;
     private onResize;
     private removeEventListeners;
+    /** generally invoked only if fullscreen was invoked programmatically */
+    private onFullscreenChange;
     private addEventListeners;
     componentDidUpdate(prevProps: AppProps, prevState: AppState): void;
     private renderInteractiveSceneCallback;
@@ -386,7 +397,17 @@ declare class App extends React.Component<AppProps, AppState> {
     private isHittingCommonBoundingBoxOfSelectedElements;
     private handleTextOnPointerDown;
     private handleFreeDrawElementOnPointerDown;
-    private insertEmbeddableElement;
+    insertIframeElement: ({ sceneX, sceneY, width, height, }: {
+        sceneX: number;
+        sceneY: number;
+        width: number;
+        height: number;
+    }) => NonDeleted<ExcalidrawIframeElement>;
+    insertEmbeddableElement: ({ sceneX, sceneY, link, }: {
+        sceneX: number;
+        sceneY: number;
+        link: string;
+    }) => NonDeleted<import("../element/types").ExcalidrawEmbeddableElement> | undefined;
     private createImageElement;
     private handleLinearElementOnPointerDown;
     private getCurrentItemRoundness;

package/types/components/Button.d.ts

@@ -1,5 +1,5 @@
 import "./Button.scss";
-interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     type?: "button" | "submit" | "reset";
     onSelect: () => any;
     /** whether button is in active state */

package/types/components/InlineIcon.d.ts

@@ -0,0 +1,3 @@
+export declare const InlineIcon: ({ icon }: {
+    icon: JSX.Element;
+}) => JSX.Element;

package/types/components/LayerUI.d.ts

@@ -25,6 +25,10 @@ interface LayerUIProps {
     children?: React.ReactNode;
     app: AppClassProperties;
     isCollaborating: boolean;
+    openAIKey: string | null;
+    isOpenAIKeyPersisted: boolean;
+    onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
+    onMagicSettingsConfirm: (apiKey: string, shouldPersist: boolean, source: "tool" | "generation" | "settings") => void;
 }
-declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, }: LayerUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ actionManager, appState, files, setAppState, elements, canvas, onLockToggle, onHandToolToggle, onPenModeToggle, showExitZenModeBtn, renderTopRightUI, renderCustomStats, UIOptions, onExportImage, renderWelcomeScreen, children, app, isCollaborating, openAIKey, isOpenAIKeyPersisted, onOpenAIAPIKeyChange, onMagicSettingsConfirm, }: LayerUIProps) => JSX.Element>;
 export default _default;

package/types/components/MagicButton.d.ts

@@ -0,0 +1,9 @@
+import "./ToolIcon.scss";
+export declare const ElementCanvasButton: (props: {
+    title?: string;
+    icon: JSX.Element;
+    name?: string;
+    checked: boolean;
+    onChange?(): void;
+    isMobile?: boolean;
+}) => JSX.Element;

package/types/components/MagicSettings.d.ts

@@ -0,0 +1,8 @@
+import "./MagicSettings.scss";
+export declare const MagicSettings: (props: {
+    openAIKey: string | null;
+    isPersisted: boolean;
+    onChange: (key: string, shouldPersist: boolean) => void;
+    onConfirm: (key: string, shouldPersist: boolean) => void;
+    onClose: () => void;
+}) => JSX.Element | null;

package/types/components/Paragraph.d.ts

@@ -0,0 +1,4 @@
+export declare const Paragraph: (props: {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}) => JSX.Element;

package/types/components/TTDDialog/MermaidToExcalidraw.d.ts

@@ -0,0 +1,6 @@
+import "./MermaidToExcalidraw.scss";
+import { MermaidToExcalidrawLibProps } from "./common";
+declare const MermaidToExcalidraw: ({ mermaidToExcalidrawLib, }: {
+    mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
+}) => JSX.Element;
+export default MermaidToExcalidraw;

package/types/components/TTDDialog/TTDDialog.d.ts

@@ -0,0 +1,29 @@
+import "./TTDDialog.scss";
+type OnTestSubmitRetValue = {
+    rateLimit?: number | null;
+    rateLimitRemaining?: number | null;
+} & ({
+    generatedResponse: string | undefined;
+    error?: null | undefined;
+} | {
+    error: Error;
+    generatedResponse?: null | undefined;
+});
+export declare const TTDDialog: (props: {
+    onTextSubmit(value: string): Promise<OnTestSubmitRetValue>;
+} | {
+    __fallback: true;
+}) => JSX.Element | null;
+/**
+ * Text to diagram (TTD) dialog
+ */
+export declare const TTDDialogBase: import("react").FC<({
+    tab: "text-to-diagram" | "mermaid";
+} & ({
+    onTextSubmit(value: string): Promise<OnTestSubmitRetValue>;
+} | {
+    __fallback: true;
+})) & {
+    __fallback?: boolean | undefined;
+}>;
+export {};

package/types/components/TTDDialog/TTDDialogInput.d.ts

@@ -0,0 +1,9 @@
+import { ChangeEventHandler } from "react";
+interface TTDDialogInputProps {
+    input: string;
+    placeholder: string;
+    onChange: ChangeEventHandler<HTMLTextAreaElement>;
+    onKeyboardSubmit?: () => void;
+}
+export declare const TTDDialogInput: ({ input, placeholder, onChange, onKeyboardSubmit, }: TTDDialogInputProps) => JSX.Element;
+export {};

package/types/components/TTDDialog/TTDDialogOutput.d.ts

@@ -0,0 +1,7 @@
+interface TTDDialogOutputProps {
+    error: Error | null;
+    canvasRef: React.RefObject<HTMLDivElement>;
+    loaded: boolean;
+}
+export declare const TTDDialogOutput: ({ error, canvasRef, loaded, }: TTDDialogOutputProps) => JSX.Element;
+export {};

package/types/components/TTDDialog/TTDDialogPanel.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+interface TTDDialogPanelProps {
+    label: string;
+    children: ReactNode;
+    panelAction?: {
+        label: string;
+        action: () => void;
+        icon?: ReactNode;
+    };
+    panelActionDisabled?: boolean;
+    onTextSubmitInProgess?: boolean;
+    renderTopRight?: () => ReactNode;
+    renderBottomRight?: () => ReactNode;
+}
+export declare const TTDDialogPanel: ({ label, children, panelAction, panelActionDisabled, onTextSubmitInProgess, renderTopRight, renderBottomRight, }: TTDDialogPanelProps) => JSX.Element;
+export {};

package/types/components/TTDDialog/TTDDialogPanels.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+export declare const TTDDialogPanels: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;

package/types/components/TTDDialog/TTDDialogTab.d.ts

@@ -0,0 +1,7 @@
+export declare const TTDDialogTab: {
+    ({ tab, children, ...rest }: {
+        tab: string;
+        children: React.ReactNode;
+    } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+    displayName: string;
+};

package/types/components/TTDDialog/TTDDialogTabTrigger.d.ts

@@ -0,0 +1,8 @@
+export declare const TTDDialogTabTrigger: {
+    ({ children, tab, onSelect, ...rest }: {
+        children: React.ReactNode;
+        tab: string;
+        onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
+    } & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
+    displayName: string;
+};

package/types/components/TTDDialog/TTDDialogTabTriggers.d.ts

@@ -0,0 +1,6 @@
+export declare const TTDDialogTabTriggers: {
+    ({ children, ...rest }: {
+        children: React.ReactNode;
+    } & import("react").HTMLAttributes<HTMLDivElement>): JSX.Element;
+    displayName: string;
+};

package/types/components/TTDDialog/TTDDialogTabs.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+declare const TTDDialogTabs: {
+    (props: {
+        children: ReactNode;
+    } & ({
+        dialog: "ttd";
+        tab: "text-to-diagram" | "mermaid";
+    } | {
+        dialog: "settings";
+        tab: "text-to-diagram" | "diagram-to-code";
+    })): JSX.Element;
+    displayName: string;
+};
+export default TTDDialogTabs;

package/types/components/TTDDialog/TTDDialogTrigger.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+export declare const TTDDialogTrigger: {
+    ({ children, icon, }: {
+        children?: ReactNode;
+        icon?: JSX.Element | undefined;
+    }): JSX.Element;
+    displayName: string;
+};

package/types/components/TTDDialog/common.d.ts

@@ -0,0 +1,33 @@
+import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
+import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
+import { NonDeletedExcalidrawElement } from "../../element/types";
+import { AppClassProperties, BinaryFiles } from "../../types";
+export interface MermaidToExcalidrawLibProps {
+    loaded: boolean;
+    api: Promise<{
+        parseMermaidToExcalidraw: (definition: string, options: MermaidOptions) => Promise<MermaidToExcalidrawResult>;
+    }>;
+}
+interface ConvertMermaidToExcalidrawFormatProps {
+    canvasRef: React.RefObject<HTMLDivElement>;
+    mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
+    mermaidDefinition: string;
+    setError: (error: Error | null) => void;
+    data: React.MutableRefObject<{
+        elements: readonly NonDeletedExcalidrawElement[];
+        files: BinaryFiles | null;
+    }>;
+}
+export declare const convertMermaidToExcalidraw: ({ canvasRef, mermaidToExcalidrawLib, mermaidDefinition, setError, data, }: ConvertMermaidToExcalidrawFormatProps) => Promise<void>;
+export declare const LOCAL_STORAGE_KEY_MERMAID_TO_EXCALIDRAW = "mermaid-to-excalidraw";
+export declare const saveMermaidDataToStorage: (data: string) => void;
+export declare const insertToEditor: ({ app, data, text, shouldSaveMermaidDataToStorage, }: {
+    app: AppClassProperties;
+    data: React.MutableRefObject<{
+        elements: readonly NonDeletedExcalidrawElement[];
+        files: BinaryFiles | null;
+    }>;
+    text?: string | undefined;
+    shouldSaveMermaidDataToStorage?: boolean | undefined;
+}) => void;
+export {};

package/types/components/TextField.d.ts

@@ -0,0 +1,16 @@
+import { KeyboardEvent } from "react";
+import "./TextField.scss";
+type TextFieldProps = {
+    value?: string;
+    onChange?: (value: string) => void;
+    onClick?: () => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    readonly?: boolean;
+    fullWidth?: boolean;
+    selectOnRender?: boolean;
+    label?: string;
+    placeholder?: string;
+    isRedacted?: boolean;
+};
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -34,6 +34,12 @@ declare const DropdownMenu: {
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
+        Badge: {
+            ({ children, }: {
+                children: React.ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
     };
     ItemLink: {
         ({ icon, shortcut, href, children, onSelect, className, selected, ...rest }: {

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

@@ -9,5 +9,17 @@ declare const DropdownMenuItem: {
         className?: string | undefined;
     } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
     displayName: string;
+    Badge: {
+        ({ children, }: {
+            children: React.ReactNode;
+        }): JSX.Element;
+        displayName: string;
+    };
+};
+export declare const DropDownMenuItemBadge: {
+    ({ children, }: {
+        children: React.ReactNode;
+    }): JSX.Element;
+    displayName: string;
 };
 export default DropdownMenuItem;

package/types/components/icons.d.ts

@@ -153,4 +153,10 @@ export declare const frameToolIcon: JSX.Element;
 export declare const mermaidLogoIcon: JSX.Element;
 export declare const ArrowRightIcon: JSX.Element;
 export declare const laserPointerToolIcon: JSX.Element;
+export declare const MagicIcon: JSX.Element;
+export declare const OpenAIIcon: JSX.Element;
+export declare const fullscreenIcon: JSX.Element;
+export declare const eyeIcon: JSX.Element;
+export declare const eyeClosedIcon: JSX.Element;
+export declare const brainIcon: JSX.Element;
 export {};

package/types/components/main-menu/MainMenu.d.ts

@@ -28,6 +28,12 @@ declare const MainMenu: React.FC<{
             className?: string | undefined;
         } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect">): JSX.Element;
         displayName: string;
+        Badge: {
+            ({ children, }: {
+                children: React.ReactNode;
+            }): JSX.Element;
+            displayName: string;
+        };
     };
     ItemLink: {
         ({ icon, shortcut, href, children, onSelect, className, selected, ...rest }: {

package/types/constants.d.ts

@@ -63,7 +63,8 @@ export declare enum EVENT {
     SCROLL = "scroll",
     EXCALIDRAW_LINK = "excalidraw-link",
     MENU_ITEM_SELECT = "menu.itemSelect",
-    MESSAGE = "message"
+    MESSAGE = "message",
+    FULLSCREENCHANGE = "fullscreenchange"
 }
 export declare const YOUTUBE_STATES: {
     readonly UNSTARTED: -1;
@@ -242,4 +243,25 @@ export declare const DEFAULT_SIDEBAR: {
     readonly name: "default";
     readonly defaultTab: "library";
 };
-export declare const LIBRARY_DISABLED_TYPES: Set<"embeddable" | "image">;
+export declare const LIBRARY_DISABLED_TYPES: Set<"image" | "embeddable" | "iframe">;
+export declare const TOOL_TYPE: {
+    readonly selection: "selection";
+    readonly rectangle: "rectangle";
+    readonly diamond: "diamond";
+    readonly ellipse: "ellipse";
+    readonly arrow: "arrow";
+    readonly line: "line";
+    readonly freedraw: "freedraw";
+    readonly text: "text";
+    readonly image: "image";
+    readonly eraser: "eraser";
+    readonly hand: "hand";
+    readonly frame: "frame";
+    readonly magicframe: "magicframe";
+    readonly embeddable: "embeddable";
+    readonly laser: "laser";
+};
+export declare const EDITOR_LS_KEYS: {
+    readonly OAI_API_KEY: "excalidraw-oai-api-key";
+    readonly PUBLISH_LIBRARY: "publish-library-data";
+};

package/types/context/tunnels.d.ts

@@ -11,6 +11,7 @@ type TunnelsContextValue = {
     DefaultSidebarTriggerTunnel: Tunnel;
     DefaultSidebarTabTriggersTunnel: Tunnel;
     OverwriteConfirmDialogTunnel: Tunnel;
+    TTDDialogTriggerTunnel: Tunnel;
     jotaiScope: symbol;
 };
 export declare const TunnelsContext: React.Context<TunnelsContextValue>;

package/types/data/EditorLocalStorage.d.ts

@@ -0,0 +1,8 @@
+import { EDITOR_LS_KEYS } from "../constants";
+import { JSONValue } from "../types";
+export declare class EditorLocalStorage {
+    static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): boolean;
+    static get<T extends JSONValue>(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]): T | null;
+    static set: (key: (typeof EDITOR_LS_KEYS)[keyof typeof EDITOR_LS_KEYS], value: JSONValue) => boolean;
+    static delete: (name: (typeof EDITOR_LS_KEYS)[keyof typeof EDITOR_LS_KEYS]) => void;
+}