mixmaxhq / electron-editor-context-menu Goto Github PK

View Code? Open in Web Editor NEW

50.0 7.0 10.0 69 KB

Enable the native right-click menu in Electron.

License: MIT License

JavaScript 100.00%

unsupported

electron-editor-context-menu's Introduction

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.

Installation

npm install electron-editor-context-menu

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.

Customizing the menu

You can add or remove items to the menu, or replace it entirely, by providing mainTemplate and/or suggestionsTemplate parameters when building the menu:

var menu = buildEditorContextMenu(selection, mainTemplate, suggestionsTemplate);

The mainTemplate parameter customizes the always-present menu items; the suggestionsTemplate parameter customizes the spelling suggestion items. Pass an array of items to replace the default items entirely; pass a function to add/remove/edit the default items. The function will be passed the default array of items as a parameter and should return an array of items.

Credits

Created by Jeff Wear.

Thanks to electron/electron#942 (comment) for the initial sketch of this.

Copyright and 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.

electron-editor-context-menu's People

Contributors

Stargazers

Watchers

Forkers

ccnokes hss-dev alchen ddelpero christopheparisse chasewyrick reactjs-alex-alex2006hw anujdatar bytesamurai

electron-editor-context-menu's Issues

Multiple Menus

I'm getting two context menus showing up. First is just the Menu bar you would otherwise see up top, and then I'm seeing the one here. Any ideas?

Template

To add/modify the template I have to edit the source directly ?

Documentation issue

I found that moving the menu initialization to the timeout function worked instead of the documented version. Otherwise it does not show any suggestions.

My suggestion to be changed on the docs:

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

  // 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() {
    var menu = buildEditorContextMenu();
    menu.popup(remote.getCurrentWindow());
  }, 30);
});

Instructions unclear

Hello,

I don't understand your installation instructions. I installed it with npm install electron-editor-context-menu, but how do I actually put it in my electron app? You put this code in your readme but don't explain where it goes:

// 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);
});

Is this meant to go in my electron main.js file, or am I meant to call it as a script from my html file?

Thanks.

Custom methods for clicks on context menu items

Is it somehow possible to pass custom functions to the context menu that should be executed when a certain item was clicked?
e.g. i need to execute a custom function when the user clicks on a spell suggestion. Can i somehow make your context menu execute my custom function on click?

Thanks a lot :)

Clicking on spelling suggestion inside a <webview> doesn't correct the misspelled text

I'm using electron-editor-context-menu to show spelling suggestions inside a webview (using a preload script, see here: electron/electron#942 (comment)). Everything works correctly except that the spelling suggestions do not replace the misspelled text when they are selected in the context menu. I'm fairly certain this functionality was working prior to a refactor that resulted in me moving my application into a webview.

Update dependencies

Hello, there are some problems with importing dependencies:

var BrowserWindow = require('electron').BrowserWindow;
var Menu = require('electron').Menu;

need to be changed to

var remote = require('remote');
var BrowserWindow = remote.require('browser-window');
var Menu = remote.require('menu');

Because now BrowserWindow and Menu are undefined