feat: add edit button to image right top

Author: YuxinZhaozyx

README.md

@@ -81,6 +81,8 @@ The label of a draw.io image block can be configured in the plugin settings.
 
 ## Changelog
 
++ v0.6.4
+    + Feature: Add edit button to image right top
 + v0.6.3
     + Add QQ group
 + v0.6.2

README_zh_CN.md

@@ -72,6 +72,8 @@
 
 ## 更新日志
 
++ v0.6.4
+    + 新增功能：图片右上角编辑按钮
 + v0.6.3
     + 增加QQ交流群
 + v0.6.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "siyuan-embed-drawio",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "type": "module",
   "description": "This is a plugin for siyuan",
   "author": "",

plugin.json

@@ -2,7 +2,7 @@
   "name": "siyuan-embed-drawio",
   "author": "Yuxin Zhao",
   "url": "https://github.com/YuxinZhaozyx/siyuan-embed-drawio",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "minAppVersion": "3.0.0",
   "disabledInPublish": true,
   "backends": [
@@ -16,8 +16,8 @@
     "zh_CN": "「嵌入式系列」draw.io"
   },
   "description": {
-    "default": "「Embed Series」Create editable SVG/PNG Image with draw.io",
-    "zh_CN": "「嵌入式系列」使用draw.io创建可编辑的SVG/PNG图像"
+    "default": "Create editable SVG/PNG Image with draw.io",
+    "zh_CN": "使用draw.io创建可编辑的SVG/PNG图像"
   },
   "readme": {
     "default": "README.md",

src/index.ts

@@ -73,7 +73,35 @@ export default class DrawioPlugin extends Plugin {
       if (imageElement) {
         const imageURL = imageElement.getAttribute("data-src");
         this.getDrawioImageInfo(imageURL, false).then((imageInfo) => {
-          this.updateAttrLabel(imageInfo, blockElement);
+          if (imageInfo) {
+            this.updateAttrLabel(imageInfo, blockElement);
+            const actionElement = blockElement.querySelector(".protyle-action") as HTMLElement;
+            if (actionElement) {
+              const editBtnElement = HTMLToElement(`<span aria-label="${this.i18n.editDrawio}" data-position="4north" class="ariaLabel protyle-icon"><svg><use xlink:href="#iconEdit"></use></svg></span>`);
+              editBtnElement.addEventListener("click", (event: PointerEvent) => {
+                event.preventDefault();
+                event.stopPropagation();
+                if (!this.isMobile && this.data[STORAGE_NAME].editWindow === 'tab') {
+                  this.openEditTab(imageInfo);
+                } else {
+                  this.openEditDialog(imageInfo);
+                }
+              });
+              actionElement.insertAdjacentElement('afterbegin', editBtnElement);
+              for (const child of actionElement.children) {
+                child.classList.toggle('protyle-icon--only', false);
+                child.classList.toggle('protyle-icon--first', false);
+                child.classList.toggle('protyle-icon--last', false);
+              }
+              if (actionElement.children.length == 1) {
+                actionElement.firstElementChild.classList.toggle('protyle-icon--only', true);
+              }
+              else if (actionElement.children.length > 1) {
+                actionElement.firstElementChild.classList.toggle('protyle-icon--first', true);
+                actionElement.lastElementChild.classList.toggle('protyle-icon--last', true);
+              }
+            }
+          }
         });
       }
     });