From 97506535c5a08ea1afb67e47da52887449db1a2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 28 Nov 2022 20:47:48 +0100
Subject: [PATCH] Make textarea input autosized (#1552)

---
 assets/js/hooks/index.js                      |  2 ++
 assets/js/hooks/textarea_autosize.js          | 25 +++++++++++++++++++
 .../live/output/input_component.ex            |  4 ++-
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/hooks/textarea_autosize.js

diff --git a/assets/js/hooks/index.js b/assets/js/hooks/index.js
index a75f5d117..01ea9f6df 100644
--- a/assets/js/hooks/index.js
+++ b/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,
diff --git a/assets/js/hooks/textarea_autosize.js b/assets/js/hooks/textarea_autosize.js
new file mode 100644
index 000000000..963cf5c87
--- /dev/null
+++ b/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;
diff --git a/lib/livebook_web/live/output/input_component.ex b/lib/livebook_web/live/output/input_component.ex
index 4b8709b92..744b32a09 100644
--- a/lib/livebook_web/live/output/input_component.ex
+++ b/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"