Add composition events to React.

Composition events make it possible to detect IME entry/exit. https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent

Author: joshduck

src/core/ReactEventEmitter.js

@@ -263,6 +263,22 @@ var ReactEventEmitter = merge(ReactEventEmitterMixin, {
  mountAt
  );
 
+ trapBubbledEvent(
+ topLevelTypes.topCompositionEnd,
+ 'compositionend',
+ mountAt
+ );
+ trapBubbledEvent(
+ topLevelTypes.topCompositionStart,
+ 'compositionstart',
+ mountAt
+ );
+ trapBubbledEvent(
+ topLevelTypes.topCompositionUpdate,
+ 'compositionupdate',
+ mountAt
+ );
+
  if (isEventSupported('drag')) {
  trapBubbledEvent(topLevelTypes.topDrag, 'drag', mountAt);
  trapBubbledEvent(topLevelTypes.topDragEnd, 'dragend', mountAt);

src/event/EventConstants.js

@@ -29,6 +29,9 @@ var topLevelTypes = keyMirror({
  topBlur: null,
  topChange: null,
  topClick: null,
+ topCompositionEnd: null,
+ topCompositionStart: null,
+ topCompositionUpdate: null,
  topCopy: null,
  topCut: null,
  topDOMCharacterDataModified: null,

src/event/synthetic/SyntheticCompositionEvent.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @providesModule SyntheticCompositionEvent
+ * @typechecks static-only
+ */
+
+"use strict";
+
+var SyntheticEvent = require('SyntheticEvent');
+
+/**
+ * @interface Event
+ * @see http://www.w3.org/TR/DOM-Level-3-Events/#events-compositionevents
+ */
+var CompositionEventInterface = {
+ data: null
+};
+
+/**
+ * @param {object} dispatchConfig Configuration used to dispatch this event.
+ * @param {string} dispatchMarker Marker identifying the event target.
+ * @param {object} nativeEvent Native browser event.
+ * @extends {SyntheticUIEvent}
+ */
+function SyntheticCompositionEvent(
+ dispatchConfig,
+ dispatchMarker,
+ nativeEvent) {
+ SyntheticEvent.call(this, dispatchConfig, dispatchMarker, nativeEvent);
+}
+
+SyntheticEvent.augmentClass(
+ SyntheticCompositionEvent,
+ CompositionEventInterface
+);
+
+module.exports = SyntheticCompositionEvent;
+

src/eventPlugins/SimpleEventPlugin.js

@@ -21,6 +21,7 @@
 var EventConstants = require('EventConstants');
 var EventPropagators = require('EventPropagators');
 var SyntheticClipboardEvent = require('SyntheticClipboardEvent');
+var SyntheticCompositionEvent = require('SyntheticCompositionEvent');
 var SyntheticEvent = require('SyntheticEvent');
 var SyntheticFocusEvent = require('SyntheticFocusEvent');
 var SyntheticKeyboardEvent = require('SyntheticKeyboardEvent');
@@ -48,6 +49,24 @@ var eventTypes = {
  captured: keyOf({onClickCapture: true})
  }
  },
+ compositionEnd: {
+ phasedRegistrationNames: {
+ bubbled: keyOf({onCompositionEnd: true}),
+ captured: keyOf({onCompositionEndCapture: true})
+ }
+ },
+ compositionStart: {
+ phasedRegistrationNames: {
+ bubbled: keyOf({onCompositionStart: true}),
+ captured: keyOf({onCompositionStartCapture: true})
+ }
+ },
+ compositionUpdate: {
+ phasedRegistrationNames: {
+ bubbled: keyOf({onCompositionUpdate: true}),
+ captured: keyOf({onCompositionUpdateCapture: true})
+ }
+ },
  copy: {
  phasedRegistrationNames: {
  bubbled: keyOf({onCopy: true}),
@@ -225,6 +244,9 @@ var topLevelEventsToDispatchConfig = {
  topClick: eventTypes.click,
  topCopy: eventTypes.copy,
  topCut: eventTypes.cut,
+ topCompositionEnd: eventTypes.compositionEnd,
+ topCompositionStart: eventTypes.compositionStart,
+ topCompositionUpdate: eventTypes.compositionUpdate,
  topDoubleClick: eventTypes.doubleClick,
  topDOMCharacterDataModified: eventTypes.DOMCharacterDataModified,
  topDrag: eventTypes.drag,
@@ -342,6 +364,11 @@ var SimpleEventPlugin = {
  case topLevelTypes.topPaste:
  EventConstructor = SyntheticClipboardEvent;
  break;
+ case topLevelTypes.topCompositionStart:
+ case topLevelTypes.topCompositionEnd:
+ case topLevelTypes.topCompositionUpdate:
+ EventConstructor = SyntheticCompositionEvent;
+ break;
  }
  invariant(
  EventConstructor,