Message styling fix

Don't parse text that falls within XEP-0372 references ranges for
message styling hints.

src/plugins/muc-views/tests/styling.js

@@ -2,11 +2,11 @@
 
 const { u, $msg } = converse.env;
 
-describe("A outgoing groupchat Message", function () {
+describe("An incoming groupchat Message", function () {
 
     it("can be styled with span XEP-0393 message styling hints that contain mentions",
-        mock.initConverse(['chatBoxesFetched'], {},
-            async function (done, _converse) {
+            mock.initConverse(['chatBoxesFetched'], {},
+                async function (done, _converse) {
 
         const muc_jid = 'lounge@montague.lit';
         await mock.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
@@ -29,4 +29,30 @@ describe("A outgoing groupchat Message", function () {
             'This <span class="styling-directive">*</span><b>message mentions <span class="mention mention--self badge badge-info">romeo</span></b><span class="styling-directive">*</span>');
         done();
     }));
+
+    it("will not have styling applied to mentioned nicknames themselves",
+            mock.initConverse(['chatBoxesFetched'], {},
+                async function (done, _converse) {
+
+        const muc_jid = 'lounge@montague.lit';
+        await mock.openAndEnterChatRoom(_converse, muc_jid, 'romeo');
+        const view = _converse.api.chatviews.get(muc_jid);
+        const msg_text = "x_y_z_ hello";
+        const msg = $msg({
+                from: 'lounge@montague.lit/gibson',
+                id: u.getUniqueId(),
+                to: 'romeo@montague.lit',
+                type: 'groupchat'
+            }).c('body').t(msg_text).up()
+                .c('reference', {'xmlns':'urn:xmpp:reference:0', 'begin':'0', 'end':'6', 'type':'mention', 'uri':'xmpp:xyz@montague.lit'}).nodeTree;
+        await view.model.handleMessageStanza(msg);
+        const message = await u.waitUntil(() => view.querySelector('.chat-msg__text'));
+        expect(message.classList.length).toEqual(1);
+
+        const msg_el = Array.from(view.querySelectorAll('converse-chat-message-body')).pop();
+        expect(msg_el.innerText).toBe(msg_text);
+        await u.waitUntil(() => msg_el.innerHTML.replace(/<!-.*?->/g, '') ===
+            '<span class="mention">x_y_z_</span> hello');
+        done();
+    }));
 });

src/shared/rich-text.js

@@ -170,10 +170,19 @@ export class RichText extends String {
      * them.
      */
     addStyling () {
-        let i = 0;
         const references = [];
-        if (containsDirectives(this)) {
+        if (containsDirectives(this, this.mentions)) {
+            const mention_ranges = this.mentions.map(
+                m => Array.from({'length': Number(m.end)}, (v, i) => Number(m.begin) + i)
+            );
+            let i = 0;
             while (i < this.length) {
+                if (mention_ranges.filter(r => r.includes(i)).length) { // eslint-disable-line no-loop-func
+                    // Don't treat potential directives if they fall within a
+                    // declared XEP-0372 reference
+                    i++;
+                    continue;
+                }
                 const { d, length } = getDirectiveAndLength(this, i);
                 if (d && length) {
                     const is_quote = isQuoteDirective(d);