Obsidian 0.15.0 Popout Window Support - Solution Documentation

[zsviczian]

Obsidian 0.15.0 introduced Popout Windows (Popouts). The challenge with Popouts is that the plugin is executed in the context of the main workspace's document/window, but the Excalidraw React app including the Canvas and all the Event Listeners must run in the context of the Popouts' document/window context. This means Excalidraw and React must be individually deployed to all popout windows.

I found two ways for solving this problem:

Rejected Option: Modify the Excalidraw package

Solution summary: Pass the host document/window object as a component property (ownerDocument/ownerWindow) when initializing Excalidraw. Modify all references to document/window in the Excalidraw code to reference the ownerDocument/ownerWindow object.

Considerations: The drawback of this solution is a divergence from the main Excalidraw package, thus making deployment of future Excalidraw improvements more difficult.

I implemented this change to the Excalidraw package in this commit/branch. The change turned out to be less invasive than I thought it would be, however, while using the solution I ran into some hidden problems. I solved the ones I found, but there might be a number of others still. I released a version of the plugin based on this approach for beta testing as Excalidraw 1.7.0

Final verdict: This is not a sustainable approach because of the hidden issue, but more so because of the ongoing burden of maintaining a highly customized codebase.

Current Solution: Load React and the Excalidraw packages separately to each window

Solution summary:

• Store ownerWindow and ownerDocument during onload()
• Re-write references to Excalidraw and React in the code such that always the module in the appropriate windows context is used
• Implement a package loader function (getPackage(win:Window):Packages) in the plugin.
• Change the build process:
  • Mark React and Excalidraw as external references in rollup
  • Add a string containing the React and Excalidraw to the final package so it can be injected to the window context during run time.
• Achieve all of this in such a way that the code should still run on Obsidian Mobile.

Store ownerWindow and ownerDocument on view.onload

obsidian-excalidraw-plugin/src/ExcalidrawView.ts

Lines 890 to 895 in 108293a

	onload() {
	const doc = app.isMobile?document:this.containerEl.ownerDocument;
	this.ownerDocument = doc;
	this.ownerWindow = this.ownerDocument.defaultView;
	this.plugin.getPackage(this.ownerWindow);
	this.semaphores.scriptsReady = true;

Re-write references

I introduced constants for the referenced objects to minimize impact to code readability

const React = this.plugin.getPackage(this.ownerWindow).react;
const ReactDOM = this.plugin.getPackage(this.ownerWindow).reactDOM;
const {
  Excalidraw,
  getSceneVersion,
  determineFocusDistance,
  intersectElementWithLine,
  getCommonBoundingBox,
  getMaximumGroups,
  measureText,
} = this.plugin.getPackage(this.ownerWindow).excalidrawLib;

getPackage() Package loader

In main.ts:

import { decompressFromBase64 } from "lz-string";

// I'm not happy about the "any", but haven't yet found a better solution
type Packages = {
  react: any,
  reactDOM: any,
  excalidrawLib: any
}

declare const EXCALIDRAW_PACKAGES:string; //see build process
declare const react:any;
declare const reactDOM:any;
declare const excalidrawLib: any;

export default class ExcalidrawPlugin extends Plugin {
  //...
  private packageMap: WeakMap<Window,Packages> = new WeakMap<Window,Packages>();
  //...

obsidian-excalidraw-plugin/src/main.ts

Lines 172 to 188 in 108293a

	public getPackage(win:Window):Packages {
	if(win===window) {
	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};
	}

Modified build process

In rollup.config.js:

• I load the relevant development or production build of React, ReactDOM and Excalidraw,
• stich them together and convert them to a compressed base 64 string using LZString (compression is not really required, but I found LZString convenient to escape the script text so I can store the value in a string),
• using window.eval.call(window, <<Script String>>) I execute the following code:
  • Initialize const EXCALIDRAW_PACKAGES with the base 64 string, and
  • Execute the React and Excalidraw packages on the window object (this is the window object of the main workspace where the plugin is running).
    • I do this here and not in getPackages() because I have references to React in my plugin, unless I initialized React right at the beginning of my plugin load process, the plugin did not load due to missing React dependencies. For Popouts I initialize React using getPackages() in main.ts.
• Finally using the rollup-plugin-postprocess I replace var React = require('react'); with the code I stiched together.
  • I have different versions of the postprocess for production and development, because for production the code is minified.
  • If you want to use the postprocess rollup plugin, be sure to read this: For those looking for a working solution developit/rollup-plugin-postprocess#10

//...
import fs from'fs';
import LZString from 'lz-string';
import postprocess from 'rollup-plugin-postprocess';

const isProd = (process.env.NODE_ENV === "production");
console.log("Is production", isProd);

const lzstring_pkg = fs.readFileSync("./node_modules/lz-string/libs/lz-string.min.js", "utf8");
const react_pkg = isProd
  ? fs.readFileSync("./node_modules/react/umd/react.production.min.js", "utf8")
  : fs.readFileSync("./node_modules/react/umd/react.development.js", "utf8");
const reactdom_pkg = isProd
  ? fs.readFileSync("./node_modules/react-dom/umd/react-dom.production.min.js", "utf8")
  : fs.readFileSync("./node_modules/react-dom/umd/react-dom.development.js", "utf8");
const excalidraw_pkg = isProd
  ? fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.production.min.js", "utf8")
  : fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.development.js", "utf8");

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)};' +
  'return {react:React, reactDOM:ReactDOM, excalidrawLib: ExcalidrawLib};})();`);';
//...
const BUILD_CONFIG = {
  //...
  plugins: [
    //...
    ...isProd
    ? [
      //!postprocess - the version available on npmjs does not work, need this update: 
      //  npm install brettz9/rollup-plugin-postprocess#update --save-dev
      //  https://github.com/developit/rollup-plugin-postprocess/issues/10
      postprocess([
        [/,React=require\("react"\);/, packageString],
      ])
    ] 
    : [
      postprocess([
        [/var React = require\('react'\);/, packageString],
      ])
    ],
  ],
}

[zsviczian]

Obsidian 0.15.3 update to support dragging and dropping workspace panes between windows.
I updated view.onload() with a single line: this.containerEl.onWindowMigrated(()=>this.leaf.rebuildView());

onWindowMigrated(()=>any) is called when the leaf is already in the new window. It seems it was a good design decision to save ownerDocument and ownerWindow in view.onload()˙; this way when I call this.leaf.rebuildView()` the view saves the user's work using the correct window object to access the Excalidraw API.

obsidian-excalidraw-plugin/src/ExcalidrawView.ts

Lines 890 to 897 in 08e4e1f

	onload() {
	//@ts-ignore
	this.containerEl.onWindowMigrated(()=>this.leaf.rebuildView());
	const doc = app.isMobile?document:this.containerEl.ownerDocument;
	this.ownerDocument = doc;
	this.ownerWindow = this.ownerDocument.defaultView;
	this.plugin.getPackage(this.ownerWindow);
	this.semaphores.scriptsReady = true;