From ed2fe16f45c96bb95376e4bab0912eccded8ef53 Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Wed, 16 May 2018 18:34:07 -0300 Subject: [PATCH] Add right click context menu on all text inputs. --- src/renderer/index.js | 3 ++ src/renderer/util/contextMenu.js | 65 ++++++++++++++++++++++++++++++++ 2 files changed, 68 insertions(+) create mode 100644 src/renderer/util/contextMenu.js diff --git a/src/renderer/index.js b/src/renderer/index.js index c82db3287..fe0b9e695 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -16,6 +16,7 @@ import 'scss/all.scss'; import store from 'store'; import app from './app'; import analytics from './analytics'; +import getMenu from './util/contextMenu'; const { autoUpdater } = remote.require('electron-updater'); @@ -95,6 +96,8 @@ document.addEventListener('click', event => { } }); +document.addEventListener('contextmenu', getMenu); + const init = () => { autoUpdater.on('update-downloaded', () => { app.store.dispatch(doAutoUpdate()); diff --git a/src/renderer/util/contextMenu.js b/src/renderer/util/contextMenu.js new file mode 100644 index 000000000..0348423bf --- /dev/null +++ b/src/renderer/util/contextMenu.js @@ -0,0 +1,65 @@ +import { clipboard, remote } from 'electron'; +import isDev from 'electron-is-dev'; + +function textInputTemplate(target) { + const somethingSelected = target.selectionStart < target.selectionEnd; + const hasValue = target.value.length > 0; + + // Native Electron selectAll role does not work + function selectAll() { + target.selectionStart = 0; + target.selectionEnd = target.value.length + 1; + } + + const template = [ + { label: 'Cut', accelerator: 'CmdOrCtrl+X', role: 'cut', enabled: somethingSelected }, + { label: 'Copy', accelerator: 'CmdOrCtrl+C', role: 'copy', enabled: somethingSelected }, + { + label: 'Paste', + accelerator: 'CmdOrCtrl+V', + role: 'paste', + enabled: clipboard.readText().length > 0, + }, + { + label: 'Select All', + accelerator: 'CmdOrCtrl+A', + role: 'selectAll', + enabled: hasValue, + click: selectAll, + }, + ]; + + return template; +} + +function getTemplate(target) { + const { type } = target; + if (target.matches('input') && (type === 'text' || type === 'number')) { + return textInputTemplate(target); + } + return []; +} + +export default event => { + event.preventDefault(); + const { target } = event; + const template = getTemplate(target); + if (isDev) { + const { screenX, screenY } = event; + const separator = { type: 'separator' }; + const developmentTemplateAddition = [ + { + label: 'Inspect element', + accelerator: 'CmdOrCtrl+Shift+I', + click: () => { + remote.getCurrentWindow().inspectElement(screenX, screenY); + }, + }, + ]; + if (template.length > 0) { + template.push(separator); + } + template.push(...developmentTemplateAddition); + } + remote.Menu.buildFromTemplate(template).popup(); +};