fix(android keyboard): compositionEvents - based on facebookarchive#1774

Author: Jonathan Bachman

src/component/base/DraftEditor.react.js

@@ -143,6 +143,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 +288,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

@@ -23,6 +23,7 @@ const Keys = require('Keys');
 const getEntityKeyForSelection = require('getEntityKeyForSelection');
 const isEventHandled = require('isEventHandled');
 const isSelectionAtLeafStart = require('isSelectionAtLeafStart');
+const onInput = require('editOnInput');
 
 /**
  * Millisecond delay to allow `compositionstart` to fire again upon
@@ -44,11 +45,13 @@ const RESOLVE_DELAY = 20;
  */
 let resolved = false;
 let stillComposing = false;
-let textInputData = '';
+let beforeInputData = null;
+let compositionUpdateData = null;
+let compositionEndData = null;
 
 var DraftEditorCompositionHandler = {
   onBeforeInput: function(editor: DraftEditor, e: SyntheticInputEvent<>): void {
-    textInputData = (textInputData || '') + e.data;
+    beforeInputData = (beforeInputData || '') + e.data;
   },
 
   /**
@@ -59,6 +62,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 +87,13 @@ 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: SyntheticInputEvent<>,
+  ): void {
     resolved = false;
     stillComposing = false;
+    compositionEndData = compositionEndData || e.data;
     setTimeout(() => {
       if (!resolved) {
         DraftEditorCompositionHandler.resolveComposition(editor);
@@ -115,6 +133,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,13 +182,13 @@ var DraftEditorCompositionHandler = {
     }
 
     resolved = true;
-    const composedChars = textInputData;
-    textInputData = '';
-
-    const editorState = EditorState.set(editor._latestEditorState, {
-      inCompositionMode: false,
-    });
+    let composedChars;
+    composedChars = this.normalizeCompositionInput();
+    beforeInputData = null;
+    compositionUpdateData = null;
+    compositionEndData = null;
 
+    const editorState = editor._latestEditorState;
     const currentStyle = editorState.getCurrentInlineStyle();
     const entityKey = getEntityKeyForSelection(
       editorState.getCurrentContent(),
@@ -186,6 +232,15 @@ var DraftEditorCompositionHandler = {
       return;
     }
 
+    onInput(editor);
+    editor.restoreEditorDOM();
+    editor.update(
+      EditorState.set(editorState, {
+        nativelyRenderedContent: null,
+        inCompositionMode: false,
+      }),
+    );
+
     if (mustReset) {
       editor.update(
         EditorState.set(editorState, {