2.0.3

manifest.json

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

src/ExcalidrawData.ts

@@ -1235,11 +1235,8 @@ export class ExcalidrawData {
     const scene = this.scene as SceneDataWithFiles;
 
     //remove files and equations that no longer have a corresponding image element
-    const fileIds = (
-      scene.elements.filter(
-        (e) => e.type === "image",
-      ) as ExcalidrawImageElement[]
-    ).map((e) => e.fileId);
+    const images = scene.elements.filter((e) => e.type === "image") as ExcalidrawImageElement[];
+    const fileIds = (images).map((e) => e.fileId);
     this.files.forEach((value, key) => {
       if (!fileIds.contains(key)) {
         this.files.delete(key);
@@ -1261,22 +1258,26 @@ export class ExcalidrawData {
       }
     });
 
+    
     //check if there are any images that need to be processed in the new scene
     if (!scene.files || Object.keys(scene.files).length === 0) {
       return false;
     }
 
+
     //assing new fileId to duplicate equation and markdown files
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/601
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/593
     //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/297
     const processedIds = new Set<string>();
-    fileIds.forEach(fileId=>{
+    fileIds.forEach((fileId,idx)=>{
       if(processedIds.has(fileId)) {
         const file = this.getFile(fileId);
         const equation = this.getEquation(fileId);
         const mermaid = this.getMermaid(fileId);
 
+
+
         //images should have a single reference, but equations, and markdown embeds should have as many as instances of the file in the scene
         if(file && (file.isHyperLink || file.isLocalLink || (file.file && (file.file.extension !== "md" || this.plugin.isExcalidrawFile(file.file))))) {
           return;
@@ -1284,6 +1285,12 @@ export class ExcalidrawData {
         if(mermaid) {
           return;
         }
+
+        if(getMermaidText(images[idx])) {
+          this.setMermaid(fileId, {mermaid: getMermaidText(images[idx]), isLoaded: true});
+          return;
+        }
+
         const newId = fileid();
         (scene
           .elements

src/ExcalidrawView.ts

@@ -127,7 +127,7 @@ import { CanvasNodeFactory, ObsidianCanvasNode } from "./utils/CanvasNodeFactory
 import { EmbeddableMenu } from "./menu/EmbeddableActionsMenu";
 import { useDefaultExcalidrawFrame } from "./utils/CustomEmbeddableUtils";
 import { UniversalInsertFileModal } from "./dialogs/UniversalInsertFileModal";
-import { shouldRenderMermaid } from "./utils/MermaidUtils";
+import { getMermaidText, shouldRenderMermaid } from "./utils/MermaidUtils";
 import { nanoid } from "nanoid";
 
 declare const PLUGIN_VERSION:string;
@@ -1024,13 +1024,14 @@ export default class ExcalidrawView extends TextFileView {
         })();
         return;
       }
-      if (this.excalidrawData.hasMermaid(selectedImage.fileId)) {
+      if (this.excalidrawData.hasMermaid(selectedImage.fileId) || getMermaidText(imageElement)) {
         if(shouldRenderMermaid) {
           const api = this.excalidrawAPI as ExcalidrawImperativeAPI;
-          api.setActiveTool({type: "mermaid"});
+          api.updateScene({appState: { openDialog: "mermaid" }});
         }
         return;
       }
+      
       await this.save(false); //in case pasted images haven't been saved yet
       if (this.excalidrawData.hasFile(selectedImage.fileId)) {
         const ef = this.excalidrawData.getFile(selectedImage.fileId);

src/customEmbeddable.tsx

@@ -250,15 +250,22 @@ function RenderObsidianView(
           ? "transparent"
           : ea.getCM(element.backgroundColor).alphaTo(opacity).stringHEX())
         : "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 )) {
+      const opacity = (mdProps.backgroundOpacity??100)/100;
       const color = mdProps.backgroundMatchCanvas
         ? (canvasColor.toLowerCase() === "transparent"
           ? "transparent"
-          : ea.getCM(canvasColor).alphaTo((mdProps.backgroundOpacity??100)/100).stringHEX())
+          : ea.getCM(canvasColor).alphaTo(opacity).stringHEX())
         : ea.getCM(mdProps.backgroundColor).alphaTo((mdProps.backgroundOpacity??100)/100).stringHEX();
-      containerRef.current?.style.setProperty("--canvas-background", color);
+      
+      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);
     }
 
@@ -270,10 +277,12 @@ function RenderObsidianView(
           : ea.getCM(element.strokeColor).alphaTo(opacity).stringHEX())
         : "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();
       canvasNode?.style.setProperty("--canvas-border", color);
+      canvasNode?.style.setProperty("--canvas-color", color);
       canvasNodeContainer?.style.setProperty("border-color", color);
     }
   }

src/dialogs/Messages.ts

@@ -17,6 +17,13 @@ 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.0.3":`
+## Fixed
+- Mermaid to Excalidraw stopped working after installing the Obsidian 1.5.0 insider build. [#1450](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1450)
+- CTRL+Click on a Mermaid diagram did not open the Mermaid editor.
+- Embed color settings were not honored when the embedded markdown was focused on a section or block.
+- Scrollbars were visible when the embeddable was set to transparent (set background color to match element background, and set element background color to "transparent").
+`,
 "2.0.2":`
 <div class="excalidraw-videoWrapper"><div>
 <iframe src="https://www.youtube.com/embed/502swdqvZ2A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

src/lang/locale/en.ts

@@ -85,7 +85,7 @@ export default {
   OPEN_LINK: "Open selected text as link\n(SHIFT+CLICK to open in a new pane)",
   EXPORT_EXCALIDRAW: "Export to an .Excalidraw file",
   LINK_BUTTON_CLICK_NO_TEXT:
-    "Select a ImageElement, or select a TextElement that contains an internal or external link.\n",
+    "Select an ImageElement, or select a TextElement that contains an internal or external link.\n",
   FILENAME_INVALID_CHARS:
     'File name cannot contain any of the following characters: * " \\ < > : | ? #',
   FORCE_SAVE:

styles.css

@@ -477,6 +477,13 @@ hr.excalidraw-setting-hr {
   display: none;
 }
 
+.excalidraw__embeddable-container .canvas-node:not(.is-editing).transparent {
+  ::-webkit-scrollbar,
+  ::-webkit-scrollbar-horizontal {
+    display: none;
+  }
+}
+
 .canvas-node:not(.is-editing):has(.excalidraw-canvas-immersive) {
   ::-webkit-scrollbar,
   ::-webkit-scrollbar-horizontal {
@@ -488,4 +495,5 @@ hr.excalidraw-setting-hr {
 .canvas-node:not(.is-editing) .canvas-node-container:has(.excalidraw-canvas-immersive) {
   border:       unset;
   box-shadow:   unset;
-}
+}
+