Opt-Space no longer scrolls (Chrome OSX)

Summary:`Option + Space` no longer causes scrolling. This was only happening in Chrome/OSX. This was happening in the keyDown handler not the keyPress handler.

I'm not sure if I like adding the ' ' to the editor in editOnKeyDown. Maybe I should implement this as a command?

Fixes #19
Closes #244

Reviewed By: spicyj

Differential Revision: D3132586

fb-gh-sync-id: b94bd73094a58ce9b39528df34b899ae62366761
fbshipit-source-id: b94bd73094a58ce9b39528df34b899ae62366761

src/component/handlers/edit/editOnKeyDown.js

@@ -12,9 +12,12 @@
 
 'use strict';
 
+var DraftModifier = require('DraftModifier');
 var EditorState = require('EditorState');
+var KeyBindingUtil = require('KeyBindingUtil');
 var Keys = require('Keys');
 var SecondaryClipboard = require('SecondaryClipboard');
+var UserAgent = require('UserAgent');
 
 var keyCommandBackspaceToStartOfLine = require('keyCommandBackspaceToStartOfLine');
 var keyCommandBackspaceWord = require('keyCommandBackspaceWord');
@@ -29,6 +32,9 @@ var keyCommandUndo = require('keyCommandUndo');
 
 import type {DraftEditorCommand} from 'DraftEditorCommand';
 
+var {isOptionKeyCommand} = KeyBindingUtil;
+var isChrome = UserAgent.isBrowser('Chrome');
+
 /**
  * Map a `DraftEditorCommand` command value to a corresponding function.
  */
@@ -101,6 +107,25 @@ function editOnKeyDown(e: SyntheticKeyboardEvent): void {
     case Keys.DOWN:
       this.props.onDownArrow && this.props.onDownArrow(e);
       return;
+    case Keys.SPACE:
+      // Handling for OSX where option + space scrolls.
+      if (isChrome && isOptionKeyCommand(e)) {
+        e.preventDefault();
+        // Insert a nbsp into the editor.
+        const contentState = DraftModifier.replaceText(
+          editorState.getCurrentContent(),
+          editorState.getSelection(),
+          '\u00a0'
+        );
+        this.update(
+          EditorState.push(
+            editorState,
+            contentState,
+            'insert-characters'
+          )
+        );
+        return;
+      }
   }
 
   var command = this.props.keyBindingFn(e);

src/component/utils/KeyBindingUtil.js

@@ -27,6 +27,10 @@ var KeyBindingUtil = {
     return !!e.ctrlKey && !e.altKey;
   },
 
+  isOptionKeyCommand: function(e: SyntheticKeyboardEvent): boolean {
+    return isOSX && e.altKey;
+  },
+
   hasCommandModifier: function(e: SyntheticKeyboardEvent): boolean {
     return isOSX ?
       (!!e.metaKey && !e.altKey) :