From 9ad71981763669fbc5af983679bfe348e0228270 Mon Sep 17 00:00:00 2001
From: Esmail EL BoB <esmail@esmailelbob.xyz>
Date: Wed, 6 Apr 2022 00:18:07 +0200
Subject: [PATCH] Auto rezise of <textarea>

Autoresize of <textarea> depend on how many words inside it so no more
of scrolling
---
 templates/index.html | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/templates/index.html b/templates/index.html
index 1bc041b..7f51bbb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -377,5 +377,18 @@
                 }
             });
         </script>
+        <script>
+            // Auto resize textarea to fit words inside it without need
to scroll -- Thanks to: https://stackoverflow.com/a/25621277
+            const tx = document.getElementsByTagName("textarea");
+            tx[1].setAttribute("style", "height:" +
(tx[0].scrollHeight) + "px;overflow-y:hidden;");
+            tx[0].setAttribute("style", "height:" +
(tx[0].scrollHeight) + "px;overflow-y:hidden;");
+    
+            tx[0].addEventListener("input", OnInput, false);
+    
+            function OnInput(e) {
+                this.style.height = 150 + "px";
+                this.style.height = (this.scrollHeight) + "px";
+            }
+        </script>
     </body>
 </html>
-- 
2.35.1

Thanks for the patch! There seems to be something wrong with it, but I'm
not sure what exactly (applying the patch fails, and Sourcehut isn't
detecting that it's a patch). How did you send this?

That aside, I have some comments on the patch itself:

- This script element should be joined with the previous one.
- Use `var` instead of `const`.
- Instead of getting all the text areas in the file, getting the two we
  want explicitly by `document.getElementById` sounds better to me.
  Something like:
  ```
  var inputTextArea = document.getElementById("input");
  ```
  The output text area has no id yet, so it should be given one. I think
  `output` is a good id, but I'm open to other choices.
- `OnInput` is small enough to be inlined:
  ```
  inputTextArea.addEventListener("input", function() {
      this.style.height = "150px";
      this.style.height = this.scrollHeight + "px";
  });
  ```
  (I also cleaned up the function a bit and removed `false`, since it's
  already the default value of the parameter)
- Instead of setting the style attribute of the text areas, do the same
  thing done in `OnInput`, e.g.
  `inputTextArea.style.overflowY = "hidden";`

Another thing: do we want to make this configurable? I can imagine some
people might prefer the older behavior (I may or may not be one of those
people, I'm not sure yet).