Further cleanup for celltoolbars.

IPython/frontend/html/notebook/static/css/celltoolbar.css

@@ -1,74 +1,72 b''
 /* Css for the metadata edit area */
 
 
 .celltoolbar {
     border: thin solid #DDD;
     margin-left: 0px;
     border-bottom: none;
     background : #EEE;
     border-top-right-radius: 3px;
     border-top-left-radius: 3px;
 }
 
 .no_input_radius {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
 .text_cell .ctb_prompt {
     display: none;
 }
 
 .code_cell .ctb_prompt {
     display: block;
 }
 
-.ctb_wrapper{
+.ctb_hideshow {
     display: none;
 }
 
-.toolbaron .ctb_wrapper{
+.ctb_show.ctb_hideshow {
     display: block;
-    display: -webkit-box;
 }
 
-.toolbaron .ctb_wrapper + div > div.input_area,  
-.toolbaron .ctb_wrapper + div.text_cell_input{
+.ctb_show .ctb_hideshow + div > div.input_area,  
+.ctb_show .ctb_hideshow + div.text_cell_input {
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
-.toolbaron > .celltoolbar {
+.ctb_show > .celltoolbar {
     border-bottom-right-radius: 0px;
     border-bottom-left-radius: 0px;
 }
 
-
 .button_container {
     float: right;
 }
 
 .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
     border-radius : 0 0 0 0;
     border : none;
 }
 
 .celltoolbar .button_container select {
     margin: 10px;
     margin-top: 0px;
     margin-bottom: 0px;
     font-size: 77%;
 }
 
 .celltoolbar label span {
     font-size: 77%;
 }
 
 .celltoolbar input[type=checkbox] {
     margin-bottom: 1px;
 }
 
 .celltoolbar ui-button {
     border: none;
 }
 

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

@@ -1,386 +1,388 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2012  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // CellToolbar
 //============================================================================
 
 
 /**
  * A Module to control the per-cell toolbar.
  * @module IPython
  * @namespace IPython
  * @submodule CellToolbar
  */
 var IPython = (function (IPython) {
     "use strict";
 
     /**
      * @constructor
      * @class CellToolbar
      * @param {The cell to attach the metadata UI to} cell
      */
     var CellToolbar = function (cell) {
         CellToolbar._instances.push(this);
         this.cell = cell;
         this.create_element();
         this.rebuild();
         return this;
     };
 
 
     CellToolbar.prototype.create_element = function () {
         this.inner_element = $('<div/>');
         var ctb_element = $('<div/>').addClass('celltoolbar')
             .append(this.inner_element);
-        this.element = $('<div/>').addClass('ctb_wrapper hbox');
         ctb_element.addClass('box-flex1');
+        var ctb_area = $('<div/>').addClass('ctb_area hbox');
         var ctb_prompt = $('<div/>').addClass('ctb_prompt prompt');
-        this.element.append(ctb_prompt).append(ctb_element);
+        ctb_area.append(ctb_prompt).append(ctb_element);
+        this.element = $('<div/>').addClass('ctb_hideshow')
+            .append(ctb_area);
     };
 
 
     CellToolbar.dropdown_preset_element = $('<select/>')
         .addClass('ui-widget ui-widget-content')
         .attr('id', 'celltoolbar_selector')
         .append($('<option/>').attr('value', '').text('None'))
 
 
     CellToolbar.dropdown_preset_element.change(function() {
         var val = CellToolbar.dropdown_preset_element.val()
         if(val ==''){
             CellToolbar.global_hide();
         } else {
             CellToolbar.global_show();
             CellToolbar.activate_preset(val);
         }
     })
 
 
     CellToolbar.global_hide = function () {
-        $('body').removeClass('toolbaron');
+        $('body').removeClass('ctb_show');
     }
 
 
     CellToolbar.global_show = function () {
-       $('body').addClass('toolbaron');
+       $('body').addClass('ctb_show');
     }
     
     CellToolbar.prototype.hide = function () {
-        this.element.removeClass('toolbaron');
+        this.element.removeClass('ctb_show');
     }
 
 
     CellToolbar.prototype.show = function () {
-        this.element.addClass('toolbaron');
+        this.element.addClass('ctb_show');
     }
 
 
     /**
      * Class variable that should contain a dict of all availlable callback
      * we need to think of wether or not we allow nested namespace
      * @property _callback_dict
      * @private
      * @static
      * @type Dict
      */
     CellToolbar._callback_dict = {};
 
     /**
      * Class variable that should contain the reverse order list of the button
      * to add to the toolbar of each cell
      * @property _ui_controls_list
      * @private
      * @static
      * @type List
      */
     CellToolbar._ui_controls_list = [];
 
     /**
      * Class variable that should contains the CellToolbar instances for each
      * cell of the notebook
      *
      * @private
      * @property _instances
      * @static
      * @type List
      */
     CellToolbar._instances =[]
 
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
      * @property _presets
      * @static
      * @type Dict
      */
     CellToolbar._presets ={}
 
     // this is by design not a prototype.
     /**
      * Register a callback to create an UI element in a cell toolbar.
      * @method register_callback
      * @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name
      * for easier sorting and avoid collision
      * @param  callback {function(div, cell)} callback that will be called to generate the ui element
      *
      *
      * The callback will receive the following element :
      *
      *    * a div in which to add element.
      *    * the cell it is responsible from
      *
      * @example
      *
      * Example that create callback for a button that toggle between `true` and `false` label,
      * with the metadata under the key 'foo' to reflect the status of the button.
      *
      *      // first param reference to a DOM div
      *      // second param reference to the cell.
      *      var toggle =  function(div, cell) {
      *          var button_container = $(div)
      *
      *          // let's create a button that show the  current value of the metadata
      *          var button = $('<div/>').button({label:String(cell.metadata.foo)});
      *
      *          // On click, change the metadata value and update the button label
      *          button.click(function(){
      *                      var v = cell.metadata.foo;
      *                      cell.metadata.foo = !v;
      *                      button.button("option", "label", String(!v));
      *                  })
      *
      *          // add the button to the DOM div.
      *          button_container.append(button);
      *      }
      *
      *      // now we register the callback under the name `foo` to give the
      *      // user the ability to use it later
      *      CellToolbar.register_callback('foo', toggle);
      */
     CellToolbar.register_callback = function(name, callback){
         // Overwrite if it already exists.
         CellToolbar._callback_dict[name] = callback;
     };
 
     /**
      * Register a preset of UI element in a cell toolbar.
      * Not supported Yet.
      * @method register_preset
      * @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name
      * for easier sorting and avoid collision
      * @param  preset_list {List of String} reverse order of the button in the toolbar. Each String of the list
      *          should correspond to a name of a registerd callback.
      *
      * @private
      * @example
      *
      *      CellToolbar.register_callback('foo.c1', function(div, cell){...});
      *      CellToolbar.register_callback('foo.c2', function(div, cell){...});
      *      CellToolbar.register_callback('foo.c3', function(div, cell){...});
      *      CellToolbar.register_callback('foo.c4', function(div, cell){...});
      *      CellToolbar.register_callback('foo.c5', function(div, cell){...});
      *
      *      CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5'])
      *      CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5'])
      */
     CellToolbar.register_preset = function(name, preset_list){
         CellToolbar._presets[name] = preset_list
         CellToolbar.dropdown_preset_element.append(
            $('<option/>').attr('value', name).text(name)
         )
     }
     /**
      * Activate an UI preset from `register_preset`
      *
      * This does not update the selection UI.
      *
      * @method activate_preset
      * @param preset_name {String} string corresponding to the preset name
      *
      * @static
      * @private
      * @example
      *
      *      CellToolbar.activate_preset('foo.foo_preset1');
      */
     CellToolbar.activate_preset= function(preset_name){
         var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){
             CellToolbar._ui_controls_list = preset;
             CellToolbar.rebuild_all();
         }
     }
 
 
     // this is by design not a prototype.
     /**
      * This should be called on the class and not on a instance as it will trigger
      * rebuild of all the instances.
      * @method rebuild_all
      * @static
      *
      */
     CellToolbar.rebuild_all = function(){
         for(var i in CellToolbar._instances){
             CellToolbar._instances[i].rebuild();
         }
     }
 
     /**
      * Rebuild all the button on the toolbar to update it's state.
      * @method rebuild
      */
     CellToolbar.prototype.rebuild = function(){
         // strip evrything from the div
         // which is probabli metainner.
         // or this.element.
         this.inner_element.empty();
 
         var cdict = CellToolbar._callback_dict;
         var preset = CellToolbar._ui_controls_list;
         // Yes we iterate on the class varaible, not the instance one.
         for ( var index in CellToolbar._ui_controls_list){
             var local_div = $('<div/>').addClass('button_container');
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.
             this.inner_element.append(local_div)
             cdict[preset[index]](local_div, this.cell)
         }
 
     }
 
 
     /**
      */
     CellToolbar.utils = {};
 
     /**
      * A utility function to generate bindings between a checkbox and cell/metadata
      * @method utils.checkbox_ui_generator
      * @static
      *
      * @param name {string} Label in front of the checkbox
      * @param setter {function( cell, newValue )}
      *        A setter method to set the newValue
      * @param getter {function( cell )}
      *        A getter methods which return the current value.
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
      * @example
      *
      * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
      *
      *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
      *          // setter
      *          function(cell, value){
      *              // we check that the slideshow namespace exist and create it if needed
      *              if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *              // set the value
      *              cell.metadata.slideshow.isSectionStart = value
      *              },
      *          //geter
      *          function(cell){ var ns = cell.metadata.slideshow;
      *              // if the slideshow namespace does not exist return `undefined`
      *              // (will be interpreted as `false` by checkbox) otherwise
      *              // return the value
      *              return (ns == undefined)? undefined: ns.isSectionStart
      *              }
      *      );
      *
      *      CellToolbar.register_callback('newSlide', newSlide);
      *
      */
     CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){
          return function(div, cell) {
             var button_container = $(div)
 
             var chkb = $('<input/>').attr('type', 'checkbox');
             var lbl = $('<label/>').append($('<span/>').text(name));
             lbl.append(chkb);
             chkb.attr("checked", getter(cell));
 
             chkb.click(function(){
                         var v = getter(cell);
                         setter(cell, !v);
                         chkb.attr("checked", !v);
                     })
            button_container.append($('<div/>').append(lbl));
 
         }
     }
 
     /**
      * A utility function to generate bindings between a dropdown list cell
      * @method utils.select_ui_generator
      * @static
      *
      * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
      *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
      *        and second the corresponding value to  be passed to setter/return by getter.
      * @param setter {function( cell, newValue )}
      *        A setter method to set the newValue
      * @param getter {function( cell )}
      *        A getter methods which return the current value of the metadata.
      * @param [label=""] {String} optionnal label for the dropdown menu
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
      * @example
      *
      *      var select_type = CellToolbar.utils.select_ui_generator([
      *              ["<None>"            , undefined      ],
      *              ["Header Slide" , "header_slide" ],
      *              ["Slide"        , "slide"        ],
      *              ["Fragment"     , "fragment"     ],
      *              ["Skip"         , "skip"         ],
      *              ],
      *              // setter
      *              function(cell, value){
      *                  // we check that the slideshow namespace exist and create it if needed
      *                  if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *                  // set the value
      *                  cell.metadata.slideshow.slide_type = value
      *                  },
      *              //geter
      *              function(cell){ var ns = cell.metadata.slideshow;
      *                  // if the slideshow namespace does not exist return `undefined`
      *                  // (will be interpreted as `false` by checkbox) otherwise
      *                  // return the value
      *                  return (ns == undefined)? undefined: ns.slide_type
      *                  }
      *      CellToolbar.register_callback('slideshow.select', select_type);
      *
      */
     CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label){
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
             var lbl = $("<label/>").append($('<span/>').text(label));
             var select = $('<select/>').addClass('ui-widget ui-widget-content');
             for(var itemn in list_list){
                 var opt = $('<option/>');
                         opt.attr('value', list_list[itemn][1])
                         opt.text(list_list[itemn][0])
                 select.append(opt);
             }
             select.val(getter(cell));
             select.change(function(){
                         setter(cell, select.val());
                     });
             button_container.append($('<div/>').append(lbl).append(select));
 
         }
     };
 
 
     IPython.CellToolbar = CellToolbar;
 
     return IPython;
 }(IPython));

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

@@ -1,534 +1,536 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2012  The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // TextCell
 //============================================================================
 
 /**
     A module that allow to create different type of Text Cell
     @module IPython
     @namespace IPython
  */
 var IPython = (function (IPython) {
 
     // TextCell base class
     var key = IPython.utils.keycodes;
 
     /**
      * Construct a new TextCell, codemirror mode is by default 'htmlmixed', and cell type is 'text'
      * cell start as not redered.
      *
      * @class TextCell
      * @constructor TextCell
      * @extend Ipython.Cell
      */
     var TextCell = function () {
         this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
         IPython.Cell.apply(this, arguments);
         this.rendered = false;
         this.cell_type = this.cell_type || 'text';
     };
 
     TextCell.prototype = new IPython.Cell();
 
     /**
      * Create the DOM element of the TextCell
      * @method create_element
      * @private
      */
     TextCell.prototype.create_element = function () {
         IPython.Cell.prototype.create_element.apply(this, arguments);
         var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
         cell.attr('tabindex','2');
+
         this.celltoolbar = new IPython.CellToolbar(this);
         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)
         });
         // The tabindex=-1 makes this div focusable.
         var render_area = $('<div/>').addClass('text_cell_render border-box-sizing').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
     /**
      * Bind the DOM evet to cell actions
      * Need to be called after TextCell.create_element
      * @private
      * @method bind_event
      */
     TextCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
             if (event.which === 13 && !event.shiftKey) {
                 if (that.rendered) {
                     that.edit();
                     return false;
                 };
             };
         });
         this.element.dblclick(function () {
             that.edit();
         });
     };
 
     /**
      * This method gets called in CodeMirror's onKeyDown/onKeyPress
      * handlers and is used to provide custom key handling.
      *
      * Subclass should override this method to have custom handeling
      *
      * @method handle_codemirror_keyevent
      * @param {CodeMirror} editor - The codemirror instance bound to the cell
      * @param {event} event -
      * @return {Boolean} `true` if CodeMirror should ignore the event, `false` Otherwise
      */
     TextCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         if (event.keyCode === 13 && (event.shiftKey || event.ctrlKey)) {
             // Always ignore shift-enter in CodeMirror as we handle it.
             return true;
         }
         return false;
     };
 
     /**
      * Select the current cell and trigger 'focus'
      * @method select
      */
     TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
     /**
      * unselect the current cell and `render` it
      * @method unselect
      */
     TextCell.prototype.unselect = function() {
         // render on selection of another cell
         this.render();
         IPython.Cell.prototype.unselect.apply(this);
     };
 
     /**
      *
      * put the current cell in edition mode
      * @method edit
      */
     TextCell.prototype.edit = function () {
         if ( this.read_only ) return;
         if (this.rendered === true) {
             var text_cell = this.element;
             var output = text_cell.find("div.text_cell_render");
             output.hide();
             text_cell.find('div.text_cell_input').show();
             this.code_mirror.refresh();
             this.code_mirror.focus();
             // We used to need an additional refresh() after the focus, but
             // it appears that this has been fixed in CM. This bug would show
             // up on FF when a newly loaded markdown cell was edited.
             this.rendered = false;
             if (this.get_text() === this.placeholder) {
                 this.set_text('');
                 this.refresh();
             }
         }
     };
 
 
     /**
      * Empty, Subclasses must define render.
      * @method render
      */
     TextCell.prototype.render = function () {};
 
 
     /**
      * 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.code_mirror.refresh();
     };
 
     /**
      * setter :{{#crossLink "TextCell/set_rendered"}}{{/crossLink}}
      * @method get_rendered
      * @return {html} html of rendered element
      * */
     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);
     };
 
     /**
      * not deprecated, but implementation wrong
      * @method at_top
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      */
     TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /**
      * not deprecated, but implementation wrong
      * @method at_bottom
      * @deprecated
      * @return {Boolean} true is cell rendered, false otherwise
      * I doubt this is what it is supposed to do
      * this implementation is completly false
      * */
     TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
             return false;
         }
     };
 
     /**
      * Create Text cell from JSON
      * @param {json} data - JSON serialized text-cell
      * @method fromJSON
      */
     TextCell.prototype.fromJSON = function (data) {
         IPython.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();
                 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 = IPython.Cell.prototype.toJSON.apply(this);
         data.cell_type = this.cell_type;
         data.source = this.get_text();
         return data;
     };
 
 
     /**
      * @constructor HtmlCell
      * @class HtmlCell
      * @extends Ipython.TextCell
      */
     var HTMLCell = function () {
         this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'html';
     };
 
 
     HTMLCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     HTMLCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         }
     };
 
 
     /**
      * @class MarkdownCell
      * @constructor MarkdownCell
      * @extends Ipython.HtmlCell
      */
     var MarkdownCell = function () {
         this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'markdown';
     };
 
 
     MarkdownCell.prototype = new TextCell();
 
     /**
      * @method render
      */
     MarkdownCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             text = IPython.mathjaxutils.remove_math(text)
             var html = IPython.markdown_converter.makeHtml(text);
             html = IPython.mathjaxutils.replace_math(html)
             try {
                 this.set_rendered(html);
             } catch (e) {
                 console.log("Error running Javascript in Markdown:");
                 console.log(e);
                 this.set_rendered($("<div/>").addClass("js-error").html(
                     "Error rendering Markdown!<br/>" + e.toString())
                 );
             }
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             var code_snippets = this.element.find("pre > code");
             code_snippets.replaceWith(function () {
                 var code = $(this).html();
                 /* Substitute br for newlines and &nbsp; for spaces
                    before highlighting, since prettify doesn't
                    preserve those on all browsers */
                 code = code.replace(/(\r\n|\n|\r)/gm, "<br/>");
                 code = code.replace(/ /gm, '&nbsp;');
                 code = prettyPrintOne(code);
 
                 return '<code class="prettyprint">' + code + '</code>';
             });
             this.typeset()
             this.rendered = true;
         }
     };
 
 
     // RawCell
 
     /**
      * @class RawCell
      * @constructor RawCell
      * @extends Ipython.TextCell
      */
     var RawCell = function () {
         this.placeholder = "Type plain text and LaTeX: $\\alpha^2$";
         this.code_mirror_mode = 'rst';
         IPython.TextCell.apply(this, arguments);
         this.cell_type = 'raw';
         var that = this
 
         this.element.focusout(
                 function() { that.auto_highlight(); }
             );
     };
 
 
     RawCell.prototype = new TextCell();
 
     /**
      * Trigger autodetection of highlight scheme for current cell
      * @method auto_highlight
      */
     RawCell.prototype.auto_highlight = function () {
         this._auto_highlight(IPython.config.raw_cell_highlight);
     };
 
     /** @method render **/
     RawCell.prototype.render = function () {
         this.rendered = true;
         this.edit();
     };
 
 
     /** @method handle_codemirror_keyevent **/
     RawCell.prototype.handle_codemirror_keyevent = function (editor, event) {
 
         var that = this;
         if (event.which === key.UPARROW && event.type === 'keydown') {
             // If we are not at the top, let CM handle the up arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_top()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         } else if (event.which === key.DOWNARROW && event.type === 'keydown') {
             // If we are not at the bottom, let CM handle the down arrow and
             // prevent the global keydown handler from handling it.
             if (!that.at_bottom()) {
                 event.stop();
                 return false;
             } else {
                 return true;
             };
         };
         return false;
     };
 
     /** @method select **/
     RawCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
         this.code_mirror.refresh();
         this.code_mirror.focus();
     };
 
     /** @method at_top **/
     RawCell.prototype.at_top = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === 0 && cursor.ch === 0) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /** @method at_bottom **/
     RawCell.prototype.at_bottom = function () {
         var cursor = this.code_mirror.getCursor();
         if (cursor.line === (this.code_mirror.lineCount()-1) && cursor.ch === this.code_mirror.getLine(cursor.line).length) {
             return true;
         } else {
             return false;
         }
     };
 
 
     /**
      * @class HeadingCell
      * @extends Ipython.TextCell
      */
 
     /**
      * @constructor HeadingCell
      * @extends Ipython.TextCell
      */
     var HeadingCell = function () {
         this.placeholder = "Type Heading Here";
         IPython.TextCell.apply(this, arguments);
         /**
          * heading level of the cell, use getter and setter to access
          * @property level
          */
         this.level = 1;
         this.cell_type = 'heading';
     };
 
 
     HeadingCell.prototype = new TextCell();
 
     /** @method fromJSON */
     HeadingCell.prototype.fromJSON = function (data) {
         if (data.level != undefined){
             this.level = data.level;
         }
         IPython.TextCell.prototype.fromJSON.apply(this, arguments);
     };
 
 
     /** @method toJSON */
     HeadingCell.prototype.toJSON = function () {
         var data = IPython.TextCell.prototype.toJSON.apply(this);
         data.level = this.get_level();
         return data;
     };
 
 
     /**
      * Change heading level of cell, and re-render
      * @method set_level
      */
     HeadingCell.prototype.set_level = function (level) {
         this.level = level;
         if (this.rendered) {
             this.rendered = false;
             this.render();
         };
     };
 
     /** The depth of header cell, based on html (h1 to h6)
      * @method get_level
      * @return {integer} level - for 1 to 6
      */
     HeadingCell.prototype.get_level = function () {
         return this.level;
     };
 
 
     HeadingCell.prototype.set_rendered = function (text) {
         var r = this.element.find("div.text_cell_render");
         r.empty();
         r.append($('<h'+this.level+'/>').html(text));
     };
 
 
     HeadingCell.prototype.get_rendered = function () {
         var r = this.element.find("div.text_cell_render");
         return r.children().first().html();
     };
 
 
     HeadingCell.prototype.render = function () {
         if (this.rendered === false) {
             var text = this.get_text();
             if (text === "") { text = this.placeholder; }
             this.set_rendered(text);
             this.typeset();
             this.element.find('div.text_cell_input').hide();
             this.element.find("div.text_cell_render").show();
             this.rendered = true;
         };
     };
 
     IPython.TextCell = TextCell;
     IPython.HTMLCell = HTMLCell;
     IPython.MarkdownCell = MarkdownCell;
     IPython.RawCell = RawCell;
     IPython.HeadingCell = HeadingCell;
 
 
     return IPython;
 
 }(IPython));