Merge pull request #165 from vector-im/bwindels/multiline-message

Render multi-line message as such

src/ui/web/general/StaticView.js

@@ -18,8 +18,12 @@ limitations under the License.
 import {tag} from "../general/html.js";
 
 export class StaticView {
-    constructor(render) {
-        this._root = render(tag);
+    constructor(value, render = undefined) {
+        if (typeof value === "function" && !render) {
+            render = value;
+            value = null;
+        }
+        this._root = render ? render(tag, value) : this.render(tag, value);
     }
 
     mount() {

src/ui/web/general/html.js

@@ -92,7 +92,7 @@ export const SVG_NS = "http://www.w3.org/2000/svg";
 
 export const TAG_NAMES = {
     [HTML_NS]: [
-        "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
+        "br", "a", "ol", "ul", "li", "div", "h1", "h2", "h3", "h4", "h5", "h6",
         "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
         "pre", "button", "time", "input", "textarea", "label"],
     [SVG_NS]: ["svg", "circle"]

src/ui/web/session/room/timeline/TextMessageView.js

@@ -15,12 +15,33 @@ limitations under the License.
 */
 
 import {TemplateView} from "../../../general/TemplateView.js";
+import {StaticView} from "../../../general/StaticView.js";
 import {renderMessage} from "./common.js";
 
 export class TextMessageView extends TemplateView {
     render(t, vm) {
+        const bodyView = t.mapView(vm => vm.text, text => new BodyView(text));
         return renderMessage(t, vm,
-            [t.p([vm => vm.text, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)])]
+            [t.p([bodyView, t.time({className: {hidden: !vm.date}}, vm.date + " " + vm.time)])]
         );
     }
 }
+
+class BodyView extends StaticView {
+    render(t, value) {
+        const lines = value.split("\n");
+        if (lines.length === 1) {
+            return lines[0];
+        }
+        const elements = [];
+        for (const line of lines) {
+            if (elements.length) {
+                elements.push(t.br());
+            }
+            if (line.length) {
+                elements.push(t.span(line));
+            }
+        }
+        return t.span(elements);
+    }
+}