diff --git a/src/public/app/services/context_menu.js b/src/public/app/services/context_menu.js index d2256962b..853dac23e 100644 --- a/src/public/app/services/context_menu.js +++ b/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($("
").addClass("dropdown-divider")); } else { diff --git a/src/public/app/widgets/ribbon_widgets/image_properties.js b/src/public/app/widgets/ribbon_widgets/image_properties.js index cc30e214f..f59f45787 100644 --- a/src/public/app/widgets/ribbon_widgets/image_properties.js +++ b/src/public/app/widgets/ribbon_widgets/image_properties.js @@ -28,7 +28,7 @@ const TPL = ` - +
@@ -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); } } diff --git a/src/public/app/widgets/type_widgets/image.js b/src/public/app/widgets/type_widgets/image.js index c2283b6ae..db78f8ef1 100644 --- a/src/public/app/widgets/type_widgets/image.js +++ b/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 = `
@@ -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 {