Address MarkdownTable regressions: vivified items, attributes, nesting

What does this MR do and why?

Address MarkdownTable regressions: vivified items, attributes, nesting

  • Re-use the same DOM cells from the existing table, so we don't unvivify anything, and so that later vivifications for already-grabbed DOM references Just Work(tm).
    • Also avoids reparsing/mXSS concerns.
    • Also fixes cell alignment.
  • Don't grab nested table elements so they don't duplicate.
  • Pass through align/style for header elements, even though these don't actually work right now :hide_the_pain:.

FF'd, no changelog.

References

See also:

This MR covers those two single-case fixes (and much more) by fixing the problem at the root, so we undo the single-case fixes (manually reinitialising popovers/lightboxes), though keep the refactors those MRs brought.

Screenshots or screen recordings

Before After

You can ignore my confused hovering over @flightjs and @gitlab-org, those are groups and don't have popovers anyway

How to set up and validate locally

  1. Check out current master.

  2. Enable markdown_sortable_table_columns and editor_sticky_table_headers in your GDK.

  3. Create an issue or MR that reproduces some of the issues shown above. Here's my text verbatim, but you'll need to pop an image in you have for the lightbox fix:

    hello #1 @root 
    
    | hello | hello ok this is right-aligned |
    | - | -: |
    | #1 | @root |
    | #2 | @flightjs  |
    | #3 | @gitlab-org |
    | #4 | wow okay right aligned very good very nice very scrumptious |
    
    - [x] um
    
    | a | b |
    | - | - |
    | [ ] | um |
    | [x] | yay |
    
    <table>
    <tr>
    <th>if my memory</th>
    <th>serves me correctly</th>
    </tr>
    <tr>
    <td>ok</td>
    <td>ye</td>
    </tr>
    <tr>
    <td>
    
    ```mermaid
    packet
    title UDP Packet
    +16: "Source Port"
    +16: "Destination Port"
    32-47: "Length"
    48-63: "Checksum"
    64-95: "Data (variable length)"
    ```
    
    </td><td>
    
    ![labradog](/uploads/d5492dcbd062f72f59411ee410e61460/labradog.jpg){width=614 height=600}
    
    </td>
    </tr>
    </table>
    
    <table>
    <thead>
    <tr>
    <th>outer table</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>with two rows: this one, and a nested table</td>
    </tr>
    <tr>
    <td>
    
    | nested | table |
    |--------|-------|
    | two columns | two rows |
    
    </td>
    </tr>
    </tbody>
    </table>
  4. Observe what's broken on master. Nested table duplications, no "logged-in user highlight", no issue/MR popovers, no table cell alignment (note that header alignment is broken across all of GitLab on master without FFs!), nested table duplication, no image lightboxing, no task table item checking, no Mermaid diagram.

  5. Check out this branch. All the above fixed!

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Asherah Connor

Merge request reports

Loading