Build electron context menus composing multiple middlewares functions.

This package born because I've published two other npm packages for electron that provide different context menu for DOM element.

electron-input-menu provide Copy&Paste stuff for input element, while debug-menu provide a Chrome-like "inspect element" menu for electron.

They both work well on their own, but if you want to use them together you can only shown one menu or the other, because they preventDefault the contextmenu event. If you remove the preventDefault call, then you get both, in sequence.

electron-contextmenu-middleware grab menus provided by various other packages (the middlewares ones) merge them in a single menu, and popup it.

npm install --save electron-contextmenu-middleware

  // in a renderer electron process,
  // you want to activate context menu provided
  // by `electron-input-menu` and `debug-menu`
  const context = require('electron-contextmenu-middleware');
  const input = require('electron-input-menu');
  const debug = require('debug-menu').middleware;
  context.use(input);
  context.use(debug);
  context.activate();

To write a middleware menu, just export a function that receives an option object and a next function.

The option object is composed by the right-clicked DOM element, the click x and y coord, and an array of electron menu item templates.

Append or insert your menu items to the array in the position you want (or remove existing items inserted by other middlewares) and call next when done.

export default function ({elm, menu, click}, next) {
  menu.push({
    label: 'Inspect element',
    click: () => {
      require('electron').remote
        .getCurrentWindow()
        .inspectElement(
          click.x,
          click.y
        );
    }
  });
}

• electron-input-menu - Context menu for electron input elements.

• debug-menu - Chrome-like "inspect element" context-menu.

The MIT License (MIT)

Copyright (c) 2016 parro-it