diff --git a/src/ui/web/general/StaticView.js b/src/ui/web/general/StaticView.js index ae4f0f98..c87a0f3c 100644 --- a/src/ui/web/general/StaticView.js +++ b/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() { diff --git a/src/ui/web/general/html.js b/src/ui/web/general/html.js index 846539c7..67d9fcd9 100644 --- a/src/ui/web/general/html.js +++ b/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"] diff --git a/src/ui/web/session/room/timeline/TextMessageView.js b/src/ui/web/session/room/timeline/TextMessageView.js index 886eae5d..5562f97d 100644 --- a/src/ui/web/session/room/timeline/TextMessageView.js +++ b/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); + } +}