@excalidraw/excalidraw 0.17.1-7441-e31f307 → 0.17.1-7441-4c9a6f4

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { EVENT } from "../../constants";
+import { KEYS } from "../../keys";
+export const TTDDialogInput = ({ input, placeholder, onChange, onKeyboardSubmit, }) => {
+    const ref = useRef(null);
+    const callbackRef = useRef(onKeyboardSubmit);
+    callbackRef.current = onKeyboardSubmit;
+    useEffect(() => {
+        if (!callbackRef.current) {
+            return;
+        }
+        const textarea = ref.current;
+        if (textarea) {
+            const handleKeyDown = (event) => {
+                if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.ENTER) {
+                    event.preventDefault();
+                    callbackRef.current?.();
+                }
+            };
+            textarea.addEventListener(EVENT.KEYDOWN, handleKeyDown);
+            return () => {
+                textarea.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
+            };
+        }
+    }, []);
+    return (_jsx("textarea", { className: "ttd-dialog-input", onChange: onChange, value: input, placeholder: placeholder, autoFocus: true, ref: ref }));
+};

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogOutput.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Spinner from "../Spinner";
+const ErrorComp = ({ error }) => {
+    return (_jsxs("div", { "data-testid": "ttd-dialog-output-error", className: "ttd-dialog-output-error", children: ["Error! ", _jsx("p", { children: error })] }));
+};
+export const TTDDialogOutput = ({ error, canvasRef, loaded, }) => {
+    return (_jsxs("div", { className: "ttd-dialog-output-wrapper", children: [error && _jsx(ErrorComp, { error: error.message }), loaded ? (_jsx("div", { ref: canvasRef, style: { opacity: error ? "0.15" : 1 }, className: "ttd-dialog-output-canvas-container" })) : (_jsx(Spinner, { size: "2rem" }))] }));
+};

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogPanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../Button";
+import clsx from "clsx";
+import Spinner from "../Spinner";
+export const TTDDialogPanel = ({ label, children, panelAction, panelActionDisabled = false, onTextSubmitInProgess, renderTopRight, renderSubmitShortcut, renderBottomRight, }) => {
+    return (_jsxs("div", { className: "ttd-dialog-panel", children: [_jsxs("div", { className: "ttd-dialog-panel__header", children: [_jsx("label", { children: label }), renderTopRight?.()] }), children, _jsxs("div", { className: clsx("ttd-dialog-panel-button-container", {
+                    invisible: !panelAction,
+                }), style: { display: "flex", alignItems: "center" }, children: [_jsxs(Button, { className: "ttd-dialog-panel-button", onSelect: panelAction ? panelAction.action : () => { }, disabled: panelActionDisabled || onTextSubmitInProgess, children: [_jsxs("div", { className: clsx({ invisible: onTextSubmitInProgess }), children: [panelAction?.label, panelAction?.icon && _jsx("span", { children: panelAction.icon })] }), onTextSubmitInProgess && _jsx(Spinner, {})] }), !panelActionDisabled &&
+                        !onTextSubmitInProgess &&
+                        renderSubmitShortcut?.(), renderBottomRight?.()] })] }));
+};

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogPanels.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TTDDialogPanels = ({ children }) => {
+    return _jsx("div", { className: "ttd-dialog-panels", children: children });
+};

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getShortcutKey } from "../../utils";
+export const TTDDialogSubmitShortcut = () => {
+    return (_jsxs("div", { className: "ttd-dialog-submit-shortcut", children: [_jsx("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("CtrlOrCmd") }), _jsx("div", { className: "ttd-dialog-submit-shortcut__key", children: getShortcutKey("Enter") })] }));
+};

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogTab.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const TTDDialogTab = ({ tab, children, ...rest }) => {
+    return (_jsx(RadixTabs.Content, { ...rest, value: tab, children: children }));
+};
+TTDDialogTab.displayName = "TTDDialogTab";

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogTabTrigger.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const TTDDialogTabTrigger = ({ children, tab, onSelect, ...rest }) => {
+    return (_jsx(RadixTabs.Trigger, { value: tab, asChild: true, onSelect: onSelect, children: _jsx("button", { type: "button", className: "ttd-dialog-tab-trigger", ...rest, children: children }) }));
+};
+TTDDialogTabTrigger.displayName = "TTDDialogTabTrigger";

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogTabTriggers.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+export const TTDDialogTabTriggers = ({ children, ...rest }) => {
+    return (_jsx(RadixTabs.List, { className: "ttd-dialog-triggers", ...rest, children: children }));
+};
+TTDDialogTabTriggers.displayName = "TTDDialogTabTriggers";

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogTabs.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadixTabs from "@radix-ui/react-tabs";
+import { useRef } from "react";
+import { useExcalidrawSetAppState } from "../App";
+import { isMemberOf } from "../../utils";
+const TTDDialogTabs = (props) => {
+    const setAppState = useExcalidrawSetAppState();
+    const rootRef = useRef(null);
+    const minHeightRef = useRef(0);
+    return (_jsx(RadixTabs.Root, { ref: rootRef, className: "ttd-dialog-tabs-root", value: props.tab, onValueChange: (
+        // at least in test enviros, `tab` can be `undefined`
+        tab) => {
+            if (!tab) {
+                return;
+            }
+            const modalContentNode = rootRef.current?.closest(".Modal__content");
+            if (modalContentNode) {
+                const currHeight = modalContentNode.offsetHeight || 0;
+                if (currHeight > minHeightRef.current) {
+                    minHeightRef.current = currHeight;
+                    modalContentNode.style.minHeight = `min(${minHeightRef.current}px, 100%)`;
+                }
+            }
+            if (props.dialog === "settings" &&
+                isMemberOf(["text-to-diagram", "diagram-to-code"], tab)) {
+                setAppState({
+                    openDialog: { name: props.dialog, tab, source: "settings" },
+                });
+            }
+            else if (props.dialog === "ttd" &&
+                isMemberOf(["text-to-diagram", "mermaid"], tab)) {
+                setAppState({
+                    openDialog: { name: props.dialog, tab },
+                });
+            }
+        }, children: props.children }));
+};
+TTDDialogTabs.displayName = "TTDDialogTabs";
+export default TTDDialogTabs;

package/dist/packages/excalidraw/components/TTDDialog/TTDDialogTrigger.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTunnels } from "../../context/tunnels";
+import DropdownMenu from "../dropdownMenu/DropdownMenu";
+import { useExcalidrawSetAppState } from "../App";
+import { brainIcon } from "../icons";
+import { t } from "../../i18n";
+import { trackEvent } from "../../analytics";
+export const TTDDialogTrigger = ({ children, icon, }) => {
+    const { TTDDialogTriggerTunnel } = useTunnels();
+    const setAppState = useExcalidrawSetAppState();
+    return (_jsx(TTDDialogTriggerTunnel.In, { children: _jsxs(DropdownMenu.Item, { onSelect: () => {
+                trackEvent("ai", "dialog open", "ttd");
+                setAppState({ openDialog: { name: "ttd", tab: "text-to-diagram" } });
+            }, icon: icon ?? brainIcon, children: [children ?? t("labels.textToDiagram"), _jsx(DropdownMenu.Item.Badge, { children: "AI" })] }) }));
+};
+TTDDialogTrigger.displayName = "TTDDialogTrigger";

package/dist/packages/excalidraw/components/TTDDialog/common.js

@@ -0,0 +1,88 @@
+import { DEFAULT_EXPORT_PADDING, DEFAULT_FONT_SIZE, EDITOR_LS_KEYS, } from "../../constants";
+import { convertToExcalidrawElements, exportToCanvas } from "../../index";
+import { canvasToBlob } from "../../data/blob";
+import { EditorLocalStorage } from "../../data/EditorLocalStorage";
+const resetPreview = ({ canvasRef, setError, }) => {
+    const canvasNode = canvasRef.current;
+    if (!canvasNode) {
+        return;
+    }
+    const parent = canvasNode.parentElement;
+    if (!parent) {
+        return;
+    }
+    parent.style.background = "";
+    setError(null);
+    canvasNode.replaceChildren();
+};
+export const convertMermaidToExcalidraw = async ({ canvasRef, mermaidToExcalidrawLib, mermaidDefinition, setError, data, }) => {
+    const canvasNode = canvasRef.current;
+    const parent = canvasNode?.parentElement;
+    if (!canvasNode || !parent) {
+        return;
+    }
+    if (!mermaidDefinition) {
+        resetPreview({ canvasRef, setError });
+        return;
+    }
+    try {
+        const api = await mermaidToExcalidrawLib.api;
+        let ret;
+        try {
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
+                fontSize: DEFAULT_FONT_SIZE,
+            });
+        }
+        catch (err) {
+            ret = await api.parseMermaidToExcalidraw(mermaidDefinition.replace(/"/g, "'"), {
+                fontSize: DEFAULT_FONT_SIZE,
+            });
+        }
+        const { elements, files } = ret;
+        setError(null);
+        data.current = {
+            elements: convertToExcalidrawElements(elements, {
+                regenerateIds: true,
+            }),
+            files,
+        };
+        const canvas = await exportToCanvas({
+            elements: data.current.elements,
+            files: data.current.files,
+            exportPadding: DEFAULT_EXPORT_PADDING,
+            maxWidthOrHeight: Math.max(parent.offsetWidth, parent.offsetHeight) *
+                window.devicePixelRatio,
+        });
+        // if converting to blob fails, there's some problem that will
+        // likely prevent preview and export (e.g. canvas too big)
+        await canvasToBlob(canvas);
+        parent.style.background = "var(--default-bg-color)";
+        canvasNode.replaceChildren(canvas);
+    }
+    catch (err) {
+        parent.style.background = "var(--default-bg-color)";
+        if (mermaidDefinition) {
+            setError(err);
+        }
+        throw err;
+    }
+};
+export const saveMermaidDataToStorage = (mermaidDefinition) => {
+    EditorLocalStorage.set(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW, mermaidDefinition);
+};
+export const insertToEditor = ({ app, data, text, shouldSaveMermaidDataToStorage, }) => {
+    const { elements: newElements, files } = data.current;
+    if (!newElements.length) {
+        return;
+    }
+    app.addElementsFromPasteOrLibrary({
+        elements: newElements,
+        files,
+        position: "center",
+        fitToContent: true,
+    });
+    app.setOpenDialog(null);
+    if (shouldSaveMermaidDataToStorage && text) {
+        saveMermaidDataToStorage(text);
+    }
+};

package/dist/packages/excalidraw/components/TextField.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useLayoutEffect, useState, } from "react";
+import clsx from "clsx";
+import "./TextField.scss";
+import { Button } from "./Button";
+import { eyeIcon, eyeClosedIcon } from "./icons";
+export const TextField = forwardRef(({ value, onChange, label, fullWidth, placeholder, readonly, selectOnRender, onKeyDown, isRedacted = false, }, ref) => {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current);
+    useLayoutEffect(() => {
+        if (selectOnRender) {
+            innerRef.current?.select();
+        }
+    }, [selectOnRender]);
+    const [isTemporarilyUnredacted, setIsTemporarilyUnredacted] = useState(false);
+    return (_jsxs("div", { className: clsx("ExcTextField", {
+            "ExcTextField--fullWidth": fullWidth,
+        }), onClick: () => {
+            innerRef.current?.focus();
+        }, children: [_jsx("div", { className: "ExcTextField__label", children: label }), _jsxs("div", { className: clsx("ExcTextField__input", {
+                    "ExcTextField__input--readonly": readonly,
+                }), children: [_jsx("input", { className: clsx({
+                            "is-redacted": value && isRedacted && !isTemporarilyUnredacted,
+                        }), readOnly: readonly, value: value, placeholder: placeholder, ref: innerRef, onChange: (event) => onChange?.(event.target.value), onKeyDown: onKeyDown }), isRedacted && (_jsx(Button, { onSelect: () => setIsTemporarilyUnredacted(!isTemporarilyUnredacted), style: { border: 0, userSelect: "none" }, children: isTemporarilyUnredacted ? eyeClosedIcon : eyeIcon }))] })] }));
+});

package/dist/packages/excalidraw/components/TextField.scss

@@ -0,0 +1,109 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  --ExcTextField--color: var(--color-on-surface);
+  --ExcTextField--label-color: var(--color-on-surface);
+  --ExcTextField--background: transparent;
+  --ExcTextField--readonly--background: var(--color-surface-high);
+  --ExcTextField--readonly--color: var(--color-on-surface);
+  --ExcTextField--border: var(--color-border-outline);
+  --ExcTextField--readonly--border: var(--color-border-outline-variant);
+  --ExcTextField--border-hover: var(--color-brand-hover);
+  --ExcTextField--border-active: var(--color-brand-active);
+  --ExcTextField--placeholder: var(--color-border-outline-variant);
+
+  .ExcTextField {
+    &--fullWidth {
+      width: 100%;
+      flex-grow: 1;
+    }
+
+    &__label {
+      font-family: "Assistant";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 0.875rem;
+      line-height: 150%;
+
+      color: var(--ExcTextField--label-color);
+
+      margin-bottom: 0.25rem;
+      user-select: none;
+    }
+
+    &__input {
+      box-sizing: border-box;
+
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      padding: 0 1rem;
+
+      height: 3rem;
+
+      background: var(--ExcTextField--background);
+      border: 1px solid var(--ExcTextField--border);
+      border-radius: 0.5rem;
+
+      &:not(&--readonly) {
+        &:hover {
+          border-color: var(--ExcTextField--border-hover);
+        }
+
+        &:active,
+        &:focus-within {
+          border-color: var(--ExcTextField--border-active);
+        }
+      }
+
+      & input {
+        display: flex;
+        align-items: center;
+
+        border: none;
+        outline: none;
+        padding: 0;
+        margin: 0;
+
+        height: 1.5rem;
+
+        color: var(--ExcTextField--color);
+
+        font-family: "Assistant";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 150%;
+        text-overflow: ellipsis;
+
+        background: transparent;
+
+        width: 100%;
+
+        &::placeholder {
+          color: var(--ExcTextField--placeholder);
+        }
+
+        &:not(:focus) {
+          &:hover {
+            background-color: initial;
+          }
+        }
+
+        &:focus {
+          outline: initial;
+          box-shadow: initial;
+        }
+      }
+
+      &--readonly {
+        background: var(--ExcTextField--readonly--background);
+        border-color: var(--ExcTextField--readonly--border);
+
+        & input {
+          color: var(--ExcTextField--readonly--color);
+        }
+      }
+    }
+  }
+}

package/dist/packages/excalidraw/components/TextInput.scss

@@ -0,0 +1,7 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .TextInput {
+    display: inline-block;
+  }
+}

package/dist/packages/excalidraw/components/Toast.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { CloseIcon } from "./icons";
+import "./Toast.scss";
+import { ToolButton } from "./ToolButton";
+const DEFAULT_TOAST_TIMEOUT = 5000;
+export const Toast = ({ message, onClose, closable = false, 
+// To prevent autoclose, pass duration as Infinity
+duration = DEFAULT_TOAST_TIMEOUT, }) => {
+    const timerRef = useRef(0);
+    const shouldAutoClose = duration !== Infinity;
+    const scheduleTimeout = useCallback(() => {
+        if (!shouldAutoClose) {
+            return;
+        }
+        timerRef.current = window.setTimeout(() => onClose(), duration);
+    }, [onClose, duration, shouldAutoClose]);
+    useEffect(() => {
+        if (!shouldAutoClose) {
+            return;
+        }
+        scheduleTimeout();
+        return () => clearTimeout(timerRef.current);
+    }, [scheduleTimeout, message, duration, shouldAutoClose]);
+    const onMouseEnter = shouldAutoClose
+        ? () => clearTimeout(timerRef?.current)
+        : undefined;
+    const onMouseLeave = shouldAutoClose ? scheduleTimeout : undefined;
+    return (_jsxs("div", { className: "Toast", onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [_jsx("p", { className: "Toast__message", children: message }), closable && (_jsx(ToolButton, { icon: CloseIcon, "aria-label": "close", type: "icon", onClick: onClose, className: "close" }))] }));
+};

package/dist/packages/excalidraw/components/Toast.scss

@@ -0,0 +1,49 @@
+@import "../css/variables.module.scss";
+
+.excalidraw {
+  .Toast {
+    $closeButtonSize: 1.2rem;
+    $closeButtonPadding: 0.4rem;
+
+    animation: fade-in 0.5s;
+    background-color: var(--button-gray-1);
+    border-radius: 4px;
+    bottom: 10px;
+    box-sizing: border-box;
+    cursor: default;
+    left: 50%;
+    margin-left: -150px;
+    padding: 4px 0;
+    position: absolute;
+    text-align: center;
+    width: 300px;
+    z-index: 999999;
+
+    .Toast__message {
+      padding: 0 $closeButtonSize + ($closeButtonPadding);
+      color: var(--popup-text-color);
+      white-space: pre-wrap;
+    }
+
+    .close {
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: $closeButtonPadding;
+
+      .ToolIcon__icon {
+        width: $closeButtonSize;
+        height: $closeButtonSize;
+      }
+    }
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}

package/dist/packages/excalidraw/components/ToolButton.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./ToolIcon.scss";
+import React, { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import { useExcalidrawContainer } from "./App";
+import { AbortError } from "../errors";
+import Spinner from "./Spinner";
+export const ToolButton = React.forwardRef((props, ref) => {
+    const { id: excalId } = useExcalidrawContainer();
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const sizeCn = `ToolIcon_size_${props.size}`;
+    const [isLoading, setIsLoading] = useState(false);
+    const isMountedRef = useRef(true);
+    const onClick = async (event) => {
+        const ret = "onClick" in props && props.onClick?.(event);
+        if (ret && "then" in ret) {
+            try {
+                setIsLoading(true);
+                await ret;
+            }
+            catch (error) {
+                if (!(error instanceof AbortError)) {
+                    throw error;
+                }
+                else {
+                    console.warn(error);
+                }
+            }
+            finally {
+                if (isMountedRef.current) {
+                    setIsLoading(false);
+                }
+            }
+        }
+    };
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const lastPointerTypeRef = useRef(null);
+    if (props.type === "button" ||
+        props.type === "icon" ||
+        props.type === "submit") {
+        const type = (props.type === "icon" ? "button" : props.type);
+        return (_jsxs("button", { className: clsx("ToolIcon_type_button", sizeCn, props.className, props.visible && !props.hidden
+                ? "ToolIcon_type_button--show"
+                : "ToolIcon_type_button--hide", {
+                ToolIcon: !props.hidden,
+                "ToolIcon--selected": props.selected,
+                "ToolIcon--plain": props.type === "icon",
+            }), style: props.style, "data-testid": props["data-testid"], hidden: props.hidden, title: props.title, "aria-label": props["aria-label"], type: type, onClick: onClick, ref: innerRef, disabled: isLoading || props.isLoading, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", children: [props.icon || props.label, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel })), props.isLoading && _jsx(Spinner, {})] })), props.showAriaLabel && (_jsxs("div", { className: "ToolIcon__label", children: [props["aria-label"], " ", isLoading && _jsx(Spinner, {})] })), props.children] }));
+    }
+    return (_jsxs("label", { className: clsx("ToolIcon", props.className), title: props.title, onPointerDown: (event) => {
+            lastPointerTypeRef.current = event.pointerType || null;
+            props.onPointerDown?.({ pointerType: event.pointerType || null });
+        }, onPointerUp: () => {
+            requestAnimationFrame(() => {
+                lastPointerTypeRef.current = null;
+            });
+        }, children: [_jsx("input", { className: `ToolIcon_type_radio ${sizeCn}`, type: "radio", name: props.name, "aria-label": props["aria-label"], "aria-keyshortcuts": props["aria-keyshortcuts"], "data-testid": props["data-testid"], id: `${excalId}-${props.id}`, onChange: () => {
+                    props.onChange?.({ pointerType: lastPointerTypeRef.current });
+                }, checked: props.checked, ref: innerRef }), _jsxs("div", { className: "ToolIcon__icon", children: [props.icon, props.keyBindingLabel && (_jsx("span", { className: "ToolIcon__keybinding", children: props.keyBindingLabel }))] })] }));
+});
+ToolButton.defaultProps = {
+    visible: true,
+    className: "",
+    size: "medium",
+};
+ToolButton.displayName = "ToolButton";