Add a context menu in reading mode (#33)

* add context menu on reading mode

* Addressing comments

* type resolveFileUrl

---------

Co-authored-by: Shyam <[email protected]>
Co-authored-by: Jeremy Valentine <[email protected]>

Author: 3 people

.gitignore

@@ -21,3 +21,4 @@ webpack.dev.js
 main.js.LICENSE.txt
 
 .env
+.vscode

src/main.ts

@@ -7,6 +7,7 @@ import {
     FileSystemAdapter,
     FuzzySuggestModal,
     MarkdownRenderer,
+    Menu,
     Plugin,
     PluginSettingTab,
     sanitizeHTMLToDom,
@@ -59,6 +60,7 @@ declare module "obsidian" {
         config: {
             theme?: "obsidian" | "moonstone";
         };
+        resolveFileUrl(path: string): TFile;
     }
     interface Plugin {
         _loaded: boolean;
@@ -317,7 +319,6 @@ class ImageWindowSettingTab extends PluginSettingTab {
                         await this.parent.saveSettings();
                     })
             );
-
         this.buildWindows(this.containerEl.createDiv());
     }
     buildWindows(el: HTMLElement) {
@@ -474,6 +475,42 @@ export default class ImageWindow extends Plugin {
             })
         );
 
+        this.registerDomEvent(document, "contextmenu", (event: MouseEvent) => {
+            const target = event.target as HTMLElement;
+            if (target.localName !== "img") return;
+
+            const imgPath = (target as HTMLImageElement).currentSrc;
+            const file = this.app.vault.resolveFileUrl(imgPath);
+
+            if (!(file instanceof TFile)) return;
+            const menu = new Menu();
+            menu.addItem((item) => {
+                item.setTitle("Open in new window")
+                    .setIcon("open-elsewhere-glyph")
+                    .onClick(async () => {
+                        this.defaultWindow.loadFile(file);
+                    });
+            });
+
+            for (const [name, record] of Object.entries(
+                this.settings.windows
+            )) {
+                if (name === DEFAULT_WINDOW_NAME) continue;
+                menu.addItem((item) => {
+                    item.setTitle(`Open in window '${name}'`)
+                        .setIcon("open-elsewhere-glyph")
+                        .onClick(async () => {
+                            const namedWindow = this.windows.get(record.id);
+                            if (namedWindow !== undefined) {
+                                namedWindow.loadFile(file);
+                            }
+                        });
+                });
+            }
+
+            menu.showAtPosition({ x: event.pageX, y: event.pageY });
+        });
+
         this.addCommand({
             id: "open-image",
             name: "Open image in new window",