feat: show drawio label and page counts

Author: YuxinZhaozyx

README.md

@@ -51,6 +51,8 @@ Click the menu button in the top-right corner of the image. If the block is reco
 
 ## Changelog
 
++ v0.2.0
+    + Feature: show draw.io image label and page counts
 + v0.1.6
     + Fix: load cache image mistakely
 + v0.1.5

README_zh_CN.md

@@ -50,6 +50,8 @@
 
 ## 更新日志
 
++ v0.2.0
+    + 新增功能：draw.io图像右上侧显示标签和页数
 + v0.1.6
     + 修复缺陷：错误地加载到浏览器缓存图像
 + v0.1.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "siyuan-embed-drawio",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "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.1.6",
+  "version": "0.2.0",
   "minAppVersion": "3.3.0",
   "disabledInPublish": true,
   "backends": [

src/index.ts

@@ -36,12 +36,23 @@ export default class DrawioPlugin extends Plugin {
   public platform: SyFrontendTypes
   public readonly version = version
 
+  private _mutationObserver;
   private _openMenuImageHandler;
   private _globalKeyDownHandler;
 
   async onload() {
     this.initMetaInfo();
 
+    this._mutationObserver = this.setAddImageBlockMuatationObserver(document.body, (blockElement: HTMLElement) => {
+      const imageElement = blockElement.querySelector("img") as HTMLImageElement;
+      if (imageElement) {
+        const imageURL = imageElement.getAttribute("data-src");
+        this.getDrawioImageInfo(imageURL).then((imageInfo) => {
+          this.updateAttrLabel(imageInfo, blockElement);
+        });
+      }
+    });
+
     this.protyleSlash = [{
       filter: ["drawio", "draw.io"],
       id: "drawio",
@@ -61,6 +72,7 @@ export default class DrawioPlugin extends Plugin {
   }
 
   onunload() {
+    if (this._mutationObserver) this._mutationObserver.disconnect();
     if (this._openMenuImageHandler) this.eventBus.off("open-menu-image", this._openMenuImageHandler);
     if (this._globalKeyDownHandler) document.documentElement.removeEventListener("keydown", this._globalKeyDownHandler);
   }
@@ -85,6 +97,38 @@ export default class DrawioPlugin extends Plugin {
     }
   }
 
+  public setAddImageBlockMuatationObserver(element: HTMLElement, callback: (blockElement: HTMLElement) => void): MutationObserver {
+    const mutationObserver = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE) {
+              const addedElement = node as HTMLElement;
+              if (addedElement.matches("div[data-type='NodeParagraph']")) {
+                if (addedElement.querySelector(".img[data-type='img'] img")) {
+                  callback(addedElement as HTMLElement);
+                }
+              } else {
+                addedElement.querySelectorAll("div[data-type='NodeParagraph']").forEach((blockElement: HTMLElement) => {
+                  if (blockElement.querySelector(".img[data-type='img'] img")) {
+                    callback(blockElement);
+                  }
+                })
+              }
+            }
+          });
+        }
+      }
+    });
+
+    mutationObserver.observe(element, {
+      childList: true,
+      subtree: true
+    });
+
+    return mutationObserver;
+  }
+
   public async getDrawioImageInfo(imageURL: string): Promise<DrawioImageInfo | null> {
     const imageURLRegex = /^assets\/.+\.svg$/;
     if (!imageURLRegex.test(imageURL)) return null;
@@ -151,6 +195,25 @@ export default class DrawioPlugin extends Plugin {
     fetchPost("/api/file/putFile", formData, callback);
   }
 
+  public updateAttrLabel(imageInfo: DrawioImageInfo, blockElement: HTMLElement) {
+    if (!imageInfo) return;
+
+    const attrElement = blockElement.querySelector(".protyle-attr") as HTMLDivElement;
+    if (attrElement) {
+      const pageCount = (imageInfo.data.match(/name=&quot;/g) || []).length;
+      const labelHTML = `<span>draw.io${pageCount > 1 ? `:${pageCount}` : ''}</span>`;
+      let labelElement = attrElement.querySelector(".label--embed-drawio") as HTMLDivElement;
+      if (labelElement) {
+        labelElement.innerHTML = labelHTML;
+      } else {
+        labelElement = document.createElement("div");
+        labelElement.classList.add("label--embed-drawio");
+        labelElement.innerHTML = labelHTML;
+        attrElement.prepend(labelElement);
+      }
+    }
+  }
+
   private openMenuImageHandler({ detail }) {
     const selectedElement = detail.element;
     const imageElement = selectedElement.querySelector("img") as HTMLImageElement;
@@ -245,6 +308,10 @@ export default class DrawioPlugin extends Plugin {
           fetch(imageInfo.imageURL, { cache: 'reload' }).then(() => {
             document.querySelectorAll(`img[data-src='${imageInfo.imageURL}']`).forEach(imageElement => {
               (imageElement as HTMLImageElement).src = imageInfo.imageURL;
+              const blockElement = imageElement.closest("div[data-type='NodeParagraph']") as HTMLElement;
+              if (blockElement) {
+                this.updateAttrLabel(imageInfo, blockElement);
+              }
             });
           });
         });