Improved version of "Fix modifying state during onChange ... facebook…

…archive#667" (facebookarchive#871)

This fixes some issues with the fix originally merged from PR facebookarchive#667[2]

Credit to @balpert and @srmcconomy for this fix. For now I'm getting
them back in sync.

Also thanks to @davidchang for pinging me about landing this,
@colinjeane for reporting this bug in facebookarchive#917 and submitting a nearly
identical fix: facebookarchive#919

@colinjeane since we already had this fixed internally I'm going to use
our approach to keep things in sync.

fixes facebookarchive#917, facebookarchive#849

[2]: facebookarchive#667

We also had to tweak this compared to the current internal version to
accomodate a recent change that makes 'editOnBeforeInput' and the other
handlers take 'editor' as an explicit argument instead of assumming
'this' will be the editor;
facebookarchive@e64c2c3

Note that we are updating the version of 'fbjs' required in order to get
access to the 'setImmediate' polyfill.

package.json

@@ -30,7 +30,7 @@
     "test-ci": "NODE_ENV=test npm run lint && npm run flow && npm run test"
   },
   "dependencies": {
-    "fbjs": "^0.8.3",
+    "fbjs": "^0.8.7",
     "immutable": "~3.7.4",
     "object-assign": "^4.1.0"
   },

src/.flowconfig

@@ -19,6 +19,7 @@ esproposal.class_static_fields=enable
 suppress_type=$FlowIssue
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(2[0-8]\\|1[0-9]\\|[0-9]\\).[0-9]\\)? *\\).*\n
 module.name_mapper='ReactDOM' -> 'react-dom'
+module.name_mapper='setImmediate' -> 'fbjs/lib/setImmediate'
 
 [version]
 0.32.0

src/component/handlers/edit/editOnBeforeInput.js

@@ -20,6 +20,7 @@ var UserAgent = require('UserAgent');
 var getEntityKeyForSelection = require('getEntityKeyForSelection');
 var isSelectionAtLeafStart = require('isSelectionAtLeafStart');
 var nullthrows = require('nullthrows');
+var setImmediate = require('setImmediate');
 
 import type DraftEditor from 'DraftEditor.react';
 import type {DraftInlineStyle} from 'DraftInlineStyle';
@@ -75,6 +76,11 @@ function replaceText(
  * occurs on the relevant text nodes.
  */
 function editOnBeforeInput(editor: DraftEditor, e: SyntheticInputEvent): void {
+  if (editor._pendingStateFromBeforeInput !== undefined) {
+    editor.update(editor._pendingStateFromBeforeInput);
+    editor._pendingStateFromBeforeInput = undefined;
+  }
+
   var chars = e.data;
 
   // In some cases (ex: IE ideographic space insertion) no character data
@@ -157,12 +163,19 @@ function editOnBeforeInput(editor: DraftEditor, e: SyntheticInputEvent): void {
     e.preventDefault();
     editor.update(newEditorState);
   } else {
+    newEditorState = EditorState.set(newEditorState, {
+      nativelyRenderedContent: newEditorState.getCurrentContent(),
+    });
     // 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._pendingStateFromBeforeInput = newEditorState;
+    setImmediate(() => {
+      if (editor._pendingStateFromBeforeInput !== undefined) {
+        editor.update(editor._pendingStateFromBeforeInput);
+        editor._pendingStateFromBeforeInput = undefined;
+      }
     });
   }
 }

src/component/handlers/edit/editOnSelect.js

@@ -20,10 +20,8 @@ var getDraftEditorSelection = require('getDraftEditorSelection');
 import type DraftEditor from 'DraftEditor.react';
 
 function editOnSelect(editor: DraftEditor): void {
-  if (editor._blockSelectEvents) {
-    return;
-  }
-  if (editor._latestEditorState !== editor.props.editorState) {
+  if (editor._blockSelectEvents ||
+      editor._latestEditorState !== editor.props.editorState) {
     return;
   }
 

website/package.json

@@ -7,7 +7,7 @@
     "compression": "1.2.2",
     "connect": "3.3.3",
     "errorhandler": "1.3.0",
-    "fbjs": "^0.8.0-alpha.1",
+    "fbjs": "^0.8.7",
     "fs.extra": "*",
     "glob": "*",
     "immutable": "^3.7.6",