From 8dbc5925633fcf0930154348ebbde0027dcd4653 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Thu, 28 Dec 2023 00:02:09 +0100
Subject: [PATCH] add "copy image" context menu to also attachments, fixes
 #4514

---
 src/public/app/menus/image_context_menu.js   | 44 ++++++++++++++++++++
 src/public/app/services/content_renderer.js  |  3 ++
 src/public/app/widgets/type_widgets/image.js | 33 +--------------
 3 files changed, 49 insertions(+), 31 deletions(-)
 create mode 100644 src/public/app/menus/image_context_menu.js

diff --git a/src/public/app/menus/image_context_menu.js b/src/public/app/menus/image_context_menu.js
new file mode 100644
index 0000000000..3b2abdca8f
--- /dev/null
+++ b/src/public/app/menus/image_context_menu.js
@@ -0,0 +1,44 @@
+import utils from "../services/utils.js";
+import contextMenu from "./context_menu.js";
+import imageService from "../services/image.js";
+
+const PROP_NAME = "imageContextMenuInstalled";
+
+function setupContextMenu($image) {
+    if (!utils.isElectron() || $image.prop(PROP_NAME)) {
+        return;
+    }
+
+    $image.prop(PROP_NAME, true);
+    $image.on('contextmenu', e => {
+        e.preventDefault();
+
+        contextMenu.show({
+            x: e.pageX,
+            y: e.pageY,
+            items: [
+                {
+                    title: "Copy reference to clipboard",
+                    command: "copyImageReferenceToClipboard",
+                    uiIcon: "bx bx-empty"
+                },
+                {title: "Copy image to clipboard", command: "copyImageToClipboard", uiIcon: "bx bx-empty"},
+            ],
+            selectMenuItemHandler: ({command}) => {
+                if (command === 'copyImageReferenceToClipboard') {
+                    imageService.copyImageReferenceToClipboard($image);
+                } else if (command === 'copyImageToClipboard') {
+                    const webContents = utils.dynamicRequire('@electron/remote').getCurrentWebContents();
+                    utils.dynamicRequire('electron');
+                    webContents.copyImageAt(e.pageX, e.pageY);
+                } else {
+                    throw new Error(`Unrecognized command '${command}'`);
+                }
+            }
+        });
+    });
+}
+
+export default {
+    setupContextMenu
+};
diff --git a/src/public/app/services/content_renderer.js b/src/public/app/services/content_renderer.js
index 8be8ba1e84..6d090bc369 100644
--- a/src/public/app/services/content_renderer.js
+++ b/src/public/app/services/content_renderer.js
@@ -9,6 +9,7 @@ import linkService from "./link.js";
 import treeService from "./tree.js";
 import FNote from "../entities/fnote.js";
 import FAttachment from "../entities/fattachment.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
 
 let idCounter = 1;
 
@@ -148,6 +149,8 @@ function renderImage(entity, $renderedContent, options = {}) {
             });
         });
     }
+
+    imageContextMenuService.setupContextMenu($img);
 }
 
 function renderFile(entity, type, $renderedContent) {
diff --git a/src/public/app/widgets/type_widgets/image.js b/src/public/app/widgets/type_widgets/image.js
index 88fca2aa48..184023b034 100644
--- a/src/public/app/widgets/type_widgets/image.js
+++ b/src/public/app/widgets/type_widgets/image.js
@@ -1,7 +1,7 @@
 import utils from "../../services/utils.js";
 import TypeWidget from "./type_widget.js";
 import libraryLoader from "../../services/library_loader.js";
-import contextMenu from "../../menus/context_menu.js";
+import imageContextMenuService from "../../menus/image_context_menu.js";
 import imageService from "../../services/image.js";
 
 const TPL = `
@@ -55,36 +55,7 @@ class ImageTypeWidget extends TypeWidget {
             });
         });
 
-        if (utils.isElectron()) {
-            // for browser, we want to let the native menu
-            this.$imageView.on('contextmenu', e => {
-                e.preventDefault();
-
-                contextMenu.show({
-                    x: e.pageX,
-                    y: e.pageY,
-                    items: [
-                        {
-                            title: "Copy reference to clipboard",
-                            command: "copyImageReferenceToClipboard",
-                            uiIcon: "bx bx-empty"
-                        },
-                        {title: "Copy image to clipboard", command: "copyImageToClipboard", uiIcon: "bx bx-empty"},
-                    ],
-                    selectMenuItemHandler: ({command}) => {
-                        if (command === 'copyImageReferenceToClipboard') {
-                            imageService.copyImageReferenceToClipboard(this.$imageWrapper);
-                        } else if (command === 'copyImageToClipboard') {
-                            const webContents = utils.dynamicRequire('@electron/remote').getCurrentWebContents();
-                            utils.dynamicRequire('electron');
-                            webContents.copyImageAt(e.pageX, e.pageY);
-                        } else {
-                            throw new Error(`Unrecognized command '${command}'`);
-                        }
-                    }
-                });
-            });
-        }
+        imageContextMenuService.setupContextMenu(this.$imageView);
 
         super.doRender();
     }