Allow multiline stdin in the UI

Author: shepmaster

ui/frontend/Stdin.module.css

@@ -1,8 +1,27 @@
 .form {
   display: flex;
   gap: 0.25em;
+  align-items: flex-start;
 }
 
-.text {
+.multiLine {
   flex: 1;
+  display: grid;
+}
+
+.text,
+.sizer {
+  margin: 0;
+  padding: 0.25em;
+  grid-area: 1 / 1 / 2 /2;
+  max-height: 3.5lh;
+}
+
+.text {
+  resize: none;
+}
+
+.sizer {
+  visibility: hidden;
+  white-space: pre-wrap;
 }

ui/frontend/Stdin.tsx

@@ -1,4 +1,4 @@
-import React, { FormEvent, useCallback } from 'react';
+import React, { ChangeEvent, FormEvent, KeyboardEvent, useCallback, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { wsExecuteStdin } from './reducers/output/execute';
@@ -10,33 +10,54 @@ const Stdin: React.FC = () => {
   const dispatch = useDispatch();
   const disabled = !useSelector(enableStdinSelector);
 
+  const [content, setContent] = useState('');
+
+  const form = useRef<HTMLFormElement>(null);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        form.current?.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }));
+      }
+    },
+    [dispatch, form, content],
+  );
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      setContent(e.currentTarget.value);
+    },
+    [setContent],
+  );
+
   const handleSubmit = useCallback(
     (e: FormEvent<HTMLFormElement>) => {
       e.preventDefault();
 
-      const form = e.currentTarget;
-      const formData = new FormData(form);
-
-      const content = formData.get('content')?.valueOf();
-
-      if (content && typeof content === 'string') {
-        dispatch(wsExecuteStdin(content + '\n'));
-      }
+      dispatch(wsExecuteStdin(content + '\n'));
 
-      form.reset();
+      setContent('');
     },
-    [dispatch],
+    [dispatch, content, setContent],
   );
 
   return (
-    <form onSubmit={handleSubmit} className={styles.form} data-test-id="stdin">
-      <input
-        type="text"
-        name="content"
-        autoComplete="off"
-        className={styles.text}
-        disabled={disabled}
-      ></input>
+    <form onSubmit={handleSubmit} className={styles.form} data-test-id="stdin" ref={form}>
+      <div className={styles.multiLine}>
+        <textarea
+          rows={1}
+          onKeyDown={handleKeyDown}
+          onChange={handleChange}
+          name="content"
+          autoComplete="off"
+          spellCheck="false"
+          className={styles.text}
+          value={content}
+          disabled={disabled}
+        ></textarea>
+        <p className={styles.sizer}>{content} </p>
+      </div>
       <button type="submit" disabled={disabled}>
         Send
       </button>