Refactoring of text/markdown/rst/html cells.

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

@@ -0,0 +1,20 b''
+.rendered_html {color: black;}
+.rendered_html em {font-style: italic;}
+.rendered_html strong {font-weight: bold;}
+.rendered_html u {text-decoration: underline;}
+.rendered_html :link { text-decoration: underline }
+.rendered_html :visited { text-decoration: underline }
+.rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
+.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
+.rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
+.rendered_html h4 {margin: 1.12em 0; font-weight: bold;}
+.rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
+.rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
+.rendered_html ul {list-style:disc; margin-left: 40px;}
+.rendered_html ul ul {list-style:square; margin-left: 40px;}
+.rendered_html ul ul ul {list-style:circle; margin-left: 40px;}
+.rendered_html ol {list-style:upper-roman; margin-left: 40px;}
+.rendered_html ol ol {list-style:upper-alpha;}
+.rendered_html ol ol ol {list-style:decimal;}
+.rendered_html ol ol ol ol {list-style:lower-alpha;}
+.rendered_html ol ol ol ol ol {list-style:lower-roman;}
  No newline at end of file

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

@@ -69,7 +69,7 b' div.section_content {'
 
 
 span.section_row_buttons > button {
-    width: 60px;
+    width: 70px;
 }
 
 .section_row {
@@ -205,31 +205,15 b' div.output_html {'
 div.output_png {
 }
 
-div.html_cell {
+div.text_cell {
     background-color: white;
 }
 
-div.html_cell_input {
-    color: black;
-}
-
-div.html_cell_render {
-    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-    /* Slightly bigger than the rest of the notebook */
-    font-size: 116%;
-    outline: none;
-    resize: none;
-    width:  inherit;
-    border-style: none;
-    padding: 5px;
-    color: black;
-}
-
-div.rst_cell_input {
+div.text_cell_input {
     color: black;
 }
 
-div.rst_cell_render {
+div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
     /* Slightly bigger than the rest of the notebook */
     font-size: 116%;
@@ -241,27 +225,6 b' div.rst_cell_render {'
     color: black;
 }
 
-.rendered_html {color: black;}
-.rendered_html em {font-style: italic;}
-.rendered_html strong {font-weight: bold;}
-.rendered_html u {text-decoration: underline;}
-.rendered_html :link { text-decoration: underline }
-.rendered_html :visited { text-decoration: underline }
-.rendered_html h1 {font-size: 197%; margin: .67em 0; font-weight: bold;}
-.rendered_html h2 {font-size: 153.9%; margin: .75em 0; font-weight: bold;}
-.rendered_html h3 {font-size: 116%; margin: .83em 0; font-weight: bold;}
-.rendered_html h4 {margin: 1.12em 0; font-weight: bold;}
-.rendered_html h5 {font-size: 85%.; margin: 1.5em 0; font-weight: bold;}
-.rendered_html h6 {font-size: 77%; margin: 1.67em 0; font-weight: bold;}
-.rendered_html ul {list-style:disc; margin-left: 40px;}
-.rendered_html ul ul {list-style:square; margin-left: 40px;}
-.rendered_html ul ul ul {list-style:circle; margin-left: 40px;}
-.rendered_html ol {list-style:upper-roman; margin-left: 40px;}
-.rendered_html ol ol {list-style:upper-alpha;}
-.rendered_html ol ol ol {list-style:decimal;}
-.rendered_html ol ol ol ol {list-style:lower-alpha;}
-.rendered_html ol ol ol ol ol {list-style:lower-roman;}
-
 .CodeMirror {
   line-height: 1.231;  /* Changed from 1em to our global default */
 }

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

@@ -23,7 +23,7 b' var IPython = (function (IPython) {'
     Cell.prototype.select = function () {
         this.element.addClass('ui-widget-content ui-corner-all');
         this.selected = true;
-        // TODO: we need t test across browsers to see if both of these are needed.
+        // TODO: we need to test across browsers to see if both of these are needed.
         // In the meantime, there should not be any harm in having them both.
         this.element.find('textarea').trigger('focusin');
         this.element.find('textarea').trigger('focus');

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

@@ -12,7 +12,7 b' var IPython = (function (IPython) {'
         this.left_panel_element = $(left_panel_selector);
         this.left_panel_splitter_element = $(left_panel_splitter_selector);
         this.expanded = true;
-        this.width = 250;
+        this.width = 300;
         this.style();
         this.bind_events();
         this.create_children();

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

@@ -342,10 +342,10 b' var IPython = (function (IPython) {'
     }
 
 
-    Notebook.prototype.insert_rst_cell_before = function (index) {
+    Notebook.prototype.insert_markdown_cell_before = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
-        var cell = new IPython.RSTCell(this);
+        var cell = new IPython.MarkdownCell(this);
         cell.config_mathjax();
         this.insert_cell_before(cell, i);
         this.select(this.find_cell_index(cell));
@@ -353,10 +353,10 b' var IPython = (function (IPython) {'
     }
 
 
-    Notebook.prototype.insert_rst_cell_after = function (index) {
+    Notebook.prototype.insert_markdown_cell_after = function (index) {
         // TODO: Bounds check for i
         var i = this.index_or_selected(index);
-        var cell = new IPython.RSTCell(this);
+        var cell = new IPython.MarkdownCell(this);
         cell.config_mathjax();
         this.insert_cell_after(cell, i);
         this.select(this.find_cell_index(cell));
@@ -369,7 +369,8 b' var IPython = (function (IPython) {'
         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.HTMLCell || source_cell instanceof IPython.RSTCell) {
+        if (source_cell instanceof IPython.HTMLCell || 
+            source_cell instanceof IPython.MarkdownCell) {
             this.insert_code_cell_after(i);
             var target_cell = this.cells()[i+1];
             target_cell.set_code(source_cell.get_source());
@@ -378,20 +379,23 b' var IPython = (function (IPython) {'
     };
 
 
-    Notebook.prototype.to_rst = function (index) {
+    Notebook.prototype.to_markdown = 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");
         var target_cell = null;
         if (source_cell instanceof IPython.CodeCell) {
-            this.insert_rst_cell_after(i);
+            this.insert_markdown_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_code();
         } else if (source_cell instanceof IPython.HTMLCell) {
-            this.insert_rst_cell_after(i);
+            this.insert_markdown_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_source();
+            if (text === source_cell.placeholder) {
+                text = target_cell.placeholder;
+            }
         }
         if (target_cell !== null) {
             if (text === "") {text = target_cell.placeholder;};
@@ -412,10 +416,13 b' var IPython = (function (IPython) {'
             this.insert_html_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_code();
-        } else if (source_cell instanceof IPython.RSTCell) {
+        } else if (source_cell instanceof IPython.MarkdownCell) {
             this.insert_html_cell_after(i);
             var target_cell = this.cells()[i+1];
             var text = source_cell.get_source();
+            if (text === source_cell.placeholder) {
+                text = target_cell.placeholder;
+            }
         }
         if (target_cell !== null) {
             if (text === "") {text = target_cell.placeholder;};

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

@@ -158,8 +158,8 b' var IPython = (function (IPython) {'
         this.content.find('#to_html').click(function () {
             IPython.notebook.to_html();
         });
-        this.content.find('#to_rst').click(function () {
-            IPython.notebook.to_rst();
+        this.content.find('#to_markdown').click(function () {
+            IPython.notebook.to_markdown();
         });
         this.content.find('#run_selected_cell').click(function () {
             IPython.notebook.execute_selected_cell();

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

@@ -1,41 +1,44 b''
 
 //============================================================================
-// HTMLCell
+// TextCell
 //============================================================================
 
 var IPython = (function (IPython) {
 
-    var HTMLCell = function (notebook) {
+    // TextCell base class
+
+    var TextCell = function (notebook) {
+        this.code_mirror_mode = this.code_mirror_mode || 'htmlmixed';
+        this.placeholder = this.placeholder || '';
         IPython.Cell.apply(this, arguments);
-        this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$"
         this.rendered = false;
+        this.cell_type = this.cell_type || 'text';
     };
 
 
-    HTMLCell.prototype = new IPython.Cell();
-
+    TextCell.prototype = new IPython.Cell();
 
 
-    HTMLCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell html_cell border-box-sizing');
-        var input_area = $('<div/>').addClass('html_cell_input');
+    TextCell.prototype.create_element = function () {
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        var input_area = $('<div/>').addClass('text_cell_input');
         this.code_mirror = CodeMirror(input_area.get(0), {
             indentUnit : 4,
             enterMode : 'flat',
             tabMode: 'shift',
-            mode: 'htmlmixed',
+            mode: this.code_mirror_mode,
             theme: 'default',
             value: this.placeholder
         });
         // The tabindex=-1 makes this div focusable.
-        var render_area = $('<div/>').addClass('html_cell_render').
+        var render_area = $('<div/>').addClass('text_cell_render').
             addClass('rendered_html').attr('tabindex','-1');
         cell.append(input_area).append(render_area);
         this.element = cell;
     };
 
 
-    HTMLCell.prototype.bind_events = function () {
+    TextCell.prototype.bind_events = function () {
         IPython.Cell.prototype.bind_events.apply(this);
         var that = this;
         this.element.keydown(function (event) {
@@ -49,19 +52,19 b' var IPython = (function (IPython) {'
     };
 
 
-    HTMLCell.prototype.select = function () {
+    TextCell.prototype.select = function () {
         IPython.Cell.prototype.select.apply(this);
-        var output = this.element.find("div.html_cell_render");
+        var output = this.element.find("div.text_cell_render");
         output.trigger('focus');
     };
 
 
-    HTMLCell.prototype.edit = function () {
+    TextCell.prototype.edit = function () {
         if (this.rendered === true) {
-            var html_cell = this.element;
-            var output = html_cell.find("div.html_cell_render");  
+            var text_cell = this.element;
+            var output = text_cell.find("div.text_cell_render");  
             output.hide();
-            html_cell.find('div.html_cell_input').show();
+            text_cell.find('div.text_cell_input').show();
             this.code_mirror.focus();
             this.code_mirror.refresh();
             this.rendered = false;
@@ -69,51 +72,45 b' var IPython = (function (IPython) {'
     };
 
 
-    HTMLCell.prototype.render = function () {
-        if (this.rendered === false) {
-            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_rendered(text);
-            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
-            html_cell.find('div.html_cell_input').hide();
-            output.show();
-            this.rendered = true;
-        };
-    };
+    // Subclasses must define render.
+    TextCell.prototype.render = function () {};
 
 
-    HTMLCell.prototype.config_mathjax = function () {
-        var html_cell = this.element;
+    TextCell.prototype.config_mathjax = function () {
+        var text_cell = this.element;
         var that = this;
-        html_cell.click(function () {
+        text_cell.click(function () {
             that.edit();
         }).focusout(function () {
             that.render();
         });
         
-        html_cell.trigger("focusout");
+        text_cell.trigger("focusout");
     };
 
 
-    HTMLCell.prototype.get_source = function() {
+    TextCell.prototype.get_source = function() {
         return this.code_mirror.getValue();
     };
 
 
-    HTMLCell.prototype.set_source = function(text) {
+    TextCell.prototype.set_source = function(text) {
         this.code_mirror.setValue(text);
         this.code_mirror.refresh();
     };
 
 
-    HTMLCell.prototype.set_rendered = function(text) {
-        this.element.find('div.html_cell_render').html(text);
+    TextCell.prototype.get_rendered = function(text) {
+        return this.element.find('div.text_cell_render').html();
+    };
+
+
+    TextCell.prototype.set_rendered = function(text) {
+        this.element.find('div.text_cell_render').html(text);
     };
 
 
-    HTMLCell.prototype.at_top = function () {
+    TextCell.prototype.at_top = function () {
         if (this.rendered) {
             return true;
         } else {
@@ -122,7 +119,7 b' var IPython = (function (IPython) {'
     };
 
 
-    HTMLCell.prototype.at_bottom = function () {
+    TextCell.prototype.at_bottom = function () {
         if (this.rendered) {
             return true;
         } else {
@@ -131,8 +128,8 b' var IPython = (function (IPython) {'
     };
 
 
-    HTMLCell.prototype.fromJSON = function (data) {
-        if (data.cell_type === 'html') {
+    TextCell.prototype.fromJSON = function (data) {
+        if (data.cell_type === this.cell_type) {
             if (data.source !== undefined) {
                 this.set_source(data.source);
                 this.set_rendered(data.source);
@@ -141,14 +138,110 b' var IPython = (function (IPython) {'
     }
 
 
-    HTMLCell.prototype.toJSON = function () {
+    TextCell.prototype.toJSON = function () {
         var data = {}
-        data.cell_type = 'html';
+        data.cell_type = this.cell_type;
         data.source = this.get_source();
+        data.rendered = this.get_rendered();
         return data;
     };
 
+
+    // HTMLCell
+
+    var HTMLCell = function (notebook) {
+        this.placeholder = "Type <strong>HTML</strong> and LaTeX: $\\alpha^2$";
+        IPython.TextCell.apply(this, arguments);
+        this.cell_type = 'html';
+    };
+
+
+    HTMLCell.prototype = new TextCell();
+
+
+    HTMLCell.prototype.render = function () {
+        if (this.rendered === false) {
+            var text = this.get_source();
+            if (text === "") {text = this.placeholder;};
+            this.set_rendered(text);
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+            this.element.find('div.text_cell_input').hide();
+            this.element.find("div.text_cell_render").show();
+            this.rendered = true;
+        };
+    };
+
+
+    // MarkdownCell
+
+    var MarkdownCell = function (notebook) {
+        this.placeholder = "Type *Markdown* and LaTeX: $\\alpha^2$";
+        IPython.TextCell.apply(this, arguments);
+        this.cell_type = 'markdown';
+    };
+
+
+    MarkdownCell.prototype = new TextCell();
+
+
+    MarkdownCell.prototype.render = function () {
+        if (this.rendered === false) {
+            var text = this.get_source();
+            if (text === "") {text = this.placeholder;};
+            var html = IPython.markdown_converter.makeHtml(text);
+            this.set_rendered(html);
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+            this.element.find('div.text_cell_input').hide();
+            this.element.find("div.text_cell_render").show();
+            this.rendered = true;
+        };
+    };
+
+
+    // RSTCell
+
+    var RSTCell = function (notebook) {
+        this.placeholder = "Type *ReStructured Text* and LaTeX: $\\alpha^2$";
+        IPython.TextCell.apply(this, arguments);
+        this.cell_type = 'rst';
+    };
+
+
+    RSTCell.prototype = new TextCell();
+
+
+    RSTCell.prototype.render = function () {
+        if (this.rendered === false) {  
+            var text = this.get_source();
+            if (text === "") {text = this.placeholder;};
+            var settings = {
+                processData : false,
+                cache : false,
+                type : "POST",
+                data : text,
+                headers : {'Content-Type': 'application/x-rst'},
+                success : $.proxy(this.handle_render,this)
+            };
+            $.ajax("/rstservice/render", settings);
+            this.element.find('div.text_cell_input').hide();
+            this.element.find("div.text_cell_render").show();
+            this.set_rendered("Rendering...");
+        };
+    };
+
+
+    RSTCell.prototype.handle_render = function (data, status, xhr) {
+        this.set_rendered(data);
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+        this.rendered = true;
+    };
+
+
+    IPython.TextCell = TextCell;
     IPython.HTMLCell = HTMLCell;
+    IPython.MarkdownCell = MarkdownCell;
+    IPython.RSTCell = RSTCell;
+
 
     return IPython;
 

IPython/frontend/html/notebook/templates/notebook.html

@@ -28,6 +28,8 b''
     <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="static/css/base.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
+    <link rel="stylesheet" href="static/css/renderedhtml.css" type="text/css" />
+
 
 </head>
 
@@ -82,6 +84,14 b''
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
+                    <span id="cell_type" class="section_row_buttons">
+                        <button id="to_code">Code</button>
+                        <button id="to_html">HTML</button>
+                        <button id="to_markdown">Markdown</button>
+                    </span>
+                    <!-- <span class="button_label">Format</span> -->
+                </div>
+                <div class="section_row">
                     <span id="insert" class="section_row_buttons">
                         <button id="insert_cell_above">Above</button>
                         <button id="insert_cell_below">Below</button>
@@ -96,14 +106,6 b''
                     <span class="button_label">Move</span>
                 </div>
                 <div class="section_row">
-                    <span id="cell_type" class="section_row_buttons">
-                        <button id="to_code">Code</button>
-                        <button id="to_html">HTML</button>
-                        <button id="to_rst">RST</button>
-                    </span>
-                    <span class="button_label">Format</span>
-                </div>
-                <div class="section_row">
                     <span id="toggle_output" class="section_row_buttons">
                         <button id="collapse_cell">Collapse</button>
                         <button id="expand_cell">Expand</button>
@@ -173,12 +175,22 b''
 <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
+
+<script src="static/codemirror-2.12/lib/codemirror.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/python/python.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/xml/xml.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/javascript/javascript.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/css/css.js" charset="utf-8"></script>
+<script src="static/codemirror-2.12/mode/rst/rst.js" charset="utf-8"></script>
+
+<script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
+
 <script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <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/htmlcell.js" type="text/javascript" charset="utf-8"></script>
-<script src="static/js/rstcell.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/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>
@@ -188,14 +200,7 b''
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
-<script src="static/codemirror-2.12/lib/codemirror.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/python/python.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/xml/xml.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/javascript/javascript.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/css/css.js" charset="utf-8"></script>
-<script src="static/codemirror-2.12/mode/rst/rst.js" charset="utf-8"></script>
-<script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
+
 
 </body>