Merge codemirror config with user config.

Simplify customisation of codemirror without duplicating the all
codecell configuration.

Closes  #8038

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

@@ -1,707 +1,711 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 /**
  *
  *
  * @module cell
  * @namespace cell
  * @class Cell
  */
 
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'codemirror/lib/codemirror',
     'codemirror/addon/edit/matchbrackets',
     'codemirror/addon/edit/closebrackets',
     'codemirror/addon/comment/comment'
 ], function(IPython, $, utils, CodeMirror, cm_match, cm_closeb, cm_comment) {
     // TODO: remove IPython dependency here 
     "use strict";
     
     var overlayHack = CodeMirror.scrollbarModel.native.prototype.overlayHack;
     
     CodeMirror.scrollbarModel.native.prototype.overlayHack = function () {
         overlayHack.apply(this, arguments);
         // Reverse `min-height: 18px` scrollbar hack on OS X
         // which causes a dead area, making it impossible to click on the last line
         // when there is horizontal scrolling to do and the "show scrollbar only when scrolling" behavior
         // is enabled.
         // This, in turn, has the undesirable behavior of never showing the horizontal scrollbar,
         // even when it should, which is less problematic, at least.
         if (/Mac/.test(navigator.platform)) {
             this.horiz.style.minHeight = "";
         }
     };
     
     var Cell = function (options) {
         /* Constructor
          *
          * The Base `Cell` class from which to inherit.
          * @constructor
          * @param:
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance
          *          config: dictionary
          *          keyboard_manager: KeyboardManager instance
          */
         options = options || {};
         this.keyboard_manager = options.keyboard_manager;
         this.events = options.events;
         var config = utils.mergeopt(Cell, options.config);
         // superclass default overwrite our default
         
         this.placeholder = config.placeholder || '';
-        this.read_only = config.cm_config.readOnly;
         this.selected = false;
         this.rendered = false;
         this.mode = 'command';
 
         // Metadata property
         var that = this;
         this._metadata = {};
         Object.defineProperty(this, 'metadata', {
             get: function() { return that._metadata; },
             set: function(value) {
                 that._metadata = value;
                 if (that.celltoolbar) {
                     that.celltoolbar.rebuild();
                 }
             }
         });
 
         // load this from metadata later ?
         this.user_highlight = 'auto';
-        this.cm_config = config.cm_config;
+
+        var class_conf_value = {};
+        if(this.class_config){
+            class_conf_value = this.class_config.get_sync('cm_config');
+        }
+        this.cm_config = utils.mergeopt({}, config.cm_config, class_conf_value);
         this.cell_id = utils.uuid();
         this._options = config;
 
         // For JS VM engines optimization, attributes should be all set (even
         // to null) in the constructor, and if possible, if different subclass
         // have new attributes with same name, they should be created in the
         // same order. Easiest is to create and set to null in parent class.
 
         this.element = null;
         this.cell_type = this.cell_type || null;
         this.code_mirror = null;
 
         this.create_element();
         if (this.element !== null) {
             this.element.data("cell", this);
             this.bind_events();
             this.init_classes();
         }
     };
 
     Cell.options_default = {
         cm_config : {
             indentUnit : 4,
             readOnly: false,
             theme: "default",
             extraKeys: {
                 "Cmd-Right":"goLineRight",
                 "End":"goLineRight",
                 "Cmd-Left":"goLineLeft"
             }
         }
     };
     
     // FIXME: Workaround CM Bug #332 (Safari segfault on drag)
     // by disabling drag/drop altogether on Safari
     // https://github.com/codemirror/CodeMirror/issues/332    
     if (utils.browser[0] == "Safari") {
         Cell.options_default.cm_config.dragDrop = false;
     }
 
     /**
      * Empty. Subclasses must implement create_element.
      * This should contain all the code to create the DOM element in notebook
      * and will be called by Base Class constructor.
      * @method create_element
      */
     Cell.prototype.create_element = function () {
     };
 
     Cell.prototype.init_classes = function () {
         /**
          * Call after this.element exists to initialize the css classes
          * related to selected, rendered and mode.
          */
         if (this.selected) {
             this.element.addClass('selected');
         } else {
             this.element.addClass('unselected');
         }
         if (this.rendered) {
             this.element.addClass('rendered');
         } else {
             this.element.addClass('unrendered');
         }
     };
 
     /**
      * Subclasses can implement override bind_events.
      * Be carefull to call the parent method when overwriting as it fires event.
      * this will be triggerd after create_element in constructor.
      * @method bind_events
      */
     Cell.prototype.bind_events = function () {
         var that = this;
         // We trigger events so that Cell doesn't have to depend on Notebook.
         that.element.click(function (event) {
             if (!that.selected) {
                 that.events.trigger('select.Cell', {'cell':that});
             }
         });
         that.element.focusin(function (event) {
             if (!that.selected) {
                 that.events.trigger('select.Cell', {'cell':that});
             }
         });
         if (this.code_mirror) {
             this.code_mirror.on("change", function(cm, change) {
                 that.events.trigger("set_dirty.Notebook", {value: true});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('focus', function(cm, change) {
                 that.events.trigger('edit_mode.Cell', {cell: that});
             });
         }
         if (this.code_mirror) {
             this.code_mirror.on('blur', function(cm, change) {
                 that.events.trigger('command_mode.Cell', {cell: that});
             });
         }
 
         this.element.dblclick(function () {
             if (that.selected === false) {
                 this.events.trigger('select.Cell', {'cell':that});
             }
             var cont = that.unrender();
             if (cont) {
                 that.focus_editor();
             }
         });
     };
     
     /**
      * This method gets called in CodeMirror's onKeyDown/onKeyPress
      * handlers and is used to provide custom key handling.
      *
      * To have custom handling, subclasses should override this method, but still call it
      * in order to process the Edit mode keyboard shortcuts.
      *
      * @method handle_codemirror_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} event - key press event which either should or should not be handled by CodeMirror
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     Cell.prototype.handle_codemirror_keyevent = function (editor, event) {
         var shortcuts = this.keyboard_manager.edit_shortcuts;
 
         var cur = editor.getCursor();
         if((cur.line !== 0 || cur.ch !==0) && event.keyCode === 38){
             event._ipkmIgnore = true;
         }
         var nLastLine = editor.lastLine();
         if ((event.keyCode === 40) &&
              ((cur.line !== nLastLine) ||
                (cur.ch !== editor.getLineHandle(nLastLine).text.length))
            ) {
             event._ipkmIgnore = true;
         }
         // if this is an edit_shortcuts shortcut, the global keyboard/shortcut
         // manager will handle it
         if (shortcuts.handles(event)) {
             return true;
         }
         
         return false;
     };
 
 
     /**
      * Triger typsetting of math by mathjax on current cell element
      * @method typeset
      */
     Cell.prototype.typeset = function () {
         utils.typeset(this.element);
     };
 
     /**
      * handle cell level logic when a cell is selected
      * @method select
      * @return is the action being taken
      */
     Cell.prototype.select = function () {
         if (!this.selected) {
             this.element.addClass('selected');
             this.element.removeClass('unselected');
             this.selected = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unselected
      * @method unselect
      * @return is the action being taken
      */
     Cell.prototype.unselect = function () {
         if (this.selected) {
             this.element.addClass('unselected');
             this.element.removeClass('selected');
             this.selected = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * should be overritten by subclass
      * @method execute
      */
     Cell.prototype.execute = function () {
         return;
     };
 
     /**
      * handle cell level logic when a cell is rendered
      * @method render
      * @return is the action being taken
      */
     Cell.prototype.render = function () {
         if (!this.rendered) {
             this.element.addClass('rendered');
             this.element.removeClass('unrendered');
             this.rendered = true;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * handle cell level logic when a cell is unrendered
      * @method unrender
      * @return is the action being taken
      */
     Cell.prototype.unrender = function () {
         if (this.rendered) {
             this.element.addClass('unrendered');
             this.element.removeClass('rendered');
             this.rendered = false;
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * Delegates keyboard shortcut handling to either IPython keyboard
      * manager when in command mode, or CodeMirror when in edit mode
      *
      * @method handle_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} - key event to be handled
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     Cell.prototype.handle_keyevent = function (editor, event) {
         if (this.mode === 'command') {
             return true;
         } else if (this.mode === 'edit') {
             return this.handle_codemirror_keyevent(editor, event);
         }
     };
 
     /**
      * @method at_top
      * @return {Boolean}
      */
     Cell.prototype.at_top = function () {
         var cm = this.code_mirror;
         var cursor = cm.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         }
         return false;
     };
 
     /**
      * @method at_bottom
      * @return {Boolean}
      * */
     Cell.prototype.at_bottom = function () {
         var cm = this.code_mirror;
         var cursor = cm.getCursor();
         if (cursor.line === (cm.lineCount()-1) && cursor.ch === cm.getLine(cursor.line).length) {
             return true;
         }
         return false;
     };
 
     /**
      * enter the command mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.command_mode = function () {
         if (this.mode !== 'command') {
             this.mode = 'command';
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * enter the edit mode for the cell
      * @method command_mode
      * @return is the action being taken
      */
     Cell.prototype.edit_mode = function () {
         if (this.mode !== 'edit') {
             this.mode = 'edit';
             return true;
         } else {
             return false;
         }
     };
 
     Cell.prototype.ensure_focused = function() {
         if(this.element !== document.activeElement && !this.code_mirror.hasFocus()){
             this.focus_cell();
         }
     }
     
     /**
      * Focus the cell in the DOM sense
      * @method focus_cell
      */
     Cell.prototype.focus_cell = function () {
         this.element.focus();
     };
 
     /**
      * Focus the editor area so a user can type
      *
      * NOTE: If codemirror is focused via a mouse click event, you don't want to
      * call this because it will cause a page jump.
      * @method focus_editor
      */
     Cell.prototype.focus_editor = function () {
         this.refresh();
         this.code_mirror.focus();
     };
 
     /**
      * Refresh codemirror instance
      * @method refresh
      */
     Cell.prototype.refresh = function () {
         if (this.code_mirror) {
             this.code_mirror.refresh();
         }
     };
 
     /**
      * should be overritten by subclass
      * @method get_text
      */
     Cell.prototype.get_text = function () {
     };
 
     /**
      * should be overritten by subclass
      * @method set_text
      * @param {string} text
      */
     Cell.prototype.set_text = function (text) {
     };
 
     /**
      * should be overritten by subclass
      * serialise cell to json.
      * @method toJSON
      **/
     Cell.prototype.toJSON = function () {
         var data = {};
         // deepcopy the metadata so copied cells don't share the same object
         data.metadata = JSON.parse(JSON.stringify(this.metadata));
         data.cell_type = this.cell_type;
         return data;
     };
 
     /**
      * should be overritten by subclass
      * @method fromJSON
      **/
     Cell.prototype.fromJSON = function (data) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
     };
 
 
     /**
      * can the cell be split into two cells (false if not deletable)
      * @method is_splittable
      **/
     Cell.prototype.is_splittable = function () {
         return this.is_deletable();
     };
 
 
     /**
      * can the cell be merged with other cells (false if not deletable)
      * @method is_mergeable
      **/
     Cell.prototype.is_mergeable = function () {
         return this.is_deletable();
     };
 
     /**
      * is the cell deletable? only false (undeletable) if
      * metadata.deletable is explicitly false -- everything else
      * counts as true
      *
      * @method is_deletable
      **/
     Cell.prototype.is_deletable = function () {
         if (this.metadata.deletable === false) {
             return false;
         }
         return true;
     };
 
     /**
      * @return {String} - the text before the cursor
      * @method get_pre_cursor
      **/
     Cell.prototype.get_pre_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var text = this.code_mirror.getRange({line:0, ch:0}, cursor);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
 
     /**
      * @return {String} - the text after the cursor
      * @method get_post_cursor
      **/
     Cell.prototype.get_post_cursor = function () {
         var cursor = this.code_mirror.getCursor();
         var last_line_num = this.code_mirror.lineCount()-1;
         var last_line_len = this.code_mirror.getLine(last_line_num).length;
         var end = {line:last_line_num, ch:last_line_len};
         var text = this.code_mirror.getRange(cursor, end);
         text = text.replace(/^\n+/, '').replace(/\n+$/, '');
         return text;
     };
 
     /**
      * Show/Hide CodeMirror LineNumber
      * @method show_line_numbers
      *
      * @param value {Bool}  show (true), or hide (false) the line number in CodeMirror
      **/
     Cell.prototype.show_line_numbers = function (value) {
         this.code_mirror.setOption('lineNumbers', value);
         this.code_mirror.refresh();
     };
 
     /**
      * Toggle  CodeMirror LineNumber
      * @method toggle_line_numbers
      **/
     Cell.prototype.toggle_line_numbers = function () {
         var val = this.code_mirror.getOption('lineNumbers');
         this.show_line_numbers(!val);
     };
 
     /**
      * Force codemirror highlight mode
      * @method force_highlight
      * @param {object} - CodeMirror mode
      **/
     Cell.prototype.force_highlight = function(mode) {
         this.user_highlight = mode;
         this.auto_highlight();
     };
     
     /**
      * Trigger autodetection of highlight scheme for current cell
      * @method auto_highlight
      */
     Cell.prototype.auto_highlight = function () {
         this._auto_highlight(this.class_config.get_sync('highlight_modes'));
     };
     
     /**
      * Try to autodetect cell highlight mode, or use selected mode
      * @methods _auto_highlight
      * @private
      * @param {String|object|undefined} - CodeMirror mode | 'auto'
      **/
     Cell.prototype._auto_highlight = function (modes) {
         /**
          *Here we handle manually selected modes
          */
         var that = this;
         var mode;
         if( this.user_highlight !== undefined &&  this.user_highlight != 'auto' )
         {
             mode = this.user_highlight;
             CodeMirror.autoLoadMode(this.code_mirror, mode);
             this.code_mirror.setOption('mode', mode);
             return;
         }
         var current_mode = this.code_mirror.getOption('mode', mode);
         var first_line = this.code_mirror.getLine(0);
         // loop on every pairs
         for(mode in modes) {
             var regs = modes[mode].reg;
             // only one key every time but regexp can't be keys...
             for(var i=0; i<regs.length; i++) {
                 // here we handle non magic_modes.
                 // TODO :
                 // On 3.0 and below, these things were regex.
                 // But now should be string for json-able config. 
                 // We should get rid of assuming they might be already 
                 // in a later version of IPython. 
                 var re = regs[i];
                 if(typeof(re) === 'string'){
                     re = new RegExp(re) 
                 }
                 if(first_line.match(re) !== null) {
                     if(current_mode == mode){
                         return;
                     }
                     if (mode.search('magic_') !== 0) {
                         utils.requireCodeMirrorMode(mode, function (spec) {
                             that.code_mirror.setOption('mode', spec);
                         });
                         return;
                     }
                     var open = modes[mode].open || "%%";
                     var close = modes[mode].close || "%%end";
                     var magic_mode = mode;
                     mode = magic_mode.substr(6);
                     if(current_mode == magic_mode){
                         return;
                     }
                     utils.requireCodeMirrorMode(mode, function (spec) {
                         // create on the fly a mode that switch between
                         // plain/text and something else, otherwise `%%` is
                         // source of some highlight issues.
                         CodeMirror.defineMode(magic_mode, function(config) {
                             return CodeMirror.multiplexingMode(
                                 CodeMirror.getMode(config, 'text/plain'),
                                 // always set something on close
                                 {open: open, close: close,
                                  mode: CodeMirror.getMode(config, spec),
                                  delimStyle: "delimit"
                                 }
                             );
                         });
                         that.code_mirror.setOption('mode', magic_mode);
                     });
                     return;
                 }
             }
         }
         // fallback on default
         var default_mode;
         try {
             default_mode = this._options.cm_config.mode;
         } catch(e) {
             default_mode = 'text/plain';
         }
         if( current_mode === default_mode){
             return;
         }
         this.code_mirror.setOption('mode', default_mode);
     };
 
     var UnrecognizedCell = function (options) {
         /** Constructor for unrecognized cells */
         Cell.apply(this, arguments);
         this.cell_type = 'unrecognized';
         this.celltoolbar = null;
         this.data = {};
         
         Object.seal(this);
     };
 
     UnrecognizedCell.prototype = Object.create(Cell.prototype);
     
     
     // cannot merge or split unrecognized cells
     UnrecognizedCell.prototype.is_mergeable = function () {
         return false;
     };
     
     UnrecognizedCell.prototype.is_splittable = function () {
         return false;
     };
     
     UnrecognizedCell.prototype.toJSON = function () {
         /**
          * deepcopy the metadata so copied cells don't share the same object
          */
         return JSON.parse(JSON.stringify(this.data));
     };
 
     UnrecognizedCell.prototype.fromJSON = function (data) {
         this.data = data;
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         } else {
             data.metadata = this.metadata;
         }
         this.element.find('.inner_cell').find("a").text("Unrecognized cell type: " + data.cell_type);
     };
     
     UnrecognizedCell.prototype.create_element = function () {
         Cell.prototype.create_element.apply(this, arguments);
         var cell = this.element = $("<div>").addClass('cell unrecognized_cell');
         cell.attr('tabindex','2');
 
         var prompt = $('<div/>').addClass('prompt input_prompt');
         cell.append(prompt);
         var inner_cell = $('<div/>').addClass('inner_cell');
         inner_cell.append(
             $("<a>")
                 .attr("href", "#")
                 .text("Unrecognized cell type")
         );
         cell.append(inner_cell);
         this.element = cell;
     };
     
     UnrecognizedCell.prototype.bind_events = function () {
         Cell.prototype.bind_events.apply(this, arguments);
         var cell = this;
         
         this.element.find('.inner_cell').find("a").click(function () {
             cell.events.trigger('unrecognized_cell.Cell', {cell: cell});
         });
     };
 
     // Backwards compatibility.
     IPython.Cell = Cell;
 
     return {
         Cell: Cell,
         UnrecognizedCell: UnrecognizedCell
     };
 });

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

@@ -1,664 +1,664 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 /**
  *
  *
  * @module codecell
  * @namespace codecell
  * @class CodeCell
  */
 
 
 define([
     'base/js/namespace',
     'jquery',
     'base/js/utils',
     'base/js/keyboard',
     'services/config',
     'notebook/js/cell',
     'notebook/js/outputarea',
     'notebook/js/completer',
     'notebook/js/celltoolbar',
     'codemirror/lib/codemirror',
     'codemirror/mode/python/python',
     'notebook/js/codemirror-ipython'
 ], function(IPython,
     $,
     utils,
     keyboard,
     configmod,
     cell,
     outputarea,
     completer,
     celltoolbar,
     CodeMirror,
     cmpython,
     cmip
     ) {
     "use strict";
     
     var Cell = cell.Cell;
 
     /* local util for codemirror */
     var posEq = function(a, b) {return a.line === b.line && a.ch === b.ch;};
 
     /**
      *
      * function to delete until previous non blanking space character
      * or first multiple of 4 tabstop.
      * @private
      */
     CodeMirror.commands.delSpaceToPrevTabStop = function(cm){
         var from = cm.getCursor(true), to = cm.getCursor(false), sel = !posEq(from, to);
         if (!posEq(from, to)) { cm.replaceRange("", from, to); return; }
         var cur = cm.getCursor(), line = cm.getLine(cur.line);
         var tabsize = cm.getOption('tabSize');
         var chToPrevTabStop = cur.ch-(Math.ceil(cur.ch/tabsize)-1)*tabsize;
         from = {ch:cur.ch-chToPrevTabStop,line:cur.line};
         var select = cm.getRange(from,cur);
         if( select.match(/^\ +$/) !== null){
             cm.replaceRange("",from,cur);
         } else {
             cm.deleteH(-1,"char");
         }
     };
 
     var keycodes = keyboard.keycodes;
 
     var CodeCell = function (kernel, options) {
         /**
          * Constructor
          *
          * A Cell conceived to write code.
          *
          * Parameters:
          *  kernel: Kernel instance
          *      The kernel doesn't have to be set at creation time, in that case
          *      it will be null and set_kernel has to be called later.
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance 
          *          config: dictionary
          *          keyboard_manager: KeyboardManager instance 
          *          notebook: Notebook instance
          *          tooltip: Tooltip instance
          */
         this.kernel = kernel || null;
         this.notebook = options.notebook;
         this.collapsed = false;
         this.events = options.events;
         this.tooltip = options.tooltip;
         this.config = options.config;
         this.class_config = new configmod.ConfigWithDefaults(this.config,
                                         CodeCell.config_defaults, 'CodeCell');
 
         // create all attributed in constructor function
         // even if null for V8 VM optimisation
         this.input_prompt_number = null;
         this.celltoolbar = null;
         this.output_area = null;
 
         this.last_msg_id = null;
         this.completer = null;
         this.widget_views = [];
         this._widgets_live = true;
 
         Cell.apply(this,[{
             config: $.extend({}, CodeCell.options_default), 
             keyboard_manager: options.keyboard_manager, 
             events: this.events}]);
 
         // Attributes we want to override in this subclass.
         this.cell_type = "code";
         var that  = this;
         this.element.focusout(
             function() { that.auto_highlight(); }
         );
     };
 
     CodeCell.options_default = {
         cm_config : {
             extraKeys: {
                 "Tab" :  "indentMore",
                 "Shift-Tab" : "indentLess",
                 "Backspace" : "delSpaceToPrevTabStop",
                 "Cmd-/" : "toggleComment",
                 "Ctrl-/" : "toggleComment"
             },
             mode: 'ipython',
             theme: 'ipython',
             matchBrackets: true,
             autoCloseBrackets: true
         },
         highlight_modes : {
             'magic_javascript'    :{'reg':['^%%javascript']},
             'magic_perl'          :{'reg':['^%%perl']},
             'magic_ruby'          :{'reg':['^%%ruby']},
             'magic_python'        :{'reg':['^%%python3?']},
             'magic_shell'         :{'reg':['^%%bash']},
             'magic_r'             :{'reg':['^%%R']},
             'magic_text/x-cython' :{'reg':['^%%cython']},
         },
     };
 
     CodeCell.config_defaults = CodeCell.options_default;
 
     CodeCell.msg_cells = {};
 
     CodeCell.prototype = Object.create(Cell.prototype);
     
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
         Cell.prototype.create_element.apply(this, arguments);
         var that = this;
 
         var cell =  $('<div></div>').addClass('cell code_cell');
         cell.attr('tabindex','2');
 
         var input = $('<div></div>').addClass('input');
         var prompt = $('<div/>').addClass('prompt input_prompt');
         var inner_cell = $('<div/>').addClass('inner_cell');
         this.celltoolbar = new celltoolbar.CellToolbar({
             cell: this, 
             notebook: this.notebook});
         inner_cell.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
-        this.code_mirror = new CodeMirror(input_area.get(0), this.class_config.get_sync('cm_config'));
+        this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
         // In case of bugs that put the keyboard manager into an inconsistent state,
         // ensure KM is enabled when CodeMirror is focused:
         this.code_mirror.on('focus', function () {
             if (that.keyboard_manager) {
                 that.keyboard_manager.enable();
             }
         });
         this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this));
         $(this.code_mirror.getInputField()).attr("spellcheck", "false");
         inner_cell.append(input_area);
         input.append(prompt).append(inner_cell);
 
         var widget_area = $('<div/>')
             .addClass('widget-area')
             .hide();
         this.widget_area = widget_area;
         var widget_prompt = $('<div/>')
             .addClass('prompt')
             .appendTo(widget_area);
         var widget_subarea = $('<div/>')
             .addClass('widget-subarea')
             .appendTo(widget_area);
         this.widget_subarea = widget_subarea;
         var that = this;
         var widget_clear_buton = $('<button />')
             .addClass('close')
             .html('&times;')
             .click(function() {
                 widget_area.slideUp('', function(){ 
                     for (var i = 0; i < that.widget_views.length; i++) {
                         var view = that.widget_views[i];
                         view.remove();
 
                         // Remove widget live events.
                         view.off('comm:live', that._widget_live);
                         view.off('comm:dead', that._widget_dead);
                     }
                     that.widget_views = [];
                     widget_subarea.html(''); 
                 });
             })
             .appendTo(widget_prompt);
 
         var output = $('<div></div>');
         cell.append(input).append(widget_area).append(output);
         this.element = cell;
         this.output_area = new outputarea.OutputArea({
             selector: output, 
             prompt_area: true, 
             events: this.events, 
             keyboard_manager: this.keyboard_manager});
         this.completer = new completer.Completer(this, this.events);
     };
 
     /**
     *  Display a widget view in the cell.
     */
     CodeCell.prototype.display_widget_view = function(view_promise) {
 
         // Display a dummy element
         var dummy = $('<div/>');
         this.widget_subarea.append(dummy);
 
         // Display the view.
         var that = this;
         return view_promise.then(function(view) {
             that.widget_area.show();
             dummy.replaceWith(view.$el);
             that.widget_views.push(view);
 
             // Check the live state of the view's model.
             if (view.model.comm_live) {
                 that._widget_live(view);
             } else {
                 that._widget_dead(view);
             }
 
             // Listen to comm live events for the view.
             view.on('comm:live', that._widget_live, that);
             view.on('comm:dead', that._widget_dead, that);
             return view;
         });
     };
 
     /**
      * Handles when a widget loses it's comm connection.
      * @param  {WidgetView} view
      */
     CodeCell.prototype._widget_dead = function(view) {
         if (this._widgets_live) {
             this._widgets_live = false;
             this.widget_area.addClass('connection-problems');
         }
 
     };
 
     /**
      * Handles when a widget is connected to a live comm.
      * @param  {WidgetView} view
      */
     CodeCell.prototype._widget_live = function(view) {
         if (!this._widgets_live) {
             // Check that the other widgets are live too.  O(N) operation.
             // Abort the function at the first dead widget found.
             for (var i = 0; i < this.widget_views.length; i++) {
                 if (!this.widget_views[i].model.comm_live) return;
             }
             this._widgets_live = true;
             this.widget_area.removeClass('connection-problems');
         }
     };
 
     /** @method bind_events */
     CodeCell.prototype.bind_events = function () {
         Cell.prototype.bind_events.apply(this);
         var that = this;
 
         this.element.focusout(
             function() { that.auto_highlight(); }
         );
     };
 
 
     /**
      *  This method gets called in CodeMirror's onKeyDown/onKeyPress
      *  handlers and is used to provide custom key handling. Its return
      *  value is used to determine if CodeMirror should ignore the event:
      *  true = ignore, false = don't ignore.
      *  @method handle_codemirror_keyevent
      */
 
     CodeCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         var that = this;
         // whatever key is pressed, first, cancel the tooltip request before
         // they are sent, and remove tooltip if any, except for tab again
         var tooltip_closed = null;
         if (event.type === 'keydown' && event.which !== keycodes.tab ) {
             tooltip_closed = this.tooltip.remove_and_cancel_tooltip();
         }
 
         var cur = editor.getCursor();
         if (event.keyCode === keycodes.enter){
             this.auto_highlight();
         }
 
         if (event.which === keycodes.down && event.type === 'keypress' && this.tooltip.time_before_tooltip >= 0) {
             // triger on keypress (!) otherwise inconsistent event.which depending on plateform
             // browser and keyboard layout !
             // Pressing '(' , request tooltip, don't forget to reappend it
             // The second argument says to hide the tooltip if the docstring
             // is actually empty
             this.tooltip.pending(that, true);
         } else if ( tooltip_closed && event.which === keycodes.esc && event.type === 'keydown') {
             // If tooltip is active, cancel it.  The call to
             // remove_and_cancel_tooltip above doesn't pass, force=true.
             // Because of this it won't actually close the tooltip
             // if it is in sticky mode. Thus, we have to check again if it is open
             // and close it with force=true.
             if (!this.tooltip._hidden) {
                 this.tooltip.remove_and_cancel_tooltip(true);
             }
             // If we closed the tooltip, don't let CM or the global handlers
             // handle this event.
             event.codemirrorIgnore = true;
             event._ipkmIgnore = true;
             event.preventDefault();
             return true;
         } else if (event.keyCode === keycodes.tab && event.type === 'keydown' && event.shiftKey) {
                 if (editor.somethingSelected() || editor.getSelections().length !== 1){
                     var anchor = editor.getCursor("anchor");
                     var head = editor.getCursor("head");
                     if( anchor.line !== head.line){
                         return false;
                     }
                 }
                 var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
                 if (pre_cursor.trim() === "") {
                     // Don't show tooltip if the part of the line before the cursor
                     // is empty.  In this case, let CodeMirror handle indentation.
                     return false;
                 } 
                 this.tooltip.request(that);
                 event.codemirrorIgnore = true;
                 event.preventDefault();
                 return true;
         } else if (event.keyCode === keycodes.tab && event.type === 'keydown') {
             // Tab completion.
             this.tooltip.remove_and_cancel_tooltip();
 
             // completion does not work on multicursor, it might be possible though in some cases
             if (editor.somethingSelected() || editor.getSelections().length > 1) {
                 return false;
             }
             var pre_cursor = editor.getRange({line:cur.line,ch:0},cur);
             if (pre_cursor.trim() === "") {
                 // Don't autocomplete if the part of the line before the cursor
                 // is empty.  In this case, let CodeMirror handle indentation.
                 return false;
             } else {
                 event.codemirrorIgnore = true;
                 event.preventDefault();
                 this.completer.startCompletion();
                 return true;
             }
         } 
         
         // keyboard event wasn't one of those unique to code cells, let's see
         // if it's one of the generic ones (i.e. check edit mode shortcuts)
         return Cell.prototype.handle_codemirror_keyevent.apply(this, [editor, event]);
     };
 
     // Kernel related calls.
 
     CodeCell.prototype.set_kernel = function (kernel) {
         this.kernel = kernel;
     };
 
     /**
      * Execute current code cell to the kernel
      * @method execute
      */
     CodeCell.prototype.execute = function (stop_on_error) {
         if (!this.kernel || !this.kernel.is_connected()) {
             console.log("Can't execute, kernel is not connected.");
             return;
         }
 
         this.output_area.clear_output(false, true);
 
         if (stop_on_error === undefined) {
             stop_on_error = true;
         }
 
         // Clear widget area
         for (var i = 0; i < this.widget_views.length; i++) {
             var view = this.widget_views[i];
             view.remove();
 
             // Remove widget live events.
             view.off('comm:live', this._widget_live);
             view.off('comm:dead', this._widget_dead);
         }
         this.widget_views = [];
         this.widget_subarea.html('');
         this.widget_subarea.height('');
         this.widget_area.height('');
         this.widget_area.hide();
         
         var old_msg_id = this.last_msg_id;
 
         if (old_msg_id) {
             this.kernel.clear_callbacks_for_msg(old_msg_id);
             if (old_msg_id) {
                 delete CodeCell.msg_cells[old_msg_id];
             }
         }
         if (this.get_text().trim().length === 0) {
             // nothing to do
             this.set_input_prompt(null);
             return;
         }
         this.set_input_prompt('*');
         this.element.addClass("running");
         var callbacks = this.get_callbacks();
         
         this.last_msg_id = this.kernel.execute(this.get_text(), callbacks, {silent: false, store_history: true,
             stop_on_error : stop_on_error});
         CodeCell.msg_cells[this.last_msg_id] = this;
         this.render();
         this.events.trigger('execute.CodeCell', {cell: this});
     };
     
     /**
      * Construct the default callbacks for
      * @method get_callbacks
      */
     CodeCell.prototype.get_callbacks = function () {
         var that = this;
         return {
             shell : {
                 reply : $.proxy(this._handle_execute_reply, this),
                 payload : {
                     set_next_input : $.proxy(this._handle_set_next_input, this),
                     page : $.proxy(this._open_with_pager, this)
                 }
             },
             iopub : {
                 output : function() { 
                     that.output_area.handle_output.apply(that.output_area, arguments);
                 }, 
                 clear_output : function() { 
                     that.output_area.handle_clear_output.apply(that.output_area, arguments);
                 }, 
             },
             input : $.proxy(this._handle_input_request, this)
         };
     };
     
     CodeCell.prototype._open_with_pager = function (payload) {
         this.events.trigger('open_with_text.Pager', payload);
     };
 
     /**
      * @method _handle_execute_reply
      * @private
      */
     CodeCell.prototype._handle_execute_reply = function (msg) {
         this.set_input_prompt(msg.content.execution_count);
         this.element.removeClass("running");
         this.events.trigger('set_dirty.Notebook', {value: true});
     };
 
     /**
      * @method _handle_set_next_input
      * @private
      */
     CodeCell.prototype._handle_set_next_input = function (payload) {
         var data = {'cell': this, 'text': payload.text, replace: payload.replace};
         this.events.trigger('set_next_input.Notebook', data);
     };
 
     /**
      * @method _handle_input_request
      * @private
      */
     CodeCell.prototype._handle_input_request = function (msg) {
         this.output_area.append_raw_input(msg);
     };
 
 
     // Basic cell manipulation.
 
     CodeCell.prototype.select = function () {
         var cont = Cell.prototype.select.apply(this);
         if (cont) {
             this.code_mirror.refresh();
             this.auto_highlight();
         }
         return cont;
     };
 
     CodeCell.prototype.render = function () {
         var cont = Cell.prototype.render.apply(this);
         // Always execute, even if we are already in the rendered state
         return cont;
     };
     
     CodeCell.prototype.select_all = function () {
         var start = {line: 0, ch: 0};
         var nlines = this.code_mirror.lineCount();
         var last_line = this.code_mirror.getLine(nlines-1);
         var end = {line: nlines-1, ch: last_line.length};
         this.code_mirror.setSelection(start, end);
     };
 
 
     CodeCell.prototype.collapse_output = function () {
         this.output_area.collapse();
     };
 
 
     CodeCell.prototype.expand_output = function () {
         this.output_area.expand();
         this.output_area.unscroll_area();
     };
 
     CodeCell.prototype.scroll_output = function () {
         this.output_area.expand();
         this.output_area.scroll_if_long();
     };
 
     CodeCell.prototype.toggle_output = function () {
         this.output_area.toggle_output();
     };
 
     CodeCell.prototype.toggle_output_scroll = function () {
         this.output_area.toggle_scroll();
     };
 
 
     CodeCell.input_prompt_classical = function (prompt_value, lines_number) {
         var ns;
         if (prompt_value === undefined || prompt_value === null) {
             ns = "&nbsp;";
         } else {
             ns = encodeURIComponent(prompt_value);
         }
         return 'In&nbsp;[' + ns + ']:';
     };
 
     CodeCell.input_prompt_continuation = function (prompt_value, lines_number) {
         var html = [CodeCell.input_prompt_classical(prompt_value, lines_number)];
         for(var i=1; i < lines_number; i++) {
             html.push(['...:']);
         }
         return html.join('<br/>');
     };
 
     CodeCell.input_prompt_function = CodeCell.input_prompt_classical;
 
 
     CodeCell.prototype.set_input_prompt = function (number) {
         var nline = 1;
         if (this.code_mirror !== undefined) {
            nline = this.code_mirror.lineCount();
         }
         this.input_prompt_number = number;
         var prompt_html = CodeCell.input_prompt_function(this.input_prompt_number, nline);
         // This HTML call is okay because the user contents are escaped.
         this.element.find('div.input_prompt').html(prompt_html);
     };
 
 
     CodeCell.prototype.clear_input = function () {
         this.code_mirror.setValue('');
     };
 
 
     CodeCell.prototype.get_text = function () {
         return this.code_mirror.getValue();
     };
 
 
     CodeCell.prototype.set_text = function (code) {
         return this.code_mirror.setValue(code);
     };
 
 
     CodeCell.prototype.clear_output = function (wait) {
         this.output_area.clear_output(wait);
         this.set_input_prompt();
     };
 
 
     // JSON serialization
 
     CodeCell.prototype.fromJSON = function (data) {
         Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === 'code') {
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 this.auto_highlight();
             }
             this.set_input_prompt(data.execution_count);
             this.output_area.trusted = data.metadata.trusted || false;
             this.output_area.fromJSON(data.outputs, data.metadata);
         }
     };
 
 
     CodeCell.prototype.toJSON = function () {
         var data = Cell.prototype.toJSON.apply(this);
         data.source = this.get_text();
         // is finite protect against undefined and '*' value
         if (isFinite(this.input_prompt_number)) {
             data.execution_count = this.input_prompt_number;
         } else {
             data.execution_count = null;
         }
         var outputs = this.output_area.toJSON();
         data.outputs = outputs;
         data.metadata.trusted = this.output_area.trusted;
         data.metadata.collapsed = this.output_area.collapsed;
         if (this.output_area.scroll_state === 'auto') {
             delete data.metadata.scrolled;
         } else {
             data.metadata.scrolled = this.output_area.scroll_state;
         }
         return data;
     };
 
     /**
      * handle cell level logic when a cell is unselected
      * @method unselect
      * @return is the action being taken
      */
     CodeCell.prototype.unselect = function () {
         var cont = Cell.prototype.unselect.apply(this);
         if (cont) {
             // When a code cell is usnelected, make sure that the corresponding
             // tooltip and completer to that cell is closed.
             this.tooltip.remove_and_cancel_tooltip(true);
             if (this.completer !== null) {
                 this.completer.close();
             }
         }
         return cont;
     };
 
     // Backwards compatability.
     IPython.CodeCell = CodeCell;
 
     return {'CodeCell': CodeCell};
 });

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

@@ -1,375 +1,374 b''
 // Copyright (c) IPython Development Team.
 // Distributed under the terms of the Modified BSD License.
 
 define([
     'base/js/namespace',
     'base/js/utils',
     'jquery',
     'notebook/js/cell',
     'base/js/security',
     'services/config',
     'notebook/js/mathjaxutils',
     'notebook/js/celltoolbar',
     'components/marked/lib/marked',
     'codemirror/lib/codemirror',
     'codemirror/mode/gfm/gfm',
     'notebook/js/codemirror-ipythongfm'
 ], function(IPython,
     utils,
     $,
     cell,
     security,
     configmod,
     mathjaxutils,
     celltoolbar,
     marked,
     CodeMirror,
     gfm,
     ipgfm
     ) {
     "use strict";
     var Cell = cell.Cell;
 
     var TextCell = function (options) {
         /**
          * Constructor
          *
          * Construct a new TextCell, codemirror mode is by default 'htmlmixed', 
          * and cell type is 'text' cell start as not redered.
          *
          * Parameters:
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance 
          *          config: dictionary
          *          keyboard_manager: KeyboardManager instance 
          *          notebook: Notebook instance
          */
         options = options || {};
 
         // in all TextCell/Cell subclasses
         // do not assign most of members here, just pass it down
         // in the options dict potentially overwriting what you wish.
         // they will be assigned in the base class.
         this.notebook = options.notebook;
         this.events = options.events;
         this.config = options.config;
         
         // we cannot put this as a class key as it has handle to "this".
         var config = utils.mergeopt(TextCell, this.config);
         Cell.apply(this, [{
                     config: config, 
                     keyboard_manager: options.keyboard_manager, 
                     events: this.events}]);
 
         this.cell_type = this.cell_type || 'text';
         mathjaxutils = mathjaxutils;
         this.rendered = false;
     };
 
     TextCell.prototype = Object.create(Cell.prototype);
 
     TextCell.options_default = {
         cm_config : {
             extraKeys: {"Tab": "indentMore","Shift-Tab" : "indentLess"},
             mode: 'htmlmixed',
             lineWrapping : true,
         }
     };
 
 
     /**
      * Create the DOM element of the TextCell
      * @method create_element
      * @private
      */
     TextCell.prototype.create_element = function () {
         Cell.prototype.create_element.apply(this, arguments);
         var that = this;
 
         var cell = $("<div>").addClass('cell text_cell');
         cell.attr('tabindex','2');
 
         var prompt = $('<div/>').addClass('prompt input_prompt');
         cell.append(prompt);
         var inner_cell = $('<div/>').addClass('inner_cell');
         this.celltoolbar = new celltoolbar.CellToolbar({
             cell: this, 
             notebook: this.notebook});
         inner_cell.append(this.celltoolbar.element);
         var input_area = $('<div/>').addClass('input_area');
         this.code_mirror = new CodeMirror(input_area.get(0), this.cm_config);
         // In case of bugs that put the keyboard manager into an inconsistent state,
         // ensure KM is enabled when CodeMirror is focused:
         this.code_mirror.on('focus', function () {
             if (that.keyboard_manager) {
                 that.keyboard_manager.enable();
             }
         });
         this.code_mirror.on('keydown', $.proxy(this.handle_keyevent,this))
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render rendered_html')
             .attr('tabindex','-1');
         inner_cell.append(input_area).append(render_area);
         cell.append(inner_cell);
         this.element = cell;
     };
 
 
     // Cell level actions
     
     TextCell.prototype.select = function () {
         var cont = Cell.prototype.select.apply(this);
         if (cont) {
             if (this.mode === 'edit') {
                 this.code_mirror.refresh();
             }
         }
         return cont;
     };
 
     TextCell.prototype.unrender = function () {
-        if (this.read_only) return;
         var cont = Cell.prototype.unrender.apply(this);
         if (cont) {
             var text_cell = this.element;
             if (this.get_text() === this.placeholder) {
                 this.set_text('');
             }
             this.refresh();
         }
         return cont;
     };
 
     TextCell.prototype.execute = function () {
         this.render();
     };
 
     /**
      * setter: {{#crossLink "TextCell/set_text"}}{{/crossLink}}
      * @method get_text
      * @retrun {string} CodeMirror current text value
      */
     TextCell.prototype.get_text = function() {
         return this.code_mirror.getValue();
     };
 
     /**
      * @param {string} text - Codemiror text value
      * @see TextCell#get_text
      * @method set_text
      * */
     TextCell.prototype.set_text = function(text) {
         this.code_mirror.setValue(text);
         this.unrender();
         this.code_mirror.refresh();
     };
 
     /**
      * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
      * @method get_rendered
      * */
     TextCell.prototype.get_rendered = function() {
         return this.element.find('div.text_cell_render').html();
     };
 
     /**
      * @method set_rendered
      */
     TextCell.prototype.set_rendered = function(text) {
         this.element.find('div.text_cell_render').html(text);
     };
 
 
     /**
      * Create Text cell from JSON
      * @param {json} data - JSON serialized text-cell
      * @method fromJSON
      */
     TextCell.prototype.fromJSON = function (data) {
         Cell.prototype.fromJSON.apply(this, arguments);
         if (data.cell_type === this.cell_type) {
             if (data.source !== undefined) {
                 this.set_text(data.source);
                 // make this value the starting point, so that we can only undo
                 // to this state, instead of a blank cell
                 this.code_mirror.clearHistory();
                 // TODO: This HTML needs to be treated as potentially dangerous
                 // user input and should be handled before set_rendered.         
                 this.set_rendered(data.rendered || '');
                 this.rendered = false;
                 this.render();
             }
         }
     };
 
     /** Generate JSON from cell
      * @return {object} cell data serialised to json
      */
     TextCell.prototype.toJSON = function () {
         var data = Cell.prototype.toJSON.apply(this);
         data.source = this.get_text();
         if (data.source == this.placeholder) {
             data.source = "";
         }
         return data;
     };
 
 
     var MarkdownCell = function (options) {
         /**
          * Constructor
          *
          * Parameters:
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance 
          *          config: ConfigSection instance
          *          keyboard_manager: KeyboardManager instance 
          *          notebook: Notebook instance
          */
         options = options || {};
         var config = utils.mergeopt(MarkdownCell, {});
-        TextCell.apply(this, [$.extend({}, options, {config: config})]);
-
         this.class_config = new configmod.ConfigWithDefaults(options.config,
                                             {}, 'MarkdownCell');
+        TextCell.apply(this, [$.extend({}, options, {config: config})]);
+
         this.cell_type = 'markdown';
     };
 
     MarkdownCell.options_default = {
         cm_config: {
             mode: 'ipythongfm'
         },
         placeholder: "Type *Markdown* and LaTeX: $\\alpha^2$"
     };
 
     MarkdownCell.prototype = Object.create(TextCell.prototype);
 
     MarkdownCell.prototype.set_heading_level = function (level) {
         /**
          * make a markdown cell a heading
          */
         level = level || 1;
         var source = this.get_text();
         source = source.replace(/^(#*)\s?/,
             new Array(level + 1).join('#') + ' ');
         this.set_text(source);
         this.refresh();
         if (this.rendered) {
             this.render();
         }
     };
 
     /**
      * @method render
      */
     MarkdownCell.prototype.render = function () {
         var cont = TextCell.prototype.render.apply(this);
         if (cont) {
             var that = this;
             var text = this.get_text();
             var math = null;
             if (text === "") { text = this.placeholder; }
             var text_and_math = mathjaxutils.remove_math(text);
             text = text_and_math[0];
             math = text_and_math[1];
             marked(text, function (err, html) {
                 html = mathjaxutils.replace_math(html, math);
                 html = security.sanitize_html(html);
                 html = $($.parseHTML(html));
                 // add anchors to headings
                 html.find(":header").addBack(":header").each(function (i, h) {
                     h = $(h);
                     var hash = h.text().replace(/ /g, '-');
                     h.attr('id', hash);
                     h.append(
                         $('<a/>')
                             .addClass('anchor-link')
                             .attr('href', '#' + hash)
                             .text('¶')
                     );
                 });
                 // links in markdown cells should open in new tabs
                 html.find("a[href]").not('[href^="#"]').attr("target", "_blank");
                 that.set_rendered(html);
                 that.typeset();
                 that.events.trigger("rendered.MarkdownCell", {cell: that});
             });
         }
         return cont;
     };
 
 
     var RawCell = function (options) {
         /**
          * Constructor
          *
          * Parameters:
          *  options: dictionary
          *      Dictionary of keyword arguments.
          *          events: $(Events) instance 
          *          config: ConfigSection instance
          *          keyboard_manager: KeyboardManager instance 
          *          notebook: Notebook instance
          */
         options = options || {};
         var config = utils.mergeopt(RawCell, {});
         TextCell.apply(this, [$.extend({}, options, {config: config})]);
 
         this.class_config = new configmod.ConfigWithDefaults(options.config,
                                             RawCell.config_defaults, 'RawCell');
         this.cell_type = 'raw';
     };
 
     RawCell.options_default = {
         placeholder : "Write raw LaTeX or other formats here, for use with nbconvert. " +
             "It will not be rendered in the notebook. " + 
             "When passing through nbconvert, a Raw Cell's content is added to the output unmodified."
     };
     
     RawCell.config_defaults =  {
         highlight_modes : {
             'diff'         :{'reg':[/^diff/]}
         },
     };
 
     RawCell.prototype = Object.create(TextCell.prototype);
 
     /** @method bind_events **/
     RawCell.prototype.bind_events = function () {
         TextCell.prototype.bind_events.apply(this);
         var that = this;
         this.element.focusout(function() {
             that.auto_highlight();
             that.render();
         });
 
         this.code_mirror.on('focus', function() { that.unrender(); });
     };
 
     /** @method render **/
     RawCell.prototype.render = function () {
         var cont = TextCell.prototype.render.apply(this);
         if (cont){
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_text(text);
             this.element.removeClass('rendered');
             this.auto_highlight();
         }
         return cont;
     };
 
     // Backwards compatability.
     IPython.TextCell = TextCell;
     IPython.MarkdownCell = MarkdownCell;
     IPython.RawCell = RawCell;
 
     var textcell = {
         TextCell: TextCell,
         MarkdownCell: MarkdownCell,
         RawCell: RawCell
     };
     return textcell;
 });