Make textarea input autosized (#1552)

assets/js/hooks/index.js

@@ -12,6 +12,7 @@ import KeyboardControl from "./keyboard_control";
 import MarkdownRenderer from "./markdown_renderer";
 import ScrollOnUpdate from "./scroll_on_update";
 import Session from "./session";
+import TextareaAutosize from "./textarea_autosize";
 import Timer from "./timer";
 import UserForm from "./user_form";
 import VirtualizedLines from "./virtualized_lines";
@@ -31,6 +32,7 @@ export default {
   MarkdownRenderer,
   ScrollOnUpdate,
   Session,
+  TextareaAutosize,
   Timer,
   UserForm,
   VirtualizedLines,

assets/js/hooks/textarea_autosize.js

@@ -0,0 +1,25 @@
+const BORDER_HEIGHT = 1;
+
+/**
+ * A hook that automatically matches textarea height to its content.
+ */
+const TextareaAutosize = {
+  mounted() {
+    this.autosize();
+
+    this.el.addEventListener("input", (event) => {
+      this.autosize();
+    });
+  },
+
+  updated() {
+    this.autosize();
+  },
+
+  autosize() {
+    this.el.style.height = "0px";
+    this.el.style.height = `${this.el.scrollHeight + 2 * BORDER_HEIGHT}px`;
+  },
+};
+
+export default TextareaAutosize;

lib/livebook_web/live/output/input_component.ex

@@ -98,9 +98,11 @@ defmodule LivebookWeb.Output.InputComponent do
   defp input(%{attrs: %{type: :textarea}} = assigns) do
     ~H"""
     <textarea
+      id={@id}
       data-el-input
-      class="input min-h-[200px] tiny-scrollbar"
+      class="input min-h-[38px] max-h-[300px] tiny-scrollbar"
       name="value"
+      phx-hook="TextareaAutosize"
       phx-debounce="blur"
       phx-target={@myself}
       spellcheck="false"