From 1ceb37da2cd81f0fc4db377e491e013a20ac9ee3 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Wed, 3 Apr 2024 16:53:01 +0200
Subject: [PATCH] Fix slow mode:

focus was lost when textarea got disabled, so it could trigger some Peertube events if the user type some text.
---
 CHANGELOG.md                                  | 1 +
 conversejs/custom/shared/styles/livechat.scss | 7 +++++++
 conversejs/lib/plugins/slow-mode.ts           | 7 ++-----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 487d9d5f..d570e140 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ TODO: https://github.com/JohnXLivingston/peertube-plugin-livechat/issues/48
 
 * Some code refactoring.
 * New translations: Galician.
+* Fix slow mode: focus was lost when textarea got disabled, so it could trigger some Peertube events if the user type some text.
 
 ## 8.4.0
 
diff --git a/conversejs/custom/shared/styles/livechat.scss b/conversejs/custom/shared/styles/livechat.scss
index 0c310e75..77759f96 100644
--- a/conversejs/custom/shared/styles/livechat.scss
+++ b/conversejs/custom/shared/styles/livechat.scss
@@ -123,3 +123,10 @@ body.converse-embedded {
     margin-bottom: 6px;
   }
 }
+
+.conversejs {
+  // Fix: for the slow mode, we use readonly instead of disabled, we must apply same CSS as ConverseJS.
+  textarea:read-only {
+    background-color: var(--chat-textarea-disabled-bg-color) !important;
+  }
+}
diff --git a/conversejs/lib/plugins/slow-mode.ts b/conversejs/lib/plugins/slow-mode.ts
index 3c923656..79d6fbef 100644
--- a/conversejs/lib/plugins/slow-mode.ts
+++ b/conversejs/lib/plugins/slow-mode.ts
@@ -31,15 +31,12 @@ export const slowModePlugin = {
           // FIXME: field could be enabled by something else (another event in ConverseJS).
           // This is not very important: the server will reject messages anyway.
 
-          textarea.classList.add('disabled')
-          textarea.setAttribute('disabled', 'disabled')
+          textarea.setAttribute('readonly', 'readonly')
           // Note: we are adding a 100ms delay.
           // To minimize the risk that user can send a message before the server will accept it
           // (if the first message lagged for example)
           setTimeout(() => {
-            textarea.classList.remove('disabled')
-            textarea.removeAttribute('disabled');
-            (textarea as HTMLTextAreaElement).focus()
+            textarea.removeAttribute('readonly')
           }, slowModeDuration * 1000 + 100)
         })
       }, 100)