remove keyboard data.* properties (#1235)

* update examples and walkthroughs

* deprecate data keyboard properties

* update examples

* add is-hotkey to resources doc

* udpate docs

* update docs

* fix split-block test

packages/slate-react/src/components/content.js

@@ -572,14 +572,17 @@ class Content extends React.Component {
     if (this.props.readOnly) return
     if (!this.isInEditor(event.target)) return
 
-    const { altKey, ctrlKey, metaKey, shiftKey, which } = event
-    const key = keycode(which)
+    const { key, metaKey, ctrlKey } = event
     const data = {}
+    const modKey = IS_MAC ? metaKey : ctrlKey
+
+    // COMPAT: add the deprecated keyboard event properties.
+    addDeprecatedKeyProperties(data, event)
 
     // Keep track of an `isShifting` flag, because it's often used to trigger
     // "Paste and Match Style" commands, but isn't available on the event in a
     // normal paste event.
-    if (key == 'shift') {
+    if (key == 'Shift') {
       this.tmp.isShifting = true
     }
 
@@ -588,35 +591,23 @@ class Content extends React.Component {
     // selection-moving behavior.
     if (
       this.tmp.isComposing &&
-      (key == 'left' || key == 'right' || key == 'up' || key == 'down')
+      (key == 'ArrowLeft' || key == 'ArrowRight' || key == 'ArrowUp' || key == 'ArrowDown')
     ) {
       event.preventDefault()
       return
     }
 
-    // Add helpful properties for handling hotkeys to the data object.
-    data.code = which
-    data.key = key
-    data.isAlt = altKey
-    data.isCmd = IS_MAC ? metaKey && !altKey : false
-    data.isCtrl = ctrlKey && !altKey
-    data.isLine = IS_MAC ? metaKey : false
-    data.isMeta = metaKey
-    data.isMod = IS_MAC ? metaKey && !altKey : ctrlKey && !altKey
-    data.isModAlt = IS_MAC ? metaKey && altKey : ctrlKey && altKey
-    data.isShift = shiftKey
-    data.isWord = IS_MAC ? altKey : ctrlKey
-
     // These key commands have native behavior in contenteditable elements which
     // will cause our state to be out of sync, so prevent them.
     if (
-      (key == 'enter') ||
-      (key == 'backspace') ||
-      (key == 'delete') ||
-      (key == 'b' && data.isMod) ||
-      (key == 'i' && data.isMod) ||
-      (key == 'y' && data.isMod) ||
-      (key == 'z' && data.isMod)
+      (key == 'Enter') ||
+      (key == 'Backspace') ||
+      (key == 'Delete') ||
+      (key == 'b' && modKey) ||
+      (key == 'i' && modKey) ||
+      (key == 'y' && modKey) ||
+      (key == 'z' && modKey) ||
+      (key == 'Z' && modKey)
     ) {
       event.preventDefault()
     }
@@ -632,27 +623,15 @@ class Content extends React.Component {
    */
 
   onKeyUp = (event) => {
-    const { altKey, ctrlKey, metaKey, shiftKey, which } = event
-    const key = keycode(which)
     const data = {}
 
-    if (key == 'shift') {
+    // COMPAT: add the deprecated keyboard event properties.
+    addDeprecatedKeyProperties(data, event)
+
+    if (event.key == 'Shift') {
       this.tmp.isShifting = false
     }
 
-    // Add helpful properties for handling hotkeys to the data object.
-    data.code = which
-    data.key = key
-    data.isAlt = altKey
-    data.isCmd = IS_MAC ? metaKey && !altKey : false
-    data.isCtrl = ctrlKey && !altKey
-    data.isLine = IS_MAC ? metaKey : false
-    data.isMeta = metaKey
-    data.isMod = IS_MAC ? metaKey && !altKey : ctrlKey && !altKey
-    data.isModAlt = IS_MAC ? metaKey && altKey : ctrlKey && altKey
-    data.isShift = shiftKey
-    data.isWord = IS_MAC ? altKey : ctrlKey
-
     debug('onKeyUp', { event, data })
     this.props.onKeyUp(event, data)
   }
@@ -669,9 +648,16 @@ class Content extends React.Component {
 
     const data = getTransferData(event.clipboardData)
 
-    // Attach the `isShift` flag, so that people can use it to trigger "Paste
-    // and Match Style" logic.
-    data.isShift = !!this.tmp.isShifting
+    // COMPAT: Attach the `isShift` flag, so that people can use it to trigger
+    // "Paste and Match Style" logic.
+    Object.defineProperty(data, 'isShift', {
+      enumerable: true,
+      get() {
+        logger.deprecate('0.28.0', 'The `data.isShift` property of paste events has been deprecated. If you need this functionality, you\'ll need to keep track of that state with `onKeyDown` and `onKeyUp` events instead')
+        return !!this.tmp.isShifting
+      }
+    })
+
     debug('onPaste', { event, data })
 
     // COMPAT: In IE 11, only plain text can be retrieved from the event's
@@ -897,6 +883,40 @@ class Content extends React.Component {
 
 }
 
+/**
+ * Add deprecated `data` fields from a key `event`.
+ *
+ * @param {Object} data
+ * @param {Object} event
+ */
+
+function addDeprecatedKeyProperties(data, event) {
+  const { altKey, ctrlKey, metaKey, shiftKey, which } = event
+  const name = keycode(which)
+
+  function define(key, value) {
+    Object.defineProperty(data, key, {
+      enumerable: true,
+      get() {
+        logger.deprecate('0.28.0', `The \`data.${key}\` property of keyboard events is deprecated, please use the native \`event\` properties instead.`)
+        return value
+      }
+    })
+  }
+
+  define('code', which)
+  define('key', name)
+  define('isAlt', altKey)
+  define('isCmd', IS_MAC ? metaKey && !altKey : false)
+  define('isCtrl', ctrlKey && !altKey)
+  define('isLine', IS_MAC ? metaKey : false)
+  define('isMeta', metaKey)
+  define('isMod', IS_MAC ? metaKey && !altKey : ctrlKey && !altKey)
+  define('isModAlt', IS_MAC ? metaKey && altKey : ctrlKey && altKey)
+  define('isShift', shiftKey)
+  define('isWord', IS_MAC ? altKey : ctrlKey)
+}
+
 /**
  * Export.
  *

packages/slate-react/src/plugins/core.js

@@ -407,19 +407,20 @@ function Plugin(options = {}) {
   function onKeyDown(e, data, change) {
     debug('onKeyDown', { data })
 
-    switch (data.key) {
-      case 'enter': return onKeyDownEnter(e, data, change)
-      case 'backspace': return onKeyDownBackspace(e, data, change)
-      case 'delete': return onKeyDownDelete(e, data, change)
-      case 'left': return onKeyDownLeft(e, data, change)
-      case 'right': return onKeyDownRight(e, data, change)
-      case 'up': return onKeyDownUp(e, data, change)
-      case 'down': return onKeyDownDown(e, data, change)
+    switch (e.key) {
+      case 'Enter': return onKeyDownEnter(e, data, change)
+      case 'Backspace': return onKeyDownBackspace(e, data, change)
+      case 'Delete': return onKeyDownDelete(e, data, change)
+      case 'ArrowLeft': return onKeyDownLeft(e, data, change)
+      case 'ArrowRight': return onKeyDownRight(e, data, change)
+      case 'ArrowUp': return onKeyDownUp(e, data, change)
+      case 'ArrowDown': return onKeyDownDown(e, data, change)
       case 'd': return onKeyDownD(e, data, change)
       case 'h': return onKeyDownH(e, data, change)
       case 'k': return onKeyDownK(e, data, change)
       case 'y': return onKeyDownY(e, data, change)
-      case 'z': return onKeyDownZ(e, data, change)
+      case 'z':
+      case 'Z': return onKeyDownZ(e, data, change)
     }
   }
 
@@ -457,9 +458,13 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownBackspace(e, data, change) {
+    const isWord = IS_MAC ? e.altKey : e.ctrlKey
+    const isLine = IS_MAC ? e.metaKey : false
+
     let boundary = 'Char'
-    if (data.isWord) boundary = 'Word'
-    if (data.isLine) boundary = 'Line'
+    if (isWord) boundary = 'Word'
+    if (isLine) boundary = 'Line'
+
     change[`delete${boundary}Backward`]()
   }
 
@@ -472,9 +477,13 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownDelete(e, data, change) {
+    const isWord = IS_MAC ? e.altKey : e.ctrlKey
+    const isLine = IS_MAC ? e.metaKey : false
+
     let boundary = 'Char'
-    if (data.isWord) boundary = 'Word'
-    if (data.isLine) boundary = 'Line'
+    if (isWord) boundary = 'Word'
+    if (isLine) boundary = 'Line'
+
     change[`delete${boundary}Forward`]()
   }
 
@@ -496,8 +505,8 @@ function Plugin(options = {}) {
   function onKeyDownLeft(e, data, change) {
     const { state } = change
 
-    if (data.isCtrl) return
-    if (data.isAlt) return
+    if (e.ctrlKey) return
+    if (e.altKey) return
     if (state.isExpanded) return
 
     const { document, startKey, startText } = state
@@ -519,7 +528,7 @@ function Plugin(options = {}) {
       const previousInline = document.getClosestInline(previous.key)
 
       if (previousBlock === startBlock && previousInline && !previousInline.isVoid) {
-        const extendOrMove = data.isShift ? 'extend' : 'move'
+        const extendOrMove = e.shiftKey ? 'extend' : 'move'
         change.collapseToEndOf(previous)[extendOrMove](-1)
         return
       }
@@ -552,8 +561,8 @@ function Plugin(options = {}) {
   function onKeyDownRight(e, data, change) {
     const { state } = change
 
-    if (data.isCtrl) return
-    if (data.isAlt) return
+    if (e.ctrlKey) return
+    if (e.altKey) return
     if (state.isExpanded) return
 
     const { document, startKey, startText } = state
@@ -581,7 +590,7 @@ function Plugin(options = {}) {
       const nextInline = document.getClosestInline(next.key)
 
       if (nextBlock == startBlock && nextInline) {
-        const extendOrMove = data.isShift ? 'extend' : 'move'
+        const extendOrMove = e.shiftKey ? 'extend' : 'move'
         change.collapseToStartOf(next)[extendOrMove](1)
         return
       }
@@ -604,11 +613,11 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownUp(e, data, change) {
-    if (!IS_MAC || data.isCtrl || !data.isAlt) return
+    if (!IS_MAC || e.ctrlKey || !e.altKey) return
 
     const { state } = change
     const { selection, document, focusKey, focusBlock } = state
-    const transform = data.isShift ? 'extendToStartOf' : 'collapseToStartOf'
+    const transform = e.shiftKey ? 'extendToStartOf' : 'collapseToStartOf'
     const block = selection.hasFocusAtStartOf(focusBlock)
       ? document.getPreviousBlock(focusKey)
       : focusBlock
@@ -633,11 +642,11 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownDown(e, data, change) {
-    if (!IS_MAC || data.isCtrl || !data.isAlt) return
+    if (!IS_MAC || e.ctrlKey || !e.altKey) return
 
     const { state } = change
     const { selection, document, focusKey, focusBlock } = state
-    const transform = data.isShift ? 'extendToEndOf' : 'collapseToEndOf'
+    const transform = e.shiftKey ? 'extendToEndOf' : 'collapseToEndOf'
     const block = selection.hasFocusAtEndOf(focusBlock)
       ? document.getNextBlock(focusKey)
       : focusBlock
@@ -658,7 +667,7 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownD(e, data, change) {
-    if (!IS_MAC || !data.isCtrl) return
+    if (!IS_MAC || !e.ctrlKey || e.altKey) return
     e.preventDefault()
     change.deleteCharForward()
   }
@@ -672,7 +681,7 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownH(e, data, change) {
-    if (!IS_MAC || !data.isCtrl) return
+    if (!IS_MAC || !e.ctrlKey || e.altKey) return
     e.preventDefault()
     change.deleteCharBackward()
   }
@@ -686,7 +695,7 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownK(e, data, change) {
-    if (!IS_MAC || !data.isCtrl) return
+    if (!IS_MAC || !e.ctrlKey || e.altKey) return
     e.preventDefault()
     change.deleteLineForward()
   }
@@ -700,7 +709,8 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownY(e, data, change) {
-    if (!data.isMod) return
+    const modKey = IS_MAC ? e.metaKey : e.ctrlKey
+    if (!modKey) return
     change.redo()
   }
 
@@ -713,8 +723,9 @@ function Plugin(options = {}) {
    */
 
   function onKeyDownZ(e, data, change) {
-    if (!data.isMod) return
-    change[data.isShift ? 'redo' : 'undo']()
+    const modKey = IS_MAC ? e.metaKey : e.ctrlKey
+    if (!modKey) return
+    change[e.shiftKey ? 'redo' : 'undo']()
   }
 
   /**

packages/slate-react/test/plugins/core/on-key-down/split-empty-block.js

@@ -3,7 +3,7 @@
 import h from '../../../helpers/h'
 
 export default function (simulator) {
-  simulator.keyDown(null, { key: 'enter' })
+  simulator.keyDown({ key: 'Enter' })
 }
 
 export const input = (