KeyBindingUtil: add usesMacOSHeuristics method

[williamboman]

Summary

Add a public method, usesMacOSHeuristics, to the KeyBindingUtil module. This makes it possible to determine how draft-js will interpret certain keyboard events and thus alter the UI accordingly, e.g.;

I currently achieve this by doing (🙈);

const COMMAND_MODIFIER_CHAR = (navigator && navigator.userAgent.indexOf('Mac') >= 0)
    ? '\u2318' // Mac command key character
    : 'Ctrl'

[hellendag]

I'm curious about the context of your needs for COMMAND_MODIFIER_CHAR. Can you provide a snippet?

I would normally expect hasCommandModifier to solve the needs of determining whether a key event matches this use case.

[williamboman]

@hellendag I need to be able to determine which key will be used as "command modifier" before any key event takes place.

In the example I posted in the OP, I check for KeyBindingUtil.hasCommandModifier(e) && e.keyCode === 13 and submit the form. I also want to display this shortcut in the interface (see screenshot in OP). As the command modifier, as of now, differs between macOS and other OSes I want to display the correct character in the UI. Hence COMMAND_MODIFIER_CHAR.

[thibaudcolas]

I've had two use cases for access to isOSX:

• Implementing shortcuts that rely on combinations of ctrl/cmd and alt modifiers, like the Google Docs shortcuts for heading levels (eg. alt + cmd + 1)
• Displaying the relevant combination of keys in the UI, like @williamboman.

I was able to access it in my implementation by abusing the implementation of isOptionKeyCommand. This is dirty, and will break whenever the implementation is changed to coerce the result to boolean, but it works in 0.9.1.

Edit: tested in versions 0.10.0 to 0.10.4.

const isOSX = isOptionKeyCommand({ altKey: 'test' }) === 'test';

[thibaudcolas]

👋 Is there anything I can do to help get this in? As far as I can see this is still the only way to display correct keyboard shortcuts in editors.

Here is another example to complement @williamboman's:

It's available at https://springload.github.io/draftail/ if that helps.

[niveditc]

@williamboman, @thibaudcolas - I think this is fine to add in, but I want to first make sure that someone still has a need for this additional API method. Please comment here if adding this will help your project & I can then merge it in - thanks! :)

[williamboman]

@williamboman, @thibaudcolas - I think this is fine to add in, but I want to first make sure that someone still has a need for this additional API method. Please comment here if adding this will help your project & I can then merge it in - thanks! :)

Won't make much difference for me rn, I don't use draft-js much anymore. If I ever pick it up again I'm sure I'd have use for this - so it would not surprise me if more people has use for this. I've rebased on top of latest master.

[niveditc]

Sounds good!

[facebook-github-bot]

niveditc is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[thibaudcolas]

Nice! I'll definitely be using this in my editor as soon as it is released. Same use case as before – displaying the right shortcut depending on the user's OS. See https://github.com/springload/draftail/blob/d7fcb93c09204467a76fbc8abe4f7073cc052bc9/lib/api/behavior.js#L23-L25.