From 38a80d2d349da4b7f2817306a0aa8a3773767eee Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 11 Oct 2023 18:56:07 +0200
Subject: [PATCH] Revert "fix textarea for sending messages is not editable on
 some iOS devices (#163)"

This reverts commit 1669fe7d7510d0568f5f4b23c25df019d512f49f.
---
 public/index.html                         | 2 +-
 public/scripts/ui.js                      | 7 ++++---
 public/styles.css                         | 2 +-
 public_included_ws_fallback/index.html    | 2 +-
 public_included_ws_fallback/scripts/ui.js | 7 ++++---
 public_included_ws_fallback/styles.css    | 2 +-
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/public/index.html b/public/index.html
index b0c6743..2013e5b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -412,7 +412,7 @@
                     </div>
                     <div class="row">
                         <div class="column fw">
-                            <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
+                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                         </div>
                     </div>
                     <div class="button-row row-reverse">
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 04eb460..3840648 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -1724,7 +1724,7 @@ class SendTextDialog extends Dialog {
     constructor() {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
-        this.$text = this.$el.querySelector('.textarea');
+        this.$text = this.$el.querySelector('#text-input');
         this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
@@ -1745,7 +1745,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return !this.$text.value || this.$text.value === "\n";
+        return !this.$text.innerText || this.$text.innerText === "\n";
     }
 
     _onChange(e) {
@@ -1767,6 +1767,7 @@ class SendTextDialog extends Dialog {
         const range = document.createRange();
         const sel = window.getSelection();
 
+        this.$text.focus();
         range.selectNodeContents(this.$text);
         sel.removeAllRanges();
         sel.addRange(range);
@@ -1780,7 +1781,7 @@ class SendTextDialog extends Dialog {
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
-            text: this.$text.value
+            text: this.$text.innerText
         });
         this.$text.value = "";
         this.hide();
diff --git a/public/styles.css b/public/styles.css
index f5d3341..fe0674c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -1042,7 +1042,7 @@ x-dialog .dialog-subheader {
     padding-bottom: 0;
 }
 
-#send-text-dialog .textarea {
+#text-input {
     min-height: 200px;
     width: 100%;
 }
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index ff78dd2..33b32ee 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -417,7 +417,7 @@
                     </div>
                     <div class="row">
                         <div class="column fw">
-                            <textarea title="Message" class="textarea" wrap="off" autofocus></textarea>
+                            <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                         </div>
                     </div>
                     <div class="button-row row-reverse">
diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js
index 6e94fe7..6d3c084 100644
--- a/public_included_ws_fallback/scripts/ui.js
+++ b/public_included_ws_fallback/scripts/ui.js
@@ -1726,7 +1726,7 @@ class SendTextDialog extends Dialog {
     constructor() {
         super('send-text-dialog');
         Events.on('text-recipient', e => this._onRecipient(e.detail.peerId, e.detail.deviceName));
-        this.$text = this.$el.querySelector('.textarea');
+        this.$text = this.$el.querySelector('#text-input');
         this.$peerDisplayName = this.$el.querySelector('.display-name');
         this.$form = this.$el.querySelector('form');
         this.$submit = this.$el.querySelector('button[type="submit"]');
@@ -1747,7 +1747,7 @@ class SendTextDialog extends Dialog {
     }
 
     _textInputEmpty() {
-        return !this.$text.value || this.$text.value === "\n";
+        return !this.$text.innerText || this.$text.innerText === "\n";
     }
 
     _onChange(e) {
@@ -1769,6 +1769,7 @@ class SendTextDialog extends Dialog {
         const range = document.createRange();
         const sel = window.getSelection();
 
+        this.$text.focus();
         range.selectNodeContents(this.$text);
         sel.removeAllRanges();
         sel.addRange(range);
@@ -1782,7 +1783,7 @@ class SendTextDialog extends Dialog {
     _send() {
         Events.fire('send-text', {
             to: this.correspondingPeerId,
-            text: this.$text.value
+            text: this.$text.innerText
         });
         this.$text.value = "";
         this.hide();
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index fefa4cc..1b8024e 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -1072,7 +1072,7 @@ x-dialog .dialog-subheader {
     padding-bottom: 0;
 }
 
-#send-text-dialog .textarea {
+#text-input {
     min-height: 200px;
     width: 100%;
 }