2.6.8-beta-2, Dynamic caret color based on text background

Update zh-cn.ts to b0d3976

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "2.6.3-beta-5",
+	"version": "2.6.8-beta-2",
 	"minAppVersion": "1.1.6",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

manifest.json

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

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.6-11",
+    "@zsviczian/excalidraw": "0.17.6-16",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",
@@ -38,6 +38,7 @@
     "es6-promise-pool": "2.5.0"
   },
   "devDependencies": {
+    "jsesc": "^3.0.2",
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",

rollup.config.js

@@ -52,14 +52,15 @@ if (!isLib) console.log(manifest.version);
 
 const packageString = isLib
   ? ""
-  : ';' + lzstring_pkg +
+  : ';const INITIAL_TIMESTAMP=Date.now();' + lzstring_pkg +
   '\nlet REACT_PACKAGES = `' +
   jsesc(react_pkg + reactdom_pkg, { quotes: 'backtick' }) +
   '`;\n' +
   'let EXCALIDRAW_PACKAGE = ""; const unpackExcalidraw = () => {EXCALIDRAW_PACKAGE = LZString.decompressFromBase64("' + LZString.compressToBase64(excalidraw_pkg) + '");};\n' +
   'let {react, reactDOM } = window.eval.call(window, `(function() {' + '${REACT_PACKAGES};' + 'return {react: React, reactDOM: ReactDOM};})();`);\n' +
   `let excalidrawLib = {};\n` +
-  'let PLUGIN_VERSION="' + manifest.version + '";';
+  'const PLUGIN_VERSION="' + manifest.version + '";';
+  
 
 const BASE_CONFIG = {
   input: 'src/main.ts',

src/ExcalidrawAutomate.ts

@@ -133,6 +133,10 @@ export class ExcalidrawAutomate {
     return DEVICE;
   }
 
+  public printStartupBreakdown() {
+    this.plugin.printStarupBreakdown();
+  }
+
   public help(target: Function | string) {
     if (!target) {
       log("Usage: ea.help(ea.functionName) or ea.help('propertyName') or ea.help('utils.functionName') - notice property name and utils function name is in quotes");
@@ -1820,7 +1824,7 @@ export class ExcalidrawAutomate {
       viewBackgroundColor: "#FFFFFF",
       gridSize: 0
     };
-  }; 
+  };
 
   /**
    * returns true if MD file is an Excalidraw file
@@ -2854,10 +2858,9 @@ export class ExcalidrawAutomate {
   }  
 };
 
-export async function initExcalidrawAutomate(
+export function initExcalidrawAutomate(
   plugin: ExcalidrawPlugin,
-): Promise<ExcalidrawAutomate> {
-  await initFonts();
+): ExcalidrawAutomate {
   const ea = new ExcalidrawAutomate(plugin);
   //@ts-ignore
   window.ExcalidrawAutomate = ea;
@@ -2892,14 +2895,6 @@ function getFontFamily(id: number):string {
   return getFontFamilyString({fontFamily:id})
 }
 
-export async function initFonts():Promise<void> {
-  /*await excalidrawLib.registerFontsInCSS();
-  const fonts = excalidrawLib.getFontFamilies();
-  for(let i=0;i<fonts.length;i++) {
-    if(fonts[i] !== "Local Font") await (document as any).fonts.load(`16px ${fonts[i]}`);  
-  };*/
-}
-
 export function _measureText(
   newText: string,
   fontSize: number,

src/ExcalidrawData.ts

@@ -756,7 +756,7 @@ export class ExcalidrawData {
         displayFontMessage(this.app);
       }
     },5000);
-    await loadSceneFonts(this.scene.elements);
+    const fontFaces = await loadSceneFonts(this.scene.elements);
     clearTimeout(timer);
 
     if (!this.scene.files) {
@@ -1588,6 +1588,7 @@ export class ExcalidrawData {
     .filter(el=>el.type === "image" && el.crop && !el.isDeleted)
     .forEach((el: Mutable<ExcalidrawImageElement>)=>{
       const ef = this.getFile(el.fileId);
+      if(!ef.file) return;
       if(ef.file.extension !== "pdf") return;
       const pageRef = ef.linkParts.original.split("#")?.[1];
       if(!pageRef || !pageRef.startsWith("page=") || pageRef.includes("rect")) return;

src/ExcalidrawView.ts

@@ -295,7 +295,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
   private lastLoadedFile: TFile = null;
   //store key state for view mode link resolution
   private modifierKeyDown: ModifierKeys = {shiftKey:false, metaKey: false, ctrlKey: false, altKey: false}
-  public currentPosition: {x:number,y:number} = { x: 0, y: 0 };
+  public currentPosition: {x:number,y:number} = { x: 0, y: 0 }; //these are scene coord thus would be more apt to call them sceneX and sceneY, however due to scrits already using x and y, I will keep it as is
   //Obsidian 0.15.0
   private draginfoDiv: HTMLDivElement;
   public canvasNodeFactory: CanvasNodeFactory;
@@ -1527,6 +1527,10 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
 
   onload() {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onload, "ExcalidrawView.onload");
+    if(this.plugin.settings.overrideObsidianFontSize) {
+      document.documentElement.style.fontSize = "";
+    }
+  
     const apiMissing = Boolean(typeof this.containerEl.onWindowMigrated === "undefined")
     this.packages = this.plugin.getPackage(this.ownerWindow);
 
@@ -4653,8 +4657,20 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
 
   //returns the raw text of the element which is the original text without parsing
   //in compatibility mode, returns the original text, and for backward compatibility the text if originalText is not available
-  private onBeforeTextEdit (textElement: ExcalidrawTextElement) {
+  private onBeforeTextEdit (textElement: ExcalidrawTextElement, isExistingElement: boolean): string {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onBeforeTextEdit, "ExcalidrawView.onBeforeTextEdit", textElement);
+    const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
+    const st = api.getAppState();
+    setDynamicStyle(
+      this.plugin.ea,
+      this,
+      st.viewBackgroundColor === "transparent" ? "white" : st.viewBackgroundColor,
+      this.plugin.settings.dynamicStyling,
+      api.getColorAtScenePoint({sceneX: this.currentPosition.x, sceneY: this.currentPosition.y})
+    );
+    if(!isExistingElement) {
+      return;
+    }
     window.clearTimeout(this.isEditingTextResetTimer);
     this.isEditingTextResetTimer = null;
     this.semaphores.isEditingText = true; //to prevent autoresize on mobile when keyboard pops up

src/MarkdownPostProcessor.ts

@@ -886,6 +886,7 @@ export const markdownPostProcessor = async (
   el: HTMLElement,
   ctx: MarkdownPostProcessorContext,
 ) => {
+  await plugin.awaitSettings();
   const isPrinting = Boolean(document.body.querySelectorAll("body > .print").length>0);
   //firstElementChild: https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1956
   const isFrontmatter = el.hasClass("mod-frontmatter") ||

src/Scripts.ts

@@ -1,6 +1,7 @@
 import {
   App,
   Instruction,
+  normalizePath,
   TAbstractFile,
   TFile,
   WorkspaceLeaf,
@@ -22,6 +23,7 @@ export type ScriptIconMap = {
 
 export class ScriptEngine {
   private plugin: ExcalidrawPlugin;
+  private app: App;
   private scriptPath: string;
   //https://stackoverflow.com/questions/60218638/how-to-force-re-render-if-map-value-changes
   public scriptIconMap: ScriptIconMap;
@@ -29,6 +31,7 @@ export class ScriptEngine {
 
   constructor(plugin: ExcalidrawPlugin) {
     this.plugin = plugin;
+    this.app = plugin.app;
     this.scriptIconMap = {};
     this.loadScripts();
     this.registerEventHandlers();
@@ -58,7 +61,7 @@ export class ScriptEngine {
     if (!path.endsWith(".svg")) {
       return;
     }
-    const scriptFile = app.vault.getAbstractFileByPath(
+    const scriptFile = this.app.vault.getAbstractFileByPath(
       getIMGFilename(path, "md"),
     );
     if (scriptFile && scriptFile instanceof TFile) {
@@ -107,19 +110,19 @@ export class ScriptEngine {
 
   registerEventHandlers() {
     this.plugin.registerEvent(
-      this.plugin.app.vault.on(
+      this.app.vault.on(
         "delete",
         (file: TFile)=>this.deleteEventHandler(file)
       ),
     );
     this.plugin.registerEvent(
-      this.plugin.app.vault.on(
+      this.app.vault.on(
         "create",
         (file: TFile)=>this.createEventHandler(file)
       ),
     );
     this.plugin.registerEvent(
-      this.plugin.app.vault.on(
+      this.app.vault.on(
         "rename",
         (file: TAbstractFile, oldPath: string)=>this.renameEventHandler(file, oldPath)
       ),
@@ -138,15 +141,16 @@ export class ScriptEngine {
 
   public getListofScripts(): TFile[] {
     this.scriptPath = this.plugin.settings.scriptFolderPath;
-    if (!app.vault.getAbstractFileByPath(this.scriptPath)) {
-      //this.scriptPath = null;
+    if(!this.scriptPath) return;
+    this.scriptPath = normalizePath(this.scriptPath);
+    if (!this.app.vault.getAbstractFileByPath(this.scriptPath)) {
       return;
     }
-    return app.vault
+    return this.app.vault
       .getFiles()
       .filter(
         (f: TFile) =>
-          f.path.startsWith(this.scriptPath) && f.extension === "md",
+          f.path.startsWith(this.scriptPath+"/") && f.extension === "md",
       );
   }
 
@@ -166,7 +170,10 @@ export class ScriptEngine {
     }
 
     const subpath = path.split(`${this.scriptPath}/`)[1];
-    const lastSlash = subpath.lastIndexOf("/");
+    if(!subpath) {
+      console.warn(`ScriptEngine.getScriptName unexpected basename: ${basename}; path: ${path}`)
+    }
+    const lastSlash = subpath?.lastIndexOf("/");
     if (lastSlash > -1) {
       return subpath.substring(0, lastSlash + 1) + basename;
     }
@@ -175,10 +182,10 @@ export class ScriptEngine {
 
   async addScriptIconToMap(scriptPath: string, name: string) {
     const svgFilePath = getIMGFilename(scriptPath, "svg");
-    const file = app.vault.getAbstractFileByPath(svgFilePath);
+    const file = this.app.vault.getAbstractFileByPath(svgFilePath);
     const svgString: string =
       file && file instanceof TFile
-        ? await app.vault.read(file)
+        ? await this.app.vault.read(file)
         : null;
     this.scriptIconMap = {
       ...this.scriptIconMap,
@@ -199,12 +206,12 @@ export class ScriptEngine {
       name: `(Script) ${scriptName}`,
       checkCallback: (checking: boolean) => {
         if (checking) {
-          return Boolean(app.workspace.getActiveViewOfType(ExcalidrawView));
+          return Boolean(this.app.workspace.getActiveViewOfType(ExcalidrawView));
         }
-        const view = app.workspace.getActiveViewOfType(ExcalidrawView);
+        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
         if (view) {
           (async()=>{
-            const script = await app.vault.read(f);
+            const script = await this.app.vault.read(f);
             if(script) {
               //remove YAML frontmatter if present
               this.executeScript(view, script, scriptName,f);
@@ -218,7 +225,7 @@ export class ScriptEngine {
   }
 
   unloadScripts() {
-    const scripts = app.vault
+    const scripts = this.app.vault
       .getFiles()
       .filter((f: TFile) => f.path.startsWith(this.scriptPath));
     scripts.forEach((f) => {
@@ -236,11 +243,11 @@ export class ScriptEngine {
 
     const commandId = `${PLUGIN_ID}:${basename}`;
     // @ts-ignore
-    if (!this.plugin.app.commands.commands[commandId]) {
+    if (!this.app.commands.commands[commandId]) {
       return;
     }
     // @ts-ignore
-    delete this.plugin.app.commands.commands[commandId];
+    delete this.app.commands.commands[commandId];
   }
 
   async executeScript(view: ExcalidrawView, script: string, title: string, file: TFile) {
@@ -271,7 +278,7 @@ export class ScriptEngine {
         ScriptEngine.inputPrompt(
           view,
           this.plugin,
-          this.plugin.app,
+          this.app,
           header,
           placeholder,
           value,
@@ -288,7 +295,7 @@ export class ScriptEngine {
         instructions?: Instruction[],
       ) =>
         ScriptEngine.suggester(
-          this.plugin.app,
+          this.app,
           displayItems,
           items,
           hint,
@@ -304,7 +311,7 @@ export class ScriptEngine {
 }
 
   private updateToolPannels() {
-    const excalidrawViews = getExcalidrawViews(this.plugin.app);
+    const excalidrawViews = getExcalidrawViews(this.app);
     excalidrawViews.forEach(excalidrawView => {
       excalidrawView.toolsPanelRef?.current?.updateScriptIconMap(
         this.scriptIconMap,

src/dialogs/Messages.ts

@@ -17,6 +17,47 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://storage.ko-fi.com/cdn/kofi6.png?v=6" border="0" alt="Buy Me a Coffee at ko-fi.com"  height=45></a></div>
 `,
+"2.6.7":`
+Hoping to finally move on to 2.7.0... but still have one last bug to fix in 2.6.x!
+
+## Fixed
+I misread a line in the Excalidraw package code... ended up breaking image loading in 2.6.6. The icon library script didn't work right, and updating nested drawings caused all images in the scene to be dropped from memory. This led to image-placeholders in exports and broke copy-paste to Excalidraw.com and between drawings. I am surprised no one reported it! 😳
+`,
+"2.6.6":`
+## Fixed
+- Images and LaTeX formulas did not update in the scene when the source was changed until the Excalidraw drawing was closed and reopened. [#2105](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2105)
+`,
+"2.6.5":`
+## Fixed
+- Text sizing issue in the drawing that is first loaded after Obsidian restarts [#2086](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2086)
+- Excalidraw didn't load if there was a file in the Excalidraw folder with a name that starts the same way as the Scripts folder name. [#2095](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2095)
+- **OVERSIZED EXCALIDRAW TOOLBAR**: Added a new setting under "Excalidraw Appearance and Behavior > Theme and Styling" called "Limit Obsidian Font Size to Editor Text." This setting is off by default. When enabled, it restricts Obsidian's custom font size adjustments to editor text only, preventing unintended scaling of Excalidraw UI elements and other themes that rely on the default interface font size. Feel free to experiment with this setting to improve Excalidraw UI consistency. However, because this change affects the broader Obsidian UI, it's recommended to turn it off if any layout issues arise. [#2087](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2087)`,
+"2.6.4":`
+## Fixed
+- Error saving when cropping images embedded from a URL (not from a file in the Vault) [#2096](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2096)
+`,
+"2.6.3":`
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/OfUWAvCgbXk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+
+## New
+- **Cropping PDF Pages**  
+  - Improved PDF++ cropping: You can now double-click cropped images in Excalidraw to adjust the crop area, which will also appear as a highlight in PDF++. This feature applies to PDF cut-outs created in version 2.6.3 and beyond.
+- **Insert Last Active PDF Page as Image**  
+  - New command palette action lets you insert the currently active PDF page into Excalidraw. Ideal for setups with PDF and Excalidraw side-by-side. You can assign a hotkey for quicker access. Cropped areas in Excalidraw will show as highlights in PDF++.
+
+## Fixed
+- Fixed **Close Settings** button toggle behavior [#2085](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2085)
+- Resolved text wrapping issues causing layout shifts due to trailing whitespaces [#8714](https://github.com/excalidraw/excalidraw/pull/8714)
+- **Aspect Ratio and Size Reset** commands now function correctly with cropped images.
+- **Cropped Drawings**: Adjustments to cropped Excalidraw drawings are now supported. However, for nested Excalidraw drawings, it's recommended to use area, group, and frame references instead of cropping.
+
+## Refactoring
+- Further font loading optimizations on Excalidraw.com; no impact expected in Obsidian [#8693](https://github.com/excalidraw/excalidraw/pull/8693)
+- Text wrapping improvements [#8715](https://github.com/excalidraw/excalidraw/pull/8715)
+- Plugin initiation and error handling
+`,
 "2.6.2":`
 ## Fixed
 - Image scaling issue with SVGs that miss the width and height property. [#8729](https://github.com/excalidraw/excalidraw/issues/8729)

src/lang/locale/en.ts

@@ -6,6 +6,8 @@ import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
 const CJK_FONTS = "CJK Fonts";
+declare const PLUGIN_VERSION:string;
+
 // English
 export default {
   // main.ts
@@ -326,6 +328,11 @@ FILENAME_HEAD: "Filename",
     "i.e. you are not using Excalidraw markdown files.<br><b><u>Toggle ON:</u></b> filename ends with .excalidraw.md<br><b><u>Toggle OFF:</u></b> filename ends with .md",
   DISPLAY_HEAD: "Excalidraw appearance and behavior",
   DISPLAY_DESC: "In the 'appearance and behavior' section of Excalidraw Settings, you can fine-tune how Excalidraw appears and behaves. This includes options for dynamic styling, left-handed mode, matching Excalidraw and Obsidian themes, default modes, and more.",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_NAME: "Limit Obsidian Font Size to Editor Text",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_DESC:
+    "Obsidian's custom font size setting affects the entire interface, including Excalidraw and themes that depend on the default font size. " +
+    "Enabling this option restricts font size changes to editor text, which will improve the look of Excalidraw. " +
+    "If parts of the UI look incorrect after enabling, try turning this setting off.",  
   DYNAMICSTYLE_NAME: "Dynamic styling",
   DYNAMICSTYLE_DESC:
     "Change Excalidraw UI colors to match the canvas color",
@@ -959,4 +966,7 @@ FILENAME_HEAD: "Filename",
   IPM_GROUP_PAGES_DESC: "This will group all pages into a single group. This is recommended if you are locking the pages after import, because the group will be easier to unlock later rather than unlocking one by one.",
   IPM_SELECT_PDF: "Please select a PDF file",
 
+  //Utils.ts
+  UPDATE_AVAILABLE: `A newer version of Excalidraw is available in Community Plugins.\n\nYou are using ${PLUGIN_VERSION}.\nThe latest is`,
+  ERROR_PNG_TOO_LARGE: "Error exporting PNG - PNG too large, try a smaller resolution",
 };

src/lang/locale/zh-cn.ts

@@ -6,6 +6,8 @@ import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
 const CJK_FONTS = "CJK Fonts";
+declare const PLUGIN_VERSION:string;
+
 // 简体中文
 export default {
   // main.ts
@@ -325,7 +327,12 @@ FILENAME_HEAD: "文件名",
     "该选项在兼容模式（即非 Excalidraw 专用 Markdown 文件）下不会生效。<br>" +
     "<b>开启：</b>使用 .excalidraw.md 作为扩展名。<br><b>关闭：</b>使用 .md 作为扩展名。",
   DISPLAY_HEAD: "界面 & 行为",
-  DISPLAY_DESC: "包括：左手模式，主题匹配，缩放，激光笔工具，修饰键等的设置。",
+  DISPLAY_DESC: "在 Excalidraw 设置的 '外观和行为' 部分，您可以微调 Excalidraw 的外观和行为。这包括动态样式、左手模式、匹配 Excalidraw 和 Obsidian 主题、默认模式等选项。",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_NAME : "限制 Obsidian 字体大小为编辑器文本" ,
+  OVERRIDE_OBSIDIAN_FONT_SIZE_DESC :
+    "Obsidian 的自定义字体大小设置会影响整个界面，包括 Excalidraw 和依赖默认字体大小的主题。" +
+    "启用此选项将限制字体大小更改为编辑器文本，这将改善 Excalidraw 的外观。" +
+    "如果启用后发现界面的某些部分看起来不正确，请尝试关闭此设置。" ,
   DYNAMICSTYLE_NAME: "动态样式",
   DYNAMICSTYLE_DESC:
     "根据画布颜色自动调节 Excalidraw 界面颜色",
@@ -870,6 +877,7 @@ FILENAME_HEAD: "文件名",
         对此带来的不便，我深表歉意。
       </p>
     `,
+
   //ObsidianMenu.tsx
   GOTO_FULLSCREEN: "进入全屏模式",
   EXIT_FULLSCREEN: "退出全屏模式",
@@ -958,4 +966,7 @@ FILENAME_HEAD: "文件名",
   IPM_GROUP_PAGES_DESC: "这将把所有页面建立为一个单独的组。如果您在导入后锁定页面，建议使用此方法，因为这样可以更方便地解锁整个组，而不是逐个解锁。",
   IPM_SELECT_PDF: "请选择一个 PDF 文件",
 
-};
+  //Utils.ts
+  UPDATE_AVAILABLE: `Excalidraw 的新版本已在社区插件中可用。\n\n您正在使用 ${PLUGIN_VERSION}。\n最新版本是`,
+  ERROR_PNG_TOO_LARGE: "导出 PNG 时出错 - PNG 文件过大，请尝试较小的分辨率",
+};

src/main.ts

@@ -145,7 +145,6 @@ import { WeakArray } from "./utils/WeakArray";
 import { getCJKDataURLs } from "./utils/CJKLoader";
 import { ExcalidrawLoading, switchToExcalidraw } from "./dialogs/ExcalidrawLoading";
 import { insertImageToView } from "./utils/ExcalidrawViewUtils";
-import tr from "./lang/locale/tr";
 
 declare let EXCALIDRAW_PACKAGE:string;
 declare let REACT_PACKAGES:string;
@@ -153,7 +152,8 @@ declare const unpackExcalidraw: Function;
 declare let react:any;
 declare let reactDOM:any;
 declare let excalidrawLib: typeof ExcalidrawLib;
-declare let PLUGIN_VERSION:string;
+declare const PLUGIN_VERSION:string;
+declare const INITIAL_TIMESTAMP: number;
 
 export default class ExcalidrawPlugin extends Plugin {
   public eaInstances = new WeakArray<ExcalidrawAutomate>();
@@ -199,13 +199,17 @@ export default class ExcalidrawPlugin extends Plugin {
   //if set, the next time this file is opened it will be opened as markdown
   public forceToOpenInMarkdownFilepath: string = null;
   //private slob:string;
-  private ribbonIcon:HTMLElement;
   public loadTimestamp:number;
   private isLocalCJKFontAvailabe:boolean = undefined
   public isReady = false;
+  private startupAnalytics: string[] = [];
+  private lastLogTimestamp: number;
+  private settingsReady: boolean = false;
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
+    this.loadTimestamp = INITIAL_TIMESTAMP;
+    this.lastLogTimestamp = this.loadTimestamp;
     this.packageMap.set(window,{react, reactDOM, excalidrawLib});
     this.filesMaster = new Map<
       FileId,
@@ -219,6 +223,16 @@ export default class ExcalidrawPlugin extends Plugin {
     }*/
   }
 
+  private logStartupEvent(message:string) {
+    const timestamp = Date.now();
+    this.startupAnalytics.push(`${message}\nTotal: ${timestamp - this.loadTimestamp}ms Delta: ${timestamp - this.lastLogTimestamp}ms\n`);
+    this.lastLogTimestamp = timestamp;
+  }
+
+  public printStarupBreakdown() {
+    console.log(`Excalidraw ${PLUGIN_VERSION} startup breakdown:\n`+this.startupAnalytics.join("\n"));
+  }
+
   get locale() {
     return LOCALE;
   }
@@ -352,6 +366,7 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   async onload() {
+    this.logStartupEvent("Plugin Constructor ready, starting onload()");
     this.registerView(
       VIEW_TYPE_EXCALIDRAW,
       (leaf: WorkspaceLeaf) => {
@@ -365,60 +380,160 @@ export default class ExcalidrawPlugin extends Plugin {
     //Compatibility mode with .excalidraw files
     this.registerExtensions(["excalidraw"], VIEW_TYPE_EXCALIDRAW);
 
-    await this.loadSettings({reEnableAutosave:true});
-    const updateSettings = !this.settings.onceOffCompressFlagReset || !this.settings.onceOffGPTVersionReset;
-    if(!this.settings.onceOffCompressFlagReset) {
-      this.settings.compress = true;
-      this.settings.onceOffCompressFlagReset = true;
-    }
-    if(!this.settings.onceOffGPTVersionReset) {
-      if(this.settings.openAIDefaultVisionModel === "gpt-4-vision-preview") {
-        this.settings.openAIDefaultVisionModel = "gpt-4o";
-      }
-    }
-    if(updateSettings) {
-      await this.saveSettings();
-    }
-    this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
-    this.ea = await initExcalidrawAutomate(this);
+    addIcon(ICON_NAME, EXCALIDRAW_ICON);
+    addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
+    addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
+    this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), this.actionRibbonClick.bind(this));
+
+    try {
+      this.loadSettings({reEnableAutosave:true}).then(async () => {
+        const updateSettings = !this.settings.onceOffCompressFlagReset || !this.settings.onceOffGPTVersionReset;
+        if(!this.settings.onceOffCompressFlagReset) {
+          this.settings.compress = true;
+          this.settings.onceOffCompressFlagReset = true;
+        }
+        if(!this.settings.onceOffGPTVersionReset) {
+          if(this.settings.openAIDefaultVisionModel === "gpt-4-vision-preview") {
+            this.settings.openAIDefaultVisionModel = "gpt-4o";
+          }
+        }
+        if(updateSettings) {
+          await this.saveSettings();
+        }
+        this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
+        this.settingsReady = true;
+      });
+    } catch (e) {
+      new Notice("Error loading plugin settings", 6000);
+      console.error("Error loading plugin settings", e);
+    }
+    this.logStartupEvent("Settings loaded");
+
+    try {
+      // need it her for ExcaliBrain
+      this.ea = initExcalidrawAutomate(this);
+    } catch (e) {
+      new Notice("Error initializing Excalidraw Automate", 6000);
+      console.error("Error initializing Excalidraw Automate", e);
+    }
+    this.logStartupEvent("Excalidraw Automate initialized");
+
+    try {
+      //Licat: Are you registering your post processors in onLayoutReady? You should register them in onload instead
+      this.addMarkdownPostProcessor();
+    } catch (e) {
+      new Notice("Error adding markdown post processor", 6000);
+      console.error("Error adding markdown post processor", e);
+    }
+    this.logStartupEvent("Markdown post processor added");
 
-    //Licat: Are you registering your post processors in onLayoutReady? You should register them in onload instead
-    this.addMarkdownPostProcessor();
-    
     this.app.workspace.onLayoutReady(async () => {
-      unpackExcalidraw();
-      excalidrawLib = window.eval.call(window,`(function() {${EXCALIDRAW_PACKAGE};return ExcalidrawLib;})()`);
-      this.packageMap.set(window,{react, reactDOM, excalidrawLib});
-      updateExcalidrawLib();
-      initCompressionWorker();
       this.loadTimestamp = Date.now();
-      addIcon(ICON_NAME, EXCALIDRAW_ICON);
-      addIcon(SCRIPTENGINE_ICON_NAME, SCRIPTENGINE_ICON);
-      addIcon(EXPORT_IMG_ICON_NAME, EXPORT_IMG_ICON);
+      this.lastLogTimestamp = this.loadTimestamp;
+      this.logStartupEvent("\n----------------------------------\nWorkspace onLayoutReady event fired (these actions are outside the plugin initialization)");
+      await this.awaitSettings();
+      this.logStartupEvent("Settings awaited");
+      try {
+        unpackExcalidraw();
+        excalidrawLib = window.eval.call(window,`(function() {${EXCALIDRAW_PACKAGE};return ExcalidrawLib;})()`);
+        this.packageMap.set(window,{react, reactDOM, excalidrawLib});
+        updateExcalidrawLib();
+      } catch (e) {
+        new Notice("Error loading the Excalidraw package", 6000);
+        console.error("Error loading the Excalidraw package", e);
+      }
+      this.logStartupEvent("Excalidraw package unpacked");
 
-      this.excalidrawConfig = new ExcalidrawConfig(this);
-      await loadMermaid();
-      this.addThemeObserver();
+      try {
+        initCompressionWorker();
+      } catch (e) {
+        new Notice("Error initializing compression worker", 6000);
+        console.error("Error initializing compression worker", e);
+      }
+      this.logStartupEvent("Compression worker initialized");
 
-      //inspiration taken from kanban:
-      //https://github.com/mgmeyers/obsidian-kanban/blob/44118e25661bff9ebfe54f71ae33805dc88ffa53/src/main.ts#L267
-      this.registerMonkeyPatches();
+      try {
+        this.excalidrawConfig = new ExcalidrawConfig(this);
+      } catch (e) {
+        new Notice("Error initializing Excalidraw config", 6000);
+        console.error("Error initializing Excalidraw config", e);
+      }
+      this.logStartupEvent("Excalidraw config initialized");
 
-      this.stylesManager = new StylesManager(this);
-      this.scriptEngine = new ScriptEngine(this);
-      await this.initializeFonts();
-      imageCache.initializeDB(this);
+      try {
+        await loadMermaid();
+      } catch (e) {
+        new Notice("Error loading Mermaid", 6000);
+        console.error("Error loading Mermaid", e);
+      }
+      this.logStartupEvent("Mermaid loaded");
 
-      this.isReady = true;
-      switchToExcalidraw(this.app);
-      this.switchToExcalidarwAfterLoad();
+      try {
+        this.addThemeObserver();
+      } catch (e) {
+        new Notice("Error adding theme observer", 6000);
+        console.error("Error adding theme observer", e);
+      }
+      this.logStartupEvent("Theme observer added");
+
+      try {
+        //inspiration taken from kanban:
+        //https://github.com/mgmeyers/obsidian-kanban/blob/44118e25661bff9ebfe54f71ae33805dc88ffa53/src/main.ts#L267
+        this.registerMonkeyPatches();
+      } catch (e) {
+        new Notice("Error registering monkey patches", 6000);
+        console.error("Error registering monkey patches", e);
+      }
+      this.logStartupEvent("Monkey patches registered");
+
+      try {
+        this.stylesManager = new StylesManager(this);
+      } catch (e) {
+        new Notice("Error initializing styles manager", 6000);
+        console.error("Error initializing styles manager", e);
+      }
+      this.logStartupEvent("Styles manager initialized");
+
+      try {
+        this.scriptEngine = new ScriptEngine(this);
+      } catch (e) {
+        new Notice("Error initializing script engine", 6000);
+        console.error("Error initializing script engine", e);
+      }
+      this.logStartupEvent("Script engine initialized");
+
+      try {
+        await this.initializeFonts();
+      } catch (e) {
+        new Notice("Error initializing fonts", 6000);
+        console.error("Error initializing fonts", e);
+      }
+      this.logStartupEvent("Fonts initialized");
+
+      try {
+        imageCache.initializeDB(this);
+      } catch (e) {
+        new Notice("Error initializing image cache", 6000);
+        console.error("Error initializing image cache", e);
+      }
+      this.logStartupEvent("Image cache initialized");
+
+      try {
+        this.isReady = true;
+        switchToExcalidraw(this.app);
+        this.switchToExcalidarwAfterLoad();
+      } catch (e) {
+        new Notice("Error switching views to Excalidraw", 6000);
+        console.error("Error switching views to Excalidraw", e);
+      }
+      this.logStartupEvent("Switched to Excalidraw views");
 
       try {
         if (this.settings.showReleaseNotes) {
           //I am repurposing imageElementNotice, if the value is true, this means the plugin was just newly installed to Obsidian.
-          const obsidianJustInstalled = this.settings.previousRelease === "0.0.0"
+          const obsidianJustInstalled = (this.settings.previousRelease === "0.0.0") || !this.settings.previousRelease;
 
-          if (isVersionNewerThanOther(PLUGIN_VERSION, this.settings.previousRelease)) {
+          if (isVersionNewerThanOther(PLUGIN_VERSION, this.settings.previousRelease ?? "0.0.0")) {
             new ReleaseNotes(
               this.app,
               this,
@@ -428,70 +543,95 @@ export default class ExcalidrawPlugin extends Plugin {
         }
       } catch (e) {
         new Notice("Error opening release notes", 6000);
-        console.log("Error opening release notes", e);
+        console.error("Error opening release notes", e);
       }
+      this.logStartupEvent("Release notes opened");
 
+      //---------------------------------------------------------------------
       //initialization that can happen after Excalidraw views are initialized
-      
+      //---------------------------------------------------------------------      
       try {
         this.registerEventListeners();
       } catch (e) {
         new Notice("Error registering event listeners", 6000);
-        console.log("Error registering event listeners", e);
+        console.error("Error registering event listeners", e);
       }
+      this.logStartupEvent("Event listeners registered");
+
       try { 
         this.runStartupScript();
       } catch (e) {
         new Notice("Error running startup script", 6000);
-        console.log("Error running startup script", e);
+        console.error("Error running startup script", e);
       }
+      this.logStartupEvent("Startup script run");
+
       try {
         this.editorHandler = new EditorHandler(this);
         this.editorHandler.setup();
       } catch (e) {
         new Notice("Error setting up editor handler", 6000);
-        console.log("Error setting up editor handler", e);
+        console.error("Error setting up editor handler", e);
       }
+      this.logStartupEvent("Editor handler initialized");
+
       try {
         this.registerInstallCodeblockProcessor();
       } catch (e) {
         new Notice("Error registering script install-codeblock processor", 6000);
-        console.log("Error registering script install-codeblock processor", e);
+        console.error("Error registering script install-codeblock processor", e);
       }
+      this.logStartupEvent("Script install-codeblock processor registered");
 
       try {
         this.experimentalFileTypeDisplayToggle(this.settings.experimentalFileType);
       } catch (e) {
         new Notice("Error setting up experimental file type display", 6000);
-        console.log("Error setting up experimental file type display", e);
+        console.error("Error setting up experimental file type display", e);
       }
+      this.logStartupEvent("Experimental file type display set");
+
       try {
         this.registerCommands();
       } catch (e) {
         new Notice("Error registering commands", 6000);
-        console.log("Error registering commands", e);
+        console.error("Error registering commands", e);
       }
+      this.logStartupEvent("Commands registered");
+
       try {
         this.registerEditorSuggest(new FieldSuggester(this));
       } catch (e) {
         new Notice("Error registering editor suggester", 6000);
-        console.log("Error registering editor suggester", e);
+        console.error("Error registering editor suggester", e);
       }
+      this.logStartupEvent("Editor suggester registered");
+
       try {
         this.setPropertyTypes();
       } catch (e) {
         new Notice("Error setting up property types", 6000);
-        console.log("Error setting up property types", e);
+        console.error("Error setting up property types", e);
       }
+      this.logStartupEvent("Property types set");
+
       try {
         this.taskbone = new Taskbone(this);
       } catch (e) {
         new Notice("Error setting up taskbone", 6000);
-        console.log("Error setting up taskbone", e);
+        console.error("Error setting up taskbone", e);
       }
+      this.logStartupEvent("Taskbone set up");
     });
+    this.logStartupEvent("Workspace ready event handler added");
   }
 
+  public async awaitSettings() {
+    let counter = 0;
+    while(!this.settingsReady && counter < 150) {
+      await sleep(20);
+    }
+  }
 
   public async awaitInit() {
     let counter = 0;
@@ -996,8 +1136,6 @@ export default class ExcalidrawPlugin extends Plugin {
     this.importSVGDialog = new ImportSVGDialog(this);
     this.insertMDDialog = new InsertMDDialog(this);
 
-    this.ribbonIcon = this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), this.actionRibbonClick.bind(this));
-
     const createNewAction = (e: MouseEvent | KeyboardEvent, file: TFile) => {
       let folderpath = file.path;
       if (file instanceof TFile) {
@@ -2918,6 +3056,12 @@ export default class ExcalidrawPlugin extends Plugin {
     }
     this.leafChangeTimeout = window.setTimeout(()=>{this.leafChangeTimeout = null;},1000);
 
+    if(this.settings.overrideObsidianFontSize) {
+      if(leaf.view && (leaf.view.getViewType() === VIEW_TYPE_EXCALIDRAW)) {
+        document.documentElement.style.fontSize = "";
+      } 
+    }
+
     const previouslyActiveEV = this.activeExcalidrawView;
     const newActiveviewEV: ExcalidrawView =
       leaf.view instanceof ExcalidrawView ? leaf.view : null;
@@ -3155,7 +3299,11 @@ export default class ExcalidrawPlugin extends Plugin {
           }
           //if the user hasn't touched the file for 5 minutes, don't synchronize, reload.
           //this is to avoid complex sync scenarios of multiple remote changes outside an active collaboration session
-          if(excalidrawView.lastSaveTimestamp + 300000 < Date.now()) {
+          const activeView = this.app.workspace.activeLeaf.view;
+          const isEditingMarkdownSideInSplitView = (activeView !== excalidrawView) &&
+            activeView instanceof MarkdownView && activeView.file === excalidrawView.file;
+
+          if(!isEditingMarkdownSideInSplitView && (excalidrawView.lastSaveTimestamp + 300000 < Date.now())) {
             excalidrawView.reload(true, excalidrawView.file);
             return;
           }           
@@ -3403,11 +3551,6 @@ export default class ExcalidrawPlugin extends Plugin {
       window.clearTimeout(versionUpdateCheckTimer);
     }
 
-    if(this.ribbonIcon) {
-      this.ribbonIcon.remove();
-      this.ribbonIcon = null;
-    }
-
     if(this.scriptEngine) {
       this.scriptEngine.destroy();
       this.scriptEngine = null;
@@ -3509,7 +3652,7 @@ export default class ExcalidrawPlugin extends Plugin {
     EXCALIDRAW_PACKAGE = "";
     REACT_PACKAGES = "";
     //pluginPackages = null;
-    PLUGIN_VERSION = null;
+    //PLUGIN_VERSION = null;
     //@ts-ignore
     delete window.PolyBool;
     this.deletePackage(window);

src/settings.ts

@@ -41,6 +41,7 @@ import { Rank } from "./menu/ActionIcons";
 import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/constSettingsTags";
 import { HotkeyEditor } from "./dialogs/HotkeyEditor";
 import { getExcalidrawViews } from "./utils/ObsidianUtils";
+import de from "./lang/locale/de";
 
 export interface ExcalidrawSettings {
   folder: string;
@@ -76,6 +77,7 @@ export interface ExcalidrawSettings {
   previewMatchObsidianTheme: boolean;
   width: string;
   height: string;
+  overrideObsidianFontSize: boolean;
   dynamicStyling: DynamicStyle;
   isLeftHanded: boolean;
   iframeMatchExcalidrawTheme: boolean;
@@ -253,6 +255,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   previewMatchObsidianTheme: false,
   width: "400",
   height: "",
+  overrideObsidianFontSize: false,
   dynamicStyling: "colorful",
   isLeftHanded: false,
   iframeMatchExcalidrawTheme: true,
@@ -516,6 +519,12 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
   }
 
   async hide() {
+    if(this.plugin.settings.overrideObsidianFontSize) {
+      document.documentElement.style.fontSize = "";
+    } else if(!document.documentElement.style.fontSize) {
+      document.documentElement.style.fontSize = getComputedStyle(document.body).getPropertyValue("--font-text-size");
+    }
+    
     this.plugin.settings.scriptFolderPath = normalizePath(
       this.plugin.settings.scriptFolderPath,
     );
@@ -1163,6 +1172,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h3",
     });
     
+    new Setting(detailsEl)
+      .setName(t("OVERRIDE_OBSIDIAN_FONT_SIZE_NAME"))
+      .setDesc(fragWithHTML(t("OVERRIDE_OBSIDIAN_FONT_SIZE_DESC")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.overrideObsidianFontSize)
+          .onChange((value) => {
+            this.plugin.settings.overrideObsidianFontSize = value;
+            this.applySettingsUpdate();
+          }),
+      );
+
     new Setting(detailsEl)
       .setName(t("DYNAMICSTYLE_NAME"))
       .setDesc(fragWithHTML(t("DYNAMICSTYLE_DESC")))

src/utils/DynamicStyling.ts

@@ -13,6 +13,7 @@ export const setDynamicStyle = (
   view: ExcalidrawView, //the excalidraw view 
   color: string,
   dynamicStyle: DynamicStyle,
+  textBackgroundColor?: string,
 ) => {
   if(dynamicStyle === "none") {
     view.excalidrawContainer?.removeAttribute("style");
@@ -116,7 +117,9 @@ export const setDynamicStyle = (
     [`--h3-color`]: str(text),
     [`--h4-color`]: str(text),
     [`color`]: str(text),
-    ['--excalidraw-caret-color']: str(isLightTheme ? text : cmBG()),
+    ['--excalidraw-caret-color']: textBackgroundColor
+      ? str(isLightTheme ? invertColor(textBackgroundColor) : ea.getCM(textBackgroundColor))
+      : str(isLightTheme ? text : cmBG()),
     [`--select-highlight-color`]: str(gray1()),
     [`--color-gray-90`]: str(isDark?text.darkerBy(5):text.lighterBy(5)), //search background
     [`--color-gray-80`]: str(isDark?text.darkerBy(10):text.lighterBy(10)), //frame

src/utils/Utils.ts

@@ -31,6 +31,7 @@ import opentype from 'opentype.js';
 import { runCompressionWorker } from "src/workers/compression-worker";
 import Pool from "es6-promise-pool";
 import { FileData } from "src/EmbeddedFileLoader";
+import { t } from "src/lang/helpers";
 
 declare const PLUGIN_VERSION:string;
 declare var LZString: any;
@@ -77,7 +78,7 @@ export async function checkExcalidrawVersion() {
 
     if (isVersionNewerThanOther(latestVersion,PLUGIN_VERSION)) {
       new Notice(
-        `A newer version of Excalidraw is available in Community Plugins.\n\nYou are using ${PLUGIN_VERSION}.\nThe latest is ${latestVersion}`,
+        t("UPDATE_AVAILABLE") + ` ${latestVersion}`,
       );
     }
   } catch (e) {
@@ -220,15 +221,6 @@ export async function getFontDataURL (
     const split = dataURL.split(";base64,", 2);
     dataURL = `${split[0]};charset=utf-8;base64,${split[1]}`;
     fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}") format("${format}")}`;
-/*    const mimeType = f.extension.startsWith("woff")
-      ? "application/font-woff"
-      : "font/truetype";
-    fontName = name ?? f.basename;
-    dataURL = await getDataURL(ab, mimeType);
-    fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}")}`;
-     //format("${f.extension === "ttf" ? "truetype" : f.extension}");}`;
-    const split = fontDef.split(";base64,", 2);
-    fontDef = `${split[0]};charset=utf-8;base64,${split[1]}`;*/
   }
   return { fontDef, fontName, dataURL };
 };
@@ -375,7 +367,7 @@ export async function getPNG (
       }),
     });
   } catch (error) {
-    new Notice("Error exporting PNG - PNG too large, try a smaller resolution");
+    new Notice(t("ERROR_PNG_TOO_LARGE"));
     errorlog({ where: "Utils.getPNG", error });
     return null;
   }
@@ -773,6 +765,8 @@ export function getPNGScale (plugin: ExcalidrawPlugin, file: TFile): number {
 };
 
 export function isVersionNewerThanOther (version: string, otherVersion: string): boolean {
+  if(!version || !otherVersion) return true;
+
   const v = version.match(/(\d*)\.(\d*)\.(\d*)/);
   const o = otherVersion.match(/(\d*)\.(\d*)\.(\d*)/);