Better integrate Electron>=8.1.1's spell checking

[globau]

applications built with nativefier don't perform spell checking, which is unexpected, and out of alignment with how sites work in-browser.

it would be nice if something like the electron-spell-check-provider package was used to enable spell checking on fields.

---

EDIT from @ronjouch on 2019/03/11: see #283 (comment) , Electron ≥ 8.1.1 supports spellchecking natively, and it's (crudely) usable by simply asking for it through BrowserOptions. However, it lacks basic features (an easy-to-use flag, a context menu letting users accept suggestions and switch languages, and maybe enabling spellcheck by default), so this is what this issue is about now.

EDIT from @ronjouch on 2020/04/22: see https://github.com/sindresorhus/electron-context-menu/releases/tag/v1.0.0 , electron-context-menu@1.0.0 (which I bumped Nativefier 8.0.7 to) includes "built-in support for spellchecking (sindresorhus/electron-context-menu#94), see sindresorhus/electron-context-menu@71c5d2e" . Maybe worth a look if you're interested in contributing!

[eladnava]

Would love to make this happen.

@jiahaog Can you point me in the right direction for completing this? 👍

[ronjouch]

Ping @globau @eladnava: @thatkookooguy tried implemented spell checking, maybe see #222 if you feel like collaborate on something.

[nschipperbrainsmith]

I would also like to voice my support for this. And was wondering if @ronjouch you tried using something like: https://github.com/electron-userland/electron-spellchecker

It seems that this library will work on any regular inputs as it listens to the document input event. The only situation where this will cause problems would be for applications that modify the input event / block it's event propagation. And there isn't anything that can be done about that really.

[e1ven]

You can enable spellchecking on your own now that this pr is merged into Electron.

You'll need to pass a parameter to upgrade the version of Electron from the default, and another to enable the feature.

--browserwindow-options '{ "webPreferences": { "spellcheck": true } }' -e 8.1.1

[eladnava]

@e1ven Legend! Thanks for that 💯

[eladnava]

FYI you will need to upgrade the version of electron-packager that nativefier depends on to the latest, otherwise bundling any Electron version above 5 will crash. Run this in the nativefier directory:

npm install electron-packager@latest

Then, run nativefier again to regenerate the app.

[ronjouch]

Thanks @e1ven @eladnava 🙂. Regarding the need to upgrade electron-packager, I encourage everyone interested to give branch ts a try, it ships with the latest everything, including electron-packager and electron 8.1.1. I just confirmed spellchecking works in this branch with nativefier --browserwindow-options '{ "webPreferences": { "spellcheck": true } }' 'https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_textarea' .

To those of you willing to give this branch a try, go ahead: it's ready to ship, currently being reviewed by Jia, will ship soon, so testing is extremely welcome. See the build instructions at #898 (comment) , and please report any issues with a [ts] prefix.

Then, once #898 ships, help welcome to make this feature actually usable: a new flag to enable it more easily than passing browserwindow-options, maybe make it default, and adding context menu entries to accept corrections and switch languages.

[eladnava]

Thanks @ronjouch, gave ts a try, seems to work well. Only issue is #921, but that's present in master as well. Thanks for all your hard work on this awesome project!

[AndriusWild]

I just rebuilt an app with the --browserwindow-options '{ "webPreferences": { "spellcheck": true } }' option and seems like it did not make any difference. The electron version is 8.2.0
Do I still need to install any "latest" version in order to make the spellcheck work?

Edited later:

Actually it does underline misspelled words now. Right click on them does not suggest any corrections though but knowing which ones got screwed up by my sausage fingers is helpful anyways.

[ronjouch]

Everybody interested, see https://github.com/sindresorhus/electron-context-menu/releases/tag/v1.0.0 , electron-context-menu@1.0.0 (which I bumped Nativefier 8.0.7 to) includes "built-in support for spellchecking (sindresorhus/electron-context-menu#94), see sindresorhus/electron-context-menu@71c5d2e" .

Worth a look for those of you interested in contributing!

[benoitjpnet]

Spellcheck is enabled on v9.0.0. But, how to change the language?

[pqnhan]

How to turn off spell checking?
Sometimes it's annoying

[llabusch93]

Spellcheck is enabled on v9.0.0. But, how to change the language?

Are there any news / someone figured out how to change the spellcheck language?

[llabusch93]

Okay I found how to define that:
https://www.electronjs.org/docs/tutorial/spellchecker#how-to-set-the-languages-the-spellchecker-uses

But how can we call BrowserWindow.session.setSpellCheckerLanguages() to define the wanted languages?

[llabusch93]

How to turn off spell checking?
Sometimes it's annoying

@pqnhan you just need to run nativefier with this option:
--browserwindow-options '{ "webPreferences": { "spellcheck": false } }'

[TheCleric]

But how can we call BrowserWindow.session.setSpellCheckerLanguages() to define the wanted languages?

@ronjouch I have a couple ideas on this. Both involve injected JS:

1. Support an ipcMain event like set-spell-checker-languages that will accept an event argument from an injected JS file that will pass it on to the session function.
2. A more generic session-interaction event that allows calling session functions and properties dynamically, so future electron session expansions can be supported automatically. And could be used for things involving the session where we don't feel like adding a CLI argument.

For 2 I have a working proof of concept. I have added the following to the mainWindow.ts:

  ipcMain.on('session-interaction', (event, request) => {
    let result = null;
    try {
      if (request.func) {
        if (request.funcArgs === undefined || request.funcArgs === null) {
          request.funcArgs = [];
        }

        if (typeof request.funcArgs[Symbol.iterator] !== 'function') {
          request.funcArgs = [request.funcArgs];
        }
        result = mainWindow.webContents.session[request.func](
          ...request.funcArgs,
        );
      } else if (request.property) {
        result = mainWindow.webContents.session[request.property];
      }
    } catch (error) {
      console.log('ERROR: session-interaction')
      console.log(request);
      console.log(error);
      result = error;
    }

    event.reply('session-interaction-reply', result);
  });

which now allows me to inject the following JS that will set the dictionary succesfully:

const electron = require('electron');

electron.ipcRenderer.on('session-interaction-reply', (event, result) => {
    console.log('session-interaction-reply', event, result)
});

electron.ipcRenderer.send('session-interaction', { property: 'availableSpellCheckerLanguages', });
electron.ipcRenderer.send('session-interaction', { func: 'setSpellCheckerLanguages', funcArgs: [['fr']], });

[TheCleric]

Also @llabusch93 even if we can get Nativefier to support this, Electron's spellchecker comes with a pretty big caveat that I hit personally:

On macOS as we use the native APIs there is no way to set the language that the spellchecker uses. By default on macOS the native spellchecker will automatically detect the language being used for you.

So for MacOS, the setSpellCheckerLanguages does nothing.

[ronjouch]

@ronjouch I have a couple ideas on this. Both involve injected JS:

1. Support an ipcMain event like set-spell-checker-languages that will accept an event argument from an injected JS file that will pass it on to the session function.

2. A more generic session-interaction event that allows calling session functions and properties dynamically, so future electron session expansions can be supported automatically. And could be used for things involving the session where we don't feel like adding a CLI argument.

For 2 I have a working proof of concept. I have added the following to the mainWindow.ts: [...]

@TheCleric your new plumbing looks good. Then,

1. If your intention is to be able to tell users "you can now set spellchecker language through a --injected script calling electron.ipcRenderer.send('session-interaction', { func: 'setSpellCheckerLanguages', funcArgs: [['fr']], }); ", I'm okay to merge and document this (along with how to disable spellchecking).
2. If you want to go further, what about detecting system locale on startup and setting it automatically to ["<detectedLocale>", "en"] ? StackOverflow offers a few ideas, and obviously it's super OS-specific, so it'd be reasonable to use a dep for this, os-locale looks clean, minimal, and maintained by somebody trustworthy.
3. If you want to go further further, we want an app context menu (like browsers do) letting users [1. Enable/disable spellchecking, 2. Pick locale], and persist it to json. This has the advantage to be easy and usable (because already known to users, because similar to browsers), and to not need extra flags/injects. We already have a context menu, this sounds feasible.
4. As last resort, as usual, we could have an extra flag. Something like --spellcheck, supporting enabling/disabling, and also supporting defining languages:
   1. --spellchecker true
   2. --spellchecker false
   3. --spellchecker en,fr

[TheCleric]

@TheCleric your new plumbing looks good. Then,

1. If your intention is to be able to tell users "you can now set spellchecker language through a --injected script calling electron.ipcRenderer.send('session-interaction', { func: 'setSpellCheckerLanguages', funcArgs: [['fr']], }); ", I'm okay to merge and document this (along with how to disable spellchecking).

Yeah that seems the simplest path.

2. If you want to go further, what about detecting system locale on startup and setting it automatically to ["<detectedLocale>", "en"] ? StackOverflow offers a few ideas, and obviously it's super OS-specific, so it'd be reasonable to use a dep for this, os-locale looks clean, minimal, and maintained by somebody trustworthy.

I believe Electron does that automatically. From their docs: By default the spellchecker will enable the language matching the current OS locale.

3. If you want to go further further, we want an app context menu (like browsers do) letting users [1. Enable/disable spellchecking, 2. Pick locale], and persist it to json. This has the advantage to be easy and usable (because already known to users, because similar to browsers), and to not need extra flags/injects. We already have a context menu, this sounds feasible.

So like on right click?

4. As last resort, as usual, we could have an extra flag. Something like --spellcheck, supporting enabling/disabling, and also supporting defining languages:

   1. --spellcheck true

   2. --spellcheck false

   3. --spellcheck en,fr

Honestly, don't hate this option at all.

[llabusch93]

Hey @ronjouch and @TheCleric ,

saw that your modifications are merged, cool! So is there now a way to set spellchecking languages with nativefier?

Thanks for you work!

[TheCleric]

Hey @ronjouch and @TheCleric ,

saw that your modifications are merged, cool! So is there now a way to set spellchecking languages with nativefier?

Thanks for you work!

If you are building a non-mac app, yes. (Electron on Mac just uses whatever the current selected OS language is and can't change it due to limitations on Mac).

To set the spellcheck language on Windows and Linux, see the example on the new session-interaction api here: https://github.com/nativefier/nativefier/blob/master/docs/api.md#example

This will guide you on how to create a JS file that will set the spellcheck language that can be injected via --inject into the app.

[edsenabr]

@TheCleric :: I've just tested that new session-interaction api on nativefier@43.0.0 and I'm not getting any response from the emitted event; I'm trying the sample code provided:

const request = {
  property: 'availableSpellCheckerLanguages',
};
electron.ipcRenderer.send('session-interaction', request);

electron.ipcRenderer.on('session-interaction-reply', (event, result) => {
    console.log('session-interaction-reply', event, result.value)
});

... my handler is never called;

BTW, a recursive grep for "session-interaction" on the whole nativefier code tree got me nothing. Do I need to upgrade to an experimental release on another channel ?

[TheCleric]

BTW, a recursive grep for "session-interaction" on the whole nativefier code tree got me nothing. Do I need to upgrade to an experimental release on another channel ?

My apologies. It doesn't appear to have made it into the npm release yet. If you pull this repo it would be in the master branch. Sorry for my confusion.

[ronjouch]

BTW, a recursive grep for "session-interaction" on the whole nativefier code tree got me nothing. Do I need to upgrade to an experimental release on another channel ?

It doesn't appear to have made it into the npm release yet. If you pull this repo it would be in the master branch. Sorry for my confusion.

Hi there; I just released Nativefier 43.0.1 with @TheCleric's patch in, it will be on npm in a few minutes for you to try without having to use a dev build.

[sergiomb2]

Hey @ronjouch and @TheCleric ,
saw that your modifications are merged, cool! So is there now a way to set spellchecking languages with nativefier?
Thanks for you work!

If you are building a non-mac app, yes. (Electron on Mac just uses whatever the current selected OS language is and can't change it due to limitations on Mac).

To set the spellcheck language on Windows and Linux, see the example on the new session-interaction api here: https://github.com/nativefier/nativefier/blob/master/docs/api.md#example

This will guide you on how to create a JS file that will set the spellcheck language that can be injected via --inject into the app.

now example is here https://github.com/nativefier/nativefier/blob/master/API.md#example and works for me