expose onKeyUp (#1026)

* expose onKeyUp to be used by plugin

* Update plugin.md

docs/reference/components/editor.md

@@ -33,6 +33,7 @@ The top-level React component that renders the Slate editor itself.
   - [`onCut`](#oncut)
   - [`onDrop`](#ondrop)
   - [`onKeyDown`](#onkeydown)
+  - [`onKeyUp`](#onkeyup)
   - [`onPaste`](#onpaste)
   - [`onSelect`](#onselect)
   - [`schema`](#schema)
@@ -197,6 +198,7 @@ const plugins = [
 ### `onCut`
 ### `onDrop`
 ### `onKeyDown`
+### `onKeyUp`
 ### `onPaste`
 ### `onSelect`
 ### `schema`

docs/reference/plugins/plugin.md

@@ -16,6 +16,7 @@ When the editor needs to resolve a plugin-related handler, it will loop through
   - [`onCut`](#oncut)
   - [`onDrop`](#ondrop)
   - [`onKeyDown`](#onkeydown)
+  - [`onKeyUp`](#onkeyup)
   - [`onPaste`](#onpaste)
   - [`onSelect`](#onselect)
 - [Other Properties](#other-properties)
@@ -49,6 +50,7 @@ export default function MySlatePlugin(options) {
   onCut: Function,
   onDrop: Function,
   onKeyDown: Function,
+  onKeyUp: Function,
   onPaste: Function,
   onSelect: Function
 }
@@ -163,6 +165,13 @@ The `isLine` and `isWord` booleans represent whether the "line modifier" or "wor
 
 Make sure to `event.preventDefault()` (and return `state`) if you do not want the default insertion behavior to occur! If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
 
+### `onKeyUp`
+`Function onKeUp(event: Event, data: Object, state: State, editor: Editor) => State || Void`
+
+This handler is called when any key is released in the `contenteditable` element.
+
+The `data` object contains the same information as the `data` object of `onKeyDown`.
+
 ### `onPaste`
 `Function onPaste(event: Event, data: Object, state: State, editor: Editor) => State || Void`
 

src/components/content.js

@@ -54,6 +54,7 @@ class Content extends React.Component {
     onDrop: Types.func.isRequired,
     onFocus: Types.func.isRequired,
     onKeyDown: Types.func.isRequired,
+    onKeyUp: Types.func.isRequired,
     onPaste: Types.func.isRequired,
     onSelect: Types.func.isRequired,
     readOnly: Types.bool.isRequired,
@@ -686,12 +687,29 @@ class Content extends React.Component {
    */
 
   onKeyUp = (event) => {
-    const { which } = event
+    const { altKey, ctrlKey, metaKey, shiftKey, which } = event
     const key = keycode(which)
+    const data = {}
 
     if (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)
   }
 
   /**

src/components/editor.js

@@ -30,6 +30,7 @@ const EVENT_HANDLERS = [
   'onCut',
   'onDrop',
   'onKeyDown',
+  'onKeyUp',
   'onPaste',
   'onSelect',
 ]

src/models/stack.js

@@ -27,6 +27,7 @@ const EVENT_HANDLER_METHODS = [
   'onCut',
   'onDrop',
   'onKeyDown',
+  'onKeyUp',
   'onPaste',
   'onSelect',
 ]

src/plugins/core.js

@@ -953,6 +953,7 @@ function Plugin(options = {}) {
         onCut={editor.onCut}
         onDrop={editor.onDrop}
         onKeyDown={editor.onKeyDown}
+        onKeyUp={editor.onKeyUp}
         onPaste={editor.onPaste}
         onSelect={editor.onSelect}
         readOnly={props.readOnly}