Fix modifying state during onChange triggered by beforeinput (faceboo…

…karchive#667)

Fixes facebookarchive#92.

If an onChange handler replaces every "x" with an "abc", then when you type "x", we trigger onChange from beforeinput and rerender immediately with the content "abc", then the browser still inserts an "x" character!

This fix is surprisingly simple: instead of triggering an update during beforeinput, we simply wait until the input event to do so. This means that when we rerender, the browser would have already inserted the "x" character and React will correctly delete it when rerendering.

Test Plan: In plaintext example, change the handler to

```
this.onChange = (editorState) => {
  var content = editorState.getCurrentContent();
  return this.setState({
    editorState: EditorState.set(editorState, {
      currentContent: Modifier.removeInlineStyle(content, content.getSelectionAfter(), 'OVERFLOW');
    }),
  });
};
```

then type. Characters don't get duplicated like they did before.

src/component/base/DraftEditor.react.js

@@ -87,6 +87,7 @@ class DraftEditor extends React.Component {
   _editorKey: string;
   _placeholderAccessibilityID: string;
   _latestEditorState: EditorState;
+  _pendingStateFromBeforeInput: ?EditorState;
 
   /**
    * Define proxies that can route events to the current handler.

src/component/handlers/edit/editOnBeforeInput.js

@@ -155,14 +155,16 @@ function editOnBeforeInput(editor: DraftEditor, e: SyntheticInputEvent): void {
     )
   ) {
     e.preventDefault();
+    editor.update(newEditorState);
   } else {
-    // The native event is allowed to occur.
-    newEditorState = EditorState.set(newEditorState, {
+    // The native event is allowed to occur. To allow user onChange handlers to
+    // change the inserted text, we wait until the text is actually inserted
+    // before we actually update our state. That way when we rerender, the text
+    // we see in the DOM will already have been inserted properly.
+    editor._pendingStateFromBeforeInput = EditorState.set(newEditorState, {
       nativelyRenderedContent: newEditorState.getCurrentContent(),
     });
   }
-
-  editor.update(newEditorState);
 }
 
 module.exports = editOnBeforeInput;

src/component/handlers/edit/editOnInput.js

@@ -39,6 +39,11 @@ var DOUBLE_NEWLINE = '\n\n';
  * due to a spellcheck change, and we can incorporate it into our model.
  */
 function editOnInput(editor: DraftEditor): void {
+  if (editor._pendingStateFromBeforeInput !== undefined) {
+    editor.update(editor._pendingStateFromBeforeInput);
+    editor._pendingStateFromBeforeInput = undefined;
+  }
+
   var domSelection = global.getSelection();
 
   var {anchorNode, isCollapsed} = domSelection;