@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/components/Stats/utils.js

@@ -1,11 +1,9 @@
 import { pointFrom, pointRotateRads } from "../../../math";
 import { bindOrUnbindLinearElements, updateBoundElements, } from "../../element/binding";
 import { mutateElement } from "../../element/mutateElement";
-import { measureFontSizeFromWidth, rescalePointsInElement, } from "../../element/resizeElements";
-import { getApproxMinLineHeight, getApproxMinLineWidth, getBoundTextElement, getBoundTextMaxWidth, handleBindTextResize, } from "../../element/textElement";
+import { getBoundTextElement } from "../../element/textElement";
 import { isFrameLikeElement, isLinearElement, isTextElement, } from "../../element/typeChecks";
 import { getSelectedGroupIds, getElementsInGroup, isInGroup, } from "../../groups";
-import { getFontString } from "../../utils";
 export const SMALLEST_DELTA = 0.01;
 export const isPropertyEditable = (element, property) => {
     if (property === "height" && isTextElement(element)) {
@@ -55,57 +53,6 @@ export const newOrigin = (x1, y1, w1, h1, w2, h2, angle) => {
             ((h2 - h1) / 2) * Math.cos(angle),
     };
 };
-export const resizeElement = (nextWidth, nextHeight, keepAspectRatio, origElement, elementsMap, elements, scene, shouldInformMutation = true) => {
-    const latestElement = elementsMap.get(origElement.id);
-    if (!latestElement) {
-        return;
-    }
-    let boundTextFont = {};
-    const boundTextElement = getBoundTextElement(latestElement, elementsMap);
-    if (boundTextElement) {
-        const minWidth = getApproxMinLineWidth(getFontString(boundTextElement), boundTextElement.lineHeight);
-        const minHeight = getApproxMinLineHeight(boundTextElement.fontSize, boundTextElement.lineHeight);
-        nextWidth = Math.max(nextWidth, minWidth);
-        nextHeight = Math.max(nextHeight, minHeight);
-    }
-    mutateElement(latestElement, {
-        ...newOrigin(latestElement.x, latestElement.y, latestElement.width, latestElement.height, nextWidth, nextHeight, latestElement.angle),
-        width: nextWidth,
-        height: nextHeight,
-        ...rescalePointsInElement(origElement, nextWidth, nextHeight, true),
-    }, shouldInformMutation);
-    updateBindings(latestElement, elementsMap, elements, scene, {
-        newSize: {
-            width: nextWidth,
-            height: nextHeight,
-        },
-    });
-    if (boundTextElement) {
-        boundTextFont = {
-            fontSize: boundTextElement.fontSize,
-        };
-        if (keepAspectRatio) {
-            const updatedElement = {
-                ...latestElement,
-                width: nextWidth,
-                height: nextHeight,
-            };
-            const nextFont = measureFontSizeFromWidth(boundTextElement, elementsMap, getBoundTextMaxWidth(updatedElement, boundTextElement));
-            boundTextFont = {
-                fontSize: nextFont?.size ?? boundTextElement.fontSize,
-            };
-        }
-    }
-    updateBoundElements(latestElement, elementsMap, {
-        newSize: { width: nextWidth, height: nextHeight },
-    });
-    if (boundTextElement && boundTextFont) {
-        mutateElement(boundTextElement, {
-            fontSize: boundTextFont.fontSize,
-        });
-    }
-    handleBindTextResize(latestElement, elementsMap, "e", keepAspectRatio);
-};
 export const moveElement = (newTopLeftX, newTopLeftY, originalElement, elementsMap, elements, scene, originalElementsMap, shouldInformMutation = true) => {
     const latestElement = elementsMap.get(originalElement.id);
     if (!latestElement) {
@@ -153,7 +100,7 @@ export const getAtomicUnits = (targetElements, appState) => {
 };
 export const updateBindings = (latestElement, elementsMap, elements, scene, options) => {
     if (isLinearElement(latestElement)) {
-        bindOrUnbindLinearElements([latestElement], elementsMap, elements, scene, true, []);
+        bindOrUnbindLinearElements([latestElement], elementsMap, elements, scene, true, [], options?.zoom);
     }
     else {
         updateBoundElements(latestElement, elementsMap, options);

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

@@ -17,7 +17,7 @@ import { TTDDialogPanels } from "./TTDDialogPanels";
 import { convertMermaidToExcalidraw, insertToEditor, saveMermaidDataToStorage, } from "./common";
 import { ArrowRightIcon } from "../icons";
 import "./TTDDialog.scss";
-import { atom, useAtom } from "jotai";
+import { atom, useAtom } from "../../editor-jotai";
 import { trackEvent } from "../../analytics";
 import { InlineIcon } from "../InlineIcon";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";

package/dist/excalidraw/components/ToolButton.js

@@ -6,11 +6,11 @@ import { useExcalidrawContainer } from "./App";
 import { AbortError } from "../errors";
 import Spinner from "./Spinner";
 import { isPromiseLike } from "../utils";
-export const ToolButton = React.forwardRef((props, ref) => {
+export const ToolButton = React.forwardRef(({ size = "medium", visible = true, className = "", ...props }, ref) => {
     const { id: excalId } = useExcalidrawContainer();
     const innerRef = React.useRef(null);
     React.useImperativeHandle(ref, () => innerRef.current);
-    const sizeCn = `ToolIcon_size_${props.size}`;
+    const sizeCn = `ToolIcon_size_${size}`;
     const [isLoading, setIsLoading] = useState(false);
     const isMountedRef = useRef(true);
     const onClick = async (event) => {
@@ -46,7 +46,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
         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
+        return (_jsxs("button", { className: clsx("ToolIcon_type_button", sizeCn, className, visible && !props.hidden
                 ? "ToolIcon_type_button--show"
                 : "ToolIcon_type_button--hide", {
                 ToolIcon: !props.hidden,
@@ -54,7 +54,7 @@ export const ToolButton = React.forwardRef((props, ref) => {
                 "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 || !!props.disabled, children: [(props.icon || props.label) && (_jsxs("div", { className: "ToolIcon__icon", "aria-hidden": "true", "aria-disabled": !!props.disabled, 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) => {
+    return (_jsxs("label", { className: clsx("ToolIcon", className), title: props.title, onPointerDown: (event) => {
             lastPointerTypeRef.current = event.pointerType || null;
             props.onPointerDown?.({ pointerType: event.pointerType || null });
         }, onPointerUp: () => {
@@ -65,9 +65,4 @@ export const ToolButton = React.forwardRef((props, ref) => {
                     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";

package/dist/excalidraw/components/hoc/withInternalFallback.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { atom, useAtom } from "jotai";
 import { useLayoutEffect, useRef } from "react";
 import { useTunnels } from "../../context/tunnels";
+import { atom } from "../../editor-jotai";
 export const withInternalFallback = (componentName, Component) => {
     const renderAtom = atom(0);
     const WrapperComponent = (props) => {
-        const { jotaiScope } = useTunnels();
+        const { tunnelsJotai: { useAtom }, } = useTunnels();
         // for rerenders
-        const [, setCounter] = useAtom(renderAtom, jotaiScope);
+        const [, setCounter] = useAtom(renderAtom);
         // for initial & subsequent renders. Tracked as component state
         // due to excalidraw multi-instance scanerios.
         const metaRef = useRef({

package/dist/excalidraw/components/hyperlink/Hyperlink.js

@@ -118,12 +118,14 @@ export const Hyperlink = ({ element, elementsMap, setAppState, onLinkOpen, setTo
         };
     }, [handleSubmit]);
     useEffect(() => {
-        let timeoutId = null;
-        if (inputRef &&
-            inputRef.current &&
+        if (isEditing &&
+            inputRef?.current &&
             !(device.viewport.isMobile || device.isTouchScreen)) {
             inputRef.current.select();
         }
+    }, [isEditing, device.viewport.isMobile, device.isTouchScreen]);
+    useEffect(() => {
+        let timeoutId = null;
         const handlePointerMove = (event) => {
             if (isEditing) {
                 return;
@@ -145,15 +147,7 @@ export const Hyperlink = ({ element, elementsMap, setAppState, onLinkOpen, setTo
                 clearTimeout(timeoutId);
             }
         };
-    }, [
-        appState,
-        element,
-        isEditing,
-        setAppState,
-        elementsMap,
-        device.viewport.isMobile,
-        device.isTouchScreen,
-    ]);
+    }, [appState, element, isEditing, setAppState, elementsMap]);
     const handleRemove = useCallback(() => {
         trackEvent("hyperlink", "delete");
         mutateElement(element, { link: null });

package/dist/excalidraw/components/icons.d.ts

@@ -135,6 +135,15 @@ export declare const ArrowheadDiamondIcon: React.MemoExoticComponent<({ flip }:
 export declare const ArrowheadDiamondOutlineIcon: React.MemoExoticComponent<({ flip }: {
     flip?: boolean | undefined;
 }) => JSX.Element>;
+export declare const ArrowheadCrowfootIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadCrowfootOneIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
+export declare const ArrowheadCrowfootOneOrManyIcon: React.MemoExoticComponent<({ flip }: {
+    flip?: boolean | undefined;
+}) => JSX.Element>;
 export declare const FontSizeSmallIcon: JSX.Element;
 export declare const FontSizeMediumIcon: JSX.Element;
 export declare const FontSizeLargeIcon: JSX.Element;

package/dist/excalidraw/components/icons.js

@@ -184,10 +184,7 @@ export const SloppinessCartoonistIcon = createIcon(_jsx("path", { d: "M2.5 11.93
 export const EdgeSharpIcon = createIcon(_jsxs("svg", { strokeWidth: "1.5", children: [_jsx("path", { d: "M3.33334 9.99998V6.66665C3.33334 6.04326 3.33403 4.9332 3.33539 3.33646C4.95233 3.33436 6.06276 3.33331 6.66668 3.33331H10" }), _jsx("path", { d: "M13.3333 3.33331V3.34331" }), _jsx("path", { d: "M16.6667 3.33331V3.34331" }), _jsx("path", { d: "M16.6667 6.66669V6.67669" }), _jsx("path", { d: "M16.6667 10V10.01" }), _jsx("path", { d: "M3.33334 13.3333V13.3433" }), _jsx("path", { d: "M16.6667 13.3333V13.3433" }), _jsx("path", { d: "M3.33334 16.6667V16.6767" }), _jsx("path", { d: "M6.66666 16.6667V16.6767" }), _jsx("path", { d: "M10 16.6667V16.6767" }), _jsx("path", { d: "M13.3333 16.6667V16.6767" }), _jsx("path", { d: "M16.6667 16.6667V16.6767" })] }), modifiedTablerIconProps);
 // tabler-icons: border-radius
 export const EdgeRoundIcon = createIcon(_jsxs("g", { strokeWidth: "1.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { stroke: "none", d: "M0 0h24v24H0z", fill: "none" }), _jsx("path", { d: "M4 12v-4a4 4 0 0 1 4 -4h4" }), _jsx("line", { x1: "16", y1: "4", x2: "16", y2: "4.01" }), _jsx("line", { x1: "20", y1: "4", x2: "20", y2: "4.01" }), _jsx("line", { x1: "20", y1: "8", x2: "20", y2: "8.01" }), _jsx("line", { x1: "20", y1: "12", x2: "20", y2: "12.01" }), _jsx("line", { x1: "4", y1: "16", x2: "4", y2: "16.01" }), _jsx("line", { x1: "20", y1: "16", x2: "20", y2: "16.01" }), _jsx("line", { x1: "4", y1: "20", x2: "4", y2: "20.01" }), _jsx("line", { x1: "8", y1: "20", x2: "8", y2: "20.01" }), _jsx("line", { x1: "12", y1: "20", x2: "12", y2: "20.01" }), _jsx("line", { x1: "16", y1: "20", x2: "16", y2: "20.01" }), _jsx("line", { x1: "20", y1: "20", x2: "20", y2: "20.01" })] }), tablerIconProps);
-export const ArrowheadNoneIcon = createIcon(_jsx("path", { d: "M6 10H34", stroke: "currentColor", strokeWidth: 2, fill: "none" }), {
-    width: 40,
-    height: 20,
-});
+export const ArrowheadNoneIcon = createIcon(_jsxs("g", { stroke: "currentColor", opacity: 0.3, strokeWidth: 2, children: [_jsx("path", { d: "M12 12l9 0" }), _jsx("path", { d: "M3 9l6 6" }), _jsx("path", { d: "M3 15l6 -6" })] }), tablerIconProps);
 export const ArrowheadArrowIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { transform: flip ? "translate(40, 0) scale(-1, 1)" : "", stroke: "currentColor", strokeWidth: 2, fill: "none", children: [_jsx("path", { d: "M34 10H6M34 10L27 5M34 10L27 15" }), _jsx("path", { d: "M27.5 5L34.5 10L27.5 15" })] }), { width: 40, height: 20 }));
 export const ArrowheadCircleIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "currentColor", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", children: [_jsx("path", { d: "M32 10L6 10", strokeWidth: 2 }), _jsx("circle", { r: "4", transform: "matrix(-1 0 0 1 30 10)" })] }), { width: 40, height: 20 }));
 export const ArrowheadCircleOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeWidth: 2, children: [_jsx("path", { d: "M26 10L6 10" }), _jsx("circle", { r: "4", transform: "matrix(-1 0 0 1 30 10)" })] }), { width: 40, height: 20 }));
@@ -196,6 +193,9 @@ export const ArrowheadTriangleIcon = React.memo(({ flip = false }) => createIcon
 export const ArrowheadTriangleOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeWidth: 2, strokeLinejoin: "round", children: [_jsx("path", { d: "M6,9.5H27" }), _jsx("path", { d: "M27,5L34,10L27,14Z", fill: "none" })] }), { width: 40, height: 20 }));
 export const ArrowheadDiamondIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "currentColor", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { d: "M6,9.5H20" }), _jsx("path", { d: "M27,5L34,10L27,14L20,9.5Z" })] }), { width: 40, height: 20 }));
 export const ArrowheadDiamondOutlineIcon = React.memo(({ flip = false }) => createIcon(_jsxs("g", { stroke: "currentColor", fill: "none", transform: flip ? "translate(40, 0) scale(-1, 1)" : "", strokeLinejoin: "round", strokeWidth: 2, children: [_jsx("path", { d: "M6,9.5H20" }), _jsx("path", { d: "M27,5L34,10L27,14L20,9.5Z" })] }), { width: 40, height: 20 }));
+export const ArrowheadCrowfootIcon = React.memo(({ flip = false }) => createIcon(_jsx("g", { stroke: "currentColor", fill: "none", transform: flip ? "" : "translate(40, 0) scale(-1, 1)", strokeLinejoin: "round", strokeWidth: 2, children: _jsx("path", { d: "M34,10 H6 M15,10 L7,5 M15,10 L7,15" }) }), { width: 40, height: 20 }));
+export const ArrowheadCrowfootOneIcon = React.memo(({ flip = false }) => createIcon(_jsx("g", { stroke: "currentColor", fill: "none", transform: flip ? "" : "translate(40, 0) scale(-1, 1)", strokeLinejoin: "round", strokeWidth: 2, children: _jsx("path", { d: "M34,10 H6 M15,10 L15,15 L15,5" }) }), { width: 40, height: 20 }));
+export const ArrowheadCrowfootOneOrManyIcon = React.memo(({ flip = false }) => createIcon(_jsx("g", { stroke: "currentColor", fill: "none", transform: flip ? "" : "translate(40, 0) scale(-1, 1)", strokeLinejoin: "round", strokeWidth: 2, children: _jsx("path", { d: "M34,10 H6 M15,10 L15,16 L15,4 M15,10 L7,5 M15,10 L7,15" }) }), { width: 40, height: 20 }));
 export const FontSizeSmallIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M14.167 6.667a3.333 3.333 0 0 0-3.334-3.334H9.167a3.333 3.333 0 0 0 0 6.667h1.666a3.333 3.333 0 0 1 0 6.667H9.167a3.333 3.333 0 0 1-3.334-3.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const FontSizeMediumIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5 16.667V3.333L10 15l5-11.667v13.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);
 export const FontSizeLargeIcon = createIcon(_jsxs(_Fragment, { children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { d: "M5.833 3.333v13.334h8.334", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h20v20H0z" }) }) })] }), modifiedTablerIconProps);

package/dist/excalidraw/components/main-menu/DefaultItems.js

@@ -8,9 +8,8 @@ import DropdownMenuItem from "../dropdownMenu/DropdownMenuItem";
 import DropdownMenuItemLink from "../dropdownMenu/DropdownMenuItemLink";
 import { actionClearCanvas, actionLoadScene, actionSaveToActiveFile, actionShortcuts, actionToggleSearchMenu, actionToggleTheme, } from "../../actions";
 import clsx from "clsx";
-import { useSetAtom } from "jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
-import { jotaiScope } from "../../jotai";
+import { useSetAtom } from "../../editor-jotai";
 import { useUIAppState } from "../../context/ui-appState";
 import { openConfirmModal } from "../OverwriteConfirm/OverwriteConfirmState";
 import Trans from "../Trans";
@@ -79,7 +78,7 @@ export const Help = () => {
 Help.displayName = "Help";
 export const ClearCanvas = () => {
     const { t } = useI18n();
-    const setActiveConfirmDialog = useSetAtom(activeConfirmDialogAtom, jotaiScope);
+    const setActiveConfirmDialog = useSetAtom(activeConfirmDialogAtom);
     const actionManager = useExcalidrawActionManager();
     if (!actionManager.isActionEnabled(actionClearCanvas)) {
         return null;

package/dist/excalidraw/constants.d.ts

@@ -161,7 +161,6 @@ export declare const IMAGE_MIME_TYPES: {
     readonly avif: "image/avif";
     readonly jfif: "image/jfif";
 };
-export declare const ALLOWED_PASTE_MIME_TYPES: readonly ["text/plain", "text/html"];
 export declare const MIME_TYPES: {
     readonly svg: "image/svg+xml";
     readonly png: "image/png";
@@ -172,6 +171,8 @@ export declare const MIME_TYPES: {
     readonly ico: "image/x-icon";
     readonly avif: "image/avif";
     readonly jfif: "image/jfif";
+    readonly text: "text/plain";
+    readonly html: "text/html";
     readonly json: "application/json";
     readonly excalidraw: "application/vnd.excalidraw+json";
     readonly excalidrawlib: "application/vnd.excalidrawlib+json";
@@ -179,6 +180,7 @@ export declare const MIME_TYPES: {
     readonly "excalidraw.png": "image/png";
     readonly binary: "application/octet-stream";
 };
+export declare const ALLOWED_PASTE_MIME_TYPES: readonly ["text/plain", "text/html", ...("image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "image/webp" | "image/bmp" | "image/x-icon" | "image/avif" | "image/jfif")[]];
 export declare const EXPORT_IMAGE_TYPES: {
     readonly png: "png";
     readonly svg: "svg";
@@ -312,3 +314,5 @@ export declare const ARROW_TYPE: {
 };
 export declare const DEFAULT_REDUCED_GLOBAL_ALPHA = 0.3;
 export declare const ELEMENT_LINK_KEY = "element";
+/** used in tests */
+export declare const ORIG_ID: unique symbol;

package/dist/excalidraw/constants.js

@@ -183,8 +183,9 @@ export const IMAGE_MIME_TYPES = {
     avif: "image/avif",
     jfif: "image/jfif",
 };
-export const ALLOWED_PASTE_MIME_TYPES = ["text/plain", "text/html"];
 export const MIME_TYPES = {
+    text: "text/plain",
+    html: "text/html",
     json: "application/json",
     // excalidraw data
     excalidraw: "application/vnd.excalidraw+json",
@@ -197,6 +198,11 @@ export const MIME_TYPES = {
     // image
     ...IMAGE_MIME_TYPES,
 };
+export const ALLOWED_PASTE_MIME_TYPES = [
+    MIME_TYPES.text,
+    MIME_TYPES.html,
+    ...Object.values(IMAGE_MIME_TYPES),
+];
 export const EXPORT_IMAGE_TYPES = {
     png: "png",
     svg: "svg",
@@ -372,3 +378,5 @@ export const ARROW_TYPE = {
 };
 export const DEFAULT_REDUCED_GLOBAL_ALPHA = 0.3;
 export const ELEMENT_LINK_KEY = "element";
+/** used in tests */
+export const ORIG_ID = Symbol.for("__test__originalId__");

package/dist/excalidraw/context/tunnels.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import tunnel from "tunnel-rat";
+import { createIsolation } from "jotai-scope";
 export type Tunnel = ReturnType<typeof tunnel>;
 type TunnelsContextValue = {
     MainMenuTunnel: Tunnel;
@@ -12,7 +13,7 @@ type TunnelsContextValue = {
     DefaultSidebarTabTriggersTunnel: Tunnel;
     OverwriteConfirmDialogTunnel: Tunnel;
     TTDDialogTriggerTunnel: Tunnel;
-    jotaiScope: symbol;
+    tunnelsJotai: ReturnType<typeof createIsolation>;
 };
 export declare const TunnelsContext: React.Context<TunnelsContextValue>;
 export declare const useTunnels: () => TunnelsContextValue;

package/dist/excalidraw/context/tunnels.js

@@ -1,7 +1,9 @@
 import React from "react";
 import tunnel from "tunnel-rat";
+import { createIsolation } from "jotai-scope";
 export const TunnelsContext = React.createContext(null);
 export const useTunnels = () => React.useContext(TunnelsContext);
+const tunnelsJotai = createIsolation();
 export const useInitializeTunnels = () => {
     return React.useMemo(() => {
         return {
@@ -15,7 +17,7 @@ export const useInitializeTunnels = () => {
             DefaultSidebarTabTriggersTunnel: tunnel(),
             OverwriteConfirmDialogTunnel: tunnel(),
             TTDDialogTriggerTunnel: tunnel(),
-            jotaiScope: Symbol(),
+            tunnelsJotai,
         };
     }, []);
 };

package/dist/excalidraw/data/blob.d.ts

@@ -8,6 +8,7 @@ export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "png" | "svg";
 export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boolean;
+export declare const isSupportedImageFileType: (type: string | null | undefined) => boolean;
 export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
     type: ValueOf<typeof IMAGE_MIME_TYPES>;
 };

package/dist/excalidraw/data/blob.js

@@ -4,6 +4,7 @@ import { IMAGE_MIME_TYPES, MIME_TYPES } from "../constants";
 import { clearElementsForExport } from "../element";
 import { CanvasError, ImageSceneDataError } from "../errors";
 import { calculateScrollCenter } from "../scene";
+import { decodeSvgBase64Payload } from "../scene/export";
 import { bytesToHexString, isPromiseLike } from "../utils";
 import { base64ToString, stringToBase64, toByteString } from "./encode";
 import { nativeFileSystemSupported } from "./filesystem";
@@ -41,7 +42,7 @@ const parseFileContents = async (blob) => {
         }
         if (blob.type === MIME_TYPES.svg) {
             try {
-                return (await import("./image")).decodeSvgMetadata({
+                return decodeSvgBase64Payload({
                     svg: contents,
                 });
             }
@@ -95,9 +96,12 @@ export const isImageFileHandle = (handle) => {
     const type = getFileHandleType(handle);
     return type === "png" || type === "svg";
 };
+export const isSupportedImageFileType = (type) => {
+    return !!type && Object.values(IMAGE_MIME_TYPES).includes(type);
+};
 export const isSupportedImageFile = (blob) => {
     const { type } = blob || {};
-    return !!type && Object.values(IMAGE_MIME_TYPES).includes(type);
+    return isSupportedImageFileType(type);
 };
 export const loadSceneOrLibraryFromBlob = async (blob, 
 /** @see restore.localAppState */
@@ -258,7 +262,7 @@ export const resizeImageFile = async (file, opts) => {
     if (!isSupportedImageFile(file)) {
         throw new Error("Error: unsupported file type", { cause: "UNSUPPORTED" });
     }
-    return new File([await reduce.toBlob(file, { max: opts.maxWidthOrHeight })], file.name, {
+    return new File([await reduce.toBlob(file, { max: opts.maxWidthOrHeight, alpha: true })], file.name, {
         type: opts.outputType || file.type,
     });
 };

package/dist/excalidraw/data/filesystem.d.ts

@@ -12,9 +12,10 @@ export declare const fileSave: (blob: Blob | Promise<Blob>, opts: {
     name: string;
     /** file extension */
     extension: FILE_EXTENSION;
+    mimeTypes?: string[];
     description: string;
     /** existing FileSystemHandle */
     fileHandle?: FileSystemHandle | null;
 }) => Promise<FileSystemHandle | null>;
-export type { FileSystemHandle };
 export { nativeFileSystemSupported };
+export type { FileSystemHandle };

package/dist/excalidraw/data/filesystem.js

@@ -60,6 +60,7 @@ export const fileSave = (blob, opts) => {
         fileName: `${opts.name}.${opts.extension}`,
         description: opts.description,
         extensions: [`.${opts.extension}`],
+        mimeTypes: opts.mimeTypes,
     }, opts.fileHandle);
 };
 export { nativeFileSystemSupported };

package/dist/excalidraw/data/image.d.ts

@@ -7,9 +7,3 @@ export declare const encodePngMetadata: ({ blob, metadata, }: {
     metadata: string;
 }) => Promise<Blob>;
 export declare const decodePngMetadata: (blob: Blob) => Promise<string>;
-export declare const encodeSvgMetadata: ({ text }: {
-    text: string;
-}) => string;
-export declare const decodeSvgMetadata: ({ svg }: {
-    svg: string;
-}) => string;

package/dist/excalidraw/data/image.js

@@ -1,7 +1,7 @@
 import decodePng from "png-chunks-extract";
 import tEXt from "png-chunk-text";
 import encodePng from "png-chunks-encode";
-import { stringToBase64, encode, decode, base64ToString } from "./encode";
+import { encode, decode } from "./encode";
 import { EXPORT_DATA_TYPES, MIME_TYPES } from "../constants";
 import { blobToArrayBuffer } from "./blob";
 // -----------------------------------------------------------------------------
@@ -47,45 +47,3 @@ export const decodePngMetadata = async (blob) => {
     }
     throw new Error("INVALID");
 };
-// -----------------------------------------------------------------------------
-// SVG
-// -----------------------------------------------------------------------------
-export const encodeSvgMetadata = ({ text }) => {
-    const base64 = stringToBase64(JSON.stringify(encode({ text })), true /* is already byte string */);
-    let metadata = "";
-    metadata += `<!-- payload-type:${MIME_TYPES.excalidraw} -->`;
-    metadata += `<!-- payload-version:2 -->`;
-    metadata += "<!-- payload-start -->";
-    metadata += base64;
-    metadata += "<!-- payload-end -->";
-    return metadata;
-};
-export const decodeSvgMetadata = ({ svg }) => {
-    if (svg.includes(`payload-type:${MIME_TYPES.excalidraw}`)) {
-        const match = svg.match(/<!-- payload-start -->\s*(.+?)\s*<!-- payload-end -->/);
-        if (!match) {
-            throw new Error("INVALID");
-        }
-        const versionMatch = svg.match(/<!-- payload-version:(\d+) -->/);
-        const version = versionMatch?.[1] || "1";
-        const isByteString = version !== "1";
-        try {
-            const json = base64ToString(match[1], isByteString);
-            const encodedData = JSON.parse(json);
-            if (!("encoded" in encodedData)) {
-                // legacy, un-encoded scene JSON
-                if ("type" in encodedData &&
-                    encodedData.type === EXPORT_DATA_TYPES.excalidraw) {
-                    return json;
-                }
-                throw new Error("FAILED");
-            }
-            return decode(encodedData);
-        }
-        catch (error) {
-            console.error(error);
-            throw new Error("FAILED");
-        }
-    }
-    throw new Error("INVALID");
-};

package/dist/excalidraw/data/index.js

@@ -1,15 +1,15 @@
 import { copyBlobToClipboardAsPng, copyTextToSystemClipboard, } from "../clipboard";
-import { DEFAULT_EXPORT_PADDING, DEFAULT_FILENAME, isFirefox, MIME_TYPES, } from "../constants";
+import { DEFAULT_EXPORT_PADDING, DEFAULT_FILENAME, IMAGE_MIME_TYPES, isFirefox, MIME_TYPES, } from "../constants";
 import { getNonDeletedElements } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
+import { getElementsOverlappingFrame } from "../frame";
 import { t } from "../i18n";
-import { isSomeElementSelected, getSelectedElements } from "../scene";
+import { getSelectedElements, isSomeElementSelected } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { cloneJSON } from "../utils";
 import { canvasToBlob } from "./blob";
 import { fileSave } from "./filesystem";
 import { serializeAsJSON } from "./json";
-import { getElementsOverlappingFrame } from "../frame";
 export { loadFromBlob } from "./blob";
 export { loadFromJSON, saveAsJSON } from "./json";
 export const prepareElementsForExport = (elements, { selectedElementIds }, exportSelectionOnly) => {
@@ -60,6 +60,7 @@ export const exportCanvas = async (type, elements, appState, files, { exportBack
                 description: "Export to SVG",
                 name,
                 extension: appState.exportEmbedScene ? "excalidraw.svg" : "svg",
+                mimeTypes: [IMAGE_MIME_TYPES.svg],
                 fileHandle,
             });
         }
@@ -91,9 +92,8 @@ export const exportCanvas = async (type, elements, appState, files, { exportBack
         return fileSave(blob, {
             description: "Export to PNG",
             name,
-            // FIXME reintroduce `excalidraw.png` when most people upgrade away
-            // from 111.0.5563.64 (arm64), see #6349
-            extension: /* appState.exportEmbedScene ? "excalidraw.png" : */ "png",
+            extension: appState.exportEmbedScene ? "excalidraw.png" : "png",
+            mimeTypes: [IMAGE_MIME_TYPES.png],
             fileHandle,
         });
     }

package/dist/excalidraw/data/library.d.ts

@@ -37,7 +37,7 @@ export interface LibraryMigrationAdapter {
     /** clears entire storage afterwards */
     clear(): MaybePromise<void>;
 }
-export declare const libraryItemsAtom: import("jotai").PrimitiveAtom<{
+export declare const libraryItemsAtom: import("jotai/vanilla/atom").PrimitiveAtom<{
     status: "loading" | "loaded";
     /** indicates whether library is initialized with library items (has gone
      * through at least one update). Used in UI. Specific to this atom only. */
@@ -83,6 +83,7 @@ declare class Library {
 }
 export default Library;
 export declare const distributeLibraryItemsOnSquareGrid: (libraryItems: LibraryItems) => ExcalidrawElement[];
+export declare const validateLibraryUrl: (libraryUrl: string, validator?: string[] | ((libraryUrl: string) => boolean)) => true;
 export declare const parseLibraryTokensFromUrl: () => {
     libraryUrl: string;
     idToken: string | null;
@@ -90,9 +91,14 @@ export declare const parseLibraryTokensFromUrl: () => {
 export declare const getLibraryItemsHash: (items: LibraryItems) => number;
 export declare const useHandleLibrary: (opts: {
     excalidrawAPI: ExcalidrawImperativeAPI | null;
+    /**
+     * Return `true` if the library install url should be allowed.
+     * If not supplied, only the excalidraw.com base domain is allowed.
+     */
+    validateLibraryUrl?: ((libraryUrl: string) => boolean) | undefined;
 } & ({
     /** @deprecated we recommend using `opts.adapter` instead */
-    getInitialLibraryItems?: () => MaybePromise<LibraryItemsSource>;
+    getInitialLibraryItems?: (() => MaybePromise<LibraryItemsSource>) | undefined;
 } | {
     adapter: LibraryPersistenceAdapter;
     /**
@@ -102,5 +108,5 @@ export declare const useHandleLibrary: (opts: {
      *
      * Can be a different LibraryPersistenceAdapter.
      */
-    migrationAdapter?: LibraryMigrationAdapter;
+    migrationAdapter?: LibraryMigrationAdapter | undefined;
 })) => void;