Controlled: support transforming value

scniro · Jul 24, 2019 · 49b0dcc · 49b0dcc
1 parent a633e7d
commit 49b0dcc
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 18 deletions.
diff --git a/.ts/index.js b/.ts/index.js
diff --git a/docs/app.min.js b/docs/app.min.js
diff --git a/index.js b/index.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.tsx b/src/index.tsx
@@ -416,7 +416,7 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
       });
     }
     if (!this.hydrated) {
-      this.deferred ? this.resolveChange() : this.initChange(props.value || '')
+      this.deferred ? this.resolveChange(props.value) : this.initChange(props.value || '')
     }
     this.hydrated = true;
   }
@@ -442,7 +442,7 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
   }
 
   /** @internal */
-  private resolveChange() {
+  private resolveChange(value) {
 
     this.emulating = true;
 
@@ -456,6 +456,12 @@ export class Controlled extends React.Component<IControlledCodeMirror, any> {
       doc.replaceRange(this.deferred.text, this.deferred.from, this.deferred.to, this.deferred.origin);
     }
 
+    if (value && value !== doc.getValue()) {
+      const cursor = doc.getCursor();
+      doc.setValue(value);
+      doc.setCursor(cursor);
+    }
+
     this.emulating = false;
     this.deferred = null;
   }

diff --git a/test/index.spec.tsx b/test/index.spec.tsx
@@ -362,6 +362,23 @@ describe('Change', () => {
     const doc = wrapper.instance().editor.getDoc();
     doc.replaceRange('bar', {line: 1, ch: 1});
   });
+
+  it('[Controlled] transform value', done => {
+    const wrapper = Enzyme.mount(
+      <Controlled
+        value='foo'
+        onBeforeChange={(editor, data, value) => {
+          wrapper.setProps({value: value.replace(/o/g, 'p')});
+        }}
+        onChange={(editor, data, value) => {
+          expect(value).toEqual('fppfpp');
+          expect(editor.getValue()).toEqual('fppfpp');
+          done();
+        }}
+      />);
+    const doc = wrapper.instance().editor.getDoc();
+    doc.replaceRange('foo', {line: 1, ch: 1});
+  });
 });
 
 describe('Props', () => {