2.13.0 code, but not yet released. Manifest version not updated

manifest-beta.json

@@ -2,7 +2,7 @@
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
   "version": "2.12.4",
-	"minAppVersion": "1.1.6",
+	"minAppVersion": "1.5.7",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",
 	"authorUrl": "https://excalidraw-obsidian.online",

manifest.json

@@ -2,11 +2,11 @@
   "id": "obsidian-excalidraw-plugin",
   "name": "Excalidraw",
   "version": "2.12.4",
-  "minAppVersion": "1.1.6",
+  "minAppVersion": "1.5.7",
   "description": "An Obsidian plugin to edit and view Excalidraw drawings",
   "author": "Zsolt Viczian",
   "authorUrl": "https://excalidraw-obsidian.online",
   "fundingUrl": "https://ko-fi.com/zsolt",
   "helpUrl": "https://github.com/zsviczian/obsidian-excalidraw-plugin#readme",
   "isDesktopOnly": false
-}
+}

package.json

@@ -23,7 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.18.0-24",
+    "@zsviczian/excalidraw": "0.18.0-25",
     "chroma-js": "^3.1.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

src/constants/assets/startupScript.md

@@ -125,20 +125,148 @@
  * @returns {string} - The new filepath for the image including full vault path and extension.
  * 
  * Example usage:
- * ```
  * onImageFilePathHook: (data) => {
  *   const { currentImageName, drawingFilePath } = data;
  *   const ext = currentImageName.split('.').pop();
  *   // Generate a new filepath based on the drawing file name and other criteria
  *   return `${drawingFileName} - ${currentImageName || 'image'}.${ext}`;
  * }
- * ```
- *  onImageFilePathHook: (data: {
+ * 
+ * Signiture:
+ * onImageFilePathHook: (data: {
  *   currentImageName: string; // Excalidraw generated name of the image, or the name received from the file system.
  *   drawingFilePath: string; // The full filepath of the Excalidraw file where the image is being used.
  * }) => string = null;  
 */
-//ea.onImageFilePathHook = (data) => {};
+// ea.onImageFilePathHook = (data) => { console.log(data); };
+
+/**
+ * If set, this callback is triggered when the Excalidraw image is being exported to 
+ * .svg, .png, or .excalidraw.
+ * You can use this callback to customize the naming and path of the images. This allows
+ * you to place images into an assets folder.
+ * 
+ * If the function returns null or undefined, the normal Excalidraw operation will continue
+ * with the currentImageName and in the same folder as the Excalidraw file
+ * If a filepath is returned, that will be used. Include the full Vault filepath and filename
+ * with the file extension.
+ * !!!! If an image already exists on the path, that will be overwritten. When returning
+ * your own image path, you must take care of unique filenames (if that is a requirement) !!!!
+ * The current image name is the name generated by Excalidraw:
+ * - my-drawing.png
+ * - my-drawing.svg
+ * - my-drawing.excalidraw
+ * - my-drawing.dark.svg
+ * - my-drawing.light.svg
+ * - my-drawing.dark.png
+ * - my-drawing.light.png
+ * 
+ * @param data - An object containing the following properties:
+ *   @property {string} exportFilepath - Default export filepath for the image.
+ *   @property {string} excalidrawFile - TFile: The Excalidraw file being exported.
+ *   @property {string} exportExtension - The file extension of the export (e.g., .dark.svg, .png, .excalidraw).
+ *   @property {string} oldExcalidrawPath - If action === "move" The old path of the Excalidraw file, else undefined
+ *   @property {string} action - The action being performed:
+ *        "export" | "move" | "delete"
+ *        move and delete reference the change to the Excalidraw  file.
+ * 
+ * @returns {string} - The new filepath for the image including full vault path and extension.
+ * 
+ * action === "move" || action === "delete" is only possible if "keep in sync" is enabled
+ *   in plugin export settings
+ *
+ * Example usage:
+ * onImageFilePathHook: (data) => {
+ *   const { currentImageName, drawingFilePath, frontmatter } = data;
+ *   // Generate a new filepath based on the drawing file name and other criteria
+ *   const ext = currentImageName.split('.').pop();
+ *   if(frontmatter && frontmatter["my-custom-field"]) {
+ *   }
+ *   return `${drawingFileName} - ${currentImageName || 'image'}.${ext}`;
+ * }
+ * 
+*/
+/*ea.onImageExportPathHook =  (data) => {
+  //debugger; //remove comment to debug using Developer Console
+  
+  let {excalidrawFile, exportFilepath, exportExtension, oldExcalidrawPath, action} = data;
+  const frontmatter = app.metadataCache.getFileCache(excalidrawFile)?.frontmatter;
+  //console.log(data, frontmatter);
+  
+  const excalidrawFilename = action === "move"
+    ? ea.splitFolderAndFilename(excalidrawFile.name).filename
+    : excalidrawFile.name
+
+  if(excalidrawFilename.match(/^icon - /i)) {
+    const {folderpath, filename, basename, extension} = ea.splitFolderAndFilename(exportFilepath);
+    exportFilepath = "assets/icons/" + filename;
+    return exportFilepath;
+  }
+    
+  if(excalidrawFilename.match(/^stickfigure - /i)) {
+    const {folderpath, filename, basename, extension} = ea.splitFolderAndFilename(exportFilepath);
+    exportFilepath = "assets/stickfigures/" + filename;
+    return exportFilepath;
+  }
+    
+  if(excalidrawFilename.match(/^logo - /i)) {
+    const {folderpath, filename, basename, extension} = ea.splitFolderAndFilename(exportFilepath);
+    exportFilepath = "assets/logos/" + filename;
+    return exportFilepath;
+  }
+
+	// !!!! frontmatter will be undefined when action === "delete"
+	// this means if you base your logic on frontmatter properties, then 
+	// plugin settings keep files in sync will break for those files when
+	// deleting the Excalidraw file. The images will not be deleted, or worst
+	// your logic might result in deleting other files. This hook gives you
+	// powerful control, but the hook function logic requires careful testing
+	// on your part.
+  //if(frontmatter && frontmatter["is-asset"]) { //custom frontmatter property
+    exportFilepath = ea.obsidian.normalizePath("assets/" + exportFilepath);
+    return exportFilepath;
+  //}
+
+  return exportFilepath;
+};*/
+
+/**
+ * Excalidraw supports auto-export of Excalidraw files to .png, .svg, and .excalidraw formats.
+ * 
+ * Auto-export of Excalidraw files can be controlled at multiple levels.
+ * 1) In plugin settings where you can set up default auto-export applicable to all your Excalidraw files.
+ * 2) However, if you do not want to auto-export every file, you can also control auto-export
+ *    at the file level using the 'excalidraw-autoexport' frontmatter property.
+ * 3) This hook gives you an additional layer of control over the auto-export process.
+ * 
+ * This hook is triggered when an Excalidraw file is being saved.
+ * 
+ * interface AutoexportConfig {
+ *   png: boolean; // Whether to auto-export to PNG
+ *   svg: boolean; // Whether to auto-export to SVG
+ *   excalidraw: boolean; // Whether to auto-export to Excalidraw format
+ *   theme: "light" | "dark" | "both"; // The theme to use for the export
+ * }
+ *
+ * @param {Object} data - The data for the hook.
+ * @param {AutoexportConfig} data.autoexportConfig - The current autoexport configuration.
+ * @param {TFile} data.excalidrawFile - The Excalidraw file being auto-exported.
+ * @returns {AutoexportConfig | null} - Return a modified AutoexportConfig to override the export behavior, or null to use the default.
+*/
+/*ea.onTriggerAutoexportHook = (data) => {
+  let {autoexportConfig, excalidrawFile} = data;
+  const frontmatter = app.metadataCache.getFileCache(excalidrawFile)?.frontmatter;
+  //console.log(data, frontmatter);
+  //logic based on filepath and frontmatter
+  if(excalidrawFile.name.match(/^(?:icon|stickfigure|logo) - /i)) {
+    autoexportConfig.theme = "light"; 
+    autoexportConfig.svg = true;
+    autoexportConfig.png = false;
+    autoexportConfig.excalidraw = false;
+    return autoexportConfig;
+  }
+  return autoexportConfig;
+};*/
 
 /**
  * If set, this callback is triggered whenever the active canvas color changes
@@ -147,5 +275,5 @@
  *     view: ExcalidrawView, //the excalidraw view 
  *     color: string,
  *   ) => void = null;
- */
-//ea.onCanvasColorChangeHook = (ea, view, color) => {};
+*/
+//ea.onCanvasColorChangeHook = (ea, view, color) => {};

src/constants/constants.ts

@@ -1,8 +1,8 @@
 import { customAlphabet } from "nanoid";
 import { ExcalidrawLib } from "../types/excalidrawLib";
-import { moment } from "obsidian";
 import ExcalidrawPlugin from "src/core/main";
 import { DeviceType } from "src/types/types";
+import { errorHandler } from "../utils/ErrorHandler";
 //This is only for backward compatibility because an early version of obsidian included an encoding to avoid fantom links from littering Obsidian graph view
 declare const PLUGIN_VERSION:string;
 export let EXCALIDRAW_PLUGIN: ExcalidrawPlugin = null;
@@ -106,33 +106,65 @@ export let {
   getCSSFontDefinition,
   loadSceneFonts,
   loadMermaid,
+  syncInvalidIndices,
 } = excalidrawLib;
 
 export function updateExcalidrawLib() {
-  ({
-    sceneCoordsToViewportCoords,
-    viewportCoordsToSceneCoords,
-    determineFocusDistance,
-    intersectElementWithLine,
-    getCommonBoundingBox,
-    getMaximumGroups,
-    measureText,
-    getLineHeight,
-    wrapText, 
-    getFontString, 
-    getBoundTextMaxWidth, 
-    exportToSvg,
-    exportToBlob,
-    mutateElement,
-    restore,
-    mermaidToExcalidraw,
-    getFontFamilyString,
-    getContainerElement,
-    refreshTextDimensions,
-    getCSSFontDefinition,
-    loadSceneFonts,
-    loadMermaid,
-  } = excalidrawLib);
+  try {
+    // First validate that excalidrawLib exists and has the expected methods
+    if (!excalidrawLib) {
+      throw new Error("excalidrawLib is undefined");
+    }
+    
+    // Check that critical functions exist before assigning them
+    const requiredFunctions = [
+      'sceneCoordsToViewportCoords',
+      'viewportCoordsToSceneCoords',
+      'determineFocusDistance',
+      'intersectElementWithLine',
+      'getCommonBoundingBox',
+      'measureText',
+      'getLineHeight',
+      'restore'
+    ];
+    
+    for (const fnName of requiredFunctions) {
+      if (!(fnName in excalidrawLib) || typeof excalidrawLib[fnName as keyof typeof excalidrawLib] !== 'function') {
+        throw new Error(`Required function ${fnName} is missing from excalidrawLib`);
+      }
+    }
+    
+    // If validation passes, update the exported functions
+    ({
+      sceneCoordsToViewportCoords,
+      viewportCoordsToSceneCoords,
+      determineFocusDistance,
+      intersectElementWithLine,
+      getCommonBoundingBox,
+      getMaximumGroups,
+      measureText,
+      getLineHeight,
+      wrapText, 
+      getFontString, 
+      getBoundTextMaxWidth, 
+      exportToSvg,
+      exportToBlob,
+      mutateElement,
+      restore,
+      mermaidToExcalidraw,
+      getFontFamilyString,
+      getContainerElement,
+      refreshTextDimensions,
+      getCSSFontDefinition,
+      loadSceneFonts,
+      loadMermaid,
+      syncInvalidIndices,
+    } = excalidrawLib);
+  } catch (error) {
+    errorHandler.handleError(error, "updateExcalidrawLib", true);
+    // Don't throw here - we'll try to continue with potentially stale functions
+    // but at least we won't crash
+  }
 }
 
 export const FONTS_STYLE_ID = "excalidraw-custom-fonts";

src/core/main.ts

@@ -44,7 +44,7 @@ import { initExcalidrawAutomate } from "src/utils/excalidrawAutomateUtils";
 import { around, dedupe } from "monkey-around";
 import { t } from "../lang/helpers";
 import {
-  checkAndCreateFolder,
+  createOrOverwriteFile,
   fileShouldDefaultAsExcalidraw,
   getDrawingFilename,
   getIMGFilename,
@@ -738,13 +738,7 @@ export default class ExcalidrawPlugin extends Plugin {
             if (!data || data.startsWith("404: Not Found")) {
               return null;
             }
-            if (file) {
-              await this.app.vault.modify(file as TFile, data);
-            } else {
-              await checkAndCreateFolder(folder);
-              file = await this.app.vault.create(localPath, data);
-            }
-            return file;
+            return await createOrOverwriteFile(this.app, file?.path ?? localPath, data);
           };
 
           try {
@@ -894,7 +888,8 @@ export default class ExcalidrawPlugin extends Plugin {
       normalizePath(file.path.substring(0, file.path.lastIndexOf(file.name))),
     );
     log(fname);
-    const result = await this.app.vault.create(
+    const result = await createOrOverwriteFile(
+      this.app,
       fname,
       FRONTMATTER + (await this.fileManager.exportSceneToMD(data, false)),
     );

src/core/managers/CommandManager.ts

@@ -34,6 +34,7 @@ import { insertLaTeXToView, search } from "src/utils/excalidrawAutomateUtils";
 import { templatePromt } from "../../shared/Dialogs/Prompt";
 import { t } from "../../lang/helpers";
 import {
+  createOrOverwriteFile,
   getAliasWithSize,
   getAnnotationFileNameAndFolder,
   getCropFileNameAndFolder,
@@ -69,7 +70,6 @@ import { carveOutImage, carveOutPDF, createImageCropperFile } from "../../utils/
 import { showFrameSettings } from "../../shared/Dialogs/FrameSettings";
 import { insertImageToView } from "../../utils/excalidrawViewUtils";
 import ExcalidrawPlugin from "src/core/main";
-import { get } from "http";
 
 declare const PLUGIN_VERSION:string;
 
@@ -258,7 +258,7 @@ export class CommandManager {
             new Notice("The compressed string is corrupted. Unable to decompress data.");
             return;
           }
-          await this.app.vault.modify(activeFile,header + decompressed + "\n```\n%%" + compressed[1]);
+          await createOrOverwriteFile(this.app, activeFile.path,header + decompressed + "\n```\n%%" + compressed[1]);
         })();
 
       }
@@ -355,7 +355,16 @@ export class CommandManager {
           if(excalidrawFname.endsWith(".light.md")) {
             excalidrawFile = this.app.metadataCache.getFirstLinkpathDest(excalidrawFname.replace(/\.light\.md$/,".md"), view.file.path);
           }
-          if(!excalidrawFile) return false;
+          //handles the case if the png or svg is not in the same folder as the excalidraw file
+          if(!excalidrawFile) {
+            const basename = imgFile.basename.replace(/(?:\.dark|\.light)$/,"");
+            const candidates = this.app.vault.getMarkdownFiles().filter(f=>f.basename === basename);
+            if(candidates.length === 1) {
+              excalidrawFile = candidates[0];
+            } else {
+              return false;
+            }
+          }
         }
         if(checking) return true;
         this.plugin.openDrawing(excalidrawFile, "new-tab", true);
@@ -1823,10 +1832,7 @@ export class CommandManager {
           const template = await this.plugin.getBlankDrawing();
           const target = await this.app.vault.read(activeFile);
           const mergedTarget = mergeMarkdownFiles(template, target);
-          await this.app.vault.modify(
-            activeFile,
-            mergedTarget,
-          );
+          await createOrOverwriteFile(this.app, activeFile.path, mergedTarget);
           setExcalidrawView(activeView.leaf);
         })();
       },

src/core/managers/FileManager.ts

@@ -6,7 +6,7 @@ import { changeThemeOfExcalidrawMD, ExcalidrawData, getMarkdownDrawingSection }
 import ExcalidrawView, { getTextMode } from "src/view/ExcalidrawView";
 import ExcalidrawPlugin from "src/core/main";
 import { DEBUGGING } from "src/utils/debugHelper";
-import { checkAndCreateFolder, download, getIMGFilename, getLink, getListOfTemplateFiles, getNewUniqueFilepath } from "src/utils/fileUtils";
+import { checkAndCreateFolder, createFileAndAwaitMetacacheUpdate, download, getIMGFilename, getLink, getListOfTemplateFiles, getNewUniqueFilepath } from "src/utils/fileUtils";
 import { PaneTarget } from "src/utils/modifierkeyHelper";
 import { getExcalidrawViews, getNewOrAdjacentLeaf, isObsidianThemeDark, openLeaf } from "src/utils/obsidianUtils";
 import { errorlog, getExportTheme } from "src/utils/utils";
@@ -172,28 +172,71 @@ export class PluginFileManager {
        ? ""
        : theme + ".";
 
-      const imageRelativePath = getIMGFilename(
-        excalidrawRelativePath,
-        theme+this.settings.embedType.toLowerCase(),
-      );
-      const imageFullpath = getIMGFilename(
+      const exportExtension = theme+this.settings.embedType.toLowerCase();
+      let imageFullpath = getIMGFilename(
         file.path,
-        theme+this.settings.embedType.toLowerCase(),
+        exportExtension,
       );
      
+      if(this.plugin.ea?.onImageExportPathHook) {
+        try {
+          imageFullpath = this.plugin.ea.onImageExportPathHook({
+            exportFilepath: imageFullpath,
+            exportExtension,
+            excalidrawFile: file,
+            action: "export",
+          }) ?? imageFullpath;
+        } catch (e) {
+          errorlog({where: "FileManager.embedDrawing", fn: this.plugin.ea.onImageExportPathHook, error: e});
+        }
+      }
+
+      const createFile = async (path: string):Promise<TFile> => {
+        return await createFileAndAwaitMetacacheUpdate(this.app, path, 
+          this.settings.embedType === "SVG"
+            ? `<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0"></svg>`
+            : new Uint8Array([
+                0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A, // PNG signature
+                0x00, 0x00, 0x00, 0x0D, // IHDR chunk length
+                0x49, 0x48, 0x44, 0x52, // IHDR
+                0x00, 0x00, 0x00, 0x01, // width: 1
+                0x00, 0x00, 0x00, 0x01, // height: 1
+                0x08, 0x06, 0x00, 0x00, 0x00, // bit depth: 8, color type: 6 (RGBA), compression: 0, filter: 0, interlace: 0
+                0x1F, 0x15, 0xC4, 0x89, // IHDR CRC
+                0x00, 0x00, 0x00, 0x0B, // IDAT chunk length
+                0x49, 0x44, 0x41, 0x54, // IDAT
+                0x78, 0x9C, 0x62, 0x00, 0x02, 0x00, 0x00, 0x05, 0x00, 0x01, 0x0D, // compressed data (1x1 transparent pixel)
+                0x0A, 0x2D, 0xB4, // IDAT CRC
+                0x00, 0x00, 0x00, 0x00, // IEND chunk length
+                0x49, 0x45, 0x4E, 0x44, // IEND
+                0xAE, 0x42, 0x60, 0x82  // IEND CRC
+              ]).buffer
+        );
+      }
+
+      let imgFile = this.app.vault.getFileByPath(imageFullpath);
+      if (!imgFile) {
+        imgFile = await createFile(imageFullpath);
+      }
+
+      const imageRelativePath = this.app.metadataCache.fileToLinktext(
+        imgFile,
+        activeView.file.path,
+        false,
+      );
+
       //will hold incorrect value if theme==="", however in that case it won't be used
       const otherTheme = theme === "dark." ? "light." : "dark.";
-      const otherImageRelativePath = theme === "" 
+      //if the hook tinkers with the extension, then I cannot predict the other theme's extension
+      //it would become a messy heuristic to try to guess the other theme's extension
+      const otherImageRelativePath = ((theme === "") || !imageRelativePath.endsWith(exportExtension))
         ? null
-        : getIMGFilename(
-            excalidrawRelativePath,
-            otherTheme+this.settings.embedType.toLowerCase(),
-          );
+        : (imageRelativePath.substring(0, imageRelativePath.lastIndexOf(exportExtension)) + otherTheme+this.settings.embedType.toLowerCase());
 
-      const imgFile = this.app.vault.getAbstractFileByPath(imageFullpath);
-      if (!imgFile) {
-        await this.app.vault.create(imageFullpath, "");
-        await sleep(200); //wait for metadata cache to update
+      if(otherImageRelativePath) {
+        await createFile(
+          imgFile.path.substring(0, imgFile.path.lastIndexOf(exportExtension)) + otherTheme+this.settings.embedType.toLowerCase()
+        );
       }
 
       const inclCom = this.settings.embedMarkdownCommentLinks;
@@ -370,14 +413,38 @@ export class PluginFileManager {
     if (!this.settings.keepInSync) {
       return;
     }
-    [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
-      const oldIMGpath = getIMGFilename(oldPath, ext);
-      const imgFile = this.app.vault.getAbstractFileByPath(
-        normalizePath(oldIMGpath),
+    const imgMap = new Map<string, {oldImgPath: string, newImgPath: string}>();
+    [EXPORT_TYPES, "excalidraw"].flat().forEach(ext => {
+      let oldImgPath = getIMGFilename(oldPath, ext);
+      let newImgPath = getIMGFilename(file.path, ext);
+      if(this.plugin.ea?.onImageExportPathHook) {
+        try {
+          oldImgPath = this.plugin.ea.onImageExportPathHook({
+            exportFilepath: oldImgPath,
+            exportExtension: ext,
+            excalidrawFile: file,
+            oldExcalidrawPath: oldPath,
+            action: "move",
+          }) ?? oldImgPath;
+          newImgPath = this.plugin.ea.onImageExportPathHook({
+            exportFilepath: newImgPath,
+            exportExtension: ext,
+            excalidrawFile: file,
+            action: "export",
+          }) ?? newImgPath;
+        } catch (e) {
+          errorlog({where: "FileManager.renameEventHandler", fn: this.plugin.ea.onImageExportPathHook, error: e});
+        }
+      }
+      imgMap.set(ext, { oldImgPath, newImgPath });
+    });
+
+    imgMap.forEach((path, ext) => {
+      const imgFile = this.app.vault.getFileByPath(
+        normalizePath(path.oldImgPath),
       );
-      if (imgFile && imgFile instanceof TFile) {
-        const newIMGpath = getIMGFilename(file.path, ext);
-        await this.app.fileManager.renameFile(imgFile, newIMGpath);
+      if (imgFile) {
+        this.app.fileManager.renameFile(imgFile, normalizePath(path.newImgPath));
       }
     });
   }
@@ -473,7 +540,7 @@ export class PluginFileManager {
     //close excalidraw view where this file is open
     const excalidrawViews = getExcalidrawViews(this.app);
     for (const excalidrawView of excalidrawViews) {
-      if (excalidrawView.file.path === file.path) {
+      if (file?.path && excalidrawView?.file?.path === file.path) {
         await excalidrawView.leaf.setViewState({
           type: VIEW_TYPE_EXCALIDRAW,
           state: { file: null },
@@ -483,14 +550,31 @@ export class PluginFileManager {
 
     //delete PNG and SVG files as well
     if (this.settings.keepInSync) {
+      const imgMap = new Map<string, string>();
+      [EXPORT_TYPES, "excalidraw"].flat().forEach(ext => {
+        let imgPath = getIMGFilename(file.path, ext);
+        if(this.plugin.ea?.onImageExportPathHook) {
+          try {
+            imgPath = this.plugin.ea.onImageExportPathHook({
+              exportFilepath: imgPath,
+              exportExtension: ext,
+              excalidrawFile: file,
+              action: "delete",
+            }) ?? imgPath;
+          } catch (e) {
+            errorlog({where: "FileManager.deleteEventHandler", fn: this.plugin.ea.onImageExportPathHook, error: e});
+          }
+        }
+        imgMap.set(ext, imgPath);
+      });
+      
       window.setTimeout(() => {
-        [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
-          const imgPath = getIMGFilename(file.path, ext);
-          const imgFile = this.app.vault.getAbstractFileByPath(
+        imgMap.forEach((imgPath: string, ext: string) => {        
+          const imgFile = this.app.vault.getFileByPath(
             normalizePath(imgPath),
           );
-          if (imgFile && imgFile instanceof TFile) {
-            await this.app.vault.delete(imgFile);
+          if (imgFile) {
+            this.app.vault.delete(imgFile);
           }
         });
       }, 500);

src/core/managers/PackageManager.ts

@@ -4,77 +4,202 @@ import { Packages } from "../../types/types";
 import { debug, DEBUGGING } from "../../utils/debugHelper";
 import { Notice } from "obsidian";
 import ExcalidrawPlugin from "src/core/main";
+import { errorHandler } from "../../utils/ErrorHandler";
+import React from "react";
+import ReactDOM from "react-dom";
 
 declare let REACT_PACKAGES:string;
-declare let react:any;
-declare let reactDOM:any;
+declare let react: typeof React;
+declare let reactDOM:typeof ReactDOM;
 declare let excalidrawLib: typeof ExcalidrawLib;
 declare const unpackExcalidraw: Function;
 
 export class PackageManager {
   private packageMap: Map<Window, Packages> = new Map<Window, Packages>();
   private EXCALIDRAW_PACKAGE: string;
+  private plugin: ExcalidrawPlugin;
+  private fallbackPackage: Packages | null = null;
 
   constructor(plugin: ExcalidrawPlugin) {
+    this.plugin = plugin;
+    
     try {
       this.EXCALIDRAW_PACKAGE = unpackExcalidraw();
-      excalidrawLib = window.eval.call(window,`(function() {${this.EXCALIDRAW_PACKAGE};return ExcalidrawLib;})()`);
+      
+      // Use safe evaluation for unpacking the Excalidraw package
+      excalidrawLib = errorHandler.safeEval(
+        `(function() {${this.EXCALIDRAW_PACKAGE};return ExcalidrawLib;})()`, 
+        "PackageManager constructor - excalidrawLib initialization", 
+        window
+      );
+      
+      if (!excalidrawLib) {
+        throw new Error("Failed to initialize excalidrawLib");
+      }
+      
+      // Update the exported functions
       updateExcalidrawLib();
-      this.setPackage(window,{react, reactDOM, excalidrawLib});
+      
+      // Create a package with the loaded libraries
+      const initialPackage = {react, reactDOM, excalidrawLib};
+      
+      // Validate the package before storing
+      if (this.validatePackage(initialPackage)) {
+        this.setPackage(window, initialPackage);
+        this.fallbackPackage = initialPackage; // Store a valid package as fallback
+      } else {
+        throw new Error("Invalid initial package");
+      }
     } catch (e) {
-      new Notice("Error loading the Excalidraw package", 6000);
+      errorHandler.handleError(e, "PackageManager constructor");
+      new Notice("Error loading the Excalidraw package. Some features may not work correctly.", 10000);
       console.error("Error loading the Excalidraw package", e);
     }
+    
     plugin.logStartupEvent("Excalidraw package unpacked");
   }
 
+  /**
+   * Validates that a package contains all required components
+   */
+  private validatePackage(pkg: Packages): boolean {
+    if (!pkg) return false;
+    
+    // Check that all components exist
+    if (!pkg.react || !pkg.reactDOM || !pkg.excalidrawLib) {
+      return false;
+    }
+    
+    // Verify that excalidrawLib has essential methods
+    const lib = pkg.excalidrawLib;
+    return (
+      typeof lib === 'object' && 
+      lib !== null &&
+      typeof lib.restore === 'function' && 
+      typeof lib.exportToSvg === 'function'
+    );
+  }
+
+  /**
+   * Store a package for a specific window
+   */
   public setPackage(window: Window, pkg: Packages) {
-    this.packageMap.set(window, pkg);
+    if (this.validatePackage(pkg)) {
+      this.packageMap.set(window, pkg);
+      
+      // Update fallback if we don't have one
+      if (!this.fallbackPackage) {
+        this.fallbackPackage = pkg;
+      }
+    } else {
+      errorHandler.handleError(
+        "Attempted to set invalid package", 
+        "PackageManager.setPackage"
+      );
+    }
   }
 
   public getPackageMap() {
     return this.packageMap;
   }
 
-  public getPackage(win:Window):Packages {
-    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.getPackage, `ExcalidrawPlugin.getPackage`, win);
+  /**
+   * Gets a package for a window, creating it if necessary
+   * with robust error handling
+   */
+  public getPackage(win: Window): Packages {
+    try {
+      if ((process.env.NODE_ENV === 'development') && DEBUGGING) {
+        debug(this.getPackage, `PackageManager.getPackage`, win);
+      }
 
-    if(this.packageMap.has(win)) {
-      return this.packageMap.get(win);
+      // Return existing package if available
+      if (this.packageMap.has(win)) {
+        const pkg = this.packageMap.get(win);
+        if (this.validatePackage(pkg)) {
+          return pkg;
+        }
+        // If package exists but is invalid, delete it so we can recreate it
+        this.packageMap.delete(win);
+      }
+
+      // Create new package
+      return errorHandler.wrapWithTryCatch(() => {
+        // Use safe evaluation to load packages in the window context
+        const evalResult = errorHandler.safeEval<{react: typeof React, reactDOM: typeof ReactDOM, excalidrawLib: typeof ExcalidrawLib}>(
+          `(function() {
+            ${REACT_PACKAGES + this.EXCALIDRAW_PACKAGE};
+            return {react: React, reactDOM: ReactDOM, excalidrawLib: ExcalidrawLib};
+          })()`,
+          "PackageManager.getPackage - package evaluation",
+          win
+        );
+        
+        if (!evalResult || !this.validatePackage(evalResult)) {
+          throw new Error("Failed to create valid package");
+        }
+        
+        const newPackage = {
+          react: evalResult.react,
+          reactDOM: evalResult.reactDOM,
+          excalidrawLib: evalResult.excalidrawLib
+        };
+        
+        this.packageMap.set(win, newPackage);
+        return newPackage;
+      }, "PackageManager.getPackage", this.fallbackPackage);
+    } catch (error) {
+      errorHandler.handleError(error, "PackageManager.getPackage");
+      
+      // Return fallback package if available to prevent data loss
+      if (this.fallbackPackage) {
+        return this.fallbackPackage;
+      }
+      
+      // If no fallback, throw error to prevent undefined behavior
+      throw new Error("Failed to get package and no fallback available");
     }
-
-    const {react:r, reactDOM:rd, excalidrawLib:e} = win.eval.call(win,
-      `(function() {
-        ${REACT_PACKAGES + this.EXCALIDRAW_PACKAGE};
-        return {react:React,reactDOM:ReactDOM,excalidrawLib:ExcalidrawLib};
-       })()`);
-    this.packageMap.set(win,{react:r, reactDOM:rd, excalidrawLib:e});
-    return {react:r, reactDOM:rd, excalidrawLib:e};
   }
 
   public deletePackage(win: Window) {
-    const { react, reactDOM, excalidrawLib } = this.getPackage(win);
+    try {
+      const pkg = this.packageMap.get(win);
+      if (!pkg) return;
 
-    if (win.ExcalidrawLib === excalidrawLib) {
-      excalidrawLib.destroyObsidianUtils();
-      delete win.ExcalidrawLib;
+      const { react, reactDOM, excalidrawLib } = pkg;
+
+      if (win.ExcalidrawLib === excalidrawLib) {
+        // Safely clean up resources
+        errorHandler.wrapWithTryCatch(() => {
+          if (excalidrawLib && typeof excalidrawLib.destroyObsidianUtils === 'function') {
+            excalidrawLib.destroyObsidianUtils();
+          }
+          delete win.ExcalidrawLib;
+        }, "PackageManager.deletePackage - cleanup ExcalidrawLib");
+      }
+
+      if (win.React === react) {
+        errorHandler.wrapWithTryCatch(() => {
+          Object.keys(win.React || {}).forEach((key) => {
+            delete win.React[key];
+          });
+          delete win.React;
+        }, "PackageManager.deletePackage - cleanup React");
+      }
+
+      if (win.ReactDOM === reactDOM) {
+        errorHandler.wrapWithTryCatch(() => {
+          Object.keys(win.ReactDOM || {}).forEach((key) => {
+            delete win.ReactDOM[key];
+          });
+          delete win.ReactDOM;
+        }, "PackageManager.deletePackage - cleanup ReactDOM");
+      }
+
+      this.packageMap.delete(win);
+    } catch (error) {
+      errorHandler.handleError(error, "PackageManager.deletePackage");
     }
-
-    if (win.React === react) {
-      Object.keys(win.React).forEach((key) => {
-        delete win.React[key];
-      });
-      delete win.React;
-    }
-
-    if (win.ReactDOM === reactDOM) {
-      Object.keys(win.ReactDOM).forEach((key) => {
-        delete win.ReactDOM[key];
-      });
-      delete win.ReactDOM;
-    }
-
-    this.packageMap.delete(win);
   }
 
   public setExcalidrawPackage(pkg: string) {
@@ -82,16 +207,22 @@ export class PackageManager {
   }
 
   public destroy() {
-    REACT_PACKAGES = "";
-    Object.values(this.packageMap).forEach((p: Packages) => {
-      delete p.excalidrawLib;
-      delete p.reactDOM;
-      delete p.react;
-    });
-    this.packageMap.clear();
-    this.EXCALIDRAW_PACKAGE = "";
-    react = null;
-    reactDOM = null;
-    excalidrawLib = null;
+    try {
+      REACT_PACKAGES = "";
+      
+      Array.from(this.packageMap.entries()).forEach(([win, p]) => {
+        this.deletePackage(win);
+      });
+      
+      this.packageMap.clear();
+      this.EXCALIDRAW_PACKAGE = "";
+      this.fallbackPackage = null;
+      
+      react = null;
+      reactDOM = null;
+      excalidrawLib = null;
+    } catch (error) {
+      errorHandler.handleError(error, "PackageManager.destroy");
+    }
   }
 }

src/core/settings.ts

@@ -18,6 +18,7 @@ import { DynamicStyle, GridSettings } from "src/types/types";
 import { PreviewImageType } from "src/types/utilTypes";
 import { setDynamicStyle } from "src/utils/dynamicStyling";
 import {
+  createOrOverwriteFile,
   getDrawingFilename,
   getEmbedFilename,
 } from "src/utils/fileUtils";
@@ -43,7 +44,6 @@ import { HotkeyEditor } from "src/shared/Dialogs/HotkeyEditor";
 import { getExcalidrawViews } from "src/utils/obsidianUtils";
 import { createSliderWithText } from "src/utils/sliderUtils";
 import { PDFExportSettingsComponent, PDFExportSettings } from "src/shared/Dialogs/PDFExportSettingsComponent";
-import de from "src/lang/locale/de";
 
 export interface ExcalidrawSettings {
   disableDoubleClickTextEditing: boolean;
@@ -2914,7 +2914,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
               : this.plugin.settings.startupScriptPath + ".md");
             let f = this.app.vault.getAbstractFileByPath(startupPath);
             if(!f) {
-              f = await this.app.vault.create(startupPath, startupScript());  
+              f = await createOrOverwriteFile(this.app, startupPath, startupScript());
             }
             startupScriptButton.setButtonText(t("STARTUP_SCRIPT_BUTTON_OPEN"));
             this.app.workspace.openLinkText(f.path,"",true);

src/lang/locale/en.ts

@@ -158,6 +158,8 @@ export default {
   CONVERT_FILE: "Convert to new format",
   BACKUP_AVAILABLE: "We encountered an error while loading your drawing. This might have occurred if Obsidian unexpectedly closed during a save operation. For example, if you accidentally closed Obsidian on your mobile device while saving.<br><br><b>GOOD NEWS:</b> Fortunately, a local backup is available. However, please note that if you last modified this drawing on a different device (e.g., tablet) and you are now on your desktop, that other device likely has a more recent backup.<br><br>I recommend trying to open the drawing on your other device first and restore the backup from its local storage.<br><br>Would you like to load the backup?",
   BACKUP_RESTORED: "Backup restored",
+  BACKUP_SAVE_AS_FILE: "This drawing is empty, but a larger backup is available. Would you like to save it as a new file and open it in a new tab?",
+  DO_YOU_WANT_TO_DELETE_THE_BACKUP: "The backup was NOT saved as a restored file in your vault. Do you want to delete the backup data?",
   CACHE_NOT_READY: "I apologize for the inconvenience, but an error occurred while loading your file.<br><br><mark>Having a little patience can save you a lot of time...</mark><br><br>The plugin has a backup cache, but it appears that you have just started Obsidian. Initializing the Backup Cache may take some time, usually up to a minute or more depending on your device's performance. You will receive a notification in the top right corner when the cache initialization is complete.<br><br>Please press OK to attempt loading the file again and check if the cache has finished initializing. If you see a completely empty file behind this message, I recommend waiting until the backup cache is ready before proceeding. Alternatively, you can choose Cancel to manually correct your file.<br>",
   OBSIDIAN_TOOLS_PANEL: "Obsidian Tools Panel",
   ERROR_SAVING_IMAGE: "Unknown error occurred while fetching the image. It could be that for some reason the image is not available or rejected the fetch request from Obsidian",

src/shared/Dialogs/ExportDialog.ts

@@ -10,7 +10,7 @@ import { PageOrientation, PageSize, PDFPageAlignment, PDFPageMarginString, expor
 import { t } from "src/lang/helpers";
 import { PDFExportSettings, PDFExportSettingsComponent } from "./PDFExportSettingsComponent";
 import { captureScreenshot } from "src/utils/screenshot";
-import { createOrOverwriteFile, getIMGFilename } from "src/utils/fileUtils";
+import { exportImageToFile, getIMGFilename } from "src/utils/fileUtils";
 
 
 
@@ -397,7 +397,7 @@ export class ExportDialog extends Modal {
     });
     bPNGVault.onclick = () => {
       if(isScreenshot) {
-        //allow dialot to close before taking screenshot
+        //allow dialog to close before taking screenshot
         setTimeout(async () => {
           const png = await captureScreenshot(this.view, {
             zoom: this.scale,
@@ -406,11 +406,11 @@ export class ExportDialog extends Modal {
             theme: this.theme
           });
           if(png) {
-            createOrOverwriteFile(this.app, getIMGFilename(this.view.file.path,"png"), png);
+            exportImageToFile(this.view, getIMGFilename(this.view.file.path,"png"), png, ".png");
           }
         });
       } else {
-        this.view.savePNG(this.view.getScene(this.isSelectedOnly));
+        this.view.savePNG({scene: this.view.getScene(this.isSelectedOnly)});
       }
       this.close();
     };
@@ -466,7 +466,7 @@ export class ExportDialog extends Modal {
       cls: "excalidraw-export-button" 
     });
     bSVGVault.onclick = () => {
-      this.view.saveSVG(this.view.getScene(this.isSelectedOnly));
+      this.view.saveSVG({scene: this.view.getScene(this.isSelectedOnly)});
       this.close();
     };
 

src/shared/Dialogs/Messages.ts

@@ -17,6 +17,36 @@ I build this plugin in my free time, as a labor of love. Curious about the philo
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://storage.ko-fi.com/cdn/kofi6.png?v=6" border="0" alt="Buy Me a Coffee at ko-fi.com"  height=45></a></div>
 `,
+"2.13.0":`
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/QzhyQb4JF3Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+
+## New
+- **Flexible Auto-Export Location:** Take control of where your auto-exported .png, .svg, and .excalidraw files are saved. Addressing a long-standing request, you can now define custom output paths using the new **Excalidraw Hooks**.
+  - Implement the \`onImageExportPathHook\` callback in your ExcalidrawAutomate startup script to control the *destination path*.
+    - Get the skeleton script via plugin settings or download it [here](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/refs/heads/master/src/constants/assets/startupScript.md).
+
+- **Control Auto-Export Trigger:** Use the \`onTriggerAutoexportHook\` in your startup script to decide *if* and *how* auto-export runs for a file, based on its properties or frontmatter, *before* the export path is determined.
+
+- **Improved "Open Excalidraw drawing":** The Command Palette command now searches the *entire Vault* for the matching Excalidraw file when used on an embedded .svg or .png, useful when exports are in different folders.
+
+- **Placeholder Files for New Embeds:** When embedding a new drawing as PNG/SVG via the Command Palette, empty placeholder files are now created immediately based on your auto-export setting. This ensures Obsidian correctly updates links if you rename the file soon after creation (when "Keep filenames in sync" is on).
+
+- **Paste Obsidian URLs into Excalidraw:** Pasting an Obsidian URL for an image or file into Excalidraw now inserts the associated image directly into the drawing.
+
+- **\`onImageFilePathHook\` Drag & Drop Support:** The \`onImageFilePathHook\` (for controlling location/filename of *embedded* files) is now triggered when dragging and dropping files into Excalidraw from outside Obsidian, matching the existing behavior for pasting.
+
+## New in ExcalidrawAutomate
+\`\`\`ts
+splitFolderAndFilename(filepath: string) : {
+    folderpath: string;
+    filename: string;
+    basename: string;
+    extension: string;
+  }
+\`\`\`
+`,
 "2.12.4":`
 ## Fixed
 - ExaliBrain did not render after the 2.12.3 update. [#2384](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2384)
@@ -271,160 +301,5 @@ function onImageFilePathHook: (data: {
   drawingFilePath: string;
 }) => string = null;  
 ${String.fromCharCode(96,96,96)}
-`,
-"2.7.5":`
-## Fixed
-- PDF export scenario described in [#2184](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2184)
-- Elbow arrows do not work within frames [#2187](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2187)
-- Embedding images into Excalidraw with areaRef links did not work as expected due to conflicting SVG viewbox and width and height values
-- Can't exit full-screen mode in popout windows using the Command Palette toggle action [#2188](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2188)
-- If the image mask extended beyond the image in "Mask and Crop" image mode, the mask got misaligned from the image.
-- PDF image embedding fixes that impacted some PDF files (not all):
-    - When cropping the PDF page in the scene (by double-clicking the image to crop), the size and position of the PDF cutout drifted.
-    - Using PDF++ there was a small offset in the position of the cutout in PDF++ and the image in Excalidraw.
- - Updated a number of scripts including Split Ellipse, Select Similar Elements, and Concatenate Lines
-
-## New in ExcalidrawAutomate
-${String.fromCharCode(96,96,96)}
-  /**
-   * Add, modify, or delete keys in element.customData and preserve existing keys.
-   * Creates customData={} if it does not exist.
-   * Takes the element id for an element in ea.elementsDict and the newData to add or modify.
-   * To delete keys set key value in newData to undefined. So {keyToBeDeleted:undefined} will be deleted.
-   * @param id
-   * @param newData 
-   * @returns undefined if element does not exist in elementsDict, returns the modified element otherwise.
-   */
-  public addAppendUpdateCustomData(id:string, newData: Partial<Record<string, unknown>>);
-${String.fromCharCode(96,96,96)}
-`,
-"2.7.4":`
-## Fixed
-- Regression from 2.7.3 where image fileId got overwritten in some cases
-- White flash when opening a dark drawing [#2178](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2178)
-`,
-"2.7.3":`
-<div class="excalidraw-videoWrapper"><div>
-<iframe src="https://www.youtube.com/embed/ISuORbVKyhQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div></div>
-
-## Fixed
-- Toggling image size anchoring on and off by modifying the image link did not update the image in the view until the user forced saved it or closed and opened the drawing again. This was a side-effect of the less frequent view save introduced in 2.7.1
-
-## New
-- **Shade Master Script**: A new script that allows you to modify the color lightness, hue, saturation, and transparency of selected Excalidraw elements, SVG images, and nested Excalidraw drawings. When a single image is selected, you can map colors individually. The original image remains unchanged, and a mapping table is added under ${String.fromCharCode(96)}## Embedded Files${String.fromCharCode(96)} for SVG and nested drawings. This helps maintain links between drawings while allowing different color themes.
-- New Command Palette Command: "Duplicate selected image with a different image ID". Creates a copy of the selected image with a new image ID. This allows you to add multiple color mappings to the same image. In the scene, the image will be treated as if a different image, but loaded from the same file in the Vault.
-
-## QoL Improvements
-- New setting under ${String.fromCharCode(96)}Embedding Excalidraw into your notes and Exporting${String.fromCharCode(96)} > ${String.fromCharCode(96)}Image Caching and rendering optimization${String.fromCharCode(96)}. You can now set the number of concurrent workers that render your embedded images. Increasing the number will increase the speed but temporarily reduce the responsiveness of your system in case of large drawings.
-- Moved pen-related settings under ${String.fromCharCode(96)}Excalidraw appearance and behavior${String.fromCharCode(96)} to their sub-heading called ${String.fromCharCode(96)}Pen${String.fromCharCode(96)}.
-- Minor error fixing and performance optimizations when loading and updating embedded images.
-- Color maps in ${String.fromCharCode(96)}## Embedded Files${String.fromCharCode(96)} may now include color keys "stroke" and "fill". If set, these will change the fill and stroke attributes of the SVG root element of the relevant file.
-
-## New in ExcalidrawAutomate
-${String.fromCharCode(96,96,96)}ts
-// Updates the color map of an SVG image element in the view. If a ColorMap is provided, it will be used directly.
-// If an SVGColorInfo is provided, it will be converted to a ColorMap.
-// The view will be marked as dirty and the image will be reset using the color map.
-updateViewSVGImageColorMap(
-  elements: ExcalidrawImageElement | ExcalidrawImageElement[],
-  colors: ColorMap | SVGColorInfo | ColorMap[] | SVGColorInfo[]
-): Promise<void>;
-
-// Retrieves the color map for an image element.
-// The color map contains information about the mapping of colors used in the image.
-// If the element already has a color map, it will be returned.
-getColorMapForImageElement(el: ExcalidrawElement): ColorMap;
-
-// Retrieves the color map for an SVG image element.
-// The color map contains information about the fill and stroke colors used in the SVG.
-// If the element already has a color map, it will be merged with the colors extracted from the SVG.
-getColorMapForImgElement(el: ExcalidrawElement): Promise<SVGColorInfo>;
-
-// Extracts the fill (background) and stroke colors from an Excalidraw file and returns them as an SVGColorInfo.
-getColosFromExcalidrawFile(file:TFile, img: ExcalidrawImageElement): Promise<SVGColorInfo>;
-
-// Extracts the fill and stroke colors from an SVG string and returns them as an SVGColorInfo.
-getColorsFromSVGString(svgString: string): SVGColorInfo;
-
-// upgraded the addImage function.
-// 1. It now accepts an object as the input parameter, making your scripts more readable
-// 2. AddImageOptions now includes colorMap as an optional parameter, this will only have an effect in case of SVGs and nested Excalidraws
-// 3. The API function is backwards compatible, but I recommend new implementations to use the object based input
-addImage(opts: AddImageOptions}): Promise<string>;
-
-interface AddImageOptions {
-  topX: number;
-  topY: number;
-  imageFile: TFile | string;
-  scale?: boolean; 
-  anchor?: boolean;
-  colorMap?: ColorMap;
-}
-
-type SVGColorInfo = Map<string, {
-  mappedTo: string;
-  fill: boolean;
-  stroke: boolean;
-}>;
-
-interface ColorMap {
-  [color: string]: string;
-};
-${String.fromCharCode(96,96,96)}
-`,
-"2.7.2":`
-## Fixed
-- The plugin did not load on **iOS 16 and older**. [#2170](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2170)
-- Added empty line between ${String.fromCharCode(96)}# Excalidraw Data${String.fromCharCode(96)} and ${String.fromCharCode(96)}## Text Elements${String.fromCharCode(96)}. This will now follow **correct markdown linting**. [#2168](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2168)
-- Adding an **embeddable** to view did not **honor the element background and element stroke colors**, even if it was configured in plugin settings. [#2172](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2172)
-- **Deconstruct selected elements script** did not copy URLs and URIs for images embedded from outside Obsidian. Please update your script from the script library. 
-- When **rearranging tabs in Obsidian**, e.g. having two tabs side by side, and moving one of them to another location, if the tab was an Excalidraw tab, it appeared as non-responsive after the move, until the tab was resized.
-
-## Source Code Refactoring
-- Updated filenames, file locations, and file name letter-casing across the project
-- Extracted onDrop, onDragover, etc. handlers to DropManger in ExcalidrawView
-`,
-"2.7.1":`
-## Fixed
-- Deleting excalidraw file from file system while it is open in fullscreen mode in Obsidian causes Obsidian to be stuck in full-screen view [#2161](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2161)
-- Chinese fonts are not rendered in LaTeX statements [#2162](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2162)
-- Since Electron 32 (newer Obsidian Desktop installers) drag and drop links from Finder or OS File Explorer did not work. [Electron breaking change](https://www.electronjs.org/docs/latest/breaking-changes#removed-filepath). This is now fixed
-- Addressed unnecessary image reloads when changing windows in Obsidian
-`,
-"2.7.0":`
-## Fixed
-- Various Markdown embeddable "fuzziness":  
-    - Fixed issues with appearance settings and edit mode toggling when single-click editing is enabled.  
-    - Ensured embeddable file editing no longer gets interrupted unexpectedly.  
-- **Hover Preview**: Disabled hover preview for back-of-the-note cards to reduce distractions.
-- **Settings Save**: Fixed an issue where plugin settings unnecessarily saved on every startup.
-
-## New Features
-- **Image Cropping Snaps to Objects**: When snapping is enabled in the scene, image cropping now aligns to nearby objects.  
-- **Session Persistence for Pen Mode**: Excalidraw remembers the last pen mode when switching between drawings within the same session.
-
-## Refactoring
-- **Mermaid Diagrams**: Excalidraw now uses its own Mermaid package, breaking future dependencies on Obsidian's Mermaid updates. This ensures stability and includes all fixes and improvements made to Excalidraw Mermaid since February 2024. The plugin file size has increased slightly, but this change significantly improves maintainability while remaining invisible to users.  
-- **MathJax Optimization**: MathJax (LaTeX equation SVG image generation) now loads only on demand, with the package compressed to minimize the startup and file size impact caused by the inclusion of Mermaid.  
-- **On-Demand Language Loading**: Non-English language files are now compressed and load only when needed, counterbalancing the increase in file size due to Mermaid and improving load speeds.  
-- **Codebase Restructuring**: Improved type safety by removing many ${String.fromCharCode(96)}//@ts-ignore${String.fromCharCode(96)} commands and enhancing modularity. Introduced new management classes: **CommandManager**, **EventManager**, **PluginFileManager**, **ObserverManager**, and **PackageManager**. Further restructuring is planned for upcoming releases to improve maintainability and stability.
-`,
-"2.6.8":`
-## New
-- **QoL improvements**:
-  - Obsidian-link search button in Element Link Editor.
-  - Add Any File now searches file aliases as well.
-  - Cosmetic changes to file search modals (display path, show file type icon).
-  - Text Element cursor-color matches the text color.
-- New script in script store: [Image Occlusion](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Image%20Occlusion.md) by [@TrillStones](https://github.com/TrillStones) 🙏
-
-## Fixed
-- Excalidraw icon on the **ribbon menu kept reappearing** every time you reopen Obsidian [#2115](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2115)
-- In pen mode, when **single-finger panning** is enabled, Excalidraw should still **allow actions with the mouse**.
-- When **editing a drawing in split mode** (drawing is on one side, markdown view is on the other), editing the markdown note sometimes causes the drawing to re-zoom and jump away from the selected area.
-- Hover-Editor compatibility resolved [2041](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2041)
--  ${String.fromCharCode(96)}ExcalidrawAutomate.create() ${String.fromCharCode(96)} will now correctly include the markdown text in templates above Excalidraw Data and below YAML front matter. This also fixes the same issue with the **Deconstruct Selected Element script**.
-
 `,
 };

src/shared/Dialogs/Prompt.ts

@@ -13,7 +13,7 @@ import ExcalidrawView from "../../view/ExcalidrawView";
 import ExcalidrawPlugin from "../../core/main";
 import { escapeRegExp, getLinkParts, sleep } from "../../utils/utils";
 import { getLeaf, openLeaf } from "../../utils/obsidianUtils";
-import { checkAndCreateFolder, splitFolderAndFilename } from "src/utils/fileUtils";
+import { createOrOverwriteFile } from "src/utils/fileUtils";
 import { KeyEvent, isWinCTRLorMacCMD } from "src/utils/modifierkeyHelper";
 import { t } from "src/lang/helpers";
 import { ExcalidrawElement, getEA } from "src/core";
@@ -792,10 +792,7 @@ export class NewFileActions extends Modal {
         if (!this.path.match(/\.md$/)) {
           this.path = `${this.path}.md`;
         }
-        const folderpath = splitFolderAndFilename(this.path).folderpath;
-        checkAndCreateFolder(folderpath);
-        const f = await this.app.vault.create(this.path, data);
-        return f;
+        return await createOrOverwriteFile(this.app, this.path, data);
       };
 
       if(this.sourceElement) {

src/shared/Dialogs/SuggesterInfo.ts

@@ -575,27 +575,6 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "Adds elements from elementsDict to the current view\nrepositionToCursor: default is false\nsave: default is true\nnewElementsOnTop: default is false, i.e. the new elements get to the bottom of the stack\nnewElementsOnTop controls whether elements created with ExcalidrawAutomate are added at the bottom of the stack or the top of the stack of elements already in the view\nNote that elements copied to the view with copyViewElementsToEAforEditing retain their position in the stack of elements in the view even if modified using EA",
     after: "",
   },
-  {
-    field: "onDropHook",
-    code: 'onDropHook(data: {ea: ExcalidrawAutomate, event: React.DragEvent<HTMLDivElement>, draggable: any, type: "file" | "text" | "unknown", payload: {files: TFile[], text: string,}, excalidrawFile: TFile, view: ExcalidrawView, pointerPosition: { x: number, y: number},}): boolean;',
-    desc: "If set Excalidraw will call this function onDrop events.\nA return of true will stop the default onDrop processing in Excalidraw.\n\ndraggable is the Obsidian draggable object\nfiles is the array of dropped files\nexcalidrawFile is the file receiving the drop event\nview is the excalidraw view receiving the drop.\npointerPosition is the pointer position on canvas at the time of drop.",
-    after: "",
-  },
-  {
-    field: "onImageFilePathHook",
-    code: `onImageFilePathHook: (data: {currentImageName: string; drawingFilePath: string;}): string;`,
-    desc: "If set, this callback is triggered when an image is being saved in Excalidraw.\n"
-      + "You can use this callback to customize the naming and path of pasted images to avoid\n"
-      + 'default names like "Pasted image 123147170.png" being saved in the attachments folder,\n'
-      + "and instead use more meaningful names based on the Excalidraw file or other criteria,\n"
-      + "plus save the image in a different folder.\n\n"
-      + "If the function returns null or undefined, the normal Excalidraw operation will continue\n"
-      + "with the excalidraw generated name and default path.\n"
-      + "If a filepath is returned, that will be used. Include the full Vault filepath and filename\n"
-      + "with the file extension.\n"
-      + "The currentImageName is the name of the image generated by excalidraw or provided during paste.",
-    after: "",
-  },
   {
     field: "mostRecentMarkdownSVG",
     code: "mostRecentMarkdownSVG: SVGSVGElement;",
@@ -917,6 +896,12 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
     desc: "Sets Excalidraw in the targetView to view-mode",
     after: "",
   },
+  {
+    field: "splitFolderAndFilename",
+    code: "splitFolderAndFilename(filepath: string): { folderpath: string; filename: string; basename: string; extension: string; }",
+    desc: "Splits a file path into its components.",
+    after: "",
+  },
   {
     field: "viewUpdateScene",
     code: "viewUpdateScene(scene:{elements?:ExcalidrawElement[],appState?: AppState,files?: BinaryFileData,captureUpdate?: 'IMMEDIATELY' | 'NEVER' | 'EVENTUALLY'},restore:boolean=false):void",

src/shared/ExcalidrawAutomate.ts

@@ -34,7 +34,7 @@ import {
   mermaidToExcalidraw,
   refreshTextDimensions,
 } from "src/constants/constants";
-import { blobToBase64, checkAndCreateFolder, getDrawingFilename, getExcalidrawEmbeddedFilesFiletree, getListOfTemplateFiles, getNewUniqueFilepath } from "src/utils/fileUtils";
+import { blobToBase64, checkAndCreateFolder, getDrawingFilename, getExcalidrawEmbeddedFilesFiletree, getListOfTemplateFiles, getNewUniqueFilepath, splitFolderAndFilename } from "src/utils/fileUtils";
 import {
   //debug,
   getImageSize,
@@ -87,6 +87,7 @@ import { _measureText, cloneElement, createPNG, createSVG, errorMessage, filterC
 import { exportToPDF, getMarginValue, getPageDimensions, PageDimensions, PageOrientation, PageSize, PDFExportScale, PDFPageProperties } from "src/utils/exportUtils";
 import { FrameRenderingOptions } from "src/types/utilTypes";
 import { CaptureUpdateAction } from "src/constants/constants";
+import { AutoexportConfig } from "src/types/excalidrawViewTypes";
 
 extendPlugins([
   HarmonyPlugin,
@@ -317,6 +318,19 @@ export class ExcalidrawAutomate {
     return await checkAndCreateFolder(folderpath);
   }
 
+  /**
+   * @param filepath - The file path to split into folder and filename.
+   * @returns object containing folderpath, filename, basename, and extension.
+   */
+  public splitFolderAndFilename(filepath: string) : {
+    folderpath: string;
+    filename: string;
+    basename: string;
+    extension: string;
+  } {
+    return splitFolderAndFilename(filepath);
+  }
+
   /**
    * Generates a unique filepath by appending a number if file already exists.
    * @param {string} filename - Base filename.
@@ -2167,7 +2181,7 @@ export class ExcalidrawAutomate {
   };
   targetView: ExcalidrawView = null; //the view currently edited
   /**
-   * Sets the target view for EA. All the view operations and the access to Excalidraw API will be performend on this view.
+   * Sets the target view for EA. All the view operations and the access to Excalidraw API will be performed on this view.
    * If view is null or undefined, the function will first try setView("active"), then setView("first").
    * @param {ExcalidrawView | "first" | "active"} [view] - The view to set as target.
    * @returns {ExcalidrawView} The target view.
@@ -2848,7 +2862,86 @@ export class ExcalidrawAutomate {
    onImageFilePathHook: (data: {
     currentImageName: string; // Excalidraw generated name of the image, or the name received from the file system.
     drawingFilePath: string; // The full filepath of the Excalidraw file where the image is being used.
-  }) => string = null;  
+  }) => string | null = null;  
+
+  /**
+   * If set, this callback is triggered when the Excalidraw image is being exported to 
+   * .svg, .png, or .excalidraw.
+   * You can use this callback to customize the naming and path of the images. This allows
+   * you to place images into an assets folder.
+   * 
+   * If the function returns null or undefined, the normal Excalidraw operation will continue
+   * with the currentImageName and in the same folder as the Excalidraw file
+   * If a filepath is returned, that will be used. Include the full Vault filepath and filename
+   * with the file extension.
+   * If the new folder path does not exist, excalidraw will create it - you don't need to worry about that.
+   * ⚠️⚠️If an image already exists on the path, that will be overwritten. When returning
+   * your own image path, you must take care of unique filenames (if that is a requirement) ⚠️⚠️
+   * The current image name is the name generated by Excalidraw:
+   * - my-drawing.png
+   * - my-drawing.svg
+   * - my-drawing.excalidraw
+   * - my-drawing.dark.svg
+   * - my-drawing.light.svg
+   * - my-drawing.dark.png
+   * - my-drawing.light.png
+   * 
+   * @param data - An object containing the following properties:
+   *   @property {string} exportFilepath - Default export filepath for the image.
+   *   @property {string} exportExtension - The file extension of the export (e.g., .dark.svg, .png, .excalidraw).
+   *   @property {string} excalidrawFile - TFile: The Excalidraw file being exported.
+   *   @property {string} oldExcalidrawPath - If action === "move" The old path of the Excalidraw file, else undefined
+   *   @property {string} action - The action being performed: "export", "move", or "delete". move and delete reference the change to the Excalidraw file.
+   * 
+   * @returns {string} - The new filepath for the image including full vault path and extension.
+   * 
+   * Example usage:
+   * ```
+   * onImageFilePathHook: (data) => {
+   *   const { currentImageName, drawingFilePath, frontmatter } = data;
+   *   // Generate a new filepath based on the drawing file name and other criteria
+   *   const ext = currentImageName.split('.').pop();
+   *   if(frontmatter && frontmatter["my-custom-field"]) {
+   *   }
+   *   return `${drawingFileName} - ${currentImageName || 'image'}.${ext}`;
+   * }
+   * ```
+   */
+  onImageExportPathHook: (data: {
+    exportFilepath: string; // Default export filepath for the image.
+    exportExtension: string; // The file extension of the export (e.g., .dark.svg, .png, .excalidraw).
+    excalidrawFile: TFile; // The Excalidraw file being exported.
+    oldExcalidrawPath? : string; // The old path of the Excalidraw file, if it was moved/renamed. 
+    action: "export" | "move" | "delete";
+  }) => string | null = null;
+
+  /**
+   * Excalidraw supports auto-export of Excalidraw files to .png, .svg, and .excalidraw formats.
+   * 
+   * Auto-export of Excalidraw files can be controlled at multiple levels.
+   * 1) In plugin settings where you can set up default auto-export applicable to all your Excalidraw files.
+   * 2) However, if you do not want to auto-export every file, you can also control auto-export
+   *    at the file level using the 'excalidraw-autoexport' frontmatter property.
+   * 3) This hook gives you an additional layer of control over the auto-export process.
+   * 
+   * This hook is triggered when an Excalidraw file is being saved.
+   * 
+   * interface AutoexportConfig {
+   *   png: boolean; // Whether to auto-export to PNG
+   *   svg: boolean; // Whether to auto-export to SVG
+   *   excalidraw: boolean; // Whether to auto-export to Excalidraw format
+   *   theme: "light" | "dark" | "both"; // The theme to use for the export
+   * }
+   *
+   * @param {Object} data - The data for the hook.
+   * @param {AutoexportConfig} data.autoexportConfig - The current autoexport configuration.
+   * @param {TFile} data.excalidrawFile - The Excalidraw file being auto-exported.
+   * @returns {AutoexportConfig | null} - Return a modified AutoexportConfig to override the export behavior, or null to use the default.
+   */
+  onTriggerAutoexportHook: (data: {
+    autoexportConfig: AutoexportConfig;
+    excalidrawFile: TFile; // The Excalidraw file being auto-exported
+  }) => AutoexportConfig | null = null;
 
   /**
    * if set, this callback is triggered, when an Excalidraw file is opened

src/shared/ExcalidrawData.ts

@@ -52,11 +52,10 @@ import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "..
 import { DEBUGGING, debug } from "../utils/debugHelper";
 import { Mutable } from "@zsviczian/excalidraw/types/common/src/utility-types";
 import { updateElementIdsInScene } from "../utils/excalidrawSceneUtils";
-import { checkAndCreateFolder, getNewUniqueFilepath, splitFolderAndFilename } from "../utils/fileUtils";
+import {  importFileToVault } from "../utils/fileUtils";
 import { t } from "../lang/helpers";
 import { displayFontMessage } from "../utils/excalidrawViewUtils";
 import { getPDFRect } from "../utils/PDFUtils";
-import { create } from "domain";
 
 type SceneDataWithFiles = SceneData & { files: BinaryFiles };
 
@@ -1547,37 +1546,15 @@ export class ExcalidrawData {
       }
     }
 
-    let hookFilepath:string;
-    const ea = this.view?.getHookServer();
-    if(ea?.onImageFilePathHook) {
-      hookFilepath = ea.onImageFilePathHook({
-        currentImageName: fname,
-        drawingFilePath: this.view?.file?.path,
-      })
-    }
-
-    let filepath:string;
-    if(hookFilepath) {
-      const {folderpath, filename} = splitFolderAndFilename(hookFilepath);
-      await checkAndCreateFolder(folderpath);
-      filepath = getNewUniqueFilepath(this.app.vault,filename,folderpath);
-    } else {
-      const x = await getAttachmentsFolderAndFilePath(this.app, this.file.path, fname);
-      filepath = getNewUniqueFilepath(this.app.vault,fname,x.folder);
-    }
-
     const arrayBuffer = await getBinaryFileFromDataURL(dataURL);
     if(!arrayBuffer) return null;
 
-    const file = await this.app.vault.createBinary(
-      filepath,
-      arrayBuffer,
-    );
+    const file = await importFileToVault(this.app, fname, arrayBuffer, this.file, this.view);
 
     const embeddedFile = new EmbeddedFile(
       this.plugin,
       this.file.path,
-      filepath,
+      file.path,
     );
     
     embeddedFile.setImage({

src/shared/ImageCache.ts

@@ -382,6 +382,25 @@ class ImageCache {
     store.put(data, filepath);
   }
 
+  public async removeBAKFromCache(filepath: string): Promise<void> {
+    if (!this.isReady()) {
+      return; // Database not initialized yet
+    }
+
+    const transaction = this.db.transaction(this.backupStoreName, "readwrite");
+    const store = transaction.objectStore(this.backupStoreName);
+    
+    return new Promise<void>((resolve, reject) => {
+      const request = store.delete(filepath);
+      request.onsuccess = () => {
+        resolve();
+      };
+      request.onerror = () => {
+        reject(new Error(`Failed to remove backup file with key: ${filepath}`));
+      };
+    });
+  }
+
   public async clearImageCache(): Promise<void> {
     if (!this.isReady()) {
       return; // Database not initialized yet

src/types/excalidrawLib.d.ts

@@ -1,7 +1,7 @@
 import { RestoredDataState } from "@zsviczian/excalidraw/types/excalidraw/data/restore";
 import { ImportedDataState } from "@zsviczian/excalidraw/types/excalidraw/data/types";
 import { BoundingBox } from "@zsviczian/excalidraw/types/element/src";
-import { ElementsMap, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawFrameLikeElement, ExcalidrawTextContainer, ExcalidrawTextElement, FontFamilyValues, FontString, NonDeleted, NonDeletedExcalidrawElement, Theme } from "@zsviczian/excalidraw/types/element/src/types";
+import { ElementsMap, ExcalidrawBindableElement, ExcalidrawElement, ExcalidrawFrameElement, ExcalidrawFrameLikeElement, ExcalidrawTextContainer, ExcalidrawTextElement, FontFamilyValues, FontString, NonDeleted, NonDeletedExcalidrawElement, OrderedExcalidrawElement, Theme } from "@zsviczian/excalidraw/types/element/src/types";
 import { FontMetadata } from "@zsviczian/excalidraw/types/common/src";
 import { AppState, BinaryFiles, DataURL, GenerateDiagramToCode, Zoom } from "@zsviczian/excalidraw/types/excalidraw/types";
 import { Mutable } from "@zsviczian/excalidraw/types/common/src/utility-types";
@@ -231,5 +231,7 @@ declare namespace ExcalidrawLib {
   function safelyParseJSON (json: string): Record<string, any> | null;
   function loadSceneFonts(elements: NonDeletedExcalidrawElement[]): Promise<void>;
   function loadMermaid(): Promise<any>;
+  function syncInvalidIndices(elements: readonly ExcalidrawElement[]): OrderedExcalidrawElement[];
+  function syncMovedIndices(elements: readonly ExcalidrawElement[], movedElements: ElementsMap): OrderedExcalidrawElement[];
 }
 

src/types/excalidrawViewTypes.ts

@@ -22,6 +22,13 @@ export interface EmbeddableLeafRef {
   editNode?: Function;
 }
 
+export interface AutoexportConfig {
+  png: boolean; // Whether to auto-export to PNG
+  svg: boolean; // Whether to auto-export to SVG
+  excalidraw: boolean; // Whether to auto-export to Excalidraw format
+  theme: "light" | "dark" | "both"; // The theme to use for the export
+}
+
 export interface ViewSemaphores {
   warnAboutLinearElementLinkClick: boolean;
   //flag to prevent overwriting the changes the user makes in an embeddable view editing the back side of the drawing

src/utils/ErrorHandler.ts

@@ -0,0 +1,137 @@
+import { Notice } from "obsidian";
+import { debug, DEBUGGING } from "./debugHelper";
+
+/**
+ * Centralized error handling for the Excalidraw plugin
+ */
+export class ErrorHandler {
+  private static instance: ErrorHandler;
+  private errorLog: Array<{error: Error, context: string, timestamp: number}> = [];
+  private errorNoticeTimeout: number = 10000; // 10 seconds
+  private maxLogEntries: number = 100;
+  
+  private constructor() {}
+  
+  /**
+   * Get singleton instance of ErrorHandler
+   */
+  public static getInstance(): ErrorHandler {
+    if (!ErrorHandler.instance) {
+      ErrorHandler.instance = new ErrorHandler();
+    }
+    return ErrorHandler.instance;
+  }
+
+  /**
+   * Handles errors consistently across the plugin
+   * @param error The error object
+   * @param context Context information about where the error occurred
+   * @param showNotice Whether to show a user-facing notice
+   * @param timeout How long to show the notice (in ms)
+   */
+  public handleError(
+    error: Error | string, 
+    context: string, 
+    showNotice = true,
+    timeout?: number
+  ): void {
+    const errorObj = typeof error === 'string' ? new Error(error) : error;
+    
+    // Log to console with better formatting
+    console.error(`[Excalidraw Error] in ${context}:`, errorObj);
+    
+    // Add to error log with timestamp
+    this.errorLog.push({
+      error: errorObj,
+      context,
+      timestamp: Date.now()
+    });
+    
+    // Trim log if it gets too large
+    if (this.errorLog.length > this.maxLogEntries) {
+      this.errorLog = this.errorLog.slice(this.errorLog.length - this.maxLogEntries);
+    }
+    
+    // Show notice to user if required
+    if (showNotice) {
+      const formattedError = this.formatErrorForUser(errorObj, context);
+      new Notice(formattedError, timeout || this.errorNoticeTimeout);
+    }
+
+    // Debug output if debugging is enabled
+    if ((process.env.NODE_ENV === 'development') && DEBUGGING) {
+      debug(this.handleError, `ErrorHandler.handleError: ${context}`, errorObj);
+    }
+  }
+
+  /**
+   * Safely evaluates code with error handling
+   * @param code The code to evaluate
+   * @param context The context where evaluation is happening
+   * @param win The window object for evaluation context
+   * @param fallback Optional fallback value if evaluation fails
+   */
+  public safeEval<T>(code: string, context: string, win: Window, fallback?: T): T {
+    try {
+      return win.eval.call(win, code) as T;
+    } catch (error) {
+      this.handleError(error, `SafeEval in ${context}`);
+      if (fallback !== undefined) {
+        return fallback;
+      }
+      throw error; // Re-throw if no fallback provided
+    }
+  }
+
+  /**
+   * Wraps a function with try/catch and error handling
+   * @param fn Function to wrap
+   * @param context Context for error reporting
+   * @param fallback Optional fallback value if function fails
+   */
+  public wrapWithTryCatch<T>(fn: () => T, context: string, fallback?: T): T {
+    try {
+      return fn();
+    } catch (error) {
+      this.handleError(error, context);
+      if (fallback !== undefined) return fallback;
+      throw error; // Re-throw if no fallback provided
+    }
+  }
+
+  /**
+   * Format error message for user-facing notifications
+   */
+  private formatErrorForUser(error: Error, context: string): string {
+    // Shorten and simplify the message for users
+    let message = error.message;
+    
+    // Special handling for common error types
+    if (message.includes("Cannot read properties of undefined")) {
+      message = "A required object was not available. This might be due to a plugin loading issue.";
+    } else if (message.includes("is not a function")) {
+      message = "A required function was not available. This might be due to a plugin version mismatch.";
+    } else if (message.length > 100) {
+      // Truncate very long messages
+      message = message.substring(0, 100) + "...";
+    }
+    
+    return `Excalidraw Error: ${message} (in ${context})`;
+  }
+
+  /**
+   * Get recent errors for debugging
+   */
+  public getErrorLog(): Array<{error: Error, context: string, timestamp: number}> {
+    return [...this.errorLog];
+  }
+
+  /**
+   * Clear error log
+   */
+  public clearErrorLog(): void {
+    this.errorLog = [];
+  }
+}
+
+export const errorHandler = ErrorHandler.getInstance();

src/utils/excalidrawAutomateUtils.ts

@@ -456,12 +456,16 @@ export const updateElementLinksToObsidianLinks = ({elements, hostFile}:{
       }
       let link = EXCALIDRAW_PLUGIN.app.getObsidianUrl(file);
       if(window.ExcalidrawAutomate?.onUpdateElementLinkForExportHook) {
-        link = window.ExcalidrawAutomate.onUpdateElementLinkForExportHook({
-          originalLink: el.link,
-          obsidianLink: link,
-          linkedFile: file,
-          hostFile: hostFile
-       });
+        try {
+          link = window.ExcalidrawAutomate.onUpdateElementLinkForExportHook({
+            originalLink: el.link,
+            obsidianLink: link,
+            linkedFile: file,
+            hostFile: hostFile
+          }) ?? link;
+        } catch (e) {
+          errorlog({where: "excalidrawAutomateUtils.updateElementLinksToObsidianLinks", fn: window.ExcalidrawAutomate.onUpdateElementLinkForExportHook, error: e});
+        }
       }
       const newElement: Mutable<ExcalidrawElement> = cloneElement(el);
       newElement.link = link;

src/utils/fileUtils.ts

@@ -1,12 +1,12 @@
 import { DataURL } from "@zsviczian/excalidraw/types/excalidraw/types";
-import { App, loadPdfJs, normalizePath, Notice, requestUrl, RequestUrlResponse, TAbstractFile, TFile, TFolder, Vault } from "obsidian";
+import { App, loadPdfJs, MetadataCache, normalizePath, Notice, requestUrl, RequestUrlResponse, TAbstractFile, TFile, TFolder, Vault } from "obsidian";
 import { DEVICE, EXCALIDRAW_PLUGIN, FRONTMATTER_KEYS, URLFETCHTIMEOUT } from "src/constants/constants";
 import { IMAGE_MIME_TYPES, MimeType } from "../shared/EmbeddedFileLoader";
 import { ExcalidrawSettings } from "src/core/settings";
 import { errorlog, getDataURL } from "./utils";
 import ExcalidrawPlugin from "src/core/main";
-import { ANNOTATED_PREFIX, CROPPED_PREFIX } from "./carveout";
 import { getAttachmentsFolderAndFilePath } from "./obsidianUtils";
+import ExcalidrawView from "src/view/ExcalidrawView";
 
 /**
  * Splits a full path including a folderpath and a filename into separate folderpath and filename components
@@ -494,7 +494,55 @@ export const hasExcalidrawEmbeddedImagesTreeChanged = (sourceFile: TFile, mtime:
   return fileList.some(f=>f.stat.mtime > mtime);
 }
 
+export async function exportImageToFile(view: ExcalidrawView, path: string, content: string | ArrayBuffer | Blob, extension: string): Promise<TFile> {
+  const ea = view?.getHookServer();
+  if(ea?.onImageExportPathHook) {
+    try {
+      path = ea.onImageExportPathHook({
+        exportFilepath: path,
+        exportExtension: extension,
+        excalidrawFile: view.file,
+        action: "export",
+      }) ?? path;
+    } catch (e) {
+      errorlog({where: "fileUtils.exportImageToFile", fn: ea.onImageExportPathHook, error: e});
+    }
+  }
+  return await createOrOverwriteFile(view.app, path, content);
+}
+
+export async function importFileToVault(app: App, fname: string, content: string | ArrayBuffer | Blob, excalidrawFile: TFile, view?: ExcalidrawView): Promise<TFile> {
+  let hookFilepath:string;
+  const ea = view?.getHookServer();
+  if(ea?.onImageFilePathHook) {
+    try {
+      hookFilepath = ea.onImageFilePathHook({
+        currentImageName: fname,
+        drawingFilePath: excalidrawFile.path,
+      })
+    } catch (e) {
+      errorlog({where: "fileUtils.importFileToVault", fn: ea.onImageFilePathHook, error: e});
+    }
+  }
+
+  let filepath:string;
+  if(hookFilepath) {
+    const {folderpath, filename} = splitFolderAndFilename(hookFilepath);
+    await checkAndCreateFolder(folderpath);
+    filepath = getNewUniqueFilepath(app.vault,filename,folderpath);
+  } else {
+    const {folder} = await getAttachmentsFolderAndFilePath(app, excalidrawFile.path, fname);
+    filepath = getNewUniqueFilepath(app.vault,fname,folder);
+  }
+
+  return await createOrOverwriteFile(app, filepath, content);
+}
+
 export async function createOrOverwriteFile(app: App, path: string, content: string | ArrayBuffer | Blob): Promise<TFile> {
+  const {folderpath} = splitFolderAndFilename(path);
+  if(folderpath && folderpath !== "/") {
+    await checkAndCreateFolder(folderpath);
+  }
   const file = app.vault.getAbstractFileByPath(normalizePath(path));
   if (content instanceof Blob) {
     content = await content.arrayBuffer();
@@ -514,4 +562,41 @@ export async function createOrOverwriteFile(app: App, path: string, content: str
   } else {
     return await app.vault.create(path, content);
   }
+}
+
+export async function createFileAndAwaitMetacacheUpdate(
+  app: App,
+  path: string,
+  content: string | ArrayBuffer | Blob,
+) : Promise<TFile> {
+  path = normalizePath(path);
+  let ready = false;
+  const extension = path.substring(path.lastIndexOf(".") + 1);
+
+  //metadataCache.on("changed", (file:TFile) => void) does not fire for non-markdown files
+  if(extension === "md") {
+    const metaCache: MetadataCache = app.metadataCache;
+    const handler = (file:TFile) => {
+      if(file.path === path) {
+        metaCache.off("changed", handler);
+        ready = true;
+      }
+    }
+    metaCache.on("changed", handler);
+
+    const file = await createOrOverwriteFile(app, path, content);
+
+    if(!file) {
+      ready = true; //if file is null, it means it was not created, so we can skip waiting
+      metaCache.off("changed", handler);
+    }
+
+    let attempts = 0;
+    while (!ready && attempts++ < 15) await sleep(50);
+    if(!ready) {
+      metaCache.off("changed", handler); //if we timed out, remove the handler
+    }
+    return file;
+  }
+  return await createOrOverwriteFile(app, path, content);
 }

src/utils/utils.ts

@@ -966,6 +966,41 @@ export function hyperlinkIsImage (data: string):boolean {
   return IMAGE_TYPES.contains(corelink.substring(corelink.lastIndexOf(".")+1));
 }
 
+export function getFilePathFromObsidianURL (data: string): string {
+  if(!data) return null;
+  if(!data.startsWith("obsidian://")) return null;
+  
+  try {
+    const url = new URL(data);
+    const fileParam = url.searchParams.get("file");
+    if(!fileParam) return null;
+    
+    return decodeURIComponent(fileParam);
+  } catch {
+    return null;
+  }
+}
+
+export function obsidianURLIsImage (data: string):boolean {
+  if(!data) return false;
+  if(!data.startsWith("obsidian://")) return false;
+  
+  try {
+    const url = new URL(data);
+    const fileParam = url.searchParams.get("file");
+    if(!fileParam) return false;
+    
+    const decodedFile = decodeURIComponent(fileParam);
+    const lastDotIndex = decodedFile.lastIndexOf(".");
+    if(lastDotIndex === -1) return false;
+    
+    const extension = decodedFile.substring(lastDotIndex + 1);
+    return IMAGE_TYPES.contains(extension);
+  } catch {
+    return false;
+  }
+}
+
 export function hyperlinkIsYouTubeLink (link:string): boolean { 
   return isHyperLink(link) &&
   (link.startsWith("https://youtu.be") || link.startsWith("https://www.youtube.com") || link.startsWith("https://youtube.com") || link.startsWith("https//www.youtu.be")) &&

src/view/ExcalidrawView.ts

@@ -56,6 +56,7 @@ import {
   MD_EX_SECTIONS,
   refreshTextDimensions,
   getContainerElement,
+  syncInvalidIndices,
 } from "../constants/constants";
 import ExcalidrawPlugin from "../core/main";
 import { ExcalidrawAutomate } from "../shared/ExcalidrawAutomate";
@@ -78,8 +79,10 @@ import {
 } from "../shared/ExcalidrawData";
 import {
   checkAndCreateFolder,
+  createFileAndAwaitMetacacheUpdate,
   createOrOverwriteFile,
   download,
+  exportImageToFile,
   getDataURLFromURL,
   getIMGFilename,
   getMimeType,
@@ -98,16 +101,15 @@ import {
   getWithBackground,
   hasExportTheme,
   scaleLoadedImage,
-  svgToBase64,
   hyperlinkIsImage,
   getYouTubeThumbnailLink,
   isContainer,
   fragWithHTML,
   isMaskFile,
-  shouldEmbedScene,
   _getContainerElement,
   arrayToMap,
   addAppendUpdateCustomData,
+  getFilePathFromObsidianURL,
 } from "../utils/utils";
 import { cleanBlockRef, cleanSectionHeading, closeLeafView, getActivePDFPageNumberFromPDFView, getAttachmentsFolderAndFilePath, getLeaf, getParentOfClass, obsidianPDFQuoteWithRef, openLeaf, setExcalidrawView } from "../utils/obsidianUtils";
 import { splitFolderAndFilename } from "../utils/fileUtils";
@@ -148,7 +150,7 @@ import React from "react";
 import { diagramToHTML } from "../utils/matic";
 import { IS_WORKER_SUPPORTED } from "../shared/Workers/compression-worker";
 import { getPDFCropRect } from "../utils/PDFUtils";
-import { Position, ViewSemaphores } from "../types/excalidrawViewTypes";
+import { AutoexportConfig, Position, ViewSemaphores } from "../types/excalidrawViewTypes";
 import { DropManager } from "./managers/DropManager";
 import { ImageInfo } from "src/types/excalidrawAutomateTypes";
 import { exportPNG, exportPNGToClipboard, exportSVG, exportToPDF, getMarginValue, getPageDimensions, PageOrientation, PageSize } from "src/utils/exportUtils";
@@ -429,12 +431,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       0,
       this.file.path.lastIndexOf(".md"),
     )}.excalidraw`;
-    const file = this.app.vault.getAbstractFileByPath(normalizePath(filepath));
-    if (file && file instanceof TFile) {
-      this.app.vault.modify(file, JSON.stringify(scene, null, "\t"));
-    } else {
-      this.app.vault.create(filepath, JSON.stringify(scene, null, "\t"));
-    }
+    exportImageToFile(this, filepath, JSON.stringify(scene, null, "\t"), ".excalidraw");
   }
 
   public async exportExcalidraw(selectedOnly?: boolean) {
@@ -456,16 +453,18 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
         filename = `${filename}.excalidraw`;
         const folderpath = splitFolderAndFilename(this.file.path).folderpath;
         await checkAndCreateFolder(folderpath); //create folder if it does not exist
-        const fname = getNewUniqueFilepath(
+        const path = getNewUniqueFilepath(
           this.app.vault,
           filename,
           folderpath,
         );
-        this.app.vault.create(
-          fname,
+        const file = await exportImageToFile(
+          this,
+          path,
           JSON.stringify(this.getScene(), null, "\t"),
+          ".excalidraw",
         );
-        new Notice(`Exported to ${fname}`, 6000);
+        new Notice(`Exported to ${file?.name}`, 6000);
       });
       return;
     }
@@ -549,7 +548,11 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     );
   }
 
-  public async saveSVG(scene?: any, embedScene?: boolean) {
+  public async saveSVG(data:{scene?: any, embedScene?: boolean, autoexportConfig?: AutoexportConfig }) {
+    if(!data) {
+      data = {};
+    }
+    let { scene, embedScene, autoexportConfig } = data;
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.saveSVG, "ExcalidrawView.saveSVG", scene, embedScene);
     if (!scene) {
       if (!this.excalidrawAPI) {
@@ -565,14 +568,15 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       }
       //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2026
       const svgString = svg.outerHTML;
-      await createOrOverwriteFile(this.app, filepath, svgString);
+      await exportImageToFile(this, filepath, svgString,
+        theme === "dark" ? ".dark.svg" : theme === "light" ? ".light.svg" : ".svg");
     }
 
-    if(this.plugin.settings.autoExportLightAndDark) {
+    if(autoexportConfig?.theme ? autoexportConfig.theme  === "both" : this.plugin.settings.autoExportLightAndDark) {
       await exportImage(getIMGFilename(this.file.path, "dark.svg"),"dark");
       await exportImage(getIMGFilename(this.file.path, "light.svg"),"light");
     } else {
-      await exportImage(getIMGFilename(this.file.path, "svg"));
+      await exportImage(getIMGFilename(this.file.path, "svg"), autoexportConfig?.theme);
     } 
   }
 
@@ -672,7 +676,11 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     );
   }
 
-  public async savePNG(scene?: any, embedScene?: boolean) {
+  public async savePNG(data: {scene?: any, embedScene?: boolean, autoexportConfig?: AutoexportConfig}) {
+    if(!data) {
+      data = {};
+    }
+    let { scene, embedScene, autoexportConfig } = data;
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.savePNG, "ExcalidrawView.savePNG", scene, embedScene);
     if (!scene) {
       if (!this.excalidrawAPI) {
@@ -686,14 +694,15 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       if (!png) {
         return;
       }
-      await createOrOverwriteFile(this.app, filepath, png);
+      await exportImageToFile(this, filepath, png,
+        theme === "dark" ? ".dark.png" : theme === "light" ? ".light.png" : ".png");
     }
 
-    if(this.plugin.settings.autoExportLightAndDark) {
+    if(autoexportConfig?.theme ? autoexportConfig.theme  === "both" : this.plugin.settings.autoExportLightAndDark) {
       await exportImage(getIMGFilename(this.file.path, "dark.png"),"dark");
       await exportImage(getIMGFilename(this.file.path, "light.png"),"light");
     } else {
-      await exportImage(getIMGFilename(this.file.path, "png"));
+      await exportImage(getIMGFilename(this.file.path, "png"), autoexportConfig?.theme);
     }
   }
 
@@ -843,8 +852,10 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
           const plugin = this.plugin;
           const file = this.file;
           window.setTimeout(async ()=>{
+            if(!d) return;
             await plugin.app.vault.modify(file,d);
-            await imageCache.addBAKToCache(file.path,d);                        
+            //this is a shady edge case, don't scrifice the BAK file in case the drawing is empty
+            //await imageCache.addBAKToCache(file.path,d);                        
           },200)
           this.semaphores.saving = false;
           return;
@@ -860,7 +871,10 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
         //saving to backup with a delay in case application closes in the meantime, I want to avoid both save and backup corrupted.
         const path = this.file.path;
         const data = this.lastSavedData;
-        window.setTimeout(()=>imageCache.addBAKToCache(path,data),50);
+        //if the scene is empty, do not save to BAK (this could be due to a crash when the BAK should not be updated)
+        if(scene && scene.elements && scene.elements.length > 0) {
+          window.setTimeout(()=>imageCache.addBAKToCache(path,data),50);
+        }
         triggerReload = (this.lastSaveTimestamp === this.file.stat.mtime) &&
           !preventReload && forcesave;
         this.lastSaveTimestamp = this.file.stat.mtime;
@@ -878,22 +892,30 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1209 (added popout unload to the condition)
       if (!triggerReload && !this.semaphores.autosaving && (!this.semaphores.viewunload || this.semaphores.popoutUnload)) {
         const autoexportPreference = this.excalidrawData.autoexportPreference;
-        if (
-          (autoexportPreference === AutoexportPreference.inherit && this.plugin.settings.autoexportSVG) ||
-          autoexportPreference === AutoexportPreference.both || autoexportPreference === AutoexportPreference.svg
-        ) {
-          this.saveSVG();
+        let autoexportConfig: AutoexportConfig = {
+          svg: (autoexportPreference === AutoexportPreference.inherit && this.plugin.settings.autoexportSVG) ||
+            autoexportPreference === AutoexportPreference.both || autoexportPreference === AutoexportPreference.svg,
+          png: (autoexportPreference === AutoexportPreference.inherit && this.plugin.settings.autoexportPNG) ||
+            autoexportPreference === AutoexportPreference.both || autoexportPreference === AutoexportPreference.png,
+          excalidraw: !this.compatibilityMode && this.plugin.settings.autoexportExcalidraw,
+          theme: this.plugin.settings.autoExportLightAndDark ? "both" : this.getViewExportTheme() as "dark" | "light",
         }
-        if (
-          (autoexportPreference === AutoexportPreference.inherit && this.plugin.settings.autoexportPNG) ||
-          autoexportPreference === AutoexportPreference.both || autoexportPreference === AutoexportPreference.png
-        ) {
-          this.savePNG();
+        if (this.getHookServer().onTriggerAutoexportHook) {
+          try {
+            autoexportConfig = this.getHookServer().onTriggerAutoexportHook({
+              excalidrawFile: this.file, autoexportConfig}) ?? autoexportConfig;
+          } catch (e) {
+            errorlog({where: "ExcalidrawView.save", fn: this.getHookServer().onTriggerAutoexportHook, error: e});
+          }
         }
-        if (
-          !this.compatibilityMode &&
-          this.plugin.settings.autoexportExcalidraw
-        ) {
+        
+        if (autoexportConfig.svg) {
+          this.saveSVG({autoexportConfig});
+        }
+        if (autoexportConfig.png) {
+          this.savePNG({autoexportConfig});
+        }
+        if (autoexportConfig.excalidraw) {
           this.saveExcalidraw();
         }
       }
@@ -2448,6 +2470,26 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
           return;
         }
       }
+
+      if(this.excalidrawData.scene && this.excalidrawData.scene.elements && this.excalidrawData.scene.elements.length === 0) {
+        const backup = await imageCache.getBAKFromCache(this.file.path);
+        if(backup && backup.length > data.length) {
+          const confirmationPrompt = new ConfirmationPrompt(this.plugin,t("BACKUP_SAVE_AS_FILE"));
+          const confirmationResult = await confirmationPrompt.waitForClose;
+          if(confirmationResult) {
+            const path = getNewUniqueFilepath(this.app.vault, `${this.file.basename}.restored.${this.file.extension}`, this.file.parent.path);
+            const backupFile = await createFileAndAwaitMetacacheUpdate(this.app,path, backup);
+            await imageCache.removeBAKFromCache(this.file.path);
+            this.plugin.openDrawing(backupFile,"new-tab");
+          } else {
+            const confirmationPrompt = new ConfirmationPrompt(this.plugin,t("DO_YOU_WANT_TO_DELETE_THE_BACKUP"));
+            const confirmationResult = await confirmationPrompt.waitForClose;
+            if(confirmationResult) {
+              await imageCache.removeBAKFromCache(this.file.path);
+            }
+          }
+        }
+      }
       await this.loadDrawing(true);
 
       if(this.plugin.ea.onFileOpenHook) {
@@ -2997,10 +3039,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       const text:string[] = [];
       if(containerElement && containerElement.link) text.push(containerElement.link);
       text.push(textElement.rawText);
-      const f = await this.app.vault.create(
-        fname,
-        text.join("\n"),
-      );
+      const f = await createOrOverwriteFile(this.app, fname, text.join("\n"));
       if(f) {
         const ea:ExcalidrawAutomate = getEA(this);
         const elements = containerElement ? [textElement,containerElement] : [textElement];
@@ -4065,15 +4104,19 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
         .forEach(el=>(el as Mutable<ExcalidrawTextElement>).rawText = (el as ExcalidrawTextElement).originalText);
     };
     if(data && ea.onPasteHook) {
-      const res = ea.onPasteHook({
-        ea,
-        payload: data,
-        event,
-        excalidrawFile: this.file,
-        view: this,
-        pointerPosition: this.currentPosition,
-      });
-      if(typeof res === "boolean" && res === false) return false;
+      try {
+        const res = ea.onPasteHook({
+          ea,
+          payload: data,
+          event,
+          excalidrawFile: this.file,
+          view: this,
+          pointerPosition: this.currentPosition,
+        });
+        if(typeof res === "boolean" && res === false) return false;
+      } catch (e) {
+        errorlog({where: "ExcalidrawView.onPaste", fn: ea.onPasteHook, error: e});
+      }
     }
 
     // Disables Middle Mouse Button Paste Functionality on Linux
@@ -4091,6 +4134,12 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       this.addImageWithURL(data.text);
       return false;
     }
+
+    const obsidianURLFilePath = getFilePathFromObsidianURL(data?.text);
+    if(obsidianURLFilePath) {
+      this.addImageWithURL(obsidianURLFilePath);
+      return false;
+    }
     if(data && data.text && !this.modifierKeyDown.shiftKey) {
       const isCodeblock = Boolean(data.text.replaceAll("\r\n", "\n").replaceAll("\r", "\n").match(/^`{3}[^\n]*\n.+\n`{3}\s*$/ms));
       if(isCodeblock) {
@@ -4613,7 +4662,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     const {folderpath, filename} = splitFolderAndFilename(path);
     path = getNewUniqueFilepath(this.app.vault, filename, folderpath);
     try {
-      const newFile = await this.app.vault.create(path, child.text);
+      const newFile = await createOrOverwriteFile(this.app, path, child.text);
       if(!newFile) {
         new Notice("Unexpected error");
         return;
@@ -5952,6 +6001,9 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       //@ts-ignore
       scene.forceFlushSync = true;
     }
+    if(scene.elements) {
+      scene.elements = syncInvalidIndices(scene.elements);
+    }
     try {
       api.updateScene(scene);
     } catch (e) {

src/view/managers/DropManager.ts

@@ -12,8 +12,7 @@ import { getEA } from "src/core";
 import { insertEmbeddableToView, insertImageToView } from "src/utils/excalidrawViewUtils";
 import { t } from "src/lang/helpers";
 import ExcalidrawPlugin from "src/core/main";
-import { getInternalLinkOrFileURLLink, getNewUniqueFilepath, getURLImageExtension, splitFolderAndFilename } from "src/utils/fileUtils";
-import { getAttachmentsFolderAndFilePath } from "src/utils/obsidianUtils";
+import { getInternalLinkOrFileURLLink, getURLImageExtension, importFileToVault } from "src/utils/fileUtils";
 import { ScriptEngine } from "src/shared/Scripts";
 import { UniversalInsertFileModal } from "src/shared/Dialogs/UniversalInsertFileModal";
 import { Position } from "src/types/excalidrawViewTypes";
@@ -372,8 +371,7 @@ export class DropManager {
                 (async () => {
                   const droppedFilename = event.dataTransfer.files[i].name;
                   const fileToImport = await event.dataTransfer.files[i].arrayBuffer();
-                  let {folder:_, filepath} = await getAttachmentsFolderAndFilePath(this.app, this.file.path, droppedFilename);
-                  const maybeFile = this.app.vault.getAbstractFileByPath(filepath);
+                  const maybeFile = this.app.metadataCache.getFirstLinkpathDest(droppedFilename, this.file.path);
                   if(maybeFile && maybeFile instanceof TFile) {
                     const action = await ScriptEngine.suggester(
                       this.app,[
@@ -385,12 +383,11 @@ export class DropManager {
                         "Overwrite",
                         "Import",
                       ],
-                      "A file with the same name/path already exists in the Vault",
+                      "A file with the same name/path already exists in the Vault\n" +
+                      maybeFile.path,
                     );
                     switch(action) {
                       case "Import":
-                        const {folderpath,filename,basename:_,extension:__} = splitFolderAndFilename(filepath);
-                        filepath = getNewUniqueFilepath(this.app.vault, filename, folderpath);
                         break;
                         case "Overwrite":
                           await this.app.vault.modifyBinary(maybeFile, fileToImport);
@@ -403,7 +400,13 @@ export class DropManager {
                         return false;
                     }
                   }
-                  const file = await this.app.vault.createBinary(filepath, fileToImport)
+                  const file = await importFileToVault(
+                    this.app,
+                    droppedFilename,
+                    fileToImport,
+                    this.view.file,
+                    this.view
+                  );
                   const ea = getEA(this.view) as ExcalidrawAutomate;
                   await insertImageToView(ea, pos, file);
                   ea.destroy();
@@ -412,8 +415,13 @@ export class DropManager {
                 return true; //excalidarw to continue processing
               } else {
                 (async () => {
-                  const {folder:_, filepath} = await getAttachmentsFolderAndFilePath(this.app, this.file.path,event.dataTransfer.files[i].name);
-                  const file = await this.app.vault.createBinary(filepath, await event.dataTransfer.files[i].arrayBuffer());
+                  const file = await importFileToVault(
+                    this.app,
+                    event.dataTransfer.files[i].name,
+                    await event.dataTransfer.files[i].arrayBuffer(),
+                    this.view.file,
+                    this.view,
+                  );
                   const modal = new UniversalInsertFileModal(this.plugin, this.view);
                   modal.open(file, pos);
                 })();