JSON into codeblock, hover observer corrected

manifest.json

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

src/ExcalidrawAutomate.ts

@@ -14,7 +14,6 @@ import { getJSON } from "./ExcalidrawData";
 import { 
   FRONTMATTER, 
   nanoid, 
-  JSON_stringify,
   JSON_parse 
 } from "./constants";
 
@@ -163,7 +162,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         elements.push(this.elementsDict[this.elementIds[i]]);
       }
       navigator.clipboard.writeText(
-        JSON_stringify({
+        JSON.stringify({
           "type":"excalidraw/clipboard",
           "elements": elements,
       }));
@@ -179,7 +178,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         params?.onNewPane ? params.onNewPane : false,
         params?.foldername ? params.foldername : this.plugin.settings.folder,
         FRONTMATTER + exportSceneToMD(
-        JSON_stringify({
+        JSON.stringify({
           type: "excalidraw",
           version: 2,
           source: "https://excalidraw.com",
@@ -235,7 +234,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
         elements.push(this.elementsDict[this.elementIds[i]]);
       }
       return ExcalidrawView.getPNG(
-        { //JSON_stringify(
+        { 
           "type": "excalidraw",
           "version": 2,
           "source": "https://excalidraw.com",
@@ -244,7 +243,7 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin) {
             "theme": template ? template.appState.theme : this.canvas.theme,
             "viewBackgroundColor": template? template.appState.viewBackgroundColor : this.canvas.viewBackgroundColor
           }
-        },//),
+        },
         {
           withBackground: plugin.settings.exportWithBackground, 
           withTheme: plugin.settings.exportWithTheme
@@ -514,5 +513,9 @@ async function getTemplate(fileWithPath: string):Promise<{elements: any,appState
     }
     outString += te.text+' ^'+id+'\n\n';
   }
-  return outString + '# Drawing\n'+ data.replaceAll("[","&#91;");
+  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);
+  //+data.replaceAll("[","&#91;");
 }

src/ExcalidrawData.ts

@@ -8,7 +8,6 @@ import { measureText } from "./ExcalidrawAutomate";
 import ExcalidrawPlugin from "./main";
 import { ExcalidrawSettings } from "./settings";
 import {  
-  JSON_stringify,
   JSON_parse
 } from "./constants";
 
@@ -17,11 +16,11 @@ import {
 export const REG_LINK_BACKETS = /(!)?\[\[([^|\]]+)\|?(.+)?]]|(!)?\[(.*)\]\((.*)\)/g;
 
 export function getJSON(data:string):string {
-  const findJSON = /\n# Drawing\n(.*)/gm
+  const findJSON = /\n# Drawing\n(```json\n)?(.*)(```)?/gm // /\n# Drawing\n(.*)/gm
   const res = data.matchAll(findJSON);
   const parts = res.next();
   if(parts.value && parts.value.length>1) {
-    return parts.value[1];
+    return parts.value[2];
   }
   return data;
 }
@@ -68,10 +67,10 @@ export class ExcalidrawData {
     }
 
     //Load scene: Read the JSON string after "# Drawing" 
-    let parts = data.matchAll(/\n# Drawing\n(.*)/gm).next();
+    let parts = data.matchAll(/\n# Drawing\n(```json\n)?(.*)(```)?/gm).next();
     if(!(parts.value && parts.value.length>1)) return false; //JSON not found or invalid
     if(!this.scene) { //scene was not loaded from .excalidraw
-      this.scene = JSON_parse(parts.value[1]);
+      this.scene = JSON_parse(parts.value[2]);
     }
     //Trim data to remove the JSON string
     data = data.substring(0,parts.value.index);
@@ -157,7 +156,7 @@ export class ExcalidrawData {
     //get scene text elements
     const texts = this.scene.elements?.filter((el:any)=> el.type=="text")
 
-    let jsonString = JSON_stringify(this.scene);
+    let jsonString = JSON.stringify(this.scene);
 
     let dirty:boolean = false; //to keep track if the json has changed
     let id:string; //will be used to hold the new 8 char long ID for textelements that don't yet appear under # Text Elements
@@ -301,7 +300,10 @@ export class ExcalidrawData {
     for(const key of this.textElements.keys()){
       outString += this.textElements.get(key).raw+' ^'+key+'\n\n';
     }
-    return outString + '# Drawing\n' + JSON_stringify(this.scene);
+    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);
   }
 
   public syncElements(newScene:any):boolean {

src/ExcalidrawView.ts

@@ -27,7 +27,6 @@ import {
   FRONTMATTER_KEY,
   UNLOCK_ICON_NAME,
   LOCK_ICON_NAME,
-  JSON_stringify,
   JSON_parse
 } from './constants';
 import ExcalidrawPlugin from './main';
@@ -551,7 +550,7 @@ export default class ExcalidrawView extends TextFileView {
         }
         const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements();
         const st: AppState = excalidrawRef.current.getAppState();
-        return { //JSON_stringify(
+        return { 
           type: "excalidraw",
           version: 2,
           source: "https://excalidraw.com",
@@ -575,7 +574,7 @@ export default class ExcalidrawView extends TextFileView {
             currentItemLinearStrokeSharpness: st.currentItemLinearStrokeSharpness,
             gridSize: st.gridSize,
           }
-        };//);
+        };
       };
 
       this.refresh = () => {

src/constants.ts

@@ -1,5 +1,5 @@
 //This is to avoid brackets littering graph view with links 
-export function JSON_stringify(x:any):string {return JSON.stringify(x).replaceAll("[","[");}
+//export function JSON_stringify(x:any):string {return JSON.stringify(x).replaceAll("[","[");}
 export function JSON_parse(x:string):any {return JSON.parse(x.replaceAll("[","["));}
 
 import {customAlphabet} from "nanoid";

src/lang/locale/en.ts

@@ -120,10 +120,10 @@ export default {
                            "when you open a legacy file for editing.",
   EXPERIMENTAL_HEAD: "Experimental features",
   EXPERIMENTAL_DESC: "These setting will not take effect immediately, only when the File Explorer is refreshed, or Obsidian restarted.",
-  FILETYPE_NAME: "Display TAG (✏️) for excalidraw.md files in File Explorer",
-  FILETYPE_DESC: "Excalidraw files will be tagged using the tag defined in the next setting.",                           
-  FILETAG_NAME: "Set the TAG for excalidraw.md files",
-  FILETAG_DESC: "The text or emojii to display as tag.",                           
+  FILETYPE_NAME: "Display type (✏️) for excalidraw.md files in File Explorer",
+  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.",                           
 
 
 

src/main.ts

@@ -167,6 +167,8 @@ export default class ExcalidrawPlugin extends Plugin {
      */
     const markdownPostProcessor = async (el:HTMLElement,ctx:MarkdownPostProcessorContext) => {
       const drawings = el.querySelectorAll('.internal-embed');
+      if(drawings.length==0) return;
+
       let attr:imgElementAttributes={fname:"",fheight:"",fwidth:"",style:""};
       let alt:string, img:any, parts, div, file:TFile;
       for (const drawing of drawings) {
@@ -262,6 +264,9 @@ export default class ExcalidrawPlugin extends Plugin {
       //@ts-ignore
       if(m[i].addedNodes[0].firstElementChild?.firstElementChild?.className=="excalidraw-svg") return;
 
+      //@ts-ignore
+      if(!m[i].addedNodes[0].matchParent(".hover-popover")) return;
+
       //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)=>{