Make event data consistent suggestion (breaking change)

One reason I love Slate is that it is consistent and predictable and seems to gravitate towards this over time (as opposed to towards more complexity).

This is probably one of the reasons why the current event data helper bothers me. I really like the shortcuts (please don’t remove!) but it is inconsistent. In fact, I couldn’t remember so I had to look up the source code just now so I could give some examples such as:

• isCtrl: means the ctrl key was pressed but NOT the alt key. But it doesn’t matter whether the shift key was pressed or not.
• isAlt: means the alt key was pressed. Any of the other modifier keys may also have been pressed.
• isShift: means the shift key was pressed. Any of the other modifier keys may also have been pressed.
• isMeta: means the meta key was pressed. Any of the other modifier keys may also have been pressed.
• isMod: means the mod key (ctrl on windows or cmd on mac) was pressed but NOT the alt key. The shift key may or may not be pressed.

So basically, there is a combination of sometimes it is checking to see if a modifier key was pressed and sometimes it is checking to see if that modifier key was pressed but not the alt modifier. But why isn’t the shift taken into account (which has gotten me into trouble because I assumed it was checking this since it was checking alt).

My proposal is to fix this once and for all by adding both has[Modifier] properties that check to see if a key was pressed and ignoring all the other modifier keys and is[OneOrMoreModifiers] to check that only that specific combination of modifiers was pressed.

We end up with an object like this for (as an example, CMD-SHIFT on a Mac):

{
  "hasShift": true,
  "hasCmd": true,
  "hasCtrl": false,
  "hasAlt": false,
  "hasMod": true,
  "isCmd": false,
  "isCmdAlt": false,
  "isCmdShift": true,
  "isCmdAltShift": false,
  "isCtrl": false,
  "isCtrlAlt": false,
  "isCtrlShift": false,
  "isCtrlAltShift": false,
  "isMod": false,
  "isModAlt": false,
  "isModShift": true,
  "isModAltShift": false
}

Note: The preceding JSON was generated from my actual running code. Just cut and pasted.

The following is the code that I developed that can be merged (with some tweaking of course to make it fit), into SlateJS:

import IS_MAC from './isMac'

export default function (e) {
  const shift = e.shiftKey
  const ctrl = e.ctrlKey
  const alt = e.altKey
  const cmd = IS_MAC && e.metaKey
  const mod = IS_MAC ? cmd : ctrl
  return {
    hasShift: shift,
    hasCmd: cmd,
    hasCtrl: ctrl,
    hasAlt: alt,
    hasMod: mod,
    isCmd: cmd && !alt && !shift,
    isCmdAlt: cmd && alt && !shift,
    isCmdShift: cmd && !alt && shift,
    isCmdAltShift: cmd && alt && shift,
    isCtrl: ctrl && !alt && !shift,
    isCtrlAlt: ctrl && alt && !shift,
    isCtrlShift: ctrl && !alt && shift,
    isCtrlAltShift: ctrl && alt && shift,
    isMod: mod && !alt && !shift,
    isModAlt: mod && alt && !shift,
    isModShift: mod && !alt && shift,
    isModAltShift: mod && alt && shift,
  }
}

Noticed I have a few is[modifier] properties missing like isShift. Anyways, you get the idea. This would all be worked out before a formal PR.

[ianstormtaylor]

Hey @thesunny thanks for thinking this through more.

Using modKey instead of cmdKey makes sense to me, I like that!

I think the isKey approach might have performance implications, like you alluded to. I’m less worried about the implications of having every plugin run the method, and more worried about adding too much functionality to the event handlers, especially creating many closured functions on each event.

I think if we add modKey, and change the is* keys to match, we’ll end up with a very simple to implement strategy from contents’s side that lets you do things like:

onKeyDown(e, data, state) {
  if (data.modKey && !data.altKey && data.key == 'k') {
    // ...
  }
}

And then there’s an option, if we really want to, to add a helper that makes key matching easier, and expose it as a util, similar to findDOMNode. Maybe something like:

onKeyDown(e, data, state) {
  if (isHotkey(data, 'mod+k')) { // or isHotkey(e, 'mod+k')
    // ...
  }
}

And it would be smart about only triggering when the specific keys were pressed, and not other modifier combinations. But honestly, I’m leaning more towards just making that a completely separate, Slate-agnostic module that people can use if they want to. After a pretty in depth search of NPM it’s insane that something simple like that doesn’t exist.

[danburzo]

As for how to handle they keyboard shortcuts, leaving these here for reference: https://developers.google.com/web/updates/2016/04/keyboardevent-keys-codes

(and, in particular: https://w3c.github.io/uievents/tools/key-event-viewer.html)