DEV: Make chatMessage.cook function async (#21829)

This will make it simpler to work with this code. This also can make this code more stable and increase stability of our test suite.

Cooked message now will be available immediately after cooking, it wasn't the case before:

    await message.cook();
    const cooked = message.cooked;


This also removes a call to `message.cook()` from message fabricator. Alternatively we may leave the call there and make the fabricator function async, but I fill it's better this way. If someone needs to test something related to cooked message, they can either pass cooked text to fabricator:

    message = fabricators.message({ cooked: "<p>cooked</p>" });

or call `message.cook()` after fabrication:

    message = fabricators.message({ message: "raw message" });
    await message.cook()

plugins/chat/assets/javascripts/discourse/components/chat-channel.js

@@ -647,11 +647,11 @@ export default class ChatLivePane extends Component {
   }
 
   @action
-  onSendMessage(message) {
+  async onSendMessage(message) {
     if (message.editing) {
-      this.#sendEditMessage(message);
+      await this.#sendEditMessage(message);
     } else {
-      this.#sendNewMessage(message);
+      await this.#sendNewMessage(message);
     }
   }
 
@@ -660,8 +660,8 @@ export default class ChatLivePane extends Component {
     this.chatChannelComposer.reset(this.args.channel);
   }
 
-  #sendEditMessage(message) {
+  async #sendEditMessage(message) {
-    message.cook();
+    await message.cook();
     this.chatChannelPane.sending = true;
 
     const data = {
@@ -671,16 +671,21 @@ export default class ChatLivePane extends Component {
 
     this.resetComposer();
 
-    return this.chatApi
+    try {
-      .editMessage(this.args.channel.id, message.id, data)
+      return await this.chatApi.editMessage(
-      .catch(popupAjaxError)
+        this.args.channel.id,
-      .finally(() => {
+        message.id,
-        this.chatDraftsManager.remove({ channelId: this.args.channel.id });
+        data
-        this.chatChannelPane.sending = false;
+      );
-      });
+    } catch (e) {
+      popupAjaxError(e);
+    } finally {
+      this.chatDraftsManager.remove({ channelId: this.args.channel.id });
+      this.chatChannelPane.sending = false;
+    }
   }
 
-  #sendNewMessage(message) {
+  async #sendNewMessage(message) {
     this.chatChannelPane.sending = true;
 
     resetIdle();
@@ -712,7 +717,7 @@ export default class ChatLivePane extends Component {
       );
     }
 
-    this.args.channel.stageMessage(message);
+    await this.args.channel.stageMessage(message);
     this.resetComposer();
 
     if (!this.args.channel.canLoadMoreFuture) {

plugins/chat/assets/javascripts/discourse/components/chat-thread.js

@@ -216,13 +216,13 @@ export default class ChatThreadPanel extends Component {
   }
 
   @action
-  onSendMessage(message) {
+  async onSendMessage(message) {
     resetIdle();
 
     if (message.editing) {
-      this.#sendEditMessage(message);
+      await this.#sendEditMessage(message);
     } else {
-      this.#sendNewMessage(message);
+      await this.#sendNewMessage(message);
     }
   }
 
@@ -236,7 +236,7 @@ export default class ChatThreadPanel extends Component {
     this.chat.activeMessage = null;
   }
 
-  #sendNewMessage(message) {
+  async #sendNewMessage(message) {
     message.thread = this.thread;
 
     if (this.chatChannelThreadPane.sending) {
@@ -245,7 +245,7 @@ export default class ChatThreadPanel extends Component {
 
     this.chatChannelThreadPane.sending = true;
 
-    this.thread.stageMessage(message);
+    await this.thread.stageMessage(message);
     this.resetComposer();
 
     this.scrollToBottom();
@@ -272,8 +272,8 @@ export default class ChatThreadPanel extends Component {
       });
   }
 
-  #sendEditMessage(message) {
+  async #sendEditMessage(message) {
-    message.cook();
+    await message.cook();
     this.chatChannelThreadPane.sending = true;
 
     const data = {
@@ -283,12 +283,17 @@ export default class ChatThreadPanel extends Component {
 
     this.resetComposer();
 
-    return this.chatApi
+    try {
-      .editMessage(message.channel.id, message.id, data)
+      return await this.chatApi.editMessage(
-      .catch(popupAjaxError)
+        message.channel.id,
-      .finally(() => {
+        message.id,
-        this.chatChannelThreadPane.sending = false;
+        data
-      });
+      );
+    } catch (e) {
+      popupAjaxError(e);
+    } finally {
+      this.chatChannelThreadPane.sending = false;
+    }
   }
 
   // A more consistent way to scroll to the bottom when we are sure this is our goal

plugins/chat/assets/javascripts/discourse/components/styleguide/chat-message.js

@@ -10,7 +10,11 @@ export default class ChatStyleguideChatMessage extends Component {
 
   manager = new ChatMessagesManager(getOwner(this));
 
-  message = fabricators.message({ user: this.currentUser });
+  constructor() {
+    super(...arguments);
+    this.message = fabricators.message({ user: this.currentUser });
+    this.message.cook();
+  }
 
   @action
   toggleDeleted() {
@@ -61,9 +65,9 @@ export default class ChatStyleguideChatMessage extends Component {
   }
 
   @action
-  updateMessage(event) {
+  async updateMessage(event) {
     this.message.message = event.target.value;
-    this.message.cook();
+    await this.message.cook();
   }
 
   @action

plugins/chat/assets/javascripts/discourse/lib/fabricators.js

@@ -46,8 +46,6 @@ function messageFabricator(args = {}) {
     message.excerpt = text.slice(0, excerptLength) + "...";
   }
 
-  message.cook();
-
   return message;
 }
 

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

@@ -286,12 +286,12 @@ export default class ChatChannel {
     return thread;
   }
 
-  stageMessage(message) {
+  async stageMessage(message) {
     message.id = guid();
     message.staged = true;
     message.draft = false;
     message.createdAt ??= moment.utc().format();
-    message.cook();
+    await message.cook();
 
     if (message.inReplyTo) {
       if (!this.threadingEnabled) {

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

@@ -7,7 +7,7 @@ import I18n from "I18n";
 import { generateCookFunction } from "discourse/lib/text";
 import simpleCategoryHashMentionTransform from "discourse/plugins/chat/discourse/lib/simple-category-hash-mention-transform";
 import { getOwner } from "discourse-common/lib/get-owner";
-import { next } from "@ember/runloop";
+
 export default class ChatMessage {
   static cookFunction = null;
 
@@ -147,40 +147,37 @@ export default class ChatMessage {
     }
   }
 
-  cook() {
+  async cook() {
     const site = getOwner(this).lookup("service:site");
 
-    next(() => {
+    if (this.isDestroyed || this.isDestroying) {
-      if (this.isDestroyed || this.isDestroying) {
+      return;
-        return;
+    }
-      }
 
-      const markdownOptions = {
+    const markdownOptions = {
-        featuresOverride:
+      featuresOverride:
-          site.markdown_additional_options?.chat?.limited_pretty_text_features,
+        site.markdown_additional_options?.chat?.limited_pretty_text_features,
-        markdownItRules:
+      markdownItRules:
-          site.markdown_additional_options?.chat
+        site.markdown_additional_options?.chat
-            ?.limited_pretty_text_markdown_rules,
+          ?.limited_pretty_text_markdown_rules,
-        hashtagTypesInPriorityOrder:
+      hashtagTypesInPriorityOrder:
-          site.hashtag_configurations?.["chat-composer"],
+        site.hashtag_configurations?.["chat-composer"],
-        hashtagIcons: site.hashtag_icons,
+      hashtagIcons: site.hashtag_icons,
+    };
+
+    if (ChatMessage.cookFunction) {
+      this.cooked = ChatMessage.cookFunction(this.message);
+    } else {
+      const cookFunction = await generateCookFunction(markdownOptions);
+      ChatMessage.cookFunction = (raw) => {
+        return simpleCategoryHashMentionTransform(
+          cookFunction(raw),
+          site.categories
+        );
       };
 
-      if (ChatMessage.cookFunction) {
+      this.cooked = ChatMessage.cookFunction(this.message);
-        this.cooked = ChatMessage.cookFunction(this.message);
+    }
-      } else {
-        generateCookFunction(markdownOptions).then((cookFunction) => {
-          ChatMessage.cookFunction = (raw) => {
-            return simpleCategoryHashMentionTransform(
-              cookFunction(raw),
-              site.categories
-            );
-          };
-
-          this.cooked = ChatMessage.cookFunction(this.message);
-        });
-      }
-    });
   }
 
   get read() {

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

@@ -63,12 +63,12 @@ export default class ChatThread {
     }
   }
 
-  stageMessage(message) {
+  async stageMessage(message) {
     message.id = guid();
     message.staged = true;
     message.draft = false;
     message.createdAt ??= moment.utc().format();
-    message.cook();
+    await message.cook();
 
     this.messagesManager.addMessages([message]);
   }