fix: Also replace tabs and multiple space characters with a single sp…

…ace.

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,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

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;

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"
         );
     });