Electron: Allowing opening and saving resource images

ElectronClient/app/gui/NoteText.jsx

@@ -16,6 +16,7 @@ const Menu = bridge().Menu;
 const MenuItem = bridge().MenuItem;
 const { shim } = require('lib/shim.js');
 const eventManager = require('../eventManager');
+const fs = require('fs-extra');
 
 require('brace/mode/markdown');
 // https://ace.c9.io/build/kitchen-sink.html
@@ -264,7 +265,7 @@ class NoteTextComponent extends React.Component {
 		shared.showMetadata_onPress(this);
 	}
 
-	webview_ipcMessage(event) {
+	async webview_ipcMessage(event) {
 		const msg = event.channel ? event.channel : '';
 		const args = event.args;
 		const arg0 = args && args.length >= 1 ? args[0] : null;
@@ -286,6 +287,32 @@ class NoteTextComponent extends React.Component {
 		} else if (msg === 'percentScroll') {
 			this.ignoreNextEditorScroll_ = true;
 			this.setEditorPercentScroll(arg0);
+		} else if (msg === 'contextMenu') {
+			const itemType = arg0 && arg0.type;
+
+			const menu = new Menu()
+
+			if (itemType === 'image') {
+				const resource = await Resource.load(arg0.resourceId);
+				const resourcePath = Resource.fullPath(resource);
+
+				menu.append(new MenuItem({label: _('Open...'), click: async () => {
+					bridge().openExternal(resourcePath);
+				}}));
+
+				menu.append(new MenuItem({label: _('Save as...'), click: async () => {
+					const filePath = bridge().showSaveDialog({
+						defaultPath: resource.filename ? resource.filename : resource.title,
+					});
+					if (!filePath) return;
+					await fs.copy(resourcePath, filePath);
+				}}));
+			} else {
+				reg.logger().error('Unhandled item type: ' + itemType);
+				return;
+			}
+
+			menu.popup(bridge().window());
 		} else if (msg.indexOf('joplin://') === 0) {
 			const resourceId = msg.substr('joplin://'.length);
 			Resource.load(resourceId).then((resource) => {

ElectronClient/app/gui/note-viewer/index.html

@@ -180,6 +180,16 @@
 		ipcRenderer.sendToHost('percentScroll', percent);
 	});
 
+	document.addEventListener('contextmenu', function(event) {
+		const element = event.target;
+		if (element && element.getAttribute('data-resource-id')) {
+			ipcRenderer.sendToHost('contextMenu', {
+				type: element.getAttribute('src') ? 'image' : 'link',
+				resourceId: element.getAttribute('data-resource-id'),
+			});
+		}
+	});
+
 	// Disable drag and drop otherwise it's possible to drop a URL
 	// on it and it will open in the view as a website.
 	document.addEventListener('drop', function(e) {

ReactNativeClient/lib/MdToHtml.js

@@ -117,7 +117,7 @@ class MdToHtml {
 		if (mime == 'image/png' || mime == 'image/jpg' || mime == 'image/jpeg' || mime == 'image/gif') {
 			let src = './' + Resource.filename(resource);
 			if (this.resourceBaseUrl_ !== null) src = this.resourceBaseUrl_ + src;
-			let output = '<img title="' + htmlentities(title) + '" src="' + src + '"/>';
+			let output = '<img data-resource-id="' + resource.id + '" title="' + htmlentities(title) + '" src="' + src + '"/>';
 			return output;
 		}
 		

ReactNativeClient/lib/components/shared/note-screen-shared.js

@@ -30,7 +30,6 @@ shared.saveNoteButton_press = async function(comp) {
 		options.fields = BaseModel.diffObjectsFields(comp.state.lastSavedNote, note);
 	}
 
-
 	const hasAutoTitle = comp.state.newAndNoTitleChangeNoteId || (isNew && !note.title);
 	if (hasAutoTitle) {
 		note.title = Note.defaultTitle(note);