From f74bb684f6214ec2cd5be95cdbeb8c0fad520701 Mon Sep 17 00:00:00 2001 From: Matthias BUSSONNIER Date: Thu, 7 Feb 2013 17:50:49 +0100 Subject: [PATCH] Make CodeMirror configurable Both on a per class and per instance basis, using an option dict in constructor and per class dict --- .../frontend/html/notebook/static/js/cell.js | 15 ++++++- .../html/notebook/static/js/codecell.js | 36 +++++++++++------ .../html/notebook/static/js/textcell.js | 39 +++++++++++++------ 3 files changed, 66 insertions(+), 24 deletions(-) diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js index d49e456a6..326fe6854 100644 --- a/IPython/frontend/html/notebook/static/js/cell.js +++ b/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. diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js index 9d41eed6f..5a5af40af 100644 --- a/IPython/frontend/html/notebook/static/js/codecell.js +++ b/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($('
').addClass('prompt input_prompt')); vbox.append(this.celltoolbar.element); var input_area = $('
').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 = $('
'); diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js index fdae47f9b..65d96a0a5 100644 --- a/IPython/frontend/html/notebook/static/js/textcell.js +++ b/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 = $('
').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 = $('
').addClass('text_cell_render border-box-sizing'). addClass('rendered_html').attr('tabindex','-1');