better posting text area #6

src/static/css/style.css

@@ -59,13 +59,31 @@ aside button {
 }
 
 aside textarea {
+  /* config of what the textarea looks like */
   min-width: 40em;
   min-height: 15em;
-  font-size: xx-large;
+  resize: none;
+  overflow: hidden;
+}
 
-  /* move resize arrow to the left */
+aside div {
-  direction: rtl;
+  /* mandotory for the reactive textarea */
-  text-align: left;
+  display: grid;
+}
+
+aside div::after {
+  /* update the content of the textarea */
+  content: attr(data-replicated-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+
+aside div > textarea,
+aside div::after {
+  /* textarea position after new input */
+  padding: 0.5rem;
+  font-size: xx-large;
+  grid-area: 1 / 1 / 2 / 2;
 }
 
 /* breakpoint */

src/templates/post.html

@@ -3,7 +3,14 @@
   action="{{ config.sanitized_base() }}/{% if name %}{{ post_file_id(name) }}{% endif %}"
   method="post"
 >
-  <textarea name="p">{{ "\n".join(file) }}</textarea>
+  <div>
+    <textarea
+      name="p"
+      onInput="this.parentNode.dataset.replicatedValue = this.value"
+    >
+{{ "\n".join(file) }}</textarea
+    >
+  </div>
   <br />
   <button type="submit">send</button>
 </form>