WIP

src/domain/session/room/timeline/tiles/TextTile.js

@@ -19,6 +19,12 @@ import {parsePlainBody} from "../MessageBody.js";
 import {parseHTMLBody} from "../deserialize.js";
 
 export class TextTile extends BaseTextTile {
+
+    constructor(options) {
+        super(options);
+        this._replyTextTile = null;
+    }
+
     _getContentString(key) {
         return this._getContent()?.[key] || "";
     }
@@ -59,4 +65,17 @@ export class TextTile extends BaseTextTile {
         }
         return messageBody;
     }
+
+    get replyTextTile() {
+        if (!this._entry.contextEventId) {
+            return null;
+        }
+        if (!this._replyTextTile) {
+            const entry = this._entry.contextEntry;
+            if (entry) {
+                this._replyTextTile = new TextTile(this.childOptions({entry, roomVM: this._roomVM, timeline: this._timeline}));
+            }
+        }
+        return this._replyTextTile;
+    }
 }

src/platform/web/ui/session/room/timeline/ReplyPreviewView.js

@@ -21,7 +21,13 @@ import {renderPart} from "./TextMessageView.js";
 
 export class ReplyPreviewView extends TemplateView {
     render(t, vm) {
-        const replyContainer = vm.error? this._renderError(vm) : this._renderReplyPreview(vm);
+        const replyContainer = t.div({className: "ReplyPreviewView"});
+        t.mapSideEffect(vm => vm.body, () => {
+            while (replyContainer.lastChild) {
+                replyContainer.removeChild(replyContainer.lastChild);
+            }
+            replyContainer.appendChild(vm.error? this._renderError(vm) : this._renderReplyPreview(vm));
+        })
         return replyContainer;
     }
 
@@ -29,7 +35,7 @@ export class ReplyPreviewView extends TemplateView {
         const errorMessage = this._getErrorMessage(error);
         const children = [tag.span({ className: "statusMessage" }, errorMessage), tag.br()];
         const reply = avatar && senderName ? this._renderReplyHeader(avatar, senderName, children) :
-                                             tag.blockquote({ className: "ReplyPreviewView" }, children);
+                                             tag.blockquote(children);
         return reply;
     }
 
@@ -45,19 +51,20 @@ export class ReplyPreviewView extends TemplateView {
         }
     }
 
-    _renderReplyPreview({ body, avatar, senderName }) {
-        const reply = this._renderReplyHeader(avatar, senderName);
+    _renderReplyPreview(vm) {
+        const reply = this._renderReplyHeader(vm);
+        const body = vm.body;
         for (const part of body.parts) {
             reply.appendChild(renderPart(part));
         }
         return reply;
     }
 
-    _renderReplyHeader(avatar, displayName, children = []) {
-        return tag.blockquote({ className: "ReplyPreviewView" },
+    _renderReplyHeader(vm, children = []) {
+        return tag.blockquote(
             [
             tag.a({ className: "link", href: "#" }, "In reply to"),
-            tag.a({ className: "pill", href: "#" }, [renderStaticAvatar(avatar, 12), displayName]),
+            tag.a({ className: "pill", href: "#" }, [renderStaticAvatar(vm, 12, undefined, true), vm.displayName]),
             tag.br(),
             ...children
         ]);

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

@@ -26,10 +26,10 @@ export class TextMessageView extends BaseMessageView {
                 "Timeline_messageBody": true,
                 statusMessage: vm => vm.shape === "message-status",
             }
-        }, t.mapView(vm => vm.replyPreviewBody, reply => reply ? new ReplyPreviewView(reply): null));
+        }, t.mapView(vm => vm.replyTextTile, replyTextTile => replyTextTile ? new ReplyPreviewView(replyTextTile) : null));
 
         t.mapSideEffect(vm => vm.body, body => {
-            while (container.lastChild && container.lastChild.className !== "ReplyPreviewView") {
+            while (this._shouldRemove(container.lastChild)) {
                 container.removeChild(container.lastChild);
             }
             for (const part of body.parts) {
@@ -41,6 +41,10 @@ export class TextMessageView extends BaseMessageView {
         return container;
     }
 
+    _shouldRemove(element) {
+        return element && element.className !== "ReplyPreviewView" && element.nodeName !== "#comment";
+    }
+
 }
 
 function renderList(listBlock) {