diff --git a/lib/components/content.js b/lib/components/content.js index b30b04740..c754cb7be 100644 --- a/lib/components/content.js +++ b/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}