Adds new HTML contenteditable div and relative CSS

client/index.html

@@ -79,7 +79,7 @@
                 <div class="font-body2" id="fileSize"></div>
                 <div class="row">
                     <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
-                    <input type="checkbox" id="autoDownload" checked=""> 
+                    <input type="checkbox" id="autoDownload" checked="">
                 </div>
                 <div class="row-reverse">
                     <a class="button" close id="download" title="Download File" autofocus>Save</a>
@@ -94,7 +94,8 @@
             <x-background class="full center">
                 <x-paper shadow="2">
                     <h3>Send a Message</h3>
-                    <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea>
+                    <!-- <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea> -->
+                    <div id="textInput" class="textareaElement" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div>
                     <div class="row-reverse">
                         <button class="button" type="submit" close>Send</button>
                         <a class="button" close>Cancel</a>

client/styles.css

@@ -496,6 +496,24 @@ textarea {
     background: #f1f3f4;
 }
 
+.textareaElement {
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    padding: 16px 24px;
+    border-radius: 16px;
+    margin: 8px 0;
+    font-size: 14px;
+    font-family: inherit;
+    background: #f1f3f4;
+    display: block;
+    overflow: auto;
+    resize: none;
+    min-height: 40px;
+    line-height: 16px;
+    max-height: 300px;
+}
+
 
 /* Info Animation */
 
@@ -679,8 +697,8 @@ screen and (min-width: 1100px) {
     }
 }
 
-/* 
-    Color Themes 
+/*
+    Color Themes
 */
 
 /* Default colors */
@@ -704,6 +722,11 @@ textarea {
     background-color: var(--input-bg-color);
 }
 
+.textareaElement {
+    color: var(--text-color);
+    background-color: var(--input-bg-color);
+}
+
 /* Dark theme colors */
 body.dark-theme {
     --text-color: #eee;
@@ -727,4 +750,4 @@ body.dark-theme {
         --bg-color: #fafafa;
         --input-bg-color: #f1f3f4;
     }
-}
+}