Fix image lightbox in markdown tables with sticky headers

What does this MR do and why?

When the editor_sticky_table_headers feature flag is enabled, rendered markdown tables are replaced by the MarkdownTable Vue component, which re-renders cell content via v-html. The image lightbox click listeners attached by renderGFM remained on the replaced (detached) table nodes, so clicking an image inside a markdown table no longer opened the lightbox.

This MR re-initializes the image lightbox on the re-rendered cell nodes when the table component mounts, and destroys the per-container lightbox instance on teardown.

Same root cause as the reference popover bug fixed in !247575 (merged) (follow-up to it, but independently mergeable).

Screenshots or screen recordings

Before After

References

  • Related: !247575 (merged)
  • Feature flag: editor_sticky_table_headers (default off)

How to set up and validate locally

  1. Enable the feature flag: Feature.enable(:editor_sticky_table_headers)

  2. Create a comment or wiki page containing a markdown table with an uploaded image in a cell, e.g.

    | Image |
    |-------|
    | ![img](/uploads/....png) |
  3. Click the image inside the table — the lightbox should open.

  4. Verify images outside tables still open the lightbox.

MR acceptance checklist

Evaluated against the MR acceptance checklist.

Related to #593078, #585265 (closed)

Edited by Sascha Eggenberger

Merge request reports

Loading