(fix) Fix writing images to clipboard on Linux platforms

Electron has a [long standing bug](electron/electron#8151) since v2 that doesn't let write image data from the renderer process on Linux platforms.

Writing data from rendere process works fine on Windows, but the code is moved to main process anyway to be careful.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-clippy",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A simple clipboard manager build on Electron",
   "license": "MIT",
   "repository": "ramlmn/electron-clippy",

src/constants.js

@@ -20,5 +20,7 @@ export const EVENT = {
   SETTINGS_UPDATE: 'settings-update', // From main -> renderer
   SETTINGS_CHANGE: 'settings-change', // From renderer -> main
   SETTINGS_HIDE: 'settings-hide',
-  SETTINGS_SHOW: 'settings-show'
+  SETTINGS_SHOW: 'settings-show',
+
+  COPY_TO_CLIPBOARD: 'copy-to-clipboard'
 };

src/main/main.js

@@ -2,7 +2,7 @@ import fs from 'fs';
 import url from 'url';
 import path from 'path';
 import {promisify} from 'util';
-import {app, Menu, BrowserWindow, ipcMain, globalShortcut, Tray} from 'electron';
+import {app, Menu, BrowserWindow, ipcMain, globalShortcut, Tray, clipboard, nativeImage} from 'electron';
 import AutoLaunch from 'auto-launch';
 import {EVENT} from '../constants';
 import ClipboardWatcher from './clipboard-watcher';
@@ -233,3 +233,16 @@ ipcMain.on(EVENT.ITEMS_SAVE, (event, items) => {
     persistItems(items);
   }
 });
+
+// Image data cannot be written from the renderer process on Linux platforms
+// So data is sent here instead to be copied to clipboard
+// Bug: https://github.com/electron/electron/issues/8151
+ipcMain.on(EVENT.COPY_TO_CLIPBOARD, (event, data) => {
+  if (typeof data === 'string') {
+    clipboard.write({
+      image: nativeImage.createFromDataURL(data)
+    });
+  } else {
+    clipboard.write(data);
+  }
+});

src/renderer/components/clippy-items/index.js

@@ -144,16 +144,16 @@ class ClippyItems extends ClippyElement {
 
     if (selected) {
       if (selected.type === 'image') {
-        const image = nativeImage.createFromDataURL(selected.buffer);
-
-        clipboard.write({image});
+        dispatch(EVENT.COPY_TO_CLIPBOARD, selected.buffer)
       } else {
-        clipboard.write({
+        dispatch(EVENT.COPY_TO_CLIPBOARD, {
           text: selected.text,
           html: selected.html,
           rtf: selected.rtf
         });
       }
+
+      this.handleNewItem(selected);
     }
   }
 

src/renderer/renderer.js

@@ -19,5 +19,6 @@ ipcRenderer.on(EVENT.SETTINGS_UPDATE, (event, settings) => dispatch(EVENT.SETTIN
 subscribe(EVENT.SETTINGS_CHANGE, settings => ipcRenderer.send(EVENT.SETTINGS_CHANGE, settings));
 
 subscribe(EVENT.APP_HIDE, () => ipcRenderer.send(EVENT.APP_HIDE));
+subscribe(EVENT.COPY_TO_CLIPBOARD, data => ipcRenderer.send(EVENT.COPY_TO_CLIPBOARD, data));
 
 window.addEventListener('load', () => ipcRenderer.send(EVENT.APP_INIT));