before update iframe menu

src/customIFrame.tsx

@@ -147,13 +147,6 @@ function RenderObsidianView(
       containerRef.current.removeChild(containerRef.current.lastChild);
     }
 
-    if(isEditingRef.current) {
-      if(leafRef.current?.node) {
-        view.canvasNodeFactory.stopEditing(leafRef.current.node);
-      }
-      isEditingRef.current = false;
-    }
-
     const doc = view.ownerDocument;
     const rootSplit:WorkspaceSplit = new (WorkspaceSplit as ConstructableWorkspaceSplit)(app.workspace, "vertical");
     rootSplit.getRoot = () => app.workspace[doc === document ? 'rootSplit' : 'floatingSplit'];
@@ -170,20 +163,39 @@ function RenderObsidianView(
     if(subpath && view.canvasNodeFactory.isInitialized()) {
       leafRef.current.node = view.canvasNodeFactory.createFileNote(file, subpath, containerRef.current, element.id);
     } else {
-      containerRef.current.appendChild(rootSplit.containerEl);
-      const workspaceLeaf:HTMLDivElement = rootSplit.containerEl.querySelector("div.workspace-leaf");
-      if(workspaceLeaf) workspaceLeaf.style.borderRadius = `${radius}px`;
       (async () => {
         await leafRef.current.leaf.openFile(file, subpath ? { eState: { subpath }, state: {mode:"preview"} } : undefined);
-        if (leafRef.current.leaf.view?.getViewType() === "canvas") {
+        const viewType = leafRef.current.leaf.view?.getViewType();
+        if(viewType === "canvas") {
           leafRef.current.leaf.view.canvas?.setReadonly(true);
         }
+        if ((viewType === "markdown") && view.canvasNodeFactory.isInitialized()) {
+          //I haven't found a better way of deciding if an .md file has its own view (e.g., kanban) or not
+          //This runs only when the file is added, thus should not be a major performance issue
+          await leafRef.current.leaf.setViewState({state: {file:null}})
+          leafRef.current.node = view.canvasNodeFactory.createFileNote(file, subpath, containerRef.current, element.id);
+          console.log(`Reloaded element ${element.id} for ${file.path} with subpath of ${subpath}`);
+        } else {
+          const workspaceLeaf:HTMLDivElement = rootSplit.containerEl.querySelector("div.workspace-leaf");
+          if(workspaceLeaf) workspaceLeaf.style.borderRadius = `${radius}px`;
+          containerRef.current.appendChild(rootSplit.containerEl);
+        }
         patchMobileView(view);
       })();
     }
+    app.workspace.setActiveLeaf(view.leaf);
     return () => {}; //cleanup on unmount
-  }, [linkText, subpath, view, containerRef, app, radius, isEditingRef, leafRef]);
+  }, [linkText, subpath, view, containerRef, app, radius, leafRef]);
   
+  react.useEffect(() => {
+    if(isEditingRef.current) {
+      if(leafRef.current?.node) {
+        view.canvasNodeFactory.stopEditing(leafRef.current.node);
+      }
+      isEditingRef.current = false;
+    }
+  }, [isEditingRef.current, leafRef]);
+
 
   //--------------------------------------------------------------------------------
   //Switch to edit mode when markdown view is clicked
@@ -208,9 +220,6 @@ function RenderObsidianView(
           return;
         }
         leafRef.current.leaf.view.setMode(modes['source']);
-        //@ts-ignore
-        window.al = leafRef.current.leaf;
-        app.workspace.setActiveLeaf(leafRef.current.leaf);
         isEditingRef.current = true;
         patchMobileView(view);
       } else if (leafRef.current?.node) {
@@ -247,7 +256,6 @@ function RenderObsidianView(
         //@ts-ignore
         leafRef.current.leaf.view.setMode(modes["preview"]);
         isEditingRef.current = false;
-        app.workspace.setActiveLeaf(view.leaf);
         return;
       }  
     } else if (leafRef.current?.node) {

src/menu/IFrameActionsMenu.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import ExcalidrawView from "../ExcalidrawView";
 import { ExcalidrawIFrameElement } from "@zsviczian/excalidraw/types/element/types";
 import { AppState, ExcalidrawImperativeAPI } from "@zsviczian/excalidraw/types/types";
-import clsx from "clsx";
 import { ActionButton } from "./ActionButton";
 import { ICONS } from "./ActionIcons";
 import { t } from "src/lang/helpers";
@@ -12,7 +11,7 @@ import { REG_BLOCK_REF_CLEAN, ROOTELEMENTSIZE, nanoid, sceneCoordsToViewportCoor
 import { ExcalidrawAutomate } from "src/ExcalidrawAutomate";
 import { getEA } from "src";
 import { REGEX_LINK, REG_LINKINDEX_HYPERLINK } from "src/ExcalidrawData";
-import { errorlog } from "src/utils/Utils";
+import { errorlog, rotatePoint } from "src/utils/Utils";
 import { processLinkText, useDefaultExcalidrawFrame } from "src/utils/CustomIFrameUtils";
 
 export class IFrameMenu {
@@ -66,7 +65,6 @@ export class IFrameMenu {
         const { x, y } = sceneCoordsToViewportCoords( { sceneX: element.x, sceneY: element.y }, appState);
         const top = `${y-2.5*ROOTELEMENTSIZE-appState.offsetTop}px`;
         const left = `${x-appState.offsetLeft}px`;
-        const isDark = appState?.theme === "dark";
         return (
           <div
             ref={this.containerRef}
@@ -168,21 +166,13 @@ export class IFrameMenu {
       const { x, y } = sceneCoordsToViewportCoords( { sceneX: element.x, sceneY: element.y }, appState);
       const top = `${y-2.5*ROOTELEMENTSIZE-appState.offsetTop}px`;
       const left = `${x-appState.offsetLeft}px`;
-      const isDark = appState?.theme === "dark";
       return (
         <div
           ref={this.containerRef}
-          className={clsx("excalidraw", {
-            "theme--dark": isDark,
-          })}
+          className="iframe-menu"
           style={{
             top,
             left,
-            width: "fit-content",
-            height: "100%",
-            position: "fixed",
-            display: "block",
-            zIndex: 10000,
           }}
         >  
           <div

src/utils/CanvasNodeFactory.ts

@@ -62,6 +62,7 @@ export class CanvasNodeFactory {
 
   public createFileNote(file: TFile, subpath: string, containerEl: HTMLDivElement, elementId: string): ObsidianCanvasNode {
     if(!this.initialized) return;
+    subpath = subpath ?? "";
     if(this.nodes.has(elementId)) {
       this.canvas.removeNode(this.nodes.get(elementId));
       this.nodes.delete(elementId);