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