Fix broken anchor link handling in read_more.js
-
Please check this box if this contribution uses AI-generated content (including content generated by GitLab Duo features) as outlined in the GitLab DCO & CLA. As a benefit of being a GitLab Community Contributor, you receive complimentary access to GitLab Duo.
What does this MR do and why?
Fix broken anchor link handling in read_more.js.
When clicking an anchor link that targets a heading with multibyte characters (e.g., Japanese) in the README preview, the project page fails to load due to a SyntaxError in read_more.js.
This MR uses CSS.escape() to safely handle special characters in anchor link IDs, ensuring that the page renders correctly even when the README contains multibyte headings.
Fixes the following issue: Project page fails to load due to read_more.js ... (#558912 - closed)
References
- JS standard for safe selectors: CSS: escape() static method
Screenshots or screen recordings
| Before | After |
|---|---|
| before_syntax_error_gdk_2025-08-07_022144 | fixed_syntax_error_gdk_2025-08-07_022144 |
SyntaxError appears in the browser console before fix, but the page does complete loading and renders as expected. #558912 (comment 2672979880)
How to set up and validate locally
- Create a project with a project description and a README that includes a multibyte-character heading, such as
## 日本語. - On the project’s overview page, click the anchor link in the README preview that points to that heading.
- Confirm that the page loads completely and scrolls to the intended section without throwing a
SyntaxError.
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.
I'm still new to the MR acceptance checklist and may not have filled it out properly.
If there are any problems, I’d appreciate any guidance or suggestions!