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

Render multi-line message as such
This commit is contained in:
Bruno Windels 2020-10-19 08:11:42 +00:00 committed by GitHub
commit 7aca9e291e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 4 deletions

View File

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

View File

@ -92,7 +92,7 @@ export const SVG_NS = "http://www.w3.org/2000/svg";
export const TAG_NAMES = { export const TAG_NAMES = {
[HTML_NS]: [ [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", "p", "strong", "em", "span", "img", "section", "main", "article", "aside",
"pre", "button", "time", "input", "textarea", "label"], "pre", "button", "time", "input", "textarea", "label"],
[SVG_NS]: ["svg", "circle"] [SVG_NS]: ["svg", "circle"]

View File

@ -15,12 +15,33 @@ limitations under the License.
*/ */
import {TemplateView} from "../../../general/TemplateView.js"; import {TemplateView} from "../../../general/TemplateView.js";
import {StaticView} from "../../../general/StaticView.js";
import {renderMessage} from "./common.js"; import {renderMessage} from "./common.js";
export class TextMessageView extends TemplateView { export class TextMessageView extends TemplateView {
render(t, vm) { render(t, vm) {
const bodyView = t.mapView(vm => vm.text, text => new BodyView(text));
return renderMessage(t, vm, 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);
}
}