FIX: revert previously removed mentions transformation on the client (#…

…23084)

This partially reverts 2ecc829.

The problem is that if we don't transform mentions right away, 
there is a noticeable lag before a mention gets fully rendered, 
while with the transformation, everything is super smooth.

I'm reverting that change only for mentions. Another part was about 
category hashtags, but unfortunately they lag both with and without 
the transformation. We need to address them separately.

plugins/chat/assets/javascripts/discourse/lib/transform-mentions.js

@@ -0,0 +1,20 @@
+import getURL from "discourse-common/lib/get-url";
+
+const domParser = new DOMParser();
+
+export default function transformMentions(cooked) {
+  const html = domParser.parseFromString(cooked, "text/html");
+  transform(html);
+  return html.body.innerHTML;
+}
+
+function transform(html) {
+  (html.querySelectorAll("span.mention") || []).forEach((mentionSpan) => {
+    let mentionLink = document.createElement("a");
+    let mentionText = document.createTextNode(mentionSpan.innerText);
+    mentionLink.classList.add("mention");
+    mentionLink.appendChild(mentionText);
+    mentionLink.href = getURL(`/u/${mentionSpan.innerText.substring(1)}`);
+    mentionSpan.parentNode.replaceChild(mentionLink, mentionSpan);
+  });
+}

plugins/chat/assets/javascripts/discourse/models/chat-message.js

@@ -5,6 +5,7 @@ import ChatMessageReaction from "discourse/plugins/chat/discourse/models/chat-me
 import Bookmark from "discourse/models/bookmark";
 import I18n from "I18n";
 import { generateCookFunction } from "discourse/lib/text";
+import transformMentions from "discourse/plugins/chat/discourse/lib/transform-mentions";
 import { getOwner } from "discourse-common/lib/get-owner";
 import discourseLater from "discourse-common/lib/later";
 
@@ -191,7 +192,7 @@ export default class ChatMessage {
     } else {
       const cookFunction = await generateCookFunction(markdownOptions);
       ChatMessage.cookFunction = (raw) => {
-        return cookFunction(raw);
+        return transformMentions(cookFunction(raw));
       };
 
       this.cooked = ChatMessage.cookFunction(this.message);