@myoc/excalidraw 0.19.528 → 0.19.529

package/dist/dev/{chunk-6FFT5HLH.js → chunk-H5L4PT3U.js}

@@ -1,7 +1,7 @@
 // <define:import.meta.env>
-var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.527", DEV: true };
+var define_import_meta_env_default = { MODE: "development", VITE_APP_BACKEND_V2_GET_URL: "https://json-dev.excalidraw.com/api/v2/", VITE_APP_BACKEND_V2_POST_URL: "https://json-dev.excalidraw.com/api/v2/post/", VITE_APP_LIBRARY_URL: "https://libraries.excalidraw.com", VITE_APP_LIBRARY_BACKEND: "https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries", VITE_APP_WS_SERVER_URL: "http://localhost:3002", VITE_APP_PLUS_LP: "https://plus.excalidraw.com", VITE_APP_PLUS_APP: "http://localhost:3000", VITE_APP_AI_BACKEND: "http://localhost:3016", VITE_APP_FIREBASE_CONFIG: '{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}', VITE_APP_DEV_DISABLE_LIVE_RELOAD: "", VITE_APP_ENABLE_TRACKING: "true", FAST_REFRESH: "false", VITE_APP_PORT: "3001", VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX: "", VITE_APP_COLLAPSE_OVERLAY: "true", VITE_APP_ENABLE_ESLINT: "true", VITE_APP_ENABLE_PWA: "false", VITE_APP_PLUS_EXPORT_PUBLIC_KEY: "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAm2g5T+Rub6Kbf1Mf57t0\n7r2zeHuVg4dla3r5ryXMswtzz6x767octl6oLThn33mQsPSy3GKglFZoCTXJR4ij\nba8SxB04sL/N8eRrKja7TFWjCVtRwTTfyy771NYYNFVJclkxHyE5qw4m27crHF1y\nUNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD\ns9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot\nkdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS\nHQIDAQAB", VITE_APP_DISABLE_PREVENT_UNLOAD: "", PKG_NAME: "@myoc/excalidraw", PKG_VERSION: "0.19.528", DEV: true };
 
 export {
   define_import_meta_env_default
 };
-//# sourceMappingURL=chunk-6FFT5HLH.js.map
+//# sourceMappingURL=chunk-H5L4PT3U.js.map

package/dist/dev/data/{image-V7WKCORB.js → image-GYAOLTNI.js}

@@ -2,12 +2,12 @@ import {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
-} from "../chunk-NY5S5VQK.js";
-import "../chunk-6FFT5HLH.js";
+} from "../chunk-7GX2B2N5.js";
+import "../chunk-H5L4PT3U.js";
 import "../chunk-XDFCUUT6.js";
 export {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-V7WKCORB.js.map
+//# sourceMappingURL=image-GYAOLTNI.js.map

package/dist/dev/index.js

@@ -62,10 +62,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-NY5S5VQK.js";
+} from "./chunk-7GX2B2N5.js";
 import {
   define_import_meta_env_default
-} from "./chunk-6FFT5HLH.js";
+} from "./chunk-H5L4PT3U.js";
 import {
   en_default
 } from "./chunk-SKCAT7JG.js";
@@ -10936,7 +10936,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-V7WKCORB.js").then(
+        (blob2) => import("./data/image-GYAOLTNI.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -16832,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",
@@ -26238,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";
@@ -27038,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, {})
@@ -27816,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(
@@ -33418,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,
         {
@@ -33433,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, {}),
@@ -34302,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, {})
   ] });
@@ -34642,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 }) }) });
 };
@@ -36644,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) {
@@ -40373,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()),
@@ -40385,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));
@@ -40397,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", {
@@ -40709,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)) {
@@ -40736,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,
@@ -42644,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) {
@@ -42656,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),
@@ -42668,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) {
@@ -42902,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, {
@@ -45619,6 +45696,8 @@ var ExcalidrawBase = (props) => {
     editorPreferences,
     onEditorPreferencesChange,
     onPaste,
+    viewModeImageInsertBehavior,
+    onViewModeImageInsertRejected,
     detectScroll = true,
     handleKeyboardGlobally = false,
     autoFocus = false,
@@ -45732,6 +45811,8 @@ var ExcalidrawBase = (props) => {
       onEditorPreferencesChange,
       UIOptions,
       onPaste,
+      viewModeImageInsertBehavior,
+      onViewModeImageInsertRejected,
       detectScroll,
       handleKeyboardGlobally,
       autoFocus,