From 459890d816a30193d19d7c863a15d416745d5ae4 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 15 Jan 2025 15:30:41 +0100
Subject: [PATCH] feat: Remove line breaks.

.pat-content-mirror is intended for single-line inputs which need to be
wrapped if the line is getting too long. Line breaks are not allowed but
were possible until now.
Now they are stripped from the input. Instead a single space character
is used. This also works for copy/pasting where a list would not result
in a long concatenated string but with a space as separator in between.

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

diff --git a/README.md b/README.md
index f90087e..5b76b11 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,9 @@
 pat-content-mirror
 ==================
 
-A pattern that provides rich dynamic functionality to a textarea.  It is used
-for comments in the social stream.
+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.
 
 The main functionality is provided by maintaining a "mirror" element that
 is updated every time the main textarea is changed.  This element, which
@@ -12,6 +13,9 @@ the html textarea element.  The user interacts with the textarea, mostly by
 typing, and the .content-mirror reflects the textarea content, but can also
 contain links to other users or tags.
 
+The difference to a contenteditable element is, that a textarea automatically
+participates as a form element in form submissions and validation.
+
 The pattern would typically be applied to a textarea element, though it is
 not required.
 In addition, another element must be present to act as the content mirror.
diff --git a/src/pat-content-mirror.js b/src/pat-content-mirror.js
index b49bcd2..d351233 100644
--- a/src/pat-content-mirror.js
+++ b/src/pat-content-mirror.js
@@ -40,7 +40,16 @@ class Pattern extends BasePattern {
     update_mirror(ev) {
         const el = ev.target;
         const the_mirror = this.target;
-        const value = el.value;
+
+        // 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, " ");
+
+        // Write back the cleaned value to the textearea.
+        el.value = value;
+
+        // Write value (or placeholder) to the mirror.
         the_mirror.textContent = value;
         if (!value) {
             const placeholder = this.el.getAttribute("placeholder");
diff --git a/src/pat-content-mirror.test.js b/src/pat-content-mirror.test.js
index 464c02f..30bdd1b 100644
--- a/src/pat-content-mirror.test.js
+++ b/src/pat-content-mirror.test.js
@@ -139,4 +139,24 @@ describe("pat-content-mirror", () => {
         expect(mirror2.textContent).toBe("placeholder 2");
     });
 
+    it("Removes line breaks.", async () => {
+        document.body.innerHTML = `
+            <section class="the-mirror"></section>
+            <textarea
+                class="pat-content-mirror"
+                data-pat-content-mirror="target:.the-mirror"></textarea>
+        `;
+
+        const instance = new Pattern(document.querySelector(".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.dispatchEvent(new Event("input"));
+
+        expect(document.querySelector(".the-mirror").textContent).toBe(
+            "line1 line2 line3 line4 line5 line7 end"
+        );
+    });
+
 });