feat: lightbox

Author: YuxinZhaozyx

README.md

@@ -30,27 +30,53 @@ This plugin serves as the third plugin in the **Embed Series**, aiming to provid
 - [x] Support export to PDF
 - [x] Support for mobile devices
 - [x] Support dark mode
+- [x] Lightbox
 
 > If you have additional feature requests or suggestions, feel free to [open an issue on GitHub](https://github.com/YuxinZhaozyx/siyuan-embed-drawio/issues) or [post in the SiYuan community](https://ld246.com/article/1762744532030) to request support for additional packages.
 
 ## Effects
 
+Edit:
+
 ![image.png](https://b3logfile.com/file/2025/11/image-r5KMPJt.png)
 
+Lightbox:
+
+![image.png](https://b3logfile.com/file/2025/11/image-HcmEJ0P.png)
+
 ## Usage Guide
 
-**Create a draw.io Image:**  
+**Create a draw.io Image:**
+
 Type `/drawio` in the editor to create a new draw.io image.
 
-**Edit a draw.io Image:**  
+**Edit a draw.io Image:**
+
 Click the menu button in the top-right corner of the image. If the block is recognized as a valid draw.io image, an `Edit draw.io` option will appear. Click it to open the editor.
 
+**Open draw.io Lightbox:**
+
+Click the menu button in the top-right corner of the image. If the block is recognized as a valid draw.io image, an `draw.io lightbox` option will appear. Click it to open the lightbox.
+
 **Migrating from other sources:**
+
 + Method 1: Simply export your diagram as an SVG from any draw.io platform with the "Include a copy of my diagram" option enabled, then drag the resulting SVG file into SiYuan.
 + Method 2: Copy all content from any draw.io platform, type `/drawio` in the editor, and paste the copied content into the pop-up draw.io window.
 
+**Disable draw.io label:**
+
+Add CSS Snippet:
+
+```css
+.protyle-attr .label--embed-drawio {
+  display: none !important;
+}
+```
+
 ## Changelog
 
++ v0.2.1
+    + Feature: lightbox
 + v0.2.0
     + Feature: show draw.io image label and page counts
 + v0.1.6

README_zh_CN.md

@@ -24,8 +24,14 @@
 
 ## 使用效果
 
+编辑：
+
 ![image.png](https://b3logfile.com/file/2025/11/image-r5KMPJt.png)
 
+灯箱：
+
+![image.png](https://b3logfile.com/file/2025/11/image-HcmEJ0P.png)
+
 ## 功能
 
 - [x] 无网络离线使用
@@ -34,22 +40,35 @@
 - [x] 支持导出PDF
 - [x] 支持移动端编辑
 - [x] 图像支持暗黑模式
+- [x] 灯箱
 
 > 如有更多需求/建议欢迎[在GitHub仓库中提issue](https://github.com/YuxinZhaozyx/siyuan-embed-drawio/issues)或[在思源笔记社区中发帖](https://ld246.com/article/1762744532030)
 
 ## 使用指南
 
 **创建draw.io图像：** 在编辑器中输入 `/drawio` 命令即可创建新draw.io图像。
 
-**编辑draw.io图像：** 点击图像右上角的菜单按钮，当图像被识别为合法的draw.io图像时，菜单中会显示 `编辑draw.io` 的选项，点击即可打开编辑窗口。
+**编辑draw.io图像：** 右键/点击图像右上角的菜单按钮，当图像被识别为合法的draw.io图像时，菜单中会显示 `编辑draw.io` 的选项，点击即可打开编辑窗口。
+
+**查看draw.io灯箱：** 右键/点击图像右上角的菜单按钮，当图像被识别为合法的draw.io图像时，菜单中会显示 `draw.io 灯箱` 的选项，点击即可打开灯箱窗口。
 
 **从其他来源迁移：** 
 
 + 方案1：只需要在任意draw.io平台导出SVG图像时勾选 `包含绘图副本` 选项，再把SVG图像拖入思源笔记中即可，不用担心以后没法再迁移，这个SVG图像也是可以导入到任意draw.io再次编辑的。
 + 方案2：在任意draw.io平台内复制全部内容，在思源笔记中输入 `/drawio` 命令创建新draw.io图像，然后将复制的内容粘贴进弹出的draw.io窗口中即可。
 
+**移除draw.io标签:** 添加下列代码片段：
+
+```css
+.protyle-attr .label--embed-drawio {
+  display: none !important;
+}
+```
+
 ## 更新日志
 
++ v0.2.1
+    + 新增功能：灯箱
 + v0.2.0
     + 新增功能：draw.io图像右上侧显示标签和页数
 + v0.1.6

package.json

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

src/i18n/en_US.json

@@ -1,3 +1,4 @@
 {
-  "editDrawio": "Edit draw.io"
+  "editDrawio": "Edit draw.io",
+  "drawioLightbox": "draw.io Lightbox"
 }

src/i18n/zh_CN.json

@@ -1,3 +1,4 @@
 {
-  "editDrawio": "编辑 draw.io"
+  "editDrawio": "编辑 draw.io",
+  "drawioLightbox": "draw.io 灯箱"
 }

src/index.scss

@@ -1,4 +1,5 @@
-.drawio-edit-dialog {
+.drawio-edit-dialog,
+.drawio-lightbox-dialog {
     flex: 1;
     display: flex;
     flex-direction: column;

src/index.ts

@@ -228,7 +228,16 @@ export default class DrawioPlugin extends Plugin {
           click: () => {
             this.openEditDialog(imageInfo);
           }
-        })
+        });
+        window.siyuan.menus.menu.addItem({
+          id: "drawio-lightbox",
+          icon: 'iconImage',
+          label: `${this.i18n.drawioLightbox}`,
+          index: 1,
+          click: () => {
+            this.openLightboxDialog(imageInfo);
+          }
+        });
       }
     })
   }
@@ -358,4 +367,73 @@ export default class DrawioPlugin extends Plugin {
     });
   }
 
+  public openLightboxDialog(imageInfo: DrawioImageInfo) {
+    const lightboxDialogHTML = `
+<div class="drawio-lightbox-dialog">
+    <div class="edit-dialog-header resize__move"></div>
+    <div class="edit-dialog-container">
+        <div class="edit-dialog-editor">
+            <iframe src="/plugins/siyuan-embed-drawio/draw/index.html?proto=json&embed=1${this.isMobile?"&ui=min":""}&lang=${window.siyuan.config.lang.split('_')[0]}&lightbox=1"></iframe>
+        </div>
+        <div class="fn__hr--b"></div>
+    </div>
+</div>
+    `;
+
+    const dialogDestroyCallbacks = [];
+
+    const dialog = new Dialog({
+      content: lightboxDialogHTML,
+      width: this.isMobile ? "92vw" : "90vw",
+      height: "80vh",
+      hideCloseIcon: this.isMobile,
+      destroyCallback: () => {
+        dialogDestroyCallbacks.forEach(callback => callback());
+      },
+    });
+
+    const iframe = dialog.element.querySelector("iframe");
+    iframe.focus();
+
+    const postMessage = (message: any) => {
+      if (!iframe.contentWindow) return;
+      iframe.contentWindow.postMessage(JSON.stringify(message), '*');
+    };
+
+    const onInit = (message: any) => {
+      postMessage({
+        action: "load",
+        autosave: 0,
+        modified: 'unsavedChanges',
+        title: this.isMobile ? '' : imageInfo.imageURL,
+        xml: imageInfo.data,
+      });
+    }
+
+    const messageEventHandler = (event) => {
+      if (event.data && event.data.length > 0)
+      {
+        try
+        {
+          var message = JSON.parse(event.data);
+          if (message != null)
+          {
+            // console.log(message.event);
+            if (message.event == "init") {
+              onInit(message);
+            }
+          }
+        }
+        catch (err)
+        {
+          console.error(err);
+        }
+      }
+    };
+
+    window.addEventListener("message", messageEventHandler);
+    dialogDestroyCallbacks.push(() => {
+      window.removeEventListener("message", messageEventHandler);
+    });
+  }
 }