Skip to content

fix: GFM alerts not displaying properly when links are present #19424

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

blink-so[bot]
Copy link
Contributor

@blink-so blink-so bot commented Aug 19, 2025

Fixes #19409

This PR fixes an issue where GitHub Flavored Markdown (GFM) alerts containing links were not rendering correctly as alerts, instead falling back to regular blockquotes.

Changes

  • Improved parsing logic: Enhanced the parseChildrenAsAlertContent function to properly handle GFM alerts that contain links
  • Better content filtering: The function now searches through all content elements to find the alert type pattern instead of assuming it's always the first element
  • Proper text cleanup: Alert type text is now properly removed from the rendered content
  • Added comprehensive tests: Created test cases covering various scenarios including alerts with links, multiple alerts, and edge cases
  • Added Storybook story: Added a new story to demonstrate GFM alerts with links

Technical Details

The issue occurred because when GFM alerts contained links, the parsing logic would get confused about the structure of the parsed content. The original code assumed the first element would always be a string containing the alert type (like [!NOTE]), but when links were present, the structure could be different.

The fix:

  1. Searches through all content elements to find the alert type pattern using regex
  2. Properly removes the alert type text from the content while preserving the rest
  3. Filters out null elements after processing
  4. Maintains backward compatibility with existing alert rendering

Testing

  • ✅ All existing tests pass
  • ✅ New comprehensive test suite covers various scenarios
  • ✅ Manual testing in Storybook confirms the fix works
  • ✅ TypeScript compilation passes without errors

Before/After

Before: GFM alerts with links would render as regular blockquotes
After: GFM alerts with links render correctly as styled alerts with proper coloring and formatting

The fix ensures that alerts like this now work correctly:

> [!NOTE]
> This template is centrally managed by CI/CD in the [coder/templates](https://github.com/coder/templates) repository.

Copy link

github-actions bot commented Aug 19, 2025

All contributors have signed the CLA ✍️ ✅
Posted by the CLA Assistant Lite bot.

Fixes #19409

Improved the parseChildrenAsAlertContent function to properly handle
GFM alerts that contain links by:

1. Searching through all content elements to find the alert type pattern
2. Properly removing the alert type text from the rendered content
3. Filtering out null elements after processing

This ensures that alerts with links render correctly as alerts rather
than falling back to regular blockquotes.

Co-authored-by: carryologist <158531215+carryologist@users.noreply.github.com>
@blink-so blink-so bot force-pushed the blink/fix-gfm-alerts-with-links branch from 9754c14 to 30a602c Compare August 19, 2025 17:58
blink-so bot and others added 4 commits August 19, 2025 18:01
Apply biome formatting to fix CI formatting checks.

Co-authored-by: carryologist <158531215+carryologist@users.noreply.github.com>
- Remove unused variables in Markdown component
- Fix import organization issues
- Remove debug file that was causing linting errors
- Apply biome formatting fixes

Co-authored-by: carryologist <158531215+carryologist@users.noreply.github.com>
Wrap Tooltip children in a div to fix TS2746 error where multiple
children were provided but single child was expected.

Co-authored-by: carryologist <158531215+carryologist@users.noreply.github.com>
Fixes biome formatting issue that was causing CI to fail.

Co-authored-by: carryologist <158531215+carryologist@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug: GFM alerts not displaying properly when links are present
0 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy