2.6.3-beta-4

Update zh-cn.ts  to dec2909

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "2.5.3-beta-3",
+	"version": "2.6.3-beta-4",
 	"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.5.2",
+  "version": "2.6.2",
   "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-4",
+    "@zsviczian/excalidraw": "0.17.6-11",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",
@@ -34,7 +34,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "roughjs": "^4.5.2",
-    "woff2sfnt-sfnt2woff": "^1.0.0"
+    "woff2sfnt-sfnt2woff": "^1.0.0",
+    "es6-promise-pool": "2.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",

rollup.config.js

@@ -8,6 +8,7 @@ import fs from 'fs';
 import LZString from 'lz-string';
 import postprocess from '@zsviczian/rollup-plugin-postprocess';
 import cssnano from 'cssnano';
+import jsesc from 'jsesc';
 
 // Load environment variables
 import dotenv from 'dotenv';
@@ -52,11 +53,13 @@ if (!isLib) console.log(manifest.version);
 const packageString = isLib
   ? ""
   : ';' + lzstring_pkg +
-    '\nlet EXCALIDRAW_PACKAGES = LZString.decompressFromBase64("' + LZString.compressToBase64(react_pkg + reactdom_pkg + excalidraw_pkg) + '");\n' +
-    'let {react, reactDOM, excalidrawLib} = window.eval.call(window, `(function() {' +
-    '${EXCALIDRAW_PACKAGES};' +
-    'return {react: React, reactDOM: ReactDOM, excalidrawLib: ExcalidrawLib};})();`);\n' +
-    'let PLUGIN_VERSION="' + manifest.version + '";';
+  '\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 BASE_CONFIG = {
   input: 'src/main.ts',

src/CodeMirrorExtension/EditorHandler.ts

@@ -1,6 +1,7 @@
 import { Extension } from "@codemirror/state";
 import ExcalidrawPlugin from "src/main";
 import { HideTextBetweenCommentsExtension } from "./Fadeout";
+import { debug, DEBUGGING } from "src/utils/DebugHelper";
 export const EDITOR_FADEOUT = "fadeOutExcalidrawMarkup";
 
 const editorExtensions: {[key:string]:Extension}= {
@@ -10,13 +11,16 @@ const editorExtensions: {[key:string]:Extension}= {
 export class EditorHandler {
   private activeEditorExtensions: Extension[] = [];
 
-  constructor(private plugin: ExcalidrawPlugin) {}
+  constructor(private plugin: ExcalidrawPlugin) {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(EditorHandler, `ExcalidrawPlugin.construct EditorHandler`);
+  }
 
   destroy(): void {
     this.plugin = null;
   }
 
   setup(): void {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setup, `ExcalidrawPlugin.construct EditorHandler.setup`);
     this.plugin.registerEditorExtension(this.activeEditorExtensions);
     this.updateCMExtensionState(EDITOR_FADEOUT, this.plugin.settings.fadeOutExcalidrawMarkup);
   }

src/EmbeddedFileLoader.ts

@@ -36,6 +36,8 @@ import {
   isMaskFile,
   getEmbeddedFilenameParts,
   cropCanvas,
+  promiseTry,
+  PromisePool,
 } from "./utils/Utils";
 import { ValueOf } from "./types/types";
 import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "./utils/MermaidUtils";
@@ -606,126 +608,169 @@ export class EmbeddedFilesLoader {
       this.isDark = excalidrawData?.scene?.appState?.theme === "dark";
     }
     let entry: IteratorResult<[FileId, EmbeddedFile]>;
-    const files: FileData[] = [];
-    while (!this.terminate && !(entry = entries.next()).done) {
-      if(fileIDWhiteList && !fileIDWhiteList.has(entry.value[0])) continue;
-      const embeddedFile: EmbeddedFile = entry.value[1];
-      if (!embeddedFile.isLoaded(this.isDark)) {
-        //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"embedded Files are not loaded"});
-        const data = await this._getObsidianImage(embeddedFile, depth);
-        if (data) {
-          const fileData: FileData = {
-            mimeType: data.mimeType,
-            id: entry.value[0],
-            dataURL: data.dataURL,
-            created: data.created,
-            size: data.size,
-            hasSVGwithBitmap: data.hasSVGwithBitmap,
-            shouldScale: embeddedFile.shouldScale()
-          };
-          try  {
-            addFiles([fileData], this.isDark, false);
-          }
-          catch(e) {
-            errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
-          }
-          //files.push(fileData);
-        }
-      } else if (embeddedFile.isSVGwithBitmap && (depth !== 0 || isThemeChange)) {
-        //this will reload the image in light/dark mode when switching themes
-        const fileData = {
-          mimeType: embeddedFile.mimeType,
-          id: entry.value[0],
-          dataURL: embeddedFile.getImage(this.isDark) as DataURL,
-          created: embeddedFile.mtime,
-          size: embeddedFile.size,
-          hasSVGwithBitmap: embeddedFile.isSVGwithBitmap,
-          shouldScale: embeddedFile.shouldScale()
-        };
-        //files.push(fileData);
-        try  {
-          addFiles([fileData], this.isDark, false);
-        }
-        catch(e) {
-          errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
-        }
-      }
-    }
+    const files: FileData[][] = [];
+    files.push([]);
+    let batch = 0;
 
-    let equation;
-    const equations = excalidrawData.getEquationEntries();
-    while (!this.terminate && !(equation = equations.next()).done) {
-      if(fileIDWhiteList && !fileIDWhiteList.has(equation.value[0])) continue;
-      if (!excalidrawData.getEquation(equation.value[0]).isLoaded) {
-        const latex = equation.value[1].latex;
-        const data = await tex2dataURL(latex);
-        if (data) {
-          const fileData = {
-            mimeType: data.mimeType,
-            id: equation.value[0],
-            dataURL: data.dataURL,
-            created: data.created,
-            size: data.size,
-            hasSVGwithBitmap: false,
-            shouldScale: true
-          };
-          files.push(fileData);
-        }
-      }
-    }
-
-    if(shouldRenderMermaid()) {
-      const mermaidElements = getMermaidImageElements(excalidrawData.scene.elements);
-      for(const element of mermaidElements) {
-        if(this.terminate) {
-          continue;
-        }
-        const data = getMermaidText(element);
-        const result = await mermaidToExcalidraw(data, {fontSize: 20}, true);
-        if(!result) {
-          continue;
-        }
-        if(result?.files) {
-          for (const key in result.files) {
+    function* loadIterator():Generator<Promise<void>> {
+      while (!(entry = entries.next()).done) {
+        if(fileIDWhiteList && !fileIDWhiteList.has(entry.value[0])) continue;
+        const embeddedFile: EmbeddedFile = entry.value[1];
+        const id = entry.value[0];
+        yield promiseTry(async () => {
+          if(this.terminate) {
+            return;
+          }
+          if (!embeddedFile.isLoaded(this.isDark)) {
+            //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"embedded Files are not loaded"});
+            const data = await this._getObsidianImage(embeddedFile, depth);
+            if (data) {
+              const fileData: FileData = {
+                mimeType: data.mimeType,
+                id: id,
+                dataURL: data.dataURL,
+                created: data.created,
+                size: data.size,
+                hasSVGwithBitmap: data.hasSVGwithBitmap,
+                shouldScale: embeddedFile.shouldScale()
+              };
+              files[batch].push(fileData);
+/*              try  {
+                addFiles([fileData], this.isDark, false);
+              }
+              catch(e) {
+                errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
+              }*/
+            }
+          } else if (embeddedFile.isSVGwithBitmap && (depth !== 0 || isThemeChange)) {
+            //this will reload the image in light/dark mode when switching themes
             const fileData = {
-              ...result.files[key],
-              id: element.fileId,
-              created: Date.now(),
-              hasSVGwithBitmap: false,
-              shouldScale: true,
-              size: await getImageSize(result.files[key].dataURL),
+              mimeType: embeddedFile.mimeType,
+              id: id,
+              dataURL: embeddedFile.getImage(this.isDark) as DataURL,
+              created: embeddedFile.mtime,
+              size: embeddedFile.size,
+              hasSVGwithBitmap: embeddedFile.isSVGwithBitmap,
+              shouldScale: embeddedFile.shouldScale()
             };
-            files.push(fileData);
+            files[batch].push(fileData);
+/*            try  {
+              addFiles([fileData], this.isDark, false);
+            }
+            catch(e) {
+              errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
+            }*/
           }
-          continue;
-        }
-        if(result?.elements) {
-          //handle case that mermaidToExcalidraw has implemented this type of diagram in the mean time
-          const res = await this.getExcalidrawSVG({
-            isDark: this.isDark,
-            file: null,
-            depth,
-            inFile: null,
-            hasSVGwithBitmap: false,
-            elements: result.elements
-          });
-          if(res?.dataURL) {
-            const size = await getImageSize(res.dataURL);
-            const fileData:FileData = {
-              mimeType: "image/svg+xml",
-              id: element.fileId,
-              dataURL: res.dataURL,
-              created: Date.now(),
-              hasSVGwithBitmap: res.hasSVGwithBitmap,
-              size,
-              shouldScale: true,
-            };
-            files.push(fileData);
-          }
-          continue;
-        }  
+        });
       }
-    };
+
+      let equationItem;
+      const equations = excalidrawData.getEquationEntries();
+      while (!(equationItem = equations.next()).done) {
+        if(fileIDWhiteList && !fileIDWhiteList.has(equationItem.value[0])) continue;
+        const equation = equationItem.value[1];
+        const id = equationItem.value[0];
+        yield promiseTry(async () => {
+          if (this.terminate) {
+            return;
+          }
+          if (!excalidrawData.getEquation(id).isLoaded) {
+            const latex = equation.latex;
+            const data = await tex2dataURL(latex);
+            if (data) {
+              const fileData = {
+                mimeType: data.mimeType,
+                id: id,
+                dataURL: data.dataURL,
+                created: data.created,
+                size: data.size,
+                hasSVGwithBitmap: false,
+                shouldScale: true
+              };
+              files[batch].push(fileData);
+            }
+          }
+        });
+      }
+
+      if(shouldRenderMermaid()) {
+        const mermaidElements = getMermaidImageElements(excalidrawData.scene.elements);
+        for(const element of mermaidElements) {
+          yield promiseTry(async () => {
+            if(this.terminate) {
+              return;
+            }
+            const data = getMermaidText(element);
+            const result = await mermaidToExcalidraw(data, {fontSize: 20}, true);
+            if(!result) {
+              return;
+            }
+            if(result?.files) {
+              for (const key in result.files) {
+                const fileData = {
+                  ...result.files[key],
+                  id: element.fileId,
+                  created: Date.now(),
+                  hasSVGwithBitmap: false,
+                  shouldScale: true,
+                  size: await getImageSize(result.files[key].dataURL),
+                };
+                files[batch].push(fileData);
+              }
+              return;
+            }
+            if(result?.elements) {
+              //handle case that mermaidToExcalidraw has implemented this type of diagram in the mean time
+              if (this.terminate) {
+                return;
+              }
+              const res = await this.getExcalidrawSVG({
+                isDark: this.isDark,
+                file: null,
+                depth,
+                inFile: null,
+                hasSVGwithBitmap: false,
+                elements: result.elements
+              });
+              if(res?.dataURL) {
+                const size = await getImageSize(res.dataURL);
+                const fileData:FileData = {
+                  mimeType: "image/svg+xml",
+                  id: element.fileId,
+                  dataURL: res.dataURL,
+                  created: Date.now(),
+                  hasSVGwithBitmap: res.hasSVGwithBitmap,
+                  size,
+                  shouldScale: true,
+                };
+                files[batch].push(fileData);
+              }
+              return;
+            }
+          });
+        }
+      };
+    }
+
+    const addFilesTimer = setInterval(() => {
+      if(files[batch].length === 0) {
+        return;
+      }
+      try  {
+        addFiles(files[batch], this.isDark, false);
+      }
+      catch(e) {
+        errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
+      }
+      files.push([]);
+      batch++;
+    }, 1200);
+
+    const iterator = loadIterator.bind(this)();
+    const concurency = 5;
+    await new PromisePool(iterator, concurency).all();
+    
+    clearInterval(addFilesTimer);
 
     this.emptyPDFDocsMap();
     if (this.terminate) {
@@ -734,7 +779,7 @@ export class EmbeddedFilesLoader {
     //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"add Files"});
     try {
       //in try block because by the time files are loaded the user may have closed the view
-      addFiles(files, this.isDark, true);
+      addFiles(files[batch], this.isDark, true);
     } catch (e) {
       errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
     }
@@ -1061,27 +1106,10 @@ export class EmbeddedFilesLoader {
 }
 
 const getSVGData = async (app: App, file: TFile, colorMap: ColorMap | null): Promise<DataURL> => {
-  const svg = replaceSVGColors(await app.vault.read(file), colorMap) as string;
-  return svgToBase64(svg) as DataURL;
+  const svgString = replaceSVGColors(await app.vault.read(file), colorMap) as string;
+  return svgToBase64(svgString) as DataURL;
 };
 
-/*export const generateIdFromFile = async (file: ArrayBuffer): Promise<FileId> => {
-  let id: FileId;
-  try {
-    const hashBuffer = await window.crypto.subtle.digest("SHA-1", file);
-    id =
-      // convert buffer to byte array
-      Array.from(new Uint8Array(hashBuffer))
-        // convert to hex string
-        .map((byte) => byte.toString(16).padStart(2, "0"))
-        .join("") as FileId;
-  } catch (error) {
-    errorlog({ where: "EmbeddedFileLoader.generateIdFromFile", error });
-    id = fileid() as FileId;
-  }
-  return id;
-};*/
-
 export const generateIdFromFile = async (file: ArrayBuffer, key?: string): Promise<FileId> => {
   let id: FileId;
   try {

src/ExcalidrawAutomate.ts

@@ -1547,6 +1547,10 @@ export class ExcalidrawAutomate {
         : imageFile.path + (scale || !anchor ? "":"|100%"),
       hasSVGwithBitmap: image.hasSVGwithBitmap,
       latex: null,
+      size: { //must have the natural size here (e.g. for PDF cropping)
+        height: image.size.height,
+        width: image.size.width,
+      },
     };
     if (scale && (Math.max(image.size.width, image.size.height) > MAX_IMAGE_SIZE)) {
       const scale =
@@ -2621,26 +2625,31 @@ export class ExcalidrawAutomate {
       return null;
     }
 
-    const size = await this.getOriginalImageSize(imgEl, true);
-    if (size) {
-      const originalArea = imgEl.width * imgEl.height;
-      const originalAspectRatio = size.width / size.height;
-      let newWidth = Math.sqrt(originalArea * originalAspectRatio);
-      let newHeight = Math.sqrt(originalArea / originalAspectRatio);
-      const centerX = imgEl.x + imgEl.width / 2;
-      const centerY = imgEl.y + imgEl.height / 2;
+    let originalArea, originalAspectRatio;
+    if(imgEl.crop) {
+      originalArea = imgEl.width * imgEl.height;
+      originalAspectRatio = imgEl.crop.width / imgEl.crop.height;
+    } else {
+      const size = await this.getOriginalImageSize(imgEl, true);
+      if (!size) { return false; }
+      originalArea = imgEl.width * imgEl.height;
+      originalAspectRatio = size.width / size.height;
+    }
+    let newWidth = Math.sqrt(originalArea * originalAspectRatio);
+    let newHeight = Math.sqrt(originalArea / originalAspectRatio);
+    const centerX = imgEl.x + imgEl.width / 2;
+    const centerY = imgEl.y + imgEl.height / 2;
 
-      if (newWidth !== imgEl.width || newHeight !== imgEl.height) {
-        if(!this.getElement(imgEl.id)) {
-          this.copyViewElementsToEAforEditing([imgEl]);
-        }
-        const eaEl = this.getElement(imgEl.id);
-        eaEl.width = newWidth;
-        eaEl.height = newHeight;
-        eaEl.x = centerX - newWidth / 2;
-        eaEl.y = centerY - newHeight / 2;
-        return true;
+    if (newWidth !== imgEl.width || newHeight !== imgEl.height) {
+      if(!this.getElement(imgEl.id)) {
+        this.copyViewElementsToEAforEditing([imgEl]);
       }
+      const eaEl = this.getElement(imgEl.id);
+      eaEl.width = newWidth;
+      eaEl.height = newHeight;
+      eaEl.x = centerX - newWidth / 2;
+      eaEl.y = centerY - newHeight / 2;
+      return true;
     }
     return false;
   }

src/ExcalidrawData.ts

@@ -55,6 +55,7 @@ import { updateElementIdsInScene } from "./utils/ExcalidrawSceneUtils";
 import { getNewUniqueFilepath } from "./utils/FileUtils";
 import { t } from "./lang/helpers";
 import { displayFontMessage } from "./utils/ExcalidrawViewUtils";
+import { getPDFRect } from "./utils/PDFUtils";
 
 type SceneDataWithFiles = SceneData & { files: BinaryFiles };
 
@@ -754,7 +755,7 @@ export class ExcalidrawData {
       notice.noticeEl.oncontextmenu = () => {
         displayFontMessage(this.app);
       }
-    },2000);
+    },5000);
     await loadSceneFonts(this.scene.elements);
     clearTimeout(timer);
 
@@ -1579,6 +1580,25 @@ export class ExcalidrawData {
     return file;
   }
 
+  private syncCroppedPDFs() {
+    let dirty = false;
+    const scene = this.scene as SceneDataWithFiles;
+    const pdfScale = this.plugin.settings.pdfScale;
+    scene.elements
+    .filter(el=>el.type === "image" && el.crop && !el.isDeleted)
+    .forEach((el: Mutable<ExcalidrawImageElement>)=>{
+      const ef = this.getFile(el.fileId);
+      if(ef.file.extension !== "pdf") return;
+      const pageRef = ef.linkParts.original.split("#")?.[1];
+      if(!pageRef || !pageRef.startsWith("page=") || pageRef.includes("rect")) return;
+      const restOfLink = el.link ? el.link.match(/&rect=\d*,\d*,\d*,\d*(.*)/)?.[1] : "";
+      const link = ef.linkParts.original + getPDFRect(el.crop, pdfScale) + (restOfLink ? restOfLink : "]]");
+      el.link = `[[${link}`;
+      this.elementLinks.set(el.id, el.link);
+      dirty = true;
+    });
+  }
+
   /**
    * deletes fileIds from Excalidraw data for files no longer in the scene
    * @returns
@@ -1699,6 +1719,7 @@ export class ExcalidrawData {
     this.updateElementLinksFromScene();
     result =
       result ||
+      this.syncCroppedPDFs() ||
       this.setLinkPrefix() ||
       this.setUrlPrefix() ||
       this.setShowLinkBrackets() ||

src/ExcalidrawLib.d.ts

@@ -189,6 +189,5 @@ declare namespace ExcalidrawLib {
   ): string;
   function safelyParseJSON (json: string): Record<string, any> | null;
   function loadSceneFonts(elements: NonDeletedExcalidrawElement[]): Promise<void>;
-  function initializeObsidianUtils(obsidianPlugin: ExcalidrawPlugin): void;
 }
 

src/ExcalidrawView.ts

@@ -148,6 +148,7 @@ import { Packages } from "./types/types";
 import React from "react";
 import { diagramToHTML } from "./utils/matic";
 import { IS_WORKER_SUPPORTED } from "./workers/compression-worker";
+import { getPDFCropRect } from "./utils/PDFUtils";
 
 const EMBEDDABLE_SEMAPHORE_TIMEOUT = 2000;
 const PREVENT_RELOAD_TIMEOUT = 2000;
@@ -218,6 +219,27 @@ export const addFiles = async (
   if (isDark === undefined) {
     isDark = s.scene.appState.theme;
   }
+  // update element.crop naturalWidth and naturalHeight in case scale of PDF loading has changed
+  // update crop.x crop.y, crop.width, crop.height according to the new scale
+  files
+    .filter((f:FileData) => view.excalidrawData.getFile(f.id)?.file?.extension === "pdf")
+    .forEach((f:FileData) => {
+      s.scene.elements
+        .filter((el:ExcalidrawElement)=>el.type === "image" && el.fileId === f.id && el.crop && el.crop.naturalWidth !== f.size.width)
+        .forEach((el:Mutable<ExcalidrawImageElement>) => {
+          s.dirty = true;
+          const scale = f.size.width / el.crop.naturalWidth;
+          el.crop = {
+            x: el.crop.x * scale,
+            y: el.crop.y * scale,
+            width: el.crop.width * scale,
+            height: el.crop.height * scale,
+            naturalWidth: f.size.width,
+            naturalHeight: f.size.height,
+          };
+        });
+    });
+
   if (s.dirty) {
     //debug({where:"ExcalidrawView.addFiles",file:view.file.name,dataTheme:view.excalidrawData.scene.appState.theme,before:"updateScene",state:scene.appState})
     view.updateScene({
@@ -1575,6 +1597,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       if(!this.plugin) {
         return;
       }
+      await this.plugin.awaitInit();
       //implemented to overcome issue that activeLeafChangeEventHandler is not called when view is initialized from a saved workspace, since Obsidian 1.6.0
       let counter = 0;
       while(counter++<50 && (!Boolean(this?.plugin?.activeLeafChangeEventHandler) || !Boolean(this.canvasNodeFactory))) {
@@ -2245,6 +2268,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     //I am using last loaded file to control when the view reloads.
     //It seems text file view gets the modified file event after sync before the modifyEventHandler in main.ts
     //reload can only be triggered via reload()
+    await this.plugin.awaitInit();
     if(this.lastLoadedFile === this.file) return;
     this.isLoaded = false;
     if(!this.file) return;
@@ -2275,6 +2299,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
       if(!this?.app) {
         return;
       }
+      await this.plugin.awaitInit();
       let counter = 0;
       while ((!this.file || !this.plugin.fourthFontLoaded) && counter++<50) await sleep(50);
       if(!this.file) return;
@@ -3851,12 +3876,14 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
         return;
       }
 
-      //dobule click
-      const now = Date.now();
-      if ((now - this.doubleClickTimestamp) < 600 && (now - this.doubleClickTimestamp) > 40) {
-        this.identifyElementClicked();
+      if(this.plugin.settings.doubleClickLinkOpenViewMode) {
+        //dobule click
+        const now = Date.now();
+        if ((now - this.doubleClickTimestamp) < 600 && (now - this.doubleClickTimestamp) > 40) {
+          this.identifyElementClicked();
+        }
+        this.doubleClickTimestamp = now;
       }
-      this.doubleClickTimestamp = now;
       return;
     }
     if (p.button === "up") {
@@ -3980,6 +4007,11 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onPaste, "ExcalidrawView.onPaste", data, event);
     const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
     const ea = this.getHookServer();
+    if(data?.elements) {
+      data.elements
+        .filter(el=>el.type==="text" && !el.hasOwnProperty("rawText"))
+        .forEach(el=>(el as Mutable<ExcalidrawTextElement>).rawText = (el as ExcalidrawTextElement).originalText);
+    };
     if(data && ea.onPasteHook) {
       const res = ea.onPasteHook({
         ea,
@@ -4026,7 +4058,20 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
           } else {
             if(link.match(/^[^#]*#page=\d*(&\w*=[^&]+){0,}&rect=\d*,\d*,\d*,\d*/g)) {
               const ea = getEA(this) as ExcalidrawAutomate;
-              await ea.addImage(this.currentPosition.x, this.currentPosition.y,link);
+              const imgID = await ea.addImage(this.currentPosition.x, this.currentPosition.y,link.split("&rect=")[0]);
+              const el = ea.getElement(imgID) as Mutable<ExcalidrawImageElement>;
+              const fd = ea.imagesDict[el.fileId] as FileData;
+              el.crop = getPDFCropRect({
+                scale: this.plugin.settings.pdfScale,
+                link,
+                naturalHeight: fd.size.height,
+                naturalWidth: fd.size.width,
+              });
+              if(el.crop) {
+                el.width = el.crop.width/this.plugin.settings.pdfScale;
+                el.height = el.crop.height/this.plugin.settings.pdfScale;
+              }
+              el.link = `[[${link}]]`;
               ea.addElementsToView(false,false).then(()=>ea.destroy());
             } else {
               const modal = new UniversalInsertFileModal(this.plugin, this);
@@ -5873,6 +5918,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     }
   ) {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.instantiateExcalidraw, "ExcalidrawView.instantiateExcalidraw", initdata);
+    await this.plugin.awaitInit();
     while(!this.semaphores.scriptsReady) {
       await sleep(50);
     }

src/MarkdownPostProcessor.ts

@@ -353,7 +353,8 @@ const getIMG = async (
   );
 
   const cacheReady = imageCache.isReady();
-  
+
+  await plugin.awaitInit();
   switch (plugin.settings.previewImageType) {
     case PreviewImageType.PNG: {
       const img = createEl("img");

src/constants/constants.ts

@@ -82,7 +82,7 @@ export const obsidianToExcalidrawMap: { [key: string]: string } = {
 };
 
 
-export const {
+export let {
   sceneCoordsToViewportCoords,
   viewportCoordsToSceneCoords,
   determineFocusDistance,
@@ -104,10 +104,36 @@ export const {
   refreshTextDimensions,
   getCSSFontDefinition,
   loadSceneFonts,
-  initializeObsidianUtils,
 } = excalidrawLib;
 
+export function updateExcalidrawLib() {
+  ({
+    sceneCoordsToViewportCoords,
+    viewportCoordsToSceneCoords,
+    determineFocusDistance,
+    intersectElementWithLine,
+    getCommonBoundingBox,
+    getMaximumGroups,
+    measureText,
+    getLineHeight,
+    wrapText, 
+    getFontString, 
+    getBoundTextMaxWidth, 
+    exportToSvg,
+    exportToBlob,
+    mutateElement,
+    restore,
+    mermaidToExcalidraw,
+    getFontFamilyString,
+    getContainerElement,
+    refreshTextDimensions,
+    getCSSFontDefinition,
+    loadSceneFonts,
+  } = excalidrawLib);
+}
+
 export const FONTS_STYLE_ID = "excalidraw-custom-fonts";
+export const CJK_STYLE_ID = "excalidraw-cjk-fonts";
 
 export function JSON_parse(x: string): any {
   return JSON.parse(x.replaceAll("[", "["));
@@ -196,6 +222,7 @@ export const FRONTMATTER_KEYS:{[key:string]: {name: string, type: string, depric
 
 export const EMBEDDABLE_THEME_FRONTMATTER_VALUES = ["light", "dark", "auto", "dafault"];
 export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
+export const VIEW_TYPE_EXCALIDRAW_LOADING = "excalidraw-loading";
 export const ICON_NAME = "excalidraw-icon";
 export const MAX_COLORS = 5;
 export const COLOR_FREQ = 6;

src/dialogs/ExcalidrawLoading.ts

@@ -0,0 +1,48 @@
+import { App, FileView, WorkspaceLeaf } from "obsidian";
+import { VIEW_TYPE_EXCALIDRAW_LOADING } from "src/constants/constants";
+import ExcalidrawPlugin from "src/main";
+import { setExcalidrawView } from "src/utils/ObsidianUtils";
+
+export function switchToExcalidraw(app: App) {
+  const leaves = app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW_LOADING).filter(l=>l.view instanceof ExcalidrawLoading);
+  leaves.forEach(l=>(l.view as ExcalidrawLoading).switchToeExcalidraw());
+}
+
+export class ExcalidrawLoading extends FileView {
+  constructor(leaf: WorkspaceLeaf, private plugin: ExcalidrawPlugin) {
+    super(leaf);
+    this.displayLoadingText();
+  }
+
+  public onload() {
+    super.onload();
+    this.displayLoadingText();
+  }
+
+  public switchToeExcalidraw() {
+    setExcalidrawView(this.leaf);
+  }
+  
+  getViewType(): string {
+    return VIEW_TYPE_EXCALIDRAW_LOADING;
+  }
+
+  getDisplayText() {
+    return "Loading Excalidraw... " + (this.file?.basename ?? "");
+  }
+
+  private displayLoadingText() {
+    // Create a div element for displaying the text
+    const loadingTextEl = this.contentEl.createEl("div", {
+      text: this.getDisplayText()
+    });
+    
+    // Apply styling to center the text
+    loadingTextEl.style.display = "flex";
+    loadingTextEl.style.alignItems = "center";
+    loadingTextEl.style.justifyContent = "center";
+    loadingTextEl.style.height = "100%";
+    loadingTextEl.style.fontSize = "1.5em"; // Adjust size as needed
+  }
+  
+}

src/dialogs/Messages.ts

@@ -15,7 +15,37 @@ export const RELEASE_NOTES: { [k: string]: string } = {
 
 I develop this plugin as a hobby, spending my free time doing this. If you find it valuable, then please say THANK YOU or...
 
-<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>
+<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.2":`
+## Fixed
+- Image scaling issue with SVGs that miss the width and height property. [#8729](https://github.com/excalidraw/excalidraw/issues/8729)
+`,
+"2.6.1":`
+## New
+- Pen-mode single-finger panning enabled also for the "Selection" tool.
+- You can disable pen-mode single-finger panning in Plugin Settings under Excalidraw Appearance and Behavior [#2080](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2080)
+
+## Fixed
+- Text tool did not work in pen-mode using finger [#2080](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2080)
+- Pasting images to Excalidraw from the web resulted in filenames of "image_1.png", "image_2.png" instead of "Pasted Image TIMESTAMP" [#2081](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2081)
+`,
+"2.6.0":`
+## Performance
+- Much faster plugin initialization. Down from 1000-3000ms to 100-300ms. According to my testing speed varies on a wide spectrum depending on device, size of Vault and other plugins being loaded. I measured values ranging from 84ms up to 782ms [#2068](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2068)
+- Faster loading of scenes with many embedded illustrations or PDF pages.
+- SVG export results in even smaller files by further optimizing which characters are included in the embedded fonts. [#8641](https://github.com/excalidraw/excalidraw/pull/8641)
+
+## New
+- Image cropping tool. Double click the image to crop it. [#8613](https://github.com/excalidraw/excalidraw/pull/8613)
+- Single finger panning in pen mode.
+- Native handwritten CJK Font support [8530](https://github.com/excalidraw/excalidraw/pull/8530) 
+  - Created a new **Fonts** section in settings. This includes configuration of the "Local Font" and downloading of the CJK fonts in case you need them offline.
+- Option under **Appearance and Behavior / Link Click** to disable double-click link navigation in view mode. [#2075](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2075)
+- New RU translation 🙏[@tovBender](https://github.com/tovBender)
+
+## Updated
+- CN translation 🙏[@dmscode](https://github.com/dmscode)
 `,
 "2.5.2": `
 ## Fixed

src/dialogs/Prompt.ts

@@ -713,27 +713,70 @@ export class ConfirmationPrompt extends Modal {
   }
 }
 
-export async function linkPrompt (
-  linkText:string,
+export async function linkPrompt(
+  linkText: string,
   app: App,
   view?: ExcalidrawView,
-  message: string = "Select link to open",
-):Promise<[file:TFile, linkText:string, subpath: string]> {
-  const linksArray = REGEX_LINK.getResList(linkText);
-  const tagsArray = REGEX_TAGS.getResList(linkText.replaceAll(/([^\s])#/g,"$1 "));
+  message: string = t("SELECT_LINK_TO_OPEN"),
+): Promise<[file: TFile, linkText: string, subpath: string]> {
+  const linksArray = REGEX_LINK.getResList(linkText).filter(x => Boolean(x.value));
+  const links = linksArray.map(x => REGEX_LINK.getLink(x));
+
+  // Create a map to track duplicates by base link (without rect reference)
+  const linkMap = new Map<string, number[]>();
+  links.forEach((link, i) => {
+    const linkBase = link.split("&rect=")[0];
+    if (!linkMap.has(linkBase)) linkMap.set(linkBase, []);
+    linkMap.get(linkBase).push(i);
+  });
+
+  // Determine indices to keep
+  const indicesToKeep = new Set<number>();
+  linkMap.forEach(indices => {
+    if (indices.length === 1) {
+      // Only one link, keep it
+      indicesToKeep.add(indices[0]);
+    } else {
+      // Multiple links: prefer the one with rect reference, if available
+      const rectIndex = indices.find(i => links[i].includes("&rect="));
+      if (rectIndex !== undefined) {
+        indicesToKeep.add(rectIndex);
+      } else {
+        // No rect reference in duplicates, add the first one
+        indicesToKeep.add(indices[0]);
+      }
+    }
+  });
+
+  // Final validation to ensure each duplicate group has at least one entry
+  linkMap.forEach(indices => {
+    const hasKeptEntry = indices.some(i => indicesToKeep.has(i));
+    if (!hasKeptEntry) {
+      // Add the first index if none were kept
+      indicesToKeep.add(indices[0]);
+    }
+  });
+
+  // Filter linksArray, links, itemsDisplay, and items based on indicesToKeep
+  const filteredLinksArray = linksArray.filter((_, i) => indicesToKeep.has(i));
+  const tagsArray = REGEX_TAGS.getResList(linkText.replaceAll(/([^\s])#/g, "$1 ")).filter(x => Boolean(x.value));
+
   let subpath: string = null;
   let file: TFile = null;
-  let parts = linksArray[0] ?? tagsArray[0];
+  let parts = filteredLinksArray[0] ?? tagsArray[0];
+
+  // Generate filtered itemsDisplay and items arrays
   const itemsDisplay = [
-    ...linksArray.filter(p=> Boolean(p.value)).map(p => {
+    ...filteredLinksArray.map(p => {
       const alias = REGEX_LINK.getAliasOrLink(p);
       return alias === "100%" ? REGEX_LINK.getLink(p) : alias;
     }),
-    ...tagsArray.filter(x=> Boolean(x.value)).map(x => REGEX_TAGS.getTag(x)),
+    ...tagsArray.map(x => REGEX_TAGS.getTag(x)),
   ];
+
   const items = [
-    ...linksArray.filter(p=>Boolean(p.value)),
-    ...tagsArray.filter(x=> Boolean(x.value)),
+    ...filteredLinksArray,
+    ...tagsArray,
   ];
 
   if (items.length>1) {

src/lang/locale/en.ts

@@ -5,6 +5,7 @@ import {
 import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/constSettingsTags";
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
+const CJK_FONTS = "CJK Fonts";
 // English
 export default {
   // main.ts
@@ -75,6 +76,7 @@ export default {
   IMPORT_SVG_CONTEXTMENU: "Convert SVG to strokes - with limitations",
   INSERT_MD: "Insert markdown file from vault",
   INSERT_PDF: "Insert PDF file from vault",
+  INSERT_LAST_ACTIVE_PDF_PAGE_AS_IMAGE: "Insert last active PDF page as image",
   UNIVERSAL_ADD_FILE: "Insert ANY file",
   INSERT_CARD: "Add back-of-note card",
   CONVERT_CARD_TO_FILE: "Move back-of-note card to File",
@@ -97,6 +99,11 @@ export default {
   RESET_IMG_ASPECT_RATIO: "Reset selected image element aspect ratio",
   TEMPORARY_DISABLE_AUTOSAVE: "Disable autosave until next time Obsidian starts (only set this if you know what you are doing)",
   TEMPORARY_ENABLE_AUTOSAVE: "Enable autosave",
+  FONTS_LOADED: "Excalidraw: CJK Fonts loaded",
+  FONTS_LOAD_ERROR: "Excalidraw: Could not find CJK Fonts in the assets folder\n",
+
+  //Prompt.ts
+  SELECT_LINK_TO_OPEN: "Select a link to open",
 
   //ExcalidrawView.ts
   NO_SEARCH_RESULT: "Didn't find a matching element in the drawing",
@@ -229,15 +236,6 @@ export default {
     "You can access your scripts from Excalidraw via the Obsidian Command Palette. Assign " +
     "hotkeys to your favorite scripts just like to any other Obsidian command. " +
     "The folder may not be the root folder of your Vault. ",
-  ASSETS_FOLDER_NAME: "Local Font Assets Folder (cAsE sENsiTIvE!)",
-  ASSETS_FOLDER_DESC: `Since version 2.5.3, following the implementation of CJK font support, Excalidraw downloads fonts from the internet.
-    If you prefer to keep Excalidraw fully local, allowing it to work without internet access, or if your internet connection is slow
-    and you want to improve performance, you can download the necessary
-    <a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip" target="_blank">font assets from GitHub</a>.
-    After downloading, unzip the contents into a folder within your Vault.<br>
-    You can specify the location of that folder here. For example, you may choose to place it under <code>Excalidraw/FontAssets</code>.<br><br>
-    <strong>Important:</strong> Do not set this to the Vault root! Ensure that no other files are placed in this folder.<br><br>
-    <strong>Note:</strong> If you're using Obsidian Sync and want to synchronize these font files across your devices, ensure that Obsidian Sync is set to synchronize "All other file types".`,  
   AI_HEAD: "AI Settings - Experimental",
   AI_DESC: `In the "AI" settings, you can configure options for using OpenAI's GPT API. ` +
     `While the OpenAI API is in beta, its use is strictly limited — as such we require you use your own API key. ` +
@@ -361,6 +359,7 @@ FILENAME_HEAD: "Filename",
   DEFAULT_PEN_MODE_DESC:
     "Should pen mode be automatically enabled when opening Excalidraw?",
   DISABLE_DOUBLE_TAP_ERASER_NAME: "Enable double-tap eraser in pen mode",
+  DISABLE_SINGLE_FINGER_PANNING_NAME: "Enable single-finger panning in pen mode",
   SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_NAME: "Show (+) crosshair in pen mode",
   SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_DESC:
     "Show crosshair in pen mode when using the freedraw tool. <b><u>Toggle ON:</u></b> SHOW <b><u>Toggle OFF:</u></b> HIDE<br>"+
@@ -440,6 +439,7 @@ FILENAME_HEAD: "Filename",
   LONG_PRESS_DESKTOP_DESC: "Long press delay in milliseconds to open an Excalidraw Drawing embedded in a Markdown file. ",
   LONG_PRESS_MOBILE_NAME: "Long press to open mobile",
   LONG_PRESS_MOBILE_DESC: "Long press delay in milliseconds to open an Excalidraw Drawing embedded in a Markdown file. ",
+  DOUBLE_CLICK_LINK_OPEN_VIEW_MODE: "Allow double-click to open links in view mode",
 
   FOCUS_ON_EXISTING_TAB_NAME: "Focus on Existing Tab",
   FOCUS_ON_EXISTING_TAB_DESC: "When opening a link, Excalidraw will focus on the existing tab if the file is already open. " +
@@ -756,6 +756,8 @@ FILENAME_HEAD: "Filename",
    "Enabling this feature simplifies the use of Excalidraw front matter properties, allowing you to leverage many powerful settings. If you prefer not to load these properties automatically, " +
    "you can disable this feature, but you will need to manually remove any unwanted properties from the suggester. " +
    "Note that turning on this setting requires restarting the plugin as properties are loaded at startup.",  
+  FONTS_HEAD: "Fonts",
+  FONTS_DESC: "Configure local fontfaces and downloaded CJK fonts for Excalidraw.",
   CUSTOM_FONT_HEAD: "Local font",
   ENABLE_FOURTH_FONT_NAME: "Enable local font option",
   ENABLE_FOURTH_FONT_DESC:
@@ -769,6 +771,20 @@ FILENAME_HEAD: "Filename",
     "If no file is selected, Excalidraw will default to the Virgil font. " +
     "For optimal performance, it is recommended to use a .woff2 file, as Excalidraw will encode only the necessary glyphs when exporting images to SVG. " +
     "Other font formats will embed the entire font in the exported file, potentially resulting in significantly larger file sizes.",
+  OFFLINE_CJK_NAME: "Offline CJK font support",
+  OFFLINE_CJK_DESC: 
+    `<strong>Changes you make here will only take effect after restarting Obsidian.</strong><br>
+     Excalidraw.com offers handwritten CJK fonts. By default these fonts are not included in the plugin locally, but are served from the Internet. 
+     If you prefer to keep Excalidraw fully local, allowing it to work without Internet access you can download the necessary <a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip" target="_blank">font files from GitHub</a>.
+     After downloading, unzip the contents into a folder within your Vault.<br>
+     Pre-loading fonts will impact startup performance. For this reason you can select which fonts to load.`,
+  CJK_ASSETS_FOLDER_NAME: "CJK Font Folder (cAsE sENsiTIvE!)",
+  CJK_ASSETS_FOLDER_DESC: `You can set the location of the CJK fonts folder here. For example, you may choose to place it under <code>Excalidraw/CJK Fonts</code>.<br><br>
+    <strong>Important:</strong> Do not set this folder to the Vault root! Do not put other fonts in this folder.<br><br>
+    <strong>Note:</strong> If you're using Obsidian Sync and want to synchronize these font files across your devices, ensure that Obsidian Sync is set to synchronize "All other file types".`, 
+  LOAD_CHINESE_FONTS_NAME: "Load Chinese fonts from file at startup",
+  LOAD_JAPANESE_FONTS_NAME: "Load Japanese fonts from file at startup",
+  LOAD_KOREAN_FONTS_NAME: "Load Korean fonts frome file at startup",
   SCRIPT_SETTINGS_HEAD: "Settings for installed Scripts",
   SCRIPT_SETTINGS_DESC: "Some of the Excalidraw Automate Scripts include settings. Settings are organized by script. Settings will only become visible in this list after you have executed the newly downloaded script once.",
   TASKBONE_HEAD: "Taskbone Optical Character Recogntion",
@@ -831,9 +847,8 @@ FILENAME_HEAD: "Filename",
   FONT_INFO_DETAILED: `
       <p>
         To improve Obsidian's startup time and manage the large <strong>CJK font family</strong>, 
-        I've moved the fonts out of the plugin's <code>main.js</code>. Starting with version 2.5.3, 
-        fonts will be loaded from the internet. This typically shouldn't cause issues as Obsidian caches 
-        these files after first use.
+        I've moved the CJK fonts out of the plugin's <code>main.js</code>. CJK fonts will be loaded from the internet by default.
+        This typically shouldn't cause issues as Obsidian caches these files after first use.
       </p>
       <p>
         If you prefer to keep Obsidian 100% local or experience performance issues, you can download the font assets.
@@ -841,7 +856,7 @@ FILENAME_HEAD: "Filename",
       <h3>Instructions:</h3>
       <ol>
         <li>Download the fonts from <a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip">GitHub</a>.</li>
-        <li>Unzip and copy files into a Vault folder (default: <code>Excalidraw/FontAssets</code>; folder names are cAse-senSITive).</li>
+        <li>Unzip and copy files into a Vault folder (default: <code>Excalidraw/${CJK_FONTS}</code>; folder names are cAse-senSITive).</li>
         <li><mark>DO NOT</mark> set this folder to the Vault root or mix with other local fonts.</li>
       </ol>
       <h3>For Obsidian Sync Users:</h3>

src/lang/locale/zh-cn.ts

@@ -5,6 +5,7 @@ import {
 import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/constSettingsTags";
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
+const CJK_FONTS = "CJK Fonts";
 // 简体中文
 export default {
   // main.ts
@@ -75,6 +76,7 @@ export default {
   IMPORT_SVG_CONTEXTMENU: "转换 SVG 到线条 - 有限制",
   INSERT_MD: "插入 Markdown 文档（以图像形式嵌入）到当前绘图中",
   INSERT_PDF: "插入 PDF 文档（以图像形式嵌入）到当前绘图中",
+  INSERT_LAST_ACTIVE_PDF_PAGE_AS_IMAGE: "将最后激活的 PDF 页面插入为图片",
   UNIVERSAL_ADD_FILE: "插入任意文件（以交互形式嵌入，或者以图像形式嵌入）到当前绘图中",
   INSERT_CARD: "插入“背景笔记”卡片",
   CONVERT_CARD_TO_FILE: "将“背景笔记”卡片保存到文件",
@@ -97,6 +99,11 @@ export default {
   RESET_IMG_ASPECT_RATIO: "重置所选图像元素的纵横比",
   TEMPORARY_DISABLE_AUTOSAVE: "临时禁用自动保存功能，直到本次 Obsidian 退出（小白慎用！）",
   TEMPORARY_ENABLE_AUTOSAVE: "启用自动保存功能",
+  FONTS_LOADED : "Excalidraw: CJK 字体已加载" ,
+  FONTS_LOAD_ERROR : "Excalidraw: 在资源文件夹下找不到 CJK 字体\n" ,
+
+  //Prompt.ts
+  SELECT_LINK_TO_OPEN: "选择要打开的链接",
 
   //ExcalidrawView.ts
   NO_SEARCH_RESULT: "在绘图中未找到匹配的元素",
@@ -229,14 +236,6 @@ export default {
     "您可以在 Obsidian 命令面板中执行这些脚本，" +
     "还可以为喜欢的脚本分配快捷键，就像为其他 Obsidian 命令分配快捷键一样。<br>" +
     "该项不能设为库的根目录。",
-  ASSETS_FOLDER_NAME: "本地字体资源文件夹（區分大小寫！）",
-  ASSETS_FOLDER_DESC: `自 2.5.3 版本以来，随着 CJK 字体支持的实现，Excalidraw 将从互联网下载字体。
-如果您希望 Excalidraw 完全离线工作，避免依赖互联网，或者您的网络连接较慢，希望提高性能，您可以从 
-<a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip" target="_blank">GitHub 下载所需的字体资资源</a>。
-下载后，将内容解压到您的 Vault 中的一个文件夹内。<br>
-您可以在此处指定该文件夹的位置。例如，您可以选择将其放置在 <code>Excalidraw/FontAssets</code> 下。<br><br>
-<strong>重要：</strong> 请勿将其设置为 Vault 根目录！确保该文件夹中不放置其他文件。<br><br>
-<strong>注意：</strong> 如果您使用 Obsidian Sync 并希望在设备间同步这些字体文件，请确保 Obsidian Sync 设置为同步“所有其他文件类型”。`,
   AI_HEAD: "AI（实验性）",
   AI_DESC: `OpenAI GPT API 的设置。 ` +
     `目前 OpenAI API 还处于测试中，您需要在自己的。` +
@@ -360,6 +359,7 @@ FILENAME_HEAD: "文件名",
   DEFAULT_PEN_MODE_DESC:
     "打开绘图时，是否自动开启触控笔模式？",
   DISABLE_DOUBLE_TAP_ERASER_NAME: "启用手写模式下的双击橡皮擦功能",
+  DISABLE_SINGLE_FINGER_PANNING_NAME: "启用手写模式下的单指平移功能",
   SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_NAME: "在触控笔模式下显示十字准星（+）",
   SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_DESC:
     "在触控笔模式下使用涂鸦功能会显示十字准星 <b><u>打开:</u></b> 显示 <b><u>关闭:</u></b> 隐藏<br>"+
@@ -439,6 +439,7 @@ FILENAME_HEAD: "文件名",
   LONG_PRESS_DESKTOP_DESC: "长按(以毫秒为单位)打开在 Markdown 文件中嵌入的 Excalidraw 绘图。",
   LONG_PRESS_MOBILE_NAME: "长按打开（移动端）",
   LONG_PRESS_MOBILE_DESC: "长按(以毫秒为单位)打开在 Markdown 文件中嵌入的 Excalidraw 绘图。",
+  DOUBLE_CLICK_LINK_OPEN_VIEW_MODE: "在查看模式下允许双击打开链接",
 
   FOCUS_ON_EXISTING_TAB_NAME: "聚焦于当前标签页",
   FOCUS_ON_EXISTING_TAB_DESC: "当打开一个链接时，如果该文件已经打开，Excalidraw 将会聚焦到现有的标签页上 " +
@@ -755,6 +756,8 @@ FILENAME_HEAD: "文件名",
    "启用此功能简化了 Excalidraw 前置属性的使用，使您能够利用许多强大的设置。如果您不希望自动加载这些属性，" +
    "您可以禁用此功能，但您将需要手动从自动提示中移除任何不需要的属性。" +
    "请注意，启用此设置需要重启插件，因为属性是在启动时加载的。",
+  FONTS_HEAD: "字体",
+  FONTS_DESC: "配置本地字体并下载的 CJK 字体以供 Excalidraw 使用。",
   CUSTOM_FONT_HEAD: "本地字体",
   ENABLE_FOURTH_FONT_NAME: "为文本元素启用本地字体",
   ENABLE_FOURTH_FONT_DESC:
@@ -768,6 +771,20 @@ FILENAME_HEAD: "文件名",
     "如果没有选择文件，Excalidraw 将默认使用 Virgil 字体。"+
     "为了获得最佳性能，建议使用 .woff2 文件，因为当导出到 SVG 格式的图像时，Excalidraw 只会编码必要的字形。"+
     "其他字体格式将在导出文件中嵌入整个字体，可能会导致文件大小显著增加。<mark>译者注：</mark>您可以在<a href='https://wangchujiang.com/free-font/' target='_blank'>Free Font</a>获取免费商用中文手写字体。",
+  OFFLINE_CJK_NAME: "离线 CJK 字体支持",
+  OFFLINE_CJK_DESC:
+    `<strong>您在这里所做的更改将在重启 Obsidian 后生效。</strong><br>
+    Excalidraw.com 提供手写风格的 CJK 字体。默认情况下，这些字体并未在插件中本地包含，而是从互联网获取。
+    如果您希望 Excalidraw 完全本地化，以便在没有互联网连接的情况下使用，可以从 <a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip" target="_blank">GitHub 下载所需的字体文件</a>。
+    下载后，将内容解压到您的 Vault 中的一个文件夹内。<br>
+    预加载字体会影响启动性能。因此，您可以选择加载哪些字体。`,
+  CJK_ASSETS_FOLDER_NAME: "CJK 字体文件夹（區分大小寫！）",
+  CJK_ASSETS_FOLDER_DESC: `您可以在此设置 CJK 字体文件夹的位置。例如，您可以选择将其放置在 <code>Excalidraw/CJK Fonts</code> 下。<br><br>
+    <strong>重要：</strong> 请勿将此文件夹设置为 Vault 根目录！请勿在此文件夹中放置其他字体。<br><br>
+    <strong>注意：</strong> 如果您使用 Obsidian Sync 并希望在设备之间同步这些字体文件，请确保 Obsidian Sync 设置为同步“所有其他文件类型”。`, 
+  LOAD_CHINESE_FONTS_NAME: "启动时从文件加载中文字体",
+  LOAD_JAPANESE_FONTS_NAME: "启动时从文件加载日文字体",
+  LOAD_KOREAN_FONTS_NAME: "启动时从文件加载韩文字体",
   SCRIPT_SETTINGS_HEAD: "已安装脚本的设置",
   SCRIPT_SETTINGS_DESC: "有些 Excalidraw 自动化脚本包含设置项，当执行这些脚本时，它们会在该列表下添加设置项。",
   TASKBONE_HEAD: "Taskbone OCR（光学符号识别）",
@@ -824,16 +841,14 @@ FILENAME_HEAD: "文件名",
 
   //ExcalidrawData.ts
   LOAD_FROM_BACKUP: "Excalidraw 文件已损坏。尝试从备份文件中加载。",
-
   FONT_LOAD_SLOW: "正在加载字体...\n\n 这比预期花费的时间更长。如果这种延迟经常发生，您可以将字体下载到您的 Vault 中。\n\n" +
     "(点击=忽略提示，右键=更多信息)",
   FONT_INFO_TITLE: "从互联网加载 v2.5.3 字体",
   FONT_INFO_DETAILED: `
       <p>
         为了提高 Obsidian 的启动时间并管理大型 <strong>CJK 字体系列</strong>，
-        我已将字体移出插件的 <code>main.js</code>。从 2.5.3 版本开始，
-        字体将从互联网加载。这通常不会导致问题，因为 Obsidian 在首次使用后会缓存
-        这些文件。
+        我已将 CJK 字体移出插件的 <code>main.js</code>。默认情况下，CJK 字体将从互联网加载。
+        这通常不会造成问题，因为 Obsidian 在首次使用后会缓存这些文件。
       </p>
       <p>
         如果您希望 Obsidian 完全离线或遇到性能问题，可以下载字体资源。
@@ -841,7 +856,7 @@ FILENAME_HEAD: "文件名",
       <h3>说明：</h3>
       <ol>
         <li>从 <a href="https://github.com/zsviczian/obsidian-excalidraw-plugin/raw/refs/heads/master/assets/excalidraw-fonts.zip">GitHub</a> 下载字体。</li>
-        <li>解压并将文件复制到 Vault 文件夹中（默认：<code>Excalidraw/FontAssets</code>; 文件夹名称區分大小寫！）。</li>
+        <li>解压并将文件复制到 Vault 文件夹中（默认：<code>Excalidraw/${CJK_FONTS}</code>; 文件夹名称區分大小寫！）。</li>
         <li><mark>请勿</mark>将此文件夹设置为 Vault 根目录或与其他本地字体混合。</li>
       </ol>
       <h3>对于 Obsidian Sync 用户：</h3>

src/main.ts

@@ -45,7 +45,8 @@ import {
   DEVICE,
   sceneCoordsToViewportCoords,
   FONTS_STYLE_ID,
-  initializeObsidianUtils,
+  CJK_STYLE_ID,
+  updateExcalidrawLib,
 } from "./constants/constants";
 import ExcalidrawView, { TextMode, getTextMode } from "./ExcalidrawView";
 import {
@@ -141,8 +142,13 @@ import { Rank, SwordColors } from "./menu/ActionIcons";
 import { RankMessage } from "./dialogs/RankMessage";
 import { initCompressionWorker, terminateCompressionWorker } from "./workers/compression-worker";
 import { WeakArray } from "./utils/WeakArray";
+import { getCJKDataURLs } from "./utils/CJKLoader";
+import { ExcalidrawLoading, switchToExcalidraw } from "./dialogs/ExcalidrawLoading";
+import { insertImageToView } from "./utils/ExcalidrawViewUtils";
 
-declare let EXCALIDRAW_PACKAGES:string;
+declare let EXCALIDRAW_PACKAGE:string;
+declare let REACT_PACKAGES:string;
+declare const unpackExcalidraw: Function;
 declare let react:any;
 declare let reactDOM:any;
 declare let excalidrawLib: typeof ExcalidrawLib;
@@ -194,6 +200,8 @@ export default class ExcalidrawPlugin extends Plugin {
   //private slob:string;
   private ribbonIcon:HTMLElement;
   public loadTimestamp:number;
+  private isLocalCJKFontAvailabe:boolean = undefined
+  public isReady = false;
 
   constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
@@ -205,7 +213,6 @@ export default class ExcalidrawPlugin extends Plugin {
     this.equationsMaster = new Map<FileId, string>();
     this.mermaidsMaster = new Map<FileId, string>();
     setExcalidrawPlugin(this);
-    initializeObsidianUtils(this);
     /*if((process.env.NODE_ENV === 'development')) {
       this.slob = new Array(200 * 1024 * 1024 + 1).join('A'); // Create a 200MB blob
     }*/
@@ -269,7 +276,7 @@ export default class ExcalidrawPlugin extends Plugin {
     //@ts-ignore
     const {react:r, reactDOM:rd, excalidrawLib:e} = win.eval.call(win,
       `(function() {
-        ${EXCALIDRAW_PACKAGES};
+        ${REACT_PACKAGES + EXCALIDRAW_PACKAGE};
         return {react:React,reactDOM:ReactDOM,excalidrawLib:ExcalidrawLib};
        })()`);
     this.packageMap.set(win,{react:r, reactDOM:rd, excalidrawLib:e});
@@ -315,8 +322,27 @@ export default class ExcalidrawPlugin extends Plugin {
     };
   }*/
   
-  public async loadFontFromFile(fontName: string): Promise<ArrayBuffer> {
+  public getCJKFontSettings() {
     const assetsFoler = this.settings.fontAssetsPath;
+    if(typeof this.isLocalCJKFontAvailabe === "undefined") {
+      this.isLocalCJKFontAvailabe = this.app.vault.getFiles().some(f=>f.path.startsWith(assetsFoler));
+    }
+    if(!this.isLocalCJKFontAvailabe) {
+      return { c: false, j: false, k: false };
+    }
+    return {
+      c: this.settings.loadChineseFonts,
+      j: this.settings.loadJapaneseFonts,
+      k: this.settings.loadKoreanFonts,
+    }
+  }
+
+  public async loadFontFromFile(fontName: string): Promise<ArrayBuffer|undefined> {
+    const assetsFoler = this.settings.fontAssetsPath;
+
+    if(!this.isLocalCJKFontAvailabe) {
+      return;
+    }
     const file = this.app.vault.getAbstractFileByPath(normalizePath(assetsFoler + "/" + fontName));
     if(!file || !(file instanceof TFile)) {
       return;
@@ -325,11 +351,18 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   async onload() {
-    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.registerView(
+      VIEW_TYPE_EXCALIDRAW,
+      (leaf: WorkspaceLeaf) => {
+        if(this.isReady) {
+          return new ExcalidrawView(leaf, this);
+        } else {
+          return new ExcalidrawLoading(leaf, this);
+        }
+      },
+    );
+    //Compatibility mode with .excalidraw files
+    this.registerExtensions(["excalidraw"], VIEW_TYPE_EXCALIDRAW);
 
     await this.loadSettings({reEnableAutosave:true});
     const updateSettings = !this.settings.onceOffCompressFlagReset || !this.settings.onceOffGPTVersionReset;
@@ -345,127 +378,153 @@ export default class ExcalidrawPlugin extends Plugin {
     if(updateSettings) {
       await this.saveSettings();
     }
-    this.excalidrawConfig = new ExcalidrawConfig(this);
-    await loadMermaid();
-    this.editorHandler = new EditorHandler(this);
-    this.editorHandler.setup();
-    
     this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
     this.ea = await initExcalidrawAutomate(this);
 
-    this.registerView(
-      VIEW_TYPE_EXCALIDRAW,
-      (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf, this),
-    );
-
-    //Compatibility mode with .excalidraw files
-    this.registerExtensions(["excalidraw"], VIEW_TYPE_EXCALIDRAW);
-
+    //Licat: Are you registering your post processors in onLayoutReady? You should register them in onload instead
     this.addMarkdownPostProcessor();
-    this.registerInstallCodeblockProcessor();
-    this.addThemeObserver();
-    this.experimentalFileTypeDisplayToggle(this.settings.experimentalFileType);
-    this.registerCommands();
-    this.registerEventListeners();
-    this.runStartupScript();
-    this.initializeFonts();
-    this.registerEditorSuggest(new FieldSuggester(this));
-    this.setPropertyTypes();
-
-    //inspiration taken from kanban:
-    //https://github.com/mgmeyers/obsidian-kanban/blob/44118e25661bff9ebfe54f71ae33805dc88ffa53/src/main.ts#L267
-    this.registerMonkeyPatches();
-
-    this.stylesManager = new StylesManager(this);
-
-    //    const patches = new OneOffs(this);
-    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"
-
-      if (isVersionNewerThanOther(PLUGIN_VERSION, this.settings.previousRelease)) {
-        new ReleaseNotes(
-          this.app,
-          this,
-          obsidianJustInstalled ? null : PLUGIN_VERSION,
-        ).open();
-      }
-    }
-
-    this.switchToExcalidarwAfterLoad();
-
-    this.app.workspace.onLayoutReady(() => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onload,"ExcalidrawPlugin.onload > app.workspace.onLayoutReady");
-      this.scriptEngine = new ScriptEngine(this);
-      imageCache.initializeDB(this);
-    });
-    this.taskbone = new Taskbone(this);
-  }
-
-  private setPropertyTypes() {
-    if(!this.settings.loadPropertySuggestions) return;
-    const app = this.app;
-    this.app.workspace.onLayoutReady(() => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setPropertyTypes, `ExcalidrawPlugin.setPropertyTypes > app.workspace.onLayoutReady`);
-      Object.keys(FRONTMATTER_KEYS).forEach((key) => {
-        if(FRONTMATTER_KEYS[key].depricated === true) return;
-        const {name, type} = FRONTMATTER_KEYS[key];
-        app.metadataTypeManager.setType(name,type);
-      });
-    });
-  }
-
-  public initializeFonts() {
+    
     this.app.workspace.onLayoutReady(async () => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.initializeFonts, `ExcalidrawPlugin.initializeFonts > app.workspace.onLayoutReady`);
-  
-      const font = await getFontDataURL(
-        this.app,
-        this.settings.experimantalFourthFont,
-        "",
-        "Local Font",
-      );
-      
-      if(font.dataURL === "") {
-        this.fourthFontLoaded = true;
-        return;
-      }
-      
-      const fourthFontDataURL = font.dataURL;
-  
-      const f = this.app.metadataCache.getFirstLinkpathDest(this.settings.experimantalFourthFont, "");
-      // Call getFontMetrics with the fourthFontDataURL
-      let fontMetrics = f.extension.startsWith("woff") ? undefined : await getFontMetrics(fourthFontDataURL, "Local Font");
-      
-      if (!fontMetrics) {
-        console.log("Font Metrics not found, using default");
-        fontMetrics = {
-          unitsPerEm: 1000,
-          ascender: 750,
-          descender: -250,
-          lineHeight: 1.2,
-          fontName: "Local Font",
+      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.excalidrawConfig = new ExcalidrawConfig(this);
+      await loadMermaid();
+      this.addThemeObserver();
+
+      //inspiration taken from kanban:
+      //https://github.com/mgmeyers/obsidian-kanban/blob/44118e25661bff9ebfe54f71ae33805dc88ffa53/src/main.ts#L267
+      this.registerMonkeyPatches();
+
+      this.stylesManager = new StylesManager(this);
+      this.scriptEngine = new ScriptEngine(this);
+      await this.initializeFonts();
+      imageCache.initializeDB(this);
+
+      this.isReady = true;
+      switchToExcalidraw(this.app);
+      this.switchToExcalidarwAfterLoad();
+
+      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"
+
+        if (isVersionNewerThanOther(PLUGIN_VERSION, this.settings.previousRelease)) {
+          new ReleaseNotes(
+            this.app,
+            this,
+            obsidianJustInstalled ? null : PLUGIN_VERSION,
+          ).open();
         }
       }
-      this.packageMap.forEach(({excalidrawLib}) => {
-        (excalidrawLib as typeof ExcalidrawLib).registerLocalFont({metrics: fontMetrics as any, icon: null}, fourthFontDataURL);
-      });
-      // Add fonts to open Obsidian documents
-      for(const ownerDocument of this.getOpenObsidianDocuments()) {
-        await this.addFonts([
-          `@font-face{font-family:'Local Font';src:url("${fourthFontDataURL}");font-display: swap;font-weight: 400;`,
-        ], ownerDocument);
-      };
-      if(!this.fourthFontLoaded) setTimeout(()=>{this.fourthFontLoaded = true},100);
+
+      //initialization that can happen after Excalidraw views are initialized
+      this.registerEventListeners();
+      this.runStartupScript();
+      this.editorHandler = new EditorHandler(this);
+      this.editorHandler.setup();
+      this.registerInstallCodeblockProcessor();
+      this.experimentalFileTypeDisplayToggle(this.settings.experimentalFileType);
+      this.registerCommands();
+      this.registerEditorSuggest(new FieldSuggester(this));
+      this.setPropertyTypes();
+      this.taskbone = new Taskbone(this);
     });
   }
 
-  public async addFonts(declarations: string[],ownerDocument:Document = document) {
+  public async awaitInit() {
+    let counter = 0;
+    while(!this.isReady && counter < 150) {
+      await sleep(50);
+    }
+  }
+
+  /**
+   * Loads the Excalidraw frontmatter tags to Obsidian property suggester so people can more easily find relevant front matter switches
+   * Must run after the workspace is ready
+   * @returns 
+   */
+  private async setPropertyTypes() {
+    if(!this.settings.loadPropertySuggestions) return;
+    const app = this.app;
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.setPropertyTypes, `ExcalidrawPlugin.setPropertyTypes`);
+    Object.keys(FRONTMATTER_KEYS).forEach((key) => {
+      if(FRONTMATTER_KEYS[key].depricated === true) return;
+      const {name, type} = FRONTMATTER_KEYS[key];
+      app.metadataTypeManager.setType(name,type);
+    });
+  }
+
+  public async initializeFonts() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.initializeFonts, `ExcalidrawPlugin.initializeFonts`);
+    const cjkFontDataURLs = await getCJKDataURLs(this);
+    if(typeof cjkFontDataURLs === "boolean" && !cjkFontDataURLs) {
+      new Notice(t("FONTS_LOAD_ERROR") + this.settings.fontAssetsPath,6000);
+    }
+
+    if(typeof cjkFontDataURLs === "object") {
+      const fontDeclarations = cjkFontDataURLs.map(dataURL => 
+        `@font-face { font-family: 'Xiaolai'; src: url("${dataURL}"); font-display: swap; font-weight: 400; }`
+      );
+      for(const ownerDocument of this.getOpenObsidianDocuments()) {
+        await this.addFonts(fontDeclarations, ownerDocument, CJK_STYLE_ID);
+      };
+      new Notice(t("FONTS_LOADED"));
+    }
+
+    const font = await getFontDataURL(
+      this.app,
+      this.settings.experimantalFourthFont,
+      "",
+      "Local Font",
+    );
+    
+    if(font.dataURL === "") {
+      this.fourthFontLoaded = true;
+      return;
+    }
+    
+    const fourthFontDataURL = font.dataURL;
+
+    const f = this.app.metadataCache.getFirstLinkpathDest(this.settings.experimantalFourthFont, "");
+    // Call getFontMetrics with the fourthFontDataURL
+    let fontMetrics = f.extension.startsWith("woff") ? undefined : await getFontMetrics(fourthFontDataURL, "Local Font");
+    
+    if (!fontMetrics) {
+      console.log("Font Metrics not found, using default");
+      fontMetrics = {
+        unitsPerEm: 1000,
+        ascender: 750,
+        descender: -250,
+        lineHeight: 1.2,
+        fontName: "Local Font",
+      }
+    }
+    this.packageMap.forEach(({excalidrawLib}) => {
+      (excalidrawLib as typeof ExcalidrawLib).registerLocalFont({metrics: fontMetrics as any, icon: null}, fourthFontDataURL);
+    });
+    // Add fonts to open Obsidian documents
+    for(const ownerDocument of this.getOpenObsidianDocuments()) {
+      await this.addFonts([
+        `@font-face{font-family:'Local Font';src:url("${fourthFontDataURL}");font-display: swap;font-weight: 400;`,
+      ], ownerDocument);
+    };
+    if(!this.fourthFontLoaded) setTimeout(()=>{this.fourthFontLoaded = true},100);
+  }
+
+  public async addFonts(declarations: string[],ownerDocument:Document = document, styleId:string = FONTS_STYLE_ID) {
     // replace the old local font <style> element with the one we just created
     const newStylesheet = ownerDocument.createElement("style");
-    newStylesheet.id = FONTS_STYLE_ID;
+    newStylesheet.id = styleId;
     newStylesheet.textContent = declarations.join("");
-    const oldStylesheet = ownerDocument.getElementById(FONTS_STYLE_ID);
+    const oldStylesheet = ownerDocument.getElementById(styleId);
     ownerDocument.head.appendChild(newStylesheet);
     if (oldStylesheet) {
       ownerDocument.head.removeChild(oldStylesheet);
@@ -475,11 +534,15 @@ export default class ExcalidrawPlugin extends Plugin {
 
   public removeFonts() {
     this.getOpenObsidianDocuments().forEach((ownerDocument) => {
-      const oldStylesheet = ownerDocument.getElementById(FONTS_STYLE_ID);
-      if (oldStylesheet) {
-        ownerDocument.head.removeChild(oldStylesheet);
+      const oldCustomFontStylesheet = ownerDocument.getElementById(FONTS_STYLE_ID);
+      if (oldCustomFontStylesheet) {
+        ownerDocument.head.removeChild(oldCustomFontStylesheet);
       }
-    })
+      const oldCJKFontStylesheet = ownerDocument.getElementById(CJK_STYLE_ID);
+      if (oldCJKFontStylesheet) {
+        ownerDocument.head.removeChild(oldCJKFontStylesheet);
+      }
+    });
   }
   
   private getOpenObsidianDocuments(): Document[] {
@@ -494,22 +557,23 @@ export default class ExcalidrawPlugin extends Plugin {
     return Array.from(visitedDocs);
   }
 
+  /**
+   * Must be called after the workspace is ready
+   */
   private switchToExcalidarwAfterLoad() {
-    this.app.workspace.onLayoutReady(() => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.switchToExcalidarwAfterLoad, `ExcalidrawPlugin.switchToExcalidarwAfterLoad > app.workspace.onLayoutReady`);
-      let leaf: WorkspaceLeaf;
-      for (leaf of this.app.workspace.getLeavesOfType("markdown")) {
-        if ( leaf.view instanceof MarkdownView && this.isExcalidrawFile(leaf.view.file)) {
-          if (fileShouldDefaultAsExcalidraw(leaf.view.file?.path, this.app)) {
-            this.excalidrawFileModes[(leaf as any).id || leaf.view.file.path] =
-              VIEW_TYPE_EXCALIDRAW;
-            setExcalidrawView(leaf);
-          } else {
-            foldExcalidrawSection(leaf.view);
-          }
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.switchToExcalidarwAfterLoad, `ExcalidrawPlugin.switchToExcalidarwAfterLoad`);
+    let leaf: WorkspaceLeaf;
+    for (leaf of this.app.workspace.getLeavesOfType("markdown")) {
+      if ( leaf.view instanceof MarkdownView && this.isExcalidrawFile(leaf.view.file)) {
+        if (fileShouldDefaultAsExcalidraw(leaf.view.file?.path, this.app)) {
+          this.excalidrawFileModes[(leaf as any).id || leaf.view.file.path] =
+            VIEW_TYPE_EXCALIDRAW;
+          setExcalidrawView(leaf);
+        } else {
+          foldExcalidrawSection(leaf.view);
         }
       }
-    });
+    }
   }
 
   private forceSaveActiveView(checking:boolean):boolean {
@@ -728,9 +792,9 @@ export default class ExcalidrawPlugin extends Plugin {
     initializeMarkdownPostProcessor(this);
     this.registerMarkdownPostProcessor(markdownPostProcessor);
     
-    this.app.workspace.onLayoutReady(() => {
+    this.app.workspace.onLayoutReady(async () => {
       (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.addMarkdownPostProcessor, `ExcalidrawPlugin.addMarkdownPostProcessor > app.workspace.onLayoutReady`);
-
+      await this.awaitInit();
       // internal-link quick preview
       this.registerEvent(this.app.workspace.on("hover-link", hoverEvent));
 
@@ -807,8 +871,10 @@ export default class ExcalidrawPlugin extends Plugin {
 
   /**
    * Display characters configured in settings, in front of the filename, if the markdown file is an excalidraw drawing
+   * Must be called after the workspace is ready
+   * The function is called from onload()
    */
-  private experimentalFileTypeDisplay() {
+  private async experimentalFileTypeDisplay() {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.experimentalFileTypeDisplay, `ExcalidrawPlugin.experimentalFileTypeDisplay`);
     const insertFiletype = (el: HTMLElement) => {
       if (el.childElementCount !== 1) {
@@ -850,17 +916,15 @@ export default class ExcalidrawPlugin extends Plugin {
       ? new CustomMutationObserver(fileExplorerObserverFn, "fileExplorerObserver")
       : new MutationObserver(fileExplorerObserverFn);
 
-    this.app.workspace.onLayoutReady(() => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.experimentalFileTypeDisplay, `ExcalidrawPlugin.experimentalFileTypeDisplay > app.workspace.onLayoutReady`);
-      document.querySelectorAll(".nav-file-title").forEach(insertFiletype); //apply filetype to files already displayed
-      const container = document.querySelector(".nav-files-container");
-      if (container) {
-        this.fileExplorerObserver.observe(container, {
-          childList: true,
-          subtree: true,
-        });
-      }
-    });
+    //the part that should only run after onLayoutReady
+    document.querySelectorAll(".nav-file-title").forEach(insertFiletype); //apply filetype to files already displayed
+    const container = document.querySelector(".nav-files-container");
+    if (container) {
+      this.fileExplorerObserver.observe(container, {
+        childList: true,
+        subtree: true,
+      });
+    }
   }
 
   private async actionRibbonClick(e: MouseEvent)  {
@@ -1803,9 +1867,13 @@ export default class ExcalidrawPlugin extends Plugin {
           const size = await ea.getOriginalImageSize(el);
           if(size) {
             ea.copyViewElementsToEAforEditing(els);
-            const eaEl = ea.getElement(el.id);
-            //@ts-ignore
-            eaEl.width = size.width; eaEl.height = size.height;
+            const eaEl = ea.getElement(el.id) as Mutable<ExcalidrawImageElement>;
+            if(eaEl.crop) {
+              eaEl.width = eaEl.crop.width;
+              eaEl.height = eaEl.crop.height;
+            } else {
+              eaEl.width = size.width; eaEl.height = size.height;
+            }
             await ea.addElementsToView(false,false,false);
           }
           ea.destroy();
@@ -2375,6 +2443,27 @@ export default class ExcalidrawPlugin extends Plugin {
       },
     });
 
+    this.addCommand({
+      id: "insert-pdf",
+      name: t("INSERT_LAST_ACTIVE_PDF_PAGE_AS_IMAGE"),
+      checkCallback: (checking: boolean) => {
+        const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
+        if(!Boolean(view)) return false;
+        const PDFLink = this.getLastActivePDFPageLink(view.file);
+        if(!PDFLink) return false;
+        if(checking) return true;
+        const ea = getEA(view);
+        insertImageToView(
+          ea,
+          view.currentPosition,
+          PDFLink,
+          undefined,
+          undefined,
+          true,
+        );
+      },
+    });
+
     this.addCommand({
       id: "universal-add-file",
       name: t("UNIVERSAL_ADD_FILE"),
@@ -2716,34 +2805,60 @@ export default class ExcalidrawPlugin extends Plugin {
     );
   }
 
-  private runStartupScript() {
+  /**
+   * Loads the startup script that will add event hooks to ExcalidrawAutomate (if provided by the user)
+   * Because of file operations, this must be run after the Obsidian Layout is ready
+   * @returns 
+   */
+  private async runStartupScript() {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.runStartupScript, `ExcalidrawPlugin.runStartupScript`);
     if(!this.settings.startupScriptPath || this.settings.startupScriptPath === "") {
       return;
     }
-    this.app.workspace.onLayoutReady(async () => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.runStartupScript, `ExcalidrawPlugin.runStartupScript > app.workspace.onLayoutReady, scriptPath:${this.settings?.startupScriptPath}`);
-      const path = this.settings.startupScriptPath.endsWith(".md")
-        ? this.settings.startupScriptPath
-        : `${this.settings.startupScriptPath}.md`;
-      const f = this.app.vault.getAbstractFileByPath(path);
-      if (!f || !(f instanceof TFile)) {
-        new Notice(`Startup script not found: ${path}`);
-        return;
-      }
-      const script = await this.app.vault.read(f);
-      const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
-      try {
-       await new AsyncFunction("ea", script)(this.ea);
-      } catch (e) {
-        new Notice(`Error running startup script: ${e}`);
-      }
-    });
+    const path = this.settings.startupScriptPath.endsWith(".md")
+      ? this.settings.startupScriptPath
+      : `${this.settings.startupScriptPath}.md`;
+    const f = this.app.vault.getAbstractFileByPath(path);
+    if (!f || !(f instanceof TFile)) {
+      new Notice(`Startup script not found: ${path}`);
+      return;
+    }
+    const script = await this.app.vault.read(f);
+    const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
+    try {
+      await new AsyncFunction("ea", script)(this.ea);
+    } catch (e) {
+      new Notice(`Error running startup script: ${e}`);
+    }
+  }
+
+  private lastPDFLeafID: string = null;
+
+  public getLastActivePDFPageLink(requestorFile: TFile): string {
+    if(!this.lastPDFLeafID) return;
+    const leaf = this.app.workspace.getLeafById(this.lastPDFLeafID);
+    //@ts-ignore
+    if(!leaf || !leaf.view || leaf.view.getViewType() !== "pdf") return;
+    const view:any = leaf.view;
+    const file = view.file;
+    const page = view.viewer.child.pdfViewer.page;
+    if(!file || !page) return;
+    return this.app.metadataCache.fileToLinktext(
+      file,
+      requestorFile?.path,
+      false,
+    ) + `#page=${page}`;
   }
 
   public async activeLeafChangeEventHandler (leaf: WorkspaceLeaf) {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.activeLeafChangeEventHandler,`ExcalidrawPlugin.activeLeafChangeEventHandler`, leaf);
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/723
+
+    if (leaf.view && leaf.view.getViewType() === "pdf") {
+      //@ts-ignore
+      this.lastPDFLeafID = leaf.id;
+    }
+
     if(this.leafChangeTimeout) {
       window.clearTimeout(this.leafChangeTimeout);
     }
@@ -2880,203 +2995,209 @@ export default class ExcalidrawPlugin extends Plugin {
   }
 
   private popScope: Function = null;
-  private registerEventListeners() {
-    this.app.workspace.onLayoutReady(async () => {
-      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.registerEventListeners,`ExcalidrawPlugin.registerEventListeners > app.workspace.onLayoutReady`);
-      const onPasteHandler = (
-        evt: ClipboardEvent,
-        editor: Editor,
-        info: MarkdownView | MarkdownFileInfo
-      ) => {
-        if(evt.defaultPrevented) return
-        const data = evt.clipboardData.getData("text/plain");
-        if (!data) return;
-        if (data.startsWith(`{"type":"excalidraw/clipboard"`)) {
-          evt.preventDefault();
-          try {
-            const drawing = JSON.parse(data);
-            const hasOneTextElement = drawing.elements.filter((el:ExcalidrawElement)=>el.type==="text").length === 1;
-            if (!(hasOneTextElement || drawing.elements?.length === 1)) {
-              return;
-            }
-            const element = hasOneTextElement
-              ? drawing.elements.filter((el:ExcalidrawElement)=>el.type==="text")[0]
-              : drawing.elements[0];
-            if (element.type === "image") {
-              const fileinfo = this.filesMaster.get(element.fileId);
-              if(fileinfo && fileinfo.path) {
-                let path = fileinfo.path;
-                const sourceFile = info.file;
-                const imageFile = this.app.vault.getAbstractFileByPath(path);
-                if(sourceFile && imageFile && imageFile instanceof TFile) {
-                  path = this.app.metadataCache.fileToLinktext(imageFile,sourceFile.path);
-                }
-                editorInsertText(editor, getLink(this, {path}));
-              }
-              return;
-            }
-            if (element.type === "text") {
-              editorInsertText(editor, element.rawText);
-              return;
-            }
-            if (element.link) {
-              editorInsertText(editor, `${element.link}`);
-              return;
-            }
-          } catch (e) {
-          }
-        }
-      };
-      this.registerEvent(this.app.workspace.on("editor-paste", (evt, editor,info) => onPasteHandler(evt, editor, info)));
 
-      //watch filename change to rename .svg, .png; to sync to .md; to update links
-      const renameEventHandler = async (
-        file: TAbstractFile,
-        oldPath: string,
-      ) => {
-        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(renameEventHandler,`ExcalidrawPlugin.renameEventHandler`, file, oldPath);
-        if (!(file instanceof TFile)) {
-          return;
-        }
-        if (!this.isExcalidrawFile(file)) {
-          return;
-        }
-        if (!this.settings.keepInSync) {
-          return;
-        }
-        [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
-          const oldIMGpath = getIMGFilename(oldPath, ext);
-          const imgFile = app.vault.getAbstractFileByPath(
-            normalizePath(oldIMGpath),
-          );
-          if (imgFile && imgFile instanceof TFile) {
-            const newIMGpath = getIMGFilename(file.path, ext);
-            await this.app.fileManager.renameFile(imgFile, newIMGpath);
-          }
-        });
-      };
-      this.registerEvent(this.app.vault.on("rename", (file,oldPath) => renameEventHandler(file,oldPath)));
 
-      const modifyEventHandler = async (file: TFile) => {
-        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(modifyEventHandler,`ExcalidrawPlugin.modifyEventHandler`, file);
-        const excalidrawViews = getExcalidrawViews(this.app);
-        excalidrawViews.forEach(async (excalidrawView) => {
-          if(excalidrawView.semaphores?.viewunload) {
+  /**
+   * Registers event listeners for the plugin
+   * Must be called after the workspace is read (onLayoutReady) 
+   * Intended to be called from onLayoutReady in onload()
+   */
+  private async registerEventListeners() {
+    (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.registerEventListeners,`ExcalidrawPlugin.registerEventListeners`);
+    await this.awaitInit();
+    const onPasteHandler = (
+      evt: ClipboardEvent,
+      editor: Editor,
+      info: MarkdownView | MarkdownFileInfo
+    ) => {
+      if(evt.defaultPrevented) return
+      const data = evt.clipboardData.getData("text/plain");
+      if (!data) return;
+      if (data.startsWith(`{"type":"excalidraw/clipboard"`)) {
+        evt.preventDefault();
+        try {
+          const drawing = JSON.parse(data);
+          const hasOneTextElement = drawing.elements.filter((el:ExcalidrawElement)=>el.type==="text").length === 1;
+          if (!(hasOneTextElement || drawing.elements?.length === 1)) {
             return;
           }
-          if (
-            excalidrawView.file &&
-            (excalidrawView.file.path === file.path ||
-              (file.extension === "excalidraw" &&
-                `${file.path.substring(
-                  0,
-                  file.path.lastIndexOf(".excalidraw"),
-                )}.md` === excalidrawView.file.path))
-          ) {
-            if(excalidrawView.semaphores?.preventReload) {
-              excalidrawView.semaphores.preventReload = false;
-              return;
-            }
-            //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()) {
-              excalidrawView.reload(true, excalidrawView.file);
-              return;
-            }           
-            if(file.extension==="md") {
-              if(excalidrawView.semaphores?.embeddableIsEditingSelf) return;
-              const inData = new ExcalidrawData(this);
-              const data = await this.app.vault.read(file);
-              await inData.loadData(data,file,getTextMode(data));
-              excalidrawView.synchronizeWithData(inData);
-              inData.destroy();
-              if(excalidrawView?.isDirty()) {
-                if(excalidrawView.autosaveTimer && excalidrawView.autosaveFunction) {
-                  clearTimeout(excalidrawView.autosaveTimer);
-                }
-                if(excalidrawView.autosaveFunction) {
-                  excalidrawView.autosaveFunction();
-                }
+          const element = hasOneTextElement
+            ? drawing.elements.filter((el:ExcalidrawElement)=>el.type==="text")[0]
+            : drawing.elements[0];
+          if (element.type === "image") {
+            const fileinfo = this.filesMaster.get(element.fileId);
+            if(fileinfo && fileinfo.path) {
+              let path = fileinfo.path;
+              const sourceFile = info.file;
+              const imageFile = this.app.vault.getAbstractFileByPath(path);
+              if(sourceFile && imageFile && imageFile instanceof TFile) {
+                path = this.app.metadataCache.fileToLinktext(imageFile,sourceFile.path);
               }
-            } else {
-              excalidrawView.reload(true, excalidrawView.file);
+              editorInsertText(editor, getLink(this, {path}));
             }
+            return;
           }
-        });
-      };
-      this.registerEvent(this.app.vault.on("modify", (file:TFile) => modifyEventHandler(file)));
-
-      //watch file delete and delete corresponding .svg and .png
-      const deleteEventHandler = async (file: TFile) => {
-        (process.env.NODE_ENV === 'development') && DEBUGGING && debug(deleteEventHandler,`ExcalidrawPlugin.deleteEventHandler`, file);
-        if (!(file instanceof TFile)) {
-          return;
-        }
-
-        const isExcalidarwFile = this.excalidrawFiles.has(file);
-        this.updateFileCache(file, undefined, true);
-        if (!isExcalidarwFile) {
-          return;
-        }
-
-        //close excalidraw view where this file is open
-        const excalidrawViews = getExcalidrawViews(this.app);
-        for (const excalidrawView of excalidrawViews) {
-          if (excalidrawView.file.path === file.path) {
-            await excalidrawView.leaf.setViewState({
-              type: VIEW_TYPE_EXCALIDRAW,
-              state: { file: null },
-            });
+          if (element.type === "text") {
+            editorInsertText(editor, element.rawText);
+            return;
           }
+          if (element.link) {
+            editorInsertText(editor, `${element.link}`);
+            return;
+          }
+        } catch (e) {
         }
+      }
+    };
+    this.registerEvent(this.app.workspace.on("editor-paste", (evt, editor,info) => onPasteHandler(evt, editor, info)));
 
-        //delete PNG and SVG files as well
-        if (this.settings.keepInSync) {
-          window.setTimeout(() => {
-            [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
-              const imgPath = getIMGFilename(file.path, ext);
-              const imgFile = this.app.vault.getAbstractFileByPath(
-                normalizePath(imgPath),
-              );
-              if (imgFile && imgFile instanceof TFile) {
-                await this.app.vault.delete(imgFile);
-              }
-            });
-          }, 500);
-        }
-      };
-      this.registerEvent(this.app.vault.on("delete", (file:TFile) => deleteEventHandler(file)));
-
-      //save Excalidraw leaf and update embeds when switching to another leaf
-      this.registerEvent(
-        this.app.workspace.on(
-          "active-leaf-change",
-          (leaf: WorkspaceLeaf) => this.activeLeafChangeEventHandler(leaf),
-        ),
-      );
-
-      this.addFileSaveTriggerEventHandlers();
-
-      const metaCache: MetadataCache = this.app.metadataCache;
-      //@ts-ignore
-      metaCache.getCachedFiles().forEach((filename: string) => {
-        const fm = metaCache.getCache(filename)?.frontmatter;
-        if (
-          (fm && typeof fm[FRONTMATTER_KEYS["plugin"].name] !== "undefined") ||
-          filename.match(/\.excalidraw$/)
-        ) {
-          this.updateFileCache(
-            this.app.vault.getAbstractFileByPath(filename) as TFile,
-            fm,
-          );
+    //watch filename change to rename .svg, .png; to sync to .md; to update links
+    const renameEventHandler = async (
+      file: TAbstractFile,
+      oldPath: string,
+    ) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(renameEventHandler,`ExcalidrawPlugin.renameEventHandler`, file, oldPath);
+      if (!(file instanceof TFile)) {
+        return;
+      }
+      if (!this.isExcalidrawFile(file)) {
+        return;
+      }
+      if (!this.settings.keepInSync) {
+        return;
+      }
+      [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
+        const oldIMGpath = getIMGFilename(oldPath, ext);
+        const imgFile = app.vault.getAbstractFileByPath(
+          normalizePath(oldIMGpath),
+        );
+        if (imgFile && imgFile instanceof TFile) {
+          const newIMGpath = getIMGFilename(file.path, ext);
+          await this.app.fileManager.renameFile(imgFile, newIMGpath);
         }
       });
-      this.registerEvent(
-        metaCache.on("changed", (file, _, cache) =>
-          this.updateFileCache(file, cache?.frontmatter),
-        ),
-      );
+    };
+    this.registerEvent(this.app.vault.on("rename", (file,oldPath) => renameEventHandler(file,oldPath)));
+
+    const modifyEventHandler = async (file: TFile) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(modifyEventHandler,`ExcalidrawPlugin.modifyEventHandler`, file);
+      const excalidrawViews = getExcalidrawViews(this.app);
+      excalidrawViews.forEach(async (excalidrawView) => {
+        if(excalidrawView.semaphores?.viewunload) {
+          return;
+        }
+        if (
+          excalidrawView.file &&
+          (excalidrawView.file.path === file.path ||
+            (file.extension === "excalidraw" &&
+              `${file.path.substring(
+                0,
+                file.path.lastIndexOf(".excalidraw"),
+              )}.md` === excalidrawView.file.path))
+        ) {
+          if(excalidrawView.semaphores?.preventReload) {
+            excalidrawView.semaphores.preventReload = false;
+            return;
+          }
+          //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()) {
+            excalidrawView.reload(true, excalidrawView.file);
+            return;
+          }           
+          if(file.extension==="md") {
+            if(excalidrawView.semaphores?.embeddableIsEditingSelf) return;
+            const inData = new ExcalidrawData(this);
+            const data = await this.app.vault.read(file);
+            await inData.loadData(data,file,getTextMode(data));
+            excalidrawView.synchronizeWithData(inData);
+            inData.destroy();
+            if(excalidrawView?.isDirty()) {
+              if(excalidrawView.autosaveTimer && excalidrawView.autosaveFunction) {
+                clearTimeout(excalidrawView.autosaveTimer);
+              }
+              if(excalidrawView.autosaveFunction) {
+                excalidrawView.autosaveFunction();
+              }
+            }
+          } else {
+            excalidrawView.reload(true, excalidrawView.file);
+          }
+        }
+      });
+    };
+    this.registerEvent(this.app.vault.on("modify", (file:TFile) => modifyEventHandler(file)));
+
+    //watch file delete and delete corresponding .svg and .png
+    const deleteEventHandler = async (file: TFile) => {
+      (process.env.NODE_ENV === 'development') && DEBUGGING && debug(deleteEventHandler,`ExcalidrawPlugin.deleteEventHandler`, file);
+      if (!(file instanceof TFile)) {
+        return;
+      }
+
+      const isExcalidarwFile = this.excalidrawFiles.has(file);
+      this.updateFileCache(file, undefined, true);
+      if (!isExcalidarwFile) {
+        return;
+      }
+
+      //close excalidraw view where this file is open
+      const excalidrawViews = getExcalidrawViews(this.app);
+      for (const excalidrawView of excalidrawViews) {
+        if (excalidrawView.file.path === file.path) {
+          await excalidrawView.leaf.setViewState({
+            type: VIEW_TYPE_EXCALIDRAW,
+            state: { file: null },
+          });
+        }
+      }
+
+      //delete PNG and SVG files as well
+      if (this.settings.keepInSync) {
+        window.setTimeout(() => {
+          [EXPORT_TYPES, "excalidraw"].flat().forEach(async (ext: string) => {
+            const imgPath = getIMGFilename(file.path, ext);
+            const imgFile = this.app.vault.getAbstractFileByPath(
+              normalizePath(imgPath),
+            );
+            if (imgFile && imgFile instanceof TFile) {
+              await this.app.vault.delete(imgFile);
+            }
+          });
+        }, 500);
+      }
+    };
+    this.registerEvent(this.app.vault.on("delete", (file:TFile) => deleteEventHandler(file)));
+
+    //save Excalidraw leaf and update embeds when switching to another leaf
+    this.registerEvent(
+      this.app.workspace.on(
+        "active-leaf-change",
+        (leaf: WorkspaceLeaf) => this.activeLeafChangeEventHandler(leaf),
+      ),
+    );
+
+    this.addFileSaveTriggerEventHandlers();
+
+    const metaCache: MetadataCache = this.app.metadataCache;
+    //@ts-ignore
+    metaCache.getCachedFiles().forEach((filename: string) => {
+      const fm = metaCache.getCache(filename)?.frontmatter;
+      if (
+        (fm && typeof fm[FRONTMATTER_KEYS["plugin"].name] !== "undefined") ||
+        filename.match(/\.excalidraw$/)
+      ) {
+        this.updateFileCache(
+          this.app.vault.getAbstractFileByPath(filename) as TFile,
+          fm,
+        );
+      }
     });
+    this.registerEvent(
+      metaCache.on("changed", (file, _, cache) =>
+        this.updateFileCache(file, cache?.frontmatter),
+      ),
+    );
   }
 
   //Save the drawing if the user clicks outside the canvas
@@ -3331,7 +3452,8 @@ export default class ExcalidrawPlugin extends Plugin {
 
     this.settings = null;
     clearMathJaxVariables();
-    EXCALIDRAW_PACKAGES = "";
+    EXCALIDRAW_PACKAGE = "";
+    REACT_PACKAGES = "";
     //pluginPackages = null;
     PLUGIN_VERSION = null;
     //@ts-ignore

src/settings.ts

@@ -50,6 +50,9 @@ export interface ExcalidrawSettings {
   templateFilePath: string;
   scriptFolderPath: string;
   fontAssetsPath: string;
+  loadChineseFonts: boolean;
+  loadJapaneseFonts: boolean;
+  loadKoreanFonts: boolean;
   compress: boolean;
   decompressForMDView: boolean;
   onceOffCompressFlagReset: boolean; //used to reset compress to true in 2.2.0
@@ -82,6 +85,7 @@ export interface ExcalidrawSettings {
   defaultMode: string;
   defaultPenMode: "never" | "mobile" | "always";
   penModeDoubleTapEraser: boolean;
+  penModeSingleFingerPanning: boolean;
   penModeCrosshairVisible: boolean;
   renderImageInMarkdownReadingMode: boolean,
   renderImageInHoverPreviewForMDNotes: boolean,
@@ -206,6 +210,7 @@ export interface ExcalidrawSettings {
   areaZoomLimit: number;
   longPressDesktop: number;
   longPressMobile: number;
+  doubleClickLinkOpenViewMode: boolean;
   isDebugMode: boolean;
   rank: Rank;
   modifierKeyOverrides: {modifiers: Modifier[], key: string}[];
@@ -221,7 +226,10 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   embedUseExcalidrawFolder: false,
   templateFilePath: "Excalidraw/Template.excalidraw",
   scriptFolderPath: "Excalidraw/Scripts",
-  fontAssetsPath: "Excalidraw/FontAssets",
+  fontAssetsPath: "Excalidraw/CJK Fonts",
+  loadChineseFonts: false,
+  loadJapaneseFonts: false,
+  loadKoreanFonts: false,
   compress: true,
   decompressForMDView: false,
   onceOffCompressFlagReset: false,
@@ -254,6 +262,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   defaultMode: "normal",
   defaultPenMode: "never",
   penModeDoubleTapEraser: true,
+  penModeSingleFingerPanning: true,
   penModeCrosshairVisible: true,
   renderImageInMarkdownReadingMode: false,
   renderImageInHoverPreviewForMDNotes: false,
@@ -474,6 +483,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   areaZoomLimit: 1,
   longPressDesktop: 500,
   longPressMobile: 500,
+  doubleClickLinkOpenViewMode: true,
   isDebugMode: false,
   rank: "Bronze",
   modifierKeyOverrides: [
@@ -722,19 +732,6 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
-    new Setting(detailsEl)
-      .setName(t("ASSETS_FOLDER_NAME"))
-      .setDesc(fragWithHTML(t("ASSETS_FOLDER_DESC")))
-      .addText((text) =>
-        text
-          .setPlaceholder("e.g.: Excalidraw/FontAssets")
-          .setValue(this.plugin.settings.fontAssetsPath)
-          .onChange(async (value) => {
-            this.plugin.settings.fontAssetsPath = value;
-            this.applySettingsUpdate();
-          }),
-      );
-
     // ------------------------------------------------
     // Saving
     // ------------------------------------------------  
@@ -1071,6 +1068,17 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.applySettingsUpdate();
           }),
       );
+    
+    new Setting(detailsEl)
+      .setName(t("DISABLE_SINGLE_FINGER_PANNING_NAME"))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.penModeSingleFingerPanning)
+          .onChange(async (value) => {
+            this.plugin.settings.penModeSingleFingerPanning = value;
+            this.applySettingsUpdate();
+          }),
+      );
 
     new Setting(detailsEl)
       .setName(t("SHOW_PEN_MODE_FREEDRAW_CROSSHAIR_NAME"))
@@ -1500,6 +1508,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         el.innerText = ` ${this.plugin.settings.longPressMobile.toString()}`;
       });
 
+    new Setting(detailsEl)
+      .setName(t("DOUBLE_CLICK_LINK_OPEN_VIEW_MODE"))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.doubleClickLinkOpenViewMode)
+          .onChange(async (value) => {
+            this.plugin.settings.doubleClickLinkOpenViewMode = value;
+            this.applySettingsUpdate();
+          }),
+      );
+
+
     new ModifierKeySettingsComponent(
       detailsEl,
       this.plugin.settings.modifierKeyConfig,
@@ -2470,8 +2490,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
             this.applySettingsUpdate(false);
           })
       )
+
+    // ------------------------------------------------
+    // Fonts supported features
+    // ------------------------------------------------
+    containerEl.createEl("hr", { cls: "excalidraw-setting-hr" });
+    containerEl.createDiv({ text: t("FONTS_DESC"), cls: "setting-item-description"  });
+    detailsEl = this.containerEl.createEl("details");
+    const fontsDetailsEl = detailsEl;
+    detailsEl.createEl("summary", { 
+      text: t("FONTS_HEAD"),
+      cls: "excalidraw-setting-h1",
+    });
     
-    detailsEl = nonstandardDetailsEl.createEl("details");
+    detailsEl = fontsDetailsEl.createEl("details");
     detailsEl.createEl("summary", { 
       text: t("CUSTOM_FONT_HEAD"),
       cls: "excalidraw-setting-h3",
@@ -2512,7 +2544,61 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
         );
       });
 
+      detailsEl = fontsDetailsEl.createEl("details");
+      detailsEl.createEl("summary", { 
+        text: t("OFFLINE_CJK_NAME"),
+        cls: "excalidraw-setting-h3",
+      });
+  
+      const cjkdescdiv = detailsEl.createDiv({ cls: "setting-item-description"  });
+      cjkdescdiv.innerHTML = t("OFFLINE_CJK_DESC");
+
+      new Setting(detailsEl)
+      .setName(t("CJK_ASSETS_FOLDER_NAME"))
+      .setDesc(fragWithHTML(t("CJK_ASSETS_FOLDER_DESC")))
+      .addText((text) =>
+        text
+          .setPlaceholder("e.g.: Excalidraw/FontAssets")
+          .setValue(this.plugin.settings.fontAssetsPath)
+          .onChange(async (value) => {
+            this.plugin.settings.fontAssetsPath = value;
+            this.applySettingsUpdate();
+          }),
+      );
     
+      new Setting(detailsEl)
+        .setName(t("LOAD_CHINESE_FONTS_NAME"))
+        .addToggle((toggle) =>
+          toggle
+            .setValue(this.plugin.settings.loadChineseFonts)
+            .onChange(async (value) => {
+              this.plugin.settings.loadChineseFonts = value;
+              this.applySettingsUpdate();
+            }),
+        );
+
+    new Setting(detailsEl)
+      .setName(t("LOAD_JAPANESE_FONTS_NAME"))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.loadJapaneseFonts)
+          .onChange(async (value) => {
+            this.plugin.settings.loadJapaneseFonts = value;
+            this.applySettingsUpdate();
+          }),
+      );
+
+    new Setting(detailsEl)
+      .setName(t("LOAD_KOREAN_FONTS_NAME"))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.loadKoreanFonts)
+          .onChange(async (value) => {
+            this.plugin.settings.loadKoreanFonts = value;
+            this.applySettingsUpdate();
+          }),
+      );
+
     // ------------------------------------------------
     // Experimental features
     // ------------------------------------------------

src/utils/ExcalidrawViewUtils.ts

@@ -19,6 +19,7 @@ export async function insertImageToView(
   file: TFile | string,
   scale?: boolean,
   shouldInsertToView: boolean = true,
+  repositionToCursor: boolean = false,
 ):Promise<string> {
   if(shouldInsertToView) {ea.clear();}
   ea.style.strokeColor = "transparent";
@@ -31,7 +32,7 @@ export async function insertImageToView(
     file,
     scale,
   );
-  if(shouldInsertToView) {await ea.addElementsToView(false, true, true);}
+  if(shouldInsertToView) {await ea.addElementsToView(repositionToCursor, true, true);}
   return id;
 }
 

src/utils/PDFUtils.ts

@@ -0,0 +1,37 @@
+//for future use, not used currently
+
+import { ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+
+export function getPDFCropRect (props: {
+  scale: number,
+  link: string,
+  naturalHeight: number, 
+  naturalWidth: number,
+}) : ImageCrop | null {
+  const rectVal = props.link.match(/&rect=(\d*),(\d*),(\d*),(\d*)/);
+  if (!rectVal || rectVal.length !== 5) {
+    return null;
+  }
+
+  const R0 = parseInt(rectVal[1]);
+  const R1 = parseInt(rectVal[2]);
+  const R2 = parseInt(rectVal[3]);
+  const R3 = parseInt(rectVal[4]);
+
+  return {
+    x: R0 * props.scale,
+    y: (props.naturalHeight/props.scale - R3) * props.scale,
+    width: (R2 - R0) * props.scale,
+    height: (R3 - R1) * props.scale,
+    naturalWidth: props.naturalWidth,
+    naturalHeight: props.naturalHeight,
+  }
+}
+
+export function getPDFRect(elCrop: ImageCrop, scale: number): string {
+  const R0 = elCrop.x / scale;
+  const R2 = elCrop.width / scale + R0;
+  const R3 = (elCrop.naturalHeight - elCrop.y) / scale;
+  const R1 = R3 - elCrop.height / scale;
+  return `&rect=${Math.round(R0)},${Math.round(R1)},${Math.round(R2)},${Math.round(R3)}`;
+}

src/utils/StylesManager.ts

@@ -41,6 +41,7 @@ export class StylesManager {
     this.plugin = plugin;
     plugin.app.workspace.onLayoutReady(async () => {
       (process.env.NODE_ENV === 'development') && DEBUGGING && debug(undefined, "StylesManager.constructor > app.workspace.onLayoutReady", this);
+      await plugin.awaitInit();
       await this.harvestStyles();
       getAllWindowDocuments(plugin.app).forEach(doc => this.copyPropertiesToTheme(doc));
 

src/utils/Utils.ts

@@ -18,7 +18,7 @@ import {
   getContainerElement,
 } from "../constants/constants";
 import ExcalidrawPlugin from "../main";
-import { ExcalidrawElement, ExcalidrawTextElement } from "@zsviczian/excalidraw/types/excalidraw/element/types";
+import { ExcalidrawElement, ExcalidrawTextElement, ImageCrop } from "@zsviczian/excalidraw/types/excalidraw/element/types";
 import { ExportSettings } from "../ExcalidrawView";
 import { getDataURLFromURL, getIMGFilename, getMimeType, getURLImageExtension } from "./FileUtils";
 import { generateEmbeddableLink } from "./CustomEmbeddableUtils";
@@ -29,6 +29,8 @@ import { updateElementLinksToObsidianLinks } from "src/ExcalidrawAutomate";
 import { CropImage } from "./CropImage";
 import opentype from 'opentype.js';
 import { runCompressionWorker } from "src/workers/compression-worker";
+import Pool from "es6-promise-pool";
+import { FileData } from "src/EmbeddedFileLoader";
 
 declare const PLUGIN_VERSION:string;
 declare var LZString: any;
@@ -427,14 +429,14 @@ export function addAppendUpdateCustomData (el: Mutable<ExcalidrawElement>, newDa
 
 export function scaleLoadedImage (
   scene: any,
-  files: any
+  files: FileData[],
 ): { dirty: boolean; scene: any } {
   let dirty = false;
   if (!files || !scene) {
     return { dirty, scene };
   }
 
-  for (const f of files.filter((f:any)=>{
+  for (const img of files.filter((f:any)=>{
     if(!Boolean(EXCALIDRAW_PLUGIN)) return true; //this should never happen
     const ef = EXCALIDRAW_PLUGIN.filesMaster.get(f.id);
     if(!ef) return true; //mermaid SVG or equation
@@ -442,34 +444,81 @@ export function scaleLoadedImage (
     if(!file || (file instanceof TFolder)) return false;
     return (file as TFile).extension==="md" || EXCALIDRAW_PLUGIN.isExcalidrawFile(file as TFile)
   })) {
-    const [w_image, h_image] = [f.size.width, f.size.height];
-    const imageAspectRatio = f.size.width / f.size.height;
+    const [imgWidth, imgHeight] = [img.size.width, img.size.height];
+    const imgAspectRatio = imgWidth / imgHeight;
+
     scene.elements
-      .filter((e: any) => e.type === "image" && e.fileId === f.id)
+      .filter((e: any) => e.type === "image" && e.fileId === img.id)
       .forEach((el: any) => {
-        const [w_old, h_old] = [el.width, el.height];
-        if(el.customData?.isAnchored && f.shouldScale || !el.customData?.isAnchored && !f.shouldScale) {
-          addAppendUpdateCustomData(el, f.shouldScale ? {isAnchored: false} : {isAnchored: true});
+        const [elWidth, elHeight] = [el.width, el.height];
+        const maintainArea = img.shouldScale; //true if image should maintain its area, false if image should display at 100% its size
+        const elCrop: ImageCrop = el.crop;
+        const isCropped = Boolean(elCrop);
+
+  
+        if(el.customData?.isAnchored && img.shouldScale || !el.customData?.isAnchored && !img.shouldScale) {
+          //customData.isAnchored is used by the Excalidraw component to disable resizing of anchored images
+          //customData.isAnchored has no direct role in the calculation in the scaleLoadedImage function
+          addAppendUpdateCustomData(el, img.shouldScale ? {isAnchored: false} : {isAnchored: true});
           dirty = true;
         }
-        if(f.shouldScale) {
-          const elementAspectRatio = w_old / h_old;
-          if (imageAspectRatio !== elementAspectRatio) {
+
+        if(isCropped) {
+          if(elCrop.naturalWidth !== imgWidth || elCrop.naturalHeight !== imgHeight) {
             dirty = true;
-            const h_new = Math.sqrt((w_old * h_old * h_image) / w_image);
-            const w_new = Math.sqrt((w_old * h_old * w_image) / h_image);
-            el.height = h_new;
-            el.width = w_new;
-            el.y += (h_old - h_new) / 2;
-            el.x += (w_old - w_new) / 2;
+            //the current crop area may be maintained, need to calculate the new crop.x, crop.y offsets            
+            el.crop.y += (imgHeight - elCrop.naturalHeight)/2;
+            if(imgWidth < elCrop.width) {
+              const scaleX = el.width / elCrop.width;
+              el.crop.x = 0;
+              el.crop.width = imgWidth;
+              el.width = imgWidth * scaleX;
+            } else {
+              const ratioX = elCrop.x / (elCrop.naturalWidth - elCrop.x - elCrop.width);
+              const gapX = imgWidth - elCrop.width;
+              el.crop.x = ratioX * gapX / (1 + ratioX);
+              if(el.crop.x + elCrop.width > imgWidth) {
+                el.crop.x = (imgWidth - elCrop.width) / 2;
+              }
+            }
+            if(imgHeight < elCrop.height) {
+              const scaleY = el.height / elCrop.height;
+              el.crop.y = 0;
+              el.crop.height = imgHeight;
+              el.height = imgHeight * scaleY;
+            } else {
+              const ratioY = elCrop.y / (elCrop.naturalHeight - elCrop.y - elCrop.height);
+              const gapY = imgHeight - elCrop.height;
+              el.crop.y = ratioY * gapY / (1 + ratioY);
+              if(el.crop.y + elCrop.height > imgHeight) {
+                el.crop.y = (imgHeight - elCrop.height)/2;
+              }
+            }
+            el.crop.naturalWidth = imgWidth;
+            el.crop.naturalHeight = imgHeight;
+            const noCrop = el.crop.width === imgWidth && el.crop.height === imgHeight;
+            if(noCrop) {
+              el.crop = null;
+            }
           }
-        } else {
-          if(w_old !== w_image || h_old !== h_image) {
+        } else if(maintainArea) {
+          const elAspectRatio = elWidth / elHeight;
+          if (imgAspectRatio !== elAspectRatio) {
             dirty = true;
-            el.height = h_image;
-            el.width = w_image;
-            el.y += (h_old - h_image) / 2;
-            el.x += (w_old - w_image) / 2;         
+            const elNewHeight = Math.sqrt((elWidth * elHeight * imgHeight) / imgWidth);
+            const elNewWidth = Math.sqrt((elWidth * elHeight * imgWidth) / imgHeight);
+            el.height = elNewHeight;
+            el.width = elNewWidth;
+            el.y += (elHeight - elNewHeight) / 2;
+            el.x += (elWidth - elNewWidth) / 2;
+          } 
+        } else { //100% size
+          if(elWidth !== imgWidth || elHeight !== imgHeight) {
+            dirty = true;
+            el.height = imgHeight;
+            el.width = imgWidth;
+            el.y += (elHeight - imgHeight) / 2;
+            el.x += (elWidth - imgWidth) / 2;         
           }
         }
       });
@@ -968,4 +1017,63 @@ export function cropCanvas(
       0, 0, output.width, output.height
   );
   return dstCanvas;
+}
+
+// Promise.try, adapted from https://github.com/sindresorhus/p-try
+export async function promiseTry <TValue, TArgs extends unknown[]>(
+  fn: (...args: TArgs) => PromiseLike<TValue> | TValue,
+  ...args: TArgs
+): Promise<TValue> {
+  return new Promise((resolve) => {
+    resolve(fn(...args));
+  });
+};
+
+// extending the missing types
+// relying on the [Index, T] to keep a correct order
+type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
+  addEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => (event: { data: { result: [Index, T] } }) => void;
+  removeEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => void;
+};
+
+export class PromisePool<T> {
+  private readonly pool: TPromisePool<T>;
+  private readonly entries: Record<number, T> = {};
+
+  constructor(
+    source: IterableIterator<Promise<void | readonly [number, T]>>,
+    concurrency: number,
+  ) {
+    this.pool = new Pool(
+      source as unknown as () => void | PromiseLike<[number, T][]>,
+      concurrency,
+    ) as TPromisePool<T>;
+  }
+
+  public all() {
+    const listener = (event: { data: { result: void | [number, T] } }) => {
+      if (event.data.result) {
+        // by default pool does not return the results, so we are gathering them manually
+        // with the correct call order (represented by the index in the tuple)
+        const [index, value] = event.data.result;
+        this.entries[index] = value;
+      }
+    };
+
+    this.pool.addEventListener("fulfilled", listener);
+
+    return this.pool.start().then(() => {
+      setTimeout(() => {
+        this.pool.removeEventListener("fulfilled", listener);
+      });
+
+      return Object.values(this.entries);
+    });
+  }
 }