Fix handleBeforeInput not working problem when typing in IME

[bowbowbow]

Summary

handleBeforeInput, one of Editor's props, doesn't work when typing in IME like Japanese and korean.

Related Issues

1. handleBeforeInput is not trigger when input using an IME handleBeforeInput is not trigger when input using an IME #819
2. How to detect unicode input event? How to detect unicode input event? #693
3. HandleBeforeInput doesn't work when typing in Japanese. HandleBeforeInput doesn't work when typing in Japanese. #631

The cause of this problem is that this.props.handleBeforeInput is used in edit mode but it is not used in composite mode.

More specifically, editOnBeforeInput(onBeforeInput handler) in /src/handler/edit/editOnBeforeInput.js use this.props.handleBeforeInput, but onBeforeInput in /src/handler/composition/DraftEditorCompositionHandler.js doesn't use it.

I solved this problem by adding the edit mode logic to the composite mode.

close #819, #631

Test Plan

• Add handelBeforeInput to Editor's props of example.

_handleBeforeInput(chars) {
  console.log(':: handleBeforeInput :: ', chars);
  return false; // or return true;
}

• Typing Korean and Japanese.
• Check handleBeforeInput working correctly

[ouchxp]

I had the same issue. Hope this PR could be accepted soon.

[flarnie]

I commented on the original issue, and it's relevant to say here too:

Last week I discussed this with the other maintainers, and we found some issues that will come up with exposing 'handleBeforeInput' during a 'composition'. When a person is entering Chinese, Korean, or other characters with IME input, Draft is building up a "composition" and the DOM is in an uncertain state. We don't want to allow any interruption until the composition is finished.

We would like to provide examples of how to do the same thing using a different approach - and for this it would be helpful to get specific examples of the functionality you need in the editor. I am going to pull in some folks to work on it, and update the issue as we make progress.

[hingermayank]

Hi @flarnie we have a use case where we have implemented grammar check in draft js editor. When we get onChange we make an API call to get the grammar errors. We use decorators and entities to highlight the errors. So once we get the response from API, we create entities and update the editor state. In case of composition (IME inputs), this is resulting in the removal of the content that is yet in composition mode. This is very critical for us as we have users who type in Korean and Japanese.
Can you please here as to how we can tackle this?