From f5e1d0aed38763d7dbc836059498140de2ea68f9 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 15 Jan 2025 17:53:55 +0100
Subject: [PATCH] fix: Also replace tabs and multiple space characters with a
 single space.

This makes sure that the textarea which would preserve multiple spaces
aligns with the mirror - e.g. a paragraph - which displays multiple
spaces as a single space character.

Ref: scrum-2879.
---
 README.md                      |  3 ++-
 src/pat-content-mirror.js      | 12 ++++++++----
 src/pat-content-mirror.test.js |  6 +++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 5b76b11..1fc6280 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,8 @@ pat-content-mirror
 
 A pattern that provides rich dynamic functionality to a textarea. It is used
 for single-line text input that should be able to wrap into the next line.
-Line breaks are not allowed and removed from the text input.
+Line breaks, tabs or multiple space characters are not allowed, removed from
+the text input and replaced with a single space character.
 
 The main functionality is provided by maintaining a "mirror" element that
 is updated every time the main textarea is changed.  This element, which
diff --git a/src/pat-content-mirror.js b/src/pat-content-mirror.js
index d351233..3e64265 100644
--- a/src/pat-content-mirror.js
+++ b/src/pat-content-mirror.js
@@ -41,10 +41,14 @@ class Pattern extends BasePattern {
         const el = ev.target;
         const the_mirror = this.target;
 
-        // Get value and remove line breaks and all vertical whitespace.
-        // Instead add a single space so that separated lines are not glued
-        // together.
-        const value = el.value.replace(/[\r\n\v\f]+/g, " ");
+        // Get value and replace line breaks and all vertical whitespace with a
+        // single space. This wraps multiple lines into a single line while
+        // separating them with a space.
+        // Also replace any whitespace with a single space character to clean
+        // up the text from tabs, multiple whitespace or any other non-standard
+        // space character.
+        let value = el.value
+        value = value.replace(/[\r\n\v\f\s]+/g, " ");
 
         // Write back the cleaned value to the textearea.
         el.value = value;
diff --git a/src/pat-content-mirror.test.js b/src/pat-content-mirror.test.js
index 30bdd1b..78e8911 100644
--- a/src/pat-content-mirror.test.js
+++ b/src/pat-content-mirror.test.js
@@ -139,7 +139,7 @@ describe("pat-content-mirror", () => {
         expect(mirror2.textContent).toBe("placeholder 2");
     });
 
-    it("Removes line breaks.", async () => {
+    it("Removes line breaks, tabs and multiple whitespace characters.", async () => {
         document.body.innerHTML = `
             <section class="the-mirror"></section>
             <textarea
@@ -151,11 +151,11 @@ describe("pat-content-mirror", () => {
         await events.await_pattern_init(instance);
 
         const textarea = document.querySelector("textarea");
-        textarea.value = "line1\nline2\rline3\r\nline4\n\rline5\vline7\fend";
+        textarea.value = "line1\nline2\rline3\r\nline4\n\rline5\vline7\fline8  \r  \t\t    end";
         textarea.dispatchEvent(new Event("input"));
 
         expect(document.querySelector(".the-mirror").textContent).toBe(
-            "line1 line2 line3 line4 line5 line7 end"
+            "line1 line2 line3 line4 line5 line7 line8 end"
         );
     });