Offer to edit images

Any SVG image in assets/ can now be edited with js-draw. It won't reload automatically (yet)

src/helper.ts

@@ -54,4 +54,37 @@ export function getPreviewHTML(id: string): string {
     return `
     <iframe src="${EMBED_PATH + id}&antiCache=0"></iframe>
     `
-}
+}
+
+// given a tag (such as a div) containing an image as a child at any level, return the src of the image
+export function findImgSrc(element: HTMLElement): string | null {
+    // Base case: if current element is an image
+    if (element.tagName === 'IMG') {
+        const fullSrc = (element as HTMLImageElement).src;
+        // Extract the path after host:port using URL API
+        const url = new URL(fullSrc);
+        return url.pathname.startsWith('/assets/')
+            ? url.pathname.substring(1) // Remove leading slash
+            : null;
+    }
+
+    // Recursively check children
+    if (element.children) {
+        for (const child of Array.from(element.children)) {
+            const src = findImgSrc(child as HTMLElement);
+            if (src) return src;
+        }
+    }
+
+    return null;
+}
+
+export function extractFileID(imgSrc: string | null): string | null {
+    if (!imgSrc) return null;
+
+    const [pathPart] = imgSrc.split('?');
+    // Match pattern: assets/{fileID}.svg
+    const match = pathPart.match(/^assets\/([^\/]+)\.svg$/i);
+
+    return match?.[1] || null;
+}

src/index.ts

@@ -1,12 +1,11 @@
 import {Plugin, Protyle} from 'siyuan';
-import {getPreviewHTML, loadIcons, getMenuHTML, generateSiyuanId} from "@/helper";
+import {getPreviewHTML, loadIcons, getMenuHTML, generateSiyuanId, findImgSrc, extractFileID} from "@/helper";
 import {createEditor, openEditorTab} from "@/editorTab";
 
 export default class DrawJSPlugin extends Plugin {
     onload() {
 
         loadIcons(this);
-        //const id = Math.random().toString(36).substring(7);
         this.addTab({
             'type': "whiteboard",
             init() {
@@ -25,20 +24,21 @@ export default class DrawJSPlugin extends Plugin {
             }
         }];
 
+        this.eventBus.on("open-menu-image", (e: any) => {
+            const fileID = extractFileID(findImgSrc(e.detail.element));
+            if(fileID === null) {
+                return;
+            }
+            console.log("got ID" + fileID);
+            e.detail.menu.addItem({
+                icon: "iconDraw",
+                label: "Edit with js-draw",
+                click: () => {
+                    openEditorTab(this, fileID);
+                }
+            })
+        })
+
     }
 
-    onLayoutReady() {
-        // This function is automatically called when the layout is loaded.
-    }
-
-    onunload() {
-        // This function is automatically called when the plugin is disabled.
-    }
-
-    uninstall() {
-        // This function is automatically called when the plugin is uninstalled.
-    }
-
-
-
 }