diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index ea9e0bfb..b28c51b0 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -18,6 +18,7 @@ import {TemplateView} from "../../general/TemplateView.js"; import {Popup} from "../../general/Popup.js"; import {Menu} from "../../general/Menu.js"; import {TextMessageView} from "./timeline/TextMessageView.js"; +import {viewClassForEntry} from "./TimelineList.js" export class MessageComposer extends TemplateView { constructor(viewModel) { @@ -33,19 +34,20 @@ export class MessageComposer extends TemplateView { onKeydown: e => this._onKeyDown(e), onInput: () => vm.setInput(this._input.value), }); - const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => !rvm ? null : - t.div({ - className: "MessageComposer_replyPreview" - }, [ - t.span({ className: "replying" }, "Replying"), - t.button({ - className: "cancel", - onClick: () => this._clearReplyingTo() - }, "Close"), - // TODO need proper view, not just assumed TextMessageView - t.view(new TextMessageView(vm.replyViewModel, true, "div")) - ]) - ); + const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => { + const View = rvm && viewClassForEntry(rvm); + if (!View) { return null; } + return t.div({ + className: "MessageComposer_replyPreview" + }, [ + t.span({ className: "replying" }, "Replying"), + t.button({ + className: "cancel", + onClick: () => this._clearReplyingTo() + }, "Close"), + t.view(new View(rvm, true, "div")) + ]) + }); const input = t.div({className: "MessageComposer_input"}, [ this._input, t.button({ diff --git a/src/platform/web/ui/session/room/TimelineList.js b/src/platform/web/ui/session/room/TimelineList.js index 74556c57..e0179e5d 100644 --- a/src/platform/web/ui/session/room/TimelineList.js +++ b/src/platform/web/ui/session/room/TimelineList.js @@ -24,7 +24,7 @@ import {MissingAttachmentView} from "./timeline/MissingAttachmentView.js"; import {AnnouncementView} from "./timeline/AnnouncementView.js"; import {RedactedView} from "./timeline/RedactedView.js"; -function viewClassForEntry(entry) { +export function viewClassForEntry(entry) { switch (entry.shape) { case "gap": return GapView; case "announcement": return AnnouncementView;