1.7.2 WIP

rollup.config.js

@@ -27,13 +27,18 @@ const reactdom_pkg = isProd
   : fs.readFileSync("./node_modules/react-dom/umd/react-dom.development.js", "utf8");
 const lzstring_pkg = fs.readFileSync("./node_modules/lz-string/libs/lz-string.min.js", "utf8")
 
-const packageString = ';'+lzstring_pkg+'const EXCALIDRAW_PACKAGES = "' + LZString.compressToBase64(react_pkg + reactdom_pkg + excalidraw_pkg) +'";var ExcalidrawPackageLoader=(d=document)=>{if(!d.getElementById("excalidraw-script")){const script=d.createElement("script");script.type="text/javascript";script.id="excalidraw-script";script.text=LZString.decompressFromBase64(EXCALIDRAW_PACKAGES);d.body.appendChild(script);}};ExcalidrawPackageLoader();';
+///const packageString = ';'+lzstring_pkg+'const EXCALIDRAW_PACKAGES = "' + LZString.compressToBase64(react_pkg + reactdom_pkg + excalidraw_pkg) +'";var ExcalidrawPackageLoader=(d=document)=>{if(!d.getElementById("excalidraw-script")){const script=d.createElement("script");script.type="text/javascript";script.id="excalidraw-script";script.text=LZString.decompressFromBase64(EXCALIDRAW_PACKAGES);d.body.appendChild(script);}};ExcalidrawPackageLoader();';
 
-/*fs.writeFileSync("packageloader.js",packageString,{
+const packageString = ';'+lzstring_pkg+'const EXCALIDRAW_PACKAGES = "' + LZString.compressToBase64(react_pkg + reactdom_pkg + excalidraw_pkg) + '";' +
+  'const {react, reactDOM, excalidrawLib} = window.eval.call(window, `(function() {' +
+  '${LZString.decompressFromBase64(EXCALIDRAW_PACKAGES)};\n' +
+  'return {react:React, reactDOM:ReactDOM, excalidrawLib: ExcalidrawLib};})();`);';
+
+fs.writeFileSync("testloader.js",packageString,{
   encoding: "utf8",
   flag: "w",
   mode: 0o666
-});*/
+});
 
 const BASE_CONFIG = {
   input: 'src/main.ts',

src/ExcalidrawAutomate.ts

@@ -40,18 +40,14 @@ import { t } from "./lang/helpers";
 import { ScriptEngine } from "./Scripts";
 import { ConnectionPoint, ExcalidrawAutomateInterface } from "./types";
 
-declare global {
-  interface Window {
-    ExcalidrawLib: any;
-  }
-}
 const {
   determineFocusDistance,
   intersectElementWithLine,
   getCommonBoundingBox,
   getMaximumGroups,
   measureText,
-} = window.ExcalidrawLib;
+  //@ts-ignore
+} = excalidrawLib;
 
 const GAP = 4;
 

src/ExcalidrawView.ts

@@ -88,14 +88,6 @@ import { ToolsPanel } from "./menu/ToolsPanel";
 import { ScriptEngine } from "./Scripts";
 import { getTextElementAtPointer, getImageElementAtPointer, getElementWithLinkAtPointer } from "./utils/GetElementAtPointer";
 
-declare global {
-  interface Window {
-    ExcalidrawLib: any;
-    React: any;
-    ReactDOM: any;
-  }
-}
-
 export enum TextMode {
   parsed,
   raw,
@@ -900,8 +892,7 @@ export default class ExcalidrawView extends TextFileView {
       const doc = app.isMobile?document:this.containerEl.ownerDocument;
       this.ownerDocument = doc;
       this.ownerWindow = this.ownerDocument.defaultView;
-      //@ts-ignore
-      ExcalidrawPackageLoader(doc); //function added during build in rollup
+      this.plugin.getPackage(this.ownerWindow);
       this.semaphores.scriptsReady = true;
     });
     this.addAction(SCRIPTENGINE_ICON_NAME, t("INSTALL_SCRIPT_BUTTON"), () => {
@@ -1537,7 +1528,7 @@ export default class ExcalidrawView extends TextFileView {
           }
         }
       })
-      const getSceneVersion = this.ownerWindow.ExcalidrawLib.getSceneVersion;
+      const getSceneVersion = this.plugin.getPackage(this.ownerWindow).excalidrawLib.getSceneVersion;
       this.previousSceneVersion = getSceneVersion(sceneElements);
       //changing files could result in a race condition for sync. If at the end of sync there are differences
       //set dirty will trigger an autosave
@@ -1665,7 +1656,7 @@ export default class ExcalidrawView extends TextFileView {
     this.semaphores.dirty = null;
     const el = api.getSceneElements();
     if (el) {
-      const getSceneVersion = this.ownerWindow.ExcalidrawLib.getSceneVersion;
+      const getSceneVersion = this.plugin.getPackage(this.ownerWindow).excalidrawLib.getSceneVersion;
       this.previousSceneVersion = getSceneVersion(el);
     }
     this.diskIcon.querySelector("svg").removeClass("excalidraw-dirty");
@@ -1825,8 +1816,8 @@ export default class ExcalidrawView extends TextFileView {
     while(!this.semaphores.scriptsReady) {
       await sleep(50);
     }
-    const React = this.ownerWindow.React;
-    const ReactDOM = this.ownerWindow.ReactDOM;
+    const React = this.plugin.getPackage(this.ownerWindow).react;
+    const ReactDOM = this.plugin.getPackage(this.ownerWindow).reactDOM;
     //console.log("ExcalidrawView.instantiateExcalidraw()");
     this.clearDirty();
     const reactElement = React.createElement(() => {
@@ -2463,8 +2454,8 @@ export default class ExcalidrawView extends TextFileView {
           }, 400);
         }
       };
-      const Excalidraw = this.ownerWindow.ExcalidrawLib.Excalidraw;
-      const getSceneVersion = this.ownerWindow.ExcalidrawLib.getSceneVersion;
+      const Excalidraw = this.plugin.getPackage(this.ownerWindow).excalidrawLib.Excalidraw;
+      const getSceneVersion = this.plugin.getPackage(this.ownerWindow).excalidrawLib.getSceneVersion;
       const excalidrawDiv = React.createElement(
         "div",
         {

src/dialogs/Messages.ts

@@ -17,6 +17,21 @@ I develop this plugin as a hobby, spending most of my free time doing this. If y
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
 `,
+"1.7.2": `
+Due to some of the changes to the code, I highly recommend restarting Obsidian after installing this update to Excalidraw.
+
+# Fixed
+- Stability improvements
+- Opening links in new panes and creating new drawings from the file explorer works properly again
+
+# New feature
+- Two new command palette actions:
+  - Create a new drawing - IN A POPOUT WINDOW
+  - Create a new drawing - IN A POPOUT WINDOW - and embed into active document
+![image|600](https://user-images.githubusercontent.com/14358394/175137800-88789f5d-f8e8-4371-a356-84f443aa6a50.png)
+- Added setting to prefer opening the link in the popout window or in the main workspace.
+![image|800](https://user-images.githubusercontent.com/14358394/175076326-1c8eee53-e512-4025-aedb-07881a732c69.png)
+`,
 "1.7.1": `
 Support for Obsidian 0.15.0 popout windows. While there are no new features (apart from the popout window support) under the hood there were some major changes required to make this happen.
 `,

src/main.ts

@@ -95,6 +95,9 @@ import {
 } from "./MarkdownPostProcessor";
 import { FieldSuggester } from "./dialogs/FieldSuggester";
 import { ReleaseNotes } from "./dialogs/ReleaseNotes";
+import { decompressFromBase64 } from "lz-string";
+import { Packages } from "./types";
+import * as React from "react";
 
 declare module "obsidian" {
   interface App {
@@ -115,6 +118,8 @@ declare module "obsidian" {
   }
 }
 
+declare const EXCALIDRAW_PACKAGES:string;
+
 export default class ExcalidrawPlugin extends Plugin {
   private excalidrawFiles: Set<TFile> = new Set<TFile>();
   public excalidrawFileModes: { [file: string]: string } = {};
@@ -147,6 +152,8 @@ export default class ExcalidrawPlugin extends Plugin {
   public mathjaxLoaderFinished: boolean = false;
   public scriptEngine: ScriptEngine;
   public fourthFontDef: string = VIRGIL_FONT;
+  private packageMap: WeakMap<Window,Packages> = new WeakMap<Window,Packages>();
+
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
     this.filesMaster = new Map<
@@ -156,6 +163,27 @@ export default class ExcalidrawPlugin extends Plugin {
     this.equationsMaster = new Map<FileId, string>();
   }
 
+
+
+  public getPackage(win:Window):Packages {
+    if(win===window) {
+      //@ts-ignore
+      return {react, reactDOM, excalidrawLib};
+    }
+    if(this.packageMap.has(win)) {
+      return this.packageMap.get(win);
+    }
+    
+    //@ts-ignore
+    const {react:r, reactDOM:rd, excalidrawLib:e} = win.eval.call(win,
+      `(function() {
+        ${decompressFromBase64(EXCALIDRAW_PACKAGES)};
+        return {react:React,reactDOM:ReactDOM,excalidrawLib:ExcalidrawLib};
+       })()`);
+    this.packageMap.set(win,{react:r, reactDOM:rd, excalidrawLib:e});
+    return {react:r, reactDOM:rd, excalidrawLib:e};
+  }
+
   async onload() {
     addIcon(ICON_NAME, EXCALIDRAW_ICON);
     addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
@@ -1677,21 +1705,10 @@ export default class ExcalidrawPlugin extends Plugin {
       document.body.removeChild(this.mathjaxDiv);
     }
 
-    const visitedDocs = new Set<Document>();
-    app.workspace.iterateAllLeaves((leaf)=>{
-      const ownerDocument = app.isMobile?document:leaf.view.containerEl.ownerDocument;   
-      if(!ownerDocument) return;        
-      if(visitedDocs.has(ownerDocument)) return;
-      visitedDocs.add(ownerDocument);
-      
-      const el = ownerDocument.getElementById("excalidraw-script");
-      if(el) {
-        ownerDocument.body.removeChild(el);
-        const win = ownerDocument.defaultView;
-        delete win.React;
-        delete win.ReactDOM;
-        delete win.ExcalidrawLib;
-      }
+    Object.values(this.packageMap).forEach((p:Packages)=>{
+      delete p.excalidrawLib;
+      delete p.reactDOM;
+      delete p.react;
     })
   }
 
@@ -1884,10 +1901,22 @@ export default class ExcalidrawPlugin extends Plugin {
     );
     await checkAndCreateFolder(this.app.vault, folderpath); //create folder if it does not exist
     const fname = getNewUniqueFilepath(this.app.vault, filename, folderpath);
-    return await this.app.vault.create(
+    const file = await this.app.vault.create(
       fname,
       initData ?? (await this.getBlankDrawing()),
     );
+    
+    //wait for metadata cache
+    let counter = 0;
+    while(file instanceof TFile && !this.isExcalidrawFile(file) && counter++<10) {
+      await sleep(50);
+    }
+    
+    if(counter > 10) {
+      errorlog({file, error: "new drawing not recognized as an excalidraw file", fn: this.createDrawing});
+    }
+
+    return file;
   }
 
   public async createAndOpenDrawing(

src/menu/ToolsPanel.tsx

@@ -49,7 +49,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
 
   constructor(props: PanelProps) {
     super(props);
-    const react = props.view.ownerWindow.React;
+    const react = props.view.plugin.getPackage(props.view.ownerWindow).react;
     this.containerRef = react.createRef();
     this.state = {
       visible: props.visible,

src/types.d.ts

@@ -8,6 +8,12 @@ import ExcalidrawPlugin from "./main";
 
 export type ConnectionPoint = "top" | "bottom" | "left" | "right" | null;
 
+export type Packages = {
+  react: any,
+  reactDOM: any,
+  excalidrawLib: any
+}
+
 export interface ExcalidrawAutomateInterface {
   plugin: ExcalidrawPlugin;
   elementsDict: {[key:string]:any}; //contains the ExcalidrawElements currently edited in Automate indexed by el.id

src/utils/Utils.ts

@@ -23,15 +23,11 @@ import { ExportSettings } from "../ExcalidrawView";
 import { compressToBase64, decompressFromBase64 } from "lz-string";
 import { getIMGFilename } from "./FileUtils";
 
-declare global {
-  interface Window {
-    ExcalidrawLib: any;
-  }
-}
 const {
   exportToSvg,
   exportToBlob,
-} = window.ExcalidrawLib;
+//@ts-ignore
+} = excalidrawLib;
 
 declare module "obsidian" {
   interface Workspace {