From 54670876008c403842e9597766e1412c2026ac27 Mon Sep 17 00:00:00 2001
From: montelale <alessioalessio2002@gmail.com>
Date: Tue, 22 Dec 2020 21:08:39 +0100
Subject: [PATCH 1/3] Adds new HTML contenteditable div and relative CSS

---
 client/index.html |  5 +++--
 client/styles.css | 29 ++++++++++++++++++++++++++---
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/client/index.html b/client/index.html
index 6924895..8e50e75 100644
--- a/client/index.html
+++ b/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>
diff --git a/client/styles.css b/client/styles.css
index 6cb70af..d54c1bc 100644
--- a/client/styles.css
+++ b/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;
     }
-}
\ No newline at end of file
+}

From c14c121ba5e2097f3479ebb0bc1998f92103b92f Mon Sep 17 00:00:00 2001
From: montelale <alessioalessio2002@gmail.com>
Date: Tue, 22 Dec 2020 21:23:10 +0100
Subject: [PATCH 2/3] Fixes chatting functions for new approach
 (contenteditable div)

---
 client/scripts/ui.js | 35 +++++++++++++++++++++--------------
 1 file changed, 21 insertions(+), 14 deletions(-)

diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 88735ab..599b3c3 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -19,12 +19,12 @@ class PeersUI {
         Events.on('peer-joined', e => this._onPeerJoined(e.detail));
         Events.on('peer-left', e => this._onPeerLeft(e.detail));
         Events.on('peers', e => this._onPeers(e.detail));
-        Events.on('file-progress', e => this._onFileProgress(e.detail));        
+        Events.on('file-progress', e => this._onFileProgress(e.detail));
         Events.on('paste', e => this._onPaste(e));
     }
 
     _onPeerJoined(peer) {
-        if ($(peer.id)) return; // peer already exists 
+        if ($(peer.id)) return; // peer already exists
         const peerUI = new PeerUI(peer);
         $$('x-peers').appendChild(peerUI.$el);
     }
@@ -49,9 +49,9 @@ class PeersUI {
 
     _clearPeers() {
         const $peers = $$('x-peers').innerHTML = '';
-    }   
-    
-    _onPaste(e) {        
+    }
+
+    _onPaste(e) {
         const files = e.clipboardData.files || e.clipboardData.items
             .filter(i => i.type.indexOf('image') > -1)
             .map(i => i.getAsFile());
@@ -72,7 +72,7 @@ class PeersUI {
 class PeerUI {
 
     html() {
-        return `   
+        return `
             <label class="column center" title="Click to send files or right click to send a text">
                 <input type="file" multiple>
                 <x-icon shadow="1">
@@ -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
         });
     }
 }
@@ -492,7 +499,7 @@ class WebShareTargetUI {
 
         let shareTargetText = title ? title : '';
         shareTargetText += text ? shareTargetText ? ' ' + text : text : '';
-        
+
         if(url) shareTargetText = url; // We share only the Link - no text. Because link-only text becomes clickable.
 
         if (!shareTargetText) return;
@@ -610,12 +617,12 @@ Events.on('load', () => {
 });
 
 Notifications.PERMISSION_ERROR = `
-Notifications permission has been blocked 
-as the user has dismissed the permission prompt several times. 
-This can be reset in Page Info 
+Notifications permission has been blocked
+as the user has dismissed the permission prompt several times.
+This can be reset in Page Info
 which can be accessed by clicking the lock icon next to the URL.`;
 
-document.body.onclick = e => { // safari hack to fix audio 
+document.body.onclick = e => { // safari hack to fix audio
     document.body.onclick = null;
     if (!(/.*Version.*Safari.*/.test(navigator.userAgent))) return;
     blop.play();

From e9c8ed447f1eacfb5824d9584502c1c4e8e549a5 Mon Sep 17 00:00:00 2001
From: montelale <alessioalessio2002@gmail.com>
Date: Tue, 22 Dec 2020 21:24:20 +0100
Subject: [PATCH 3/3] Removes old Textarea approach code

---
 client/index.html |  1 -
 client/styles.css | 20 --------------------
 2 files changed, 21 deletions(-)

diff --git a/client/index.html b/client/index.html
index 8e50e75..8f6c323 100644
--- a/client/index.html
+++ b/client/index.html
@@ -94,7 +94,6 @@
             <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>
diff --git a/client/styles.css b/client/styles.css
index d54c1bc..97dc3d4 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -481,21 +481,6 @@ button::-moz-focus-inner {
 
 /* Text Input */
 
-textarea {
-    width: 100%;
-    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;
-}
-
 .textareaElement {
     box-sizing: border-box;
     border: none;
@@ -717,11 +702,6 @@ x-dialog x-paper {
     background-color: var(--bg-color);
 }
 
-textarea {
-    color: var(--text-color);
-    background-color: var(--input-bg-color);
-}
-
 .textareaElement {
     color: var(--text-color);
     background-color: var(--input-bg-color);