Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including electron-editor-context-menu with all npm packages installed. Try it out:

var electronEditorContextMenu = require("electron-editor-context-menu")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

electron-editor-context-menu v1.1.1

Enable the native right-click menu in Electron.

electron-editor-context-menu

In Electron, right-clicking in text editors does… nothing.

This module enables the menu you'd expect, with optional spell-checker integration.

menu

Installation

npm install electron-editor-context-menu --save

Usage

// In the renderer process:
var remote = require('electron').remote;
// `remote.require` since `Menu` is a main-process module.
var buildEditorContextMenu = remote.require('electron-editor-context-menu');

window.addEventListener('contextmenu', function(e) {
  // Only show the context menu in text editors.
  if (!e.target.closest('textarea, input, [contenteditable="true"]')) return;

  var menu = buildEditorContextMenu();

  // The 'contextmenu' event is emitted after 'selectionchange' has fired but possibly before the
  // visible selection has changed. Try to wait to show the menu until after that, otherwise the
  // visible selection will update after the menu dismisses and look weird.
  setTimeout(function() {
    menu.popup(remote.getCurrentWindow());
  }, 30);
});

Spell-checker integration

Show spelling suggestions by passing a selection object when building the menu:

var selection = {
  isMisspelled: true,
  spellingSuggestions: [
    'men',
    'mean',
    'menu'
  ]
};

var menu = buildEditorContextMenu(selection);

Get these suggestions when your spell-check provider runs —Electron will poll it immediately before the 'contextmenu' event fires.

For a complete example using electron-spell-check-provider, see here.

Credits

Created by Jeff Wear.

Thanks to https://github.com/atom/electron/pull/942#issuecomment-171445954 for the initial sketch of this.

Copyright and License

Copyright 2016 Mixmax, Inc., licensed under the MIT License.

Release History

  • 1.1.1 Fix compatibility with electron-builder
  • 1.1.0 Add the ability to customize the main template and the suggestions template.
  • 1.0.0 Initial release.
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free