Shift anchor icon to the left for headers inside a summary tag
requested to merge 463329-anchor-links-overlays-section-expander-when-using-heading-in-details-summary into master
What does this MR do and why?
When a user adds an h1, h2, h3, h4, h5 or h6 to their markdown/RTE content, we automatically render an icon link to the left of it that navigates to the skiplink for that header.
When the user has placed this header inside a <summary>
tag, the skiplink and the summary toggle currently clash. This MR shifts the link icon to the left in this case so there is room for both.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Before | After |
---|---|
Screen_Recording_2024-08-26_at_11.39.36 | Screen_Recording_2024-08-26_at_11.38.52 |
How to set up and validate locally
- Check out this branch
- Create an issue in the GDK
- Add the following text to the issue description, then save it:
<details>
<summary>
# I'm an h1
</summary>
Hello, World!
</details>
<details>
<summary>
## I'm an h2
</summary>
Hello, World!
</details>
<details>
<summary>
### I'm an h3
</summary>
Hello, World!
</details>
<details>
<summary>
#### I'm an h4
</summary>
Hello, World!
</details>
<details>
<summary>
##### I'm an h5
</summary>
Hello, World!
</details>
<details>
<summary>
###### I'm an h6
</summary>
Hello, World!
</details>
- Hover over the headings. The link icon will display to the left of the summary toggle and will be independently clickable.
Related to #463329 (closed), #469616 (closed)
Edited by Chad Lavimoniere