Excalidraw Image Element Demo

docs/API/attributes_functions_overview.md

@@ -102,6 +102,8 @@ export interface ExcalidrawAutomate extends Window {
     targetView: ExcalidrawView;
     setView (view:ExcalidrawView|"first"|"active"):ExcalidrawView;
     getExcalidrawAPI ():any;
+    getViewElements ():ExcalidrawElement[];
+    deleteViewElements (el: ExcalidrawElement[]):boolean;
     getViewSelectedElement( ):ExcalidrawElement;
     getViewSelectedElements ():ExcalidrawElement[];
     viewToggleFullScreen (forceViewMode?:boolean):void;
@@ -117,6 +119,19 @@ export interface ExcalidrawAutomate extends Window {
       }
     ):boolean;
     addElementsToView (repositionToCursor:boolean, save:boolean):Promise<boolean>;
+    onDropHook (data: {
+      ea: ExcalidrawAutomate, 
+      event: React.DragEvent<HTMLDivElement>,
+      draggable: any, //Obsidian draggable object
+      type: "file"|"text"|"unknown",
+      payload: {
+        files: TFile[], //TFile[] array of dropped files
+        text: string, //string 
+      },
+      excalidrawFile: TFile, //the file receiving the drop event
+      view: ExcalidrawView, //the excalidraw view receiving the drop
+      pointerPosition: {x:number, y:number} //the pointer position on canvas at the time of drop
+    }):boolean;
   };
 }
 ```

docs/API/utility.md

@@ -114,6 +114,28 @@ getExcalidrawAPI():any
 Returns the native Excalidraw API (ref.current) for the active drawing specified in `targetView`.
 See Excalidraw documentation here: https://www.npmjs.com/package/@excalidraw/excalidraw#ref
 
+#### getViewElements()
+```typescript
+getViewElements():ExcalidrawElement[] 
+```
+
+Returns all the elements from the view.
+
+#### deleteViewElements()
+```typescript
+deleteViewElements(elToDelete: ExcalidrawElement[]):boolean 
+```
+
+Deletes those elements from the view that match the elements provided as the input parameter.
+
+Example to delete the selected elements from the view:
+```typescript
+ea = ExcalidrawAutomate;
+ea.setView("active");
+el = ea.getViewSelectedElements();
+ea.deleteViewElements();
+```
+
 #### getViewSelectedElement()
 ```typescript
 getViewSelectedElement():ExcalidrawElement
@@ -162,4 +184,38 @@ Adds elements created with ExcalidrawAutomate to the target ExcalidrawView.
 
 `save` default is false
 - true: the drawing will be saved after the elements were added.
-- false: the drawing will be saved at the next autosave cycle. Use false when adding multiple elements one after the other. Else, best to use true, to minimize risk of data loss.
+- false: the drawing will be saved at the next autosave cycle. Use false when adding multiple elements one after the other. Else, best to use true, to minimize risk of data loss.
+
+### onDropHook
+```typescript
+onDropHook (data: {
+  ea: ExcalidrawAutomate, 
+  event: React.DragEvent<HTMLDivElement>,
+  draggable: any, //Obsidian draggable object
+  type: "file"|"text"|"unknown",
+  payload: {
+    files: TFile[], //TFile[] array of dropped files
+    text: string, //string 
+  },
+  excalidrawFile: TFile, //the file receiving the drop event
+  view: ExcalidrawView, //the excalidraw view receiving the drop
+  pointerPosition: {x:number, y:number} //the pointer position on canvas at the time of drop
+}):boolean;
+```
+
+Callback function triggered when an draggable item is dropped on Excalidraw.
+The function should return a boolean value. True if the drop was handled by the hook and futher native processing should be stopped, and false if Excalidraw should continue with the processing of the drop.
+type of drop can be one of:
+- "file" if a file from Obsidian file explorer is dropped onto Excalidraw. In this case payload.files will contain the list of files dropped.
+- "text" if a link (e.g. url, or wiki link) or other text is dropped. In this case payload.text will contain the received string
+- "unknown" if Excalidraw plugin does not recognize the type of dropped object. In this case you can use React.DragEvent to analysed the dropped object.
+
+Use Templater startup templates or similar to set the Hook function. 
+
+```typescript
+ea = ExcalidrawAutomate;
+ea.onDropHook = (data) => {
+  console.log(data); 
+  return false;
+}
+```

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "1.3.12",
+	"version": "1.3.16",
 	"minAppVersion": "0.12.0",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@zsviczian/excalidraw": "0.9.0-obsidian-8",
+    "@zsviczian/excalidraw": "0.9.0-obsidian-image-support-3",
     "monkey-around": "^2.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -31,7 +31,7 @@
     "@types/react-dom": "^17.0.8",
     "cross-env": "^7.0.3",
     "nanoid": "^3.1.23",
-    "obsidian": "^0.12.11",
+    "obsidian": "^0.12.16",
     "rollup": "^2.52.3",
     "rollup-plugin-visualizer": "^5.5.0",
     "tslib": "^2.3.0",

src/ExcalidrawAutomate.ts

@@ -15,9 +15,11 @@ import {
   FRONTMATTER, 
   nanoid, 
   JSON_parse, 
-  VIEW_TYPE_EXCALIDRAW
+  VIEW_TYPE_EXCALIDRAW,
+  MAX_IMAGE_SIZE
 } from "./constants";
-import { wrapText } from "./Utils";
+import { getObsidianImage, wrapText } from "./Utils";
+import { AppState } from "@zsviczian/excalidraw/types/types";
 
 declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
 
@@ -25,6 +27,7 @@ export interface ExcalidrawAutomate extends Window {
   ExcalidrawAutomate: {
     plugin: ExcalidrawPlugin;
     elementsDict: {};
+    imagesDict: {};
     style: {
       strokeColor: string;
       backgroundColor: string;
@@ -101,6 +104,7 @@ export interface ExcalidrawAutomate extends Window {
         endObjectId?:string
       }
     ):string ;
+    addImage(topX:number, topY:number, imageFile: TFile):Promise<string>;
     connectObjects (
       objectA: string, 
       connectionA: ConnectionPoint, 
@@ -120,7 +124,9 @@ export interface ExcalidrawAutomate extends Window {
     targetView: ExcalidrawView;
     setView (view:ExcalidrawView|"first"|"active"):ExcalidrawView;
     getExcalidrawAPI ():any;
-    getViewSelectedElement( ):ExcalidrawElement;
+    getViewElements ():ExcalidrawElement[];
+    deleteViewElements (el: ExcalidrawElement[]):boolean;
+    getViewSelectedElement ():ExcalidrawElement;
     getViewSelectedElements ():ExcalidrawElement[];
     viewToggleFullScreen (forceViewMode?:boolean):void;
     connectObjectWithViewSelectedElement (
@@ -135,6 +141,19 @@ export interface ExcalidrawAutomate extends Window {
       }
     ):boolean;
     addElementsToView (repositionToCursor:boolean, save:boolean):Promise<boolean>;
+    onDropHook (data: {
+      ea: ExcalidrawAutomate, 
+      event: React.DragEvent<HTMLDivElement>,
+      draggable: any, //Obsidian draggable object
+      type: "file"|"text"|"unknown",
+      payload: {
+        files: TFile[], //TFile[] array of dropped files
+        text: string, //string 
+      },
+      excalidrawFile: TFile, //the file receiving the drop event
+      view: ExcalidrawView, //the excalidraw view receiving the drop
+      pointerPosition: {x:number, y:number} //the pointer position on canvas at the time of drop
+    }):boolean;
   };
 }
 
@@ -144,6 +163,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
   window.ExcalidrawAutomate = {
     plugin: plugin,
     elementsDict: {},
+    imagesDict: {},
     style: {
       strokeColor: "#000000",
       backgroundColor: "transparent",
@@ -497,6 +517,25 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       }
       return id;
     },
+    async addImage(topX:number, topY:number, imageFile: TFile):Promise<string> {
+      const id = nanoid();
+      const image = await getObsidianImage(this.plugin.app,imageFile);
+      if(!image) return null;
+      this.imagesDict[image.imageId] = {
+        type:"image",
+        id: image.imageId,
+        dataURL: image.dataURL
+      }
+      if (Math.max(image.size.width,image.size.height) > MAX_IMAGE_SIZE) {
+        const scale = MAX_IMAGE_SIZE/Math.max(image.size.width,image.size.height);
+        image.size.width = scale*image.size.width;
+        image.size.height = scale*image.size.height;
+      }
+      this.elementsDict[id] = boxedElement(id,"image",topX,topY,image.size.width,image.size.height);
+      this.elementsDict[id].imageId = image.imageId;
+      this.elementsDict[id].scale = [1,1];
+      return id;
+    },
     connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints?: number,startArrowHead?:string,endArrowHead?:string, padding?: number}):void {
       if(!(this.elementsDict[objectA] && this.elementsDict[objectB])) {
         return;
@@ -536,6 +575,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
     },
     clear() {
       this.elementsDict = {};
+      this.imagesDict = {};
     },
     reset() {
       this.clear();
@@ -583,6 +623,32 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
       }
       return (this.targetView as ExcalidrawView).excalidrawRef.current;
     },
+    getViewElements ():ExcalidrawElement[] { 
+      if (!this.targetView || !this.targetView?._loaded) {
+        errorMessage("targetView not set", "getViewSelectedElements()");
+        return [];
+      }
+      const current = this.targetView?.excalidrawRef?.current;
+      if(!current) return [];
+      return current?.getSceneElements();
+    },
+    deleteViewElements (elToDelete: ExcalidrawElement[]):boolean {
+      if (!this.targetView || !this.targetView?._loaded) {
+        errorMessage("targetView not set", "getViewSelectedElements()");
+        return false;
+      }
+      const current = this.targetView?.excalidrawRef?.current;
+      if(!current) return false;
+      const el: ExcalidrawElement[] = current.getSceneElements();
+      const st: AppState = current.getAppState();
+      current.updateScene({
+        elements: el.filter((e:ExcalidrawElement)=>!elToDelete.includes(e)),
+        appState: st,
+        commitToHistory: true,
+      });
+      this.targetView.save(); 
+      return true;
+    },
     getViewSelectedElement():any {      
       const elements = this.getViewSelectedElements();
       return elements ? elements[0] : null;
@@ -640,9 +706,9 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         return false;
       }
       const elements = this.getElements();
-      return await this.targetView.addElements(elements,repositionToCursor,save);
+      return await this.targetView.addElements(elements,repositionToCursor,save,this.imagesDict);
     },
-  
+    onDropHook:null,
   };
   await initFonts();
 }

src/ExcalidrawData.ts

@@ -24,7 +24,7 @@ declare module "obsidian" {
 
 export const REGEX_LINK = {
   //![[link|alias]] [alias](link){num}
-  //12 3    4        5      6    7 8
+  //      1  2     3           4        5      6  7     8  9
   EXPR: /(!)?(\[\[([^|\]]+)\|?(.+)?]]|\[(.*)\]\((.*)\))(\{(\d+)\})?/g,
   isTransclusion: (parts: IteratorResult<RegExpMatchArray, any>):boolean => {
     return parts.value[1] ? true:false;
@@ -143,7 +143,12 @@ export class ExcalidrawData {
     let parts;
     while(!(parts = res.next()).done) {
       const text = data.substring(position,parts.value.index);
-      this.textElements.set(parts.value[1],{raw: text, parsed: await this.parse(text)});
+      const id:string = parts.value[1];
+      this.textElements.set(id,{raw: text, parsed: await this.parse(text)});
+      //this will set the rawText field of text elements imported from files before 1.3.14, and from other instances of Excalidraw
+      const textEl = this.scene.elements.filter((el:any)=>el.id===id)[0];
+      if(textEl && (!textEl.rawText || textEl.rawText === "")) textEl.rawText = text; 
+
       position = parts.value.index + BLOCKREF_LEN;  
     }
 
@@ -241,8 +246,9 @@ export class ExcalidrawData {
         dirty = true;
       } else if(!this.textElements.has(id)) {
         dirty = true;
-        this.textElements.set(id,{raw: te.text, parsed: null});
-        this.parseasync(id,te.text);
+        const raw = (te.rawText && te.rawText!==""?te.rawText:te.text); //this is for compatibility with drawings created before the rawText change on ExcalidrawTextElement
+        this.textElements.set(id,{raw: raw, parsed: null});
+        this.parseasync(id,raw);
       }
     }
     if(dirty) { //reload scene json in case it has changed
@@ -263,13 +269,9 @@ export class ExcalidrawData {
       if(el.length==0) {
         this.textElements.delete(key); //if no longer in the scene, delete the text element
       } else {
-        if(!this.textElements.has(key)) {
+        const text = await this.getText(key); 
+        if(text != el[0].text) {
           this.textElements.set(key,{raw: el[0].text,parsed: await this.parse(el[0].text)});
-        } else {
-          const text = await this.getText(key); 
-          if(text != el[0].text) {
-            this.textElements.set(key,{raw: el[0].text,parsed: await this.parse(el[0].text)});
-          }
         }
       }
     }
@@ -286,14 +288,24 @@ export class ExcalidrawData {
            (this.showLinkBrackets ? "]]" : "");
   }
 
+  /**
+   * 
+   * @param text 
+   * @returns [string,number] - the transcluded text, and the line number for the location of the text
+   */
   public async getTransclusion (text:string):Promise<[string,number]> {
     //file-name#^blockref
     //1         2 3
     const REG_FILE_BLOCKREF = /(.*)#(\^)?(.*)/g;
     const parts=text.matchAll(REG_FILE_BLOCKREF).next();
-    if(parts.done || !parts.value[1] || !parts.value[3]) return [text,0]; //filename and/or blockref not found
-    const file = this.app.metadataCache.getFirstLinkpathDest(parts.value[1],this.file.path);
+    if(!parts.done && !parts.value[1]) return [text,0]; //filename not found
+    const filename = parts.done ? text : parts.value[1];
+    const file = this.app.metadataCache.getFirstLinkpathDest(filename,this.file.path);
+    if(!file || !(file instanceof TFile)) return [text,0];
     const contents = await this.app.vault.cachedRead(file);
+    if(parts.done) { //no blockreference
+      return([contents.substr(0,this.plugin.settings.pageTransclusionCharLimit),0]);
+    }
     const isParagraphRef = parts.value[2] ? true : false; //does the reference contain a ^ character?
     const id = parts.value[3]; //the block ID or heading text
     const blocks = (await this.app.metadataCache.blockCache.getForFile({isCancelled: ()=>false},file)).blocks.filter((block:any)=>block.node.type!="comment");
@@ -426,17 +438,17 @@ export class ExcalidrawData {
   public async syncElements(newScene:any):Promise<boolean> {
     //console.log("Excalidraw.Data.syncElements()");
     this.scene = newScene;//JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
+    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets();
     await this.updateTextElementsFromScene();
-    return result;
+    return result || this.findNewTextElementsInScene();
   }
 
   public async updateScene(newScene:any){
     //console.log("Excalidraw.Data.updateScene()");
     this.scene = JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
+    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets();
     await this.updateTextElementsFromScene();
-    if(result) {
+    if(result || this.findNewTextElementsInScene()) {
       await this.updateSceneTextElements();
       return true;
     };

src/ExcalidrawView.ts

@@ -28,7 +28,8 @@ import {
   TEXT_DISPLAY_RAW_ICON_NAME,
   TEXT_DISPLAY_PARSED_ICON_NAME,
   FULLSCREEN_ICON_NAME,
-  JSON_parse
+  JSON_parse,
+  IMAGE_TYPES
 } from './constants';
 import ExcalidrawPlugin from './main';
 import {estimateBounds, ExcalidrawAutomate, repositionElementsToCursor} from './ExcalidrawAutomate';
@@ -36,6 +37,7 @@ import { t } from "./lang/helpers";
 import { ExcalidrawData, REG_LINKINDEX_HYPERLINK, REGEX_LINK } from "./ExcalidrawData";
 import { checkAndCreateFolder, download, getNewUniqueFilepath, splitFolderAndFilename, viewportCoordsToSceneCoords } from "./Utils";
 import { Prompt } from "./Prompt";
+import { ClipboardData } from "@zsviczian/excalidraw/types/clipboard";
 
 declare let window: ExcalidrawAutomate;
 
@@ -274,6 +276,12 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
+  onResize() {
+    if(!this.plugin.settings.zoomToFitOnResize) return;
+    if(!this.excalidrawRef) return;
+    this.zoomToFit(false);
+  }
+
   onload() {
     //console.log("ExcalidrawView.onload()");
     this.addAction(DISK_ICON_NAME,t("FORCE_SAVE"),async (ev)=> {
@@ -452,6 +460,12 @@ export default class ExcalidrawView extends TextFileView {
   }
 
   setMarkdownView() {
+    if(this.excalidrawRef) {
+      const el = this.excalidrawRef.current.getSceneElements();
+      if(el.filter((e:any)=>e.type==="image").length>0) {
+        new Notice(t("DRAWING_CONTAINS_IMAGE"),6000);
+      }
+    }
     this.plugin.excalidrawFileModes[this.id || this.file.path] = "markdown";
     this.plugin.setMarkdownView(this.leaf);
   }
@@ -633,7 +647,7 @@ export default class ExcalidrawView extends TextFileView {
         this.addElements(window.ExcalidrawAutomate.getElements(),false,true);
       }
       
-      this.addElements = async (newElements:ExcalidrawElement[],repositionToCursor:boolean = false, save:boolean=false):Promise<boolean> => {
+      this.addElements = async (newElements:ExcalidrawElement[],repositionToCursor:boolean = false, save:boolean=false, images:any):Promise<boolean> => {
         if(!excalidrawRef?.current) return false;    
        
         const textElements = newElements.filter((el)=>el.type=="text");
@@ -646,7 +660,20 @@ export default class ExcalidrawView extends TextFileView {
         };
 
         const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements();
-        const st: AppState = excalidrawRef.current.getAppState();
+        let st: AppState = excalidrawRef.current.getAppState();
+        if(!st.files) {
+          st.files = {};
+        }
+        if(images) {
+          Object.keys(images).forEach((k)=>{
+            st.files[k]={
+              type:images[k].type,
+              id: images[k].id,
+              dataURL: images[k].dataURL
+            }
+          });
+        }
+        //merge appstate.files with files
         if(repositionToCursor) newElements = repositionElementsToCursor(newElements,currentPosition,true);
         this.excalidrawRef.current.updateScene({
           elements: el.concat(newElements),
@@ -663,6 +690,13 @@ export default class ExcalidrawView extends TextFileView {
         }
         const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements();
         const st: AppState = excalidrawRef.current.getAppState();
+
+        if(st.files) {
+          const imgIds = el.filter((e)=>e.type=="image").map((e:any)=>e.imageId);
+          const toDelete = Object.keys(st.files).filter((k)=>!imgIds.contains(k));
+          toDelete.forEach((k)=>delete st.files[k]);
+        }
+        
         return { 
           type: "excalidraw",
           version: 2,
@@ -686,6 +720,7 @@ export default class ExcalidrawView extends TextFileView {
             currentItemEndArrowhead: st.currentItemEndArrowhead,
             currentItemLinearStrokeSharpness: st.currentItemLinearStrokeSharpness,
             gridSize: st.gridSize,
+            files: st.files??{},
           }
         };
       };
@@ -897,32 +932,83 @@ export default class ExcalidrawView extends TextFileView {
               await this.plugin.saveSettings();  
             })();
           },
-          /*onPaste: (data: ClipboardData, event: ClipboardEvent | null) => {
-            console.log(data,event);
-            return false;
-          },*/
+          onPaste: (data: ClipboardData, event: ClipboardEvent | null) => {
+            if(data.elements) {
+              const self = this;
+              setTimeout(()=>self.save(false),300);
+            }
+            return true;
+          },
           onDrop: (event: React.DragEvent<HTMLDivElement>):boolean => {
             const st: AppState = excalidrawRef.current.getAppState();
             currentPosition = viewportCoordsToSceneCoords({ clientX: event.clientX, clientY: event.clientY },st);
             
             const draggable = (this.app as any).dragManager.draggable;
+            const onDropHook = (type:"file"|"text"|"unknown", files:TFile[], text:string):boolean => {
+              if (window.ExcalidrawAutomate.onDropHook) {
+                try {
+                  return window.ExcalidrawAutomate.onDropHook({
+                    //@ts-ignore
+                    ea: window.ExcalidrawAutomate, //the Excalidraw Automate object
+                    event: event, //React.DragEvent<HTMLDivElement>
+                    draggable: draggable, //Obsidian draggable object
+                    type: type, //"file"|"text"
+                    payload: {
+                      files: files, //TFile[] array of dropped files
+                      text: text, //string 
+                    },
+                    excalidrawFile: this.file, //the file receiving the drop event
+                    view: this, //the excalidraw view receiving the drop
+                    pointerPosition: currentPosition //the pointer position on canvas at the time of drop
+                  });
+                } catch (e) {
+                  new Notice("on drop hook error. See console log for details");
+                  console.log(e);
+                  return false;
+                }
+              } else {
+                return false;
+              }
+
+            }
+
             switch(draggable?.type) {
               case "file":
-                this.addText(`[[${this.app.metadataCache.fileToLinktext(draggable.file,this.file.path,true)}]]`);
+                if (!onDropHook("file",[draggable.file],null)) {
+                  if((event.ctrlKey || event.metaKey) && IMAGE_TYPES.contains(draggable.file.extension)) {
+                    const f = draggable.file;
+                    const topX = currentPosition.x;
+                    const topY = currentPosition.y;
+                    const ea = window.ExcalidrawAutomate;
+                    ea.reset();
+                    ea.setView(this);
+                    (async () => {
+                      await ea.addImage(currentPosition.x,currentPosition.y,draggable.file);
+                      ea.addElementsToView(false,false);
+                    })();
+                    return false;
+                  }
+                  this.addText(`[[${this.app.metadataCache.fileToLinktext(draggable.file,this.file.path,true)}]]`);
+                }
                 return false;
               case "files":
-                for(const f of draggable.files) {
-                  this.addText(`[[${this.app.metadataCache.fileToLinktext(f,this.file.path,true)}]]`);
-                  currentPosition.y+=st.currentItemFontSize*2;
+                if (!onDropHook("file",draggable.files,null)) {
+                  for(const f of draggable.files) {
+                    this.addText(`[[${this.app.metadataCache.fileToLinktext(f,this.file.path,true)}]]`);
+                    currentPosition.y+=st.currentItemFontSize*2;
+                  }
                 }
                 return false;
             }
             if (event.dataTransfer.types.includes("text/plain")) {
               const text:string = event.dataTransfer.getData("text");
               if(!text) return true;
-              this.addText(text.replace(/(!\[\[.*#[^\]]*\]\])/g,"$1{40}"));
+              if (!onDropHook("text",null,text)) {
+                this.addText(text.replace(/(!\[\[.*#[^\]]*\]\])/g,"$1{40}"));
+              }
               return false;
             }
+            if(onDropHook("unknown",null,null)) return false;
             return true;
           },
           onBeforeTextEdit: (textElement: ExcalidrawTextElement) => {
@@ -930,8 +1016,12 @@ export default class ExcalidrawView extends TextFileView {
               clearInterval(this.autosaveTimer);
               this.autosaveTimer = null;
             }
-            if(this.textMode==TextMode.parsed) return this.excalidrawData.getRawText(textElement.id);
-            return null;
+            //if(this.textMode==TextMode.parsed) {
+              const raw = this.excalidrawData.getRawText(textElement.id);
+              if(!raw) return textElement.rawText;
+              return raw;
+            /*}
+            return null;*/
           },
           onBeforeTextSubmit: (textElement: ExcalidrawTextElement, text:string, isDeleted:boolean) => {
             if(isDeleted) {
@@ -942,7 +1032,7 @@ export default class ExcalidrawView extends TextFileView {
             } 
             //If the parsed text is different than the raw text, and if View is in TextMode.parsed
             //Then I need to clear the undo history to avoid overwriting raw text with parsed text and losing links
-            if(text!=textElement.text) { //the user made changes to the text
+            if(text!=textElement.text || !this.excalidrawData.getRawText(textElement.id)) { //the user made changes to the text or the text is missing from Excalidraw Data (recently copy/pasted)
               //setTextElement will attempt a quick parse (without processing transclusions)
               const parseResult = this.excalidrawData.setTextElement(textElement.id, text,async ()=>{
                 await this.save(false);
@@ -982,9 +1072,9 @@ export default class ExcalidrawView extends TextFileView {
     const fullscreen = (document.fullscreenElement==this.contentEl);
     const elements = current.getSceneElements();
     if(delay) { //time for the DOM to render, I am sure there is a more elegant solution
-      setTimeout(() => current.zoomToFit(elements,10,fullscreen?0:0.05),100);
+      setTimeout(() => current.zoomToFit(elements,2,fullscreen?0:0.05),100); 
     } else {
-      current.zoomToFit(elements,10,fullscreen?0:0.05);
+      current.zoomToFit(elements,2,fullscreen?0:0.05);
     }
   }
 

src/Utils.ts

@@ -1,6 +1,9 @@
-import {  normalizePath, TAbstractFile, TFolder, Vault } from "obsidian";
+import {  App, normalizePath, TAbstractFile, TFile, TFolder, Vault } from "obsidian";
 import { Random } from "roughjs/bin/math";
 import { Zoom } from "@zsviczian/excalidraw/types/types";
+import { nanoid } from "nanoid";
+import { IMAGE_TYPES } from "./constants";
+
 
 /**
  * Splits a full path including a folderpath and a filename into separate folderpath and filename components
@@ -122,4 +125,66 @@ export const viewportCoordsToSceneCoords = (
   const x = (clientX - zoom.translation.x - offsetLeft) * invScale - scrollX;
   const y = (clientY - zoom.translation.y - offsetTop) * invScale - scrollY;
   return { x, y };
-};
+};
+
+export const getObsidianImage = async (app: App, file: TFile)
+  :Promise<{
+    imageId: string, 
+    dataURL: string,
+    size: {height: number, width: number},
+  }> => {
+  if(!app || !file) return null;
+  if (!IMAGE_TYPES.contains(file.extension)) return null;
+  const ab = await app.vault.readBinary(file);
+  return {
+    imageId: await generateIdFromFile(ab),
+    dataURL: file.extension==="svg" ? await getSVGData(app,file) : await getDataURL(ab),
+    size: await getImageSize(app,file)
+  }
+}
+
+const getSVGData = async (app: App, file: TFile): Promise<string> => {
+  const svg = await app.vault.read(file);
+  return "data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(svg.replaceAll("&nbsp;"," "))))
+}
+
+const getDataURL = async (file: ArrayBuffer): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataURL = reader.result as string;
+      resolve(dataURL);
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(new Blob([new Uint8Array(file)]));
+  });
+};
+
+const generateIdFromFile = async (file: ArrayBuffer):Promise<string> => {
+  let id: string;
+  try {
+    const hashBuffer = await window.crypto.subtle.digest(
+      "SHA-1",
+      file,
+    );
+    id =
+      // convert buffer to byte array
+      Array.from(new Uint8Array(hashBuffer))
+        // convert to hex string
+        .map((byte) => byte.toString(16).padStart(2, "0"))
+        .join("");
+  } catch (error) {
+    console.error(error);
+    id = nanoid(40);
+  }
+  return id;
+};
+
+const getImageSize = async (app: App, file:TFile):Promise<{height:number, width:number}> => {
+  return new Promise((resolve, reject) => {
+    let img = new Image()
+    img.onload = () => resolve({height: img.height, width:img.width});
+    img.onerror = reject;
+    img.src = app.vault.getResourcePath(file);
+    })
+}

src/constants.ts

@@ -3,6 +3,8 @@ export function JSON_parse(x:string):any {return JSON.parse(x.replaceAll("["
 
 import {customAlphabet} from "nanoid";
 export const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',8);
+export const IMAGE_TYPES = ['jpeg', 'jpg', 'png', 'gif', 'svg', 'bmp'];
+export const MAX_IMAGE_SIZE = 600;
 export const FRONTMATTER_KEY = "excalidraw-plugin";
 export const FRONTMATTER_KEY_CUSTOM_PREFIX = "excalidraw-link-prefix";
 export const FRONTMATTER_KEY_CUSTOM_URL_PREFIX = "excalidraw-url-prefix";
@@ -13,7 +15,7 @@ export const MAX_COLORS = 5;
 export const COLOR_FREQ = 6;
 export const RERENDER_EVENT = "excalidraw-embed-rerender";
 export const BLANK_DRAWING = '{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}';
-export const FRONTMATTER = ["---","",`${FRONTMATTER_KEY}: unlocked`,"","---", "==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==", "",""].join("\n");
+export const FRONTMATTER = ["---","",`${FRONTMATTER_KEY}: parsed`,"","---", "==⚠  Switch to EXCALIDRAW VIEW in the MORE OPTIONS menu of this document. ⚠==", "",""].join("\n");
 export const EMPTY_MESSAGE = "Hit enter to create a new drawing";
 export const TEXT_DISPLAY_PARSED_ICON_NAME = "quote-glyph";
 export const TEXT_DISPLAY_RAW_ICON_NAME = "presentation";

src/lang/locale/en.ts

@@ -44,6 +44,8 @@ export default {
   NOFILE: "Excalidraw (no file)",
   COMPATIBILITY_MODE: "*.excalidraw file opened in compatibility mode. Convert to new format for full plugin functionality.",
   CONVERT_FILE: "Convert to new format",
+  DRAWING_CONTAINS_IMAGE: "Warning! The drawing contains image elements. Depending on the number and size of the images, " +
+                          "loading Markdown View may take a while. Please be patient. ",
 
   //settings.ts
   FOLDER_NAME: "Excalidraw folder",
@@ -69,6 +71,9 @@ export default {
   FILENAME_PREFIX_DESC: "The first part of the filename",
   FILENAME_DATE_NAME: "Filename date",
   FILENAME_DATE_DESC: "The second part of the filename",
+  DISPLAY_HEAD: "Display",
+  ZOOM_TO_FIT_NAME: "Zoom to fit on view resize",
+  ZOOM_TO_FIT_DESC: "Zoom to fit drawing when the pane is resized",
   LINKS_HEAD: "Links and transclusion",
   LINKS_DESC: "CTRL/META + CLICK on Text Elements to open them as links. " + 
               "If the selected text has more than one [[valid Obsidian links]], only the first will be opened. " + 
@@ -95,6 +100,9 @@ export default {
   TRANSCLUSION_WRAP_DESC: "Number specifies the character count where the text should be wrapped. " + 
                           "Set the text wrapping behavior of transcluded text. Turn this ON to force-wrap " + 
                           "text (i.e. no overflow), or OFF to soft-warp text (at the nearest whitespace).",
+  PAGE_TRANSCLUSION_CHARCOUNT_NAME: "Page transclusion max char count",
+  PAGE_TRANSCLUSION_CHARCOUNT_DESC: "The maximum number of characters to display from the page when transcluding an entire page with the "+
+                                    "![[markdown page]] format.",
   EMBED_HEAD: "Embed & Export",
   EMBED_PREVIEW_SVG_NAME: "Display SVG in markdown preview",
   EMBED_PREVIEW_SVG_DESC: "The default is to display drawings as SVG images in the markdown preview. Turning this feature off, the markdown preview will display the drawing as an embedded PNG image.",

src/main.ts

@@ -15,9 +15,7 @@ import {
   MarkdownRenderer,
   ViewState,
   Notice,
-  request,
 } from "obsidian";
-
 import { 
   BLANK_DRAWING,
   VIEW_TYPE_EXCALIDRAW, 
@@ -58,7 +56,6 @@ import { around } from "monkey-around";
 import { t } from "./lang/helpers";
 import { MigrationPrompt } from "./MigrationPrompt";
 import { checkAndCreateFolder, download, getIMGPathFromExcalidrawFile, getNewUniqueFilepath, splitFolderAndFilename } from "./Utils";
-import { tsExpressionWithTypeArguments } from "@babel/types";
 
 declare module "obsidian" {
   interface App {
@@ -76,7 +73,6 @@ export default class ExcalidrawPlugin extends Plugin {
   public excalidrawFileModes: { [file: string]: string } = {};
   private _loaded: boolean = false;
   public settings: ExcalidrawSettings;
-  //public stencilLibrary: any = null;
   private openDialog: OpenFileDialog;
   private insertLinkDialog: InsertLinkDialog;
   private activeExcalidrawView: ExcalidrawView = null;
@@ -1139,7 +1135,7 @@ export default class ExcalidrawPlugin extends Plugin {
       }
       outString += te.text+' ^'+id+'\n\n';
     }
-    return outString + this.getMarkdownDrawingSection(data);
+    return outString + this.getMarkdownDrawingSection(JSON.stringify(JSON_parse(data)));
   }
 
   public async createDrawing(filename: string, onNewPane: boolean, foldername?: string, initData?:string):Promise<string> {

src/settings.ts

@@ -17,11 +17,13 @@ export interface ExcalidrawSettings {
   drawingFilenameDateTime: string,
   displaySVGInPreview: boolean,
   width: string,
+  zoomToFitOnResize: boolean,
   showLinkBrackets: boolean,
   linkPrefix: string,
   urlPrefix: string,
   allowCtrlClick: boolean, //if disabled only the link button in the view header will open links 
   forceWrap: boolean,
+  pageTransclusionCharLimit: number,
   pngExportScale: number,
   exportWithTheme: boolean,
   exportWithBackground: boolean,
@@ -47,11 +49,13 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   drawingFilenameDateTime: 'YYYY-MM-DD HH.mm.ss',
   displaySVGInPreview: true,
   width: '400',
+  zoomToFitOnResize: true,
   linkPrefix: "📍",
   urlPrefix: "🌐",
   showLinkBrackets: true,
   allowCtrlClick: true,
   forceWrap: false,
+  pageTransclusionCharLimit: 200,
   pngExportScale: 1,
   exportWithTheme: true,
   exportWithBackground: true,
@@ -184,6 +188,17 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           this.applySettingsUpdate();
         }));
 
+    this.containerEl.createEl('h1', {text: t("DISPLAY_HEAD")});
+    new Setting(containerEl)
+      .setName(t("ZOOM_TO_FIT_NAME")) 
+      .setDesc(t("ZOOM_TO_FIT_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.zoomToFitOnResize)
+        .onChange(async (value) => {
+          this.plugin.settings.zoomToFitOnResize = value;
+          this.applySettingsUpdate();
+        }));
+
     this.containerEl.createEl('h1', {text: t("LINKS_HEAD")});
     this.containerEl.createEl('p',{
       text: t("LINKS_DESC")});
@@ -242,6 +257,29 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         }));
     s.descEl.innerHTML="<code>![[doc#^ref]]{number}</code> "+t("TRANSCLUSION_WRAP_DESC");
 
+    new Setting(containerEl)
+      .setName(t("PAGE_TRANSCLUSION_CHARCOUNT_NAME")) 
+      .setDesc(t("PAGE_TRANSCLUSION_CHARCOUNT_DESC"))
+      .addText(text => text
+        .setPlaceholder('Enter a number')
+        .setValue(this.plugin.settings.pageTransclusionCharLimit.toString())
+        .onChange(async (value) => {
+          const intVal = parseInt(value);
+          if(isNaN(intVal) && value!=="") {
+            text.setValue(this.plugin.settings.pageTransclusionCharLimit.toString());
+            return;
+          } 
+          this.requestEmbedUpdate = true;
+          if(value === "") {
+            this.plugin.settings.pageTransclusionCharLimit = 10;
+            this.applySettingsUpdate(true);
+            return;
+          }
+          this.plugin.settings.pageTransclusionCharLimit = intVal;
+          text.setValue(this.plugin.settings.pageTransclusionCharLimit.toString());
+          this.applySettingsUpdate(true);
+        }));  
+
     this.containerEl.createEl('h1', {text: t("EMBED_HEAD")});
 
 
@@ -267,6 +305,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           this.applySettingsUpdate();
           this.requestEmbedUpdate = true;
         }));  
+
     let dropdown: DropdownComponent;
 
     new Setting(containerEl)

versions.json

@@ -1,3 +1,3 @@
 {
-  "1.3.12": "0.11.13"
+  "1.3.16": "0.11.13"
 }

yarn.lock

@@ -1024,10 +1024,10 @@
   dependencies:
     "@types/estree" "*"
 
-"@zsviczian/excalidraw@0.9.0-obsidian-8":
-  "integrity" "sha512-RXKtaXn8i94qitblEwKvKPVqjWzUwrqkZaPaCdIQnnSMllTkJtZ0fE7X6nqK6BNSpGQeGNkjz3kL8VYIbFQZlA=="
-  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.9.0-obsidian-8.tgz"
-  "version" "0.9.0-obsidian-8"
+"@zsviczian/excalidraw@0.9.0-obsidian-image-support-3":
+  "integrity" "sha512-Y+hIhIxoNsoyYS2AmhE9I8G0M6Q6KaQ3LxSn8p3JZbUGFqoAmDg+26fGHXhMsboaVXhKqonkw5UN1UlZYL5k1A=="
+  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.9.0-obsidian-image-support-3.tgz"
+  "version" "0.9.0-obsidian-image-support-3"
 
 "abab@^1.0.3":
   "integrity" "sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4="
@@ -6891,10 +6891,10 @@
   dependencies:
     "isobject" "^3.0.1"
 
-"obsidian@^0.12.11":
-  "integrity" "sha512-Kv4m1n4nfd17FzpqHZfqFS2YZAyY+cxAUM7/5jqh1bmbPlmKoNd1XJZC7o9KvkXfTCxALiXfGRdrjHB+GUFAEA=="
-  "resolved" "https://registry.npmjs.org/obsidian/-/obsidian-0.12.11.tgz"
-  "version" "0.12.11"
+"obsidian@^0.12.16":
+  "integrity" "sha512-YwwhYrmlv71A/ntTiGOyGaqr9ONhKPE1OKN1tcHovLJC0N/BRZ7XlGpzaN1T3BnAE5H8DmYLsAI3h67u6eJPGQ=="
+  "resolved" "https://registry.npmjs.org/obsidian/-/obsidian-0.12.16.tgz"
+  "version" "0.12.16"
   dependencies:
     "@types/codemirror" "0.0.108"
     "moment" "2.29.1"