Fix reference popovers in markdown tables with sticky headers

What does this MR do and why?

Fixes reference popovers (work items, issues, MRs, milestones, commits) not appearing for links inside markdown tables when the editor_sticky_table_headers feature flag is enabled.

Root cause: renderGFM collects popover reference elements and attaches mouseenter listeners to them. However, when the sticky table headers feature flag is enabled, renderMarkdownTables replaces each rendered markdown <table> with a MarkdownTable Vue component that re-renders cell content via v-html, creating new DOM nodes. The popover listeners end up on the detached original nodes, so popovers never trigger inside tables.

Fix:

  • Extract the lazy popover initializer from render_gfm.js into a shared module behaviors/markdown/init_popovers.js
  • In MarkdownTable, re-initialize reference popovers on the freshly rendered content in the mounted() hook
  • Rows are keyed by rowIndex, so Vue moves (not recreates) nodes when sorting and the listeners survive re-sorting

Screenshots or screen recordings

Before After
before after

How to set up and validate locally

  1. Enable the feature flag: :editor_sticky_table_headers

  2. Create a comment or description containing a markdown table with a work item reference in a cell, e.g.:

    | Item | Ref |
    | ---- | --- |
    | Foo  | #1  |
  3. Hover the reference inside the table and verify the popover appears.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist.

Related to #593078, #585265 (closed)

Edited by Sascha Eggenberger

Merge request reports

Loading