1.2.23

README.md

@@ -41,7 +41,10 @@ To convert files you have the following options:
 - Supports hyperlinks e.g. `https://zsolt.blog`, `[Obsidian](https://obsidian.md)`, and internal links e.g. `[[My file in vault|Alias]]` in drawing text. 
   - Links will update when files are moved or renamed, if you have the Obsidian setting Files & Links/Automatically Update Internal Links enalbled.
   - Links in drawings will show up in backlinks of documents
-  - Transclusions are supported i.e. `![[myfile#^blockref]]` will convert in the drawing into the transcluded text
+  - Transclusions are supported 
+    - `![[myfile#^blockref]]` will convert in the drawing into the transcluded text of the block
+    - `![[myfile#section]]` also works, this will transclude the section
+    - you can also specify word wrapping for transcluded text by adding the max character count in curly brackets right after the transclusion e.g. `![[myfile#^blockref]]{40}` will wrap text at 40 characters.
   - For convenience you can also use the command palette to insert links into drawings
   - CTRL/META + CLICK a text element to open it as a link.
   - CTRL/META + ALT + CLICK to create the file (if it does not yet exist) and open it
@@ -54,6 +57,10 @@ To convert files you have the following options:
   - You can add metadata to the YAML front matter of drawings
   - Anything you add between the frontmatter and the `# Text Elements` heading will be ignored by Excalidraw, i.e. you can add whatever you like here, it will be preserved as part of the document.
   - Excalidraw documents now show in graph view.
+  - The following front matter keys will customize how the drawing is displayed - overriding general settings:
+    - `excalidraw-link-prefix: "📍"` preview prefix for internal links
+    - `excalidraw-url-prefix: "🌐"` preview prefix for external links
+    - `excalidraw-link-brackets: true|false` whether or not to display brackets around links in preview
 - Includes full [Templater](https://silentvoid13.github.io/Templater/) and [Dataview](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/) support through ExcalidrawAutomate. Check out the [detailed help + examples](https://zsviczian.github.io/obsidian-excalidraw-plugin/)
 - REQUIRES AN OBSIDIAN SYNC SUBSCRIPTION: Full drawing file history and synchronization between devices
 - Multilanguage support: if you'd like to help out by translating the plugin, please get in contact with me.

docs/API/attributes_functions_overview.md

@@ -2,9 +2,12 @@
 ## Attributes and functions overview
 Here's the interface implemented by ExcalidrawAutomate:
 
-```javascript
-ExcalidrawAutomate: {
-  style: {
+```typescript
+ExcalidrawAutomate: {
+  plugin: ExcalidrawPlugin;
+  elementIds: [];
+  elementsDict: {},
+  style: {
     strokeColor: string;
     backgroundColor: string;
     angle: number;
@@ -14,32 +17,34 @@ ExcalidrawAutomate: {
     roughness: number;
     opacity: number;
     strokeSharpness: StrokeSharpness;
-    fontFamily: FontFamily;
+    fontFamily: number;
     fontSize: number;
     textAlign: string;
     verticalAlign: string;
     startArrowHead: string;
     endArrowHead: string;
   }
-  canvas: {theme: string, viewBackgroundColor: string};
-  setFillStyle: Function;
-  setStrokeStyle: Function;
-  setStrokeSharpness: Function;
-  setFontFamily: Function;
-  setTheme: Function;
-  addRect: Function;
-  addDiamond: Function;
-  addEllipse: Function;
-  addText: Function;
-  addLine: Function;
-  addArrow: Function;
-  connectObjects: Function;
-  addToGroup: Function;
-  toClipboard: Function;
-  create: Function;
-  createPNG: Function;
-  createSVG: Function;
-  clear: Function;
-  reset: Function;
+  canvas: {theme: string, viewBackgroundColor: string};
+  setFillStyle(val:number): void;
+  setStrokeStyle(val:number): void;
+  setStrokeSharpness(val:number): void;
+  setFontFamily(val:number): void;
+  setTheme(val:number): void;
+  addToGroup(objectIds:[]):void;
+  addRect(topX:number, topY:number, width:number, height:number):string;
+  addDiamond(topX:number, topY:number, width:number, height:number):string;
+  addEllipse(topX:number, topY:number, width:number, height:number):string;
+  addText(topX:number, topY:number, text:string, formatting?:{width?:number, height?:number,textAlign?: string, verticalAlign?:string, box?: boolean, boxPadding?: number},id?:string):string;
+  addLine(points: [[x:number,y:number]]):void;
+  addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void ;
+  connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints: number,startArrowHead:string,endArrowHead:string, padding: number}):void;
+  toClipboard(templatePath?:string): void;
+  create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean}):Promise<void>;
+  createSVG(templatePath?:string):Promise<SVGSVGElement>;
+  createPNG(templatePath?:string):Promise<any>;
+  wrapText(text:string, lineLen:number):string;
+  clear(): void;
+  reset(): void;
+  isExcalidrawFile(f:TFile): boolean;  
 };
 ```

docs/API/utility.md

@@ -46,4 +46,10 @@ Returns an HTML SVGSVGElement containing the generated drawing.
 ```typescript
 async createPNG(templatePath?:string, scale:number=1)
 ```
-Returns a blob containing a PNG image of the generated drawing.
+Returns a blob containing a PNG image of the generated drawing.
+
+### wrapText()
+```typescript
+wrapText(text:string, lineLen:number):string
+```
+Returns a string wrapped to the provided max lineLen.

manifest.json

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

src/ExcalidrawAutomate.ts

@@ -16,6 +16,7 @@ import {
   nanoid, 
   JSON_parse 
 } from "./constants";
+import { wrapText } from "./Utils";
 
 declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
 
@@ -52,6 +53,7 @@ export interface ExcalidrawAutomate extends Window {
     create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean}):Promise<void>;
     createSVG(templatePath?:string):Promise<SVGSVGElement>;
     createPNG(templatePath?:string):Promise<any>;
+    wrapText(text:string, lineLen:number):string;
     addRect(topX:number, topY:number, width:number, height:number):string;
     addDiamond(topX:number, topY:number, width:number, height:number):string;
     addEllipse(topX:number, topY:number, width:number, height:number):string;
@@ -177,7 +179,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         params?.filename ? params.filename + '.excalidraw.md' : this.plugin.getNextDefaultFilename(),
         params?.onNewPane ? params.onNewPane : false,
         params?.foldername ? params.foldername : this.plugin.settings.folder,
-        FRONTMATTER + exportSceneToMD(
+        FRONTMATTER + plugin.exportSceneToMD(
         JSON.stringify({
           type: "excalidraw",
           version: 2,
@@ -251,6 +253,9 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         scale
       )  
     },
+    wrapText(text:string, lineLen:number):string {
+      return wrapText(text,lineLen);
+    },
     addRect(topX:number, topY:number, width:number, height:number):string {
       const id = nanoid();
       this.elementIds.push(id);
@@ -492,30 +497,3 @@ async function getTemplate(fileWithPath: string):Promise<{elements: any,appState
   }
 }
 
-/**
- * Extracts the text elements from an Excalidraw scene into a string of ids as headers followed by the text contents
- * @param {string} data - Excalidraw scene JSON string
- * @returns {string} - Text starting with the "# Text Elements" header and followed by each "## id-value" and text
- */
- export function exportSceneToMD(data:string): string {
-  if(!data) return "";
-  const excalidrawData = JSON_parse(data);
-  const textElements = excalidrawData.elements?.filter((el:any)=> el.type=="text")
-  let outString = '# Text Elements\n';
-  let id:string;
-  for (const te of textElements) {
-    id = te.id;
-    //replacing Excalidraw text IDs with my own, because default IDs may contain 
-    //characters not recognized by Obsidian block references
-    //also Excalidraw IDs are inconveniently long
-    if(te.id.length>8) {  
-      id=nanoid();
-      data = data.replaceAll(te.id,id); //brute force approach to replace all occurances.
-    }
-    outString += te.text+' ^'+id+'\n\n';
-  }
-  return outString + '# Drawing\n'
-         + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'json\n' 
-         + data + '\n'
-         + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96);
-}

src/ExcalidrawData.ts

@@ -3,6 +3,7 @@ import {
   nanoid,
   FRONTMATTER_KEY_CUSTOM_PREFIX,
   FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS,
+  FRONTMATTER_KEY_CUSTOM_URL_PREFIX,
 } from "./constants";
 import { measureText } from "./ExcalidrawAutomate";
 import ExcalidrawPlugin from "./main";
@@ -10,16 +11,46 @@ import { ExcalidrawSettings } from "./settings";
 import {  
   JSON_parse
 } from "./constants";
-import { ExcalidrawTextElement } from "@zsviczian/excalidraw/types/element/types";
-import { rawListeners } from "process";
 import { TextMode } from "./ExcalidrawView";
-import { link } from "fs";
+import { wrapText } from "./Utils";
 
-const DRAWING_REG = /\n# Drawing\n(```json\n)?(.*)(```)?/gm;
 
-//![[link|alias]]![alias](link)
-//1  2    3      4 5      6
-export const REG_LINK_BACKETS = /(!)?\[\[([^|\]]+)\|?(.+)?]]|(!)?\[(.*)\]\((.*)\)/g;
+declare module "obsidian" {
+  interface MetadataCache {
+    blockCache: {
+      getForFile(x:any,f:TAbstractFile):any;
+    }
+  }
+}
+
+
+const DRAWING_REG = /[\r\n]# Drawing[\r\n](```json[\r\n])?(.*)(```)?(%%)?/gm;
+
+export const REGEX_LINK = {
+  //![[link|alias]] [alias](link){num}
+  //12 3    4        5      6    7 8
+  EXPR: /(!)?(\[\[([^|\]]+)\|?(.+)?]]|\[(.*)\]\((.*)\))(\{(\d+)\})?/g,
+  isTransclusion: (parts: IteratorResult<RegExpMatchArray, any>):boolean => {
+    return parts.value[1] ? true:false;
+  },
+  getLink: (parts: IteratorResult<RegExpMatchArray, any>):string => {
+    return parts.value[3] ? parts.value[3] : parts.value[6];
+  },
+  isWikiLink: (parts: IteratorResult<RegExpMatchArray, any>):boolean => {
+    return parts.value[3] ? true:false;
+  },
+  getAliasOrLink: (parts: IteratorResult<RegExpMatchArray, any>):string => {
+    return REGEX_LINK.isWikiLink(parts)
+           ? (parts.value[4] ? parts.value[4] : parts.value[3]) 
+           : (parts.value[5] ? parts.value[5] : parts.value[6]);
+  },
+  getWrapLength: (parts: IteratorResult<RegExpMatchArray, any>):number => {
+    return parts.value[8];
+  }
+}
+
+
+export const REG_LINKINDEX_HYPERLINK = /^\w+:\/\//;
 
 export function getJSON(data:string):string {
   const res = data.matchAll(DRAWING_REG);
@@ -35,13 +66,15 @@ export class ExcalidrawData {
   private textElements:Map<string,{raw:string, parsed:string}> = null; 
   public scene:any = null;
   private file:TFile = null;
-  private settings:ExcalidrawSettings;
   private app:App;
   private showLinkBrackets: boolean;
   private linkPrefix: string;
+  private urlPrefix: string;
   private textMode: TextMode = TextMode.raw;
+  private plugin: ExcalidrawPlugin;
+
   constructor(plugin: ExcalidrawPlugin) {
-    this.settings = plugin.settings;
+    this.plugin = plugin;
     this.app = plugin.app;
   }  
 
@@ -59,9 +92,15 @@ export class ExcalidrawData {
     //The drawing will use these values until next drawing is loaded or this drawing is re-loaded
     this.setShowLinkBrackets();
     this.setLinkPrefix();  
+    this.setUrlPrefix();
     
     this.scene = null;
-    if (this.settings.syncExcalidraw) {
+
+    //In compatibility mode if the .excalidraw file was more recently updated than the .md file, then the .excalidraw file
+    //should be loaded as the scene.
+    //This feature is mostly likely only relevant to people who use Obsidian and Logseq on the same vault and edit .excalidraw
+    //drawings in Logseq.
+    if (this.plugin.settings.syncExcalidraw) {
       const excalfile = file.path.substring(0,file.path.lastIndexOf('.md')) + '.excalidraw';
       const f = this.app.vault.getAbstractFileByPath(excalfile);
       if(f && f instanceof TFile && f.stat.mtime>file.stat.mtime) { //the .excalidraw file is newer then the .md file
@@ -76,19 +115,22 @@ export class ExcalidrawData {
     if(!this.scene) { //scene was not loaded from .excalidraw
       const scene = parts.value[2];
       this.scene = JSON_parse(scene.substr(0,scene.lastIndexOf("}")+1)); //this is a workaround to address when files are mereged by sync and one version is still an old markdown without the codeblock ```
+      //using JSON_parse for legacy compatibiltiy. In an earlier version Excalidraw JSON was not enclosed in a codeblock
     }
     //Trim data to remove the JSON string
     data = data.substring(0,parts.value.index);
 
-    //The Markdown # Text Elements take priority over the JSON text elements. 
-    //i.e. if the JSON is modified to reflect the MD in case of difference
+    //The Markdown # Text Elements take priority over the JSON text elements. Assuming the scenario in which the link was updated due to filename changes
+    //The .excalidraw JSON is modified to reflect the MD in case of difference
     //Read the text elements into the textElements Map
     let position = data.search("# Text Elements");
     if(position==-1) return true; //Text Elements header does not exist
     position += "# Text Elements\n".length;
     
+    //iterating through all the text elements in .md
+    //Text elements always contain the raw value
     const BLOCKREF_LEN:number = " ^12345678\n\n".length;
-    const res = data.matchAll(/\s\^(.{8})\n/g);
+    const res = data.matchAll(/\s\^(.{8})[\r\n]/g);
     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)});
@@ -107,9 +149,10 @@ export class ExcalidrawData {
     this.textElements = new Map<string,{raw:string, parsed:string}>();
     this.setShowLinkBrackets();
     this.setLinkPrefix(); 
+    this.setUrlPrefix();
     this.scene = JSON.parse(data);
     this.findNewTextElementsInScene();
-    await this.setTextMode(TextMode.raw,true);
+    await this.setTextMode(TextMode.raw,true); //legacy files are always displayed in raw mode.
     return true;
   }
 
@@ -184,7 +227,7 @@ export class ExcalidrawData {
       if(te.id.length > 8 && this.textElements.has(te.id)) { //element was created with onBeforeTextSubmit
         const element = this.textElements.get(te.id);
         this.textElements.set(id,{raw: element.raw, parsed: element.parsed})
-        this.textElements.delete(te.id);
+        this.textElements.delete(te.id); //delete the old ID from the Map
         dirty = true;
       } else if(!this.textElements.has(id)) {
         dirty = true;
@@ -193,7 +236,7 @@ export class ExcalidrawData {
       }
     }
     if(dirty) { //reload scene json in case it has changed
-      this.scene = JSON_parse(jsonString);
+      this.scene = JSON.parse(jsonString);
     }
 
     return dirty;
@@ -204,7 +247,6 @@ export class ExcalidrawData {
    * and updating the textElement map based on the text updated in the scene
    */
   private async updateTextElementsFromScene() {
-    //console.log("Excalidraw.Data.updateTextElementesFromScene()");
     for(const key of this.textElements.keys()){
       //find text element in the scene
       const el = this.scene.elements?.filter((el:any)=> el.type=="text" && el.id==key);
@@ -223,39 +265,17 @@ export class ExcalidrawData {
     }
   }
 
-  /**
-   * update text element map by deleting entries that are no long in the scene
-   * and updating the textElement map based on the text updated in the scene
-   */
-   private updateTextElementsFromSceneRawOnly() {
-    //console.log("Excalidraw.Data.updateTextElementsFromSceneRawOnly()");
-    for(const key of this.textElements.keys()){
-      //find text element in the scene
-      const el = this.scene.elements?.filter((el:any)=> el.type=="text" && el.id==key);
-      if(el.length==0) {
-        this.textElements.delete(key); //if no longer in the scene, delete the text element
-      } else {
-        if(!this.textElements.has(key)) {
-          this.textElements.set(key,{raw: el[0].text,parsed: null});
-          this.parseasync(key,el[0].text);
-        } else {
-          const text = (this.textMode == TextMode.parsed) ? this.textElements.get(key).parsed : this.textElements.get(key).raw;
-          if(text != el[0].text) {
-            this.textElements.set(key,{raw: el[0].text,parsed: null});
-            this.parseasync(key,el[0].text);
-          }
-        }
-      }
-    }
-  }
-
   private async parseasync(key:string, raw:string) {
     this.textElements.set(key,{raw:raw,parsed: await this.parse(raw)});
   }
 
   private parseLinks(text:string, position:number, parts:any):string {
-    let outString = null;
-    if (parts.value[2]) {
+    return text.substring(position,parts.value.index) + 
+           (this.showLinkBrackets ? "[[" : "") +
+           REGEX_LINK.getAliasOrLink(parts) +
+           (this.showLinkBrackets ? "]]" : "");
+    /*let outString = null;
+    if (REGEX_LINK.isWikiLink(parts)) { //parts.value[2]
       outString = text.substring(position,parts.value.index) + 
                    (this.showLinkBrackets ? "[[" : "") +
                    (parts.value[3] ? parts.value[3]:parts.value[2]) + //insert alias or link text
@@ -266,7 +286,7 @@ export class ExcalidrawData {
                    (parts.value[5] ? parts.value[5]:parts.value[6]) + //insert alias or link text
                    (this.showLinkBrackets ? "]]" : "");
     }
-    return outString;
+    return outString;*/
   }
 
   /**
@@ -277,33 +297,57 @@ export class ExcalidrawData {
   private async parse(text:string):Promise<string>{
     const getTransclusion = async (text:string) => {
       //file-name#^blockref
-      //1          2
-      const REG_FILE_BLOCKREF = /(.*)#\^(.*)/g;
+      //1         2 3
+      const REG_FILE_BLOCKREF = /(.*)#(\^)?(.*)/g;
       const parts=text.matchAll(REG_FILE_BLOCKREF).next();
-      if(parts.done || !parts.value[1] || !parts.value[2]) return text; //filename and/or blockref not found
+      if(parts.done || !parts.value[1] || !parts.value[3]) return text; //filename and/or blockref not found
       const file = this.app.metadataCache.getFirstLinkpathDest(parts.value[1],this.file.path);
       const contents = await this.app.vault.cachedRead(file);
-      //get transcluded line and take the part before ^blockref
-      const REG_TRANSCLUDE = new RegExp("(.*)\\s\\^" + parts.value[2]);
-      const res = contents.match(REG_TRANSCLUDE);
-      if(res) return res[1];
-      return text;//if blockref not found in file, return the input string
+      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");
+      if(!blocks) return text;
+      if(isParagraphRef) {
+        let para = blocks.filter((block:any)=>block.node.id == id)[0]?.node;
+        if(!para) return text;
+        if(["blockquote","listItem"].includes(para.type)) para = para.children[0]; //blockquotes are special, they have one child, which has the paragraph
+        const startPos = para.position.start.offset;
+        const endPos = para.children[para.children.length-1]?.position.start.offset-1; //alternative: filter((c:any)=>c.type=="blockid")[0]
+        return contents.substr(startPos,endPos-startPos)
+      
+      } else {
+        const headings = blocks.filter((block:any)=>block.display.startsWith("#"));
+        let startPos:number = null; 
+        let endPos:number = null;
+        for(let i=0;i<headings.length;i++) {
+          if(startPos && !endPos) {
+            endPos = headings[i].node.position.start.offset-1;
+            return contents.substr(startPos,endPos-startPos)
+          }
+          if(!startPos && headings[i].node.children[0]?.value == id) startPos = headings[i].node.children[0]?.position.start.offset; //
+        }
+        if(startPos) return contents.substr(startPos);
+        return text;
+      }
     }
 
     let outString = "";
     let position = 0;
-    const res = text.matchAll(REG_LINK_BACKETS);
+    const res = text.matchAll(REGEX_LINK.EXPR);
     let linkIcon = false;
+    let urlIcon = false;
     let parts;
     while(!(parts=res.next()).done) {
-      if (parts.value[1] || parts.value[4]) { //transclusion
+      if (REGEX_LINK.isTransclusion(parts)) { //transclusion //parts.value[1] || parts.value[4]
         outString += text.substring(position,parts.value.index) + 
-                     await getTransclusion(parts.value[1] ? parts.value[2] : parts.value[6]);
+                     wrapText(await getTransclusion(REGEX_LINK.getLink(parts)),REGEX_LINK.getWrapLength(parts));
       } else {
         const parsedLink = this.parseLinks(text,position,parts);
         if(parsedLink) {
-          linkIcon = true;
           outString += parsedLink;
+          if(!(urlIcon || linkIcon))
+            if(REGEX_LINK.getLink(parts).match(REG_LINKINDEX_HYPERLINK)) urlIcon = true;  
+            else linkIcon = true;
         }
       } 
       position = parts.value.index + parts.value[0].length;
@@ -312,6 +356,9 @@ export class ExcalidrawData {
     if (linkIcon) {
       outString = this.linkPrefix + outString;
     }
+    if (urlIcon) {
+      outString = this.urlPrefix + outString;
+    }
 
     return outString;
   }
@@ -325,10 +372,10 @@ export class ExcalidrawData {
    */
   private quickParse(text:string):string {
     const hasTransclusion = (text:string):boolean => {
-      const res = text.matchAll(REG_LINK_BACKETS);
+      const res = text.matchAll(REGEX_LINK.EXPR);
       let parts;
       while(!(parts=res.next()).done) {
-        if (parts.value[1] || parts.value[4]) return true;
+        if (REGEX_LINK.isTransclusion(parts)) return true; 
       }
       return false;
     }
@@ -336,14 +383,17 @@ export class ExcalidrawData {
 
     let outString = "";
     let position = 0;
-    const res = text.matchAll(REG_LINK_BACKETS);
+    const res = text.matchAll(REGEX_LINK.EXPR);
     let linkIcon = false;
+    let urlIcon = false;
     let parts;
     while(!(parts=res.next()).done) {
       const parsedLink = this.parseLinks(text,position,parts);
       if(parsedLink) {
-        linkIcon = true;
         outString += parsedLink;
+        if(!(urlIcon || linkIcon))
+          if(REGEX_LINK.getLink(parts).match(REG_LINKINDEX_HYPERLINK)) urlIcon = true;  
+          else linkIcon = true;
       }
       position = parts.value.index + parts.value[0].length;
     }
@@ -351,6 +401,9 @@ export class ExcalidrawData {
     if (linkIcon) {
       outString = this.linkPrefix + outString;
     }
+    if (urlIcon) {
+      outString = this.urlPrefix + outString;
+    }
     return outString;
   }
 
@@ -360,29 +413,25 @@ export class ExcalidrawData {
    * @returns markdown string
    */
   generateMD():string {
-    //console.log("Excalidraw.Data.generateMD()");
     let outString = '# Text Elements\n';
     for(const key of this.textElements.keys()){
       outString += this.textElements.get(key).raw+' ^'+key+'\n\n';
     }
-    return outString + '# Drawing\n' 
-           + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'json\n' 
-           + JSON.stringify(this.scene) + '\n'
-           + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96);
+    return outString + this.plugin.getMarkdownDrawingSection(JSON.stringify(this.scene));
   }
 
-  public syncElements(newScene:any):boolean {
+  public async syncElements(newScene:any):Promise<boolean> {
     //console.log("Excalidraw.Data.syncElements()");
     this.scene = newScene;//JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
-    this.updateTextElementsFromSceneRawOnly();
+    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
+    await this.updateTextElementsFromScene();
     return result;
   }
 
   public async updateScene(newScene:any){
     //console.log("Excalidraw.Data.updateScene()");
     this.scene = JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
+    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
     await this.updateTextElementsFromScene();
     if(result) {
       await this.updateSceneTextElements();
@@ -423,20 +472,33 @@ export class ExcalidrawData {
     if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_PREFIX]!=null) {
       this.linkPrefix=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_PREFIX];
     } else {
-      this.linkPrefix = this.settings.linkPrefix;
+      this.linkPrefix = this.plugin.settings.linkPrefix;
     }
     return linkPrefix != this.linkPrefix;
   }
 
+  private setUrlPrefix():boolean {
+    const urlPrefix = this.urlPrefix;
+    const fileCache = this.app.metadataCache.getFileCache(this.file);
+    if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_URL_PREFIX]!=null) {
+      this.urlPrefix=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_URL_PREFIX];
+    } else {
+      this.urlPrefix = this.plugin.settings.urlPrefix;
+    }
+    return urlPrefix != this.urlPrefix;
+  }
+
   private setShowLinkBrackets():boolean {
     const showLinkBrackets = this.showLinkBrackets;
     const fileCache = this.app.metadataCache.getFileCache(this.file);
     if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS]!=null) {
       this.showLinkBrackets=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS]!=false;
     } else {
-      this.showLinkBrackets = this.settings.showLinkBrackets;
+      this.showLinkBrackets = this.plugin.settings.showLinkBrackets;
     }
     return showLinkBrackets != this.showLinkBrackets;
   }
 
 }
+
+

src/ExcalidrawView.ts

@@ -6,7 +6,6 @@ import {
   WorkspaceItem,
   Notice,
   Menu,
-  TAbstractFile,
 } from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
@@ -28,7 +27,6 @@ import {
   FRONTMATTER_KEY,
   TEXT_DISPLAY_RAW_ICON_NAME,
   TEXT_DISPLAY_PARSED_ICON_NAME,
-  EXIT_FULLSCREEN_ICON_NAME,
   FULLSCREEN_ICON_NAME,
   JSON_parse,
   nanoid
@@ -36,10 +34,9 @@ import {
 import ExcalidrawPlugin from './main';
 import {ExcalidrawAutomate} from './ExcalidrawAutomate';
 import { t } from "./lang/helpers";
-import { ExcalidrawData, REG_LINK_BACKETS } from "./ExcalidrawData";
+import { ExcalidrawData, REG_LINKINDEX_HYPERLINK, REGEX_LINK } from "./ExcalidrawData";
 import { checkAndCreateFolder, download, getNewUniqueFilepath, splitFolderAndFilename } from "./Utils";
 import { Prompt } from "./Prompt";
-import { isRTL } from "@zsviczian/excalidraw/types/utils";
 
 declare let window: ExcalidrawAutomate;
 
@@ -57,7 +54,6 @@ export interface ExportSettings {
   withTheme: boolean
 }
 
-const REG_LINKINDEX_HYPERLINK = /^\w+:\/\//;
 const REG_LINKINDEX_INVALIDCHARS = /[<>:"\\|?*]/g;
 
 export default class ExcalidrawView extends TextFileView {
@@ -67,6 +63,7 @@ export default class ExcalidrawView extends TextFileView {
   public addText:Function = null;
   private refresh: Function = null;
   private excalidrawRef: React.MutableRefObject<any> = null;
+  private excalidrawWrapperRef: React.MutableRefObject<any> = null;
   private justLoaded: boolean = false;
   private plugin: ExcalidrawPlugin;
   private dirty: string = null;
@@ -75,10 +72,13 @@ export default class ExcalidrawView extends TextFileView {
   public textMode:TextMode = TextMode.raw;
   private textIsParsed_Element:HTMLElement;
   private textIsRaw_Element:HTMLElement;
-  private gotoFullscreen:HTMLElement;
-  private exitFullscreen:HTMLElement;
   private preventReload:boolean = true;
   public compatibilityMode: boolean = false;
+  //store key state for view mode link resolution
+  private ctrlKeyDown = false;
+  private shiftKeyDown = false;
+  private altKeyDown = false;
+  private mouseEvent:any = null;
 
   id: string = (this.leaf as any).id;
 
@@ -146,8 +146,17 @@ export default class ExcalidrawView extends TextFileView {
   }
 
   async save(preventReload:boolean=true) {
+    if(!this.getScene) return;
     this.preventReload = preventReload;
     this.dirty = null;
+    
+    if(this.compatibilityMode) {
+      await this.excalidrawData.syncElements(this.getScene());
+    } else {
+      if(await this.excalidrawData.syncElements(this.getScene()) && !this.autosaving) {
+        await this.loadDrawing(false);
+      }
+    }
     await super.save();
   }
 
@@ -158,9 +167,6 @@ export default class ExcalidrawView extends TextFileView {
     //console.log("ExcalidrawView.getViewData()");
     if(!this.getScene) return this.data;
     if(!this.compatibilityMode) {
-      if(this.excalidrawData.syncElements(this.getScene()) && !this.autosaving) {
-        this.loadDrawing(false);
-      }  
       let trimLocation = this.data.search("# Text Elements\n");
       if(trimLocation == -1) trimLocation = this.data.search("# Drawing\n");
       if(trimLocation == -1) return this.data;
@@ -177,7 +183,6 @@ export default class ExcalidrawView extends TextFileView {
       return header + this.excalidrawData.generateMD();
     }
     if(this.compatibilityMode) {
-      this.excalidrawData.syncElements(this.getScene());
       const scene = this.excalidrawData.scene;
       if(!this.autosaving) {
         if(this.plugin.settings.autoexportSVG) this.saveSVG(scene);
@@ -198,11 +203,10 @@ export default class ExcalidrawView extends TextFileView {
     }
     if(text.match(REG_LINKINDEX_HYPERLINK)) {
       window.open(text,"_blank");
-      return;    }
+      return;    
+    }
 
-    //![[link|alias]]![alias](link)
-    //1  2    3      4 5      6
-    const parts = text.matchAll(REG_LINK_BACKETS).next();    
+    const parts = text.matchAll(REGEX_LINK.EXPR).next();    
     if(!parts.value) {
       const tags = text.matchAll(/#([\p{Letter}\p{Emoji_Presentation}\p{Number}\/_-]+)/ug).next();
       if(!tags.value || tags.value.length<2) {
@@ -214,11 +218,13 @@ export default class ExcalidrawView extends TextFileView {
       //@ts-ignore
       search[0].view.setQuery("tag:"+tags.value[1]);
       this.app.workspace.revealLeaf(search[0]);
-      if(this.gotoFullscreen.style.display=="none") this.toggleFullscreen();
+      //if(this.gotoFullscreen.style.display=="none") this.toggleFullscreen();
+      document.exitFullscreen();
+      this.zoomToFit();
       return;
     }
 
-    text = parts.value[2] ? parts.value[2]:parts.value[6];
+    text = REGEX_LINK.getLink(parts); //parts.value[2] ? parts.value[2]:parts.value[6];
 
     if(text.match(REG_LINKINDEX_HYPERLINK)) {
       window.open(text,"_blank");
@@ -239,7 +245,10 @@ export default class ExcalidrawView extends TextFileView {
     }
     try {
       const f = view.file;
-      if(ev.shiftKey && this.gotoFullscreen.style.display=="none") this.toggleFullscreen();
+      if(ev.shiftKey) {
+        document.exitFullscreen();
+        this.zoomToFit();
+      }
       view.app.workspace.openLinkText(text,view.file.path,ev.shiftKey);
     } catch (e) {
       new Notice(e,4000);
@@ -258,12 +267,16 @@ export default class ExcalidrawView extends TextFileView {
     
     this.addAction("link",t("OPEN_LINK"), (ev)=>this.handleLinkClick(this,ev));
 
-    
-    this.gotoFullscreen = this.addAction(FULLSCREEN_ICON_NAME,"",()=>this.toggleFullscreen());
-    this.exitFullscreen = this.addAction(EXIT_FULLSCREEN_ICON_NAME,"",()=>this.toggleFullscreen());
-    this.exitFullscreen.hide();
     //@ts-ignore
-    if(this.app.isMobile) this.gotoFullscreen.hide();
+    if(!this.app.isMobile) {
+      this.addAction(FULLSCREEN_ICON_NAME,"Press ESC to exit fullscreen mode",()=>{
+        this.contentEl.requestFullscreen();//{navigationUI: "hide"});
+        if(this.excalidrawWrapperRef) this.excalidrawWrapperRef.current.focus();
+      });
+      this.contentEl.onfullscreenchange = () => {
+        this.zoomToFit();
+      }
+    }
 
     //this is to solve sliding panes bug
     if (this.app.workspace.layoutReady) {
@@ -276,21 +289,6 @@ export default class ExcalidrawView extends TextFileView {
     this.setupAutosaveTimer();
   }
 
-  private toggleFullscreen() {
-    //@ts-ignore
-    if(this.app.isMobile) return;
-    if(this.exitFullscreen.style.display=="none") {
-      this.containerEl.requestFullscreen();
-      this.gotoFullscreen.hide();
-      this.exitFullscreen.show();
-    } else {
-      document.exitFullscreen();
-      this.gotoFullscreen.show();
-      this.exitFullscreen.hide();
-    }
-    this.zoomToFit();
-  }
-
   public async changeTextMode(textMode:TextMode,reload:boolean=true) {
     this.textMode = textMode;
     if(textMode == TextMode.parsed) {
@@ -316,23 +314,18 @@ export default class ExcalidrawView extends TextFileView {
       }
     }
     if(this.autosaveTimer) clearInterval(this.autosaveTimer); // clear previous timer if one exists
-    //if(this.plugin.settings.autosave) {
     this.autosaveTimer = setInterval(timer,20000);
-    //}
   }
 
   //save current drawing when user closes workspace leaf
   async onunload() {
-    //console.log("ExcalidrawView.onunload()");
     if(this.autosaveTimer) {
       clearInterval(this.autosaveTimer);
       this.autosaveTimer = null;
     }
-    //if(this.excalidrawRef) await this.save();
   }
 
   public async reload(fullreload:boolean = false, file?:TFile){
-    //console.log("ExcalidrawView.reload(), fullreload",fullreload,"preventReload",this.preventReload);
     if(this.preventReload) {
       this.preventReload = false;
       return;
@@ -342,7 +335,7 @@ export default class ExcalidrawView extends TextFileView {
     if(file) this.data = await this.app.vault.read(file);
     if(fullreload) await this.excalidrawData.loadData(this.data, this.file,this.textMode);
     else await this.excalidrawData.setTextMode(this.textMode);
-    this.loadDrawing(false);
+    await this.loadDrawing(false);
     this.dirty = null;
   }
 
@@ -371,7 +364,7 @@ export default class ExcalidrawView extends TextFileView {
         if(!(await this.excalidrawData.loadData(data, this.file,this.textMode))) return;
       }
       if(clear) this.clear();
-      this.loadDrawing(true)
+      await this.loadDrawing(true)
     });
   }
 
@@ -379,7 +372,7 @@ export default class ExcalidrawView extends TextFileView {
    * 
    * @param justloaded - a flag to trigger zoom to fit after the drawing has been loaded
    */
-  private loadDrawing(justloaded:boolean) {        
+  private async loadDrawing(justloaded:boolean) {        
     const excalidrawData = this.excalidrawData.scene;
     if(this.excalidrawRef) {
       const viewModeEnabled = this.excalidrawRef.current.getAppState().viewModeEnabled;
@@ -398,15 +391,16 @@ export default class ExcalidrawView extends TextFileView {
         },
         commitToHistory: true,
       });
+      if((this.app.workspace.activeLeaf === this.leaf) && this.excalidrawWrapperRef) {
+        this.excalidrawWrapperRef.current.focus();
+      }
     } else {
       this.justLoaded = justloaded; 
-      (async() => {
-        this.instantiateExcalidraw({
-          elements: excalidrawData.elements,
-          appState: excalidrawData.appState,
-          libraryItems: await this.getLibrary(),
-        });
-      })();
+      this.instantiateExcalidraw({
+        elements: excalidrawData.elements,
+        appState: excalidrawData.appState,
+        libraryItems: await this.getLibrary(),
+      });
     }
   }
 
@@ -548,6 +542,8 @@ export default class ExcalidrawView extends TextFileView {
       });
       
       this.excalidrawRef = excalidrawRef;
+      this.excalidrawWrapperRef = excalidrawWrapperRef;
+
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth, 
@@ -570,9 +566,9 @@ export default class ExcalidrawView extends TextFileView {
       this.getSelectedTextElement = ():{id: string, text:string} => {
         if(!excalidrawRef?.current) return {id:null,text:null};
         if(this.excalidrawRef.current.getAppState().viewModeEnabled) {
-          if(selected) {
-            const retval = selected;
-            selected == null;
+          if(selectedTextElement) {
+            const retval = selectedTextElement;
+            selectedTextElement == null;
             return retval;
           }
           return {id:null,text:null};
@@ -665,155 +661,260 @@ export default class ExcalidrawView extends TextFileView {
       };
 
       //variables used to handle click events in view mode
-      let selected:{id:string,text:string} = null;
-      let ctrlKeyDown = false;
-      let block = false;
+      let selectedTextElement:{id:string,text:string} = null;
+      let timestamp = 0;
+      let blockOnMouseButtonDown = false;
 
+      const getTextElementAtPointer = (pointer:any) => {
+        const elements = this.excalidrawRef.current.getSceneElements()
+                             .filter((e:ExcalidrawElement)=>{
+                                return e.type == "text" 
+                                       && e.x<=pointer.x && (e.x+e.width)>=pointer.x
+                                       && e.y<=pointer.y && (e.y+e.height)>=pointer.y;
+                              });
+        if(elements.length==0) return null;
+        return {id:elements[0].id,text:elements[0].text};
+      }
+ 
+      let hoverPoint = {x:0,y:0};
+      let hoverPreviewTarget:EventTarget = null;
+      const clearHoverPreview = () => {
+        if(hoverPreviewTarget) {
+          const event = new MouseEvent('click', {
+            'view': window,
+            'bubbles': true,
+            'cancelable': true,
+          });
+          hoverPreviewTarget.dispatchEvent(event);
+          hoverPreviewTarget = null;
+        }
+      }
+
+      const excalidrawDiv = React.createElement(
+        "div",
+        {
+          className: "excalidraw-wrapper",
+          ref: excalidrawWrapperRef,
+          key: "abc",
+          tabIndex: 0,
+          onKeyDown: (e:any) => {
+            if(document.fullscreenEnabled && document.fullscreenElement == this.contentEl && e.keyCode==27) document.exitFullscreen();
+            this.ctrlKeyDown  = e.ctrlKey;
+            this.shiftKeyDown = e.shiftKey;
+            this.altKeyDown   = e.altKey;
+
+            if(e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey) {
+              const selectedElement = getTextElementAtPointer(currentPosition);
+              if(!selectedElement) return;
+
+              const text:string = (this.textMode == TextMode.parsed) 
+              ? this.excalidrawData.getRawText(selectedElement.id) 
+              : selectedElement.text;                
+
+              if(!text) return;
+              if(text.match(REG_LINKINDEX_HYPERLINK)) return;   
+
+              const parts = text.matchAll(REGEX_LINK.EXPR).next();    
+              if(!parts.value) return; 
+              let linktext = REGEX_LINK.getLink(parts); //parts.value[2] ? parts.value[2]:parts.value[6];
+
+              if(linktext.match(REG_LINKINDEX_HYPERLINK)) return;
+
+              this.plugin.hover.linkText = linktext; 
+              this.plugin.hover.sourcePath = this.file.path;
+              hoverPreviewTarget = this.contentEl; //e.target;
+              this.app.workspace.trigger('hover-link', {
+                event: this.mouseEvent,
+                source: VIEW_TYPE_EXCALIDRAW,
+                hoverParent: hoverPreviewTarget,
+                targetEl: hoverPreviewTarget,
+                linktext: this.plugin.hover.linkText,
+                sourcePath: this.plugin.hover.sourcePath
+              });
+              hoverPoint = currentPosition;
+              if(document.fullscreenElement === this.contentEl) {
+                const self = this;
+                setTimeout(()=>{
+                  const popover = document.body.querySelector("div.popover");
+                  if(popover) self.contentEl.append(popover);
+                },100)
+              }
+            }
+          },
+          onKeyUp: (e:any) => {
+            this.ctrlKeyDown  = e.ctrlKey;
+            this.shiftKeyDown = e.shiftKey;
+            this.altKeyDown   = e.altKey;
+          },
+          onClick: (e:MouseEvent):any => {
+            //@ts-ignore
+            if(!(e.ctrlKey||e.metaKey)) return;
+            if(!(this.plugin.settings.allowCtrlClick)) return;
+            if(!this.getSelectedTextElement().id) return;
+            this.handleLinkClick(this,e);
+          },
+          onMouseMove: (e:MouseEvent) => {
+            //@ts-ignore
+            this.mouseEvent = e.nativeEvent;
+          },
+          onMouseOver: (e:MouseEvent) => {
+            clearHoverPreview();
+            //console.log(e);
+          },
+        
+        },
+        React.createElement(Excalidraw.default, {
+          ref: excalidrawRef,
+          width: dimensions.width,
+          height: dimensions.height,
+          UIOptions: {
+            canvasActions: {
+              loadScene: false,
+              saveScene: false,
+              saveAsScene: false,
+              export: { saveFileToDisk: false },
+              saveAsImage: false,
+              saveToActiveFile: false,
+            },
+          },
+          initialData: initdata,
+          detectScroll: true,
+          onPointerUpdate: (p:any) => {
+            currentPosition = p.pointer;
+            if(hoverPreviewTarget && (Math.abs(hoverPoint.x-p.pointer.x)>50 || Math.abs(hoverPoint.y-p.pointer.y)>50)) clearHoverPreview();
+            if(!this.excalidrawRef.current.getAppState().viewModeEnabled) return;
+            const handleLinkClick = () => {
+              selectedTextElement = getTextElementAtPointer(p.pointer);
+              if(selectedTextElement) {
+                const event = new MouseEvent("click", {ctrlKey: true, shiftKey: this.shiftKeyDown, altKey:this.altKeyDown});
+                this.handleLinkClick(this,event);
+                selectedTextElement = null;
+              }          
+            }
+
+            const buttonDown = !blockOnMouseButtonDown && p.button=="down";
+            if(buttonDown) {
+              blockOnMouseButtonDown = true;
+
+              //ctrl click
+              if(this.ctrlKeyDown) {
+                handleLinkClick();
+                return;
+              }
+              
+              //dobule click
+              const now = (new Date()).getTime();
+              if(now-timestamp < 600) {
+                handleLinkClick();
+              }           
+              timestamp = now;
+              return;
+            }
+            if (p.button=="up") { 
+              blockOnMouseButtonDown=false;
+            }
+          },
+          onChange: (et:ExcalidrawElement[],st:AppState) => {
+            if(this.justLoaded) {
+              this.justLoaded = false;             
+              this.zoomToFit();
+              previousSceneVersion = getSceneVersion(et);
+              return;
+            } 
+            if (st.editingElement == null && st.resizingElement == null && 
+                st.draggingElement == null && st.editingGroupId == null &&
+                st.editingLinearElement == null ) {
+              const sceneVersion = getSceneVersion(et);
+              if(sceneVersion != previousSceneVersion) {
+                previousSceneVersion = sceneVersion;
+                this.dirty=this.file?.path;
+              }
+            }
+          },
+          onLibraryChange: (items:LibraryItems) => {
+            (async () => {
+              this.plugin.setStencilLibrary(EXCALIDRAW_LIB_HEADER+JSON.stringify(items)+'}');
+              await this.plugin.saveSettings();  
+            })();
+          },
+          /*onPaste: (data: ClipboardData, event: ClipboardEvent | null) => {
+            console.log(data,event);
+            return true;
+          },*/
+          onBeforeTextEdit: (textElement: ExcalidrawTextElement) => {
+            if(this.autosaveTimer) { //stopping autosave to avoid autosave overwriting text while the user edits it
+              clearInterval(this.autosaveTimer);
+              this.autosaveTimer = null;
+            }
+            if(this.textMode==TextMode.parsed) return this.excalidrawData.getRawText(textElement.id);
+            return null;
+          },
+          onBeforeTextSubmit: (textElement: ExcalidrawTextElement, text:string, isDeleted:boolean) => {
+            if(isDeleted) {
+              this.excalidrawData.deleteTextElement(textElement.id);
+              this.dirty=this.file?.path;
+              this.setupAutosaveTimer();
+              return;
+            } 
+            //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
+              //setTextElement will attempt a quick parse (without processing transclusions)
+              const parseResult = this.excalidrawData.setTextElement(textElement.id, text,async ()=>{
+                await this.save(false);
+                //this callback function will only be invoked if quick parse fails, i.e. there is a transclusion in the raw text
+                //thus I only check if TextMode.parsed, text is always != with parseResult
+                if(this.textMode == TextMode.parsed) this.excalidrawRef.current.history.clear(); 
+                this.setupAutosaveTimer(); 
+              });
+              if(parseResult) { //there were no transclusions in the raw text, quick parse was successful
+                this.setupAutosaveTimer();
+                if(this.textMode == TextMode.raw) return; //text is displayed in raw, no need to clear the history, undo will not create problems
+                if(text == parseResult) return; //There were no links to parse, raw text and parsed text are equivalent
+                this.excalidrawRef.current.history.clear();
+                return parseResult;
+              }
+              return;
+            }
+            this.setupAutosaveTimer();
+            if(this.textMode==TextMode.parsed) return this.excalidrawData.getParsedText(textElement.id);
+          }
+        })
+      );
+      
       return React.createElement(
         React.Fragment,
         null,
-        React.createElement(
-          "div",
-          {
-            className: "excalidraw-wrapper",
-            ref: excalidrawWrapperRef,
-            key: "abc",
-            onKeyDown: (e:any) => ctrlKeyDown = e.ctrlKey,
-            onKeyUp: (e:any) => ctrlKeyDown = e.ctrlKey,
-            onClick: (e:MouseEvent):any => {
-              //@ts-ignore
-              if(!(e.ctrlKey||e.metaKey)) return;
-              if(!(this.plugin.settings.allowCtrlClick)) return;
-              if(!this.getSelectedTextElement().id) return;
-              this.handleLinkClick(this,e);
-            }
-          },
-          React.createElement(Excalidraw.default, {
-            ref: excalidrawRef,
-            width: dimensions.width,
-            height: dimensions.height,
-            UIOptions: {
-              canvasActions: {
-                loadScene: false,
-                saveScene: false,
-                saveAsScene: false,
-                export: { saveFileToDisk: false },
-                saveAsImage: false,
-                saveToActiveFile: false,
-              },
-            },
-            initialData: initdata,
-            detectScroll: true,
-            onPointerUpdate: (p:any) => {
-              currentPosition = p.pointer;
-              if(!this.excalidrawRef.current.getAppState().viewModeEnabled) return;
-              if (ctrlKeyDown && !block && p.button=="down") {
-                block = true; //this is to avoid handleLinkClick firing multiple times on a single click
-                const elements = this.excalidrawRef.current.getSceneElements()
-                                   .filter((e:ExcalidrawElement)=>{
-                                      return e.type == "text" 
-                                             && e.x<=p.pointer.x && (e.x+e.width)>=p.pointer.x
-                                             && e.y<=p.pointer.y && (e.y+e.height)>=p.pointer.y;
-                                   });
-                if(elements.length>0) {
-                  selected = {id:elements[0].id,text:elements[0].text};
-                  this.handleLinkClick(this,new MouseEvent("click", {ctrlKey: true}));
-                  selected = null;
-                }          
-              }
-              if (p.button=="up") block=false;
-            },
-            onChange: (et:ExcalidrawElement[],st:AppState) => {
-              if(this.justLoaded) {
-                this.justLoaded = false;             
-                this.zoomToFit();
-                previousSceneVersion = getSceneVersion(et);
-                return;
-              } 
-              if (st.editingElement == null && st.resizingElement == null && 
-                  st.draggingElement == null && st.editingGroupId == null &&
-                  st.editingLinearElement == null ) {
-                const sceneVersion = getSceneVersion(et);
-                if(sceneVersion != previousSceneVersion) {
-                  previousSceneVersion = sceneVersion;
-                  this.dirty=this.file?.path;
-                }
-              }
-            },
-            onLibraryChange: (items:LibraryItems) => {
-              (async () => {
-                this.plugin.setStencilLibrary(EXCALIDRAW_LIB_HEADER+JSON.stringify(items)+'}');
-                await this.plugin.saveSettings();  
-              })();
-            },
-            /*onPaste: (data: ClipboardData, event: ClipboardEvent | null) => {
-              console.log(data,event);
-              return true;
-            },*/
-            onBeforeTextEdit: (textElement: ExcalidrawTextElement) => {
-              if(this.autosaveTimer) { //stopping autosave to avoid autosave overwriting text while the user edits it
-                clearInterval(this.autosaveTimer);
-                this.autosaveTimer = null;
-              }
-              if(this.textMode==TextMode.parsed) return this.excalidrawData.getRawText(textElement.id);
-              return null;
-            },
-            onBeforeTextSubmit: (textElement: ExcalidrawTextElement, text:string, isDeleted:boolean) => {
-              if(isDeleted) {
-                this.excalidrawData.deleteTextElement(textElement.id);
-                this.dirty=this.file?.path;
-                this.setupAutosaveTimer();
-                return;
-              } 
-              //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
-                //setTextElement will attempt a quick parse (without processing transclusions)
-                const parseResult = this.excalidrawData.setTextElement(textElement.id, text,async ()=>{
-                  await this.save(false);
-                  //this callback function will only be invoked if quick parse fails, i.e. there is a transclusion in the raw text
-                  //thus I only check if TextMode.parsed, text is always != with parseResult
-                  if(this.textMode == TextMode.parsed) this.excalidrawRef.current.history.clear(); 
-                  this.setupAutosaveTimer(); 
-                });
-                if(parseResult) { //there were no transclusions in the raw text, quick parse was successful
-                  this.setupAutosaveTimer();
-                  if(this.textMode == TextMode.raw) return; //text is displayed in raw, no need to clear the history, undo will not create problems
-                  if(text == parseResult) return; //There were no links to parse, raw text and parsed text are equivalent
-                  this.excalidrawRef.current.history.clear();
-                  return parseResult;
-                }
-                return;
-              }
-              this.setupAutosaveTimer();
-              if(this.textMode==TextMode.parsed) return this.excalidrawData.getParsedText(textElement.id);
-            }
-          })
-        )
+        excalidrawDiv
       );
+
     });
-    ReactDOM.render(reactElement,this.contentEl);  
+    ReactDOM.render(reactElement,this.contentEl,()=>this.excalidrawWrapperRef.current.focus());  
   }
 
   private zoomToFit() {
     //when viewmode is enabled Excalidraw only listens to Alt+R
     const el = this.containerEl;
+    const self = this;
     const pattern = this.excalidrawRef.current.getAppState().viewModeEnabled 
-                    ? [250,500,750] : [null,250,null];
+                    ? [100,200,300] : [null,100,null];
     if(pattern[0])
       setTimeout(()=>{
         const e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, altKey : true, code:"KeyR"});
         el.querySelector("canvas")?.dispatchEvent(e);
+        self.altKeyDown = false;
       },pattern[0]);
     if(pattern[1])
       setTimeout(()=>{
         const e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, shiftKey : true, code:"Digit1"});
         el.querySelector("canvas")?.dispatchEvent(e);
+        self.shiftKeyDown = false;
       },pattern[1])
     if(pattern[2])
       setTimeout(()=>{
         const e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, altKey : true, code:"KeyR"});
         el.querySelector("canvas")?.dispatchEvent(e);
+        self.altKeyDown=false;
       },pattern[2]);
   }
 

src/Utils.ts

@@ -1,4 +1,4 @@
-import { Modal, normalizePath, TAbstractFile, TFolder, Vault } from "obsidian";
+import {  normalizePath, TAbstractFile, TFolder, Vault } from "obsidian";
 import { Random } from "roughjs/bin/math";
 
 /**
@@ -60,15 +60,31 @@ export function getIMGPathFromExcalidrawFile (excalidrawPath:string,newExtension
   return fname;
 }
 
-  /**
-  * Open or create a folderpath if it does not exist
-  * @param folderpath 
-  */
-  export async function checkAndCreateFolder(vault:Vault,folderpath:string) {
-    let folder = vault.getAbstractFileByPath(folderpath);
-    if(folder && folder instanceof TFolder) return;
-    await vault.createFolder(folderpath);
-  }
+/**
+* Open or create a folderpath if it does not exist
+* @param folderpath 
+*/
+export async function checkAndCreateFolder(vault:Vault,folderpath:string) {
+  folderpath = normalizePath(folderpath);
+  let folder = vault.getAbstractFileByPath(folderpath);
+  if(folder && folder instanceof TFolder) return;
+  await vault.createFolder(folderpath);
+}
 
 let random = new Random(Date.now());
-export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
+export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
+
+//https://macromates.com/blog/2006/wrapping-text-with-regular-expressions/
+export function wrapText(text:string, lineLen:number):string {
+  if(!lineLen) return text;
+  let outstring = "";
+  //                       1                2
+  const reg = new RegExp(`(.{1,${lineLen}})(\\s+|$\\n?)|([^\\s]+)(\\s+|$\\n?)`,'gm');
+  const res = text.matchAll(reg);
+  let parts;
+  while(!(parts = res.next()).done) {
+    outstring += parts.value[1] ? parts.value[1].trimEnd() : parts.value[3].trimEnd();
+    outstring += (parts.value[2]=='\n' || parts.value[4]=='\n') ?'\n\n':'\n';
+  }
+  return outstring.trimEnd();
+}

src/constants.ts

@@ -5,6 +5,7 @@ import {customAlphabet} from "nanoid";
 export const nanoid = customAlphabet('1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',8);
 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";
 export const FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS = "excalidraw-link-brackets";
 export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
 export const ICON_NAME = "excalidraw-icon";
@@ -14,8 +15,8 @@ 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 EMPTY_MESSAGE = "Hit enter to create a new drawing";
-export const TEXT_DISPLAY_PARSED_ICON_NAME = "presentation";
-export const TEXT_DISPLAY_RAW_ICON_NAME = "quote-glyph";
+export const TEXT_DISPLAY_PARSED_ICON_NAME = "quote-glyph";
+export const TEXT_DISPLAY_RAW_ICON_NAME = "presentation";
 export const FULLSCREEN_ICON_NAME="fullscreen";
 export const EXIT_FULLSCREEN_ICON_NAME = "exit-fullscreen";
 export const DISK_ICON_NAME = "disk";

src/lang/locale/en.ts

@@ -1,4 +1,4 @@
-import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX } from "src/constants";
+import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX, FRONTMATTER_KEY_CUSTOM_URL_PREFIX } from "src/constants";
 
 // English
 export default {
@@ -21,7 +21,7 @@ export default {
   NEW_IN_ACTIVE_PANE_EMBED: "Create a new drawing - IN THE CURRENT ACTIVE PANE - and embed into active document",
   EXPORT_SVG: "Save as SVG next to the current file",
   EXPORT_PNG: "Save as PNG next to the current file",
-  TOGGLE_LOCK: "Toggle Text Element edit LOCK/UNLOCK",
+  TOGGLE_LOCK: "Toggle Text Element edit RAW/PREVIEW",
   INSERT_LINK: "Insert link to file",
   INSERT_LATEX: "Insert LaTeX-symbol (e.g. $\\theta$)",
   ENTER_LATEX: "Enter a valid LaTeX expression",
@@ -39,8 +39,8 @@ export default {
   FILENAME_INVALID_CHARS: 'File name cannot contain any of the following characters: * " \\  < > : | ?',
   FILE_DOES_NOT_EXIST: "File does not exist. Hold down ALT (or ALT+SHIFT) and CLICK link button to create a new file.",
   FORCE_SAVE: "Force-save to update transclusions in adjacent panes.\n(Please note, that autosave is always on)",
-  RAW: "Text-elements are displayed in RAW mode. Click button to change to PREVIEW mode.",
-  PARSED: "Text-elements are displayed in PREVIEW mode. Click button to change to RAW mode.",
+  RAW: "Change to PREVIEW mode (only effects text-elements with links or transclusions)",
+  PARSED: "Change to RAW mode (only effects text-elements with links or transclusions)",
   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",
@@ -77,17 +77,23 @@ export default {
               "When Obsidian files change, the matching [[link]] in your drawings will also change. " +
               "If you don't want text accidentally changing in your drawings use [[links|with aliases]].",
   LINK_BRACKETS_NAME: "Show [[brackets]] around links",
-  LINK_BRACKETS_DESC: "In preview (locked) mode, when parsing Text Elements, place brackets around links. " +
+  LINK_BRACKETS_DESC: "In PREVIEW mode, when parsing Text Elements, place brackets around links. " +
                       "You can override this setting for a specific drawing by adding '" + FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS + 
                       ": true/false' to the file\'s frontmatter.",
   LINK_PREFIX_NAME:"Link prefix",
-  LINK_PREFIX_DESC:"In preview (locked) mode, if the Text Element contains a link, precede the text with these characters. " +
+  LINK_PREFIX_DESC:"In PREVIEW mode, if the Text Element contains a link, precede the text with these characters. " +
                    "You can override this setting for a specific drawing by adding \'" + FRONTMATTER_KEY_CUSTOM_PREFIX + 
-                   ': "👉 "\' to the file\'s frontmatter.',
+                   ': "📍 "\' to the file\'s frontmatter.',
+  URL_PREFIX_NAME:"URL prefix",
+  URL_PREFIX_DESC:"In PREVIEW mode, if the Text Element contains a URL link, precede the text with these characters. " +
+                  "You can override this setting for a specific drawing by adding \'" + FRONTMATTER_KEY_CUSTOM_URL_PREFIX + 
+                  ': "🌐 "\' to the file\'s frontmatter.',
   LINK_CTRL_CLICK_NAME: "CTRL + CLICK on text to open them as links",
   LINK_CTRL_CLICK_DESC: "You can turn this feature off if it interferes with default Excalidraw features you want to use. If " +
                         "this is turned off, only the link button in the title bar of the drawing pane will open links.",
   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.",
   EMBED_WIDTH_NAME: "Default width of embedded (transcluded) image",
   EMBED_WIDTH_DESC: "The default width of an embedded drawing. You can specify a custom " +
                     "width when embedding an image using the ![[drawing.excalidraw|100]] or " +
@@ -126,7 +132,7 @@ export default {
   FILETYPE_DESC: "Excalidraw files will receive an indicator using the emojii or text defined in the next setting.",                           
   FILETAG_NAME: "Set the type indicator for excalidraw.md files",
   FILETAG_DESC: "The text or emojii to display as type indicator.",                           
-
+  INSERT_EMOJI: "Insert an emoji",
 
 
   //openDrawings.ts

src/main.ts

@@ -15,8 +15,6 @@ import {
   MarkdownRenderer,
   ViewState,
   Notice,
-  TFolder,
-  Modal,
 } from "obsidian";
 
 import { 
@@ -33,11 +31,8 @@ import {
   RERENDER_EVENT,
   FRONTMATTER_KEY,
   FRONTMATTER,
-  //LOCK_ICON,
-  TEXT_DISPLAY_PARSED_ICON_NAME,
-  TEXT_DISPLAY_RAW_ICON_NAME,
-  //UNLOCK_ICON,
-  JSON_parse
+  JSON_parse,
+  nanoid
 } from "./constants";
 import ExcalidrawView, {ExportSettings, TextMode} from "./ExcalidrawView";
 import {getJSON} from "./ExcalidrawData";
@@ -52,14 +47,25 @@ import {
 } from "./openDrawing";
 import {
   initExcalidrawAutomate,
-  destroyExcalidrawAutomate,
-  exportSceneToMD,
+  destroyExcalidrawAutomate
 } from "./ExcalidrawAutomate";
 import { Prompt } from "./Prompt";
 import { around } from "monkey-around";
 import { t } from "./lang/helpers";
 import { MigrationPrompt } from "./MigrationPrompt";
-import { checkAndCreateFolder, download, getIMGPathFromExcalidrawFile, getNewUniqueFilepath } from "./Utils";
+import { checkAndCreateFolder, download, getIMGPathFromExcalidrawFile, getNewUniqueFilepath, splitFolderAndFilename } from "./Utils";
+
+declare module "obsidian" {
+  interface App {
+    isMobile():boolean;
+  }
+  interface Vault {
+      getConfig(option:"attachmentFolderPath"): string;
+  }
+  interface Workspace {
+    on(name: 'hover-link', callback: (e:MouseEvent) => any, ctx?: any): EventRef;
+  }
+}
 
 export default class ExcalidrawPlugin extends Plugin {
   public excalidrawFileModes: { [file: string]: string } = {};
@@ -69,7 +75,7 @@ export default class ExcalidrawPlugin extends Plugin {
   private openDialog: OpenFileDialog;
   private activeExcalidrawView: ExcalidrawView = null;
   public lastActiveExcalidrawFilePath: string = null;
-  private hover: {linkText: string, sourcePath: string} = {linkText: null, sourcePath: null};
+  public hover: {linkText: string, sourcePath: string} = {linkText: null, sourcePath: null};
   private observer: MutationObserver;
   private fileExplorerObserver: MutationObserver;
   public opencount:number = 0;
@@ -83,8 +89,6 @@ export default class ExcalidrawPlugin extends Plugin {
     addIcon(DISK_ICON_NAME,DISK_ICON);
     addIcon(PNG_ICON_NAME,PNG_ICON);
     addIcon(SVG_ICON_NAME,SVG_ICON);
-    //addIcon(TEXT_DISPLAY_PARSED_ICON_NAME,LOCK_ICON);
-    //addIcon(TEXT_DISPLAY_RAW_ICON_NAME,UNLOCK_ICON);
     
     await this.loadSettings();
     this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
@@ -122,12 +126,14 @@ export default class ExcalidrawPlugin extends Plugin {
       }
     });
   }
+
   /**
    * Displays a transcluded .excalidraw image in markdown preview mode
    */
   private addMarkdownPostProcessor() {
     
     interface imgElementAttributes {
+      file?:   TFile,
       fname:   string, //Excalidraw filename
       fwidth:  string, //Display width of image
       fheight: string, //Display height of image
@@ -135,14 +141,18 @@ export default class ExcalidrawPlugin extends Plugin {
     }
 
     /**
-     * Generates an img element with the .excalidraw drawing encoded as a base64 svg
+     * Generates an img element with the drawing encoded as a base64 SVG or a PNG (depending on settings)
      * @param parts {imgElementAttributes} - display properties of the image
-     * @returns {Promise<HTMLElement>} - the IMG HTML element containing the encoded SVG image
+     * @returns {Promise<HTMLElement>} - the IMG HTML element containing the image
      */
-    const getIMG = async (parts:imgElementAttributes):Promise<HTMLElement> => {
-      const file = this.app.vault.getAbstractFileByPath(parts.fname);
-      if(!(file && file instanceof TFile)) {
-        return null;
+    const getIMG = async (imgAttributes:imgElementAttributes):Promise<HTMLElement> => {
+      let file = imgAttributes.file;
+      if(!imgAttributes.file) {
+        const f = this.app.vault.getAbstractFileByPath(imgAttributes.fname);
+        if(!(f && f instanceof TFile)) {
+          return null;
+        }
+        file = f;
       }
     
       const content = await this.app.vault.read(file);
@@ -150,16 +160,28 @@ export default class ExcalidrawPlugin extends Plugin {
         withBackground: this.settings.exportWithBackground, 
         withTheme: this.settings.exportWithTheme
       }
+      const img = createEl("img");
+      img.setAttribute("width",imgAttributes.fwidth);        
+      if(imgAttributes.fheight) img.setAttribute("height",imgAttributes.fheight);
+      img.addClass(imgAttributes.style);
+
+      
+      if(!this.settings.displaySVGInPreview) {
+        const width = parseInt(imgAttributes.fwidth);
+        let scale = 1;
+        if(width>=800) scale = 2;
+        if(width>=1600) scale = 3;
+        if(width>=2400) scale = 4;
+        const png = await ExcalidrawView.getPNG(JSON_parse(getJSON(content)),exportSettings, scale);
+        if(!png) return null;
+        img.src = URL.createObjectURL(png);
+        return img;
+      }
       let svg = await ExcalidrawView.getSVG(JSON_parse(getJSON(content)),exportSettings);
       if(!svg) return null;
       svg = ExcalidrawView.embedFontsInSVG(svg);
-      const img = createEl("img");
       svg.removeAttribute('width');
       svg.removeAttribute('height');
-      img.setAttribute("width",parts.fwidth);
-      
-      if(parts.fheight) img.setAttribute("height",parts.fheight);
-      img.addClass(parts.style);
       img.setAttribute("src","data:image/svg+xml;base64,"+btoa(unescape(encodeURIComponent(svg.outerHTML.replaceAll("&nbsp;"," ")))));
       return img;
     }
@@ -170,12 +192,12 @@ export default class ExcalidrawPlugin extends Plugin {
      * @param ctx 
      */
     const markdownPostProcessor = async (el:HTMLElement,ctx:MarkdownPostProcessorContext) => {
-      const drawings = el.querySelectorAll('.internal-embed');
-      if(drawings.length==0) return;
+      const embeddedItems = el.querySelectorAll('.internal-embed');
+      if(embeddedItems.length==0) return;
 
       let attr:imgElementAttributes={fname:"",fheight:"",fwidth:"",style:""};
-      let alt:string, img:any, parts, div, file:TFile;
-      for (const drawing of drawings) {
+      let alt:string, parts, div, file:TFile;
+      for (const drawing of embeddedItems) {
         attr.fname = drawing.getAttribute("src");
         file = this.app.metadataCache.getFirstLinkpathDest(attr.fname, ctx.sourcePath); 
         if(file && file instanceof TFile && this.isExcalidrawFile(file)) {  
@@ -185,19 +207,20 @@ export default class ExcalidrawPlugin extends Plugin {
           if(alt == attr.fname) alt = ""; //when the filename starts with numbers followed by a space Obsidian recognizes the filename as alt-text
           attr.style = "excalidraw-svg";
           if(alt) {
-            //for some reason ![]() is rendered in a DIV and ![[]] in a span by Obsidian
-            //also the alt text of the DIV does not include the altext of the image
-            //thus need to add an additional "|" character when its a span
+            //for some reason Obsidian renders ![]() in a DIV and ![[]] in a SPAN
+            //also the alt-text of the DIV does not include the alt-text of the image
+            //thus need to add an additional "|" character when its a SPAN
             if(drawing.tagName.toLowerCase()=="span") alt = "|"+alt;
-            parts = alt.match(/[^\|]*\|?(\d*)x?(\d*)\|?(.*)/);
+            //1:width, 2:height, 3:style  1      2      3
+            parts = alt.match(/[^\|]*\|?(\d*%?)x?(\d*%?)\|?(.*)/);
             attr.fwidth = parts[1]? parts[1] : this.settings.width;
             attr.fheight = parts[2];
             if(parts[3]!=attr.fname) attr.style = "excalidraw-svg" + (parts[3] ? "-" + parts[3] : "");
           }
         
           attr.fname = file?.path;
-          img = await getIMG(attr);
-          div = createDiv(attr.style, (el)=>{
+          div = createDiv(attr.style, async (el)=>{
+            const img = await getIMG(attr);
             el.append(img);
             el.setAttribute("src",file.path);
             if(attr.fwidth) el.setAttribute("w",attr.fwidth);
@@ -240,18 +263,17 @@ export default class ExcalidrawPlugin extends Plugin {
       this.hover.sourcePath = e.sourcePath;      
     };   
     this.registerEvent(
-      //@ts-ignore
       this.app.workspace.on('hover-link',hoverEvent)
     );
       
     //monitoring for div.popover.hover-popover.file-embed.is-loaded to be added to the DOM tree
-    this.observer = new MutationObserver((m)=>{
+    this.observer = new MutationObserver(async (m)=>{
       if(m.length == 0) return;
       if(!this.hover.linkText) return;
       const file = this.app.metadataCache.getFirstLinkpathDest(this.hover.linkText, this.hover.sourcePath?this.hover.sourcePath:""); 
       if(!file || !(file instanceof TFile) || !this.isExcalidrawFile(file)) return
    
-      if((file as TFile).extension == "excalidraw") {
+      if(file.extension == "excalidraw") {
         observerForLegacyFileFormat(m,file);
         return;
       }
@@ -269,12 +291,14 @@ export default class ExcalidrawPlugin extends Plugin {
       if(m[i].addedNodes[0].firstElementChild?.firstElementChild?.className=="excalidraw-svg") return;
       
       //@ts-ignore
-      if(!m[i].addedNodes[0].matchParent(".hover-popover")) return;
+      const hoverPopover = m[i].addedNodes[0].matchParent(".hover-popover");
+      if(!hoverPopover) return;
+      const node = m[i].addedNodes[0];
 
       //this div will be on top of original DIV. By stopping the propagation of the click
       //I prevent the default Obsidian feature of openning the link in the native app
-      const div = createDiv("",async (el)=>{
-        const img = await getIMG({fname:file.path,fwidth:"300",fheight:null,style:"excalidraw-svg"});
+      const div = createDiv("", async (el)=>{
+        const img = await getIMG({file:file,fname:file.path,fwidth:"300",fheight:null,style:"excalidraw-svg"});
         el.appendChild(img);
         el.setAttribute("src",file.path);
         el.onClickEvent((ev)=>{
@@ -283,12 +307,11 @@ export default class ExcalidrawPlugin extends Plugin {
           if(src) this.openDrawing(this.app.vault.getAbstractFileByPath(src) as TFile,ev.ctrlKey||ev.metaKey);
         });
       });
-      m[i].addedNodes[0].insertBefore(div,m[i].addedNodes[0].firstChild)
-      
+      node.insertBefore(div,node.firstChild)
     });
 
     //compatibility: .excalidraw file observer
-    let observerForLegacyFileFormat = (m:MutationRecord[], file:TFile) => {
+    let observerForLegacyFileFormat = async (m:MutationRecord[], file:TFile) => {
       if(!this.hover.linkText) return;
       if(m.length!=1) return;
       if(m[0].addedNodes.length != 1) return;
@@ -299,8 +322,8 @@ export default class ExcalidrawPlugin extends Plugin {
       
       //this div will be on top of original DIV. By stopping the propagation of the click
       //I prevent the default Obsidian feature of openning the link in the native app
+      const img = await getIMG({file:file,fname:file.path,fwidth:"300",fheight:null,style:"excalidraw-svg"});
       const div = createDiv("",async (el)=>{
-        const img = await getIMG({fname:file.path,fwidth:"300",fheight:null,style:"excalidraw-svg"});
         el.appendChild(img);
         el.setAttribute("src",file.path);
         el.onClickEvent((ev)=>{
@@ -326,35 +349,32 @@ export default class ExcalidrawPlugin extends Plugin {
     this.fileExplorerObserver = null;
   }
 
+  /**
+   * Display characters configured in settings, in front of the filename, if the markdown file is an excalidraw drawing
+   */
   private experimentalFileTypeDisplay() {
+    const insertFiletype = (el: HTMLElement) => {
+      if(el.childElementCount != 1) return;
+      //@ts-ignore
+      if(this.isExcalidrawFile(this.app.vault.getAbstractFileByPath(el.attributes["data-path"].value))) {
+        el.insertBefore(createDiv({cls:"nav-file-tag",text:this.settings.experimentalFileTag}),el.firstChild);
+      }
+    };   
+
     this.fileExplorerObserver = new MutationObserver((m)=>{
 
       const mutationsWithNodes = m.filter((v)=>v.addedNodes.length > 0);
       mutationsWithNodes.forEach((mu)=>{
         mu.addedNodes.forEach((n)=>{
           if(!(n instanceof Element)) return;
-          n.querySelectorAll(".nav-file-title").forEach((el)=>{
-            if(el.childElementCount == 1) {
-              //@ts-ignore
-              if(this.isExcalidrawFile(this.app.vault.getAbstractFileByPath(el.attributes["data-path"].value))) {
-                el.insertBefore(createDiv({cls:"nav-file-tag",text:this.settings.experimentalFileTag}),el.firstChild);
-              }
-            }
-          });
+          n.querySelectorAll(".nav-file-title").forEach(insertFiletype);
         });
       });
     });
 
     const self = this;
     this.app.workspace.onLayoutReady(()=>{
-      document.querySelectorAll(".nav-file-title").forEach((el)=>{
-        if(el.childElementCount == 1) {
-          //@ts-ignore
-          if(this.isExcalidrawFile(this.app.vault.getAbstractFileByPath(el.attributes["data-path"].value))) {
-            el.insertBefore(createDiv({cls:"nav-file-tag",text:this.settings.experimentalFileTag}),el.firstChild);
-          }
-        }
-      });
+      document.querySelectorAll(".nav-file-title").forEach(insertFiletype); //apply filetype to files already displayed
       this.fileExplorerObserver.observe(document.querySelector(".workspace"), {childList: true, subtree: true});
     });
     
@@ -419,7 +439,6 @@ export default class ExcalidrawPlugin extends Plugin {
       id: "excalidraw-download-lib",
       name: t("DOWNLOAD_LIBRARY"),
       callback: async () => {
-        //@ts-ignore
         if(this.app.isMobile) {
           const prompt = new Prompt(this.app, "Please provide a filename",'my-library','filename, leave blank to cancel action');
           prompt.openAndGetValue( async (filename:string)=> {
@@ -495,6 +514,26 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
+    const insertDrawingToDoc = async (inNewPane:boolean) => {
+      const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
+      if(!activeView) return;
+      let folder = this.app.vault.getConfig("attachmentFolderPath");
+      // folder == null: save to vault root
+      // folder == "./" save to same folder as current file
+      // folder == "folder" save to specific folder in vault
+      // folder == "./folder" save to specific subfolder of current active folder
+      if(folder && folder.startsWith("./")) { // folder relative to current file
+          const activeFileFolder = splitFolderAndFilename(activeView.file.path).folderpath + "/";
+          folder = normalizePath(activeFileFolder + folder.substring(2));
+      }
+      if(!folder) folder = "";
+      await checkAndCreateFolder(this.app.vault,folder);
+      const filename = activeView.file.basename + "_" + window.moment().format(this.settings.drawingFilenameDateTime)
+           + (this.settings.compatibilityMode ? '.excalidraw' : '.excalidraw.md');
+      this.embedDrawing(normalizePath(folder + "/" + filename));
+      this.createDrawing(filename, inNewPane,folder==""?null:folder);
+    }
+
     this.addCommand({
       id: "excalidraw-autocreate-and-embed",
       name: t("NEW_IN_NEW_PANE_EMBED"),
@@ -502,9 +541,7 @@ export default class ExcalidrawPlugin extends Plugin {
         if (checking) {
           return (this.app.workspace.activeLeaf.view.getViewType() == "markdown");
         } else {
-          const filename = this.getNextDefaultFilename();
-          this.embedDrawing(filename);
-          this.createDrawing(filename, true);
+          insertDrawingToDoc(true);
           return true;
         }
       },
@@ -517,9 +554,7 @@ export default class ExcalidrawPlugin extends Plugin {
         if (checking) {
           return (this.app.workspace.activeLeaf.view.getViewType() == "markdown");
         } else {
-          const filename = this.getNextDefaultFilename();
-          this.embedDrawing(filename);
-          this.createDrawing(filename, false);
+          insertDrawingToDoc(false);
           return true;
         }
       },
@@ -692,7 +727,7 @@ export default class ExcalidrawPlugin extends Plugin {
     const filename = file.name.substr(0,file.name.lastIndexOf(".excalidraw")) + (replaceExtension ? ".md" : ".excalidraw.md");
     const fname = getNewUniqueFilepath(this.app.vault,filename,normalizePath(file.path.substr(0,file.path.lastIndexOf(file.name))));
     console.log(fname);
-    const result = await this.app.vault.create(fname,FRONTMATTER + exportSceneToMD(data));
+    const result = await this.app.vault.create(fname,FRONTMATTER + this.exportSceneToMD(data));
     if (this.settings.keepInSync) {
       ['.svg','.png'].forEach( (ext:string)=>{
         const oldIMGpath = file.path.substring(0,file.path.lastIndexOf(".excalidraw")) + ext;   
@@ -850,7 +885,7 @@ export default class ExcalidrawPlugin extends Plugin {
       const deleteEventHandler = async (file:TFile) => {
         if (!(file instanceof TFile)) return;     
         //@ts-ignore
-        const isExcalidarwFile = (file.unsafeCachedData && file.unsafeCachedData.search(/---\n[\s\S]*excalidraw-plugin:\s*(locked|unlocked)\n[\s\S]*---/gm)>-1) 
+        const isExcalidarwFile = (file.unsafeCachedData && file.unsafeCachedData.search(/---[\r\n][\s\S]*excalidraw-plugin:\s*(locked|unlocked)[\r\n][\s\S]*---/gm)>-1) 
                                  || (file.extension=="excalidraw");
         if(!isExcalidarwFile) return;
 
@@ -878,14 +913,11 @@ export default class ExcalidrawPlugin extends Plugin {
       );
 
       //save open drawings when user quits the application
-      const quitEventHandler = (tasks: Tasks) => {
+      const quitEventHandler = async (tasks: Tasks) => {
         const leaves = self.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);      
         for (let i=0;i<leaves.length;i++) {
-          (leaves[i].view as ExcalidrawView).save(); 
+          await (leaves[i].view as ExcalidrawView).save(true); 
         }
-        this.settings.drawingOpenCount += this.opencount;
-        this.settings.loadCount++;
-        //this.saveSettings();
       }
       self.registerEvent(
         self.app.workspace.on("quit",quitEventHandler)
@@ -948,7 +980,7 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   public setStencilLibrary(library:string) {
-      this.settings.library = library;
+    this.settings.library = library;
   }
 
   public triggerEmbedUpdates(filepath?:string){
@@ -1002,10 +1034,39 @@ export default class ExcalidrawPlugin extends Plugin {
     if (this.settings.compatibilityMode) {
       return BLANK_DRAWING;
     }
-    return FRONTMATTER + '\n# Drawing\n'
-           + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'json\n' 
-           + BLANK_DRAWING + '\n'
-           + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96);
+    return FRONTMATTER + '\n' + this.getMarkdownDrawingSection(BLANK_DRAWING);
+  }
+
+  public getMarkdownDrawingSection(jsonString: string) {
+    return '%%\n# Drawing\n'
+    + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'json\n' 
+    + jsonString + '\n'
+    + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96) + '%%';
+  }
+
+  /**
+  * Extracts the text elements from an Excalidraw scene into a string of ids as headers followed by the text contents
+  * @param {string} data - Excalidraw scene JSON string
+  * @returns {string} - Text starting with the "# Text Elements" header and followed by each "## id-value" and text
+  */
+  public exportSceneToMD(data:string): string {
+    if(!data) return "";
+    const excalidrawData = JSON_parse(data);
+    const textElements = excalidrawData.elements?.filter((el:any)=> el.type=="text")
+    let outString = '# Text Elements\n';
+    let id:string;
+    for (const te of textElements) {
+      id = te.id;
+      //replacing Excalidraw text IDs with my own, because default IDs may contain 
+      //characters not recognized by Obsidian block references
+      //also Excalidraw IDs are inconveniently long
+      if(te.id.length>8) {  
+        id=nanoid();
+        data = data.replaceAll(te.id,id); //brute force approach to replace all occurances.
+      }
+      outString += te.text+' ^'+id+'\n\n';
+    }
+    return outString + this.getMarkdownDrawingSection(data);
   }
 
   public async createDrawing(filename: string, onNewPane: boolean, foldername?: string, initData?:string) {
@@ -1041,7 +1102,7 @@ export default class ExcalidrawPlugin extends Plugin {
     } as ViewState);
   }
 
-  isExcalidrawFile(f:TFile) {
+  public isExcalidrawFile(f:TFile) {
     if(f.extension=="excalidraw") return true;
     const fileCache = this.app.metadataCache.getFileCache(f);
     return !!fileCache?.frontmatter && !!fileCache.frontmatter[FRONTMATTER_KEY];

src/settings.ts

@@ -14,10 +14,11 @@ export interface ExcalidrawSettings {
   templateFilePath: string,
   drawingFilenamePrefix: string,
   drawingFilenameDateTime: string,
+  displaySVGInPreview: boolean,
   width: string,
   showLinkBrackets: boolean,
   linkPrefix: string,
-  //autosave: boolean;
+  urlPrefix: string,
   allowCtrlClick: boolean, //if disabled only the link button in the view header will open links 
   pngExportScale: number,
   exportWithTheme: boolean,
@@ -40,10 +41,11 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   templateFilePath: 'Excalidraw/Template.excalidraw',
   drawingFilenamePrefix: 'Drawing ',
   drawingFilenameDateTime: 'YYYY-MM-DD HH.mm.ss',
+  displaySVGInPreview: true,
   width: '400',
   linkPrefix: "📍",
+  urlPrefix: "🌐",
   showLinkBrackets: true,
-  //autosave: false,
   allowCtrlClick: true,
   pngExportScale: 1,
   exportWithTheme: true,
@@ -63,13 +65,31 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
 
 export class ExcalidrawSettingTab extends PluginSettingTab {
   plugin: ExcalidrawPlugin;
+  private requestEmbedUpdate:boolean = false;
+  private requestReloadDrawings:boolean = false;
 
   constructor(app: App, plugin: ExcalidrawPlugin) {
     super(app, plugin);
     this.plugin = plugin;
   }
 
+  async hide() {
+    if(this.requestReloadDrawings) {
+      const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+      for(const v of exs) {
+        if(v.view instanceof ExcalidrawView) {
+          await v.view.save(false);
+          await v.view.reload(true);
+        }
+      }
+      this.requestEmbedUpdate = true;
+    }
+    if(this.requestEmbedUpdate) this.plugin.triggerEmbedUpdates();
+  }
+
   display(): void {
+    this.requestEmbedUpdate = false;
+    this.requestReloadDrawings = false;
     let {containerEl} = this;
     this.containerEl.empty();
 
@@ -95,28 +115,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           await this.plugin.saveSettings();
         }));
 
-/*    new Setting(containerEl)
-      .setName(t("AUTOSAVE_NAME")) 
-      .setDesc(t("AUTOSAVE_DESC"))
-      .addToggle(toggle => toggle
-        .setValue(this.plugin.settings.autosave)
-        .onChange(async (value) => {
-          this.plugin.settings.autosave = value;
-          await this.plugin.saveSettings();
-          const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
-          for(const v of exs) {
-            if(v.view instanceof ExcalidrawView) {
-              if(v.view.autosaveTimer) {
-                clearInterval(v.view.autosaveTimer)
-                v.view.autosaveTimer = null;
-              }
-              if(value) { 
-                v.view.setupAutosaveTimer();
-              }
-            }
-          }          
-        }));*/
-
     this.containerEl.createEl('h1', {text: t("FILENAME_HEAD")});
     containerEl.createDiv('',(el) => {
       el.innerHTML = t("FILENAME_DESC");
@@ -161,17 +159,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     this.containerEl.createEl('h1', {text: t("LINKS_HEAD")});
     this.containerEl.createEl('p',{
       text: t("LINKS_DESC")});
-    
-    const reloadDrawings = async () => {
-      const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
-      for(const v of exs) {
-        if(v.view instanceof ExcalidrawView) {
-          await v.view.save(false);
-          v.view.reload(true);
-        }
-      }
-      this.plugin.triggerEmbedUpdates();
-    }
 
     new Setting(containerEl)
       .setName(t("LINK_BRACKETS_NAME")) 
@@ -181,19 +168,32 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .onChange(async (value) => {
           this.plugin.settings.showLinkBrackets = value;
           await this.plugin.saveSettings();
-          reloadDrawings();
+          this.requestReloadDrawings = true;
         }));
     
     new Setting(containerEl)
       .setName(t("LINK_PREFIX_NAME"))
       .setDesc(t("LINK_PREFIX_DESC"))
       .addText(text => text
-        .setPlaceholder('📍')
+        .setPlaceholder(t("INSERT_EMOJI"))
         .setValue(this.plugin.settings.linkPrefix)
-        .onChange(async (value) => {
+        .onChange((value) => {
+          console.log(value);
           this.plugin.settings.linkPrefix = value;
+          this.plugin.saveSettings();
+          this.requestReloadDrawings = true;
+        }));
+  
+    new Setting(containerEl)
+      .setName(t("URL_PREFIX_NAME"))
+      .setDesc(t("URL_PREFIX_DESC"))
+      .addText(text => text
+        .setPlaceholder(t("INSERT_EMOJI"))
+        .setValue(this.plugin.settings.urlPrefix)
+        .onChange(async (value) => {
+          this.plugin.settings.urlPrefix = value;
           await this.plugin.saveSettings();
-          reloadDrawings();
+          this.requestReloadDrawings = true;
         }));
 
     new Setting(containerEl)
@@ -208,6 +208,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
 
     this.containerEl.createEl('h1', {text: t("EMBED_HEAD")});
 
+
+    new Setting(containerEl)
+    .setName(t("EMBED_PREVIEW_SVG_NAME")) 
+    .setDesc(t("EMBED_PREVIEW_SVG_DESC"))
+    .addToggle(toggle => toggle
+      .setValue(this.plugin.settings.displaySVGInPreview)
+      .onChange(async (value) => {
+        this.plugin.settings.displaySVGInPreview = value;
+        await this.plugin.saveSettings();
+      }));
+
+
     new Setting(containerEl)
       .setName(t("EMBED_WIDTH_NAME")) 
       .setDesc(t("EMBED_WIDTH_DESC"))
@@ -217,7 +229,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .onChange(async (value) => {
           this.plugin.settings.width = value;
           await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
+          this.requestEmbedUpdate = true;
         }));
 
     let scaleText:HTMLDivElement;
@@ -231,7 +243,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .onChange(async (value)=> {
           scaleText.innerText = " " + value.toString();
           this.plugin.settings.pngExportScale = value;
-          this.plugin.saveSettings();
+          await this.plugin.saveSettings();
         }))
         .settingEl.createDiv('',(el)=>{
           scaleText = el;
@@ -248,7 +260,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .onChange(async (value) => {
           this.plugin.settings.exportWithBackground = value;
           await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
+          this.requestEmbedUpdate = true;
         }));
     
     new Setting(containerEl)
@@ -259,7 +271,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .onChange(async (value) => {
           this.plugin.settings.exportWithTheme = value;
           await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
+          this.requestEmbedUpdate = true;
         }));
     
     this.containerEl.createEl('h1', {text: t("EXPORT_HEAD")});
@@ -345,7 +357,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
     .setName(t("FILETAG_NAME")) 
     .setDesc(t("FILETAG_DESC"))
     .addText(text => text
-      .setPlaceholder('✏️')
+      .setPlaceholder(t("INSERT_EMOJI"))
       .setValue(this.plugin.settings.experimentalFileTag)
       .onChange(async (value) => {
         this.plugin.settings.experimentalFileTag = value;

styles.css

@@ -81,12 +81,12 @@ li[data-testid] {
   box-shadow: 0 !important;
   background-color: transparent !important;
 }
-/*
-@font-face {
-  font-family: "Virgil";
-  src: url("https://excalidraw.com/Virgil.woff2");
+
+.disable-zen-mode--visible {
+  color: var(--text-primary-color);
 }
-@font-face {
-  font-family: "Cascadia";
-  src: url("https://excalidraw.com/Cascadia.woff2");
-}*/
+
+.disable-zen-mode {
+  width: 9em !important;
+}
+

versions.json

@@ -1,3 +1,3 @@
 {
-  "1.2.12": "0.11.13"
+  "1.2.23": "0.11.13"
 }