From 2fb3cfbd1ac00394c3a08818d891bfe22e99bdb6 Mon Sep 17 00:00:00 2001
From: "Joe L." <56809242+jo3-l@users.noreply.github.com>
Date: Mon, 29 Jul 2024 22:41:38 -0700
Subject: [PATCH] customcommands: align frontend length display with backend
 validation (#1710)

---
 customcommands/assets/customcommands-editcmd.html | 12 ++++++++++--
 customcommands/assets/customcommands-public.html  | 11 +++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/customcommands/assets/customcommands-editcmd.html b/customcommands/assets/customcommands-editcmd.html
index 425028546..a8011ca2a 100644
--- a/customcommands/assets/customcommands-editcmd.html
+++ b/customcommands/assets/customcommands-editcmd.html
@@ -731,17 +731,25 @@ <h2 class="card-title">Custom Command Information</h2>
 
     function updateCCLength() {
         const textAreas = document.querySelectorAll('#cc-responses > textarea');
-        const totalLength = Array.from(textAreas).reduce((len, el) => {
+        const totalLength = Array.from(textAreas).reduce((acc, el) => {
+            let len = countCodePoints(el.value);
             // The data received on the backend contains "\r\n" while it is simply "\n" on the JS side.
             // Adjust for this discrepancy by double-counting newline characters.
             const newlines = el.value.match(/\n/g);
-            return len + el.value.length + (newlines ? newlines.length : 0);
+            if (newlines) len += newlines.length;
+
+            return acc + len;
         }, 0);
 
         $('.cc-length-counter')
             .text(totalLength)
             .toggleClass('text-danger', totalLength > {{.MaxCCLength}});
     }
+
+    function countCodePoints(str) {
+        return [...str].length;
+    }
+
     function onCCChanged(textArea) {
        updateCCLength();
     }
diff --git a/customcommands/assets/customcommands-public.html b/customcommands/assets/customcommands-public.html
index 1d251fb0d..f9fd2d573 100644
--- a/customcommands/assets/customcommands-public.html
+++ b/customcommands/assets/customcommands-public.html
@@ -324,11 +324,13 @@ <h2 class="card-title">WARNING: IMPORTING A CUSTOM COMMAND</h2>
     var textAreas = document.querySelectorAll("#cc-responses > textarea")
     var combinedLength = 0;
     textAreas.forEach(function (elem) {
-      combinedLength += elem.value.length;
+      let len = countCodePoints(elem.value);
       // The data received on the backend contains "\r\n" while it is simply "\n" on the JS side.
       // Adjust for this discrepancy by double-counting newline characters.
       const newlines = elem.value.match(/\n/g);
-      if (newlines) combinedLength += newlines.length;
+      if (newlines) len += newlines.length;
+
+      combinedLength += len;
     })
 
     var display = document.querySelector(".cc-length-counter")
@@ -340,6 +342,11 @@ <h2 class="card-title">WARNING: IMPORTING A CUSTOM COMMAND</h2>
       premiumOnlyImport.classList.add("text-danger");
     }
   }
+
+  function countCodePoints(str) {
+    return [...str].length;
+  }
+
   function isTextTrigger(t) {
     return t === "cmd" ||
       t === "prefix" ||