add basic composition support

lib/components/content.js

@@ -113,6 +113,7 @@ class Content extends React.Component {
   onBlur = (e) => {
     if (this.props.readOnly) return
     if (this.tmp.isCopying) return
+    if (this.tmp.isComposing) return
     let { state } = this.props
 
     state = state
@@ -133,6 +134,26 @@ class Content extends React.Component {
     this.props.onChange(state)
   }
 
+  /**
+   * On composition start, set the composing flag.
+   *
+   * @param {Event} e
+   */
+
+  onCompositionStart = (e) => {
+    this.tmp.isComposing = true
+  }
+
+  /**
+   * On composition end, remove the composing flag.
+   *
+   * @param {Event} e
+   */
+
+  onCompositionEnd = (e) => {
+    this.tmp.isComposing = false
+  }
+
   /**
    * On copy, defer to `onCutCopy`, then bubble up.
    *
@@ -140,6 +161,7 @@ class Content extends React.Component {
    */
 
   onCopy = (e) => {
+    if (this.tmp.isComposing) return
     this.onCutCopy(e)
   }
 
@@ -151,6 +173,7 @@ class Content extends React.Component {
 
   onCut = (e) => {
     if (this.props.readOnly) return
+    if (this.tmp.isComposing) return
     this.onCutCopy(e)
 
     // Once the cut has successfully executed, delete the current selection.
@@ -247,6 +270,7 @@ class Content extends React.Component {
 
   onPaste = (e) => {
     if (this.props.readOnly) return
+    if (this.tmp.isComposing) return
     e.preventDefault()
     const data = e.clipboardData
     const paste = {}
@@ -308,6 +332,7 @@ class Content extends React.Component {
     if (this.props.readOnly) return
     if (this.tmp.isRendering) return
     if (this.tmp.isCopying) return
+    if (this.tmp.isComposing) return
 
     let { state } = this.props
     let { document, selection } = state
@@ -366,6 +391,8 @@ class Content extends React.Component {
         style={style}
         onBeforeInput={this.onBeforeInput}
         onBlur={this.onBlur}
+        onCompositionEnd={this.onCompositionEnd}
+        onCompositionStart={this.onCompositionStart}
         onCopy={this.onCopy}
         onCut={this.onCut}
         onKeyDown={this.onKeyDown}