react-codemirror2 - npm Package Compare versions

Comparing version 4.2.1 to 4.3.0

CHANGELOG.md

@@ -0,1 +1,6 @@
+4.3.0
+==================
+* #74 => add support for more DOM events => onContextMenu | onCopy | onCut | onDblClick | onDragLeave | onDragStart | onMouseDown | onPaste | onTouchStart
+* #76 => babel-ify index.js package for out of the box runtime support e.g. `Object.assign`
+
 4.2.0
@@ -2,0 +7,0 @@ ==================

index.d.ts

@@ -29,2 +29,5 @@ /// <reference types="codemirror" />
 }
+export interface DomEvent {
+    (editor: IInstance, event: Event): void;
+}
 export interface ICodeMirror {
@@ -41,16 +44,25 @@ autoCursor?: boolean;
     editorWillUnmount?: (lib: any) => void;
-    onBlur?: (editor: IInstance, event: Event) => void;
+    onBlur?: DomEvent;
     onChange?: (editor: IInstance, data: codemirror.EditorChange, value: string) => void;
+    onContextMenu?: DomEvent;
+    onCopy?: DomEvent;
     onCursor?: (editor: IInstance, data: codemirror.Position) => void;
+    onCut?: DomEvent;
     onCursorActivity?: (editor: IInstance) => void;
-    onDragEnter?: (editor: IInstance, event: Event) => void;
-    onDragOver?: (editor: IInstance, event: Event) => void;
-    onDrop?: (editor: IInstance, event: Event) => void;
-    onFocus?: (editor: IInstance, event: Event) => void;
+    onDblClick?: DomEvent;
+    onDragEnter?: DomEvent;
+    onDragLeave?: DomEvent;
+    onDragOver?: DomEvent;
+    onDragStart?: DomEvent;
+    onDrop?: DomEvent;
+    onFocus?: DomEvent;
     onGutterClick?: (editor: IInstance, lineNumber: number, gutter: string, event: Event) => void;
-    onKeyDown?: (editor: IInstance, event: Event) => void;
-    onKeyPress?: (editor: IInstance, event: Event) => void;
-    onKeyUp?: (editor: IInstance, event: Event) => void;
+    onKeyDown?: DomEvent;
+    onKeyPress?: DomEvent;
+    onKeyUp?: DomEvent;
+    onMouseDown?: DomEvent;
+    onPaste?: DomEvent;
     onScroll?: (editor: IInstance, data: codemirror.ScrollInfo) => void;
     onSelection?: (editor: IInstance, data: IGetSelectionOptions) => void;
+    onTouchStart: DomEvent;
     onUpdate?: (editor: IInstance) => void;
@@ -57,0 +69,0 @@ onViewportChange?: (editor: IInstance, start: number, end: number) => void;

index.js

 '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 _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);
+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() {
+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();
     }
-    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;
+    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.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), (props.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), (props.autoFocus || false));
-        }
-    };
-    Shared.prototype.wire = function (name) {
-        var _this = this;
-        switch (name) {
-            case 'onBlur':
-                {
-                    this.editor.on('blur', function (cm, event) {
-                        _this.props.onBlur(_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 'onDragEnter':
-                {
-                    this.editor.on('dragenter', function (cm, event) {
-                        _this.props.onDragEnter(_this.editor, event);
-                    });
-                }
-                break;
-            case 'onDragOver':
-                {
-                    this.editor.on('dragover', function (cm, event) {
-                        _this.props.onDragOver(_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 '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 '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;
+  };
+  Shared.prototype.apply = function(props) {
+    if (props && props.selection && props.selection.ranges) {
+      this.delegateSelection(props.selection.ranges, props.selection.focus || false);
     }
-    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]);
-                    }
-                }
+    if (props && props.cursor) {
+      this.delegateCursor(props.cursor, props.autoScroll || false, props.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, props.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);
             });
-        }
-        if (!this.hydrated) {
-            if (!this.mounted) {
-                this.initChange(props.value || '');
-            }
-            else {
-                if (this.deferred) {
-                    this.resolveChange();
-                }
-                else {
-                    this.initChange(props.value || '');
-                }
-            }
-        }
-        this.hydrated = true;
+          }
+          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);
+            });
+          }
+          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);
+      }
     };
-    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();
+    _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]);
+          }
         }
-        else if (this.deferred.origin === 'redo') {
-            this.editor.redo();
+      });
+    }
+    if (!this.hydrated) {
+      if (!this.mounted) {
+        this.initChange(props.value || '');
+      } else {
+        if (this.deferred) {
+          this.resolveChange();
+        } else {
+          this.initChange(props.value || '');
         }
-        else {
-            this.editor.replaceRange(this.deferred.text, this.deferred.from, this.deferred.to, this.deferred.origin);
-        }
-        this.emulating = false;
-        this.deferred = null;
+      }
+    }
+    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.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.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();
+    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);
+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);
+      }
     };
-    Controlled.prototype.componentWillMount = function () {
-        if (SERVER_RENDERED)
-            return;
-        if (this.props.editorWillMount) {
-            this.props.editorWillMount();
-        }
+    _this.mounted = false;
+    _this.onBeforeChangeCb = function() {
+      _this.continueChange = true;
     };
-    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);
-            }
+    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]);
+          }
         }
-        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;
-        if (this.props.onBlur)
-            this.shared.wire('onBlur');
-        if (this.props.onCursor)
-            this.shared.wire('onCursor');
-        if (this.props.onCursorActivity)
-            this.shared.wire('onCursorActivity');
-        if (this.props.onDragEnter)
-            this.shared.wire('onDragEnter');
-        if (this.props.onDragOver)
-            this.shared.wire('onDragOver');
-        if (this.props.onDrop)
-            this.shared.wire('onDrop');
-        if (this.props.onFocus)
-            this.shared.wire('onFocus');
-        if (this.props.onGutterClick)
-            this.shared.wire('onGutterClick');
-        if (this.props.onKeyDown)
-            this.shared.wire('onKeyDown');
-        if (this.props.onKeyPress)
-            this.shared.wire('onKeyPress');
-        if (this.props.onKeyUp)
-            this.shared.wire('onKeyUp');
-        if (this.props.onScroll)
-            this.shared.wire('onScroll');
-        if (this.props.onSelection)
-            this.shared.wire('onSelection');
-        if (this.props.onUpdate)
-            this.shared.wire('onUpdate');
-        if (this.props.onViewportChange)
-            this.shared.wire('onViewportChange');
-        if (this.props.editorDidMount) {
-            this.props.editorDidMount(this.editor, this.editor.getValue(), this.initCb);
+      });
+    }
+    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
     };
-    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);
-            }
-        };
-        _this.mounted = false;
-        _this.onBeforeChangeCb = function () {
-            _this.continueChange = true;
-        };
-        return _this;
+    if (nextProps.value !== this.props.value) {
+      this.hydrated = false;
+      this.applied = false;
+      this.appliedUserDefined = false;
     }
-    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;
-    };
-    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;
-        if (this.props.onBlur)
-            this.shared.wire('onBlur');
-        if (this.props.onCursor)
-            this.shared.wire('onCursor');
-        if (this.props.onCursorActivity)
-            this.shared.wire('onCursorActivity');
-        if (this.props.onDragEnter)
-            this.shared.wire('onDragEnter');
-        if (this.props.onDragOver)
-            this.shared.wire('onDragOver');
-        if (this.props.onDrop)
-            this.shared.wire('onDrop');
-        if (this.props.onFocus)
-            this.shared.wire('onFocus');
-        if (this.props.onGutterClick)
-            this.shared.wire('onGutterClick');
-        if (this.props.onKeyDown)
-            this.shared.wire('onKeyDown');
-        if (this.props.onKeyPress)
-            this.shared.wire('onKeyPress');
-        if (this.props.onKeyUp)
-            this.shared.wire('onKeyUp');
-        if (this.props.onScroll)
-            this.shared.wire('onScroll');
-        if (this.props.onSelection)
-            this.shared.wire('onSelection');
-        if (this.props.onUpdate)
-            this.shared.wire('onUpdate');
-        if (this.props.onViewportChange)
-            this.shared.wire('onViewportChange');
-        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 };
-        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;
+    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;

package.json

 {
   "name": "react-codemirror2",
-  "version": "4.2.1",
+  "version": "4.3.0",
   "description": "a tiny react codemirror component wrapper",
@@ -61,10 +61,12 @@ "main": "index.js",
     "@nteract/mockument": "1.0.4",
-    "@types/codemirror": "0.0.55",
-    "@types/jest": "22.2.0",
-    "@types/react": "16.0.40",
+    "@types/codemirror": "0.0.56",
+    "@types/jest": "22.2.3",
+    "@types/react": "16.3.12",
     "babel-core": "6.26.0",
     "babel-loader": "7.1.4",
+    "babel-plugin-transform-object-assign": "6.22.0",
+    "babel-preset-env": "1.6.1",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
-    "codemirror": "5.35.0",
+    "codemirror": "5.37.0",
     "coveralls": "3.0.0",
@@ -76,24 +78,25 @@ "css-loader": "0.28.11",
     "gulp": "3.9.1",
+    "gulp-babel": "7.0.1",
+    "gulp-beautify": "2.0.1",
     "gulp-replace": "0.6.1",
-    "jest": "22.4.2",
-    "js-beautify": "1.7.5",
-    "node-sass": "4.7.2",
+    "jest": "22.4.3",
+    "node-sass": "4.8.3",
     "open": "0.0.5",
-    "prismjs": "1.12.2",
+    "prismjs": "1.14.0",
     "raf": "3.4.0",
-    "react": "16.2.0",
-    "react-dom": "16.2.0",
+    "react": "16.3.2",
+    "react-dom": "16.3.2",
     "react-redux": "5.0.7",
-    "react-test-renderer": "16.2.0",
+    "react-test-renderer": "16.3.2",
     "redux": "3.7.2",
     "rimraf": "2.6.2",
-    "sass-loader": "6.0.7",
-    "sinon": "4.4.6",
-    "style-loader": "0.20.3",
-    "ts-jest": "22.4.1",
-    "typescript": "2.7.2",
-    "typescript-formatter": "7.1.0",
-    "webpack": "4.1.1",
-    "webpack-cli": "2.0.12"
+    "sass-loader": "7.0.1",
+    "sinon": "4.5.0",
+    "style-loader": "0.21.0",
+    "ts-jest": "22.4.4",
+    "typescript": "2.8.3",
+    "typescript-formatter": "7.2.0",
+    "webpack": "4.6.0",
+    "webpack-cli": "2.0.15"
   }
 }

README.md

@@ -152,11 +152,11 @@ [![Build Status](https://img.shields.io/travis/scniro/react-codemirror2.svg?style=flat-square)](https://travis-ci.org/scniro/react-codemirror2)
 
-## misc. notes
+## FAQ
 
-- server rendering
+- Is server side rendering supported?
 
-react-codemirror2 will prevent rendering in absence of `navigator` that is typical of a server environment. In case of any issue, you can force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global variable that this wrapper respond to.
+Yes. react-codemirror2 will prevent rendering in absence of `navigator`. You can also force the component to not render via a `PREVENT_CODEMIRROR_RENDER` global.
 
-- getting the instance
+- How can I get the instance?
 
-getting the instance of the underlying editor can be done via the event callbacks where `editor` is returned. There is no static method to get it on demand, e.g. `CodeMirror.getInstance()`. The recommended approach can be observed as follows...
+The recommended technique to get the instance is to persist the `editor` returned via event callbacks. There is no static method to get it on demand, e.g. `CodeMirror.getInstance()`. Example...
 
@@ -173,3 +173,7 @@ ```jsx
 
+- How can I have a resizable editor?
 
+Check out [bokuweb/re-resizable](https://github.com/bokuweb/re-resizable). Wrapping your component with `<Resizable/>'s` works well
+
+
 [MIT](./LICENSE) © 2018 [scniro](https://github.com/scniro)

No alert changes

Improved metrics

Lines of code

714

increased by8.84%

Number of lines in readme file

178

increased by2.3%

Worsened metrics

Total package byte prevSize

40452

decreased by-5.61%

Dev dependency count

39

increased by8.33%

No dependency changes