2.7.0-beta-3 embeddable debugging

Update zh-cn.ts to 9e1d491

MathjaxToSVG/index.ts

@@ -0,0 +1,96 @@
+import {mathjax} from "mathjax-full/js/mathjax";
+import {TeX} from 'mathjax-full/js/input/tex.js';
+import {SVG} from 'mathjax-full/js/output/svg.js';
+import {LiteAdaptor, liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor.js';
+import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html.js';
+import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages.js';
+import { customAlphabet } from "nanoid";
+
+type DataURL = string & { _brand: "DataURL" };
+type FileId = string & { _brand: "FileId" };
+const fileid = customAlphabet("1234567890abcdef", 40);
+
+let adaptor: LiteAdaptor;
+let html: any;
+let preamble: string;
+
+function svgToBase64(svg: string): string {
+  return `data:image/svg+xml;base64,${btoa(
+    decodeURIComponent(encodeURIComponent(svg.replaceAll(" ", " "))),
+  )}`;
+}
+
+async function getImageSize(src: string): Promise<{ height: number; width: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve({ height: img.naturalHeight, width: img.naturalWidth });
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+export async function tex2dataURL(
+  tex: string,
+  scale: number = 4,
+  app?: any
+): Promise<{
+  mimeType: string;
+  fileId: FileId;
+  dataURL: DataURL;
+  created: number;
+  size: { height: number; width: number };
+}> {
+  let input: TeX<unknown, unknown, unknown>;
+  let output: SVG<unknown, unknown, unknown>;
+
+  if(!adaptor) {
+    if (app) {
+      const file = app.vault.getAbstractFileByPath("preamble.sty");
+      preamble = file ? await app.vault.read(file) : null;
+    }
+    adaptor = liteAdaptor();
+    RegisterHTMLHandler(adaptor);
+    input = new TeX({
+      packages: AllPackages,
+      ...(preamble ? {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']]
+      } : {}),
+    });
+    output = new SVG({ fontCache: "local" });
+    html = mathjax.document("", { InputJax: input, OutputJax: output });
+  }
+
+  try {
+    const node = html.convert(
+      preamble ? `${preamble}${tex}` : tex,
+      { display: true, scale }
+    );
+    const svg = new DOMParser().parseFromString(adaptor.innerHTML(node), "image/svg+xml").firstChild as SVGSVGElement;
+    if (svg) {
+      if(svg.width.baseVal.valueInSpecifiedUnits < 2) {
+        svg.width.baseVal.valueAsString = `${(svg.width.baseVal.valueInSpecifiedUnits+1).toFixed(3)}ex`;
+      }
+      const img = svgToBase64(svg.outerHTML);
+      svg.width.baseVal.valueAsString = (svg.width.baseVal.valueInSpecifiedUnits * 10).toFixed(3);
+      svg.height.baseVal.valueAsString = (svg.height.baseVal.valueInSpecifiedUnits * 10).toFixed(3);
+      const dataURL = svgToBase64(svg.outerHTML);
+      return {
+        mimeType: "image/svg+xml",
+        fileId: fileid() as FileId,
+        dataURL: dataURL as DataURL,
+        created: Date.now(),
+        size: await getImageSize(img),
+      };
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return null;
+}
+
+export function clearMathJaxVariables(): void {
+  adaptor = null;
+  html = null;
+  preamble = null;
+}

MathjaxToSVG/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@zsviczian/mathjax-to-svg",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js"
+  },
+  "dependencies": {
+    "mathjax-full": "^3.2.2",
+    "nanoid": "^4.0.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "cross-env": "^7.0.3",
+    "obsidian": "1.5.7-1",
+    "rollup": "^2.70.1",
+    "typescript": "^5.2.2",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

MathjaxToSVG/rollup.config.js

@@ -0,0 +1,35 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import { terser } from 'rollup-plugin-terser';
+
+const isProd = (process.env.NODE_ENV === 'production');
+
+export default {
+  input: './index.ts',
+  output: {
+    dir: 'dist',
+    format: 'iife',
+    name: 'MathjaxToSVG', // Global variable name
+    exports: 'named',
+    sourcemap: !isProd,
+  },
+  plugins: [
+    typescript({
+      tsconfig: '../tsconfig.json',
+    }),
+    commonjs(),
+    nodeResolve({ 
+      browser: true,
+      preferBuiltins: false
+    }),
+    isProd && terser({
+      format: {
+        comments: false,
+      },
+      compress: {
+        passes: 2,
+      }
+    })
+  ].filter(Boolean)
+};

ea-scripts/Image Occlusion.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Blue star background -->
+  <path
+    d="M50 5 L61 40 L98 40 L68 62 L79 95 L50 75 L21 95 L32 62 L2 40 L39 40 Z"
+    fill="#4a9eff"
+    stroke="#1e1e1e"
+    stroke-width="2"
+  />
+  <!-- White "A" text -->
+  <text
+    x="50"
+    y="65"
+    font-family="Arial"
+    font-size="40"
+    fill="white"
+    text-anchor="middle"
+    dominant-baseline="middle"
+  >A</text>
+</svg>

ea-scripts/index-new.md

@@ -130,6 +130,7 @@ I would love to include your contribution in the script library. If you have a s
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Select%20Similar%20Elements.svg"/></div>|[[#Select Similar Elements]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Slideshow.svg"/></div>|[[#Slideshow]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Split%20Ellipse.svg"/></div>|[[#Split Ellipse]]|
+|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Image%20Occlusion.svg"/></div>|[[#Image Occlusion]]|
 
 ## Collaboration and Export
 **Keywords**: Sharing, Teamwork, Exporting, Distribution, Cooperative, Publish
@@ -154,6 +155,7 @@ I would love to include your contribution in the script library. If you have a s
 |----|-----|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Crop%20Vintage%20Mask.svg"/></div>|[[#Crop Vintage Mask]]|
 
+
 ---
 
 # Description and Installation
@@ -267,6 +269,8 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```
 <table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Crop%20Vintage%20Mask.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Adds a rounded mask to the image by adding a full cover black mask and a rounded rectangle white mask. The script is also useful for adding just a black mask. In this case, run the script, then delete the white mask and add your custom white mask.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-crop-vintage.jpg'></td></tr></table>
 
+
+
 ## Custom Zoom
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Custom%20Zoom.md
@@ -395,6 +399,12 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```
 <table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/GPT-Draw-a-UI.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script was discontinued in favor of ExcaliAI. Draw a UI and let GPT create the code for you.<br><iframe width="400" height="225" src="https://www.youtube.com/embed/y3kHl_6Ll4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-draw-a-ui.jpg'></td></tr></table>
 
+## Image Occlusion
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Image%20Occlusion.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/TrillStones'>@TrillStones</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Image%20Occlusion.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">An Excalidraw script for creating Anki image occlusion cards in Obsidian, similar to Anki's Image Occlusion Enhanced add-on but integrated into your Obsidian workflow.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-image-occlusion.png'></td></tr></table>
+
 ## Invert colors
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Invert%20colors.md

manifest-beta.json

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

manifest.json

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

package.json

@@ -8,18 +8,22 @@
     "lib/**/*"
   ],
   "scripts": {
-    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "lib": "cross-env NODE_ENV=lib rollup --config rollup.config.js",
     "code:fix": "eslint --max-warnings=0 --ext .ts,.tsx ./src --fix",
-    "madge": "madge --circular ."
+    "madge": "madge --circular .",
+    "build:mathjax": "cd MathjaxToSVG && npm run build",
+    "build:all": "npm run build:mathjax && npm run build",
+    "dev:mathjax": "cd MathjaxToSVG && npm run dev",
+    "dev:all": "npm run dev:mathjax && npm run dev"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.6-7",
+    "@zsviczian/excalidraw": "0.17.6-20",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",
@@ -38,6 +42,7 @@
     "es6-promise-pool": "2.5.0"
   },
   "devDependencies": {
+    "jsesc": "^3.0.2",
     "@babel/core": "^7.22.9",
     "@babel/preset-env": "^7.22.10",
     "@babel/preset-react": "^7.22.5",

rollup.config.js

@@ -19,6 +19,8 @@ const isProd = (process.env.NODE_ENV === "production");
 const isLib = (process.env.NODE_ENV === "lib");
 console.log(`Running: ${process.env.NODE_ENV}; isProd: ${isProd}; isLib: ${isLib}`);
 
+const mathjaxtosvg_pkg = isLib ? "" : fs.readFileSync("./MathjaxToSVG/dist/index.js", "utf8");
+
 const excalidraw_pkg = isLib ? "" : isProd
   ? fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.production.min.js", "utf8")
   : fs.readFileSync("./node_modules/@zsviczian/excalidraw/dist/excalidraw.development.js", "utf8");
@@ -48,18 +50,26 @@ if (!isLib) {
 
 const manifestStr = isLib ? "" : fs.readFileSync("manifest.json", "utf-8");
 const manifest = isLib ? {} : JSON.parse(manifestStr);
-if (!isLib) console.log(manifest.version);
+if (!isLib) {
+  console.log(manifest.version);
+}
 
 const packageString = isLib
   ? ""
-  : ';' + lzstring_pkg +
+  : ';const INITIAL_TIMESTAMP=Date.now();' + lzstring_pkg +
   '\nlet REACT_PACKAGES = `' +
   jsesc(react_pkg + reactdom_pkg, { quotes: 'backtick' }) +
   '`;\n' +
-  'let EXCALIDRAW_PACKAGE = ""; const unpackExcalidraw = () => {EXCALIDRAW_PACKAGE = LZString.decompressFromBase64("' + LZString.compressToBase64(excalidraw_pkg) + '");};\n' +
+/*  'let EXCALIDRAW_PACKAGE = `' +
+  jsesc(excalidraw_pkg, { quotes: 'backtick' }) +
+  '`;\n' +*/
+  'const unpackExcalidraw = () => 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 + '";';
+  'let excalidrawLib = {};\n' +
+  'const loadMathjaxToSVG = () => window.eval.call(window, `(function() {' + 
+  '${LZString.decompressFromBase64("' + LZString.compressToBase64(mathjaxtosvg_pkg) + '")}' +
+  'return MathjaxToSVG;})();`);\n' +
+  'const 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/Components/Suggesters/FieldSuggester.ts

@@ -6,13 +6,16 @@ import {
   EditorSuggestTriggerInfo,
   TFile,
 } from "obsidian";
-import { FRONTMATTER_KEYS_INFO } from "./SuggesterInfo";
+import { FRONTMATTER_KEYS_INFO } from "../../dialogs/SuggesterInfo";
 import {
   EXCALIDRAW_AUTOMATE_INFO,
   EXCALIDRAW_SCRIPTENGINE_INFO,
-} from "./SuggesterInfo";
-import type ExcalidrawPlugin from "../main";
+} from "../../dialogs/SuggesterInfo";
+import type ExcalidrawPlugin from "../../main";
 
+/**
+ * The field suggester recommends document properties in source mode, ea and utils function and attribute names.
+ */
 export class FieldSuggester extends EditorSuggest<string> {
   plugin: ExcalidrawPlugin;
   suggestType: "ea" | "excalidraw" | "utils";

src/Components/Suggesters/FileSuggestionModal.ts

@@ -0,0 +1,142 @@
+import {
+  FuzzyMatch,
+  TFile,
+  CachedMetadata,
+  TextComponent,
+  App,
+  setIcon,
+} from "obsidian";
+import { SuggestionModal } from "./SuggestionModal";
+import { t } from "src/lang/helpers";
+import { LinkSuggestion } from "src/types/types";
+import ExcalidrawPlugin from "src/main";
+import { AUDIO_TYPES, CODE_TYPES, ICON_NAME, IMAGE_TYPES, VIDEO_TYPES } from "src/constants/constants";
+
+export class FileSuggestionModal extends SuggestionModal<LinkSuggestion> {
+  text: TextComponent;
+  cache: CachedMetadata;
+  filesAndAliases: LinkSuggestion[];
+  file: TFile;
+  constructor(app: App, input: TextComponent, items: TFile[], private plugin: ExcalidrawPlugin) {
+    const filesAndAliases = [];
+    for (const file of items) {
+      const path = file.path;
+      filesAndAliases.push({ file, path, alias: "" });
+      const metadata = app.metadataCache.getFileCache(file); // Get metadata for the file
+      const aliases = metadata?.frontmatter?.aliases || []; // Check for frontmatter aliases
+
+      for (const alias of aliases) {
+        if(!alias) continue; // Skip empty aliases
+        filesAndAliases.push({ file, path, alias });
+      }
+    }
+    super(app, input.inputEl, filesAndAliases);
+    this.limit = 20;
+    this.filesAndAliases = filesAndAliases;
+    this.text = input;
+    this.suggestEl.style.maxWidth = "100%";
+    this.suggestEl.style.width = `${input.inputEl.clientWidth}px`;
+    this.inputEl.addEventListener("input", () => this.getFile());
+    this.setPlaceholder(t("SELECT_FILE_TO_INSERT"));
+    this.emptyStateText = t("NO_MATCH");
+  }
+
+  getFile() {
+    const v = this.inputEl.value;
+    const file = this.app.vault.getAbstractFileByPath(v);
+    if (file === this.file) {
+      return;
+    }
+    if (!(file instanceof TFile)) {
+      return;
+    }
+    this.file = file;
+
+    this.onInputChanged();
+  }
+
+  getSelectedItem() {
+    return this.file;
+  }
+
+  getItemText(item: LinkSuggestion) {
+    return `${item.file.path}${item.alias ? `|${item.alias}` : ""}`;
+  }
+
+  onChooseItem(item: LinkSuggestion) {
+    this.file = item.file;
+    this.text.setValue(this.getItemText(item));
+    this.text.onChanged();
+  }
+
+  selectSuggestion({ item }: FuzzyMatch<LinkSuggestion>) {
+    this.file = item.file;
+    this.text.setValue(this.getItemText(item));
+    this.onClose();
+    this.text.onChanged();
+    this.close();
+  }
+  
+  renderSuggestion(result: FuzzyMatch<LinkSuggestion>, itemEl: HTMLElement) {
+    const { item, match: matches } = result || {};
+    itemEl.addClass("mod-complex");
+    const contentEl = itemEl.createDiv("suggestion-content");
+    const auxEl = itemEl.createDiv("suggestion-aux");
+    const titleEl = contentEl.createDiv("suggestion-title");
+    const noteEl = contentEl.createDiv("suggestion-note");
+
+    //el.style.flexDirection = "column";
+    //content.style.flexDirection = "initial";
+
+    if (!item) {
+      titleEl.setText(this.emptyStateText);
+      itemEl.addClass("is-selected");
+      return;
+    }
+
+    const path = item.file?.path ?? item.path;
+    const pathLength = path.length - item.file.name.length;
+    const matchElements = matches.matches.map((m) => {
+      return createSpan("suggestion-highlight");
+    });
+    const itemText = this.getItemText(item);
+    for (let i = pathLength; i < itemText.length; i++) {
+      const match = matches.matches.find((m) => m[0] === i);
+      if (match) {
+        const element = matchElements[matches.matches.indexOf(match)];
+        titleEl.appendChild(element);
+        element.appendText(itemText.substring(match[0], match[1]));
+
+        i += match[1] - match[0] - 1;
+        continue;
+      }
+
+      titleEl.appendText(itemText[i]);
+    }
+    noteEl.setText(path);
+
+    if(this.plugin.isExcalidrawFile(item.file)) {
+      setIcon(auxEl, ICON_NAME);
+    } else if (item.file.extension === "md") {
+      setIcon(auxEl, "square-pen");
+    } else if (IMAGE_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "image");
+    } else if (VIDEO_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "monitor-play");
+    } else if (AUDIO_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "file-audio");
+    } else if (CODE_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "file-code");
+    } else if (item.file.extension === "canvas") {
+      setIcon(auxEl, "layout-dashboard");
+    } else if (item.file.extension === "pdf") {
+      setIcon(auxEl, "book-open-text");
+    } else {
+      auxEl.setText(item.file.extension);
+    }
+  }
+
+  getItems() {
+    return this.filesAndAliases;
+  }
+}

src/Components/Suggesters/FolderSuggestionModal.ts

@@ -0,0 +1,87 @@
+import {
+  FuzzyMatch,
+  CachedMetadata,
+  TextComponent,
+  App,
+  TFolder,
+} from "obsidian";
+import { SuggestionModal } from "./SuggestionModal";
+
+export class FolderSuggestionModal extends SuggestionModal<TFolder> {
+  text: TextComponent;
+  cache: CachedMetadata;
+  folders: TFolder[];
+  folder: TFolder;
+  constructor(app: App, input: TextComponent, items: TFolder[]) {
+    super(app, input.inputEl, items);
+    this.folders = [...items];
+    this.text = input;
+
+    this.inputEl.addEventListener("input", () => this.getFolder());
+  }
+  getFolder() {
+    const v = this.inputEl.value;
+    const folder = this.app.vault.getAbstractFileByPath(v);
+    if (folder == this.folder) {
+      return;
+    }
+    if (!(folder instanceof TFolder)) {
+      return;
+    }
+    this.folder = folder;
+
+    this.onInputChanged();
+  }
+  getItemText(item: TFolder) {
+    return item.path;
+  }
+  onChooseItem(item: TFolder) {
+    this.text.setValue(item.path);
+    this.folder = item;
+  }
+  selectSuggestion({ item }: FuzzyMatch<TFolder>) {
+    const link = item.path;
+
+    this.text.setValue(link);
+    this.onClose();
+
+    this.close();
+  }
+  renderSuggestion(result: FuzzyMatch<TFolder>, el: HTMLElement) {
+    const { item, match: matches } = result || {};
+    const content = el.createDiv({
+      cls: "suggestion-content",
+    });
+    if (!item) {
+      content.setText(this.emptyStateText);
+      content.parentElement.addClass("is-selected");
+      return;
+    }
+
+    const pathLength = item.path.length - item.name.length;
+    const matchElements = matches.matches.map((m) => {
+      return createSpan("suggestion-highlight");
+    });
+    for (let i = pathLength; i < item.path.length; i++) {
+      const match = matches.matches.find((m) => m[0] === i);
+      if (match) {
+        const element = matchElements[matches.matches.indexOf(match)];
+        content.appendChild(element);
+        element.appendText(item.path.substring(match[0], match[1]));
+
+        i += match[1] - match[0] - 1;
+        continue;
+      }
+
+      content.appendText(item.path[i]);
+    }
+    el.createDiv({
+      cls: "suggestion-note",
+      text: item.path,
+    });
+  }
+
+  getItems() {
+    return this.folders;
+  }
+}

src/Components/Suggesters/PathSuggestionModal.ts

@@ -0,0 +1,163 @@
+import {
+  FuzzyMatch,
+  TFile,
+  BlockCache,
+  HeadingCache,
+  CachedMetadata,
+  TextComponent,
+  App,
+} from "obsidian";
+import { SuggestionModal } from "./SuggestionModal";
+
+export class PathSuggestionModal extends SuggestionModal<
+  TFile | BlockCache | HeadingCache
+> {
+  file: TFile;
+  files: TFile[];
+  text: TextComponent;
+  cache: CachedMetadata;
+  constructor(app: App, input: TextComponent, items: TFile[]) {
+    super(app, input.inputEl, items);
+    this.files = [...items];
+    this.text = input;
+    //this.getFile();
+
+    this.inputEl.addEventListener("input", this.getFile.bind(this));
+  }
+
+  getFile() {
+    const v = this.inputEl.value;
+    const file = this.app.metadataCache.getFirstLinkpathDest(
+      v.split(/[\^#]/).shift() || "",
+      "",
+    );
+    if (file == this.file) {
+      return;
+    }
+    this.file = file;
+    if (this.file) {
+      this.cache = this.app.metadataCache.getFileCache(this.file);
+    }
+    this.onInputChanged();
+  }
+  getItemText(item: TFile | HeadingCache | BlockCache) {
+    if (item instanceof TFile) {
+      return item.path;
+    }
+    if (Object.prototype.hasOwnProperty.call(item, "heading")) {
+      return (<HeadingCache>item).heading;
+    }
+    if (Object.prototype.hasOwnProperty.call(item, "id")) {
+      return (<BlockCache>item).id;
+    }
+  }
+  onChooseItem(item: TFile | HeadingCache | BlockCache) {
+    if (item instanceof TFile) {
+      this.text.setValue(item.basename);
+      this.file = item;
+      this.cache = this.app.metadataCache.getFileCache(this.file);
+    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
+      this.text.setValue(
+        `${this.file.basename}#${(<HeadingCache>item).heading}`,
+      );
+    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
+      this.text.setValue(`${this.file.basename}^${(<BlockCache>item).id}`);
+    }
+  }
+  selectSuggestion({ item }: FuzzyMatch<TFile | BlockCache | HeadingCache>) {
+    let link: string;
+    if (item instanceof TFile) {
+      link = item.basename;
+    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
+      link = `${this.file.basename}#${(<HeadingCache>item).heading}`;
+    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
+      link = `${this.file.basename}^${(<BlockCache>item).id}`;
+    }
+
+    this.text.setValue(link);
+    this.onClose();
+
+    this.close();
+  }
+  renderSuggestion(
+    result: FuzzyMatch<TFile | BlockCache | HeadingCache>,
+    el: HTMLElement,
+  ) {
+    const { item, match: matches } = result || {};
+    const content = el.createDiv({
+      cls: "suggestion-content",
+    });
+    if (!item) {
+      content.setText(this.emptyStateText);
+      content.parentElement.addClass("is-selected");
+      return;
+    }
+
+    if (item instanceof TFile) {
+      const pathLength = item.path.length - item.name.length;
+      const matchElements = matches.matches.map((m) => {
+        return createSpan("suggestion-highlight");
+      });
+      for (
+        let i = pathLength;
+        i < item.path.length - item.extension.length - 1;
+        i++
+      ) {
+        const match = matches.matches.find((m) => m[0] === i);
+        if (match) {
+          const element = matchElements[matches.matches.indexOf(match)];
+          content.appendChild(element);
+          element.appendText(item.path.substring(match[0], match[1]));
+
+          i += match[1] - match[0] - 1;
+          continue;
+        }
+
+        content.appendText(item.path[i]);
+      }
+      el.createDiv({
+        cls: "suggestion-note",
+        text: item.path,
+      });
+    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
+      content.setText((<HeadingCache>item).heading);
+      content.prepend(
+        createSpan({
+          cls: "suggestion-flair",
+          text: `H${(<HeadingCache>item).level}`,
+        }),
+      );
+    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
+      content.setText((<BlockCache>item).id);
+    }
+  }
+  get headings() {
+    if (!this.file) {
+      return [];
+    }
+    if (!this.cache) {
+      this.cache = this.app.metadataCache.getFileCache(this.file);
+    }
+    return this.cache.headings || [];
+  }
+  get blocks() {
+    if (!this.file) {
+      return [];
+    }
+    if (!this.cache) {
+      this.cache = this.app.metadataCache.getFileCache(this.file);
+    }
+    return Object.values(this.cache.blocks || {}) || [];
+  }
+  getItems() {
+    const v = this.inputEl.value;
+    if (/#/.test(v)) {
+      this.modifyInput = (i) => i.split(/#/).pop();
+      return this.headings;
+    } else if (/\^/.test(v)) {
+      this.modifyInput = (i) => i.split(/\^/).pop();
+      return this.blocks;
+    }
+    return this.files;
+  }
+}

src/Components/Suggesters/Suggester.ts

@@ -0,0 +1,119 @@
+import {
+  SuggestModal,
+  Scope,
+} from "obsidian";
+
+export class Suggester<T> {
+  owner: SuggestModal<T>;
+  items: T[];
+  suggestions: HTMLDivElement[];
+  selectedItem: number;
+  containerEl: HTMLElement;
+  constructor(owner: SuggestModal<T>, containerEl: HTMLElement, scope: Scope) {
+    this.containerEl = containerEl;
+    this.owner = owner;
+    containerEl.on(
+      "click",
+      ".suggestion-item",
+      this.onSuggestionClick.bind(this),
+    );
+    containerEl.on(
+      "mousemove",
+      ".suggestion-item",
+      this.onSuggestionMouseover.bind(this),
+    );
+
+    scope.register([], "ArrowUp", () => {
+      this.setSelectedItem(this.selectedItem - 1, true);
+      return false;
+    });
+
+    scope.register([], "ArrowDown", () => {
+      this.setSelectedItem(this.selectedItem + 1, true);
+      return false;
+    });
+
+    scope.register([], "Enter", (evt) => {
+      this.useSelectedItem(evt);
+      return false;
+    });
+
+    scope.register([], "Tab", (evt) => {
+      this.chooseSuggestion(evt);
+      return false;
+    });
+  }
+  chooseSuggestion(evt: KeyboardEvent) {
+    if (!this.items || !this.items.length) {
+      return;
+    }
+    const currentValue = this.items[this.selectedItem];
+    if (currentValue) {
+      this.owner.onChooseSuggestion(currentValue, evt);
+    }
+  }
+  onSuggestionClick(event: MouseEvent, el: HTMLDivElement): void {
+    event.preventDefault();
+    if (!this.suggestions || !this.suggestions.length) {
+      return;
+    }
+
+    const item = this.suggestions.indexOf(el);
+    this.setSelectedItem(item, false);
+    this.useSelectedItem(event);
+  }
+
+  onSuggestionMouseover(event: MouseEvent, el: HTMLDivElement): void {
+    if (!this.suggestions || !this.suggestions.length) {
+      return;
+    }
+    const item = this.suggestions.indexOf(el);
+    this.setSelectedItem(item, false);
+  }
+  empty() {
+    this.containerEl.empty();
+  }
+  setSuggestions(items: T[]) {
+    this.containerEl.empty();
+    const els: HTMLDivElement[] = [];
+
+    items.forEach((item) => {
+      const suggestionEl = this.containerEl.createDiv("suggestion-item");
+      this.owner.renderSuggestion(item, suggestionEl);
+      els.push(suggestionEl);
+    });
+    this.items = items;
+    this.suggestions = els;
+    this.setSelectedItem(0, false);
+  }
+  useSelectedItem(event: MouseEvent | KeyboardEvent) {
+    if (!this.items || !this.items.length) {
+      return;
+    }
+    const currentValue = this.items[this.selectedItem];
+    if (currentValue) {
+      this.owner.selectSuggestion(currentValue, event);
+    }
+  }
+  wrap(value: number, size: number): number {
+    return ((value % size) + size) % size;
+  }
+  setSelectedItem(index: number, scroll: boolean) {
+    const nIndex = this.wrap(index, this.suggestions.length);
+    const prev = this.suggestions[this.selectedItem];
+    const next = this.suggestions[nIndex];
+
+    if (prev) {
+      prev.removeClass("is-selected");
+    }
+    if (next) {
+      next.addClass("is-selected");
+    }
+
+    this.selectedItem = nIndex;
+
+    if (scroll) {
+      next.scrollIntoView(false);
+    }
+  }
+}

src/Components/Suggesters/SuggestionModal.ts

@@ -0,0 +1,128 @@
+import {
+  FuzzyMatch,
+  App,
+  FuzzySuggestModal,
+  Scope,
+} from "obsidian";
+import { createPopper, Instance as PopperInstance } from "@popperjs/core";
+import { Suggester } from "./Suggester";
+
+export abstract class SuggestionModal<T> extends FuzzySuggestModal<T> {
+  items: T[] = [];
+  suggestions: HTMLDivElement[];
+  popper: WeakRef<PopperInstance>;
+  //@ts-ignore
+  scope: Scope = new Scope(this.app.scope);
+  suggester: Suggester<FuzzyMatch<T>>;
+  suggestEl: HTMLDivElement;
+  promptEl: HTMLDivElement;
+  emptyStateText: string = "No match found";
+  limit: number = 100;
+  shouldNotOpen: boolean;
+  constructor(app: App, inputEl: HTMLInputElement, items: T[]) {
+    super(app);
+    this.inputEl = inputEl;
+    this.items = items;
+    this.suggestEl = createDiv("suggestion-container");
+    this.contentEl = this.suggestEl.createDiv("suggestion");
+    this.suggester = new Suggester(this, this.contentEl, this.scope);
+    this.scope.register([], "Escape", this.onEscape.bind(this));
+    this.inputEl.addEventListener("input", this.onInputChanged.bind(this));
+    this.inputEl.addEventListener("focus", this.onFocus.bind(this));
+    this.inputEl.addEventListener("blur", this.close.bind(this));
+    this.suggestEl.on(
+      "mousedown",
+      ".suggestion-container",
+      (event: MouseEvent) => {
+        event.preventDefault();
+      },
+    );
+  }
+
+  empty() {
+    this.suggester.empty();
+  }
+
+  onInputChanged(): void {
+    if (this.shouldNotOpen) {
+      return;
+    }
+    const inputStr = this.modifyInput(this.inputEl.value);
+    const suggestions = this.getSuggestions(inputStr);
+    if (suggestions.length > 0) {
+      this.suggester.setSuggestions(suggestions.slice(0, this.limit));
+    } else {
+      this.onNoSuggestion();
+    }
+    this.open();
+  }
+
+  onFocus(): void {
+    this.shouldNotOpen = false;
+    this.onInputChanged();
+  }
+
+  modifyInput(input: string): string {
+    return input;
+  }
+
+  onNoSuggestion() {
+    this.empty();
+    this.renderSuggestion(null, this.contentEl.createDiv("suggestion-item"));
+  }
+
+  open(): void {
+    // TODO: Figure out a better way to do this. Idea from Periodic Notes plugin
+    this.app.keymap.pushScope(this.scope);
+    this.inputEl.ownerDocument.body.appendChild(this.suggestEl);
+    this.popper = new WeakRef(createPopper(this.inputEl, this.suggestEl, {
+      placement: "bottom-start",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 10],
+          },
+        },
+        {
+          name: "flip",
+          options: {
+            fallbackPlacements: ["top"],
+          },
+        },
+      ],
+    }));
+  }
+
+  onEscape(): void {
+    this.close();
+    this.shouldNotOpen = true;
+  }
+
+  close(): void {
+    // TODO: Figure out a better way to do this. Idea from Periodic Notes plugin
+    this.app.keymap.popScope(this.scope);
+    this.suggester.setSuggestions([]);
+    if (this.popper?.deref()) {
+      this.popper.deref().destroy();
+    }
+    this.inputEl.removeEventListener("input", this.onInputChanged.bind(this));
+    this.inputEl.removeEventListener("focus", this.onFocus.bind(this));
+    this.inputEl.removeEventListener("blur", this.close.bind(this));
+    this.suggestEl.detach(); 
+  }
+
+  createPrompt(prompts: HTMLSpanElement[]) {
+    if (!this.promptEl) {
+      this.promptEl = this.suggestEl.createDiv("prompt-instructions");
+    }
+    const prompt = this.promptEl.createDiv("prompt-instruction");
+    for (const p of prompts) {
+      prompt.appendChild(p);
+    }
+  }
+
+  abstract onChooseItem(item: T, evt: MouseEvent | KeyboardEvent): void;
+  abstract getItemText(arg: T): string;
+  abstract getItems(): T[];
+}

src/EmbeddedFileLoader.ts

@@ -701,7 +701,11 @@ export class EmbeddedFilesLoader {
               return;
             }
             const data = getMermaidText(element);
-            const result = await mermaidToExcalidraw(data, {fontSize: 20}, true);
+            const result = await mermaidToExcalidraw(
+              data,
+              { themeVariables: { fontSize: "20" } },
+              true
+            );
             if(!result) {
               return;
             }
@@ -767,7 +771,7 @@ export class EmbeddedFilesLoader {
     }, 1200);
 
     const iterator = loadIterator.bind(this)();
-    const concurency = 5;
+    const concurency = 3;
     await new PromisePool(iterator, concurency).all();
     
     clearInterval(addFilesTimer);
@@ -1106,27 +1110,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

@@ -17,7 +17,7 @@ import { MimeType } from "./EmbeddedFileLoader";
 import { Editor, normalizePath, Notice, OpenViewState, RequestUrlResponse, TFile, TFolder, WorkspaceLeaf } from "obsidian";
 import * as obsidian_module from "obsidian";
 import ExcalidrawView, { ExportSettings, TextMode, getTextMode } from "src/ExcalidrawView";
-import { ExcalidrawData, getMarkdownDrawingSection, REGEX_LINK } from "src/ExcalidrawData";
+import { ExcalidrawData, getExcalidrawMarkdownHeaderSection, getMarkdownDrawingSection, REGEX_LINK } from "src/ExcalidrawData";
 import {
   FRONTMATTER,
   nanoid,
@@ -133,6 +133,10 @@ export class ExcalidrawAutomate {
     return DEVICE;
   }
 
+  public printStartupBreakdown() {
+    this.plugin.printStarupBreakdown();
+  }
+
   public help(target: Function | string) {
     if (!target) {
       log("Usage: ea.help(ea.functionName) or ea.help('propertyName') or ea.help('utils.functionName') - notice property name and utils function name is in quotes");
@@ -650,6 +654,13 @@ export class ExcalidrawAutomate {
           0
         )
       : null;
+    if (template?.plaintext) {
+      if(params.plaintext) {
+        params.plaintext = params.plaintext + "\n\n" + template.plaintext;
+      } else {
+        params.plaintext = template.plaintext;
+      }
+    }
     let elements = template ? template.elements : [];
     elements = elements.concat(this.getElements());
     let frontmatter: string;
@@ -675,7 +686,13 @@ export class ExcalidrawAutomate {
         : FRONTMATTER;
     }
 
-    frontmatter += params.plaintext ? params.plaintext + "\n\n" : "";
+    frontmatter += params.plaintext
+      ? (params.plaintext.endsWith("\n\n")
+        ? params.plaintext
+        : (params.plaintext.endsWith("\n") 
+          ? params.plaintext + "\n"
+          : params.plaintext + "\n\n"))
+      : "";
     if(template?.frontmatter && params?.frontmatterKeys) {
       //the frontmatter tags supplyed to create take priority
       frontmatter = mergeMarkdownFiles(template.frontmatter,frontmatter);
@@ -1472,7 +1489,12 @@ export class ExcalidrawAutomate {
     diagram: string,
     groupElements: boolean = true,
   ): Promise<string[]|string> {
-    const result = await mermaidToExcalidraw(diagram, {fontSize: this.style.fontSize});
+    const result = await mermaidToExcalidraw(
+      diagram, {
+        themeVariables: {fontSize: `${this.style.fontSize}`},
+        flowchart: {curve: this.style.roundness===null ? "linear" : "basis"},
+      }
+    );
     const ids:string[] = [];
     if(!result) return null;
     if(result?.error) return result.error;
@@ -1547,6 +1569,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 =
@@ -1816,7 +1842,7 @@ export class ExcalidrawAutomate {
       viewBackgroundColor: "#FFFFFF",
       gridSize: 0
     };
-  }; 
+  };
 
   /**
    * returns true if MD file is an Excalidraw file
@@ -2621,26 +2647,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;
   }
@@ -2845,10 +2876,9 @@ export class ExcalidrawAutomate {
   }  
 };
 
-export async function initExcalidrawAutomate(
+export function initExcalidrawAutomate(
   plugin: ExcalidrawPlugin,
-): Promise<ExcalidrawAutomate> {
-  await initFonts();
+): ExcalidrawAutomate {
   const ea = new ExcalidrawAutomate(plugin);
   //@ts-ignore
   window.ExcalidrawAutomate = ea;
@@ -2883,14 +2913,6 @@ function getFontFamily(id: number):string {
   return getFontFamilyString({fontFamily:id})
 }
 
-export async function initFonts():Promise<void> {
-  /*await excalidrawLib.registerFontsInCSS();
-  const fonts = excalidrawLib.getFontFamilies();
-  for(let i=0;i<fonts.length;i++) {
-    if(fonts[i] !== "Local Font") await (document as any).fonts.load(`16px ${fonts[i]}`);  
-  };*/
-}
-
 export function _measureText(
   newText: string,
   fontSize: number,
@@ -2926,6 +2948,7 @@ async function getTemplate(
   frontmatter: string;
   files: any;
   hasSVGwithBitmap: boolean;
+  plaintext: string; //markdown data above Excalidraw data and below YAML frontmatter
 }> {
   const app = plugin.app;
   const vault = app.vault;
@@ -2951,6 +2974,7 @@ async function getTemplate(
         frontmatter: "",
         files: excalidrawData.scene.files,
         hasSVGwithBitmap,
+        plaintext: "",
       };
     }
 
@@ -3023,7 +3047,7 @@ async function getTemplate(
     }
 
     excalidrawData.destroy();
-    const filehead = data.substring(0, trimLocation);
+    const filehead = getExcalidrawMarkdownHeaderSection(data); // data.substring(0, trimLocation);
     let files:any = {};
     const sceneFilesSize = Object.values(scene.files).length;
     if (sceneFilesSize > 0) {
@@ -3036,6 +3060,7 @@ async function getTemplate(
       }
     }
 
+    const frontmatter = filehead.match(/^---\n.*\n---\n/ms)?.[0] ?? filehead;
     return {
       elements: convertMarkdownLinksToObsidianURLs
         ? updateElementLinksToObsidianLinks({
@@ -3043,7 +3068,10 @@ async function getTemplate(
           hostFile: file,
         }) : groupElements,
       appState: scene.appState,
-      frontmatter: filehead.match(/^---\n.*\n---\n/ms)?.[0] ?? filehead,
+      frontmatter,
+      plaintext: frontmatter !== filehead
+        ? (filehead.split(/^---\n.*\n---\n/ms)?.[1] ?? "")
+        : "",
       files,
       hasSVGwithBitmap,
     };
@@ -3054,6 +3082,7 @@ async function getTemplate(
     frontmatter: null,
     files: [],
     hasSVGwithBitmap,
+    plaintext: "",
   };
 }
 

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 };
 
@@ -755,7 +756,7 @@ export class ExcalidrawData {
         displayFontMessage(this.app);
       }
     },5000);
-    await loadSceneFonts(this.scene.elements);
+    const fontFaces = await loadSceneFonts(this.scene.elements);
     clearTimeout(timer);
 
     if (!this.scene.files) {
@@ -1579,6 +1580,26 @@ 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) return;
+      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 +1720,7 @@ export class ExcalidrawData {
     this.updateElementLinksFromScene();
     result =
       result ||
+      this.syncCroppedPDFs() ||
       this.setLinkPrefix() ||
       this.setUrlPrefix() ||
       this.setShowLinkBrackets() ||

src/ExcalidrawLib.d.ts

@@ -6,7 +6,38 @@ import { FontMetadata } from "@zsviczian/excalidraw/types/excalidraw/fonts/metad
 import { AppState, BinaryFiles, DataURL, GenerateDiagramToCode, Zoom } from "@zsviczian/excalidraw/types/excalidraw/types";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
 import { GlobalPoint } from "@zsviczian/excalidraw/types/math/types";
-import ExcalidrawPlugin from "./main";
+
+interface MermaidConfig {
+  /**
+   * Whether to start the diagram automatically when the page loads.
+   * @default false
+   */
+  startOnLoad?: boolean;
+  /**
+   * The flowchart curve style.
+   * @default "linear"
+   */
+  flowchart?: {
+      curve?: "linear" | "basis";
+  };
+  /**
+   * Theme variables
+   * @default { fontSize: "25px" }
+   */
+  themeVariables?: {
+      fontSize?: string;
+  };
+  /**
+   * Maximum number of edges to be rendered.
+   * @default 1000
+   */
+  maxEdges?: number;
+  /**
+   * Maximum number of characters to be rendered.
+   * @default 1000
+   */
+  maxTextSize?: number;
+}
 
 type EmbeddedLink =
   | ({
@@ -159,7 +190,7 @@ declare namespace ExcalidrawLib {
 
   function mermaidToExcalidraw(
     mermaidDefinition: string,
-    opts: {fontSize: number},
+    opts: MermaidConfig,
     forceSVG?: boolean,
   ): Promise<{
     elements?: ExcalidrawElement[];

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({
@@ -273,7 +295,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
   private lastLoadedFile: TFile = null;
   //store key state for view mode link resolution
   private modifierKeyDown: ModifierKeys = {shiftKey:false, metaKey: false, ctrlKey: false, altKey: false}
-  public currentPosition: {x:number,y:number} = { x: 0, y: 0 };
+  public currentPosition: {x:number,y:number} = { x: 0, y: 0 }; //these are scene coord thus would be more apt to call them sceneX and sceneY, however due to scrits already using x and y, I will keep it as is
   //Obsidian 0.15.0
   private draginfoDiv: HTMLDivElement;
   public canvasNodeFactory: CanvasNodeFactory;
@@ -1505,6 +1527,10 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
 
   onload() {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onload, "ExcalidrawView.onload");
+    if(this.plugin.settings.overrideObsidianFontSize) {
+      document.documentElement.style.fontSize = "";
+    }
+  
     const apiMissing = Boolean(typeof this.containerEl.onWindowMigrated === "undefined")
     this.packages = this.plugin.getPackage(this.ownerWindow);
 
@@ -3241,6 +3267,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     markdownlink: string,
     path: string,
     alias: string,
+    originalLink?: string,
   ) {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.addLink, "ExcalidrawView.addLink", markdownlink, path, alias);
     const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
@@ -3254,16 +3281,28 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     }
     const selectedElementId = Object.keys(api.getAppState().selectedElementIds)[0];
     const selectedElement = api.getSceneElements().find(el=>el.id === selectedElementId);
-    if(!selectedElement || (selectedElement && selectedElement.link !== null)) {
+    if(!selectedElement || (!Boolean(originalLink) && (selectedElement && selectedElement.link !== null) )) {
       if(selectedElement) new Notice("Selected element already has a link. Inserting link as text.");
       this.addText(markdownlink);
       return;
     }
     const ea = getEA(this) as ExcalidrawAutomate;
     ea.copyViewElementsToEAforEditing([selectedElement]);
+    if(originalLink?.match(/\[\[(.*?)\]\]/)?.[1]) {
+      markdownlink = originalLink.replace(/(\[\[.*?\]\])/,markdownlink);
+    }
     ea.getElement(selectedElementId).link = markdownlink;
     await ea.addElementsToView(false, true);
     ea.destroy();
+    if(Boolean(originalLink)) {
+      this.updateScene({
+        appState: {
+          showHyperlinkPopup: {
+            newValue : "info", oldValue : "editor"
+          }
+        }
+      });
+    }
   }
 
   public async addText (
@@ -3520,7 +3559,10 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
   }
 
   private clearHoverPreview() {
-    if (this.hoverPopover) {
+    //@ts-ignore
+    const hoverContainerEl = this.hoverPopover?.containerEl;
+    //don't auto hide hover-editor
+    if (this.hoverPopover && !hoverContainerEl?.parentElement?.hasClass("hover-editor")) {
       this.hoverPreviewTarget = null;
       //@ts-ignore
       if(this.hoverPopover.embed?.editor) {
@@ -3985,6 +4027,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,
@@ -4031,7 +4078,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);
@@ -4613,8 +4673,20 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
 
   //returns the raw text of the element which is the original text without parsing
   //in compatibility mode, returns the original text, and for backward compatibility the text if originalText is not available
-  private onBeforeTextEdit (textElement: ExcalidrawTextElement) {
+  private onBeforeTextEdit (textElement: ExcalidrawTextElement, isExistingElement: boolean): string {
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onBeforeTextEdit, "ExcalidrawView.onBeforeTextEdit", textElement);
+    /*const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
+    const st = api.getAppState();
+    setDynamicStyle(
+      this.plugin.ea,
+      this,
+      st.viewBackgroundColor === "transparent" ? "white" : st.viewBackgroundColor,
+      this.plugin.settings.dynamicStyling,
+      api.getColorAtScenePoint({sceneX: this.currentPosition.x, sceneY: this.currentPosition.y})
+    );*/
+    if(!isExistingElement) {
+      return;
+    }
     window.clearTimeout(this.isEditingTextResetTimer);
     this.isEditingTextResetTimer = null;
     this.semaphores.isEditingText = true; //to prevent autoresize on mobile when keyboard pops up
@@ -5035,6 +5107,15 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
     new Notice("Image successfully converted to local file");
   }
 
+  private insertLinkAction(linkVal: string) {
+    let link = linkVal.match(/\[\[(.*?)\]\]/)?.[1];
+    if(!link) {
+      link = linkVal.replaceAll("[","").replaceAll("]","");
+      link = link.split("|")[0].trim();
+    }
+    this.plugin.insertLinkDialog.start(this.file.path, (markdownlink: string, path:string, alias:string) => this.addLink(markdownlink, path, alias, linkVal), link);
+  }
+
   private onContextMenu(elements: readonly ExcalidrawElement[], appState: AppState, onClose: (callback?: () => void) => void) {
     const React = this.packages.react;
     const contextMenuActions = [];
@@ -5857,6 +5938,7 @@ export default class ExcalidrawView extends TextFileView implements HoverParent{
             renderEmbeddable: this.renderEmbeddable.bind(this),
             renderMermaid: shouldRenderMermaid,
             showDeprecatedFonts: true,
+            insertLinkAction: this.insertLinkAction.bind(this),
           },
           this.renderCustomActionsMenu(),
           this.renderWelcomeScreen(),

src/LaTeX.ts

@@ -1,18 +1,22 @@
+// LaTeX.ts
 import { DataURL } from "@zsviczian/excalidraw/types/excalidraw/types";
-import {mathjax} from "mathjax-full/js/mathjax";
-import {TeX} from 'mathjax-full/js/input/tex.js';
-import {SVG} from 'mathjax-full/js/output/svg.js';
-import {LiteAdaptor, liteAdaptor} from 'mathjax-full/js/adaptors/liteAdaptor.js';
-import {RegisterHTMLHandler} from 'mathjax-full/js/handlers/html.js';
-import {AllPackages} from 'mathjax-full/js/input/tex/AllPackages.js';
-
 import ExcalidrawView from "./ExcalidrawView";
 import { FileData, MimeType } from "./EmbeddedFileLoader";
 import { FileId } from "@zsviczian/excalidraw/types/excalidraw/element/types";
-import { getImageSize, svgToBase64 } from "./utils/Utils";
-import { fileid } from "./constants/constants";
-import { TFile } from "obsidian";
-import { MathDocument } from "mathjax-full/js/core/MathDocument";
+
+declare const loadMathjaxToSVG: Function;
+let mathjaxLoaded = false;
+let tex2dataURLExternal: Function;
+let clearVariables: Function;
+
+const loadMathJax = async () => {
+  if (!mathjaxLoaded) {
+    const module = await loadMathjaxToSVG();
+    tex2dataURLExternal = module.tex2dataURL;
+    clearVariables = module.clearMathJaxVariables;
+    mathjaxLoaded = true;
+  }
+};
 
 export const updateEquation = async (
   equation: string,
@@ -20,13 +24,14 @@ export const updateEquation = async (
   view: ExcalidrawView,
   addFiles: Function,
 ) => {
-  const data = await tex2dataURL(equation);
+  await loadMathJax();
+  const data = await tex2dataURLExternal(equation, 4, app);
   if (data) {
     const files: FileData[] = [];
     files.push({
-      mimeType: data.mimeType,
+      mimeType: data.mimeType as MimeType,
       id: fileId as FileId,
-      dataURL: data.dataURL,
+      dataURL: data.dataURL as DataURL,
       created: data.created,
       size: data.size,
       hasSVGwithBitmap: false,
@@ -36,27 +41,9 @@ export const updateEquation = async (
   }
 };
 
-let adaptor: LiteAdaptor;
-let html: MathDocument<any, any, any>;
-let preamble: string;
-
-export const clearMathJaxVariables = () => {
-  adaptor = null;
-  html = null;
-  preamble = null;
-};
-
-//https://github.com/xldenis/obsidian-latex/blob/master/main.ts
-const loadPreamble = async  () => {
-  const file = app.vault.getAbstractFileByPath("preamble.sty");
-  preamble = file && file instanceof TFile
-    ? await app.vault.read(file)
-    : null;
-};
-
 export async function tex2dataURL(
   tex: string,
-  scale: number = 4 // Default scale value, adjust as needed
+  scale: number = 4
 ): Promise<{
   mimeType: MimeType;
   fileId: FileId;
@@ -64,47 +51,12 @@ export async function tex2dataURL(
   created: number;
   size: { height: number; width: number };
 }> {
-  let input: TeX<unknown, unknown, unknown>;
-  let output: SVG<unknown, unknown, unknown>;
+  await loadMathJax();
+  return tex2dataURLExternal(tex, scale, app);
+}
 
-  if(!adaptor) {
-    await loadPreamble();
-    adaptor = liteAdaptor();
-    RegisterHTMLHandler(adaptor);
-    input = new TeX({
-      packages: AllPackages,
-      ...Boolean(preamble) ? {
-        inlineMath: [['$', '$']],
-        displayMath: [['$$', '$$']]
-      } : {},
-    });
-    output = new SVG({ fontCache: "local" });
-    html = mathjax.document("", { InputJax: input, OutputJax: output });
+export const clearMathJaxVariables = () => {
+  if (clearVariables) {
+    clearVariables();
   }
-  try {
-    const node = html.convert(
-      Boolean(preamble) ? `${preamble}${tex}` : tex,
-      { display: true, scale }
-    );
-    const svg = new DOMParser().parseFromString(adaptor.innerHTML(node), "image/svg+xml").firstChild as SVGSVGElement;
-    if (svg) {
-      if(svg.width.baseVal.valueInSpecifiedUnits < 2) {
-        svg.width.baseVal.valueAsString = `${(svg.width.baseVal.valueInSpecifiedUnits+1).toFixed(3)}ex`;
-      }
-      const img = svgToBase64(svg.outerHTML);
-      svg.width.baseVal.valueAsString = (svg.width.baseVal.valueInSpecifiedUnits * 10).toFixed(3);
-      svg.height.baseVal.valueAsString = (svg.height.baseVal.valueInSpecifiedUnits * 10).toFixed(3);
-      const dataURL = svgToBase64(svg.outerHTML);
-      return {
-        mimeType: "image/svg+xml",
-        fileId: fileid() as FileId,
-        dataURL: dataURL as DataURL,
-        created: Date.now(),
-        size: await getImageSize(img),
-      };
-    }
-  } catch (e) {
-    console.error(e);
-  }
-  return null;
-}
+};

src/MarkdownPostProcessor.ts

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

src/Scripts.ts

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

src/constants/constants.ts

@@ -195,6 +195,10 @@ export const ANIMATED_IMAGE_TYPES = ["gif", "webp", "apng", "svg"];
 export const EXPORT_TYPES = ["svg", "dark.svg", "light.svg", "png", "dark.png", "light.png"];
 export const MAX_IMAGE_SIZE = 500;
 
+export const VIDEO_TYPES = ["mp4", "webm", "ogv", "mov", "mkv"];
+export const AUDIO_TYPES = ["mp3", "wav", "m4a", "3gp", "flac", "ogg", "oga", "opus"];
+export const CODE_TYPES = ["json", "css", "js"];
+
 export const FRONTMATTER_KEYS:{[key:string]: {name: string, type: string, depricated?:boolean}} = {
   "plugin": {name: "excalidraw-plugin", type: "text"},
   "export-transparent": {name: "excalidraw-export-transparent", type: "checkbox"},
@@ -222,6 +226,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/customEmbeddable.tsx

@@ -265,20 +265,20 @@ function RenderObsidianView(
       const color = element?.backgroundColor 
         ? (element.backgroundColor.toLowerCase() === "transparent"
           ? "transparent"
-          : ea.getCM(element.backgroundColor).alphaTo(opacity).stringHEX())
+          : ea.getCM(element.backgroundColor).alphaTo(opacity).stringHEX({alpha: true}))
         : "transparent";
       
       color === "transparent" ? canvasNode?.addClass("transparent") : canvasNode?.removeClass("transparent");        
       canvasNode?.style.setProperty("--canvas-background", color);
       canvasNode?.style.setProperty("--background-primary", color);
       canvasNodeContainer?.style.setProperty("background-color", color);
-    } else if (!(mdProps?.backgroundMatchElement ?? true )) {
+    } else if (!(mdProps.backgroundMatchElement ?? true )) {
       const opacity = (mdProps.backgroundOpacity??100)/100;
       const color = mdProps.backgroundMatchCanvas
         ? (canvasColor.toLowerCase() === "transparent"
           ? "transparent"
-          : ea.getCM(canvasColor).alphaTo(opacity).stringHEX())
-        : ea.getCM(mdProps.backgroundColor).alphaTo((mdProps.backgroundOpacity??100)/100).stringHEX();
+          : ea.getCM(canvasColor).alphaTo(opacity).stringHEX({alpha: true}))
+        : ea.getCM(mdProps.backgroundColor).alphaTo((mdProps.backgroundOpacity??100)/100).stringHEX({alpha: true});
       
       color === "transparent" ? canvasNode?.addClass("transparent") : canvasNode?.removeClass("transparent");
       canvasNode?.style.setProperty("--canvas-background", color);
@@ -291,13 +291,13 @@ function RenderObsidianView(
       const color = element?.strokeColor
         ? (element.strokeColor.toLowerCase() === "transparent"
           ? "transparent"
-          : ea.getCM(element.strokeColor).alphaTo(opacity).stringHEX())
+          : ea.getCM(element.strokeColor).alphaTo(opacity).stringHEX({alpha: true}))
         : "transparent";
       canvasNode?.style.setProperty("--canvas-border", color);
       canvasNode?.style.setProperty("--canvas-color", color);
       //canvasNodeContainer?.style.setProperty("border-color", color);
     } else if(!(mdProps?.borderMatchElement ?? true)) {
-      const color = ea.getCM(mdProps.borderColor).alphaTo((mdProps.borderOpacity??100)/100).stringHEX();
+      const color = ea.getCM(mdProps.borderColor).alphaTo((mdProps.borderOpacity??100)/100).stringHEX({alpha: true});
       canvasNode?.style.setProperty("--canvas-border", color);
       canvasNode?.style.setProperty("--canvas-color", color);
       //canvasNodeContainer?.style.setProperty("border-color", color);
@@ -315,8 +315,16 @@ function RenderObsidianView(
     const canvasNode = containerRef.current;
     if(!canvasNode.hasClass("canvas-node")) return;
     setColors(canvasNode, element, mdProps, canvasColor);
+    console.log("Setting colors");
   }, [
-    mdProps,
+    mdProps?.useObsidianDefaults,
+    mdProps?.backgroundMatchCanvas,
+    mdProps?.backgroundMatchElement,
+    mdProps?.backgroundColor,
+    mdProps?.backgroundOpacity,
+    mdProps?.borderMatchElement,
+    mdProps?.borderColor,
+    mdProps?.borderOpacity,
     elementRef.current,
     containerRef.current,
     canvasColor,
@@ -395,7 +403,8 @@ function RenderObsidianView(
 
     const previousIsActive = isActiveRef.current;
     isActiveRef.current = (activeEmbeddable?.element.id === element.id) && (activeEmbeddable?.state === "active");
-
+    
+    const node = leafRef.current?.node as ObsidianCanvasNode;
     if (previousIsActive === isActiveRef.current) {
       return;
     }
@@ -414,15 +423,15 @@ function RenderObsidianView(
         isEditingRef.current = false;
         return;
       }  
-    } else if (leafRef.current?.node) {
+    } else if (node) {
       //Handle canvas node
-      if(view.plugin.settings.markdownNodeOneClickEditing && !containerRef.current?.hasClass("is-editing")) {
+      if(isActiveRef.current && view.plugin.settings.markdownNodeOneClickEditing && !containerRef.current?.hasClass("is-editing")) { //!node.isEditing
         const newTheme = getTheme(view, themeRef.current);
         containerRef.current?.addClasses(["is-editing", "is-focused"]);
-        view.canvasNodeFactory.startEditing(leafRef.current.node, newTheme);
+        view.canvasNodeFactory.startEditing(node, newTheme);
       } else {
         containerRef.current?.removeClasses(["is-editing", "is-focused"]);
-        view.canvasNodeFactory.stopEditing(leafRef.current.node);
+        view.canvasNodeFactory.stopEditing(node);
       }
     }
   }, [

src/dialogs/EmbeddableMDFileCustomDataSettingsComponent.ts

@@ -46,6 +46,16 @@ export class EmbeddalbeMDFileCustomDataSettingsComponent {
           );
       }
       contentEl.createEl("h4",{text: t("ES_BACKGROUND_HEAD")});
+      const descDiv = contentEl.createDiv({ cls: "excalidraw-setting-desc" });
+      descDiv.textContent = t("ES_BACKGROUND_DESC_INFO");
+
+      descDiv.addEventListener("click", () => {
+        if (descDiv.textContent === t("ES_BACKGROUND_DESC_INFO")) {
+          descDiv.textContent = t("ES_BACKGROUND_DESC_DETAIL");
+        } else {
+          descDiv.textContent = t("ES_BACKGROUND_DESC_INFO");
+        }
+      });
       
       let bgSetting: Setting;  
       let bgMatchElementToggle: ToggleComponent;

src/dialogs/ExcalidrawLoading.ts

@@ -1,11 +1,16 @@
-import { FileView, TextFileView, View, WorkspaceLeaf } from "obsidian";
+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 default class ExcalidrawLoading extends FileView {
+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.switchToeExcalidraw();
     this.displayLoadingText();
   }
 
@@ -14,13 +19,12 @@ export default class ExcalidrawLoading extends FileView {
     this.displayLoadingText();
   }
 
-  private async switchToeExcalidraw() {
-    await this.plugin.awaitInit();
+  public switchToeExcalidraw() {
     setExcalidrawView(this.leaf);
   }
   
   getViewType(): string {
-    return "excalidra-loading";
+    return VIEW_TYPE_EXCALIDRAW_LOADING;
   }
 
   getDisplayText() {

src/dialogs/FolderSuggester.ts

@@ -1,569 +0,0 @@
-import {
-  FuzzyMatch,
-  TFile,
-  BlockCache,
-  HeadingCache,
-  CachedMetadata,
-  TextComponent,
-  App,
-  TFolder,
-  FuzzySuggestModal,
-  SuggestModal,
-  Scope,
-} from "obsidian";
-import { createPopper, Instance as PopperInstance } from "@popperjs/core";
-
-class Suggester<T> {
-  owner: SuggestModal<T>;
-  items: T[];
-  suggestions: HTMLDivElement[];
-  selectedItem: number;
-  containerEl: HTMLElement;
-  constructor(owner: SuggestModal<T>, containerEl: HTMLElement, scope: Scope) {
-    this.containerEl = containerEl;
-    this.owner = owner;
-    containerEl.on(
-      "click",
-      ".suggestion-item",
-      this.onSuggestionClick.bind(this),
-    );
-    containerEl.on(
-      "mousemove",
-      ".suggestion-item",
-      this.onSuggestionMouseover.bind(this),
-    );
-
-    scope.register([], "ArrowUp", () => {
-      this.setSelectedItem(this.selectedItem - 1, true);
-      return false;
-    });
-
-    scope.register([], "ArrowDown", () => {
-      this.setSelectedItem(this.selectedItem + 1, true);
-      return false;
-    });
-
-    scope.register([], "Enter", (evt) => {
-      this.useSelectedItem(evt);
-      return false;
-    });
-
-    scope.register([], "Tab", (evt) => {
-      this.chooseSuggestion(evt);
-      return false;
-    });
-  }
-  chooseSuggestion(evt: KeyboardEvent) {
-    if (!this.items || !this.items.length) {
-      return;
-    }
-    const currentValue = this.items[this.selectedItem];
-    if (currentValue) {
-      this.owner.onChooseSuggestion(currentValue, evt);
-    }
-  }
-  onSuggestionClick(event: MouseEvent, el: HTMLDivElement): void {
-    event.preventDefault();
-    if (!this.suggestions || !this.suggestions.length) {
-      return;
-    }
-
-    const item = this.suggestions.indexOf(el);
-    this.setSelectedItem(item, false);
-    this.useSelectedItem(event);
-  }
-
-  onSuggestionMouseover(event: MouseEvent, el: HTMLDivElement): void {
-    if (!this.suggestions || !this.suggestions.length) {
-      return;
-    }
-    const item = this.suggestions.indexOf(el);
-    this.setSelectedItem(item, false);
-  }
-  empty() {
-    this.containerEl.empty();
-  }
-  setSuggestions(items: T[]) {
-    this.containerEl.empty();
-    const els: HTMLDivElement[] = [];
-
-    items.forEach((item) => {
-      const suggestionEl = this.containerEl.createDiv("suggestion-item");
-      this.owner.renderSuggestion(item, suggestionEl);
-      els.push(suggestionEl);
-    });
-    this.items = items;
-    this.suggestions = els;
-    this.setSelectedItem(0, false);
-  }
-  useSelectedItem(event: MouseEvent | KeyboardEvent) {
-    if (!this.items || !this.items.length) {
-      return;
-    }
-    const currentValue = this.items[this.selectedItem];
-    if (currentValue) {
-      this.owner.selectSuggestion(currentValue, event);
-    }
-  }
-  wrap(value: number, size: number): number {
-    return ((value % size) + size) % size;
-  }
-  setSelectedItem(index: number, scroll: boolean) {
-    const nIndex = this.wrap(index, this.suggestions.length);
-    const prev = this.suggestions[this.selectedItem];
-    const next = this.suggestions[nIndex];
-
-    if (prev) {
-      prev.removeClass("is-selected");
-    }
-    if (next) {
-      next.addClass("is-selected");
-    }
-
-    this.selectedItem = nIndex;
-
-    if (scroll) {
-      next.scrollIntoView(false);
-    }
-  }
-}
-
-export abstract class SuggestionModal<T> extends FuzzySuggestModal<T> {
-  items: T[] = [];
-  suggestions: HTMLDivElement[];
-  popper: WeakRef<PopperInstance>;
-  //@ts-ignore
-  scope: Scope = new Scope(this.app.scope);
-  suggester: Suggester<FuzzyMatch<T>>;
-  suggestEl: HTMLDivElement;
-  promptEl: HTMLDivElement;
-  emptyStateText: string = "No match found";
-  limit: number = 100;
-  shouldNotOpen: boolean;
-  constructor(app: App, inputEl: HTMLInputElement, items: T[]) {
-    super(app);
-    this.inputEl = inputEl;
-    this.items = items;
-
-    this.suggestEl = createDiv("suggestion-container");
-
-    this.contentEl = this.suggestEl.createDiv("suggestion");
-
-    this.suggester = new Suggester(this, this.contentEl, this.scope);
-
-    this.scope.register([], "Escape", this.onEscape.bind(this));
-
-    this.inputEl.addEventListener("input", this.onInputChanged.bind(this));
-    this.inputEl.addEventListener("focus", this.onFocus.bind(this));
-    this.inputEl.addEventListener("blur", this.close.bind(this));
-    this.suggestEl.on(
-      "mousedown",
-      ".suggestion-container",
-      (event: MouseEvent) => {
-        event.preventDefault();
-      },
-    );
-  }
-  empty() {
-    this.suggester.empty();
-  }
-  onInputChanged(): void {
-    if (this.shouldNotOpen) {
-      return;
-    }
-    const inputStr = this.modifyInput(this.inputEl.value);
-    const suggestions = this.getSuggestions(inputStr);
-    if (suggestions.length > 0) {
-      this.suggester.setSuggestions(suggestions.slice(0, this.limit));
-    } else {
-      this.onNoSuggestion();
-    }
-    this.open();
-  }
-  onFocus(): void {
-    this.shouldNotOpen = false;
-    this.onInputChanged();
-  }
-  modifyInput(input: string): string {
-    return input;
-  }
-  onNoSuggestion() {
-    this.empty();
-    this.renderSuggestion(null, this.contentEl.createDiv("suggestion-item"));
-  }
-  open(): void {
-    // TODO: Figure out a better way to do this. Idea from Periodic Notes plugin
-    this.app.keymap.pushScope(this.scope);
-
-    this.inputEl.ownerDocument.body.appendChild(this.suggestEl);
-    this.popper = new WeakRef(createPopper(this.inputEl, this.suggestEl, {
-      placement: "bottom-start",
-      modifiers: [
-        {
-          name: "offset",
-          options: {
-            offset: [0, 10],
-          },
-        },
-        {
-          name: "flip",
-          options: {
-            fallbackPlacements: ["top"],
-          },
-        },
-      ],
-    }));
-  }
-
-  onEscape(): void {
-    this.close();
-    this.shouldNotOpen = true;
-  }
-  close(): void {
-    // TODO: Figure out a better way to do this. Idea from Periodic Notes plugin
-    this.app.keymap.popScope(this.scope);
-
-    this.suggester.setSuggestions([]);
-    if (this.popper?.deref()) {
-      this.popper.deref().destroy();
-    }
-
-    this.inputEl.removeEventListener("input", this.onInputChanged.bind(this));
-    this.inputEl.removeEventListener("focus", this.onFocus.bind(this));
-    this.inputEl.removeEventListener("blur", this.close.bind(this));
-
-    this.suggestEl.detach(); 
-  }
-  createPrompt(prompts: HTMLSpanElement[]) {
-    if (!this.promptEl) {
-      this.promptEl = this.suggestEl.createDiv("prompt-instructions");
-    }
-    const prompt = this.promptEl.createDiv("prompt-instruction");
-    for (const p of prompts) {
-      prompt.appendChild(p);
-    }
-  }
-  abstract onChooseItem(item: T, evt: MouseEvent | KeyboardEvent): void;
-  abstract getItemText(arg: T): string;
-  abstract getItems(): T[];
-}
-
-export class PathSuggestionModal extends SuggestionModal<
-  TFile | BlockCache | HeadingCache
-> {
-  file: TFile;
-  files: TFile[];
-  text: TextComponent;
-  cache: CachedMetadata;
-  constructor(app: App, input: TextComponent, items: TFile[]) {
-    super(app, input.inputEl, items);
-    this.files = [...items];
-    this.text = input;
-    //this.getFile();
-
-    this.inputEl.addEventListener("input", this.getFile.bind(this));
-  }
-
-  getFile() {
-    const v = this.inputEl.value;
-    const file = this.app.metadataCache.getFirstLinkpathDest(
-      v.split(/[\^#]/).shift() || "",
-      "",
-    );
-    if (file == this.file) {
-      return;
-    }
-    this.file = file;
-    if (this.file) {
-      this.cache = this.app.metadataCache.getFileCache(this.file);
-    }
-    this.onInputChanged();
-  }
-  getItemText(item: TFile | HeadingCache | BlockCache) {
-    if (item instanceof TFile) {
-      return item.path;
-    }
-    if (Object.prototype.hasOwnProperty.call(item, "heading")) {
-      return (<HeadingCache>item).heading;
-    }
-    if (Object.prototype.hasOwnProperty.call(item, "id")) {
-      return (<BlockCache>item).id;
-    }
-  }
-  onChooseItem(item: TFile | HeadingCache | BlockCache) {
-    if (item instanceof TFile) {
-      this.text.setValue(item.basename);
-      this.file = item;
-      this.cache = this.app.metadataCache.getFileCache(this.file);
-    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
-      this.text.setValue(
-        `${this.file.basename}#${(<HeadingCache>item).heading}`,
-      );
-    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
-      this.text.setValue(`${this.file.basename}^${(<BlockCache>item).id}`);
-    }
-  }
-  selectSuggestion({ item }: FuzzyMatch<TFile | BlockCache | HeadingCache>) {
-    let link: string;
-    if (item instanceof TFile) {
-      link = item.basename;
-    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
-      link = `${this.file.basename}#${(<HeadingCache>item).heading}`;
-    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
-      link = `${this.file.basename}^${(<BlockCache>item).id}`;
-    }
-
-    this.text.setValue(link);
-    this.onClose();
-
-    this.close();
-  }
-  renderSuggestion(
-    result: FuzzyMatch<TFile | BlockCache | HeadingCache>,
-    el: HTMLElement,
-  ) {
-    const { item, match: matches } = result || {};
-    const content = el.createDiv({
-      cls: "suggestion-content",
-    });
-    if (!item) {
-      content.setText(this.emptyStateText);
-      content.parentElement.addClass("is-selected");
-      return;
-    }
-
-    if (item instanceof TFile) {
-      const pathLength = item.path.length - item.name.length;
-      const matchElements = matches.matches.map((m) => {
-        return createSpan("suggestion-highlight");
-      });
-      for (
-        let i = pathLength;
-        i < item.path.length - item.extension.length - 1;
-        i++
-      ) {
-        const match = matches.matches.find((m) => m[0] === i);
-        if (match) {
-          const element = matchElements[matches.matches.indexOf(match)];
-          content.appendChild(element);
-          element.appendText(item.path.substring(match[0], match[1]));
-
-          i += match[1] - match[0] - 1;
-          continue;
-        }
-
-        content.appendText(item.path[i]);
-      }
-      el.createDiv({
-        cls: "suggestion-note",
-        text: item.path,
-      });
-    } else if (Object.prototype.hasOwnProperty.call(item, "heading")) {
-      content.setText((<HeadingCache>item).heading);
-      content.prepend(
-        createSpan({
-          cls: "suggestion-flair",
-          text: `H${(<HeadingCache>item).level}`,
-        }),
-      );
-    } else if (Object.prototype.hasOwnProperty.call(item, "id")) {
-      content.setText((<BlockCache>item).id);
-    }
-  }
-  get headings() {
-    if (!this.file) {
-      return [];
-    }
-    if (!this.cache) {
-      this.cache = this.app.metadataCache.getFileCache(this.file);
-    }
-    return this.cache.headings || [];
-  }
-  get blocks() {
-    if (!this.file) {
-      return [];
-    }
-    if (!this.cache) {
-      this.cache = this.app.metadataCache.getFileCache(this.file);
-    }
-    return Object.values(this.cache.blocks || {}) || [];
-  }
-  getItems() {
-    const v = this.inputEl.value;
-    if (/#/.test(v)) {
-      this.modifyInput = (i) => i.split(/#/).pop();
-      return this.headings;
-    } else if (/\^/.test(v)) {
-      this.modifyInput = (i) => i.split(/\^/).pop();
-      return this.blocks;
-    }
-    return this.files;
-  }
-}
-
-export class FolderSuggestionModal extends SuggestionModal<TFolder> {
-  text: TextComponent;
-  cache: CachedMetadata;
-  folders: TFolder[];
-  folder: TFolder;
-  constructor(app: App, input: TextComponent, items: TFolder[]) {
-    super(app, input.inputEl, items);
-    this.folders = [...items];
-    this.text = input;
-
-    this.inputEl.addEventListener("input", () => this.getFolder());
-  }
-  getFolder() {
-    const v = this.inputEl.value;
-    const folder = this.app.vault.getAbstractFileByPath(v);
-    if (folder == this.folder) {
-      return;
-    }
-    if (!(folder instanceof TFolder)) {
-      return;
-    }
-    this.folder = folder;
-
-    this.onInputChanged();
-  }
-  getItemText(item: TFolder) {
-    return item.path;
-  }
-  onChooseItem(item: TFolder) {
-    this.text.setValue(item.path);
-    this.folder = item;
-  }
-  selectSuggestion({ item }: FuzzyMatch<TFolder>) {
-    const link = item.path;
-
-    this.text.setValue(link);
-    this.onClose();
-
-    this.close();
-  }
-  renderSuggestion(result: FuzzyMatch<TFolder>, el: HTMLElement) {
-    const { item, match: matches } = result || {};
-    const content = el.createDiv({
-      cls: "suggestion-content",
-    });
-    if (!item) {
-      content.setText(this.emptyStateText);
-      content.parentElement.addClass("is-selected");
-      return;
-    }
-
-    const pathLength = item.path.length - item.name.length;
-    const matchElements = matches.matches.map((m) => {
-      return createSpan("suggestion-highlight");
-    });
-    for (let i = pathLength; i < item.path.length; i++) {
-      const match = matches.matches.find((m) => m[0] === i);
-      if (match) {
-        const element = matchElements[matches.matches.indexOf(match)];
-        content.appendChild(element);
-        element.appendText(item.path.substring(match[0], match[1]));
-
-        i += match[1] - match[0] - 1;
-        continue;
-      }
-
-      content.appendText(item.path[i]);
-    }
-    el.createDiv({
-      cls: "suggestion-note",
-      text: item.path,
-    });
-  }
-
-  getItems() {
-    return this.folders;
-  }
-}
-
-export class FileSuggestionModal extends SuggestionModal<TFile> {
-  text: TextComponent;
-  cache: CachedMetadata;
-  files: TFile[];
-  file: TFile;
-  constructor(app: App, input: TextComponent, items: TFile[]) {
-    super(app, input.inputEl, items);
-    this.limit = 20;
-    this.files = [...items];
-    this.text = input;
-    this.inputEl.addEventListener("input", () => this.getFile());
-  }
-
-  getFile() {
-    const v = this.inputEl.value;
-    const file = this.app.vault.getAbstractFileByPath(v);
-    if (file === this.file) {
-      return;
-    }
-    if (!(file instanceof TFile)) {
-      return;
-    }
-    this.file = file;
-
-    this.onInputChanged();
-  }
-
-  getSelectedItem() {
-    return this.file;
-  }
-
-  getItemText(item: TFile) {
-    return item.path;
-  }
-
-  onChooseItem(item: TFile) {
-    this.file = item;
-    this.text.setValue(item.path);
-    this.text.onChanged();
-  }
-
-  selectSuggestion({ item }: FuzzyMatch<TFile>) {
-    this.file = item;
-    this.text.setValue(item.path);
-    this.onClose();
-    this.text.onChanged();
-    this.close();
-  }
-  
-  renderSuggestion(result: FuzzyMatch<TFile>, el: HTMLElement) {
-    const { item, match: matches } = result || {};
-    const content = el.createDiv({
-      cls: "suggestion-content",
-    });
-    if (!item) {
-      content.setText(this.emptyStateText);
-      content.parentElement.addClass("is-selected");
-      return;
-    }
-
-    const pathLength = item.path.length - item.name.length;
-    const matchElements = matches.matches.map((m) => {
-      return createSpan("suggestion-highlight");
-    });
-    for (let i = pathLength; i < item.path.length; i++) {
-      const match = matches.matches.find((m) => m[0] === i);
-      if (match) {
-        const element = matchElements[matches.matches.indexOf(match)];
-        content.appendChild(element);
-        element.appendText(item.path.substring(match[0], match[1]));
-
-        i += match[1] - match[0] - 1;
-        continue;
-      }
-
-      content.appendText(item.path[i]);
-    }
-    el.createDiv({
-      cls: "suggestion-note",
-      text: item.path,
-    });
-  }
-
-  getItems() {
-    return this.files;
-  }
-}

src/dialogs/InsertLinkDialog.ts

@@ -1,10 +1,12 @@
-import { App, FuzzySuggestModal, TFile } from "obsidian";
-import { REG_LINKINDEX_INVALIDCHARS } from "../constants/constants";
+import { FuzzyMatch, FuzzySuggestModal, setIcon } from "obsidian";
+import { AUDIO_TYPES, CODE_TYPES, ICON_NAME, IMAGE_TYPES, REG_LINKINDEX_INVALIDCHARS, VIDEO_TYPES } from "../constants/constants";
 import { t } from "../lang/helpers";
 import ExcalidrawPlugin from "src/main";
 import { getLink } from "src/utils/FileUtils";
+import { LinkSuggestion } from "src/types/types";
 
-export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
+
+export class InsertLinkDialog extends FuzzySuggestModal<LinkSuggestion> {
   private addText: Function;
   private drawingPath: string;
 
@@ -28,7 +30,7 @@ export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
     this.emptyStateText = t("NO_MATCH");
   }
 
-  getItems(): any[] {
+  getItems(): LinkSuggestion[] {
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/422
     return (
       this.app.metadataCache
@@ -39,11 +41,11 @@ export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
     );
   }
 
-  getItemText(item: any): string {
+  getItemText(item: LinkSuggestion): string {
     return item.path + (item.alias ? `|${item.alias}` : "");
   }
 
-  onChooseItem(item: any): void {
+  onChooseItem(item: LinkSuggestion): void {
     let filepath = item.path;
     if (item.file) {
       filepath = this.app.metadataCache.fileToLinktext(
@@ -56,6 +58,65 @@ export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
     this.addText(getLink(this.plugin,{embed: false, path: filepath, alias: item.alias}), filepath, item.alias);
   }
 
+  renderSuggestion(result: FuzzyMatch<LinkSuggestion>, itemEl: HTMLElement) {
+    const { item, match: matches } = result || {};
+    itemEl.addClass("mod-complex");
+    const contentEl = itemEl.createDiv("suggestion-content");
+    const auxEl = itemEl.createDiv("suggestion-aux");
+    const titleEl = contentEl.createDiv("suggestion-title");
+    const noteEl = contentEl.createDiv("suggestion-note");
+
+    if (!item) {
+      titleEl.setText(this.emptyStateText);
+      itemEl.addClass("is-selected");
+      return;
+    }
+
+    const path = item.file?.path ?? item.path;
+
+    const pathLength = path.length - (item.file?.name.length ?? 0);
+    const matchElements = matches.matches.map((m) => {
+      return createSpan("suggestion-highlight");
+    });
+    const itemText = this.getItemText(item);
+    for (let i = pathLength; i < itemText.length; i++) {
+      const match = matches.matches.find((m) => m[0] === i);
+      if (match) {
+        const element = matchElements[matches.matches.indexOf(match)];
+        titleEl.appendChild(element);
+        element.appendText(itemText.substring(match[0], match[1]));
+
+        i += match[1] - match[0] - 1;
+        continue;
+      }
+
+      titleEl.appendText(itemText[i]);
+    }
+    noteEl.setText(path);
+
+    if(!item.file) {
+      setIcon(auxEl, "ghost");
+    } else if(this.plugin.isExcalidrawFile(item.file)) {
+      setIcon(auxEl, ICON_NAME);
+    } else if (item.file.extension === "md") {
+      setIcon(auxEl, "square-pen");
+    } else if (IMAGE_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "image");
+    } else if (VIDEO_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "monitor-play");
+    } else if (AUDIO_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "file-audio");
+    } else if (CODE_TYPES.includes(item.file.extension)) {
+      setIcon(auxEl, "file-code");
+    } else if (item.file.extension === "canvas") {
+      setIcon(auxEl, "layout-dashboard");
+    } else if (item.file.extension === "pdf") {
+      setIcon(auxEl, "book-open-text");
+    } else {
+      auxEl.setText(item.file.extension);
+    }
+  }
+
   onClose(): void {
     window.setTimeout(()=>{
       this.addText = null
@@ -63,9 +124,19 @@ export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
     super.onClose();
   }
 
-  public start(drawingPath: string, addText: Function) {
+  private inLink: string;
+  onOpen(): void {
+    super.onOpen();
+    if(this.inLink) {
+      this.inputEl.value = this.inLink;
+      this.inputEl.dispatchEvent(new Event('input'));
+    }
+  }
+
+  public start(drawingPath: string, addText: Function, link?: string) {
     this.addText = addText;
     this.drawingPath = drawingPath;
+    this.inLink = link;
     this.open();
   }
 }

src/dialogs/InsertPDFModal.ts

@@ -3,7 +3,7 @@ import ExcalidrawView from "../ExcalidrawView";
 import ExcalidrawPlugin from "../main";
 import { getPDFDoc } from "src/utils/FileUtils";
 import {  Modal, Setting, TextComponent } from "obsidian";
-import { FileSuggestionModal } from "./FolderSuggester";
+import { FileSuggestionModal } from "../Components/Suggesters/FileSuggestionModal";
 import { getEA } from "src";
 import { ExcalidrawAutomate } from "src/ExcalidrawAutomate";
 import { ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/excalidraw/types";
@@ -206,7 +206,11 @@ export class InsertPDFModal extends Modal {
 
     const search = new TextComponent(ce);
     search.inputEl.style.width = "100%";
-    const suggester = new FileSuggestionModal(this.app, search,app.vault.getFiles().filter((f: TFile) => f.extension.toLowerCase() === "pdf"));
+    const suggester = new FileSuggestionModal(
+      this.app,
+      search,this.app.vault.getFiles().filter((f: TFile) => f.extension.toLowerCase() === "pdf"),
+      this.plugin
+    );
     search.onChange(async () => {
       const file = suggester.getSelectedItem();
       await setFile(file);

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/dialogs/UniversalInsertFileModal.ts

@@ -2,7 +2,7 @@ import { ButtonComponent, DropdownComponent, TFile, ToggleComponent } from "obsi
 import ExcalidrawView from "../ExcalidrawView";
 import ExcalidrawPlugin from "../main";
 import {  Modal, Setting, TextComponent } from "obsidian";
-import { FileSuggestionModal } from "./FolderSuggester";
+import { FileSuggestionModal } from "../Components/Suggesters/FileSuggestionModal";
 import { IMAGE_TYPES, sceneCoordsToViewportCoords, viewportCoordsToSceneCoords, MAX_IMAGE_SIZE, ANIMATED_IMAGE_TYPES, MD_EX_SECTIONS } from "src/constants/constants";
 import { insertEmbeddableToView, insertImageToView } from "src/utils/ExcalidrawViewUtils";
 import { getEA } from "src";
@@ -146,7 +146,9 @@ export class UniversalInsertFileModal extends Modal {
     const suggester = new FileSuggestionModal(
       this.app,
       search,
-      this.app.vault.getFiles().filter((f: TFile) => sections?.length > 0 || f!==this.view.file));
+      this.app.vault.getFiles().filter((f: TFile) => sections?.length > 0 || f!==this.view.file),
+      this.plugin
+    );
     search.onChange(() => {
       file = suggester.getSelectedItem();
       updateForm();  

src/lang/locale/en.ts

@@ -1,3 +1,4 @@
+import { FILE } from "dns";
 import {
   DEVICE,
   FRONTMATTER_KEYS,
@@ -6,8 +7,12 @@ import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
 const CJK_FONTS = "CJK Fonts";
+declare const PLUGIN_VERSION:string;
+
 // English
 export default {
+  // Sugester
+  SELECT_FILE_TO_INSERT: "Select a file to insert",
   // main.ts
   CONVERT_URL_TO_FILE: "Save image from URL to local file",
   UNZIP_CURRENT_FILE: "Decompress current Excalidraw file",
@@ -76,6 +81,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",
@@ -101,6 +107,9 @@ export default {
   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",
   FORCE_SAVE_ABORTED: "Force Save aborted because saving is in progress",
@@ -322,6 +331,11 @@ FILENAME_HEAD: "Filename",
     "i.e. you are not using Excalidraw markdown files.<br><b><u>Toggle ON:</u></b> filename ends with .excalidraw.md<br><b><u>Toggle OFF:</u></b> filename ends with .md",
   DISPLAY_HEAD: "Excalidraw appearance and behavior",
   DISPLAY_DESC: "In the 'appearance and behavior' section of Excalidraw Settings, you can fine-tune how Excalidraw appears and behaves. This includes options for dynamic styling, left-handed mode, matching Excalidraw and Obsidian themes, default modes, and more.",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_NAME: "Limit Obsidian Font Size to Editor Text",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_DESC:
+    "Obsidian's custom font size setting affects the entire interface, including Excalidraw and themes that depend on the default font size. " +
+    "Enabling this option restricts font size changes to editor text, which will improve the look of Excalidraw. " +
+    "If parts of the UI look incorrect after enabling, try turning this setting off.",  
   DYNAMICSTYLE_NAME: "Dynamic styling",
   DYNAMICSTYLE_DESC:
     "Change Excalidraw UI colors to match the canvas color",
@@ -355,6 +369,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>"+
@@ -895,6 +910,8 @@ FILENAME_HEAD: "Filename",
   ES_YOUTUBE_START_INVALID: "The YouTube Start Time is invalid. Please check the format and try again",
   ES_FILENAME_VISIBLE: "Filename Visible",
   ES_BACKGROUND_HEAD: "Embedded note background color",
+  ES_BACKGROUND_DESC_INFO: "Click here for more info on colors",
+  ES_BACKGROUND_DESC_DETAIL: "Background color affects only the preview mode of the markdown embeddable. When editing, it follows the Obsidian light/dark theme as set for the scene (via document property) or in plugin settings. The background color has two layers: the element background color (lower layer) and a color on top (upper layer). Selecting 'Match Element Background' means both layers follow the element color. Selecting 'Match Canvas' or a specific background color keeps the element background layer. Setting opacity (e.g., 50%) mixes the canvas or selected color with the element background color. To remove the element background layer, set the element color to transparent in Excalidraw's element properties editor. This makes only the upper layer effective.",
   ES_BACKGROUND_MATCH_ELEMENT: "Match Element Background Color",
   ES_BACKGROUND_MATCH_CANVAS: "Match Canvas Background Color",
   ES_BACKGROUND_COLOR: "Background Color",
@@ -954,4 +971,7 @@ FILENAME_HEAD: "Filename",
   IPM_GROUP_PAGES_DESC: "This will group all pages into a single group. This is recommended if you are locking the pages after import, because the group will be easier to unlock later rather than unlocking one by one.",
   IPM_SELECT_PDF: "Please select a PDF file",
 
+  //Utils.ts
+  UPDATE_AVAILABLE: `A newer version of Excalidraw is available in Community Plugins.\n\nYou are using ${PLUGIN_VERSION}.\nThe latest is`,
+  ERROR_PNG_TOO_LARGE: "Error exporting PNG - PNG too large, try a smaller resolution",
 };

src/lang/locale/zh-cn.ts

@@ -1,3 +1,4 @@
+import { FILE } from "dns";
 import {
   DEVICE,
   FRONTMATTER_KEYS,
@@ -6,8 +7,12 @@ import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/
 import { labelALT, labelCTRL, labelMETA, labelSHIFT } from "src/utils/ModifierkeyHelper";
 
 const CJK_FONTS = "CJK Fonts";
+declare const PLUGIN_VERSION:string;
+
 // 简体中文
 export default {
+  // Sugester
+  SELECT_FILE_TO_INSERT: "选择一个要插入的文件",
   // main.ts
   CONVERT_URL_TO_FILE: "从 URL 下载图像到本地",
   UNZIP_CURRENT_FILE: "解压当前 Excalidraw 文件",
@@ -76,6 +81,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: "将“背景笔记”卡片保存到文件",
@@ -101,6 +107,9 @@ export default {
   FONTS_LOADED : "Excalidraw: CJK 字体已加载" ,
   FONTS_LOAD_ERROR : "Excalidraw: 在资源文件夹下找不到 CJK 字体\n" ,
 
+  //Prompt.ts
+  SELECT_LINK_TO_OPEN: "选择要打开的链接",
+
   //ExcalidrawView.ts
   NO_SEARCH_RESULT: "在绘图中未找到匹配的元素",
   FORCE_SAVE_ABORTED: "自动保存被中止，因为文件正在保存中",
@@ -321,7 +330,12 @@ FILENAME_HEAD: "文件名",
     "该选项在兼容模式（即非 Excalidraw 专用 Markdown 文件）下不会生效。<br>" +
     "<b>开启：</b>使用 .excalidraw.md 作为扩展名。<br><b>关闭：</b>使用 .md 作为扩展名。",
   DISPLAY_HEAD: "界面 & 行为",
-  DISPLAY_DESC: "包括：左手模式，主题匹配，缩放，激光笔工具，修饰键等的设置。",
+  DISPLAY_DESC: "在 Excalidraw 设置的 '外观和行为' 部分，您可以微调 Excalidraw 的外观和行为。这包括动态样式、左手模式、匹配 Excalidraw 和 Obsidian 主题、默认模式等选项。",
+  OVERRIDE_OBSIDIAN_FONT_SIZE_NAME : "限制 Obsidian 字体大小为编辑器文本" ,
+  OVERRIDE_OBSIDIAN_FONT_SIZE_DESC :
+    "Obsidian 的自定义字体大小设置会影响整个界面，包括 Excalidraw 和依赖默认字体大小的主题。" +
+    "启用此选项将限制字体大小更改为编辑器文本，这将改善 Excalidraw 的外观。" +
+    "如果启用后发现界面的某些部分看起来不正确，请尝试关闭此设置。" ,
   DYNAMICSTYLE_NAME: "动态样式",
   DYNAMICSTYLE_DESC:
     "根据画布颜色自动调节 Excalidraw 界面颜色",
@@ -355,6 +369,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>"+
@@ -865,6 +880,7 @@ FILENAME_HEAD: "文件名",
         对此带来的不便，我深表歉意。
       </p>
     `,
+
   //ObsidianMenu.tsx
   GOTO_FULLSCREEN: "进入全屏模式",
   EXIT_FULLSCREEN: "退出全屏模式",
@@ -953,4 +969,7 @@ FILENAME_HEAD: "文件名",
   IPM_GROUP_PAGES_DESC: "这将把所有页面建立为一个单独的组。如果您在导入后锁定页面，建议使用此方法，因为这样可以更方便地解锁整个组，而不是逐个解锁。",
   IPM_SELECT_PDF: "请选择一个 PDF 文件",
 
-};
+  //Utils.ts
+  UPDATE_AVAILABLE: `Excalidraw 的新版本已在社区插件中可用。\n\n您正在使用 ${PLUGIN_VERSION}。\n最新版本是`,
+  ERROR_PNG_TOO_LARGE: "导出 PNG 时出错 - PNG 文件过大，请尝试较小的分辨率",
+};

src/menu/EmbeddableActionsMenu.tsx

@@ -127,7 +127,7 @@ export class EmbeddableMenu {
       blockID = nanoid();
       const fileContents = await app.vault.cachedRead(file);
       if(!fileContents) return;
-      await app.vault.modify(file, fileContents.slice(0, offset) + ` ^${blockID}` + fileContents.slice(offset));
+      await this.view.app.vault.modify(file, fileContents.slice(0, offset) + ` ^${blockID}` + fileContents.slice(offset));
       await sleep(200); //wait for cache to update
     }
     this.updateElement(`#^${blockID}`, element, file);
@@ -170,7 +170,6 @@ export class EmbeddableMenu {
 
   renderButtons(appState: AppState) {
     const view = this.view;
-    const app = view.app;
     const api = view?.excalidrawAPI as ExcalidrawImperativeAPI;
     if(!api) return null;
     if(!view.file) return null;

src/settings.ts

@@ -41,6 +41,7 @@ import { Rank } from "./menu/ActionIcons";
 import { TAG_AUTOEXPORT, TAG_MDREADINGMODE, TAG_PDFEXPORT } from "src/constants/constSettingsTags";
 import { HotkeyEditor } from "./dialogs/HotkeyEditor";
 import { getExcalidrawViews } from "./utils/ObsidianUtils";
+import de from "./lang/locale/de";
 
 export interface ExcalidrawSettings {
   folder: string;
@@ -76,6 +77,7 @@ export interface ExcalidrawSettings {
   previewMatchObsidianTheme: boolean;
   width: string;
   height: string;
+  overrideObsidianFontSize: boolean;
   dynamicStyling: DynamicStyle;
   isLeftHanded: boolean;
   iframeMatchExcalidrawTheme: boolean;
@@ -85,6 +87,7 @@ export interface ExcalidrawSettings {
   defaultMode: string;
   defaultPenMode: "never" | "mobile" | "always";
   penModeDoubleTapEraser: boolean;
+  penModeSingleFingerPanning: boolean;
   penModeCrosshairVisible: boolean;
   renderImageInMarkdownReadingMode: boolean,
   renderImageInHoverPreviewForMDNotes: boolean,
@@ -252,6 +255,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   previewMatchObsidianTheme: false,
   width: "400",
   height: "",
+  overrideObsidianFontSize: false,
   dynamicStyling: "colorful",
   isLeftHanded: false,
   iframeMatchExcalidrawTheme: true,
@@ -261,6 +265,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   defaultMode: "normal",
   defaultPenMode: "never",
   penModeDoubleTapEraser: true,
+  penModeSingleFingerPanning: true,
   penModeCrosshairVisible: true,
   renderImageInMarkdownReadingMode: false,
   renderImageInHoverPreviewForMDNotes: false,
@@ -514,6 +519,12 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
   }
 
   async hide() {
+    if(this.plugin.settings.overrideObsidianFontSize) {
+      document.documentElement.style.fontSize = "";
+    } else if(!document.documentElement.style.fontSize) {
+      document.documentElement.style.fontSize = getComputedStyle(document.body).getPropertyValue("--font-text-size");
+    }
+    
     this.plugin.settings.scriptFolderPath = normalizePath(
       this.plugin.settings.scriptFolderPath,
     );
@@ -1066,6 +1077,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"))
@@ -1150,6 +1172,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       cls: "excalidraw-setting-h3",
     });
     
+    new Setting(detailsEl)
+      .setName(t("OVERRIDE_OBSIDIAN_FONT_SIZE_NAME"))
+      .setDesc(fragWithHTML(t("OVERRIDE_OBSIDIAN_FONT_SIZE_DESC")))
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.overrideObsidianFontSize)
+          .onChange((value) => {
+            this.plugin.settings.overrideObsidianFontSize = value;
+            this.applySettingsUpdate();
+          }),
+      );
+
     new Setting(detailsEl)
       .setName(t("DYNAMICSTYLE_NAME"))
       .setDesc(fragWithHTML(t("DYNAMICSTYLE_DESC")))

src/types/types.d.ts

@@ -1,3 +1,4 @@
+import { TFile } from "obsidian";
 import { ExcalidrawAutomate } from "../ExcalidrawAutomate";
 import { ExcalidrawLib } from "../ExcalidrawLib";
 
@@ -33,6 +34,12 @@ export type DeviceType = {
 
 export type Point = [number, number];
 
+export type LinkSuggestion = {
+  file: TFile;
+  path: string;
+  alias?: string;
+}
+
 declare global {
   interface Window {
       ExcalidrawAutomate: ExcalidrawAutomate;

src/utils/CanvasNodeFactory.ts

@@ -82,51 +82,74 @@ export class CanvasNodeFactory {
     return node;
   }
 
-  public async startEditing(node: ObsidianCanvasNode, theme: string) {
-    if (!this.initialized || !node) return;
-    if (node.file === this.view.file) {
-      await this.view.setEmbeddableIsEditingSelf();
+  private async waitForEditor(node: ObsidianCanvasNode): Promise<HTMLElement | null> {
+    let counter = 0;
+    while (!node.child.editor?.containerEl?.parentElement?.parentElement && counter++ < 100) {
+      await new Promise(resolve => setTimeout(resolve, 25));
     }
-    node.startEditing();
-  
-    const obsidianTheme = isObsidianThemeDark() ? "theme-dark" : "theme-light";
-    if (obsidianTheme === theme) return;
-  
-    (async () => {
-      let counter = 0;
-      while (!node.child.editor?.containerEl?.parentElement?.parentElement && counter++ < 100) {
-        await sleep(25);
-      }
-      if (!node.child.editor?.containerEl?.parentElement?.parentElement) return;
-      node.child.editor.containerEl.parentElement.parentElement.classList.remove(obsidianTheme);
-      node.child.editor.containerEl.parentElement.parentElement.classList.add(theme);
-      
-      const nodeObserverFn: MutationCallback = (mutationsList) => {
-        for (const mutation of mutationsList) {
-          if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-            const targetElement = mutation.target as HTMLElement;
-            if (targetElement.classList.contains(obsidianTheme)) {
-              targetElement.classList.remove(obsidianTheme);
-              targetElement.classList.add(theme);
-            }
+    return node.child.editor?.containerEl?.parentElement?.parentElement;
+  }
+
+  private setupThemeObserver(editorEl: HTMLElement, obsidianTheme: string, theme: string) {
+    const nodeObserverFn: MutationCallback = (mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const targetElement = mutation.target as HTMLElement;
+          if (targetElement.classList.contains(obsidianTheme)) {
+            targetElement.classList.remove(obsidianTheme);
+            targetElement.classList.add(theme);
           }
         }
-      };
-      this.observer = DEBUGGING
-        ? new CustomMutationObserver(nodeObserverFn, "CanvasNodeFactory")
-        : new MutationObserver(nodeObserverFn);
-  
-      this.observer.observe(node.child.editor.containerEl.parentElement.parentElement, { attributes: true });
-    })();
-  } 
+      }
+    };
+
+    this.observer?.disconnect();
+    this.observer = DEBUGGING
+      ? new CustomMutationObserver(nodeObserverFn, "CanvasNodeFactory")
+      : new MutationObserver(nodeObserverFn);
+
+    this.observer.observe(editorEl, { attributes: true });
+  }
+
+  public async startEditing(node: ObsidianCanvasNode, theme: string) {
+    if (!this.initialized || !node) return;
+    
+    try {
+      if (node.file === this.view.file) {
+        await this.view.setEmbeddableIsEditingSelf();
+      }
+      node.startEditing();
+      node.isEditing = true;
+
+      const obsidianTheme = isObsidianThemeDark() ? "theme-dark" : "theme-light";
+      if (obsidianTheme === theme) return;
+
+      const editorEl = await this.waitForEditor(node);
+      if (!editorEl) return;
+
+      editorEl.classList.remove(obsidianTheme);
+      editorEl.classList.add(theme);
+      
+      this.setupThemeObserver(editorEl, obsidianTheme, theme);
+    } catch (error) {
+      console.error('Error starting edit:', error);
+      node.isEditing = false;
+    }
+  }
 
   public stopEditing(node: ObsidianCanvasNode) {
-    if(!this.initialized || !node) return;
-    if(!node.child.editMode) return;
-    if(node.file === this.view.file) {
-      this.view.clearEmbeddableIsEditingSelf();
+    if (!this.initialized || !node || !node.isEditing) return;
+    
+    try {
+      if (node.file === this.view.file) {
+        this.view.clearEmbeddableIsEditingSelf();
+      }
+      node.child.showPreview();
+      node.isEditing = false;
+      this.observer?.disconnect();
+    } catch (error) {
+      console.error('Error stopping edit:', error);
     }
-    node.child.showPreview();
   }
 
   removeNode(node: ObsidianCanvasNode) {

src/utils/DynamicStyling.ts

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

src/utils/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/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";
@@ -30,6 +30,8 @@ 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";
+import { t } from "src/lang/helpers";
 
 declare const PLUGIN_VERSION:string;
 declare var LZString: any;
@@ -76,7 +78,7 @@ export async function checkExcalidrawVersion() {
 
     if (isVersionNewerThanOther(latestVersion,PLUGIN_VERSION)) {
       new Notice(
-        `A newer version of Excalidraw is available in Community Plugins.\n\nYou are using ${PLUGIN_VERSION}.\nThe latest is ${latestVersion}`,
+        t("UPDATE_AVAILABLE") + ` ${latestVersion}`,
       );
     }
   } catch (e) {
@@ -219,15 +221,6 @@ export async function getFontDataURL (
     const split = dataURL.split(";base64,", 2);
     dataURL = `${split[0]};charset=utf-8;base64,${split[1]}`;
     fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}") format("${format}")}`;
-/*    const mimeType = f.extension.startsWith("woff")
-      ? "application/font-woff"
-      : "font/truetype";
-    fontName = name ?? f.basename;
-    dataURL = await getDataURL(ab, mimeType);
-    fontDef = ` @font-face {font-family: "${fontName}";src: url("${dataURL}")}`;
-     //format("${f.extension === "ttf" ? "truetype" : f.extension}");}`;
-    const split = fontDef.split(";base64,", 2);
-    fontDef = `${split[0]};charset=utf-8;base64,${split[1]}`;*/
   }
   return { fontDef, fontName, dataURL };
 };
@@ -374,7 +367,7 @@ export async function getPNG (
       }),
     });
   } catch (error) {
-    new Notice("Error exporting PNG - PNG too large, try a smaller resolution");
+    new Notice(t("ERROR_PNG_TOO_LARGE"));
     errorlog({ where: "Utils.getPNG", error });
     return null;
   }
@@ -428,14 +421,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
@@ -443,34 +436,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;         
           }
         }
       });
@@ -725,6 +765,8 @@ export function getPNGScale (plugin: ExcalidrawPlugin, file: TFile): number {
 };
 
 export function isVersionNewerThanOther (version: string, otherVersion: string): boolean {
+  if(!version || !otherVersion) return true;
+
   const v = version.match(/(\d*)\.(\d*)\.(\d*)/);
   const o = otherVersion.match(/(\d*)\.(\d*)\.(\d*)/);
   

styles.css

@@ -346,7 +346,7 @@ label.color-input-container > input {
   padding: 0;
 }
 
-.excalidraw-settings input:not([type="color"]) {
+.excalidraw-settings input[type="text"] {
   min-width: 10em;
 }
 
@@ -651,3 +651,17 @@ textarea.excalidraw-wysiwyg, .excalidraw input {
 .excalidraw .ToolIcon_type_button {
   color: var(--text-primary-color);
 }
+
+.excalidraw-setting-desc {
+  padding: 10px;
+  cursor: pointer;
+  background-color: var(--background-secondary);
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 5px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.excalidraw-setting-desc:hover {
+  background-color: var(--background-modifier-hover);
+  color: var(--text-accent);
+}