autoresize textarea

app/javascript/application.js

@@ -13,6 +13,7 @@ import DynamicList from './elements/dynamic_list'
 import DownloadButton from './elements/download_button'
 import SetOriginUrl from './elements/set_origin_url'
 import SetTimezone from './elements/set_timezone'
+import AutoresizeTextarea from './elements/autoresize_textarea'
 
 document.addEventListener('turbo:before-cache', () => {
   window.flash?.remove()
@@ -34,6 +35,7 @@ window.customElements.define('dynamic-list', DynamicList)
 window.customElements.define('download-button', DownloadButton)
 window.customElements.define('set-origin-url', SetOriginUrl)
 window.customElements.define('set-timezone', SetTimezone)
+window.customElements.define('autoresize-textarea', AutoresizeTextarea)
 
 window.customElements.define('template-builder', class extends HTMLElement {
   connectedCallback () {

app/javascript/elements/autoresize_textarea.js

@@ -0,0 +1,17 @@
+export default class extends HTMLElement {
+  connectedCallback () {
+    this.resize()
+
+    this.textarea.addEventListener('input', () => this.resize())
+  }
+
+  resize () {
+    if (this.textarea.clientHeight < this.textarea.scrollHeight) {
+      this.textarea.style.height = `${this.textarea.scrollHeight}px`
+    }
+  }
+
+  get textarea () {
+    return this.querySelector('textarea')
+  }
+}