2.5.0-beta-1, changed to Excalidraw.com search

manifest-beta.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "2.4.2",
+	"version": "2.5.0-beta-1",
 	"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.4.2",
+  "version": "2.4.3",
   "minAppVersion": "1.1.6",
   "description": "An Obsidian plugin to edit and view Excalidraw drawings",
   "author": "Zsolt Viczian",

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.1-obsidian-48",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-50",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "@zsviczian/colormaster": "^1.2.2",

src/EmbeddedFileLoader.ts

@@ -593,6 +593,7 @@ export class EmbeddedFilesLoader {
     addFiles: (files: FileData[], isDark: boolean, final?: boolean) => void,
     depth:number,
     isThemeChange:boolean = false,
+    fileIDWhiteList?: Set<FileId>,
   ) {
     
     if(depth > 7) {
@@ -607,6 +608,7 @@ export class EmbeddedFilesLoader {
     let entry: IteratorResult<[FileId, EmbeddedFile]>;
     const files: FileData[] = [];
     while (!this.terminate && !(entry = entries.next()).done) {
+      if(fileIDWhiteList && !fileIDWhiteList.has(entry.value[0])) continue;
       const embeddedFile: EmbeddedFile = entry.value[1];
       if (!embeddedFile.isLoaded(this.isDark)) {
         //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"embedded Files are not loaded"});
@@ -653,6 +655,7 @@ export class EmbeddedFilesLoader {
     let equation;
     const equations = excalidrawData.getEquationEntries();
     while (!this.terminate && !(equation = equations.next()).done) {
+      if(fileIDWhiteList && !fileIDWhiteList.has(entry.value[0])) continue;
       if (!excalidrawData.getEquation(equation.value[0]).isLoaded) {
         const latex = equation.value[1].latex;
         const data = await tex2dataURL(latex);

src/ExcalidrawAutomate.ts

@@ -2963,27 +2963,6 @@ async function getTemplate(
     }
 
     let scene = excalidrawData.scene;
-    if (loadFiles) {
-      //debug({where:"getTemplate",template:file.name,loader:loader.uid});
-      await loader.loadSceneFiles(excalidrawData, (fileArray: FileData[]) => {
-        //, isDark: boolean) => {
-        if (!fileArray || fileArray.length === 0) {
-          return;
-        }
-        for (const f of fileArray) {
-          if (f.hasSVGwithBitmap) {
-            hasSVGwithBitmap = true;
-          }
-          excalidrawData.scene.files[f.id] = {
-            mimeType: f.mimeType,
-            id: f.id,
-            dataURL: f.dataURL,
-            created: f.created,
-          };
-        }
-        scene = scaleLoadedImage(excalidrawData.scene, fileArray).scene;
-      }, depth);
-    }
 
     let groupElements:ExcalidrawElement[] = scene.elements;
     if(filenameParts.hasGroupref) {
@@ -3010,8 +2989,41 @@ async function getTemplate(
         ));
     }
 
+    const fileIDWhiteList = new Set<FileId>();
+    groupElements.filter(el=>el.type==="image").forEach((el:ExcalidrawImageElement)=>fileIDWhiteList.add(el.fileId));
+
+    if (loadFiles) {
+      //debug({where:"getTemplate",template:file.name,loader:loader.uid});
+      await loader.loadSceneFiles(excalidrawData, (fileArray: FileData[]) => {
+        //, isDark: boolean) => {
+        if (!fileArray || fileArray.length === 0) {
+          return;
+        }
+        for (const f of fileArray) {
+          if (f.hasSVGwithBitmap) {
+            hasSVGwithBitmap = true;
+          }
+          excalidrawData.scene.files[f.id] = {
+            mimeType: f.mimeType,
+            id: f.id,
+            dataURL: f.dataURL,
+            created: f.created,
+          };
+        }
+        scene = scaleLoadedImage(excalidrawData.scene, fileArray).scene;
+      }, depth, false, fileIDWhiteList);
+    }
+
     excalidrawData.destroy();
     const filehead = data.substring(0, trimLocation);
+    let files:any = {};
+    const sceneFilesSize = Object.values(scene.files).length;
+    if (sceneFilesSize > 0) {
+      if(sceneFilesSize === fileIDWhiteList.size)
+      Object.values(scene.files).filter((f: any) => fileIDWhiteList.has(f.id)).forEach((f: any) => {
+        files[f.id] = f;
+      });
+    }
     return {
       elements: convertMarkdownLinksToObsidianURLs
         ? updateElementLinksToObsidianLinks({
@@ -3020,7 +3032,7 @@ async function getTemplate(
         }) : groupElements,
       appState: scene.appState,
       frontmatter: filehead.match(/^---\n.*\n---\n/ms)?.[0] ?? filehead,
-      files: scene.files,
+      files,
       hasSVGwithBitmap,
     };
   }

src/ExcalidrawView.ts

@@ -763,6 +763,8 @@ export default class ExcalidrawView extends TextFileView {
         this.clearPreventReloadTimer();
 
         this.semaphores.preventReload = preventReload;
+        await this.prepareGetViewData();
+
         //added this to avoid Electron crash when terminating a popout window and saving the drawing, need to check back
         //can likely be removed once this is resolved: https://github.com/electron/electron/issues/40607
         if(this.semaphores?.viewunload) {
@@ -774,10 +776,10 @@ export default class ExcalidrawView extends TextFileView {
             await plugin.app.vault.modify(file,d);
             await imageCache.addBAKToCache(file.path,d);                        
           },200)
+          this.semaphores.saving = false;
           return;
         }
 
-        await this.prepareGetViewData();
         await super.save();
         if (process.env.NODE_ENV === 'development') {
           if (DEBUGGING) {
@@ -1548,7 +1550,7 @@ export default class ExcalidrawView extends TextFileView {
 
       this.registerDomEvent(this.ownerWindow, "keydown", onKeyDown, false);
       this.registerDomEvent(this.ownerWindow, "keyup", onKeyUp, false);
-      this.registerDomEvent(this.contentEl, "mouseleave", onBlurOrLeave, false);
+      //this.registerDomEvent(this.contentEl, "mouseleave", onBlurOrLeave, false); //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2004
       this.registerDomEvent(this.ownerWindow, "blur", onBlurOrLeave, false);
     });
 
@@ -1787,7 +1789,7 @@ export default class ExcalidrawView extends TextFileView {
     //deliberately not calling super.onUnloadFile() to avoid autosave (saved in unload)
     (process.env.NODE_ENV === 'development') && DEBUGGING && debug(this.onUnloadFile,`ExcalidrawView.onUnloadFile, file:${this.file?.name}`);
     let counter = 0;
-    while (this.semaphores.saving) {
+    while (this.semaphores.saving && (counter++ < 200)) {
       await sleep(50); //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1988
       if(counter++ === 15) {
         new Notice(t("SAVE_IS_TAKING_LONG"));
@@ -1796,6 +1798,10 @@ export default class ExcalidrawView extends TextFileView {
         new Notice(t("SAVE_IS_TAKING_VERY_LONG"));
       }
     }
+    if(counter >= 200) {
+      new Notice("Unknown error, save is taking too long");
+      return;
+    }
   }
 
   private async forceSaveIfRequired():Promise<boolean> {

src/dialogs/Messages.ts

@@ -17,6 +17,17 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
 `,
+"2.4.3": `
+Check out the [Excalidraw Plugin's Community WIKI](https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/WIKI/Welcome+to+the+WIKI) and help with your content contribution.
+
+## Fixed
+- In some situations Excalidraw hangs indefinitely when opening a different file in the same tab
+- Can't exit arrow tool on phone [#2006](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2006)
+- Save is triggered every few seconds, leading to glitches in handwriting [#2004](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/2004)
+- Canvas shifts when editing text reaches right hand side of the canvas, especially at higher zoom values
+- Minor styling tweaks to adapt to Obsidian 1.7.1 new stylesheet, in particular to scale Excalidraw properly in line with Obsidian Appearance Setting Font-Size value.
+- Tweaked Compatibilty Setting description to mention Obsidian 1.7.1 Footnotes support
+`,
 "2.4.2": `
 This release addresses critical issues for all Obsidian Mobile users.
 

src/dialogs/ScriptInstallPrompt.ts

@@ -22,7 +22,7 @@ export class ScriptInstallPrompt extends Modal {
     searchBar.type = "text";
     searchBar.id = "search-bar";
     searchBar.placeholder = "Search...";
-    searchBar.style.width = "calc(100% - 120px)"; // space for the buttons and hit count
+    //searchBar.style.width = "calc(100% - 120px)"; // space for the buttons and hit count
 
     const nextButton = document.createElement("button");
     nextButton.textContent = "→";

src/dialogs/SuggesterInfo.ts

@@ -913,7 +913,7 @@ export const FRONTMATTER_KEYS_INFO: SuggesterInfo[] = [
     after: ": 1",
   },
   {
-    field: "excalidraw-export-embed-scene",
+    field: "export-embed-scene",
     code: null,
     desc: "If this key is present it will override the default excalidraw embed and export setting.",
     after: ": false",

src/lang/locale/en.ts

@@ -653,7 +653,7 @@ FILENAME_HEAD: "Filename",
     "Use this setting if for good reasons you have decided to ignore my recommendation and configured linting of Excalidraw files.<br> " +
     "The <code>## Text Elements</code> section is sensitive to empty lines. A common linting approach is to add an empty line after section headings. In case of Excalidraw this will break/change the first text element in your drawing. " +
     "To overcome this, you can enable this setting. When enabled, Excalidraw will add a dummy element to the beginning of <code>## Text Elements</code> that the linter can safely modify." ,
-  PRESERVE_TEXT_AFTER_DRAWING_NAME: "Zotero compatibility",
+  PRESERVE_TEXT_AFTER_DRAWING_NAME: "Zotero and Footnotes compatibility",
   PRESERVE_TEXT_AFTER_DRAWING_DESC: "Preserve text after the ## Drawing section of the markdown file. This may have a very slight performance impact when saving very large drawings.",
   DEBUGMODE_NAME: "Enable debug messages",
   DEBUGMODE_DESC: "I recommend restarting Obsidian after enabling/disabling this setting. This enable debug messages in the console. This is useful for troubleshooting issues. " +

src/main.ts

@@ -2851,14 +2851,7 @@ export default class ExcalidrawPlugin extends Plugin {
     // Force handlers to the front of the list
     overrideHandlers.forEach(() => scope.keys.unshift(scope.keys.pop()));
 
-    const handler_ctrlF = scope.register(["Mod"], "f", () => {
-      const view = this.app.workspace.getActiveViewOfType(ExcalidrawView);
-      if (view) {
-        search(view);
-        return true;
-      }
-      return false;
-    });
+    const handler_ctrlF = scope.register(["Mod"], "f", () => true);
     scope.keys.unshift(scope.keys.pop()); // Force our handler to the front of the list
     const overridSaveShortcut = (
       this.forceSaveCommand &&

src/menu/ToolsPanel.tsx

@@ -17,6 +17,7 @@ import { ExportDialog } from "src/dialogs/ExportDialog";
 import { openExternalLink } from "src/utils/ExcalidrawViewUtils";
 import { UniversalInsertFileModal } from "src/dialogs/UniversalInsertFileModal";
 import { DEBUGGING, debug } from "src/utils/DebugHelper";
+import { REM_VALUE } from "src/utils/StylesManager";
 
 declare const PLUGIN_VERSION:string;
 const dark = '<svg style="stroke:#ced4da;#212529;color:#ced4da;fill:#ced4da" ';
@@ -42,7 +43,7 @@ export type PanelState = {
   scriptIconMap: ScriptIconMap | null;
 };
 
-const TOOLS_PANEL_WIDTH = 228;
+const TOOLS_PANEL_WIDTH = () => REM_VALUE * 14.2;
 
 export class ToolsPanel extends React.Component<PanelProps, PanelState> {
   pos1: number = 0;
@@ -155,11 +156,11 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
       return {
         left:
           (this.containerRef.current.clientWidth -
-            TOOLS_PANEL_WIDTH -
-            (isMobileOrZen ? 0 : TOOLS_PANEL_WIDTH + 4)) /
+            TOOLS_PANEL_WIDTH() -
+            (isMobileOrZen ? 0 : TOOLS_PANEL_WIDTH() + 4)) /
             2 +
           this.containerRef.current.parentElement.offsetLeft +
-          (isMobileOrZen ? 0 : TOOLS_PANEL_WIDTH + 4),
+          (isMobileOrZen ? 0 : TOOLS_PANEL_WIDTH() + 4),
         top: 64 + this.containerRef.current.parentElement.offsetTop,
       };
     });

src/utils/StylesManager.ts

@@ -3,6 +3,8 @@ import ExcalidrawPlugin from "src/main";
 import { getAllWindowDocuments } from "./ObsidianUtils";
 import { DEBUGGING, debug } from "./DebugHelper";
 
+export let REM_VALUE = 16;
+
 const STYLE_VARIABLES = [
   "--background-modifier-cover",
   "--background-primary-alt",
@@ -77,6 +79,11 @@ export class StylesManager {
   }
 
   private async harvestStyles() {
+    REM_VALUE = parseInt(window.getComputedStyle(document.body).getPropertyValue('--font-text-size').trim());
+    if (isNaN(REM_VALUE)) {
+      REM_VALUE = 16;
+    }
+
     const body = document.body;
     const iframe:HTMLIFrameElement = document.createElement("iframe");
     iframe.style.display = "none";

styles.css

@@ -226,7 +226,7 @@ li[data-testid] {
 }
 
 .excalidraw .ToolIcon__icon img{
-  height: 1em;
+  height: 1rem;
 }
 
 .excalidraw-scriptengine-install tbody>tr>td>div>img {
@@ -394,23 +394,28 @@ div.excalidraw-draginfo {
 
 .modal-content.excalidraw-scriptengine-install .search-bar-wrapper {
   position: sticky;
-  top: 1em;
-  margin-right: 1em;
+  top: 1rem;
+  margin-right: 1rem;
   display: flex;
   align-items: center;
   gap: 5px;
   flex-wrap: nowrap;
   z-index: 10;
   background: var(--background-secondary);
-  padding: 0.5em;
+  padding: 0.5rem;
   border-bottom: 1px solid var(--background-modifier-border);
   float: right;
-  max-width: 28em;
+  max-width: 28rem;
+}
+
+div.search-bar-wrapper input {
+  margin-right: -0.5rem;
 }
 
 .modal-content.excalidraw-scriptengine-install .hit-count {
   margin-left: 0.5em;
   white-space: nowrap;
+  font-size: smaller;
 }
 
 .modal-content.excalidraw-scriptengine-install .active-highlight {