@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/clipboard.js

@@ -5,6 +5,8 @@ import { deepCopyElement } from "./element/newElement";
 import { mutateElement } from "./element/mutateElement";
 import { getContainingFrame } from "./frame";
 import { arrayToMap, isMemberOf, isPromiseLike } from "./utils";
+import { createFile, isSupportedImageFileType } from "./data/blob";
+import { ExcalidrawError } from "./errors";
 export const probablySupportsClipboardReadText = "clipboard" in navigator && "readText" in navigator.clipboard;
 export const probablySupportsClipboardWriteText = "clipboard" in navigator && "writeText" in navigator.clipboard;
 export const probablySupportsClipboardBlob = "clipboard" in navigator &&
@@ -31,6 +33,11 @@ export const createPasteEvent = ({ types, files, }) => {
     });
     if (types) {
         for (const [type, value] of Object.entries(types)) {
+            if (typeof value !== "string") {
+                files = files || [];
+                files.push(value);
+                continue;
+            }
             try {
                 event.clipboardData?.setData(type, value);
                 if (event.clipboardData?.getData(type) !== value) {
@@ -128,12 +135,12 @@ function parseHTMLTree(el) {
     return result;
 }
 const maybeParseHTMLPaste = (event) => {
-    const html = event.clipboardData?.getData("text/html");
+    const html = event.clipboardData?.getData(MIME_TYPES.html);
     if (!html) {
         return null;
     }
     try {
-        const doc = new DOMParser().parseFromString(html, "text/html");
+        const doc = new DOMParser().parseFromString(html, MIME_TYPES.html);
         const content = parseHTMLTree(doc.body);
         if (content.length) {
             return { type: "mixedContent", value: content };
@@ -144,30 +151,38 @@ const maybeParseHTMLPaste = (event) => {
     }
     return null;
 };
+/**
+ * Reads OS clipboard programmatically. May not work on all browsers.
+ * Will prompt user for permission if not granted.
+ */
 export const readSystemClipboard = async () => {
     const types = {};
-    try {
-        if (navigator.clipboard?.readText) {
-            return { "text/plain": await navigator.clipboard?.readText() };
-        }
-    }
-    catch (error) {
-        // @ts-ignore
-        if (navigator.clipboard?.read) {
-            console.warn(`navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`);
-        }
-        else {
-            throw error;
-        }
-    }
     let clipboardItems;
     try {
         clipboardItems = await navigator.clipboard?.read();
     }
     catch (error) {
-        if (error.name === "DataError") {
-            console.warn(`navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`);
-            return types;
+        try {
+            if (navigator.clipboard?.readText) {
+                console.warn(`navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`);
+                const readText = await navigator.clipboard?.readText();
+                if (readText) {
+                    return { [MIME_TYPES.text]: readText };
+                }
+            }
+        }
+        catch (error) {
+            // @ts-ignore
+            if (navigator.clipboard?.read) {
+                console.warn(`navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`);
+            }
+            else {
+                if (error.name === "DataError") {
+                    console.warn(`navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`);
+                    return types;
+                }
+                throw error;
+            }
         }
         throw error;
     }
@@ -177,10 +192,22 @@ export const readSystemClipboard = async () => {
                 continue;
             }
             try {
-                types[type] = await (await item.getType(type)).text();
+                if (type === MIME_TYPES.text || type === MIME_TYPES.html) {
+                    types[type] = await (await item.getType(type)).text();
+                }
+                else if (isSupportedImageFileType(type)) {
+                    const imageBlob = await item.getType(type);
+                    const file = createFile(imageBlob, type, undefined);
+                    types[type] = file;
+                }
+                else {
+                    throw new ExcalidrawError(`Unsupported clipboard type: ${type}`);
+                }
             }
             catch (error) {
-                console.warn(`Cannot retrieve ${type} from clipboardItem: ${error.message}`);
+                console.warn(error instanceof ExcalidrawError
+                    ? error.message
+                    : `Cannot retrieve ${type} from clipboardItem: ${error.message}`);
             }
         }
     }
@@ -193,14 +220,14 @@ export const readSystemClipboard = async () => {
 /**
  * Parses "paste" ClipboardEvent.
  */
-const parseClipboardEvent = async (event, isPlainPaste = false) => {
+const parseClipboardEventTextData = async (event, isPlainPaste = false) => {
     try {
         const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
         if (mixedContent) {
             if (mixedContent.value.every((item) => item.type === "text")) {
                 return {
                     type: "text",
-                    value: event.clipboardData?.getData("text/plain") ||
+                    value: event.clipboardData?.getData(MIME_TYPES.text) ||
                         mixedContent.value
                             .map((item) => item.value)
                             .join("\n")
@@ -209,7 +236,7 @@ const parseClipboardEvent = async (event, isPlainPaste = false) => {
             }
             return mixedContent;
         }
-        const text = event.clipboardData?.getData("text/plain");
+        const text = event.clipboardData?.getData(MIME_TYPES.text);
         return { type: "text", value: (text || "").trim() };
     }
     catch {
@@ -217,10 +244,10 @@ const parseClipboardEvent = async (event, isPlainPaste = false) => {
     }
 };
 /**
- * Attempts to parse clipboard. Prefers system clipboard.
+ * Attempts to parse clipboard event.
  */
 export const parseClipboard = async (event, isPlainPaste = false) => {
-    const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
+    const parsedEventData = await parseClipboardEventTextData(event, isPlainPaste);
     if (parsedEventData.type === "mixedContent") {
         return {
             mixedContent: parsedEventData.value,
@@ -301,8 +328,8 @@ export const copyTextToSystemClipboard = async (text, clipboardEvent) => {
     // (2) if fails and we have access to ClipboardEvent, use plain old setData()
     try {
         if (clipboardEvent) {
-            clipboardEvent.clipboardData?.setData("text/plain", text || "");
-            if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
+            clipboardEvent.clipboardData?.setData(MIME_TYPES.text, text || "");
+            if (clipboardEvent.clipboardData?.getData(MIME_TYPES.text) !== text) {
                 throw new Error("Failed to setData on clipboardEvent");
             }
             return;

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

@@ -5,10 +5,11 @@ import type { AppClassProperties, AppProps, UIAppState, Zoom } from "../types";
 import "./Actions.scss";
 export declare const canChangeStrokeColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
 export declare const canChangeBackgroundColor: (appState: UIAppState, targetElements: ExcalidrawElement[]) => boolean;
-export declare const SelectedShapeActions: ({ appState, elementsMap, renderAction, }: {
+export declare const SelectedShapeActions: ({ appState, elementsMap, renderAction, app, }: {
     appState: UIAppState;
     elementsMap: NonDeletedElementsMap | NonDeletedSceneElementsMap;
     renderAction: ActionManager["renderAction"];
+    app: AppClassProperties;
 }) => JSX.Element;
 export declare const ShapesSwitcher: ({ activeTool, appState, app, UIOptions, }: {
     activeTool: UIAppState["activeTool"];

package/dist/excalidraw/components/Actions.js

@@ -20,6 +20,7 @@ import { EmbedIcon, extraToolsIcon, frameToolIcon, mermaidLogoIcon, laserPointer
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
 import { CLASSES } from "../constants";
+import { alignActionsPredicate } from "../actions/actionAlign";
 export const canChangeStrokeColor = (appState, targetElements) => {
     let commonSelectedType = targetElements[0]?.type || null;
     for (const element of targetElements) {
@@ -39,7 +40,7 @@ export const canChangeBackgroundColor = (appState, targetElements) => {
     return (hasBackground(appState.activeTool.type) ||
         targetElements.some((element) => hasBackground(element.type)));
 };
-export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) => {
+export const SelectedShapeActions = ({ appState, elementsMap, renderAction, app, }) => {
     const targetElements = getTargetElements(elementsMap, appState);
     let isSingleElementBoundContainer = false;
     if (targetElements.length === 2 &&
@@ -61,6 +62,7 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
     const showCropEditorAction = !appState.croppingElementId &&
         targetElements.length === 1 &&
         isImageElement(targetElements[0]);
+    const showAlignActions = !isSingleElementBoundContainer && alignActionsPredicate(appState, app);
     return (_jsxs("div", { className: "panelColumn", children: [_jsx("div", { children: canChangeStrokeColor(appState, targetElements) &&
                     renderAction("changeStrokeColor") }), canChangeBackgroundColor(appState, targetElements) && (_jsx("div", { children: renderAction("changeBackgroundColor") })), showFillIcons && renderAction("changeFillStyle"), (hasStrokeWidth(appState.activeTool.type) ||
                 targetElements.some((element) => hasStrokeWidth(element.type))) &&
@@ -74,7 +76,7 @@ export const SelectedShapeActions = ({ appState, elementsMap, renderAction, }) =
                         suppportsHorizontalAlign(targetElements, elementsMap)) &&
                         renderAction("changeTextAlign")] })), shouldAllowVerticalAlign(targetElements, elementsMap) &&
                 renderAction("changeVerticalAlign"), (canHaveArrowheads(appState.activeTool.type) ||
-                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringForward"), renderAction("bringToFront")] })] }), targetElements.length > 1 && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
+                targetElements.some((element) => canHaveArrowheads(element.type))) && (_jsx(_Fragment, { children: renderAction("changeArrowhead") })), renderAction("changeOpacity"), _jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.layers") }), _jsxs("div", { className: "buttonList", children: [renderAction("sendToBack"), renderAction("sendBackward"), renderAction("bringForward"), renderAction("bringToFront")] })] }), showAlignActions && !isSingleElementBoundContainer && (_jsxs("fieldset", { children: [_jsx("legend", { children: t("labels.align") }), _jsxs("div", { className: "buttonList", children: [isRTL ? (_jsxs(_Fragment, { children: [renderAction("alignRight"), renderAction("alignHorizontallyCentered"), renderAction("alignLeft")] })) : (_jsxs(_Fragment, { children: [renderAction("alignLeft"), renderAction("alignHorizontallyCentered"), renderAction("alignRight")] })), targetElements.length > 2 &&
                                 renderAction("distributeHorizontally"), _jsx("div", { style: { flexBasis: "100%", height: 0 } }), _jsxs("div", { style: {
                                     display: "flex",
                                     flexWrap: "wrap",

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const activeConfirmDialogAtom: import("jotai").PrimitiveAtom<"clearCanvas" | null> & {
+export declare const activeConfirmDialogAtom: import("jotai/vanilla/atom").PrimitiveAtom<"clearCanvas" | null> & {
     init: "clearCanvas" | null;
 };
 export declare const ActiveConfirmDialog: () => JSX.Element | null;

package/dist/excalidraw/components/ActiveConfirmDialog.js

@@ -1,13 +1,12 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { atom, useAtom } from "jotai";
 import { actionClearCanvas } from "../actions";
 import { t } from "../i18n";
-import { jotaiScope } from "../jotai";
+import { atom, useAtom } from "../editor-jotai";
 import { useExcalidrawActionManager } from "./App";
 import ConfirmDialog from "./ConfirmDialog";
 export const activeConfirmDialogAtom = atom(null);
 export const ActiveConfirmDialog = () => {
-    const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(activeConfirmDialogAtom, jotaiScope);
+    const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(activeConfirmDialogAtom);
     const actionManager = useExcalidrawActionManager();
     if (!activeConfirmDialog) {
         return null;

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

@@ -248,6 +248,7 @@ declare class App extends React.Component<AppProps, AppState> {
     private renderEmbeddables;
     private getFrameNameDOMId;
     frameNameBoundsCache: FrameNameBoundsCache;
+    private resetEditingFrame;
     private renderFrameNames;
     private toggleOverscrollBehavior;
     render(): JSX.Element;