diff --git a/.npmignore b/.npmignore
index 8a984a1..0cbece8 100644
--- a/.npmignore
+++ b/.npmignore
@@ -9,3 +9,4 @@ docs
 src
 test
 gulpfile.js
+node_modules
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8320819..6307401 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+5.0.3
+==================
+* #88
+
+5.0.2
+==================
+
+
 5.0.1
 ==================
 * #78
diff --git a/index.js b/index.js
index 44dddee..102eafc 100644
--- a/index.js
+++ b/index.js
@@ -1,635 +1,580 @@
-'use strict';
-
-var _extends = Object.assign || function(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
-  return target;
-};
-
-var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function(obj) {
-  return typeof obj;
-} : function(obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-};
-
-var __extends = undefined && undefined.__extends || function() {
-  var extendStatics = Object.setPrototypeOf || {
-    __proto__: []
-  }
-  instanceof Array && function(d, b) {
-    d.__proto__ = b;
-  } || function(d, b) {
-    for (var p in b) {
-      if (b.hasOwnProperty(p)) d[p] = b[p];
-    }
-  };
-  return function(d, b) {
-    extendStatics(d, b);
-
-    function __() {
-      this.constructor = d;
-    }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-  };
-}();
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-var React = require('react');
-var SERVER_RENDERED = typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var SERVER_RENDERED = (typeof navigator === 'undefined' || global['PREVENT_CODEMIRROR_RENDER'] === true);
 var cm;
 if (!SERVER_RENDERED) {
-  cm = require('codemirror');
+    cm = require('codemirror');
 }
-var Helper = function() {
-  function Helper() {}
-  Helper.equals = function(x, y) {
-    var _this = this;
-    var ok = Object.keys,
-      tx = typeof x === 'undefined' ? 'undefined' : _typeof(x),
-      ty = typeof y === 'undefined' ? 'undefined' : _typeof(y);
-    return x && y && tx === 'object' && tx === ty ? ok(x).length === ok(y).length && ok(x).every(function(key) {
-      return _this.equals(x[key], y[key]);
-    }) : x === y;
-  };
-  return Helper;
-}();
-var Shared = function() {
-  function Shared(editor, props) {
-    this.editor = editor;
-    this.props = props;
-  }
-  Shared.prototype.delegateCursor = function(position, scroll, focus) {
-    var doc = this.editor.getDoc();
-    if (focus) {
-      this.editor.focus();
-    }
-    scroll ? doc.setCursor(position) : doc.setCursor(position, null, {
-      scroll: false
-    });
-  };
-  Shared.prototype.delegateScroll = function(coordinates) {
-    this.editor.scrollTo(coordinates.x, coordinates.y);
-  };
-  Shared.prototype.delegateSelection = function(ranges, focus) {
-    this.editor.setSelections(ranges);
-    if (focus) {
-      this.editor.focus();
-    }
-  };
-  Shared.prototype.apply = function(props) {
-    if (props && props.selection && props.selection.ranges) {
-      this.delegateSelection(props.selection.ranges, props.selection.focus || false);
-    }
-    if (props && props.cursor) {
-      this.delegateCursor(props.cursor, props.autoScroll || false, this.editor.getOption('autofocus') || false);
-    }
-    if (props && props.scroll) {
-      this.delegateScroll(props.scroll);
-    }
-  };
-  Shared.prototype.applyNext = function(props, next, preserved) {
-    if (props && props.selection && props.selection.ranges) {
-      if (next && next.selection && next.selection.ranges && !Helper.equals(props.selection.ranges, next.selection.ranges)) {
-        this.delegateSelection(next.selection.ranges, next.selection.focus || false);
-      }
-    }
-    if (props && props.cursor) {
-      if (next && next.cursor && !Helper.equals(props.cursor, next.cursor)) {
-        this.delegateCursor(preserved.cursor || next.cursor, next.autoScroll || false, next.autoCursor || false);
-      }
-    }
-    if (props && props.scroll) {
-      if (next && next.scroll && !Helper.equals(props.scroll, next.scroll)) {
-        this.delegateScroll(next.scroll);
-      }
-    }
-  };
-  Shared.prototype.applyUserDefined = function(props, preserved) {
-    if (preserved && preserved.cursor) {
-      this.delegateCursor(preserved.cursor, props.autoScroll || false, this.editor.getOption('autofocus') || false);
-    }
-  };
-  Shared.prototype.wire = function(props) {
-    var _this = this;
-    Object.keys(props || {}).filter(function(p) {
-      return (/^on/.test(p));
-    }).forEach(function(prop) {
-      switch (prop) {
-        case 'onBlur':
-          {
-            _this.editor.on('blur', function(cm, event) {
-              _this.props.onBlur(_this.editor, event);
-            });
-          }
-          break;
-        case 'onContextMenu':
-          {
-            _this.editor.on('contextmenu', function(cm, event) {
-              _this.props.onContextMenu(_this.editor, event);
-            });
-            break;
-          }
-        case 'onCopy':
-          {
-            _this.editor.on('copy', function(cm, event) {
-              _this.props.onCopy(_this.editor, event);
-            });
-            break;
-          }
-        case 'onCursor':
-          {
-            _this.editor.on('cursorActivity', function(cm) {
-              _this.props.onCursor(_this.editor, _this.editor.getCursor());
-            });
-          }
-          break;
-        case 'onCursorActivity':
-          {
-            _this.editor.on('cursorActivity', function(cm) {
-              _this.props.onCursorActivity(_this.editor);
-            });
-          }
-          break;
-        case 'onCut':
-          {
-            _this.editor.on('cut', function(cm) {
-              _this.props.onCut(_this.editor, event);
-            });
-            break;
-          }
-        case 'onDblClick':
-          {
-            _this.editor.on('dblclick', function(cm) {
-              _this.props.onDblClick(_this.editor, event);
-            });
-            break;
-          }
-        case 'onDragEnter':
-          {
-            _this.editor.on('dragenter', function(cm, event) {
-              _this.props.onDragEnter(_this.editor, event);
-            });
-          }
-          break;
-        case 'onDragLeave':
-          {
-            _this.editor.on('dragleave', function(cm) {
-              _this.props.onDragLeave(_this.editor, event);
-            });
-            break;
-          }
-        case 'onDragOver':
-          {
-            _this.editor.on('dragover', function(cm, event) {
-              _this.props.onDragOver(_this.editor, event);
-            });
-          }
-          break;
-        case 'onDragStart':
-          {
-            _this.editor.on('dragstart', function(cm) {
-              _this.props.onDragStart(_this.editor, event);
-            });
-            break;
-          }
-        case 'onDrop':
-          {
-            _this.editor.on('drop', function(cm, event) {
-              _this.props.onDrop(_this.editor, event);
-            });
-          }
-          break;
-        case 'onFocus':
-          {
-            _this.editor.on('focus', function(cm, event) {
-              _this.props.onFocus(_this.editor, event);
-            });
-          }
-          break;
-        case 'onGutterClick':
-          {
-            _this.editor.on('gutterClick', function(cm, lineNumber, gutter, event) {
-              _this.props.onGutterClick(_this.editor, lineNumber, gutter, event);
-            });
-          }
-          break;
-        case 'onKeyDown':
-          {
-            _this.editor.on('keydown', function(cm, event) {
-              _this.props.onKeyDown(_this.editor, event);
-            });
-          }
-          break;
-        case 'onKeyPress':
-          {
-            _this.editor.on('keypress', function(cm, event) {
-              _this.props.onKeyPress(_this.editor, event);
-            });
-          }
-          break;
-        case 'onKeyUp':
-          {
-            _this.editor.on('keyup', function(cm, event) {
-              _this.props.onKeyUp(_this.editor, event);
-            });
-          }
-          break;
-        case 'onMouseDown':
-          {
-            _this.editor.on('mousedown', function(cm) {
-              _this.props.onMouseDown(_this.editor, event);
-            });
-            break;
-          }
-        case 'onPaste':
-          {
-            _this.editor.on('paste', function(cm) {
-              _this.props.onPaste(_this.editor, event);
-            });
-            break;
-          }
-        case 'onScroll':
-          {
-            _this.editor.on('scroll', function(cm) {
-              _this.props.onScroll(_this.editor, _this.editor.getScrollInfo());
-            });
-          }
-          break;
-        case 'onSelection':
-          {
-            _this.editor.on('beforeSelectionChange', function(cm, data) {
-              _this.props.onSelection(_this.editor, data);
-            });
-          }
-          break;
-        case 'onTouchStart':
-          {
-            _this.editor.on('touchstart', function(cm) {
-              _this.props.onTouchStart(_this.editor, event);
-            });
-            break;
-          }
-        case 'onUpdate':
-          {
-            _this.editor.on('update', function(cm) {
-              _this.props.onUpdate(_this.editor);
-            });
-          }
-          break;
-        case 'onViewportChange':
-          {
-            _this.editor.on('viewportChange', function(cm, from, to) {
-              _this.props.onViewportChange(_this.editor, from, to);
+var Helper = (function () {
+    function Helper() {
+    }
+    Helper.equals = function (x, y) {
+        var _this = this;
+        var ok = Object.keys, tx = typeof x, ty = typeof y;
+        return x && y && tx === 'object' && tx === ty ? (ok(x).length === ok(y).length &&
+            ok(x).every(function (key) { return _this.equals(x[key], y[key]); })) : (x === y);
+    };
+    return Helper;
+}());
+var Shared = (function () {
+    function Shared(editor, props) {
+        this.editor = editor;
+        this.props = props;
+    }
+    Shared.prototype.delegateCursor = function (position, scroll, focus) {
+        var doc = this.editor.getDoc();
+        if (focus) {
+            this.editor.focus();
+        }
+        scroll ? doc.setCursor(position) : doc.setCursor(position, null, { scroll: false });
+    };
+    Shared.prototype.delegateScroll = function (coordinates) {
+        this.editor.scrollTo(coordinates.x, coordinates.y);
+    };
+    Shared.prototype.delegateSelection = function (ranges, focus) {
+        this.editor.setSelections(ranges);
+        if (focus) {
+            this.editor.focus();
+        }
+    };
+    Shared.prototype.apply = function (props) {
+        if (props && props.selection && props.selection.ranges) {
+            this.delegateSelection(props.selection.ranges, props.selection.focus || false);
+        }
+        if (props && props.cursor) {
+            this.delegateCursor(props.cursor, (props.autoScroll || false), (this.editor.getOption('autofocus') || false));
+        }
+        if (props && props.scroll) {
+            this.delegateScroll(props.scroll);
+        }
+    };
+    Shared.prototype.applyNext = function (props, next, preserved) {
+        if (props && props.selection && props.selection.ranges) {
+            if (next && next.selection && next.selection.ranges && !Helper.equals(props.selection.ranges, next.selection.ranges)) {
+                this.delegateSelection(next.selection.ranges, next.selection.focus || false);
+            }
+        }
+        if (props && props.cursor) {
+            if (next && next.cursor && !Helper.equals(props.cursor, next.cursor)) {
+                this.delegateCursor(preserved.cursor || next.cursor, (next.autoScroll || false), (next.autoCursor || false));
+            }
+        }
+        if (props && props.scroll) {
+            if (next && next.scroll && !Helper.equals(props.scroll, next.scroll)) {
+                this.delegateScroll(next.scroll);
+            }
+        }
+    };
+    Shared.prototype.applyUserDefined = function (props, preserved) {
+        if (preserved && preserved.cursor) {
+            this.delegateCursor(preserved.cursor, (props.autoScroll || false), (this.editor.getOption('autofocus') || false));
+        }
+    };
+    Shared.prototype.wire = function (props) {
+        var _this = this;
+        Object.keys(props || {}).filter(function (p) { return /^on/.test(p); }).forEach(function (prop) {
+            switch (prop) {
+                case 'onBlur':
+                    {
+                        _this.editor.on('blur', function (cm, event) {
+                            _this.props.onBlur(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onContextMenu': {
+                    _this.editor.on('contextmenu', function (cm, event) {
+                        _this.props.onContextMenu(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onCopy': {
+                    _this.editor.on('copy', function (cm, event) {
+                        _this.props.onCopy(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onCursor':
+                    {
+                        _this.editor.on('cursorActivity', function (cm) {
+                            _this.props.onCursor(_this.editor, _this.editor.getCursor());
+                        });
+                    }
+                    break;
+                case 'onCursorActivity':
+                    {
+                        _this.editor.on('cursorActivity', function (cm) {
+                            _this.props.onCursorActivity(_this.editor);
+                        });
+                    }
+                    break;
+                case 'onCut': {
+                    _this.editor.on('cut', function (cm, event) {
+                        _this.props.onCut(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onDblClick': {
+                    _this.editor.on('dblclick', function (cm, event) {
+                        _this.props.onDblClick(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onDragEnter':
+                    {
+                        _this.editor.on('dragenter', function (cm, event) {
+                            _this.props.onDragEnter(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onDragLeave': {
+                    _this.editor.on('dragleave', function (cm, event) {
+                        _this.props.onDragLeave(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onDragOver':
+                    {
+                        _this.editor.on('dragover', function (cm, event) {
+                            _this.props.onDragOver(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onDragStart': {
+                    _this.editor.on('dragstart', function (cm, event) {
+                        _this.props.onDragStart(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onDrop':
+                    {
+                        _this.editor.on('drop', function (cm, event) {
+                            _this.props.onDrop(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onFocus':
+                    {
+                        _this.editor.on('focus', function (cm, event) {
+                            _this.props.onFocus(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onGutterClick':
+                    {
+                        _this.editor.on('gutterClick', function (cm, lineNumber, gutter, event) {
+                            _this.props.onGutterClick(_this.editor, lineNumber, gutter, event);
+                        });
+                    }
+                    break;
+                case 'onKeyDown':
+                    {
+                        _this.editor.on('keydown', function (cm, event) {
+                            _this.props.onKeyDown(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onKeyPress':
+                    {
+                        _this.editor.on('keypress', function (cm, event) {
+                            _this.props.onKeyPress(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onKeyUp':
+                    {
+                        _this.editor.on('keyup', function (cm, event) {
+                            _this.props.onKeyUp(_this.editor, event);
+                        });
+                    }
+                    break;
+                case 'onMouseDown': {
+                    _this.editor.on('mousedown', function (cm, event) {
+                        _this.props.onMouseDown(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onPaste': {
+                    _this.editor.on('paste', function (cm, event) {
+                        _this.props.onPaste(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onScroll':
+                    {
+                        _this.editor.on('scroll', function (cm) {
+                            _this.props.onScroll(_this.editor, _this.editor.getScrollInfo());
+                        });
+                    }
+                    break;
+                case 'onSelection':
+                    {
+                        _this.editor.on('beforeSelectionChange', function (cm, data) {
+                            _this.props.onSelection(_this.editor, data);
+                        });
+                    }
+                    break;
+                case 'onTouchStart': {
+                    _this.editor.on('touchstart', function (cm, event) {
+                        _this.props.onTouchStart(_this.editor, event);
+                    });
+                    break;
+                }
+                case 'onUpdate':
+                    {
+                        _this.editor.on('update', function (cm) {
+                            _this.props.onUpdate(_this.editor);
+                        });
+                    }
+                    break;
+                case 'onViewportChange':
+                    {
+                        _this.editor.on('viewportChange', function (cm, from, to) {
+                            _this.props.onViewportChange(_this.editor, from, to);
+                        });
+                    }
+                    break;
+            }
+        });
+    };
+    return Shared;
+}());
+var Controlled = (function (_super) {
+    __extends(Controlled, _super);
+    function Controlled(props) {
+        var _this = _super.call(this, props) || this;
+        if (SERVER_RENDERED)
+            return _this;
+        _this.applied = false;
+        _this.appliedNext = false;
+        _this.appliedUserDefined = false;
+        _this.deferred = null;
+        _this.emulating = false;
+        _this.hydrated = false;
+        _this.initCb = function () {
+            if (_this.props.editorDidConfigure) {
+                _this.props.editorDidConfigure(_this.editor);
+            }
+        };
+        _this.mounted = false;
+        return _this;
+    }
+    Controlled.prototype.hydrate = function (props) {
+        var _this = this;
+        var userDefinedOptions = Object.assign({}, cm.defaults, this.editor.options, props.options || {});
+        var optionDelta = Object.keys(userDefinedOptions).some(function (key) { return _this.editor.getOption(key) !== userDefinedOptions[key]; });
+        if (optionDelta) {
+            Object.keys(userDefinedOptions).forEach(function (key) {
+                if (props.options.hasOwnProperty(key)) {
+                    if (_this.editor.getOption(key) !== userDefinedOptions[key]) {
+                        _this.editor.setOption(key, userDefinedOptions[key]);
+                        _this.mirror.setOption(key, userDefinedOptions[key]);
+                    }
+                }
             });
-          }
-          break;
-      }
-    });
-  };
-  return Shared;
-}();
-var Controlled = function(_super) {
-  __extends(Controlled, _super);
-
-  function Controlled(props) {
-    var _this = _super.call(this, props) || this;
-    if (SERVER_RENDERED) return _this;
-    _this.applied = false;
-    _this.appliedNext = false;
-    _this.appliedUserDefined = false;
-    _this.deferred = null;
-    _this.emulating = false;
-    _this.hydrated = false;
-    _this.initCb = function() {
-      if (_this.props.editorDidConfigure) {
-        _this.props.editorDidConfigure(_this.editor);
-      }
+        }
+        if (!this.hydrated) {
+            if (!this.mounted) {
+                this.initChange(props.value || '');
+            }
+            else {
+                if (this.deferred) {
+                    this.resolveChange();
+                }
+                else {
+                    this.initChange(props.value || '');
+                }
+            }
+        }
+        this.hydrated = true;
     };
-    _this.mounted = false;
-    return _this;
-  }
-  Controlled.prototype.hydrate = function(props) {
-    var _this = this;
-    var userDefinedOptions = _extends({}, cm.defaults, this.editor.options, props.options || {});
-    var optionDelta = Object.keys(userDefinedOptions).some(function(key) {
-      return _this.editor.getOption(key) !== userDefinedOptions[key];
-    });
-    if (optionDelta) {
-      Object.keys(userDefinedOptions).forEach(function(key) {
-        if (props.options.hasOwnProperty(key)) {
-          if (_this.editor.getOption(key) !== userDefinedOptions[key]) {
-            _this.editor.setOption(key, userDefinedOptions[key]);
-            _this.mirror.setOption(key, userDefinedOptions[key]);
-          }
-        }
-      });
-    }
-    if (!this.hydrated) {
-      if (!this.mounted) {
-        this.initChange(props.value || '');
-      } else {
-        if (this.deferred) {
-          this.resolveChange();
-        } else {
-          this.initChange(props.value || '');
-        }
-      }
-    }
-    this.hydrated = true;
-  };
-  Controlled.prototype.initChange = function(value) {
-    this.emulating = true;
-    var lastLine = this.editor.lastLine();
-    var lastChar = this.editor.getLine(this.editor.lastLine()).length;
-    this.editor.replaceRange(value || '', {
-      line: 0,
-      ch: 0
-    }, {
-      line: lastLine,
-      ch: lastChar
-    });
-    this.mirror.setValue(value);
-    this.editor.clearHistory();
-    this.mirror.clearHistory();
-    this.emulating = false;
-  };
-  Controlled.prototype.resolveChange = function() {
-    this.emulating = true;
-    if (this.deferred.origin === 'undo') {
-      this.editor.undo();
-    } else if (this.deferred.origin === 'redo') {
-      this.editor.redo();
-    } else {
-      this.editor.replaceRange(this.deferred.text, this.deferred.from, this.deferred.to, this.deferred.origin);
-    }
-    this.emulating = false;
-    this.deferred = null;
-  };
-  Controlled.prototype.mirrorChange = function(deferred) {
-    if (deferred.origin === 'undo') {
-      this.editor.setHistory(this.mirror.getHistory());
-      this.mirror.undo();
-    } else if (deferred.origin === 'redo') {
-      this.editor.setHistory(this.mirror.getHistory());
-      this.mirror.redo();
-    } else {
-      this.mirror.replaceRange(deferred.text, deferred.from, deferred.to, deferred.origin);
-    }
-    return this.mirror.getValue();
-  };
-  Controlled.prototype.componentWillMount = function() {
-    if (SERVER_RENDERED) return;
-    if (this.props.editorWillMount) {
-      this.props.editorWillMount();
-    }
-  };
-  Controlled.prototype.componentDidMount = function() {
-    var _this = this;
-    if (SERVER_RENDERED) return;
-    if (this.props.defineMode) {
-      if (this.props.defineMode.name && this.props.defineMode.fn) {
-        cm.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
-      }
-    }
-    this.editor = cm(this.ref);
-    this.shared = new Shared(this.editor, this.props);
-    this.mirror = cm(function() {});
-    this.editor.on('electricInput', function() {
-      _this.mirror.setHistory(_this.editor.getHistory());
-    });
-    this.editor.on('cursorActivity', function() {
-      _this.mirror.setCursor(_this.editor.getCursor());
-    });
-    this.editor.on('beforeChange', function(cm, data) {
-      if (_this.emulating) {
-        return;
-      }
-      data.cancel();
-      _this.deferred = data;
-      var phantomChange = _this.mirrorChange(_this.deferred);
-      if (_this.props.onBeforeChange) _this.props.onBeforeChange(_this.editor, _this.deferred, phantomChange);
-    });
-    this.editor.on('change', function(cm, data) {
-      if (!_this.mounted) {
-        return;
-      }
-      if (_this.props.onChange) {
-        _this.props.onChange(_this.editor, data, _this.editor.getValue());
-      }
-    });
-    this.hydrate(this.props);
-    this.shared.apply(this.props);
-    this.applied = true;
-    this.mounted = true;
-    this.shared.wire(this.props);
-    if (this.editor.getOption('autofocus')) {
-      this.editor.focus();
-    }
-    if (this.props.editorDidMount) {
-      this.props.editorDidMount(this.editor, this.editor.getValue(), this.initCb);
-    }
-  };
-  Controlled.prototype.componentWillReceiveProps = function(nextProps) {
-    if (SERVER_RENDERED) return;
-    var preserved = {
-      cursor: null
+    Controlled.prototype.initChange = function (value) {
+        this.emulating = true;
+        var lastLine = this.editor.lastLine();
+        var lastChar = this.editor.getLine(this.editor.lastLine()).length;
+        this.editor.replaceRange(value || '', { line: 0, ch: 0 }, { line: lastLine, ch: lastChar });
+        this.mirror.setValue(value);
+        this.editor.clearHistory();
+        this.mirror.clearHistory();
+        this.emulating = false;
     };
-    if (nextProps.value !== this.props.value) {
-      this.hydrated = false;
-    }
-    if (!this.props.autoCursor && this.props.autoCursor !== undefined) {
-      preserved.cursor = this.editor.getCursor();
-    }
-    this.hydrate(nextProps);
-    if (!this.appliedNext) {
-      this.shared.applyNext(this.props, nextProps, preserved);
-      this.appliedNext = true;
-    }
-    this.shared.applyUserDefined(this.props, preserved);
-    this.appliedUserDefined = true;
-  };
-  Controlled.prototype.componentWillUnmount = function() {
-    if (SERVER_RENDERED) return;
-    if (this.props.editorWillUnmount) {
-      this.props.editorWillUnmount(cm);
-    }
-  };
-  Controlled.prototype.shouldComponentUpdate = function(nextProps, nextState) {
-    return !SERVER_RENDERED;
-  };
-  Controlled.prototype.render = function() {
-    var _this = this;
-    if (SERVER_RENDERED) return null;
-    var className = this.props.className ? 'react-codemirror2 ' + this.props.className : 'react-codemirror2';
-    return React.createElement('div', {
-      className: className,
-      ref: function ref(self) {
-        return _this.ref = self;
-      }
-    });
-  };
-  return Controlled;
-}(React.Component);
+    Controlled.prototype.resolveChange = function () {
+        this.emulating = true;
+        if (this.deferred.origin === 'undo') {
+            this.editor.undo();
+        }
+        else if (this.deferred.origin === 'redo') {
+            this.editor.redo();
+        }
+        else {
+            this.editor.replaceRange(this.deferred.text, this.deferred.from, this.deferred.to, this.deferred.origin);
+        }
+        this.emulating = false;
+        this.deferred = null;
+    };
+    Controlled.prototype.mirrorChange = function (deferred) {
+        if (deferred.origin === 'undo') {
+            this.editor.setHistory(this.mirror.getHistory());
+            this.mirror.undo();
+        }
+        else if (deferred.origin === 'redo') {
+            this.editor.setHistory(this.mirror.getHistory());
+            this.mirror.redo();
+        }
+        else {
+            this.mirror.replaceRange(deferred.text, deferred.from, deferred.to, deferred.origin);
+        }
+        return this.mirror.getValue();
+    };
+    Controlled.prototype.componentWillMount = function () {
+        if (SERVER_RENDERED)
+            return;
+        if (this.props.editorWillMount) {
+            this.props.editorWillMount();
+        }
+    };
+    Controlled.prototype.componentDidMount = function () {
+        var _this = this;
+        if (SERVER_RENDERED)
+            return;
+        if (this.props.defineMode) {
+            if (this.props.defineMode.name && this.props.defineMode.fn) {
+                cm.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
+            }
+        }
+        this.editor = cm(this.ref);
+        this.shared = new Shared(this.editor, this.props);
+        this.mirror = cm(function () {
+        });
+        this.editor.on('electricInput', function () {
+            _this.mirror.setHistory(_this.editor.getHistory());
+        });
+        this.editor.on('cursorActivity', function () {
+            _this.mirror.setCursor(_this.editor.getCursor());
+        });
+        this.editor.on('beforeChange', function (cm, data) {
+            if (_this.emulating) {
+                return;
+            }
+            data.cancel();
+            _this.deferred = data;
+            var phantomChange = _this.mirrorChange(_this.deferred);
+            if (_this.props.onBeforeChange)
+                _this.props.onBeforeChange(_this.editor, _this.deferred, phantomChange);
+        });
+        this.editor.on('change', function (cm, data) {
+            if (!_this.mounted) {
+                return;
+            }
+            if (_this.props.onChange) {
+                _this.props.onChange(_this.editor, data, _this.editor.getValue());
+            }
+        });
+        this.hydrate(this.props);
+        this.shared.apply(this.props);
+        this.applied = true;
+        this.mounted = true;
+        this.shared.wire(this.props);
+        if (this.editor.getOption('autofocus')) {
+            this.editor.focus();
+        }
+        if (this.props.editorDidMount) {
+            this.props.editorDidMount(this.editor, this.editor.getValue(), this.initCb);
+        }
+    };
+    Controlled.prototype.componentWillReceiveProps = function (nextProps) {
+        if (SERVER_RENDERED)
+            return;
+        var preserved = { cursor: null };
+        if (nextProps.value !== this.props.value) {
+            this.hydrated = false;
+        }
+        if (!this.props.autoCursor && this.props.autoCursor !== undefined) {
+            preserved.cursor = this.editor.getCursor();
+        }
+        this.hydrate(nextProps);
+        if (!this.appliedNext) {
+            this.shared.applyNext(this.props, nextProps, preserved);
+            this.appliedNext = true;
+        }
+        this.shared.applyUserDefined(this.props, preserved);
+        this.appliedUserDefined = true;
+    };
+    Controlled.prototype.componentWillUnmount = function () {
+        if (SERVER_RENDERED)
+            return;
+        if (this.props.editorWillUnmount) {
+            this.props.editorWillUnmount(cm);
+        }
+    };
+    Controlled.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        return !SERVER_RENDERED;
+    };
+    Controlled.prototype.render = function () {
+        var _this = this;
+        if (SERVER_RENDERED)
+            return null;
+        var className = this.props.className ? "react-codemirror2 " + this.props.className : 'react-codemirror2';
+        return React.createElement("div", { className: className, ref: function (self) { return _this.ref = self; } });
+    };
+    return Controlled;
+}(React.Component));
 exports.Controlled = Controlled;
-var UnControlled = function(_super) {
-  __extends(UnControlled, _super);
-
-  function UnControlled(props) {
-    var _this = _super.call(this, props) || this;
-    if (SERVER_RENDERED) return _this;
-    _this.applied = false;
-    _this.appliedUserDefined = false;
-    _this.continueChange = false;
-    _this.detached = false;
-    _this.hydrated = false;
-    _this.initCb = function() {
-      if (_this.props.editorDidConfigure) {
-        _this.props.editorDidConfigure(_this.editor);
-      }
+var UnControlled = (function (_super) {
+    __extends(UnControlled, _super);
+    function UnControlled(props) {
+        var _this = _super.call(this, props) || this;
+        if (SERVER_RENDERED)
+            return _this;
+        _this.applied = false;
+        _this.appliedUserDefined = false;
+        _this.continueChange = false;
+        _this.detached = false;
+        _this.hydrated = false;
+        _this.initCb = function () {
+            if (_this.props.editorDidConfigure) {
+                _this.props.editorDidConfigure(_this.editor);
+            }
+        };
+        _this.mounted = false;
+        _this.onBeforeChangeCb = function () {
+            _this.continueChange = true;
+        };
+        return _this;
+    }
+    UnControlled.prototype.hydrate = function (props) {
+        var _this = this;
+        var userDefinedOptions = Object.assign({}, cm.defaults, this.editor.options, props.options || {});
+        var optionDelta = Object.keys(userDefinedOptions).some(function (key) { return _this.editor.getOption(key) !== userDefinedOptions[key]; });
+        if (optionDelta) {
+            Object.keys(userDefinedOptions).forEach(function (key) {
+                if (props.options.hasOwnProperty(key)) {
+                    if (_this.editor.getOption(key) !== userDefinedOptions[key]) {
+                        _this.editor.setOption(key, userDefinedOptions[key]);
+                    }
+                }
+            });
+        }
+        if (!this.hydrated) {
+            var lastLine = this.editor.lastLine();
+            var lastChar = this.editor.getLine(this.editor.lastLine()).length;
+            this.editor.replaceRange(props.value || '', { line: 0, ch: 0 }, { line: lastLine, ch: lastChar });
+        }
+        this.hydrated = true;
     };
-    _this.mounted = false;
-    _this.onBeforeChangeCb = function() {
-      _this.continueChange = true;
+    UnControlled.prototype.componentWillMount = function () {
+        if (SERVER_RENDERED)
+            return;
+        if (this.props.editorWillMount) {
+            this.props.editorWillMount();
+        }
     };
-    return _this;
-  }
-  UnControlled.prototype.hydrate = function(props) {
-    var _this = this;
-    var userDefinedOptions = _extends({}, cm.defaults, this.editor.options, props.options || {});
-    var optionDelta = Object.keys(userDefinedOptions).some(function(key) {
-      return _this.editor.getOption(key) !== userDefinedOptions[key];
-    });
-    if (optionDelta) {
-      Object.keys(userDefinedOptions).forEach(function(key) {
-        if (props.options.hasOwnProperty(key)) {
-          if (_this.editor.getOption(key) !== userDefinedOptions[key]) {
-            _this.editor.setOption(key, userDefinedOptions[key]);
-          }
-        }
-      });
-    }
-    if (!this.hydrated) {
-      var lastLine = this.editor.lastLine();
-      var lastChar = this.editor.getLine(this.editor.lastLine()).length;
-      this.editor.replaceRange(props.value || '', {
-        line: 0,
-        ch: 0
-      }, {
-        line: lastLine,
-        ch: lastChar
-      });
-    }
-    this.hydrated = true;
-  };
-  UnControlled.prototype.componentWillMount = function() {
-    if (SERVER_RENDERED) return;
-    if (this.props.editorWillMount) {
-      this.props.editorWillMount();
-    }
-  };
-  UnControlled.prototype.componentDidMount = function() {
-    var _this = this;
-    if (SERVER_RENDERED) return;
-    this.detached = this.props.detach === true;
-    if (this.props.defineMode) {
-      if (this.props.defineMode.name && this.props.defineMode.fn) {
-        cm.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
-      }
-    }
-    this.editor = cm(this.ref);
-    this.shared = new Shared(this.editor, this.props);
-    this.editor.on('beforeChange', function(cm, data) {
-      if (_this.props.onBeforeChange) {
-        _this.props.onBeforeChange(_this.editor, data, _this.editor.getValue(), _this.onBeforeChangeCb);
-      }
-    });
-    this.editor.on('change', function(cm, data) {
-      if (!_this.mounted || !_this.props.onChange) {
-        return;
-      }
-      if (_this.props.onBeforeChange) {
-        if (_this.continueChange) {
-          _this.props.onChange(_this.editor, data, _this.editor.getValue());
-        }
-      } else {
-        _this.props.onChange(_this.editor, data, _this.editor.getValue());
-      }
-    });
-    this.hydrate(this.props);
-    this.shared.apply(this.props);
-    this.applied = true;
-    this.mounted = true;
-    this.shared.wire(this.props);
-    this.editor.clearHistory();
-    if (this.props.editorDidMount) {
-      this.props.editorDidMount(this.editor, this.editor.getValue(), this.initCb);
-    }
-  };
-  UnControlled.prototype.componentWillReceiveProps = function(nextProps) {
-    if (this.detached && nextProps.detach === false) {
-      this.detached = false;
-      if (this.props.editorDidAttach) {
-        this.props.editorDidAttach(this.editor);
-      }
-    }
-    if (!this.detached && nextProps.detach === true) {
-      this.detached = true;
-      if (this.props.editorDidDetach) {
-        this.props.editorDidDetach(this.editor);
-      }
-    }
-    if (SERVER_RENDERED || this.detached) return;
-    var preserved = {
-      cursor: null
+    UnControlled.prototype.componentDidMount = function () {
+        var _this = this;
+        if (SERVER_RENDERED)
+            return;
+        this.detached = (this.props.detach === true);
+        if (this.props.defineMode) {
+            if (this.props.defineMode.name && this.props.defineMode.fn) {
+                cm.defineMode(this.props.defineMode.name, this.props.defineMode.fn);
+            }
+        }
+        this.editor = cm(this.ref);
+        this.shared = new Shared(this.editor, this.props);
+        this.editor.on('beforeChange', function (cm, data) {
+            if (_this.props.onBeforeChange) {
+                _this.props.onBeforeChange(_this.editor, data, _this.editor.getValue(), _this.onBeforeChangeCb);
+            }
+        });
+        this.editor.on('change', function (cm, data) {
+            if (!_this.mounted || !_this.props.onChange) {
+                return;
+            }
+            if (_this.props.onBeforeChange) {
+                if (_this.continueChange) {
+                    _this.props.onChange(_this.editor, data, _this.editor.getValue());
+                }
+            }
+            else {
+                _this.props.onChange(_this.editor, data, _this.editor.getValue());
+            }
+        });
+        this.hydrate(this.props);
+        this.shared.apply(this.props);
+        this.applied = true;
+        this.mounted = true;
+        this.shared.wire(this.props);
+        this.editor.clearHistory();
+        if (this.props.editorDidMount) {
+            this.props.editorDidMount(this.editor, this.editor.getValue(), this.initCb);
+        }
     };
-    if (nextProps.value !== this.props.value) {
-      this.hydrated = false;
-      this.applied = false;
-      this.appliedUserDefined = false;
-    }
-    if (!this.props.autoCursor && this.props.autoCursor !== undefined) {
-      preserved.cursor = this.editor.getCursor();
-    }
-    this.hydrate(nextProps);
-    if (!this.applied) {
-      this.shared.apply(this.props);
-      this.applied = true;
-    }
-    if (!this.appliedUserDefined) {
-      this.shared.applyUserDefined(this.props, preserved);
-      this.appliedUserDefined = true;
-    }
-  };
-  UnControlled.prototype.componentWillUnmount = function() {
-    if (SERVER_RENDERED) return;
-    if (this.props.editorWillUnmount) {
-      this.props.editorWillUnmount(cm);
-    }
-  };
-  UnControlled.prototype.shouldComponentUpdate = function(nextProps, nextState) {
-    var update = true;
-    if (SERVER_RENDERED) update = false;
-    if (this.detached) update = false;
-    return update;
-  };
-  UnControlled.prototype.render = function() {
-    var _this = this;
-    if (SERVER_RENDERED) return null;
-    var className = this.props.className ? 'react-codemirror2 ' + this.props.className : 'react-codemirror2';
-    return React.createElement('div', {
-      className: className,
-      ref: function ref(self) {
-        return _this.ref = self;
-      }
-    });
-  };
-  return UnControlled;
-}(React.Component);
-exports.UnControlled = UnControlled;
\ No newline at end of file
+    UnControlled.prototype.componentWillReceiveProps = function (nextProps) {
+        if (this.detached && (nextProps.detach === false)) {
+            this.detached = false;
+            if (this.props.editorDidAttach) {
+                this.props.editorDidAttach(this.editor);
+            }
+        }
+        if (!this.detached && (nextProps.detach === true)) {
+            this.detached = true;
+            if (this.props.editorDidDetach) {
+                this.props.editorDidDetach(this.editor);
+            }
+        }
+        if (SERVER_RENDERED || this.detached)
+            return;
+        var preserved = { cursor: null };
+        if (nextProps.value !== this.props.value) {
+            this.hydrated = false;
+            this.applied = false;
+            this.appliedUserDefined = false;
+        }
+        if (!this.props.autoCursor && this.props.autoCursor !== undefined) {
+            preserved.cursor = this.editor.getCursor();
+        }
+        this.hydrate(nextProps);
+        if (!this.applied) {
+            this.shared.apply(this.props);
+            this.applied = true;
+        }
+        if (!this.appliedUserDefined) {
+            this.shared.applyUserDefined(this.props, preserved);
+            this.appliedUserDefined = true;
+        }
+    };
+    UnControlled.prototype.componentWillUnmount = function () {
+        if (SERVER_RENDERED)
+            return;
+        if (this.props.editorWillUnmount) {
+            this.props.editorWillUnmount(cm);
+        }
+    };
+    UnControlled.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        var update = true;
+        if (SERVER_RENDERED)
+            update = false;
+        if (this.detached)
+            update = false;
+        return update;
+    };
+    UnControlled.prototype.render = function () {
+        var _this = this;
+        if (SERVER_RENDERED)
+            return null;
+        var className = this.props.className ? "react-codemirror2 " + this.props.className : 'react-codemirror2';
+        return React.createElement("div", { className: className, ref: function (self) { return _this.ref = self; } });
+    };
+    return UnControlled;
+}(React.Component));
+exports.UnControlled = UnControlled;
diff --git a/package.json b/package.json
index 11cf49c..5f73f16 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-codemirror2",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "a tiny react codemirror component wrapper",
   "main": "index.js",
   "typings": "index.d.ts",
diff --git a/src/index.tsx b/src/index.tsx
index 85e5019..ae9f966 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -239,13 +239,13 @@ class Shared implements ICommon {
         }
           break;
         case 'onCut': {
-          this.editor.on('cut', (cm) => {
+          this.editor.on('cut', (cm, event) => {
             this.props.onCut(this.editor, event);
           });
           break;
         }
         case 'onDblClick': {
-          this.editor.on('dblclick', (cm) => {
+          this.editor.on('dblclick', (cm, event) => {
             this.props.onDblClick(this.editor, event);
           });
           break;
@@ -257,7 +257,7 @@ class Shared implements ICommon {
         }
           break;
         case 'onDragLeave': {
-          this.editor.on('dragleave', (cm) => {
+          this.editor.on('dragleave', (cm, event) => {
             this.props.onDragLeave(this.editor, event);
           });
           break;
@@ -269,7 +269,7 @@ class Shared implements ICommon {
         }
           break;
         case 'onDragStart': {
-          this.editor.on('dragstart', (cm) => {
+          this.editor.on('dragstart', (cm, event) => {
             this.props.onDragStart(this.editor, event);
           });
           break;
@@ -311,13 +311,13 @@ class Shared implements ICommon {
         }
           break;
         case 'onMouseDown': {
-          this.editor.on('mousedown', (cm) => {
+          this.editor.on('mousedown', (cm, event) => {
             this.props.onMouseDown(this.editor, event);
           });
           break;
         }
         case 'onPaste': {
-          this.editor.on('paste', (cm) => {
+          this.editor.on('paste', (cm, event) => {
             this.props.onPaste(this.editor, event);
           });
           break;
@@ -335,7 +335,7 @@ class Shared implements ICommon {
         }
           break;
         case 'onTouchStart': {
-          this.editor.on('touchstart', (cm) => {
+          this.editor.on('touchstart', (cm, event) => {
             this.props.onTouchStart(this.editor, event);
           });
           break;