Fixing major Android editing issues

src/component/handlers/composition/DOMObserver.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ * @emails oncall+draft_js
+ */
+
+'use strict';
+
+const UserAgent = require('UserAgent');
+const Immutable = require('immutable');
+
+const findAncestorOffsetKey = require('findAncestorOffsetKey');
+const invariant = require('invariant');
+const nullthrows = require('nullthrows');
+
+const {OrderedMap} = Immutable;
+
+type MutationRecordT = MutationRecord | {|type: 'characterData', target: Node|};
+
+// Heavily based on Prosemirror's DOMObserver https://github.com/ProseMirror/prosemirror-view/blob/master/src/domobserver.js
+
+const DOM_OBSERVER_OPTIONS = {
+  subtree: true,
+  characterData: true,
+  characterDataOldValue: true,
+  childList: true,
+  attributes: false,
+};
+// IE11 has very broken mutation observers, so we also listen to DOMCharacterDataModified
+const USE_CHAR_DATA = UserAgent.isBrowser('IE <= 11');
+
+class DOMObserver {
+  observer: MutationObserver;
+  container: HTMLElement;
+  mutations: OrderedMap<string, string>;
+  onCharData: ({target: EventTarget, type: string}) => void;
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.mutations = new OrderedMap();
+    if (window.MutationObserver && !USE_CHAR_DATA) {
+      this.observer = new window.MutationObserver(mutations =>
+        this.registerMutations(mutations),
+      );
+    } else {
+      this.onCharData = e => {
+        invariant(e.target instanceof Node);
+        this.registerMutation({
+          type: 'characterData',
+          target: e.target,
+        });
+      };
+    }
+  }
+
+  start() {
+    if (this.observer) {
+      this.observer.observe(this.container, DOM_OBSERVER_OPTIONS);
+    } else {
+      this.container.addEventListener(
+        'DOMCharacterDataModified',
+        this.onCharData,
+      );
+    }
+  }
+
+  stopAndFlushMutations() {
+    if (this.observer) {
+      this.registerMutations(this.observer.takeRecords());
+      this.observer.disconnect();
+    } else {
+      this.container.removeEventListener(
+        'DOMCharacterDataModified',
+        this.onCharData,
+      );
+    }
+    const mutations = this.mutations;
+    this.mutations = new OrderedMap();
+    return mutations;
+  }
+
+  registerMutations(mutations: Array<MutationRecord>) {
+    for (let i = 0; i < mutations.length; i++) {
+      this.registerMutation(mutations[i]);
+    }
+  }
+
+  getMutationTextContent({target, type, removedNodes}: MutationRecord) {
+    if (type === 'characterData') {
+      return target.textContent;
+    }
+    // `characterData` events won't happen when removing the last
+    // character of a leaf node, what happens instead is a
+    // `childList` event with a `removedNodes` array. For this case
+    // the textContent should be '' and `DraftModifier.replaceText`
+    // will make sure the content is updated properly.
+    if (type === 'childList' && removedNodes.length) {
+      return '';
+    }
+    return null;
+  }
+
+  registerMutation(mutation: MutationRecordT) {
+    const textContent = this.getMutationTextContent(mutation);
+    if (textContent != null) {
+      const offsetKey = nullthrows(findAncestorOffsetKey(mutation.target));
+      this.mutations = this.mutations.set(offsetKey, textContent);
+    }
+  }
+}
+
+module.exports = DOMObserver;

src/component/handlers/composition/DraftEditorCompositionHandler.js

@@ -16,11 +16,13 @@ import type DraftEditor from 'DraftEditor.react';
 const DraftModifier = require('DraftModifier');
 const EditorState = require('EditorState');
 const Keys = require('Keys');
+const DraftOffsetKey = require('DraftOffsetKey');
+const DOMObserver = require('DOMObserver');
 
+const nullthrows = require('nullthrows');
 const getEntityKeyForSelection = require('getEntityKeyForSelection');
-const gkx = require('gkx');
-const isEventHandled = require('isEventHandled');
-const isSelectionAtLeafStart = require('isSelectionAtLeafStart');
+const getDraftEditorSelection = require('getDraftEditorSelection');
+const getContentEditableContainer = require('getContentEditableContainer');
 
 /**
  * Millisecond delay to allow `compositionstart` to fire again upon
@@ -42,19 +44,23 @@ const RESOLVE_DELAY = 20;
  */
 let resolved = false;
 let stillComposing = false;
-let textInputData = '';
+let domObserver = null;
 
-const DraftEditorCompositionHandler = {
-  onBeforeInput: function(editor: DraftEditor, e: SyntheticInputEvent<>): void {
-    textInputData = (textInputData || '') + e.data;
-  },
+function startDOMObserver(editor: DraftEditor) {
+  if (!domObserver) {
+    domObserver = new DOMObserver(getContentEditableContainer(editor));
+    domObserver.start();
+  }
+}
 
+var DraftEditorCompositionHandler = {
   /**
    * 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 {
     stillComposing = true;
+    startDOMObserver(editor);
   },
 
   /**
@@ -71,7 +77,10 @@ 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, e: SyntheticEvent<>): void {
+  onCompositionEnd: function(
+    editor: DraftEditor,
+    e: SyntheticCompositionEvent<>,
+  ): void {
     resolved = false;
     stillComposing = false;
     setTimeout(() => {
@@ -136,69 +145,98 @@ const DraftEditorCompositionHandler = {
       return;
     }
 
+    const mutations = nullthrows(domObserver).stopAndFlushMutations();
+    domObserver = null;
     resolved = true;
-    const composedChars = textInputData;
-    textInputData = '';
 
-    const editorState = EditorState.set(editor._latestEditorState, {
+    let editorState = EditorState.set(editor._latestEditorState, {
       inCompositionMode: false,
     });
 
-    const currentStyle = editorState.getCurrentInlineStyle();
-    const entityKey = getEntityKeyForSelection(
-      editorState.getCurrentContent(),
-      editorState.getSelection(),
-    );
-
-    const mustReset =
-      !composedChars ||
-      isSelectionAtLeafStart(editorState) ||
-      currentStyle.size > 0 ||
-      entityKey !== null;
-
-    if (mustReset) {
-      editor.restoreEditorDOM();
-    }
-
     editor.exitCurrentMode();
 
-    if (composedChars) {
-      if (
-        gkx('draft_handlebeforeinput_composed_text') &&
-        editor.props.handleBeforeInput &&
-        isEventHandled(
-          editor.props.handleBeforeInput(
-            composedChars,
-            editorState,
-            event.timeStamp,
-          ),
-        )
-      ) {
-        return;
-      }
-      // 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) {
       return;
     }
 
-    if (mustReset) {
-      editor.update(
-        EditorState.set(editorState, {
-          nativelyRenderedContent: null,
-          forceSelection: true,
-        }),
-      );
-    }
+    // Save current selection before restoring the DOM, so we can, so
+    // we can re-apply on compositionEnd.
+    const documentSelection = getDraftEditorSelection(
+      editorState,
+      getContentEditableContainer(editor),
+    );
+    const initialSelectionState = documentSelection.selectionState;
+
+    editor.restoreEditorDOM();
+
+    // TODO, check if Facebook still needs this flag or if it could be removed.
+    // Since there can be multiple mutations providing a `composedChars` doesn't
+    // apply well on this new model.
+    // if (
+    //   gkx('draft_handlebeforeinput_composed_text') &&
+    //   editor.props.handleBeforeInput &&
+    //   isEventHandled(
+    //     editor.props.handleBeforeInput(
+    //       composedChars,
+    //       editorState,
+    //       event.timeStamp,
+    //     ),
+    //   )
+    // ) {
+    //   return;
+    // }
+
+    const contentState = mutations.reduce(
+      (contentState, composedChars, offsetKey) => {
+        const {blockKey, decoratorKey, leafKey} = DraftOffsetKey.decode(
+          offsetKey,
+        );
+
+        const {start, end} = editorState
+          .getBlockTree(blockKey)
+          .getIn([decoratorKey, 'leaves', leafKey]);
+
+        const replacementRange = editorState.getSelection().merge({
+          anchorKey: blockKey,
+          focusKey: blockKey,
+          anchorOffset: start,
+          focusOffset: end,
+          isBackward: false,
+        });
+
+        const entityKey = getEntityKeyForSelection(
+          contentState,
+          replacementRange,
+        );
+        const currentStyle = contentState
+          .getBlockForKey(blockKey)
+          .getInlineStyleAt(start);
+
+        // If characters have been composed, re-rendering with the update
+        // is sufficient to reset the editor.
+        return DraftModifier.replaceText(
+          contentState,
+          replacementRange,
+          composedChars,
+          currentStyle,
+          entityKey,
+        );
+      },
+      editorState.getCurrentContent(),
+    );
+
+    const contentWithAdjustedSelection = contentState.merge({
+      selectionBefore: contentState.getSelectionAfter(),
+      selectionAfter: initialSelectionState,
+    });
+
+    editor.update(
+      EditorState.push(
+        editorState,
+        contentWithAdjustedSelection,
+        'insert-characters',
+      ),
+    );
   },
 };
 

src/component/handlers/edit/editOnInput.js

@@ -21,11 +21,20 @@ const UserAgent = require('UserAgent');
 const findAncestorOffsetKey = require('findAncestorOffsetKey');
 const gkx = require('gkx');
 const nullthrows = require('nullthrows');
+const keyCommandPlainBackspace = require('keyCommandPlainBackspace');
 
 const isGecko = UserAgent.isEngine('Gecko');
 
 const DOUBLE_NEWLINE = '\n\n';
 
+function onInputType(inputType: string, editorState: EditorState): EditorState {
+  switch (inputType) {
+    case 'deleteContentBackward':
+      return keyCommandPlainBackspace(editorState);
+  }
+  return editorState;
+}
+
 /**
  * This function is intended to handle spellcheck and autocorrect changes,
  * which occur in the DOM natively without any opportunity to observe or
@@ -38,7 +47,7 @@ const DOUBLE_NEWLINE = '\n\n';
  * when an `input` change leads to a DOM/model mismatch, the change should be
  * due to a spellcheck change, and we can incorporate it into our model.
  */
-function editOnInput(editor: DraftEditor): void {
+function editOnInput(editor: DraftEditor, e: SyntheticInputEvent<>): void {
   if (editor._pendingStateFromBeforeInput !== undefined) {
     editor.update(editor._pendingStateFromBeforeInput);
     editor._pendingStateFromBeforeInput = undefined;
@@ -111,6 +120,18 @@ function editOnInput(editor: DraftEditor): void {
     // standard onkeydown/pressed events and only fired editOnInput
     // so domText is already changed by the browser and ends up being equal
     // to modelText unexpectedly
+
+    /* $FlowFixMe inputType is only defined on a draft of a standard. 
+    * https://w3c.github.io/input-events/#dom-inputevent-inputtype */
+    const {inputType} = e.nativeEvent;
+    // TODO add check for "input events level 2" https://w3c.github.io/input-events/#dom-inputevent-inputtype
+    if (inputType) {
+      let newEditorState = onInputType(inputType, editorState);
+      if (newEditorState !== editorState) {
+        editor.restoreEditorDOM();
+        return void editor.update(newEditorState);
+      }
+    }
     return;
   }