Images in an enlarged chat cannot be opened after a message with the image is posted

Contribute Bug
5

I think the issue is here:

The image shows a computer screen displaying code in a text editor, with a highlighted coding exercise section where a variable declaration "this.getChatElement()" is being typed with an "I" character awaiting completion. (Captioned by AI)
The image shows a computer screen displaying code in a text editor, with a highlighted coding exercise section where a variable declaration "this.getChatElement()" is being typed with an "I" character awaiting completion. (Captioned by AI)1541×364 54.9 KB

api.decorateChatMessage(
      (element) =>
        lightbox(element.querySelectorAll("img:not(.emoji, .avatar)")),
      {
        id: "lightbox",
      }
    );

Before, api.decorateChatMessage was passing .chat-message-container element:

The image displays a fragment of HTML code structured with various nested div elements, including a chat message container with class attributes such as "flex" and "grid". (Captioned by AI)
The image displays a fragment of HTML code structured with various nested div elements, including a chat message container with class attributes such as "flex" and "grid". (Captioned by AI)1069×337 10.3 KB

After, it passes .chat-cooked element:

A chat message UI with visible HTML structure. (Captioned by AI)
A chat message UI with visible HTML structure. (Captioned by AI)1134×330 20.7 KB

With the images defined inside chat-message-collapser-body, lightbox can’t find the images here.

Changes introduced here: DEV: Refactor chat HTML decorating (#31309) · discourse/discourse@a0f681b · GitHub

5 Likes