From ce5f1e9c818741a631faeefa8d10b333c31c9718 Mon Sep 17 00:00:00 2001
From: Maiko Sinkyaet Tan <maiko.tan.coding@gmail.com>
Date: Mon, 11 Mar 2024 15:17:46 +0800
Subject: [PATCH] feat: chat-input support shift+enter to insert new line

---
 packages/components/client/chat/input.vue | 35 +++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/components/client/chat/input.vue b/packages/components/client/chat/input.vue
index b443ac8a..9535d539 100644
--- a/packages/components/client/chat/input.vue
+++ b/packages/components/client/chat/input.vue
@@ -1,13 +1,14 @@
 <template>
-  <div class="textarea">
-    <input
+  <div class="textarea" :data-replicated-text="text">
+    <textarea
       autocomplete="off"
       step="any"
       :value="text"
       :placeholder="placeholder"
       @input="onInput"
       @paste="onPaste"
-      @keydown.enter.stop="onEnter"
+      @keydown.enter.exact.stop.prevent="onEnter"
+      @keydown.shift.enter.stop.prevent="onShiftEnter"
     />
   </div>
 </template>
@@ -40,6 +41,11 @@ function onEnter() {
   text.value = ''
 }
 
+function onShiftEnter() {
+  text.value ??= ''
+  text.value += '\n'
+}
+
 function onInput(event: Event) {
   text.value = (event.target as HTMLInputElement).value
 }
@@ -79,18 +85,37 @@ async function onPaste(event: ClipboardEvent) {
 
 <style lang="scss" scoped>
 
-input {
+.textarea {
+  display: grid;
+
+  &::after {
+    // This value is required for preventing jumpy behaviour !
+    content: attr(data-replicated-text) ' ';
+    white-space: pre-wrap;
+    visibility: hidden;
+  }
+}
+
+.textarea::after,
+textarea {
+  grid-area: 1 / 1 / 2 / 2;
+
   padding: 0;
   width: 100%;
   border: none;
   outline: none;
   font-size: 1em;
   height: inherit;
+  box-sizing: border-box;
+}
+
+textarea {
   color: inherit;
   display: inline-block;
   transition: 0.3s ease;
-  box-sizing: border-box;
   background-color: transparent;
+  resize: none;
+  overflow: hidden;
 }
 
 </style>