Merge pull request #212 from MontelAle/add-expanding-textarea

Resolves #202

client/index.html

@@ -94,7 +94,7 @@
             <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>
+                    <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/scripts/ui.js

@@ -315,12 +315,19 @@ class SendTextDialog extends Dialog {
         this._recipient = recipient;
         this._handleShareTargetText();
         this.show();
-        this.$text.setSelectionRange(0, this.$text.value.length)
+
+        const range = document.createRange();
+        const sel = window.getSelection();
+
+        range.selectNodeContents(this.$text);
+        sel.removeAllRanges();
+        sel.addRange(range);
+
     }
 
     _handleShareTargetText() {
         if (!window.shareTargetText) return;
-        this.$text.value = window.shareTargetText;
+        this.$text.textContent = window.shareTargetText;
         window.shareTargetText = '';
     }
 
@@ -328,7 +335,7 @@ class SendTextDialog extends Dialog {
         e.preventDefault();
         Events.fire('send-text', {
             to: this._recipient,
-            text: this.$text.value
+            text: this.$text.textContent
         });
     }
 }

client/styles.css

@@ -479,19 +479,22 @@ button::-moz-focus-inner {
 
 /* Text Input */
 
-textarea {
-    width: 100%;
+.textareaElement {
     box-sizing: border-box;
     border: none;
     outline: none;
     padding: 16px 24px;
     border-radius: 16px;
     margin: 8px 0;
-    line-height: 16px;
     font-size: 14px;
     font-family: inherit;
-    resize: none;
     background: #f1f3f4;
+    display: block;
+    overflow: auto;
+    resize: none;
+    min-height: 40px;
+    line-height: 16px;
+    max-height: 300px;
 }
 
 
@@ -709,7 +712,7 @@ x-dialog x-paper {
     background-color: var(--bg-color);
 }
 
-textarea {
+.textareaElement {
     color: var(--text-color);
     background-color: var(--bg-color-secondary);
 }