Basic integration of CodeMirror v3:

- changed events on Editor to use new CodeMirror event mechanism instead of setOption()
- changed getScrollerElement() to getRootElement() for managing height
- changed delCharLeft()/delCharRight() to delCharBefore()/delCharAfter()
- changed various CodeMirror style classes whose names have changed
- commented out some unimplemented methods
- updated CodeMirror SHA

src/editor/Editor.js

@@ -309,12 +309,12 @@ define(function (require, exports, module) {
             },
             "Backspace": function (instance) {
                 if (!_handleSoftTabNavigation(instance, -1, "deleteH")) {
-                    CodeMirror.commands.delCharLeft(instance);
+                    CodeMirror.commands.delCharBefore(instance);
                 }
             },
             "Delete": function (instance) {
                 if (!_handleSoftTabNavigation(instance, 1, "deleteH")) {
-                    CodeMirror.commands.delCharRight(instance);
+                    CodeMirror.commands.delCharAfter(instance);
                 }
             },
             "Esc": function (instance) {
@@ -581,26 +581,28 @@ define(function (require, exports, module) {
 
 
     /**
-     * Install singleton event handlers on the CodeMirror instance, translating them into multi-
-     * listener-capable jQuery events on the Editor instance.
+     * Install event handlers on the CodeMirror instance, translating them into 
+     * jQuery events on the Editor instance.
      */
     Editor.prototype._installEditorListeners = function () {
         var self = this;
 
+        // onKeyEvent is still an option in CodeMirror v3 rather than an event.
+        this._codeMirror.setOption("onKeyEvent", function (instance, event) {
+            $(self).triggerHandler("keyEvent", [self, event]);
+            return event.defaultPrevented;   // false tells CodeMirror we didn't eat the event
+        });
+
         // FUTURE: if this list grows longer, consider making this a more generic mapping
         // NOTE: change is a "private" event--others shouldn't listen to it on Editor, only on
         // Document
-        this._codeMirror.setOption("onChange", function (instance, changeList) {
+        this._codeMirror.on("change", function (instance, changeList) {
             $(self).triggerHandler("change", [self, changeList]);
         });
-        this._codeMirror.setOption("onKeyEvent", function (instance, event) {
-            $(self).triggerHandler("keyEvent", [self, event]);
-            return event.defaultPrevented;   // false tells CodeMirror we didn't eat the event
-        });
-        this._codeMirror.setOption("onCursorActivity", function (instance) {
+        this._codeMirror.on("cursorActivity", function (instance) {
             $(self).triggerHandler("cursorActivity", [self]);
         });
-        this._codeMirror.setOption("onScroll", function (instance) {
+        this._codeMirror.on("scroll", function (instance) {
             // If this editor is visible, close all dropdowns on scroll.
             // (We don't want to do this if we're just scrolling in a non-visible editor
             // in response to some document change event.)
@@ -615,12 +617,12 @@ define(function (require, exports, module) {
         });
 
         // Convert CodeMirror onFocus events to EditorManager focusedEditorChanged
-        this._codeMirror.setOption("onFocus", function () {
+        this._codeMirror.on("focus", function () {
             self._focused = true;
             EditorManager._notifyFocusedEditorChanged(self);
         });
 
-        this._codeMirror.setOption("onBlur", function () {
+        this._codeMirror.on("blur", function () {
             self._focused = false;
             // EditorManager only cares about other Editors gaining focus, so we don't notify it of anything here
         });

src/editor/EditorManager.js

@@ -361,7 +361,7 @@ define(function (require, exports, module) {
         _editorHolder.height(editorAreaHt);    // affects size of "not-editor" placeholder as well
 
         if (_currentEditor) {
-            $(_currentEditor.getScrollerElement()).height(editorAreaHt);
+            $(_currentEditor.getRootElement()).height(editorAreaHt);
             if (!skipRefresh) {
                 _currentEditor.refresh();
             }

src/editor/MultiRangeInlineEditor.js

@@ -452,10 +452,11 @@ define(function (require, exports, module) {
             // we need to figure out our position relative to the top of the virtual scroll area, which is
             // the top of the actual scroller minus the scroll position.
             var scrollerTop = $(this.hostEditor.getScrollerElement()).offset().top - this.hostEditor.getScrollPos().y;
-            this.hostEditor._codeMirror.scrollIntoView(cursorCoords.x - lineSpaceOffset.left,
-                                                       cursorCoords.y - scrollerTop,
-                                                       cursorCoords.x - lineSpaceOffset.left,
-                                                       cursorCoords.yBot - scrollerTop);
+            // TODO: [cmv3] scrollIntoView isn't implemented yet
+//            this.hostEditor._codeMirror.scrollIntoView(cursorCoords.x - lineSpaceOffset.left,
+//                                                       cursorCoords.y - scrollerTop,
+//                                                       cursorCoords.x - lineSpaceOffset.left,
+//                                                       cursorCoords.yBot - scrollerTop);
         }
     };
 

src/styles/brackets_codemirror_override.less

@@ -27,6 +27,7 @@
  */
 .CodeMirror pre {
     line-height: inherit;
+    padding: 0 @code-padding;
 }
 
 .CodeMirror-scroll {
@@ -80,17 +81,18 @@
 
 
     .CodeMirror-lines {
-        padding: @code-padding;
+        padding: @code-padding 0;
     }
-    .CodeMirror-gutter {
+    .CodeMirror-gutters {
         background-color: @background-color-3;
         border-right: none;
         padding-top: @code-padding;
         padding-bottom: @code-padding;
         min-width: 2.5em;
     }
-    .CodeMirror-gutter-text {
+    .CodeMirror-linenumber {
         color: @accent-comment;
+        min-width: 2.5em;
         /*font-size: 0.9em;*/  /* restore after SourceCodePro font fix? */
         padding-top: 0px;
         padding-bottom: 0px;
@@ -122,7 +124,7 @@
     .CodeMirror .CodeMirror-focused div.CodeMirror-selected {
         background: #d2dcf8;
     }
-    .CodeMirror .CodeMirror-gutter {
+    .CodeMirror .CodeMirror-gutters {
         background: transparent;
         border-right: none;
     }