Make CodeMirror configurable

Both on a per class and per instance basis, using an option dict
in constructor and per class dict

IPython/frontend/html/notebook/static/js/cell.js

@@ -26,8 +26,16 @@ var IPython = (function (IPython) {
 
     /*
      * @constructor
+     *
+     * * @param {object|undefined} [options]
+     *      @param [options.cm_config] {object} config to pass to CodeMirror, will extend default parameters
      */
-    var Cell = function () {
+    var Cell = function (options) {
+
+        options = options || {};
+        // superclass default overwrite our default
+        this.cm_config = $.extend({},Cell.cm_default,options.cm_config);
+
         this.placeholder = this.placeholder || '';
         this.read_only = false;
         this.selected = false;
@@ -43,6 +51,11 @@ var IPython = (function (IPython) {
         this.cell_id = utils.uuid();
     };
 
+    Cell.cm_default = {
+            indentUnit : 4,
+            readOnly: this.read_only,
+    };
+
 
     /**
      * Empty. Subclasses must implement create_element.

IPython/frontend/html/notebook/static/js/codecell.js

@@ -32,14 +32,29 @@ var IPython = (function (IPython) {
      *
      * @constructor
      * @param {Object|null} kernel
+     * @param {object|undefined} [options]
+     *      @param [options.cm_config] {object} config to pass to CodeMirror
      */
-    var CodeCell = function (kernel) {
+    var CodeCell = function (kernel, options) {
         this.kernel = kernel || null;
         this.code_mirror = null;
         this.input_prompt_number = null;
         this.collapsed = false;
         this.default_mode = 'python';
-        IPython.Cell.apply(this, arguments);
+
+
+        var cm_overwrite_options  = {
+            extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess",'Backspace':"delSpaceToPrevTabStop"},
+            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
+        };
+
+        var arg_cm_options = options.cm_options || {};
+        var cm_config = $.extend({},CodeCell.cm_default, arg_cm_options, cm_overwrite_options);
+
+        var options = {};
+        options.cm_config = cm_config;
+
+        IPython.Cell.apply(this,[options]);
 
         var that = this;
         this.element.focusout(
@@ -47,6 +62,13 @@ var IPython = (function (IPython) {
         );
     };
 
+    CodeCell.cm_default = {
+            mode: 'python',
+            theme: 'ipython',
+            matchBrackets: true
+    };
+
+
     CodeCell.prototype = new IPython.Cell();
 
     /**
@@ -70,15 +92,7 @@ var IPython = (function (IPython) {
         input.append($('<div/>').addClass('prompt input_prompt'));
         vbox.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
-        this.code_mirror = CodeMirror(input_area.get(0), {
-            indentUnit : 4,
-            mode: 'python',
-            theme: 'ipython',
-            readOnly: this.read_only,
-            extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess",'Backspace':"delSpaceToPrevTabStop"},
-            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this),
-            matchBrackets: true
-        });
+        this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
         vbox.append(input_area);
         input.append(vbox);
         var output = $('<div></div>');

IPython/frontend/html/notebook/static/js/textcell.js

@@ -26,14 +26,38 @@ var IPython = (function (IPython) {
      * @class TextCell
      * @constructor TextCell
      * @extend Ipython.Cell
+     * @param {object|undefined} [options]
+     *      @param [options.cm_config] {object} config to pass to CodeMirror, will extend/overwrite default config
      */
-    var TextCell = function () {
+    var TextCell = function (options) {
         this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
-        IPython.Cell.apply(this, arguments);
+        var options = options || {};
+
+        var cm_overwrite_options  = {
+            extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
+            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
+        };
+
+        var arg_cm_options = options.cm_options || {};
+        var cm_config = $.extend({},TextCell.cm_default, arg_cm_options, cm_overwrite_options);
+
+        var options = {};
+        options.cm_config = cm_config;
+
+
+        IPython.Cell.apply(this, [options]);
         this.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
+    TextCell.cm_default = {
+            mode: this.code_mirror_mode,
+            theme: 'default',
+            value: this.placeholder,
+            lineWrapping : true,
+        }
+
+
     TextCell.prototype = new IPython.Cell();
 
     /**
@@ -50,16 +74,7 @@ var IPython = (function (IPython) {
         cell.append(this.celltoolbar.element);
 
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
-        this.code_mirror = CodeMirror(input_area.get(0), {
-            indentUnit : 4,
-            mode: this.code_mirror_mode,
-            theme: 'default',
-            value: this.placeholder,
-            readOnly: this.read_only,
-            lineWrapping : true,
-            extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
-            onKeyEvent: $.proxy(this.handle_codemirror_keyevent,this)
-        });
+        this.code_mirror = CodeMirror(input_area.get(0), this.cm_config);
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
             addClass('rendered_html').attr('tabindex','-1');