Atajos de teclado: Shortcut en Electron.js

Los shortcuts en Electron.js —también llamados atajos de teclado, accelerators o directamente hotkeys— son otras características muy ligadas a los Menús en Electron.js que permiten ejecutar acciones sin depender del ratón. En cualquier aplicación de escritorio moderna, desde VSCode hasta Photoshop, los atajos son parte del flujo de trabajo natural… y cuando creamos apps con Electron, no solo podemos replicarlos: podemos llevarlos más allá, porque tenemos control tanto del main process como del renderer.

Usualmente se usan los shortcuts para dos cosas:

• ejecutar acciones rápidas dentro de la ventana (por ejemplo, CommandOrControl+S para guardar), y
• disparar acciones incluso cuando la app no está en foco, donde entran en juego los globalShortcut.

Local vs global (cuándo usar cada uno)

Atajos locales

Funcionan solo si la ventana de la app está activa. Son perfectos para:

• guardar, abrir, recargar
• acciones del menú
• UX interna del editor, visor, dashboard…

Atajos globales

Funcionan aunque la app esté minimizada. Perfectos para:

• lanzar capturadores rápidos
• abrir una ventana auxiliar
• activar herramientas (snippets, buscadores, etc.)

Crear shortcuts locales con “accelerator”

El módulo globalShortcut puede registrar (o anular) un atajo de teclado global con el sistema operativo para que pueda personalizar las operaciones para varios atajos para realizar funciones específicas en cada caso; por ejemplo, la famosa combinación de Control/Command + S para guardar el estado de la aplicación, es fácil de capturar en Electron.js:

const { globalShortcut } = require('electron')
globalShortcut.register('CommandOrControl+S', () => {
 // TO DO
});

Para anular o des-registrar una combinación:

globalShortcut.unregister('CommandOrControl+X')

Para anular o des-registrar todos los atajos:

globalShortcut.unregisterAll()

Desde el menú en Electron.js, podemos especificar una propiedad llamada accelerator con el cual también podemos especificar los atajos de teclado; por ejemplo:

menu.js

const { app, ipcMain, Menu, shell, BrowserWindow, globalShortcut } = require('electron')
const { open_file, save_file } = require("./editor-options")

const template = [
   ***
    {
        label: 'File',
        submenu: [
            {
                label: "Save",
                accelerator: 'CommandOrControl+Shift+S',
                click() {
                    const win = BrowserWindow.getFocusedWindow()
                    win.webContents.send('editorchannel', 'file-save')
                }
            },
     },
   ***
]

Aceleradores cross-platform

Electron traduce automáticamente estas combinaciones:

• CommandOrControl → Cmd en macOS, Ctrl en Windows y Linux
• Alt → Option en macOS, Alt en Windows/Linux
• Super/Meta → Cmd (macOS) y Windows key en Windows

⚡ Registrar shortcuts globales con globalShortcut

Ahora entramos en terreno “poderoso”: capturar una combinación aunque tu app esté minimizada o en segundo plano.

Cuando empecé a usarlo, lo primero que probé fue registrar un atajo clásico:

const { app, globalShortcut } = require('electron')
app.whenReady().then(() => {
 globalShortcut.register('CommandOrControl+S', () => {
   console.log('Atajo global capturado')
 })
})

Y sí: funcionó exactamente como esperaba.

Registrar, anular y limpiar shortcuts

globalShortcut.register('CommandOrControl+K', () => {
 console.log('Shortcut global K ejecutado')
})
globalShortcut.unregister('CommandOrControl+K')
globalShortcut.unregisterAll()

Un detalle: cuando trabajo con múltiples ventanas o modos (modo edición, modo preview…), siempre desregistro los atajos que ya no necesito para evitar comportamientos fantasma.

Buenas prácticas

• Regístralos solo después del app.whenReady.
• Anúlalos al cerrar la ventana.
• Evita colisiones con shortcuts del sistema (Ctrl+Space, Command+Space…).

⌨️ Shortcuts desde el renderer: keyup/keydown y before-input-event

Si necesitas capturar teclas dentro de la WebView, puedes hacerlo directamente en el DOM:

window.addEventListener('keyup', (event) => {
 console.log('Tecla presionada:', event.key)
}, true)

Uso esto cuando necesito combinaciones más específicas dentro de un editor o panel.

Interceptar teclas en el main process

Para casos donde no quiero que un shortcut aparezca como accelerator, uso:

win.webContents.on('before-input-event', (event, input) => {
 if (input.control && input.key.toLowerCase() === 'i') {
   console.log('Control+I interceptado')
   event.preventDefault()
 }
})

Esto da muchísimo control sin “contaminar” el menú.

️ Cómo manejar shortcuts cross-platform

Lo más importante:

✔ Modificadores
macOS    Windows / Linux
Command    —
Control    Control
CommandOrControl    Cmd
Alt    Alt
Option    —
Super/Meta    Cmd

❗ Errores comunes y cómo solucionarlos

1. El shortcut no se ejecuta

Causas típicas:

• No llamaste app.whenReady()
• Ya existía un shortcut igual asignado por el sistema
• No se registró por un error silencioso (usa globalShortcut.isRegistered)

2. Colisiones con el sistema operativo

Atajos como:

• Cmd+Space
• Ctrl+Alt+Delete
  están bloqueados. Evítalos siempre.

3. Teclas no soportadas

Algunas teclas especiales no funcionan como accelerators (según plataforma).

Conclusión

Crear shortcuts en Electron.js es sencillo una vez entiendes los 3 enfoques:

• accelerator → Menú y atajos dentro de la app
• globalShortcut → Atajos globales aunque la app esté minimizada
• keyup/before-input-event → Capturas finas en el renderer o main

Cuando combino estos métodos en mis proyectos, consigo una experiencia fluida: atajos claros, globales cuando los necesito y totalmente adaptados a cada plataforma.

❓ Preguntas frecuentes

• ¿Puedo registrar atajos distintos por ventana?
  • Sí, los globalShortcut son globales, pero los locales dependen del menú asociado a cada ventana.
• ¿Cómo evito que un shortcut dispare acciones sin querer?
  • Desregistrándolo cuando cambias de modo o ventana.
• ¿Puedo saber si un shortcut ya está en uso?
  • Puedes usar globalShortcut.isRegistered('<combo>').

Continuamos con los eventos en Electron.js