Use the converse-rich-text component to render the topic

spec/muc.js

@@ -589,7 +589,7 @@ describe("Groupchats", function () {
                     </message>`);
                 _converse.connection._dataRecv(mock.createRequest(stanza));
                 await u.waitUntil(() => view.model.handleSubjectChange.calls.count() === 5);
-                await u.waitUntil(() => view.querySelector('.chat-head__desc').textContent.replace(/<!---->/g, '') === '');
+                await u.waitUntil(() => view.querySelector('.chat-head__desc') === null);
                 await u.waitUntil(() => view.querySelector('converse-chat-message:last-child .chat-info').textContent.trim() === "Topic cleared by some1");
                 done();
             }));

src/plugins/muc-views/templates/muc-head.js

@@ -1,17 +1,16 @@
 import 'components/dropdown.js';
+import 'shared/rich-text.js';
 import { __ } from 'i18n';
+import { _converse } from "@converse/headless/core";
 import { html } from "lit-html";
 import { until } from 'lit-html/directives/until.js';
-import { _converse, converse } from "@converse/headless/core";
-
-const u = converse.env.utils;
 
 const tpl_standalone_btns = (o) => o.standalone_btns.reverse().map(b => until(b, ''));
 
 export default (o) => {
     const i18n_hide_topic = __('Hide the groupchat topic');
     const i18n_bookmarked = __('This groupchat is bookmarked');
-    const subject = o.subject ? u.addHyperlinks(o.subject.text) : '';
+    const subject = o.subject ? o.subject.text : '';
     const show_subject = (subject && !o.subject_hidden);
     return html`
         <div class="chatbox-title ${ show_subject ? '' :  "chatbox-title--no-desc"}">
@@ -24,6 +23,8 @@ export default (o) => {
                 ${ o.dropdown_btns.length ? html`<converse-dropdown .items=${o.dropdown_btns}></converse-dropdown>` : '' }
             </div>
         </div>
-        ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">${subject}</p>` : '' }
+        ${ show_subject ? html`<p class="chat-head__desc" title="${i18n_hide_topic}">
+            <converse-rich-text text=${subject} render_styling></converse-rich-text>
+          </p>` : '' }
     `;
 }

src/shared/directives/rich-text.js

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

src/shared/rich-text.js

@@ -17,6 +17,14 @@ export default class RichText extends CustomElement {
         }
     }
 
+    constructor () {
+        super();
+        this.offset = 0;
+        this.mentions = [];
+        this.render_styling = false;
+        this.show_images = false;
+    }
+
     render () {
         const options = {
             nick: this.nick,