README.md

@@ -4,20 +4,23 @@
 This plugin allows you to embed js-draw whiteboards anywhere in your SiYuan documents.  
 
 ## Usage instructions
-- Install the plugin from the marketplace. You can find it by searching for `js-draw`.
+1. Install the plugin
-- To edit an SVG image that is already embedded in your document:
+   - Grab a release from the [Releases page](https://git.massive.box/massivebox/siyuan-jsdraw-plugin/releases)
-  1. Right-click on the image, select "Plugin" > "Edit with js-draw" in the menu
+   - Unzip it in the folder `./data/plugins`, relatively to your SiYuan workspace.
-  2. The editor tab will open, edit your file as you like, then click the Save button and close the tab.
+   > The plugin is not yet available in the official marketplace. I will try to publish it there soon!
-  3. The image is updated, but SiYuan will still show the cached (old) image. This will be fixed in future releases, 
+2. Insert a drawing in your documents by typing `/Insert Drawing` in your document, and selecting the correct menu entry
-     please be patient. Until them, you can refresh the editor or change the image path.
+3. The whiteboard editor will open in a new tab. Draw as you like, then click the Save button. It will also add a
-- To add a new drawing to your document:
+   drawing block to your document.
-  1. Type `/Insert Drawing` in your document, and select the correct menu entry
+4. Click the Gear icon > Refresh to refresh the drawing block, if it's still displaying the old drawing.
-  2. The whiteboard editor will open in a new tab. Draw as you like, then click the Save button and close the tab.
+5. Click the drawing block to open the editor again.
-  3. Click the Gear icon > Refresh to refresh the drawing block.
-  4. Click the drawing block to open the editor again.
 
 ## Planned features
-Check out the [Projects](https://git.massive.box/massivebox/siyuan-jsdraw-plugin/projects) tab!
+- [ ] Auto-reload drawing blocks on drawing change
+- [ ] Rename whiteboards
+- [ ] Improve internationalization framework
+- [ ] Default background color and grid options
+- [ ] Respecting user theme for the editor
+- And more!
 
 ## Contributing
 Contributions are always welcome! Right now, I'm working on the core functionality and fixing bugs.

public/webapp/button.js

@@ -1,9 +1,6 @@
 function copyEditLink(fileID) {
     navigator.clipboard.writeText(getEditLink(fileID));
 }
-function copyImageLink(fileID) {
-    navigator.clipboard.writeText(`![Drawing](assets/${fileID}.svg)`);
-}
 
 function refreshPage() {
     window.location.reload();
@@ -23,7 +20,7 @@ function addButton(document, fileID) {
     popupMenu.innerHTML = `
                         <button onclick="refreshPage()">Refresh</button>
                         <button onclick="copyEditLink('${fileID}')">Copy Direct Edit Link</button>
-                        <button onclick="copyImageLink('${fileID}')">Copy Image Link</button>
+                        
                     `;
     document.body.appendChild(popupMenu);
 
@@ -34,7 +31,6 @@ function addButton(document, fileID) {
 
     document.body.addEventListener('mouseleave', () => {
         floatingButton.style.display = 'none';
-        popupMenu.style.display = 'none';
     });
 
     // Toggle popup menu on button click

src/helper.ts

@@ -55,36 +55,3 @@ export function getPreviewHTML(id: string): string {
     <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,11 +1,12 @@
 import {Plugin, Protyle} from 'siyuan';
-import {getPreviewHTML, loadIcons, getMenuHTML, generateSiyuanId, findImgSrc, extractFileID} from "@/helper";
+import {getPreviewHTML, loadIcons, getMenuHTML, generateSiyuanId} 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() {
@@ -24,21 +25,20 @@ 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.
+    }
+
+
+
 }