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

[meglio (Anton)]

Reproduction steps:

1. Enlarge chat:

2.1. Post a message with a medium to big image, so that you’d expect a popup with a larger image if you click on it in the message.

OR

2.2. Receive such a message from other people in the chat.

3. Click on the image. It won’t open.

Workaround:

4. Refresh the page in the browser.

5. Click on the image - it would now open a popup with a bigger size image.

[j.jaffeux (Joffrey Jaffeux)]

That’s a recent regression afayk?

[pmusaraj (Penar Musaraj)]

Yes, I have seen this today as well. Pretty sure it’s a recent regression.

[Arkshine]

I think the issue is here:

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

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

After, it passes .chat-cooked element:

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

[j.jaffeux (Joffrey Jaffeux)]

Yes, sorry you dont see it, it’s a whisper but I have already pinged @david about it. I also think this is related to this recent change.

Thanks for checking, I didnt have the time yet to prove my theory

[david (David Taylor)]

Thanks @meglio and @Arkshine!

Limiting the normal “decorate cooked” to only the message content is intentional. But we did add some specific lightboxing logic which was supposed to handle the images. Looks like that wasn’t handling the case where the original image is swapped out for the optimized version.

Fix here:

FIX: Lightbox chat uploads immediately after optimize