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
- Closes Image lightbox does not open for images inside ... (#607537 - closed).
- See Render plain HTML table (no GlTable) Vue compon... (!239559 - merged).
See also:
- Fix reference popovers in markdown tables with ... (!247575 - merged)
- Fix image lightbox in markdown tables with stic... (!248011 - merged)
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
-
Check out current
master. -
Enable
markdown_sortable_table_columnsandeditor_sticky_table_headersin your GDK. -
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> {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> -
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 onmasterwithout FFs!), nested table duplication, no image lightboxing, no task table item checking, no Mermaid diagram. -
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.