Create rich text component and directive

src/shared/directives/rich-text.js

@@ -0,0 +1,32 @@
+import { MessageText } from 'shared/message/text.js';
+import { directive, html } from "lit-html";
+import { until } from 'lit-html/directives/until.js';
+
+
+class RichTextRenderer {
+
+    constructor (text, offset, mentions=[], options={}) {
+        this.mentions = mentions;
+        this.offset = offset;
+        this.options = options;
+        this.text = text;
+    }
+
+    async transform () {
+        const text = new MessageText(this.text, this.offset, this.mentions, this.options);
+        await text.addTemplates();
+        return text.payload;
+    }
+
+    render () {
+        return html`${until(this.transform(), html`${this.text}`)}`;
+    }
+}
+
+
+const renderRichText = directive((text, offset, mentions, options) => part => {
+    const renderer = new RichTextRenderer(text, offset, mentions, options);
+    part.setValue(renderer.render());
+});
+
+export default renderRichText;

src/shared/message/text.js

@@ -45,7 +45,7 @@ export class MessageText extends String {
      *  which create new MessageText instances (as happens with XEP-393 styling directives).
      * @param { Array } mentions - An array of mention references
      * @param { Object } options
-     * @param { Object } options.nick - The current user's nickname (only relevant if the message is in a XEP-0045 MUC)
+     * @param { String } options.nick - The current user's nickname (only relevant if the message is in a XEP-0045 MUC)
      * @param { Boolean } options.render_styling - Whether XEP-0393 message styling should be applied to the message
      * @param { Boolean } options.show_images - Whether image URLs should be rendered as <img> tags.
      * @param { Function } options.onImgClick - Callback for when an inline rendered image has been clicked

src/shared/rich-text.js

@@ -0,0 +1,32 @@
+import renderRichText from 'shared/directives/rich-text.js';
+import { CustomElement } from 'components/element.js';
+import { api } from "@converse/headless/core";
+
+export default class RichText extends CustomElement {
+
+    static get properties () {
+        return {
+            text: { type: String },
+            offset: { type: Number },
+            mentions: { type: Array },
+            nick: { type: String },
+            render_styling: { type: Boolean },
+            show_images: { type: Boolean },
+            onImgClick: { type: Function },
+            onImgLoad: { type: Function }
+        }
+    }
+
+    render () {
+        const options = {
+            nick: this.nick,
+            render_styling: this.render_styling,
+            show_images: this.show_images,
+            onImgClick: this.onImgClick,
+            onImgLoad: this.onImgLoad,
+        }
+        return renderRichText(this.text, this.offset, this.mentions, options);
+    }
+}
+
+api.elements.define('converse-rich-text', RichText);