1.4.5

manifest.json

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

src/ExcalidrawAutomate.ts

@@ -103,7 +103,7 @@ export interface ExcalidrawAutomate {
     }
   ):string ;
   addImage(topX:number, topY:number, imageFile: TFile):Promise<string>;
-  addLaTex(topX:number, topY:number, tex: string, color?:string):Promise<string>;
+  addLaTex(topX:number, topY:number, tex: string):Promise<string>;
   connectObjects (
     objectA: string, 
     connectionA: ConnectionPoint, 
@@ -548,9 +548,9 @@ export async function initExcalidrawAutomate(plugin: ExcalidrawPlugin):Promise<E
       this.elementsDict[id].scale = [1,1];
       return id;
     },
-    async addLaTex(topX:number, topY:number, tex:string, color:string = "black"):Promise<string> {
+    async addLaTex(topX:number, topY:number, tex:string):Promise<string> {
       const id = nanoid();
-      const image = await tex2dataURL(tex, color);
+      const image = await tex2dataURL(tex, this.plugin);
       if(!image) return null;
       this.imagesDict[image.fileId] = {
         mimeType: image.mimeType,

src/ExcalidrawView.ts

@@ -276,7 +276,7 @@ export default class ExcalidrawView extends TextFileView {
             if(!formula) return;
             this.excalidrawData.setEquation(selectedImage.fileId,formula);
             await this.save(true);
-            await updateEquation(formula,selectedImage.fileId,this,addFiles);
+            await updateEquation(formula,selectedImage.fileId,this,addFiles,this.plugin);
           });
           return;
         }

src/Utils.ts

@@ -230,7 +230,7 @@ export const getObsidianImage = async (plugin: ExcalidrawPlugin, file: TFile)
     fileId: await generateIdFromFile(ab),
     dataURL: excalidrawSVG ?? (file.extension==="svg" ? await getSVGData(app,file) : await getDataURL(ab)),
     created: file.stat.mtime,
-    size: await getImageSize(app,excalidrawSVG??app.vault.getResourcePath(file))
+    size: await getImageSize(excalidrawSVG??app.vault.getResourcePath(file))
   }
 }
 
@@ -275,7 +275,7 @@ const generateIdFromFile = async (file: ArrayBuffer):Promise<FileId> => {
   return id;
 };
 
-const getImageSize = async (app: App, src:string):Promise<{height:number, width:number}> => {
+const getImageSize = async (src:string):Promise<{height:number, width:number}> => {
   return new Promise((resolve, reject) => {
     let img = new Image()
     img.onload = () => resolve({height: img.height, width:img.width});
@@ -399,7 +399,7 @@ export const loadSceneFiles = async (
   entries = excalidrawData.getEquationEntries(); 
   while(!(entry = entries.next()).done) {
     const tex = entry.value[1];
-    const data = await tex2dataURL(tex);
+    const data = await tex2dataURL(tex, plugin);
     if(data) {
       files.push({
         mimeType : data.mimeType,
@@ -423,9 +423,10 @@ export const updateEquation = async (
   equation: string,
   fileId: string,
   view: ExcalidrawView,
-  addFiles:Function
+  addFiles:Function,
+  plugin: ExcalidrawPlugin
 ) => {
-  const data = await tex2dataURL(equation);
+  const data = await tex2dataURL(equation, plugin);
   if(data) {
     let files:BinaryFileData[] = [];
     files.push({
@@ -467,7 +468,47 @@ export const scaleLoadedImage = (scene:any, files:any):[boolean,any] => {
 
 export const isObsidianThemeDark = () => document.body.classList.contains("theme-dark");
 
-export async function tex2dataURL(tex:string, color:string="black"):Promise<{
+export async function tex2dataURL(tex:string, plugin:ExcalidrawPlugin):Promise<{
+  mimeType: MimeType,
+  fileId: FileId, 
+  dataURL: DataURL,
+  created: number,
+  size: {height: number, width: number},
+}> {
+
+  //if network is slow, or not available, or mathjax has not yet fully loaded
+  try {
+    return await mathjaxSVG(tex, plugin);
+  } catch(e) {
+    //fallback
+    return await mathjaxImage2html(tex);
+  }
+
+}
+
+async function mathjaxSVG (tex:string, plugin:ExcalidrawPlugin):Promise<{
+  mimeType: MimeType,
+  fileId: FileId, 
+  dataURL: DataURL,
+  created: number,
+  size: {height: number, width: number},
+}> {
+  const eq = plugin.mathjax.tex2svg(tex,{display: true, scale: 4});
+  const svg = eq.querySelector("svg");
+  if(svg) { 
+    const dataURL = svgToBase64(svg.outerHTML);
+    return {
+      mimeType: "image/svg+xml",
+      fileId: fileid() as FileId,
+      dataURL: dataURL as DataURL,
+      created: Date.now(),
+      size: await getImageSize(dataURL)
+    }
+  }
+  return null;
+}
+
+async function mathjaxImage2html(tex:string):Promise<{
   mimeType: MimeType,
   fileId: FileId, 
   dataURL: DataURL,
@@ -480,7 +521,7 @@ export async function tex2dataURL(tex:string, color:string="black"):Promise<{
   
   const eq = window.MathJax.tex2chtml(tex,{display: true, scale: 4}); //scale to ensure good resolution
   eq.style.margin = "3px";
-  eq.style.color = color;
+  eq.style.color = "black";
 
   //ipad support - removing mml as that was causing phantom double-image blur.
   const el = eq.querySelector("mjx-assistive-mml");
@@ -498,4 +539,4 @@ export async function tex2dataURL(tex:string, color:string="black"):Promise<{
     created: Date.now(),
     size: {height: canvas.height, width: canvas.width}
   }
-}
+}

src/main.ts

@@ -63,6 +63,8 @@ import { t } from "./lang/helpers";
 import { checkAndCreateFolder, download, embedFontsInSVG, generateSVGString, getAttachmentsFolderAndFilePath, getIMGPathFromExcalidrawFile, getNewUniqueFilepath, getPNG, getSVG, isObsidianThemeDark, splitFolderAndFilename, svgToBase64 } from "./Utils";
 import { OneOffs } from "./OneOffs";
 import { FileId } from "@zsviczian/excalidraw/types/element/types";
+import { MATHJAX_DATAURL } from "./mathjax";
+import { config, disconnect } from "process";
 
 declare module "obsidian" {
   interface App {
@@ -90,6 +92,8 @@ export default class ExcalidrawPlugin extends Plugin {
   //A master list of fileIds to facilitate copy / paste
   public filesMaster:Map<FileId,string> = null; //fileId, path
   public equationsMaster:Map<FileId,string> = null; //fileId, formula
+  public mathjax: any = null;
+  private mathjaxDiv: HTMLDivElement = null;
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
@@ -139,9 +143,35 @@ export default class ExcalidrawPlugin extends Plugin {
     this.switchToExcalidarwAfterLoad()
 
     const self = this;
+    this.loadMathJax();
+  }
+
+  private loadMathJax() {
+    //loading Obsidian MathJax as fallback
     this.app.workspace.onLayoutReady(()=>{
       loadMathJax();
     });
+
+    this.mathjaxDiv = document.body.createDiv();
+    this.mathjaxDiv.title = "Excalidraw MathJax Support";
+    this.mathjaxDiv.style.display = "none";
+    const iframe = this.mathjaxDiv.createEl("iframe");
+    const doc = iframe.contentWindow.document;
+    const script = doc.createElement("script");
+    script.type = "text/javascript";
+    const self = this;
+    script.onload = () => {
+      const win = iframe.contentWindow;
+      //@ts-ignore
+      win.MathJax.startup.pagePromise.then(() => {
+        //@ts-ignore
+        this.mathjax = win.MathJax;
+      });  
+    };
+
+    script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
+    //script.src = MATHJAX_DATAURL;
+    doc.head.appendChild(script);
   }
 
   private switchToExcalidarwAfterLoad() {
@@ -1014,8 +1044,9 @@ export default class ExcalidrawPlugin extends Plugin {
     excalidrawLeaves.forEach((leaf) => {
       this.setMarkdownView(leaf);
     });
-    this.settings.drawingOpenCount += this.opencount;
-    this.settings.loadCount++;
+    if(this.mathjaxDiv) document.removeChild(this.mathjaxDiv);
+    //this.settings.drawingOpenCount += this.opencount;
+    //this.settings.loadCount++;
     //this.saveSettings();
   }
 

src/settings.ts

@@ -3,7 +3,6 @@ import {
   DropdownComponent, 
   PluginSettingTab, 
   Setting,
-  TFile
 } from 'obsidian';
 import { VIEW_TYPE_EXCALIDRAW } from './constants';
 import ExcalidrawView from './ExcalidrawView';
@@ -297,7 +296,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         .setPlaceholder(t("INSERT_EMOJI"))
         .setValue(this.plugin.settings.linkPrefix)
         .onChange((value) => {
-          console.log(value);
           this.plugin.settings.linkPrefix = value;
           this.applySettingsUpdate(true);
         }));

versions.json

@@ -1,4 +1,4 @@
 {
-  "1.4.4": "0.12.16",
+  "1.4.5": "0.12.16",
   "1.4.2": "0.11.13"
 }