Let the message body be rendered with the rich-text directive

src/shared/chat/message-body.js

@@ -1,8 +1,8 @@
 import 'shared/registry.js';
 import ImageModal from 'modals/image.js';
+import renderRichText from 'shared/directives/rich-text.js';
 import { CustomElement } from 'components/element.js';
 import { api } from "@converse/headless/core";
-import { renderBodyText } from 'templates/directives/body';
 
 
 export default class MessageBody extends CustomElement {
@@ -15,13 +15,27 @@ export default class MessageBody extends CustomElement {
         }
     }
 
-    showImageModal (ev) { // eslint-disable-line class-methods-use-this
+    onImgClick (ev) { // eslint-disable-line class-methods-use-this
         ev.preventDefault();
         api.modal.create(ImageModal, {'src': ev.target.src}, ev).show(ev);
     }
 
+    onImgLoad () {
+        this.dispatchEvent(new CustomEvent('imageLoaded', { detail: this, 'bubbles': true }));
+    }
+
     render () {
-        return renderBodyText(this);
+        const callback = () => this.model.collection?.trigger('rendered', this.model);
+        const offset = 0;
+        const mentions = this.model.get('references');
+        const options = {
+            'nick': this.model.collection.chatbox.get('nick'),
+            'onImgClick': this.onImgClick,
+            'onImgLoad': () => this.onImgLoad(),
+            'render_styling': !this.model.get('is_unstyled') && api.settings.get('allow_message_styling'),
+            'show_images': api.settings.get('show_images_inline'),
+        }
+        return renderRichText(this.text, offset, mentions, options, callback);
     }
 }
 

src/shared/directives/rich-text.js

@@ -24,9 +24,10 @@ class RichTextRenderer {
 }
 
 
-const renderRichText = directive((text, offset, mentions, options) => part => {
+const renderRichText = directive((text, offset, mentions, options, callback) => part => {
     const renderer = new RichTextRenderer(text, offset, mentions, options);
     part.setValue(renderer.render());
+    callback();
 });
 
 export default renderRichText;

src/templates/directives/body.js

@@ -1,50 +0,0 @@
-import { MessageText } from '../../shared/message/text.js';
-import { api } from  "@converse/headless/core";
-import { directive, html } from "lit-html";
-import { until } from 'lit-html/directives/until.js';
-
-
-class MessageBodyRenderer {
-
-    constructor (component) {
-        this.model = component.model;
-        this.component = component;
-        this.text = this.model.getMessageText();
-    }
-
-    onImageLoaded () {
-        this.component.dispatchEvent(new CustomEvent('imageLoaded', { detail: this.component, 'bubbles': true }));
-    }
-
-    async transform () {
-        const show_images = api.settings.get('show_images_inline');
-        const render_styling = !this.model.get('is_unstyled') && api.settings.get('allow_message_styling');
-        const offset = 0;
-        const text = new MessageText(
-            this.text,
-            offset,
-            this.model.get('references'),
-            {
-                'nick': this.model.collection.chatbox.get('nick'),
-                'onImgClick': () => this.onImageLoaded(),
-                'onImgLoad': ev => this.component.showImageModal(ev),
-                render_styling,
-                show_images,
-            }
-        );
-        await text.addTemplates();
-        return text.payload;
-    }
-
-    render () {
-        return html`${until(this.transform(), html`${this.text}`)}`;
-    }
-}
-
-
-export const renderBodyText = directive(component => part => {
-    const renderer = new MessageBodyRenderer(component);
-    part.setValue(renderer.render());
-    const model = component.model;
-    model.collection?.trigger('rendered', model);
-});