Migrate inputs to Kino (#714)

* Migrate inputs to Kino

* Update lib/livebook/session/data.ex

Co-authored-by: José Valim <jose.valim@dashbit.co>

* Try parsing numbers as integers

* Garbage collect input values

* Adjust tests

* Remove unused variable

* Fix frame rendering

* Wrap inputs in border depending on its type

* Add textarea

* Reorder

* Update tests

Co-authored-by: José Valim <jose.valim@dashbit.co>

assets/js/cell/index.js

@@ -134,20 +134,6 @@ const Cell = {
       });
     }
 
-    if (this.props.type === "input") {
-      const input = getInput(this);
-
-      input.addEventListener("blur", (event) => {
-        // Wait for other handlers to complete and if still in insert
-        // force focus
-        setTimeout(() => {
-          if (this.state.isFocused && this.state.insertMode) {
-            input.focus();
-          }
-        }, 0);
-      });
-    }
-
     this._unsubscribeFromNavigationEvents = globalPubSub.subscribe(
       "navigation",
       (event) => {
@@ -185,14 +171,6 @@ function getProps(hook) {
   };
 }
 
-function getInput(hook) {
-  if (hook.props.type === "input") {
-    return hook.el.querySelector(`[data-element="input"]`);
-  } else {
-    return null;
-  }
-}
-
 /**
  * Handles client-side navigation event.
  */
@@ -231,8 +209,6 @@ function handleElementFocused(hook, focusableId, scroll) {
 }
 
 function handleInsertModeChanged(hook, insertMode) {
-  const input = getInput(hook);
-
   if (hook.state.isFocused && !hook.state.insertMode && insertMode) {
     hook.state.insertMode = insertMode;
 
@@ -255,24 +231,12 @@ function handleInsertModeChanged(hook, insertMode) {
 
       broadcastSelection(hook);
     }
-
-    if (input) {
-      input.focus();
-      // selectionStart is only supported on text based input
-      if (input.selectionStart !== null) {
-        input.selectionStart = input.selectionEnd = input.value.length;
-      }
-    }
   } else if (hook.state.insertMode && !insertMode) {
     hook.state.insertMode = insertMode;
 
     if (hook.state.liveEditor) {
       hook.state.liveEditor.blur();
     }
-
-    if (input) {
-      input.blur();
-    }
   }
 }
 

assets/js/session/index.js

@@ -326,9 +326,15 @@ function handleDocumentKeyDown(hook, event) {
       saveNotebook(hook);
     }
   } else {
-    // Ignore inputs and notebook/section title fields
+    // Ignore keystrokes on input fields
     if (isEditableElement(event.target)) {
       keyBuffer.reset();
+
+      // Use Escape for universal blur
+      if (key === "Escape") {
+        event.target.blur();
+      }
+
       return;
     }
 
@@ -429,7 +435,7 @@ function handleDocumentMouseDown(hook, event) {
 function editableElementClicked(event, element) {
   if (element) {
     const editableElement = element.querySelector(
-      `[data-element="editor-container"], [data-element="input"], [data-element="heading"]`
+      `[data-element="editor-container"], [data-element="heading"]`
     );
     return editableElement.contains(event.target);
   }

lib/livebook/evaluator.ex

@@ -243,7 +243,7 @@ defmodule Livebook.Evaluator do
     state = put_in(state.contexts[ref], result_context)
 
     Evaluator.IOProxy.flush(state.io_proxy)
-    Evaluator.IOProxy.clear_input_buffers(state.io_proxy)
+    Evaluator.IOProxy.clear_input_cache(state.io_proxy)
 
     output = state.formatter.format_response(response)
     metadata = %{evaluation_time_ms: evaluation_time_ms}