Input bugs (#2)

* Modified compositoin mode event handlers to provide better support for mobile browsers

* Added test cases for DraftEditorCompositionHandler

* Linter compliance

* Added support for `compositionupdate` event.

* Made the linter happy!

* Normalize beforeInput and compositionUpdate data

This continues from
facebookarchive#1152 and
facebookarchive#1285
making them work together for broad support for polatform
inconsistencies.

* Put new composition fixes behind a feature flag

* lint

* correct resets

* Fix Synthetic Event flow types

* Convert DraftEditorCompositionHandler tests to root tests + snapshots

* Remove unnecessary DraftFeatureFlags

Author: aminland

src/component/base/DraftEditor.react.js

@@ -96,6 +96,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
   _onCharacterData: Function;
   _onCompositionEnd: Function;
   _onCompositionStart: Function;
+  _onCompositionUpdate: Function;
   _onCopy: Function;
   _onCut: Function;
   _onDragEnd: Function;
@@ -143,6 +144,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
     this._onCharacterData = this._buildHandler('onCharacterData');
     this._onCompositionEnd = this._buildHandler('onCompositionEnd');
     this._onCompositionStart = this._buildHandler('onCompositionStart');
+    this._onCompositionUpdate = this._buildHandler('onCompositionUpdate');
     this._onCopy = this._buildHandler('onCopy');
     this._onCut = this._buildHandler('onCut');
     this._onDragEnd = this._buildHandler('onDragEnd');
@@ -287,6 +289,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
             onBlur={this._onBlur}
             onCompositionEnd={this._onCompositionEnd}
             onCompositionStart={this._onCompositionStart}
+            onCompositionUpdate={this._onCompositionUpdate}
             onCopy={this._onCopy}
             onCut={this._onCut}
             onDragEnd={this._onDragEnd}

src/component/handlers/composition/DraftEditorCompositionHandler.js

@@ -45,10 +45,24 @@ const RESOLVE_DELAY = 20;
 let resolved = false;
 let stillComposing = false;
 let textInputData = '';
+let beforeInputData = null;
+let compositionUpdateData = null;
+let compositionEndData = null;
 
 var DraftEditorCompositionHandler = {
+  /**
+   * Some IMEs (Firefox Mobile, notably) fire multiple `beforeinput` events
+   * which include the text so far typed, in addition to (broken)
+   * `compositionend` events. In these cases, we construct beforeInputData from
+   * the `beforeinput` and cnsider that to be the definitive version of what
+   * was actually typed.
+   *
+   * Proper, compliant browsers will not do this and will instead include the
+   * entire resolved composition result in the `data` member of the
+   * `compositionend` events that they fire.
+   */
   onBeforeInput: function(editor: DraftEditor, e: SyntheticInputEvent<>): void {
-    textInputData = (textInputData || '') + e.data;
+    beforeInputData = (beforeInputData || '') + e.data;
   },
 
   /**
@@ -59,6 +73,17 @@ var DraftEditorCompositionHandler = {
     stillComposing = true;
   },
 
+  /**
+   * A `compositionupdate` event has fired. Update the current composition
+   * session.
+   */
+  onCompositionUpdate: function(
+    editor: DraftEditor,
+    e: SyntheticInputEvent<>,
+  ): void {
+    compositionUpdateData = e.data;
+  },
+
   /**
    * Attempt to end the current composition session.
    *
@@ -73,9 +98,14 @@ var 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: function(
+    editor: DraftEditor,
+    e: SyntheticCompositionEvent<>,
+  ): void {
     resolved = false;
     stillComposing = false;
+    // Use e.data from the first compositionend event seen
+    compositionEndData = compositionEndData || e.data;
     setTimeout(() => {
       if (!resolved) {
         DraftEditorCompositionHandler.resolveComposition(editor);
@@ -115,6 +145,34 @@ var DraftEditorCompositionHandler = {
     }
   },
 
+  /**
+   * Normalizes platform inconsistencies with input event data.
+   *
+   * When beforeInputData is present, it is only preferred if its length
+   * is greater than that of the last compositionUpdate event data. This is
+   * meant to resolve IME incosistencies where compositionUpdate may contain
+   * only the last character or the entire composition depending on language
+   * (e.g. Korean vs. Japanese).
+   *
+   * When beforeInputData is not present, compositionUpdate data is preferred.
+   * This resolves issues with some platforms where beforeInput is never fired
+   * (e.g. Android with certain keyboard and browser combinations).
+   *
+   * Lastly, if neither beforeInput nor compositionUpdate events are fired, use
+   * the data in the compositionEnd event
+   */
+  normalizeCompositionInput: function(): ?string {
+    const beforeInputDataLength = beforeInputData ? beforeInputData.length : 0;
+    const compositionUpdateDataLength = compositionUpdateData
+      ? compositionUpdateData.length
+      : 0;
+    const updateData =
+      beforeInputDataLength > compositionUpdateDataLength
+        ? beforeInputData
+        : compositionUpdateData;
+    return updateData || compositionEndData;
+  },
+
   /**
    * Attempt to insert composed characters into the document.
    *
@@ -136,8 +194,12 @@ var DraftEditorCompositionHandler = {
     }
 
     resolved = true;
-    const composedChars = textInputData;
-    textInputData = '';
+
+    let composedChars;
+    composedChars = this.normalizeCompositionInput();
+    beforeInputData = null;
+    compositionUpdateData = null;
+    compositionEndData = null;
 
     const editorState = EditorState.set(editor._latestEditorState, {
       inCompositionMode: false,