Use converse-icon to show message edited icon/toggle

src/shared/chat/message.js

@@ -8,12 +8,12 @@ import UserDetailsModal from 'modals/user-details.js';
 import filesize from 'filesize';
 import log from '@converse/headless/log';
 import tpl_message from './templates/message.js';
+import tpl_message_text from './templates/message-text.js';
 import tpl_spinner from 'templates/spinner.js';
 import { CustomElement } from 'shared/components/element.js';
 import { __ } from 'i18n';
 import { _converse, api, converse } from  '@converse/headless/core';
 import { getHats } from './utils.js';
-import { getOOBURLMarkup } from 'utils/html.js';
 import { html } from 'lit';
 import { renderAvatar } from 'shared/directives/avatar';
 
@@ -237,41 +237,7 @@ export default class Message extends CustomElement {
     }
 
     renderMessageText () {
-        const i18n_edited = __('This message has been edited');
-        const i18n_show = __('Show more');
-        const is_groupchat_message = (this.model.get('type') === 'groupchat');
-        const i18n_show_less = __('Show less');
-
-        const tpl_spoiler_hint = html`
-            <div class="chat-msg__spoiler-hint">
-                <span class="spoiler-hint">${this.model.get('spoiler_hint')}</span>
-                <a class="badge badge-info spoiler-toggle" href="#" @click=${this.toggleSpoilerMessage}>
-                    <i class="fa ${this.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"></i>
-                    ${ this.model.get('is_spoiler_visible') ? i18n_show_less : i18n_show }
-                </a>
-            </div>
-        `;
-        const spoiler_classes = this.model.get('is_spoiler') ? `spoiler ${this.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
-        const text = this.model.getMessageText();
-        return html`
-            ${ this.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
-            ${ this.model.get('subject') ? html`<div class="chat-msg__subject">${this.model.get('subject')}</div>` : '' }
-            <span>
-                <converse-chat-message-body
-                    class="chat-msg__text ${this.model.get('is_only_emojis') ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
-                    .model="${this.model}"
-                    ?hide_url_previews=${this.model.get('hide_url_previews')}
-                    ?is_me_message=${this.model.isMeCommand()}
-                    ?show_images=${api.settings.get('show_images_inline')}
-                    ?embed_videos=${api.settings.get('embed_videos')}
-                    ?embed_audio=${api.settings.get('embed_audio')}
-                    text="${text}"></converse-chat-message-body>
-                ${ (this.model.get('received') && !this.model.isMeCommand() && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
-                ${ (this.model.get('edited')) ? html`<i title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${this.showMessageVersionsModal}></i>` : '' }
-            </span>
-            ${ this.model.get('oob_url') ? html`<div class="chat-msg__media">${getOOBURLMarkup(this.model.get('oob_url'))}</div>` : '' }
-            <div class="chat-msg__error">${ this.model.get('error_text') || this.model.get('error') }</div>
-        `;
+        return tpl_message_text(this);
     }
 
     showUserModal (ev) {

src/shared/chat/templates/message-text.js

@@ -0,0 +1,47 @@
+import { __ } from 'i18n/index.js';
+import { api } from  '@converse/headless/core';
+import { getOOBURLMarkup } from 'utils/html.js';
+import { html } from 'lit';
+
+const tpl_edited_icon = (el) => {
+    const i18n_edited = __('This message has been edited');
+    return html`<converse-icon title="${ i18n_edited }" class="fa fa-edit chat-msg__edit-modal" @click=${el.showMessageVersionsModal} size="1em"></converse-icon>`;
+}
+
+
+export default (el) => {
+    const i18n_show = __('Show more');
+    const is_groupchat_message = (el.model.get('type') === 'groupchat');
+    const i18n_show_less = __('Show less');
+
+    const tpl_spoiler_hint = html`
+        <div class="chat-msg__spoiler-hint">
+            <span class="spoiler-hint">${el.model.get('spoiler_hint')}</span>
+            <a class="badge badge-info spoiler-toggle" href="#" @click=${el.toggleSpoilerMessage}>
+                <i class="fa ${el.model.get('is_spoiler_visible') ? 'fa-eye-slash' : 'fa-eye'}"></i>
+                ${ el.model.get('is_spoiler_visible') ? i18n_show_less : i18n_show }
+            </a>
+        </div>
+    `;
+    const spoiler_classes = el.model.get('is_spoiler') ? `spoiler ${el.model.get('is_spoiler_visible') ? '' : 'hidden'}` : '';
+    const text = el.model.getMessageText();
+    return html`
+        ${ el.model.get('is_spoiler') ? tpl_spoiler_hint : '' }
+        ${ el.model.get('subject') ? html`<div class="chat-msg__subject">${el.model.get('subject')}</div>` : '' }
+        <span>
+            <converse-chat-message-body
+                class="chat-msg__text ${el.model.get('is_only_emojis') ? 'chat-msg__text--larger' : ''} ${spoiler_classes}"
+                .model="${el.model}"
+                ?hide_url_previews=${el.model.get('hide_url_previews')}
+                ?is_me_message=${el.model.isMeCommand()}
+                ?show_images=${api.settings.get('show_images_inline')}
+                ?embed_videos=${api.settings.get('embed_videos')}
+                ?embed_audio=${api.settings.get('embed_audio')}
+                text="${text}"></converse-chat-message-body>
+            ${ (el.model.get('received') && !el.model.isMeCommand() && !is_groupchat_message) ? html`<span class="fa fa-check chat-msg__receipt"></span>` : '' }
+            ${ (el.model.get('edited')) ? tpl_edited_icon(el) : '' }
+        </span>
+        ${ el.model.get('oob_url') ? html`<div class="chat-msg__media">${getOOBURLMarkup(el.model.get('oob_url'))}</div>` : '' }
+        <div class="chat-msg__error">${ el.model.get('error_text') || el.model.get('error') }</div>
+    `;
+}