Merge pull request #34 from Patternslib/scrum-2879--prevent-linebreaks

feat: Remove line breaks.

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.

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

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