From 653f15749a26cbcda10f5d70e02303ccd9a338b6 2011-08-08 18:12:11
From: Brian E. Granger <ellisonbg@gmail.com>
Date: 2011-08-08 18:12:11
Subject: [PATCH] New HTMl cell working with CodeMirror editing.

---

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 1778597..ec3491e 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -201,11 +201,11 @@ div.output_html {
 div.output_png {
 }
 
-div.text_cell {
+div.html_cell {
     background-color: white;
 }
 
-textarea.text_cell_input {
+textarea.html_cell_input {
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
     font-family: monospace;
@@ -218,7 +218,7 @@ textarea.text_cell_input {
     color: black;
 }
 
-div.text_cell_render {
+div.html_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
@@ -230,25 +230,25 @@ div.text_cell_render {
     color: black;
 }
 
-div.text_cell_render em {font-style: italic;}
-div.text_cell_render strong {font-weight: bold;}
-div.text_cell_render u {text-decoration: underline;}
-div.text_cell_render :link { text-decoration: underline }
-div.text_cell_render :visited { text-decoration: underline }
-div.text_cell_render h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
-div.text_cell_render h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
-div.text_cell_render h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
-div.text_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
-div.text_cell_render h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
-div.text_cell_render h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
-div.text_cell_render ul {list-style:disc; margin-left: 40px;}
-div.text_cell_render ul ul {list-style:square; margin-left: 40px;}
-div.text_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
-div.text_cell_render ol {list-style:upper-roman; margin-left: 40px;}
-div.text_cell_render ol ol {list-style:upper-alpha;}
-div.text_cell_render ol ol ol {list-style:decimal;}
-div.text_cell_render ol ol ol ol {list-style:lower-alpha;}
-div.text_cell_render ol ol ol ol ol {list-style:lower-roman;}
+div.html_cell_render em {font-style: italic;}
+div.html_cell_render strong {font-weight: bold;}
+div.html_cell_render u {text-decoration: underline;}
+div.html_cell_render :link { text-decoration: underline }
+div.html_cell_render :visited { text-decoration: underline }
+div.html_cell_render h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
+div.html_cell_render h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
+div.html_cell_render h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
+div.html_cell_render h4 {margin: 1.12em 0; font-weight: bold;}
+div.html_cell_render h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
+div.html_cell_render h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
+div.html_cell_render ul {list-style:disc; margin-left: 40px;}
+div.html_cell_render ul ul {list-style:square; margin-left: 40px;}
+div.html_cell_render ul ul ul {list-style:circle; margin-left: 40px;}
+div.html_cell_render ol {list-style:upper-roman; margin-left: 40px;}
+div.html_cell_render ol ol {list-style:upper-alpha;}
+div.html_cell_render ol ol ol {list-style:decimal;}
+div.html_cell_render ol ol ol ol {list-style:lower-alpha;}
+div.html_cell_render ol ol ol ol ol {list-style:lower-roman;}
 
 
 .CodeMirror {
diff --git a/IPython/frontend/html/notebook/static/js/htmlcell.js b/IPython/frontend/html/notebook/static/js/htmlcell.js
index 7141ded..397dc2d 100644
--- a/IPython/frontend/html/notebook/static/js/htmlcell.js
+++ b/IPython/frontend/html/notebook/static/js/htmlcell.js
@@ -1,37 +1,38 @@
 
 //============================================================================
-// TextCell
+// HTMLCell
 //============================================================================
 
 var IPython = (function (IPython) {
 
-    var TextCell = function (notebook) {
+    var HTMLCell = function (notebook) {
         IPython.Cell.apply(this, arguments);
         this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$"
         this.rendered = false;
     };
 
 
-    TextCell.prototype = new IPython.Cell();
+    HTMLCell.prototype = new IPython.Cell();
 
 
-    TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing').
-                   append(
-                       $("<textarea>" + this.placeholder + "</textarea>").
-                       addClass('text_cell_input').
-                       attr('rows',1).
-                       attr('cols',80).
-                       autogrow()
-                   ).append(
-                       // The tabindex=-1 makes this div focusable.
-                       $('<div></div>').addClass('text_cell_render').attr('tabindex','-1')
-                   )
+
+    HTMLCell.prototype.create_element = function () {
+        var cell = $("<div>").addClass('cell html_cell border-box-sizing');
+        var input_area = $('<div/>').addClass('html_cell_input');
+        this.code_mirror = CodeMirror(input_area.get(0), {
+            indentUnit : 4,
+            enterMode : 'flat',
+            tabMode: 'shift',
+            value: this.placeholder
+        });
+        // The tabindex=-1 makes this div focusable.
+        var render_area = $('<div/>').addClass('html_cell_render').attr('tabindex','-1');
+        cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
-    TextCell.prototype.bind_events = function () {
+    HTMLCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
@@ -45,71 +46,71 @@ var IPython = (function (IPython) {
     };
 
 
-    TextCell.prototype.select = function () {
+    HTMLCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
-        var output = this.element.find("div.text_cell_render");
+        var output = this.element.find("div.html_cell_render");
         output.trigger('focus');
     };
 
 
-    TextCell.prototype.edit = function () {
+    HTMLCell.prototype.edit = function () {
         if (this.rendered === true) {
-            var text_cell = this.element;
-            var input = text_cell.find("textarea.text_cell_input");
-            var output = text_cell.find("div.text_cell_render");  
+            var html_cell = this.element;
+            var output = html_cell.find("div.html_cell_render");  
             output.hide();
-            input.show().trigger('focus');
+            html_cell.find('div.html_cell_input').show();
+            this.code_mirror.focus();
+            this.code_mirror.refresh();
             this.rendered = false;
         };
     };
 
 
-    TextCell.prototype.render = function () {
+    HTMLCell.prototype.render = function () {
         if (this.rendered === false) {
-            var text_cell = this.element;
-            var input = text_cell.find("textarea.text_cell_input");
-            var output = text_cell.find("div.text_cell_render");    
-            var text = input.val();
-            if (text === "") {
-                text = this.placeholder;
-                input.val(text);
-            };
-            output.html(text)
-            input.html(text);
+            var html_cell = this.element;
+            var output = html_cell.find("div.html_cell_render");    
+            var text = this.get_source();
+            if (text === "") {text = this.placeholder;};
+            this.set_render(text);
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-            input.hide();
+            html_cell.find('div.html_cell_input').hide();
             output.show();
             this.rendered = true;
         };
     };
 
 
-    TextCell.prototype.config_mathjax = function () {
-        var text_cell = this.element;
+    HTMLCell.prototype.config_mathjax = function () {
+        var html_cell = this.element;
         var that = this;
-        text_cell.click(function () {
+        html_cell.click(function () {
             that.edit();
         }).focusout(function () {
             that.render();
         });
         
-        text_cell.trigger("focusout");
+        html_cell.trigger("focusout");
+    };
+
+
+    HTMLCell.prototype.get_source = function() {
+        return this.code_mirror.getValue();
     };
 
 
-    TextCell.prototype.get_text = function() {
-        return this.element.find("textarea.text_cell_input").val();
+    HTMLCell.prototype.set_source = function(text) {
+        this.code_mirror.setValue(text);
+        this.code_mirror.refresh();
     };
 
 
-    TextCell.prototype.set_text = function(text) {
-        this.element.find("textarea.text_cell_input").val(text);
-        this.element.find("textarea.text_cell_input").html(text);
-        this.element.find("div.text_cell_render").html(text);
+    HTMLCell.prototype.set_render = function(text) {
+        this.element.find('div.html_cell_render').html(text);
     };
 
 
-    TextCell.prototype.at_top = function () {
+    HTMLCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
@@ -118,7 +119,7 @@ var IPython = (function (IPython) {
     };
 
 
-    TextCell.prototype.at_bottom = function () {
+    HTMLCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
@@ -127,24 +128,24 @@ var IPython = (function (IPython) {
     };
 
 
-    TextCell.prototype.fromJSON = function (data) {
-        if (data.cell_type === 'text') {
-            if (data.text !== undefined) {
-                this.set_text(data.text);
-                this.grow(this.element.find("textarea.text_cell_input"));
+    HTMLCell.prototype.fromJSON = function (data) {
+        if (data.cell_type === 'html') {
+            if (data.source !== undefined) {
+                this.set_source(data.source);
+                this.set_render(data.source);
             };
         };
     }
 
 
-    TextCell.prototype.toJSON = function () {
+    HTMLCell.prototype.toJSON = function () {
         var data = {}
-        data.cell_type = 'text';
-        data.text = this.get_text();
+        data.cell_type = 'html';
+        data.source = this.get_source();
         return data;
     };
 
-    IPython.TextCell = TextCell;
+    IPython.HTMLCell = HTMLCell;
 
     return IPython;
 
diff --git a/IPython/frontend/html/notebook/static/js/notebook.js b/IPython/frontend/html/notebook/static/js/notebook.js
index 1149b30..859d00c 100644
--- a/IPython/frontend/html/notebook/static/js/notebook.js
+++ b/IPython/frontend/html/notebook/static/js/notebook.js
@@ -320,10 +320,10 @@ var IPython = (function (IPython) {
     }
 
 
-    Notebook.prototype.insert_text_cell_before = function (index) {
+    Notebook.prototype.insert_html_cell_before = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
-        var cell = new IPython.TextCell(this);
+        var cell = new IPython.HTMLCell(this);
         cell.config_mathjax();
         this.insert_cell_before(cell, i);
         this.select(this.find_cell_index(cell));
@@ -331,10 +331,10 @@ var IPython = (function (IPython) {
     }
 
 
-    Notebook.prototype.insert_text_cell_after = function (index) {
+    Notebook.prototype.insert_html_cell_after = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
-        var cell = new IPython.TextCell(this);
+        var cell = new IPython.HTMLCell(this);
         cell.config_mathjax();
         this.insert_cell_after(cell, i);
         this.select(this.find_cell_index(cell));
@@ -342,31 +342,32 @@ var IPython = (function (IPython) {
     }
 
 
-    Notebook.prototype.text_to_code = function (index) {
+    Notebook.prototype.html_to_code = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var source_element = this.cell_elements().eq(i);
         var source_cell = source_element.data("cell");
-        if (source_cell instanceof IPython.TextCell) {
+        if (source_cell instanceof IPython.HTMLCell) {
             this.insert_code_cell_after(i);
             var target_cell = this.cells()[i+1];
-            target_cell.set_code(source_cell.get_text());
+            target_cell.set_code(source_cell.get_source());
             source_element.remove();
         };
     };
 
 
-    Notebook.prototype.code_to_text = function (index) {
+    Notebook.prototype.code_to_html = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
         var source_element = this.cell_elements().eq(i);
         var source_cell = source_element.data("cell");
         if (source_cell instanceof IPython.CodeCell) {
-            this.insert_text_cell_after(i);
+            this.insert_html_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_code();
             if (text === "") {text = target_cell.placeholder;};
-            target_cell.set_text(text);
+            target_cell.set_source(text);
+            target_cell.set_render(text);
             source_element.remove();
             target_cell.edit();
         };
@@ -508,7 +509,7 @@ var IPython = (function (IPython) {
             var code = cell.get_code();
             var msg_id = that.kernel.execute(cell.get_code());
             that.msg_cell_map[msg_id] = cell.cell_id;
-        } else if (cell instanceof IPython.TextCell) {
+        } else if (cell instanceof IPython.HTMLCell) {
             cell.render();
         }
         if (default_options.terminal) {
@@ -561,8 +562,8 @@ var IPython = (function (IPython) {
                 if (cell_data.cell_type == 'code') {
                     new_cell = this.insert_code_cell_after();
                     new_cell.fromJSON(cell_data);
-                } else if (cell_data.cell_type === 'text') {
-                    new_cell = this.insert_text_cell_after();
+                } else if (cell_data.cell_type === 'html') {
+                    new_cell = this.insert_html_cell_after();
                     new_cell.fromJSON(cell_data);
                 };
             };          
diff --git a/IPython/frontend/html/notebook/static/js/panelsection.js b/IPython/frontend/html/notebook/static/js/panelsection.js
index 71b62ea..d1374ae 100644
--- a/IPython/frontend/html/notebook/static/js/panelsection.js
+++ b/IPython/frontend/html/notebook/static/js/panelsection.js
@@ -153,10 +153,10 @@ var IPython = (function (IPython) {
             IPython.notebook.move_cell_down();
         });
         this.content.find('#to_code').click(function () {
-            IPython.notebook.text_to_code();
+            IPython.notebook.html_to_code();
         });
-        this.content.find('#to_text').click(function () {
-            IPython.notebook.code_to_text();
+        this.content.find('#to_html').click(function () {
+            IPython.notebook.code_to_html();
         });
         this.content.find('#run_selected_cell').click(function () {
             IPython.notebook.execute_selected_cell();
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 6b06e74..a95522e 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -96,7 +96,7 @@
                 <div class="section_row">
                     <span id="cell_type" class="section_row_buttons">
                         <button id="to_code">Code</button>
-                        <button id="to_text">Text</button>
+                        <button id="to_html">HTML</button>
                     </span>
                     <span class="button_label">Cell Type</span>
                 </div>
@@ -174,7 +174,7 @@
 <script src="static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/cell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
-<script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
+<script src="static/js/htmlcell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>