2.2.5

manifest.json

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "obsidian-excalidraw-plugin",
-  "version": "2.0.14",
+  "version": "2.2.5",
   "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.1-obsidian-26",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-27",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "colormaster": "^1.2.1",

src/EmbeddedFileLoader.ts

@@ -38,6 +38,7 @@ import {
   LinkParts,
   svgToBase64,
   isMaskFile,
+  embedFontsInSVG,
 } from "./utils/Utils";
 import { ValueOf } from "./types";
 import { getMermaidImageElements, getMermaidText, shouldRenderMermaid } from "./utils/MermaidUtils";
@@ -390,7 +391,7 @@ export class EmbeddedFilesLoader {
     : replaceSVGColors(
         await createSVG(
           file?.path,
-          true,
+          false, //false
           exportSettings,
           this,
           forceTheme,
@@ -424,9 +425,20 @@ export class EmbeddedFilesLoader {
       hasSVGwithBitmap = true;
     }
     if(shouldUseCache && !Boolean(maybeSVG)) {
+      //cache SVG should have the width and height parameters and not the embedded font
+      //see svgWithFont below
       imageCache.addImageToCache(cacheKey,"", svg);
     }
-    const dURL = svgToBase64(svg.outerHTML) as DataURL;
+    const svgWithFont = embedFontsInSVG(svg, this.plugin);
+    if(!svgWithFont.hasAttribute("width") && svgWithFont.hasAttribute("viewBox")){
+      //2024.06.09
+      //this addresses backward compatibility issues where the cache does not have the width and height attributes
+      //this should be removed in the future
+      const vb = svgWithFont.getAttr("viewBox").split(" ");
+      Boolean(vb[2]) && svgWithFont.setAttribute("width", vb[2]);
+      Boolean(vb[3]) && svgWithFont.setAttribute("height", vb[3]);
+    }
+    const dURL = svgToBase64(svgWithFont.outerHTML) as DataURL;
     return {dataURL: dURL as DataURL, hasSVGwithBitmap};
   };
 

src/ExcalidrawView.ts

@@ -4655,7 +4655,10 @@ export default class ExcalidrawView extends TextFileView {
           ]);  
         }
 
-        if(img && img.embeddedFile && img.embeddedFile.mimeType === "image/svg+xml") {
+        if(
+          img && img.embeddedFile && img.embeddedFile.mimeType === "image/svg+xml" &&
+          (!img.embeddedFile.file || (img.embeddedFile.file && !this.plugin.isExcalidrawFile(img.embeddedFile.file)))
+         ) {
           contextMenuActions.push([
             renderContextMenuAction(
               t("IMPORT_SVG_CONTEXTMENU"),

src/MarkdownPostProcessor.ts

@@ -250,11 +250,12 @@ const _getSVGNative = async ({filenameParts,theme,cacheReady,containerElement,fi
     return null;
   }
 
+  //cache SVG should have the width and height parameters and not the embedded font
+  cacheReady && imageCache.addImageToCache(cacheKey,"", svg);
   svg = embedFontsInSVG(svg, plugin, true);
   svg.removeAttribute("width");
   svg.removeAttribute("height");
   containerElement.append(svg);
-  cacheReady && imageCache.addImageToCache(cacheKey,"", svg);
   return containerElement;
 }
 

src/dialogs/Messages.ts

@@ -17,6 +17,14 @@ 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.2.5": `
+## Fixed
+- Cursor visibility in dark mode [#1812](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1812)
+- SVG to Excalidraw now...
+  - converts elements inside the ${String.fromCharCode(96)}<switch>${String.fromCharCode(96)} tag, improving compatibility with SVGs from [The Noun Project](https://thenounproject.com/)
+  - sets visibility for all elements, preventing invisible converted images.
+- Cached images sometimes lost their font face and natural size when nested in an Excalidraw scene. This issue occurred when drawings were embedded in a markdown note (native SVG) and nested in a drawing simultaneously. Depending on the update and render sequence, these drawings sometimes appeared incorrectly in the Excalidraw scene.
+`,
 "2.2.4":`
 <div style="text-align: center;">
   <a data-tooltip-position="top" aria-label="https://youtube.com/shorts/zF1p2yfk4f4" rel="noopener" class="external-link" href="https://youtube.com/shorts/zF1p2yfk4f4" target="_blank">

src/svgToExcalidraw/parser.ts

@@ -30,6 +30,15 @@ export const svgToExcalidraw = (svgString: string): ConversionResult => {
 
       walk({ tw, scene, groups, root: svgDOM }, tw.nextNode());
 
+      const hasVisibleElements = Boolean(scene.elements.find((el)=>el.opacity !== 0));
+      if (!hasVisibleElements) {
+        scene.elements.forEach((el) => {
+          el.opacity = 100;
+        });
+      }
+      scene.elements.forEach((el) => {
+        if(el.opacity <= 1) el.opacity = 100;
+      });
       content = scene.elements; //scene.toExJSON();
     }
 

src/svgToExcalidraw/walker.ts

@@ -37,6 +37,7 @@ const SUPPORTED_TAGS = [
   "rect",
   "polyline",
   "polygon",
+  "switch",
 ];
 
 const nodeValidator = (node: Element): number => {
@@ -120,6 +121,18 @@ const walkers = {
     walk(args, args.tw.nextNode());
   },
 
+  switch: (args: WalkerArgs) => {
+    const nextArgs = {
+      ...args,
+      tw: createTreeWalker(args.tw.currentNode),
+      groups: [...args.groups, new Group(args.tw.currentNode as Element)],
+    };
+
+    walk(nextArgs, nextArgs.tw.nextNode());
+
+    walk(args, args.tw.nextSibling());
+  },
+
   g: (args: WalkerArgs) => {
     const nextArgs = {
       ...args,

src/utils/DynamicStyling.ts

@@ -115,7 +115,7 @@ export const setDynamicStyle = (
     [`--h3-color`]: str(text),
     [`--h4-color`]: str(text),
     [`color`]: str(text),
-    ['--excalidraw-caret-color']: str(text),
+    ['--excalidraw-caret-color']: str(isLightTheme ? text : cmBG()),
     [`--select-highlight-color`]: str(gray1()),
     [`--color-gray-80`]: str(isDark?text.darkerBy(40):text.lighterBy(40)), //frame
   };

src/utils/ImageCache.ts

@@ -321,6 +321,7 @@ class ImageCache {
     return this.getBackupData(filepath);
   }
 
+  //cache SVG should have the width and height parameters and not the embedded font
   public addImageToCache(key_: ImageKey, obsidianURL: string, image: Blob|SVGSVGElement): void {
     if (!this.isReady()) {
       return; // Database not initialized yet