Use autogrowing textareas in dialogs

Author: matthiask

CHANGELOG.rst

@@ -19,6 +19,7 @@ Next version
 - Added styles to selected nodes so that e.g. selected horizontal rules are
   shown as such.
 - Started including source maps again.
+- Convert textareas to use autogrow.
 
 
 0.11 (2025-04-16)

django_prose_editor/static/django_prose_editor/editor.css

@@ -189,7 +189,8 @@
 
 .prose-editor-dialog input:not([type="checkbox"], [type="radio"]),
 .prose-editor-dialog select,
-.prose-editor-dialog textarea {
+.prose-editor-dialog textarea,
+.prose-editor-grow-wrap::after {
   width: 100%;
   padding: 0.5em;
   border: 1px solid var(--_r);
@@ -199,6 +200,7 @@
   transition:
     border-color 0.2s,
     box-shadow 0.2s;
+  font: inherit;
 }
 
 .prose-editor-dialog input:focus,
@@ -340,3 +342,25 @@ label:empty:has(+ .prose-editor) {
   max-width: 100%;
   height: auto;
 }
+
+/* Autogrowing textareas */
+.prose-editor-grow-wrap {
+  display: grid;
+}
+.prose-editor-grow-wrap::after {
+  content: attr(data-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+.prose-editor-grow-wrap > textarea {
+  resize: none;
+  overflow: hidden;
+}
+.prose-editor-grow-wrap > textarea,
+.prose-editor-grow-wrap::after {
+  border: 1px solid black;
+  padding: 0.5rem;
+  font: inherit;
+
+  grid-area: 1 / 1 / 2 / 2;
+}

django_prose_editor/static/django_prose_editor/editor.js

@@ -30,7 +30,15 @@ const formFieldForProperty = (name, config, attrValue, id) => {
     ])
   }
   if (config.format === "textarea") {
-    widget = crel("textarea", { id, name, value, cols: 80, rows: 30 })
+    const textarea = crel("textarea", { id, name, value, cols: 80, rows: 3 })
+    widget = crel(
+      "div",
+      { className: "prose-editor-grow-wrap", "data-value": textarea.value },
+      [textarea],
+    )
+    textarea.addEventListener("input", () => {
+      widget.dataset.value = textarea.value
+    })
   } else if (config.enum) {
     widget = crel(
       "select",