From abec9bc39ec9fafdd0a5e1c2b9670918498b85fc Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Thu, 11 Jun 2020 15:27:45 +0200
Subject: [PATCH] Fixes #2064 and move message markup into template

After some back-and-forth, I think it's still better to keep markup in
templates (instead of having them directly inside the components)
becaues it makes it easier for people to modify Converse.js (at the
expense of some developer ergonomics).
---
 src/components/message.js     | 40 ++----------------------------
 src/templates/chat_message.js | 46 +++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+), 38 deletions(-)
 create mode 100644 src/templates/chat_message.js

diff --git a/src/components/message.js b/src/components/message.js
index 2edf8dc4b..4fc24a446 100644
--- a/src/components/message.js
+++ b/src/components/message.js
@@ -4,6 +4,7 @@ import './message-actions.js';
 import MessageVersionsModal from '../modals/message-versions.js';
 import dayjs from 'dayjs';
 import filesize from "filesize";
+import tpl_chat_message from '../templates/chat_message.js';
 import tpl_spinner from '../templates/spinner.js';
 import { CustomElement } from './element.js';
 import { __ } from '@converse/headless/i18n';
@@ -14,11 +15,9 @@ import { renderAvatar } from './../templates/directives/avatar';
 const { Strophe } = converse.env;
 const u = converse.env.utils;
 
-const i18n_edited = __('This message has been edited');
 const i18n_show = __('Show more');
 const i18n_show_less = __('Show less');
 const i18n_uploading = __('Uploading file:');
-const i18n_new_messages = __('New messages');
 
 
 class Message extends CustomElement {
@@ -124,42 +123,7 @@ class Message extends CustomElement {
     }
 
     renderChatMessage () {
-        const is_groupchat_message = (this.message_type === 'groupchat');
-        return html`
-            ${ this.is_first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">${ i18n_new_messages }</span></div>` : '' }
-            <div class="message chat-msg ${ this.getExtraMessageClasses() }"
-                 data-isodate="${this.time}"
-                 data-msgid="${this.msgid}"
-                 data-from="${this.from}"
-                 data-encrypted="${this.is_encrypted}">
-
-                ${ this.shouldShowAvatar() ? renderAvatar(this.getAvatarData()) : '' }
-                <div class="chat-msg__content chat-msg__content--${this.sender} ${this.is_me_message ? 'chat-msg__content--action' : ''}">
-                    <span class="chat-msg__heading">
-                        ${ (this.is_me_message) ? html`
-                            <time timestamp="${this.time}" class="chat-msg__time">${this.pretty_time}</time>
-                            ${this.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
-                        ` : '' }
-                        <span class="chat-msg__author">${ this.is_me_message ? '**' : ''}${this.username}</span>
-                        ${ !this.is_me_message ? this.renderAvatarByline() : '' }
-                        ${ this.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
-                    </span>
-                    <div class="chat-msg__body chat-msg__body--${this.message_type} ${this.received ? 'chat-msg__body--received' : '' } ${this.is_delayed ? 'chat-msg__body--delayed' : '' }">
-                        <div class="chat-msg__message">
-                            ${ this.is_retracted ? this.renderRetraction() : this.renderMessageText() }
-                        </div>
-                        ${ (this.received && !this.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
-                        ${ (this.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
-                        <converse-message-actions
-                            .chatview=${this.chatview}
-                            .model=${this.model}
-                            ?correcting="${this.correcting}"
-                            ?editable="${this.editable}"
-                            ?is_retracted="${this.is_retracted}"
-                            message_type="${this.message_type}"></converse-message-actions>
-                    </div>
-                </div>
-            </div>`;
+        return tpl_chat_message(this);
     }
 
     shouldShowAvatar () {
diff --git a/src/templates/chat_message.js b/src/templates/chat_message.js
new file mode 100644
index 000000000..cdacd3c85
--- /dev/null
+++ b/src/templates/chat_message.js
@@ -0,0 +1,46 @@
+import { html } from "lit-html";
+import { __ } from '@converse/headless/i18n';
+import { renderAvatar } from './../templates/directives/avatar';
+
+const i18n_edited = __('This message has been edited');
+const i18n_new_messages = __('New messages');
+
+
+export default (o) => {
+    const is_groupchat_message = (o.message_type === 'groupchat');
+    return html`
+        ${ o.is_first_unread ? html`<div class="message date-separator"><hr class="separator"><span class="separator-text">${ i18n_new_messages }</span></div>` : '' }
+        <div class="message chat-msg ${ o.getExtraMessageClasses() }"
+                data-isodate="${o.time}"
+                data-msgid="${o.msgid}"
+                data-from="${o.from}"
+                data-encrypted="${o.is_encrypted}">
+
+            ${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
+            <div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">
+                <span class="chat-msg__heading">
+                    ${ (o.is_me_message) ? html`
+                        <time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>
+                        ${o.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
+                    ` : '' }
+                    <span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>
+                    ${ !o.is_me_message ? o.renderAvatarByline() : '' }
+                    ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
+                </span>
+                <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">
+                    <div class="chat-msg__message">
+                        ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
+                        ${ (o.received && !o.is_me_message && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
+                        ${ (o.edited) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${o.showMessageVersionsModal}></i>` : '' }
+                    </div>
+                    <converse-message-actions
+                        .chatview=${o.chatview}
+                        .model=${o.model}
+                        ?correcting="${o.correcting}"
+                        ?editable="${o.editable}"
+                        ?is_retracted="${o.is_retracted}"
+                        message_type="${o.message_type}"></converse-message-actions>
+                </div>
+            </div>
+        </div>`;
+}