hostilefork · BrianOtto · Apr 14, 2019 · Apr 14, 2019 · Apr 14, 2019
diff --git a/gui.js b/gui.js
@@ -95,7 +95,12 @@ function ActivateInput(el) {
     el.autocomplete = "off"
     el.autocorrect = "off"
     el.autocapitalize = "off"
-
+
+    // this should match the styles defined for .input
+    // so that the larger copy/paste area gets restored
+    el.style.width = '100%'
+    el.style.height = '100px'
+
     if (!first_input)
         first_input = el  // will stop magic-undo from undoing
 
@@ -179,22 +184,37 @@ document.querySelector("#replcontainer").addEventListener("wheel", (e) => {
 // to where it was.
 //
 function MagicUndo() {
-    let div = replpad.lastChild
-    while (div) {
-        let child = div.lastChild
-        while (child) {
-            if (child.classList && child.classList.contains("input")) {
-                ActivateInput(child)
-                return
+    // make sure we have a line to undo
+    if (replpad.querySelectorAll('.line').length > 1) {
+        // get the current line
+        var line = replpad.lastChild
+
+        while (line) {
+            // remove the current line, which contains 
+            // all output from the previous command
+            replpad.removeChild(line)
+
+            // get the previous line
+            line = replpad.lastChild
+
+            if (line) {
+                // get the input from the previous line
+                var prev_input = line.querySelector('.input')
+
+                // activate the previous input
+                if (prev_input) {
+                    ActivateInput(prev_input)
+                    return
+                }
+
+                // no input exists and so loop around 
+                // and delete the entire line
             }
-            div.removeChild(child)
-            child = div.lastChild
         }
-        replpad.removeChild(div)
-        div = replpad.lastChild
+
+        alert("Magic Undo failure, didn't set input")
+        input = null
     }
-    alert("Magic Undo failure, didn't set input")
-    input = null
 }
 
 function CollapseMultiline() {

diff --git a/replpad.css b/replpad.css
@@ -134,6 +134,14 @@ img.center { /* https://stackoverflow.com/a/7055404 */
     color: #404040;  /* lighten a little to weaken the boldness */
 }
 
+.input-container {
+    display: table;
+}
+
+.input-prompt {
+    display: table-cell;
+}
+
 .input {
     /*
      * None of these properties seem to work from CSS, so squiggly underlines
@@ -146,17 +154,16 @@ img.center { /* https://stackoverflow.com/a/7055404 */
     /* spellcheck: "false"; */
 
     /* The width and height gives you a larger copy/paste area.
-     * The width calc uses 25px to accomodate for the width of the prompt.
      * The 100px for height also provides padding under the prompt so that 
      * you're not typing at the very bottom of the screen. It is possible to
      * increase the height to get a larger copy/paste area, but this means 
      * the scrollbar will show up sooner too.
      */
-    width: calc(100% - 25px);
+    width: 100%;
     height: 100px;
 
     vertical-align: top;
-    display: inline-block;
+    display: table-cell;
 
     font-weight: normal;
     color: #000000;

diff --git a/replpad.reb b/replpad.reb
@@ -162,19 +162,30 @@ input: js-awaiter [
     {Read single-line or multi-line input from the user}
     return: [text!]
 ]{
-    // !!! It seems that an empty div with contenteditable will stick
-    // the cursor to the beginning of the previous div.  :-/  This does
-    // not happen when the .input CSS class has `display: inline-block;`,
-    // but then that prevents the div from flowing naturally along with
-    // the previous divs...it jumps to its own line if it's too long.
-    // Putting a (Z)ero (W)idth (N)on-(J)oiner before it seems to solve
-    // the issue, so the cursor will jump to that when the input is empty.
-    //
-    replpad.lastChild.appendChild(load("&zwnj;"))
-
+    // The current prompt is always the last child in the last "line" div
+    let prompt = replpad.lastChild.lastChild
+
+    // The prompt is always a text node, and so we need to create a HTML 
+    // version of it to be able to adjust its layout next to the input
+    var prompt_html = document.createElement("div")
+    prompt_html.innerHTML = prompt.textContent
+    prompt_html.className = "input-prompt"
+
     let new_input = load("<div class='input'></div>")
-    replpad.lastChild.appendChild(new_input)
-
+
+    // Add a container to place the prompt and input into. This will allow us to
+    // adjust the width the input takes without causing it to drop to a new line
+    var container = document.createElement("div")
+    container.className = "input-container"
+    container.appendChild(prompt_html)
+    container.appendChild(new_input)
+
+    // Add the new container before the old prompt
+    prompt.parentNode.insertBefore(container, prompt)
+
+    // Remove the old prompt
+    prompt.parentNode.removeChild(prompt)
+
     ActivateInput(new_input)
 
     // This body of JavaScript ending isn't enough to return to the Rebol