Fix iOS double-space quick-type bug

Summary:
Using a Pull Request from github that was made to fix this very bug, I was able to patch the code and fix the problem for us in the meantime.

Since the open-source and internal codebases are totally out of sync, it's not easy to merge the original PR right now.

#1152

Reviewed By: claudiopro

Differential Revision: D20016281

fbshipit-source-id: aeefd5c3f17c51c62dd5d7c225cf62d0cd2db26f

Author: nmn

src/component/handlers/composition/DraftEditorCompositionHandler.js

@@ -46,6 +46,8 @@ const RESOLVE_DELAY = 20;
 let resolved = false;
 let stillComposing = false;
 let domObserver = null;
+let beforeInputData = null;
+let compositionEndData = null;
 
 function startDOMObserver(editor: DraftEditor) {
   if (!domObserver) {
@@ -55,11 +57,14 @@ function startDOMObserver(editor: DraftEditor) {
 }
 
 const DraftEditorCompositionHandler = {
+  onBeforeInput(_editor: DraftEditor, e: SyntheticInputEvent<>): void {
+    beforeInputData = (beforeInputData || '') + e.data;
+  },
   /**
    * A `compositionstart` event has fired while we're still in composition
    * mode. Continue the current composition session to prevent a re-render.
    */
-  onCompositionStart: function(editor: DraftEditor): void {
+  onCompositionStart(editor: DraftEditor): void {
     stillComposing = true;
     startDOMObserver(editor);
   },
@@ -78,9 +83,13 @@ const DraftEditorCompositionHandler = {
    * twice could break the DOM, we only use the first event. Example: Arabic
    * Google Input Tools on Windows 8.1 fires `compositionend` three times.
    */
-  onCompositionEnd: function(editor: DraftEditor): void {
+  onCompositionEnd(editor: DraftEditor, e: SyntheticInputEvent<>): void {
     resolved = false;
     stillComposing = false;
+
+    // Use e.data from the first compositionend event seen
+    compositionEndData = compositionEndData ?? e?.data ?? null;
+
     setTimeout(() => {
       if (!resolved) {
         DraftEditorCompositionHandler.resolveComposition(editor);
@@ -95,7 +104,7 @@ const DraftEditorCompositionHandler = {
    * the arrow keys are used to commit, prevent default so that the cursor
    * doesn't move, otherwise it will jump back noticeably on re-render.
    */
-  onKeyDown: function(editor: DraftEditor, e: SyntheticKeyboardEvent<>): void {
+  onKeyDown(editor: DraftEditor, e: SyntheticKeyboardEvent<>): void {
     if (!stillComposing) {
       // If a keydown event is received after compositionend but before the
       // 20ms timer expires (ex: type option-E then backspace, or type A then
@@ -116,7 +125,7 @@ const DraftEditorCompositionHandler = {
    * characters that we do not want. `preventDefault` allows the composition
    * to be committed while preventing the extra characters.
    */
-  onKeyPress: function(editor: DraftEditor, e: SyntheticKeyboardEvent<>): void {
+  onKeyPress(_editor: DraftEditor, e: SyntheticKeyboardEvent<>): void {
     if (e.which === Keys.RETURN) {
       e.preventDefault();
     }
@@ -137,7 +146,7 @@ const DraftEditorCompositionHandler = {
    * Resetting innerHTML will move focus to the beginning of the editor,
    * so we update to force it back to the correct place.
    */
-  resolveComposition: function(editor: DraftEditor): void {
+  resolveComposition(editor: DraftEditor): void {
     if (stillComposing) {
       return;
     }
@@ -146,12 +155,36 @@ const DraftEditorCompositionHandler = {
     domObserver = null;
     resolved = true;
 
+    const composedChars = beforeInputData ?? compositionEndData;
+    beforeInputData = null;
+    compositionEndData = null;
+
     let editorState = EditorState.set(editor._latestEditorState, {
       inCompositionMode: false,
     });
 
     editor.exitCurrentMode();
 
+    if (composedChars != null) {
+      const currentStyle = editorState.getCurrentInlineStyle();
+      const entityKey = getEntityKeyForSelection(
+        editorState.getCurrentContent(),
+        editorState.getSelection(),
+      );
+      // If characters have been composed, re-rendering with the update
+      // is sufficient to reset the editor.
+      const contentState = DraftModifier.replaceText(
+        editorState.getCurrentContent(),
+        editorState.getSelection(),
+        composedChars,
+        currentStyle,
+        entityKey,
+      );
+      editor.update(
+        EditorState.push(editorState, contentState, 'insert-characters'),
+      );
+    }
+
     if (!mutations.size) {
       editor.update(editorState);
       return;