From 0ee6a87caee33e8b8b6663366497e22847999251 Mon Sep 17 00:00:00 2001 From: Frederik Hermans Date: Tue, 30 Jun 2015 22:20:17 +0200 Subject: [PATCH 1/4] Render newlines etc. in raw_input() prompt This commit addresses https://github.com/ipython/ipython/issues/8532. The output of raw_input() is rendered in a
, but the prompt is
rendered as a span.raw_input_prompt. With white-space:pre, the span
renders \t, \n, etc. as expected.
---
 notebook/static/notebook/less/outputarea.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/notebook/static/notebook/less/outputarea.less b/notebook/static/notebook/less/outputarea.less
index f9a7ac2d9..29adfa394 100644
--- a/notebook/static/notebook/less/outputarea.less
+++ b/notebook/static/notebook/less/outputarea.less
@@ -164,7 +164,7 @@ div.raw_input_container {
 }
 
 span.raw_input_prompt {
-    /* nothing needed here */
+    white-space: pre;
 }
 
 input.raw_input {

From 65ca37e6b776be5ad309b892f249609c89126774 Mon Sep 17 00:00:00 2001
From: Frederik Hermans 
Date: Tue, 30 Jun 2015 23:09:54 +0200
Subject: [PATCH 2/4] Proper line-height for raw_input() prompt

---
 notebook/static/notebook/less/outputarea.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/notebook/static/notebook/less/outputarea.less b/notebook/static/notebook/less/outputarea.less
index 29adfa394..e478c8448 100644
--- a/notebook/static/notebook/less/outputarea.less
+++ b/notebook/static/notebook/less/outputarea.less
@@ -158,6 +158,7 @@ div.output_javascript:empty {
 
 div.raw_input_container {
     font-family: @font-family-monospace;
+    line-height: @code_line_height;
     // for some reason, em padding doesn't compute the same for raw_input
     // that is not the first input, but px does
     padding-top: 5px;

From a31a64ad69b086b93aeb204ac2305d94c48243c7 Mon Sep 17 00:00:00 2001
From: Frederik Hermans 
Date: Fri, 3 Jul 2015 22:49:13 +0200
Subject: [PATCH 3/4] Replace raw_input_prompt span tag with a pre tag

Also, the input tag becomes a child of the pre tag.
---
 notebook/static/notebook/js/outputarea.js     | 32 +++++++++----------
 notebook/static/notebook/less/outputarea.less |  4 +--
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/notebook/static/notebook/js/outputarea.js b/notebook/static/notebook/js/outputarea.js
index 0f3b47ea8..13b49ba2d 100644
--- a/notebook/static/notebook/js/outputarea.js
+++ b/notebook/static/notebook/js/outputarea.js
@@ -774,23 +774,23 @@ define([
             $("
") .addClass("box-flex1 output_subarea raw_input_container") .append( - $("") + $("
")
                 .addClass("raw_input_prompt")
                 .text(content.prompt)
-            )
-            .append(
-                $("")
-                .addClass("raw_input")
-                .attr('type', input_type)
-                .attr("size", 47)
-                .keydown(function (event, ui) {
-                    // make sure we submit on enter,
-                    // and don't re-execute the *cell* on shift-enter
-                    if (event.which === keyboard.keycodes.enter) {
-                        that._submit_raw_input();
-                        return false;
-                    }
-                })
+                .append(
+                    $("")
+                    .addClass("raw_input")
+                    .attr('type', input_type)
+                    .attr("size", 47)
+                    .keydown(function (event, ui) {
+                        // make sure we submit on enter,
+                        // and don't re-execute the *cell* on shift-enter
+                        if (event.which === keyboard.keycodes.enter) {
+                            that._submit_raw_input();
+                            return false;
+                        }
+                    })
+                )
             )
         );
         
@@ -807,7 +807,7 @@ define([
 
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input_container");
-        var theprompt = container.find("span.raw_input_prompt");
+        var theprompt = container.find("pre.raw_input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var echo  = value;
diff --git a/notebook/static/notebook/less/outputarea.less b/notebook/static/notebook/less/outputarea.less
index e478c8448..02adddf60 100644
--- a/notebook/static/notebook/less/outputarea.less
+++ b/notebook/static/notebook/less/outputarea.less
@@ -164,8 +164,8 @@ div.raw_input_container {
     padding-top: 5px;
 }
 
-span.raw_input_prompt {
-    white-space: pre;
+pre.raw_input_prompt {
+    /* nothing needed here. */
 }
 
 input.raw_input {

From 7c119caae6ef059df7775681db5f7dab053c8e05 Mon Sep 17 00:00:00 2001
From: Frederik Hermans 
Date: Fri, 3 Jul 2015 22:50:47 +0200
Subject: [PATCH 4/4] Explicitly set monospace font on input.raw_input

Also do not explicitly set monospace font in raw_container_input,
because that the container's width to be inconsistent with the (later)
output div's width.
---
 notebook/static/notebook/less/outputarea.less | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/notebook/static/notebook/less/outputarea.less b/notebook/static/notebook/less/outputarea.less
index 02adddf60..6ba89760a 100644
--- a/notebook/static/notebook/less/outputarea.less
+++ b/notebook/static/notebook/less/outputarea.less
@@ -157,7 +157,6 @@ div.output_javascript:empty {
 /* raw_input styles */
 
 div.raw_input_container {
-    font-family: @font-family-monospace;
     line-height: @code_line_height;
     // for some reason, em padding doesn't compute the same for raw_input
     // that is not the first input, but px does
@@ -169,7 +168,7 @@ pre.raw_input_prompt {
 }
 
 input.raw_input {
-    font-family: inherit;
+    font-family: @font-family-monospace;
     font-size: inherit;
     color: inherit;
     width: auto;