impr(custom text): add option to not remove zero width characters

closes monkeytypegame#5919

Author: Miodec

frontend/src/html/popups.html

@@ -569,6 +569,20 @@
         </div>
       </div>
 
+      <div class="group" data-id="zeroWidth">
+        <div class="title">
+          <i class="fas fa-fw fa-text-width"></i>
+          Remove zero-width characters
+        </div>
+        <div class="sub">Fully remove zero-width characters.</div>
+        <div class="groupInputs">
+          <div class="buttonGroup">
+            <button value="false">no</button>
+            <button value="true">yes</button>
+          </div>
+        </div>
+      </div>
+
       <div class="group" data-id="fancy">
         <div class="title">
           <i class="fas fa-fw fa-pen-fancy"></i>

frontend/src/styles/popups.scss

@@ -193,7 +193,7 @@ body.darkMode {
       width: 100%;
       border-radius: var(--roundness);
       resize: vertical;
-      min-height: 477px;
+      min-height: 589px;
       color: var(--text-color);
       overflow-x: hidden;
       overflow-y: scroll;

frontend/src/ts/modals/custom-text.ts

@@ -29,6 +29,7 @@ type State = {
   replaceControlCharactersEnabled: boolean;
   customTextPipeDelimiter: boolean;
   replaceNewlines: "off" | "space" | "periodSpace";
+  removeZeroWidthCharactersEnabled: boolean;
 };
 
 const state: State = {
@@ -47,6 +48,7 @@ const state: State = {
   replaceControlCharactersEnabled: true,
   customTextPipeDelimiter: false,
   replaceNewlines: "off",
+  removeZeroWidthCharactersEnabled: true,
 };
 
 function updateUI(): void {
@@ -115,6 +117,13 @@ function updateUI(): void {
     `${popup} .inputs .group[data-id="control"] button[value="${state.replaceControlCharactersEnabled}"]`
   ).addClass("active");
 
+  $(`${popup} .inputs .group[data-id="zeroWidth"] button`).removeClass(
+    "active"
+  );
+  $(
+    `${popup} .inputs .group[data-id="zeroWidth"] button[value="${state.removeZeroWidthCharactersEnabled}"]`
+  ).addClass("active");
+
   $(`${popup} .inputs .group[data-id="delimiter"] button`).removeClass(
     "active"
   );
@@ -264,8 +273,10 @@ function cleanUpText(): string[] {
   //replace any characters that look like a space with an actual space
   text = text.replace(/[\u2000-\u200A\u202F\u205F\u00A0]/g, " ");
 
-  //replace zero width characters
-  text = text.replace(/[\u200B-\u200D\u2060\uFEFF]/g, "");
+  if (state.removeZeroWidthCharactersEnabled) {
+    //replace zero width characters
+    text = text.replace(/[\u200B-\u200D\u2060\uFEFF]/g, "");
+  }
 
   if (state.replaceControlCharactersEnabled) {
     text = text.replace(/([^\\]|^)\\t/gm, "$1\t");
@@ -426,6 +437,16 @@ async function setup(modalEl: HTMLElement): Promise<void> {
     });
   }
 
+  for (const button of modalEl.querySelectorAll(
+    ".group[data-id='zeroWidth'] button"
+  )) {
+    button.addEventListener("click", (e) => {
+      state.removeZeroWidthCharactersEnabled =
+        (e.target as HTMLButtonElement).value === "true" ? true : false;
+      updateUI();
+    });
+  }
+
   for (const button of modalEl.querySelectorAll(
     ".group[data-id='delimiter'] button"
   )) {