@myoc/excalidraw 0.19.527 → 0.19.529

package/dist/dev/index.js

@@ -44,6 +44,7 @@ import {
   isImageFileHandle,
   isImageFileHandleType,
   isPointHittingLink,
+  isPointHittingLinkIcon,
   isSomeElementSelected,
   isSupportedImageFile,
   isSupportedImageFileType,
@@ -61,10 +62,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-N6LESYN7.js";
+} from "./chunk-7GX2B2N5.js";
 import {
   define_import_meta_env_default
-} from "./chunk-YNR3T55S.js";
+} from "./chunk-H5L4PT3U.js";
 import {
   en_default
 } from "./chunk-SKCAT7JG.js";
@@ -317,7 +318,7 @@ import {
   getDragOffsetXY,
   Scene as Scene2,
   Store,
-  CaptureUpdateAction as CaptureUpdateAction40,
+  CaptureUpdateAction as CaptureUpdateAction39,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement9,
   isSimpleArrow,
@@ -10935,7 +10936,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-D6KDEKKI.js").then(
+        (blob2) => import("./data/image-GYAOLTNI.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -16295,94 +16296,6 @@ var actionToggleCropEditor = register({
   }
 });
 
-// actions/actionElementLink.ts
-import {
-  canCreateLinkFromElements,
-  defaultGetElementLinkFromSelection,
-  getLinkIdAndTypeFromSelection
-} from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
-var actionCopyElementLink = register({
-  name: "copyElementLink",
-  label: "labels.copyElementLink",
-  icon: copyIcon,
-  trackEvent: { category: "element" },
-  perform: async (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    try {
-      if (window.location) {
-        const idAndType = getLinkIdAndTypeFromSelection(
-          selectedElements,
-          appState
-        );
-        if (idAndType) {
-          await copyTextToSystemClipboard(
-            app.props.generateLinkForSelection ? app.props.generateLinkForSelection(idAndType.id, idAndType.type) : defaultGetElementLinkFromSelection(
-              idAndType.id,
-              idAndType.type
-            )
-          );
-          return {
-            appState: {
-              toast: {
-                message: t("toast.elementLinkCopied"),
-                closable: true
-              }
-            },
-            captureUpdate: CaptureUpdateAction32.EVENTUALLY
-          };
-        }
-        return {
-          appState,
-          elements,
-          app,
-          captureUpdate: CaptureUpdateAction32.EVENTUALLY
-        };
-      }
-    } catch (error) {
-      console.error(error);
-    }
-    return {
-      appState,
-      elements,
-      app,
-      captureUpdate: CaptureUpdateAction32.EVENTUALLY
-    };
-  },
-  predicate: (elements, appState) => canCreateLinkFromElements(getSelectedElements(elements, appState))
-});
-var actionLinkToElement = register({
-  name: "linkToElement",
-  label: "labels.linkToElement",
-  icon: elementLinkIcon,
-  perform: (elements, appState, _, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    if (selectedElements.length !== 1 || !canCreateLinkFromElements(selectedElements)) {
-      return {
-        elements,
-        appState,
-        app,
-        captureUpdate: CaptureUpdateAction32.EVENTUALLY
-      };
-    }
-    return {
-      appState: {
-        ...appState,
-        openDialog: {
-          name: "elementLinkSelector",
-          sourceElementId: getSelectedElements(elements, appState)[0].id
-        }
-      },
-      captureUpdate: CaptureUpdateAction32.IMMEDIATELY
-    };
-  },
-  predicate: (elements, appState, appProps, app) => {
-    const selectedElements = getSelectedElements(elements, appState);
-    return appState.openDialog?.name !== "elementLinkSelector" && selectedElements.length === 1 && canCreateLinkFromElements(selectedElements);
-  },
-  trackEvent: false
-});
-
 // actions/actionFrame.ts
 import { getNonDeletedElements as getNonDeletedElements14 } from "@excalidraw/element";
 import { mutateElement as mutateElement4 } from "@excalidraw/element";
@@ -16395,7 +16308,7 @@ import {
 import { getFrameChildren as getFrameChildren3 } from "@excalidraw/element";
 import { getElementsInGroup as getElementsInGroup6 } from "@excalidraw/element";
 import { getCommonBounds as getCommonBounds3 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction33 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction32 } from "@excalidraw/element";
 var isSingleFrameSelected = (appState, app) => {
   const selectedElements = app.scene.getSelectedElements(appState);
   return selectedElements.length === 1 && isFrameLikeElement9(selectedElements[0]);
@@ -16420,13 +16333,13 @@ var actionSelectAllElementsInFrame = register({
             return acc;
           }, {})
         },
-        captureUpdate: CaptureUpdateAction33.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction32.IMMEDIATELY
       };
     }
     return {
       elements,
       appState,
-      captureUpdate: CaptureUpdateAction33.EVENTUALLY
+      captureUpdate: CaptureUpdateAction32.EVENTUALLY
     };
   },
   predicate: (elements, appState, _, app) => isSingleFrameSelected(appState, app)
@@ -16446,13 +16359,13 @@ var actionRemoveAllElementsFromFrame = register({
             [selectedElement.id]: true
           }
         },
-        captureUpdate: CaptureUpdateAction33.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction32.IMMEDIATELY
       };
     }
     return {
       elements,
       appState,
-      captureUpdate: CaptureUpdateAction33.EVENTUALLY
+      captureUpdate: CaptureUpdateAction32.EVENTUALLY
     };
   },
   predicate: (elements, appState, _, app) => isSingleFrameSelected(appState, app)
@@ -16472,7 +16385,7 @@ var actionupdateFrameRendering = register({
           enabled: !appState.frameRendering.enabled
         }
       },
-      captureUpdate: CaptureUpdateAction33.EVENTUALLY
+      captureUpdate: CaptureUpdateAction32.EVENTUALLY
     };
   },
   checked: (appState) => appState.frameRendering.enabled
@@ -16518,7 +16431,7 @@ var actionWrapSelectionInFrame = register({
       appState: {
         selectedElementIds: { [frame.id]: true }
       },
-      captureUpdate: CaptureUpdateAction33.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction32.IMMEDIATELY
     };
   }
 });
@@ -16530,13 +16443,13 @@ import {
   arrayToMap as arrayToMap28,
   MOBILE_ACTION_BUTTON_BG as MOBILE_ACTION_BUTTON_BG4
 } from "@excalidraw/common";
-import { CaptureUpdateAction as CaptureUpdateAction35 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction34 } from "@excalidraw/element";
 import { orderByFractionalIndex as orderByFractionalIndex2 } from "@excalidraw/element";
 
 // history.ts
 import { Emitter as Emitter2 } from "@excalidraw/common";
 import {
-  CaptureUpdateAction as CaptureUpdateAction34,
+  CaptureUpdateAction as CaptureUpdateAction33,
   StoreChange,
   StoreDelta
 } from "@excalidraw/element";
@@ -16650,7 +16563,7 @@ var History = class _History {
       if (historyDelta === null) {
         return;
       }
-      const action = CaptureUpdateAction34.IMMEDIATELY;
+      const action = CaptureUpdateAction33.IMMEDIATELY;
       let prevSnapshot = this.store.snapshot;
       let nextElements = elements;
       let nextAppState = appState;
@@ -16734,7 +16647,7 @@ var executeHistoryAction = (app, appState, updater) => {
   !app.drawShape.hasPendingGesture()) {
     const result = updater();
     if (!result) {
-      return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
+      return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
     }
     const [nextElementsMap, nextAppState] = result;
     const nextElements = orderByFractionalIndex2(
@@ -16743,10 +16656,10 @@ var executeHistoryAction = (app, appState, updater) => {
     return {
       appState: nextAppState,
       elements: nextElements,
-      captureUpdate: CaptureUpdateAction35.NEVER
+      captureUpdate: CaptureUpdateAction34.NEVER
     };
   }
-  return { captureUpdate: CaptureUpdateAction35.EVENTUALLY };
+  return { captureUpdate: CaptureUpdateAction34.EVENTUALLY };
 };
 var createUndoAction = (history) => ({
   name: "undo",
@@ -16836,7 +16749,7 @@ import {
 } from "@excalidraw/element";
 import { measureText as measureText3 } from "@excalidraw/element";
 import { isTextElement as isTextElement7 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction35 } from "@excalidraw/element";
 var actionTextAutoResize = register({
   name: "autoResize",
   label: "labels.autoResize",
@@ -16879,7 +16792,7 @@ var actionTextAutoResize = register({
       elements: elements.map(
         (element) => element.id === resized.id ? resized : element
       ),
-      captureUpdate: CaptureUpdateAction36.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction35.IMMEDIATELY
     };
   }
 });
@@ -16887,7 +16800,7 @@ var actionTextAutoResize = register({
 // actions/actionToggleViewMode.tsx
 import { CODES as CODES9, KEYS as KEYS36 } from "@excalidraw/common";
 import clsx23 from "clsx";
-import { CaptureUpdateAction as CaptureUpdateAction37 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction36 } from "@excalidraw/element";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var actionToggleViewMode = register({
   name: "viewMode",
@@ -16907,7 +16820,7 @@ var actionToggleViewMode = register({
         ...appState,
         viewModeEnabled: !this.checked(appState)
       },
-      captureUpdate: CaptureUpdateAction37.EVENTUALLY
+      captureUpdate: CaptureUpdateAction36.EVENTUALLY
     };
   },
   checked: (appState) => appState.viewModeEnabled,
@@ -16919,12 +16832,13 @@ var actionToggleViewMode = register({
     if (appState.viewModeOnly || appProps.viewModeOnly) {
       return null;
     }
+    const label = appState.viewModeEnabled ? "Edit mode" : t("labels.viewMode");
     return /* @__PURE__ */ jsx58(
       IconButton,
       {
         type: "button",
-        icon: eyeIcon,
-        "aria-label": t("labels.viewMode"),
+        icon: appState.viewModeEnabled ? pencilIcon : eyeIcon,
+        "aria-label": label,
         onClick: () => updateData(null),
         size: data?.size || "medium",
         "data-testid": "button-view-mode",
@@ -24373,7 +24287,7 @@ var AppDrawShape = class {
 import { isArrowKey as isArrowKey2, KEYS as KEYS39 } from "@excalidraw/common";
 import {
   makeNextSelectedElementIds as makeNextSelectedElementIds3,
-  CaptureUpdateAction as CaptureUpdateAction38,
+  CaptureUpdateAction as CaptureUpdateAction37,
   FlowChartCreator,
   FlowChartNavigator,
   getSelectedElements as getSelectedElements6,
@@ -24497,7 +24411,7 @@ var AppFlowchart = class _AppFlowchart {
   }
   captureUpdate() {
     this.app.syncActionResult({
-      captureUpdate: CaptureUpdateAction38.IMMEDIATELY
+      captureUpdate: CaptureUpdateAction37.IMMEDIATELY
     });
   }
   static getLinkDirectionFromKey(key) {
@@ -26325,17 +26239,6 @@ var ExitZenModeButton = ({
     children: t("buttons.exitZenMode")
   }
 );
-var ExitViewModeButton = ({
-  actionManager
-}) => /* @__PURE__ */ jsx66(
-  "button",
-  {
-    type: "button",
-    className: "disable-view-mode",
-    onClick: () => actionManager.executeAction(actionToggleViewMode),
-    children: pencilIcon
-  }
-);
 
 // components/LoadingMessage.tsx
 import clsx29 from "clsx";
@@ -27125,22 +27028,19 @@ var MobileMenu = ({
     if (appState.openDialog?.name === "elementLinkSelector") {
       return null;
     }
-    const topRightUI = /* @__PURE__ */ jsxs39("div", { className: "excalidraw-ui-top-right", children: [
-      renderTopRightUI?.(true, appState) ?? (!appState.viewModeEnabled && /* @__PURE__ */ jsxs39(Fragment11, { children: [
-        defaultUIEnabled && /* @__PURE__ */ jsx80(
-          PenModeButton,
-          {
-            checked: appState.penMode,
-            onChange: () => onPenModeToggle(null),
-            title: t("toolBar.penMode"),
-            isMobile: true,
-            penDetected: appState.penDetected
-          }
-        ),
-        /* @__PURE__ */ jsx80(DefaultSidebarTriggerTunnel.Out, {})
-      ] })),
-      defaultUIEnabled && appState.viewModeEnabled && app.isInteractionEnabled() && /* @__PURE__ */ jsx80(ExitViewModeButton, { actionManager })
-    ] });
+    const topRightUI = /* @__PURE__ */ jsx80("div", { className: "excalidraw-ui-top-right", children: renderTopRightUI?.(true, appState) ?? (!appState.viewModeEnabled && /* @__PURE__ */ jsxs39(Fragment11, { children: [
+      defaultUIEnabled && /* @__PURE__ */ jsx80(
+        PenModeButton,
+        {
+          checked: appState.penMode,
+          onChange: () => onPenModeToggle(null),
+          title: t("toolBar.penMode"),
+          isMobile: true,
+          penDetected: appState.penDetected
+        }
+      ),
+      /* @__PURE__ */ jsx80(DefaultSidebarTriggerTunnel.Out, {})
+    ] })) });
     const topLeftUI = /* @__PURE__ */ jsxs39("div", { className: "excalidraw-ui-top-left", children: [
       renderTopLeftUI?.(true, appState),
       /* @__PURE__ */ jsx80(MainMenuTunnel.Out, {})
@@ -27903,7 +27803,13 @@ var Footer = ({
               }
             ),
             children: /* @__PURE__ */ jsx87(Stack_default.Col, { gap: 2, children: /* @__PURE__ */ jsxs45(Section, { heading: "canvasActions", children: [
-              !appState.viewModeOnly && /* @__PURE__ */ jsx87(Tooltip, { label: t("labels.viewMode"), children: /* @__PURE__ */ jsx87("div", { className: clsx39("view-mode-button"), children: actionManager.renderAction("viewMode") }) }),
+              !appState.viewModeOnly && /* @__PURE__ */ jsx87(
+                Tooltip,
+                {
+                  label: appState.viewModeEnabled ? "Edit mode" : t("labels.viewMode"),
+                  children: /* @__PURE__ */ jsx87("div", { className: clsx39("view-mode-button"), children: actionManager.renderAction("viewMode") })
+                }
+              ),
               /* @__PURE__ */ jsx87(Tooltip, { label: t("buttons.smartZoom"), children: /* @__PURE__ */ jsx87("div", { className: clsx39("smart-zoom-button"), children: actionManager.renderAction("smartZoom") }) }),
               zoomUIEnabled && app.isNavigationEnabled() && /* @__PURE__ */ jsx87(ZoomActions, { renderAction: actionManager.renderAction }),
               defaultUIEnabled && !appState.viewModeEnabled && /* @__PURE__ */ jsx87(
@@ -28842,7 +28748,7 @@ import clsx43 from "clsx";
 import { useEffect as useEffect28, useRef as useRef22, useState as useState24 } from "react";
 import { EVENT as EVENT7, KEYS as KEYS45, cloneJSON as cloneJSON3 } from "@excalidraw/common";
 import { deepCopyElement as deepCopyElement4 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction39 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction38 } from "@excalidraw/element";
 
 // components/Stats/utils.ts
 import { pointFrom as pointFrom40, pointRotateRads as pointRotateRads22 } from "@excalidraw/math";
@@ -29053,7 +28959,7 @@ var StatsDragInput = ({
         setAppState
       });
       app.syncActionResult({
-        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction38.IMMEDIATELY
       });
     }
   };
@@ -29161,7 +29067,7 @@ var StatsDragInput = ({
                     false
                   );
                   app.syncActionResult({
-                    captureUpdate: CaptureUpdateAction39.IMMEDIATELY
+                    captureUpdate: CaptureUpdateAction38.IMMEDIATELY
                   });
                   dragFinishedCallback?.({
                     app,
@@ -31064,8 +30970,8 @@ var StatsInner = memo2(
 import { useCallback as useCallback10, useEffect as useEffect30, useState as useState27 } from "react";
 import { normalizeLink as normalizeLink3, KEYS as KEYS46 } from "@excalidraw/common";
 import {
-  defaultGetElementLinkFromSelection as defaultGetElementLinkFromSelection2,
-  getLinkIdAndTypeFromSelection as getLinkIdAndTypeFromSelection2
+  defaultGetElementLinkFromSelection,
+  getLinkIdAndTypeFromSelection
 } from "@excalidraw/element";
 
 // components/DialogActionButton.tsx
@@ -31222,7 +31128,7 @@ var ElementLinkDialog = ({
   onClose,
   appState,
   scene,
-  generateLinkForSelection = defaultGetElementLinkFromSelection2
+  generateLinkForSelection = defaultGetElementLinkFromSelection
 }) => {
   const elementsMap = scene.getNonDeletedElementsMap();
   const originalLink = elementsMap.get(sourceElementId)?.link ?? null;
@@ -31232,7 +31138,7 @@ var ElementLinkDialog = ({
     const selectedElements = getSelectedElements(elementsMap, appState);
     let nextLink2 = originalLink;
     if (selectedElements.length > 0 && generateLinkForSelection) {
-      const idAndType = getLinkIdAndTypeFromSelection2(
+      const idAndType = getLinkIdAndTypeFromSelection(
         selectedElements,
         appState
       );
@@ -33505,10 +33411,14 @@ var DefaultSidebar = Object.assign(
       children,
       className,
       docked,
+      onDock,
       ...rest
     }) => {
       const appState = useUIAppState();
+      const setAppState = useExcalidrawSetAppState();
       const isSearchSidebar = appState.openSidebar?.tab === CANVAS_SEARCH_TAB2;
+      const isDocked = isSearchSidebar ? false : docked ?? appState.defaultSidebarDockedPreference;
+      const canDock = !isSearchSidebar && docked == null && onDock !== false;
       return /* @__PURE__ */ createElement2(
         Sidebar,
         {
@@ -33520,8 +33430,13 @@ var DefaultSidebar = Object.assign(
             { "default-sidebar--search-only": isSearchSidebar },
             className
           ),
-          docked: isSearchSidebar ? false : docked ?? appState.defaultSidebarDockedPreference,
-          onDock: void 0
+          docked: isDocked,
+          onDock: canDock ? (nextDocked) => {
+            setAppState({
+              defaultSidebarDockedPreference: nextDocked
+            });
+            onDock?.(nextDocked);
+          } : void 0
         },
         /* @__PURE__ */ jsxs64(Sidebar.Tabs, { children: [
           !isSearchSidebar && /* @__PURE__ */ jsx124(Sidebar.Header, {}),
@@ -34389,7 +34304,8 @@ var LayerUI = ({
   const renderCanvasActions = () => /* @__PURE__ */ jsxs67("div", { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsxs67("div", { className: "excalidraw-ui-top-left", children: [
       renderTopLeftUI?.(false, appState),
-      /* @__PURE__ */ jsx131(tunnels.MainMenuTunnel.Out, {})
+      /* @__PURE__ */ jsx131(tunnels.MainMenuTunnel.Out, {}),
+      /* @__PURE__ */ jsx131(tunnels.DefaultSidebarTriggerTunnel.Out, {})
     ] }),
     renderWelcomeScreen && /* @__PURE__ */ jsx131(tunnels.WelcomeScreenMenuHintTunnel.Out, {})
   ] });
@@ -34729,9 +34645,9 @@ var LayerUI = ({
             ] })
           ]
         }
-      ),
-      renderSidebars()
-    ] })
+      )
+    ] }),
+    renderSidebars()
   ] });
   return /* @__PURE__ */ jsx131(UIAppStateContext.Provider, { value: appState, children: /* @__PURE__ */ jsx131(TunnelsJotaiProvider, { children: /* @__PURE__ */ jsx131(TunnelsContext.Provider, { value: tunnels, children: layerUIJSX }) }) });
 };
@@ -36080,12 +35996,12 @@ var App = class _App extends React40.Component {
             if (shouldUpdateStrokeColor) {
               this.syncActionResult({
                 appState: { ...this.state, currentItemStrokeColor: color },
-                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
               });
             } else {
               this.syncActionResult({
                 appState: { ...this.state, currentItemBackgroundColor: color },
-                captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+                captureUpdate: CaptureUpdateAction39.IMMEDIATELY
               });
             }
           } else {
@@ -36098,7 +36014,7 @@ var App = class _App extends React40.Component {
                 }
                 return el;
               }),
-              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
             });
           }
         },
@@ -36516,7 +36432,7 @@ var App = class _App extends React40.Component {
         elements: restoredElements,
         appState: restoredAppState,
         files: initialData?.files,
-        captureUpdate: CaptureUpdateAction40.NEVER
+        captureUpdate: CaptureUpdateAction39.NEVER
       });
       this.clearImageShapeCache();
       this.fonts.loadSceneFonts().then((fontFaces) => {
@@ -36731,6 +36647,20 @@ var App = class _App extends React40.Component {
         const dataTransferList = await parseDataTransferEvent(event);
         const filesList = dataTransferList.getFiles();
         const data = await parseClipboard(dataTransferList, isPlainPaste);
+        if (this.state.viewModeEnabled) {
+          if (!this.containsImagePaste(data, filesList, isPlainPaste)) {
+            return;
+          }
+          if (!this.shouldInsertImageInViewMode({
+            source: "paste",
+            files: filesList.map((file2) => file2.file),
+            data,
+            event
+          })) {
+            event?.preventDefault();
+            return;
+          }
+        }
         if (this.props.onPaste) {
           try {
             if (await this.props.onPaste(data, event) === false) {
@@ -38314,7 +38244,31 @@ var App = class _App extends React40.Component {
         }
       }
     });
+    __publicField(this, "getElementLinkAtPositionForContextMenu", (scenePointer, hitElementMightBeLocked) => {
+      const linkElement = this.getElementLinkAtPosition(
+        scenePointer,
+        hitElementMightBeLocked
+      );
+      if (linkElement) {
+        return linkElement;
+      }
+      const elementsMap = this.scene.getNonDeletedElementsMap();
+      for (const element of this.scene.getNonDeletedElements().slice().reverse()) {
+        if (element.link && !element.locked && isPointHittingLinkIcon(
+          element,
+          elementsMap,
+          this.state,
+          pointFrom44(scenePointer.x, scenePointer.y)
+        )) {
+          return element;
+        }
+      }
+    });
     __publicField(this, "handleElementLinkClick", (event) => {
+      const isActivationButton = (button) => button === POINTER_BUTTON2.MAIN || button === POINTER_BUTTON2.TOUCH;
+      if (!isActivationButton(this.lastPointerDownEvent.button) || !isActivationButton(this.lastPointerUpEvent.button)) {
+        return;
+      }
       const draggedDistance = pointDistance11(
         pointFrom44(
           this.lastPointerDownEvent.clientX,
@@ -38353,28 +38307,32 @@ var App = class _App extends React40.Component {
       );
       if (lastPointerDownHittingLinkIcon && lastPointerUpHittingLinkIcon) {
         hideHyperlinkToolip();
-        let url = this.hitLinkElement.link;
-        if (url) {
-          url = normalizeLink4(url);
-          let customEvent;
-          if (this.props.onLinkOpen) {
-            customEvent = wrapEvent2(EVENT11.EXCALIDRAW_LINK, event.nativeEvent);
-            this.props.onLinkOpen(
-              {
-                ...this.hitLinkElement,
-                link: url
-              },
-              customEvent
-            );
-          }
-          if (!customEvent?.defaultPrevented) {
-            const target = isLocalLink2(url) ? "_self" : "_blank";
-            const newWindow = window.open(void 0, target);
-            if (newWindow) {
-              newWindow.opener = null;
-              newWindow.location = url;
-            }
-          }
+        this.openElementLink(this.hitLinkElement, event);
+      }
+    });
+    __publicField(this, "openElementLink", (element, event) => {
+      let url = element.link;
+      if (!url) {
+        return;
+      }
+      url = normalizeLink4(url);
+      let customEvent;
+      if (this.props.onLinkOpen && event) {
+        customEvent = wrapEvent2(EVENT11.EXCALIDRAW_LINK, event.nativeEvent);
+        this.props.onLinkOpen(
+          {
+            ...element,
+            link: url
+          },
+          customEvent
+        );
+      }
+      if (!customEvent?.defaultPrevented) {
+        const target = isLocalLink2(url) ? "_self" : "_blank";
+        const newWindow = window.open(void 0, target);
+        if (newWindow) {
+          newWindow.opener = null;
+          newWindow.location = url;
         }
       }
     });
@@ -39094,7 +39052,7 @@ var App = class _App extends React40.Component {
               this.state
             )
           },
-          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction40.EVENTUALLY : CaptureUpdateAction40.NEVER
+          captureUpdate: this.state.openDialog?.name === "elementLinkSelector" ? CaptureUpdateAction39.EVENTUALLY : CaptureUpdateAction39.NEVER
         });
         return;
       }
@@ -40432,9 +40390,8 @@ var App = class _App extends React40.Component {
       if (!isSupportedImageFile(imageFile)) {
         throw new Error(t("errors.unsupportedFileType"));
       }
-      const mimeType = imageFile.type;
       this.cursor.set("wait");
-      if (mimeType === MIME_TYPES9.svg) {
+      if (imageFile.type === MIME_TYPES9.svg) {
         try {
           imageFile = SVGStringToFile(
             normalizeSVG(await imageFile.text()),
@@ -40444,7 +40401,18 @@ var App = class _App extends React40.Component {
           console.warn(error);
           throw new Error(t("errors.svgImageInsertError"));
         }
+      } else {
+        const { maxWidthOrHeight } = this.props.imageOptions;
+        try {
+          imageFile = await (this.props.compressImageFile ?? resizeImageFile)(
+            imageFile,
+            { maxWidthOrHeight }
+          );
+        } catch (error) {
+          console.error("Error trying to resize image file on insertion", error);
+        }
       }
+      const mimeType = imageFile.type;
       const fileId = await (this.props.generateIdForFile?.(
         imageFile
       ) || generateIdFromFile(imageFile));
@@ -40456,15 +40424,7 @@ var App = class _App extends React40.Component {
       }
       const existingFileData = this.files[fileId];
       if (!existingFileData?.dataURL) {
-        const { maxWidthOrHeight, maxFileSizeBytes } = this.props.imageOptions;
-        try {
-          imageFile = await (this.props.compressImageFile ?? resizeImageFile)(
-            imageFile,
-            { maxWidthOrHeight }
-          );
-        } catch (error) {
-          console.error("Error trying to resize image file on insertion", error);
-        }
+        const { maxFileSizeBytes } = this.props.imageOptions;
         if (imageFile.size > maxFileSizeBytes) {
           throw new Error(
             t("errors.fileTooBig", {
@@ -40631,7 +40591,7 @@ var App = class _App extends React40.Component {
         });
       }
       if (erroredFiles.size || updatedFiles.size) {
-        this.store.scheduleAction(CaptureUpdateAction40.NEVER);
+        this.store.scheduleAction(CaptureUpdateAction39.NEVER);
         this.scene.replaceAllElements(
           this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement3(element)) {
@@ -40751,7 +40711,7 @@ var App = class _App extends React40.Component {
           )
         },
         elements: nextElements,
-        captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+        captureUpdate: CaptureUpdateAction39.IMMEDIATELY
       });
       this.setState({}, () => {
         this.actionManager.executeAction(actionFinalize);
@@ -40768,6 +40728,29 @@ var App = class _App extends React40.Component {
       const dragDataSnapshot = captureDragEventData(event);
       const dataTransferList = await parseDataTransferEvent(event);
       const fileItems = dataTransferList.getFiles();
+      const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
+      if (this.state.viewModeEnabled) {
+        if (imageFiles.length === 0 || !this.isToolSupported("image")) {
+          return;
+        }
+        if (!this.shouldInsertImageInViewMode({
+          source: "drop",
+          files: imageFiles,
+          event
+        })) {
+          return;
+        }
+        return this.insertImages(
+          imageFiles,
+          sceneX,
+          sceneY,
+          parseDragImageMetadata(
+            dataTransferList,
+            imageFiles.length,
+            dragDataSnapshot
+          )
+        );
+      }
       if (fileItems.length === 1) {
         const { file: file2, fileHandle } = fileItems[0];
         if (file2 && (file2.type === MIME_TYPES9.png || file2.type === MIME_TYPES9.svg)) {
@@ -40785,7 +40768,7 @@ var App = class _App extends React40.Component {
                 isLoading: false
               },
               replaceFiles: true,
-              captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+              captureUpdate: CaptureUpdateAction39.IMMEDIATELY
             });
             return;
           } catch (error) {
@@ -40795,7 +40778,6 @@ var App = class _App extends React40.Component {
           }
         }
       }
-      const imageFiles = fileItems.map((data) => data.file).filter((file2) => isSupportedImageFile(file2));
       if (imageFiles.length > 0 && this.isToolSupported("image")) {
         return this.insertImages(
           imageFiles,
@@ -40858,7 +40840,7 @@ var App = class _App extends React40.Component {
         {
           syncInvalidIndices3(elements.concat(ret.elements));
           this.store.scheduleMicroAction({
-            action: CaptureUpdateAction40.NEVER,
+            action: CaptureUpdateAction39.NEVER,
             elements,
             appState: void 0
           });
@@ -40871,7 +40853,7 @@ var App = class _App extends React40.Component {
               isLoading: false
             },
             replaceFiles: true,
-            captureUpdate: CaptureUpdateAction40.IMMEDIATELY
+            captureUpdate: CaptureUpdateAction39.IMMEDIATELY
           });
         }
       } catch (error) {
@@ -40893,12 +40875,15 @@ var App = class _App extends React40.Component {
         preferSelected: true,
         includeLockedElements: true
       });
+      const linkElement = this.isLinksEnabled() ? this.getElementLinkAtPositionForContextMenu({ x, y }, element) : void 0;
       const selectedElements = this.scene.getSelectedElements(this.state);
       const isHittingCommonBoundBox = this.isHittingCommonBoundingBoxOfSelectedElements(
         { x, y },
         selectedElements
       );
-      const type = element || isHittingCommonBoundBox ? "element" : "canvas";
+      const selectedLinkedElement = isHittingCommonBoundBox && selectedElements.length === 1 && selectedElements[0].link ? selectedElements[0] : void 0;
+      const contextMenuElement = element ?? linkElement ?? selectedLinkedElement;
+      const type = contextMenuElement || isHittingCommonBoundBox ? "element" : "canvas";
       const container = this.excalidrawContainerRef.current;
       const { top: offsetTop, left: offsetLeft } = container.getBoundingClientRect();
       const left = event.clientX - offsetLeft;
@@ -40906,19 +40891,19 @@ var App = class _App extends React40.Component {
       trackEvent("contextMenu", "openContextMenu", type);
       this.setState(
         {
-          ...element && !this.state.selectedElementIds[element.id] ? {
+          ...contextMenuElement && !this.state.selectedElementIds[contextMenuElement.id] ? {
             ...this.state,
             ...selectGroupsForSelectedElements7(
               {
                 editingGroupId: this.state.editingGroupId,
-                selectedElementIds: { [element.id]: true }
+                selectedElementIds: { [contextMenuElement.id]: true }
               },
               this.scene.getNonDeletedElements(),
               this.state,
               this
             ),
-            selectedLinearElement: isLinearElement11(element) ? new LinearElementEditor12(
-              element,
+            selectedLinearElement: isLinearElement11(contextMenuElement) ? new LinearElementEditor12(
+              contextMenuElement,
               this.scene.getNonDeletedElementsMap()
             ) : null
           } : this.state,
@@ -40929,7 +40914,7 @@ var App = class _App extends React40.Component {
             contextMenu: {
               top,
               left,
-              items: this.getContextMenuItems(type, element)
+              items: this.getContextMenuItems(type, contextMenuElement)
             }
           });
         }
@@ -41199,8 +41184,36 @@ var App = class _App extends React40.Component {
       }
       return [];
     });
+    __publicField(this, "getElementLinkContextMenuItems", (hitElement) => {
+      if (!hitElement?.link) {
+        return [];
+      }
+      const link = normalizeLink4(hitElement.link);
+      const isObjectLink = isElementLink3(link);
+      return [
+        {
+          key: "goToLink",
+          label: isObjectLink ? t("labels.link.goToElement") : "Go to link",
+          onSelect: () => this.openElementLink(hitElement)
+        },
+        !isObjectLink && {
+          key: "copyLink",
+          label: t("buttons.copyLink"),
+          onSelect: async () => {
+            await copyTextToSystemClipboard(link);
+            this.setState({
+              toast: {
+                message: t("toast.elementLinkCopied"),
+                closable: true
+              }
+            });
+          }
+        }
+      ];
+    });
     __publicField(this, "getContextMenuItems", (type, hitElement) => {
       const imageContextMenuItems = this.getImageContextMenuItems(hitElement);
+      const elementLinkContextMenuItems = this.getElementLinkContextMenuItems(hitElement);
       if (type === "canvas") {
         if (this.state.viewModeEnabled) {
           return [
@@ -41226,6 +41239,8 @@ var App = class _App extends React40.Component {
       }
       if (this.state.viewModeEnabled) {
         return [
+          ...elementLinkContextMenuItems,
+          elementLinkContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
           actionSmartZoom,
           actionCopy,
           imageContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
@@ -41270,7 +41285,8 @@ var App = class _App extends React40.Component {
         actionToggleLinearEditor,
         CONTEXT_MENU_SEPARATOR,
         actionLink,
-        actionCopyElementLink,
+        elementLinkContextMenuItems.length > 0 && CONTEXT_MENU_SEPARATOR,
+        ...elementLinkContextMenuItems,
         CONTEXT_MENU_SEPARATOR,
         actionDuplicateSelection,
         actionToggleElementLock,
@@ -42669,6 +42685,21 @@ var App = class _App extends React40.Component {
         EVENT11.GESTURE_END,
         this.onGestureEnd,
         false
+      ),
+      addEventListener2(document, EVENT11.PASTE, this.pasteFromClipboard, {
+        passive: false
+      }),
+      addEventListener2(
+        this.excalidrawContainerRef.current,
+        EVENT11.DRAG_OVER,
+        this.disableEvent,
+        false
+      ),
+      addEventListener2(
+        this.excalidrawContainerRef.current,
+        EVENT11.DROP,
+        this.disableEvent,
+        false
       )
     );
     if (this.state.viewModeEnabled) {
@@ -42681,9 +42712,6 @@ var App = class _App extends React40.Component {
         this.onFullscreenChange,
         { passive: false }
       ),
-      addEventListener2(document, EVENT11.PASTE, this.pasteFromClipboard, {
-        passive: false
-      }),
       addEventListener2(document, EVENT11.CUT, this.onCut, { passive: false }),
       addEventListener2(window, EVENT11.RESIZE, this.onResize, false),
       addEventListener2(window, EVENT11.UNLOAD, this.onUnload, false),
@@ -42693,18 +42721,6 @@ var App = class _App extends React40.Component {
         EVENT11.WHEEL,
         this.handleWheel,
         { passive: false }
-      ),
-      addEventListener2(
-        this.excalidrawContainerRef.current,
-        EVENT11.DRAG_OVER,
-        this.disableEvent,
-        false
-      ),
-      addEventListener2(
-        this.excalidrawContainerRef.current,
-        EVENT11.DROP,
-        this.disableEvent,
-        false
       )
     );
     if (this.props.detectScroll) {
@@ -42927,6 +42943,42 @@ var App = class _App extends React40.Component {
     }
     this.addTextFromPaste(data.text, isPlainPaste);
   }
+  containsImagePaste(data, dataTransferFiles, isPlainPaste) {
+    if (dataTransferFiles.some((data2) => isSupportedImageFile(data2.file))) {
+      return true;
+    }
+    if (!isPlainPaste && data.mixedContent?.some((node) => node.type === "imageUrl")) {
+      return true;
+    }
+    if (isPlainPaste || !data.text) {
+      return false;
+    }
+    const trimmedText = data.text.trim();
+    return trimmedText.startsWith("<svg") && trimmedText.endsWith("</svg>");
+  }
+  shouldInsertImageInViewMode({
+    source,
+    files,
+    data,
+    event
+  }) {
+    if (!this.state.viewModeEnabled) {
+      return true;
+    }
+    if (this.state.viewModeOnly || this.props.viewModeImageInsertBehavior === "reject") {
+      this.props.onViewModeImageInsertRejected?.({
+        source,
+        files,
+        data,
+        event
+      });
+      return false;
+    }
+    flushSync2(() => {
+      this.setState({ viewModeEnabled: false });
+    });
+    return true;
+  }
   // TODO rewrite this to paste both text & images at the same time if
   // pasted data contains both
   async addElementsFromMixedContentPaste(mixedContent, {
@@ -44596,7 +44648,7 @@ var App = class _App extends React40.Component {
           appState: {
             newElement: null
           },
-          captureUpdate: CaptureUpdateAction40.NEVER
+          captureUpdate: CaptureUpdateAction39.NEVER
         });
         return;
       }
@@ -44727,7 +44779,7 @@ var App = class _App extends React40.Component {
       if (resizingElement && isInvisiblySmallElement4(resizingElement)) {
         this.updateScene({
           elements: this.scene.getElementsIncludingDeleted().filter((el) => el.id !== resizingElement.id),
-          captureUpdate: CaptureUpdateAction40.NEVER
+          captureUpdate: CaptureUpdateAction39.NEVER
         });
       }
       if (pointerDownState.resize.isResizing) {
@@ -45596,7 +45648,7 @@ import {
   newElementWith as newElementWith11,
   bumpVersion as bumpVersion4
 } from "@excalidraw/element";
-import { CaptureUpdateAction as CaptureUpdateAction41 } from "@excalidraw/element";
+import { CaptureUpdateAction as CaptureUpdateAction40 } from "@excalidraw/element";
 import {
   getCommonBounds as getCommonBounds14,
   getVisibleSceneBounds as getVisibleSceneBounds2,
@@ -45644,6 +45696,8 @@ var ExcalidrawBase = (props) => {
     editorPreferences,
     onEditorPreferencesChange,
     onPaste,
+    viewModeImageInsertBehavior,
+    onViewModeImageInsertRejected,
     detectScroll = true,
     handleKeyboardGlobally = false,
     autoFocus = false,
@@ -45757,6 +45811,8 @@ var ExcalidrawBase = (props) => {
       onEditorPreferencesChange,
       UIOptions,
       onPaste,
+      viewModeImageInsertBehavior,
+      onViewModeImageInsertRejected,
       detectScroll,
       handleKeyboardGlobally,
       autoFocus,
@@ -45852,7 +45908,7 @@ function useExcalidrawStateValue(selector) {
 }
 export {
   Button,
-  CaptureUpdateAction41 as CaptureUpdateAction,
+  CaptureUpdateAction40 as CaptureUpdateAction,
   DEFAULT_LASER_COLOR2 as DEFAULT_LASER_COLOR,
   DEFAULT_OVERSCROLL,
   DefaultSidebar,