Merge pull request #68 from DevNode-Dev/feat/chatbox

Update chat box to send on enter
peer-town · Apr 14, 2023 · 50852af · 50852af
2 parents 2969cf0 + 206a7ca
commit 50852af
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/apps/web/src/sections/ThreadSection/ThreadSection.tsx b/apps/web/src/sections/ThreadSection/ThreadSection.tsx
@@ -150,19 +150,30 @@ export const ThreadSection = (props: ThreadSectionProps) => {
         <textarea
           id="chat"
           ref={commentBoxRef}
+          spellCheck={true}
           rows={1}
-          className="block min-h-[50x] mx-4 p-2.5 w-full resize-none scrollbar-hide focus:outline-none"
+          className="block min-h-[20px] max-h-72 mx-4 w-full resize-none scrollbar-hide focus:outline-none"
           placeholder="Send message"
           value={comment}
-          onChange={(e) => setComment(e.target.value)}
-          onKeyUp={(event: any) => {
-            const numberOfLineBreaks = (event.target.value.match(/\n/g) || []).length;
+          onChange={(e) => {
+            setComment(e.target.value);
+            const numberOfLineBreaks = (e.target.value.match(/\n/g) || []).length;
             // min-height + lines x line-height + padding + border
-            const newHeight = 25 + numberOfLineBreaks * 20 + 12 + 1;
+            const newHeight = 20 + numberOfLineBreaks * 20;
             if (commentBoxRef.current) {
               commentBoxRef.current.style.height = `${newHeight}px`;
             }
           }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              handleOnCommentSubmit().finally(() => {
+                if (commentBoxRef.current) {
+                  // default height
+                  commentBoxRef.current.style.height = `20px`;
+                }
+              });
+            }
+          }}
         />
           <button
             onClick={handleOnCommentSubmit}