fix: do not cancel CodeMirror compose beforeChange

src/index.tsx

@@ -386,6 +386,8 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
   /** @internal */
   private hydrated: boolean;
   /** @internal */
+  private hydratingCompose: boolean;
+  /** @internal */
   private initCb: () => void;
   /** @internal */
   private mirror: any;
@@ -408,6 +410,7 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
     this.deferred = null;
     this.emulating = false;
     this.hydrated = false;
+    this.hydratingCompose = false;
     this.initCb = () => {
       if (this.props.editorDidConfigure) {
         this.props.editorDidConfigure(this.editor);
@@ -437,7 +440,11 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
       });
     }
     if (!this.hydrated) {
-      this.deferred ? this.resolveChange(props.value) : this.initChange(props.value || '')
+      // A *compose beforeChange is still in flight: the native IME change
+      // will apply. Do not setValue/replaceRange over it.
+      if (!this.hydratingCompose) {
+        this.deferred ? this.resolveChange(props.value) : this.initChange(props.value || '')
+      }
     }
     this.hydrated = true;
   }
@@ -448,10 +455,20 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
     this.emulating = true;
 
     const doc = this.editor.getDoc();
+    const next = value || '';
+
+    // Controlled value updates after a native *compose change must not
+    // replaceRange/setValue the whole document (that resets IME state).
+    if (next === doc.getValue()) {
+      this.mirror.setValue(next);
+      this.emulating = false;
+      return;
+    }
+
     const lastLine = doc.lastLine();
     const lastChar = doc.getLine(doc.lastLine()).length;
 
-    doc.replaceRange(value || '',
+    doc.replaceRange(next,
       {line: 0, ch: 0},
       {line: lastLine, ch: lastChar});
 
@@ -537,6 +554,17 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
         return;
       }
 
+      // IME/dead-key composition uses origin "*compose". Cancelling it
+      // prevents CodeMirror from completing the composition lifecycle.
+      if (data.origin === '*compose') {
+        this.hydratingCompose = true;
+        let phantomChange = this.mirrorChange(data);
+        if (this.props.onBeforeChange)
+          this.props.onBeforeChange(this.editor, data, phantomChange);
+        this.hydratingCompose = false;
+        return;
+      }
+
       data.cancel();
 
       this.deferred = data;

test/index.spec.tsx

@@ -439,6 +439,45 @@ describe('Change', () => {
     const doc = wrapper.instance().editor.getDoc();
     doc.replaceRange('foo', {line: 1, ch: 1});
   });
+
+  // refs https://github.com/scniro/react-codemirror2/issues/327
+  // Cancelling beforeChange with origin "*compose" aborts IME/dead-key composition.
+  it('[Controlled] change:*compose is not cancelled', () => {
+    let composeData;
+    const wrapper = Enzyme.mount(
+      <Controlled
+        value='foo'
+        onBeforeChange={(editor, data, value) => {
+          composeData = data;
+        }}
+      />);
+    const doc = wrapper.instance().editor.getDoc();
+    doc.replaceRange('é', {line: 0, ch: 3}, {line: 0, ch: 3}, '*compose');
+    expect(composeData).toBeDefined();
+    expect(composeData.origin).toBe('*compose');
+    expect(composeData.canceled).toBe(false);
+    expect(doc.getValue()).toEqual('fooé');
+    wrapper.unmount();
+  });
+
+  it('[Controlled] change:*compose commits once when value is updated', () => {
+    let composeData;
+    const wrapper = Enzyme.mount(
+      <Controlled
+        value='foo'
+        onBeforeChange={(editor, data, value) => {
+          composeData = data;
+          wrapper.setProps({value});
+        }}
+      />);
+    const doc = wrapper.instance().editor.getDoc();
+    doc.replaceRange('é', {line: 0, ch: 3}, {line: 0, ch: 3}, '*compose');
+    expect(composeData).toBeDefined();
+    expect(composeData.origin).toBe('*compose');
+    expect(composeData.canceled).toBe(false);
+    expect(doc.getValue()).toEqual('fooé');
+    wrapper.unmount();
+  });
 });
 
 describe('Props', () => {