added a context menu for image to copy, #1954

src/public/app/services/context_menu.js

@@ -76,6 +76,10 @@ class ContextMenu {
 
     addItems($parent, items) {
         for (const item of items) {
+            if (!item) {
+                continue;
+            }
+
             if (item.title === '----') {
                 $parent.append($("<div>").addClass("dropdown-divider"));
             } else {

src/public/app/widgets/ribbon_widgets/image_properties.js

@@ -28,7 +28,7 @@ const TPL = `
 
         <button class="image-open btn btn-sm btn-primary" type="button">Open</button>
 
-        <button class="image-copy-to-clipboard btn btn-sm btn-primary" type="button">Copy to clipboard</button>
+        <button class="image-copy-reference-to-clipboard btn btn-sm btn-primary" type="button">Copy reference to clipboard</button>
 
         <button class="image-upload-new-revision btn btn-sm btn-primary" type="button">Upload new revision</button>
     </div>
@@ -61,7 +61,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
-        this.$copyToClipboardButton = this.$widget.find(".image-copy-to-clipboard");
+        this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard");
         this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
         this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
         this.$fileName = this.$widget.find(".image-filename");
@@ -74,7 +74,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$imageDownloadButton = this.$widget.find(".image-download");
         this.$imageDownloadButton.on('click', () => openService.downloadFileNote(this.noteId));
 
-        this.$copyToClipboardButton.on('click', () => this.triggerEvent(`copyImageToClipboard`, {ntxId: this.noteContext.ntxId}));
+        this.$copyReferenceToClipboardButton.on('click', () => this.triggerEvent(`copyImageReferenceToClipboard`, {ntxId: this.noteContext.ntxId}));
 
         this.$uploadNewRevisionButton.on("click", () => {
             this.$uploadNewRevisionInput.trigger("click");
@@ -121,7 +121,5 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         this.$fileName.text(attributeMap.originalFileName || "?");
         this.$fileSize.text(noteComplement.contentLength + " bytes");
         this.$fileType.text(note.mime);
-
-        const imageHash = utils.randomString(10);
     }
 }

src/public/app/widgets/type_widgets/image.js

@@ -2,6 +2,7 @@ import utils from "../../services/utils.js";
 import toastService from "../../services/toast.js";
 import TypeWidget from "./type_widget.js";
 import libraryLoader from "../../services/library_loader.js";
+import contextMenu from "../../services/context_menu.js";
 
 const TPL = `
 <div class="note-detail-image note-detail-printable">
@@ -54,6 +55,37 @@ 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') {
+                            this.copyImageReferenceToClipboard();
+                        } 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}`);
+                        }
+                    }
+                });
+            });
+        }
+
         super.doRender();
     }
 
@@ -61,11 +93,15 @@ class ImageTypeWidget extends TypeWidget {
         this.$imageView.prop("src", `api/images/${note.noteId}/${note.title}`);
     }
 
-    copyImageToClipboardEvent({ntxId}) {
+    copyImageReferenceToClipboardEvent({ntxId}) {
         if (!this.isNoteContext(ntxId)) {
             return;
         }
 
+        this.copyImageReferenceToClipboard();
+    }
+
+    copyImageReferenceToClipboard() {
         this.$imageWrapper.attr('contenteditable','true');
 
         try {