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