fix(preview): render shoutouts with type-specific colors#868
Merged
Conversation
HAST produces whitespace text nodes between block elements, so Children.toArray(children)[0] was '\n' instead of the marker <p>. getAlertKind returned null for every blockquote, causing all shoutouts to fall back to plain <blockquote> without styling. Fix getAlertKind to skip whitespace-only strings when searching for the first child, and derive contentChildren by findIndex on the first <p> so content starts correctly after the marker regardless of leading nodes. Also adds: - normalizeMarkdownShoutouts: converts :::type blocks to GH-style alerts - index.css: shoutout variant styles (info/success/warning/error) - E2E test covering all four variants plus the note alias - Makefile: run-e2e-local-fast target (skip UI build, optional GREP filter) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR fixes Markdown “shoutout” (alert/callout) rendering in the UI preview by correctly detecting GitHub-style alert markers despite HAST-inserted whitespace nodes, and adds normalization/styling/tests so :::type … ::: blocks render as color-coded shoutouts.
Changes:
- Add
normalizeMarkdownShoutouts()to convert:::typeblocks into GitHub-style blockquote alert markers (e.g.> [!INFO]). - Update
MarkdownPreviewblockquote rendering to detect alert markers reliably and render them as styled shoutout components with type-specific classes. - Add shoutout variant CSS (info/success/warning/error), an E2E test covering variants + the
notealias, and a Makefile target to run local E2E faster.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/leafwiki-ui/src/index.css | Adds scoped .markdown-shoutout styles and per-variant visual treatment. |
| ui/leafwiki-ui/src/features/preview/normalizeMarkdownShoutouts.ts | Introduces markdown pre-processing to convert :::type blocks into GH-alert-style blockquotes. |
| ui/leafwiki-ui/src/features/preview/MarkdownPreview.tsx | Fixes alert detection (skipping whitespace nodes) and renders typed shoutouts instead of plain blockquotes. |
| Makefile | Adds run-e2e-local-fast target (optional GREP) and updates help/phony list. |
| e2e/tests/page.spec.ts | Adds E2E coverage for all shoutout variants + note alias and validates styling is applied. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
- Filter whitespace-only text nodes from contentChildren so the shoutout content div contains no superfluous DOM text nodes - Spread ...props onto <aside> to match the non-alert <blockquote> path and avoid silently dropping rehype-pipeline attributes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
perber
added a commit
that referenced
this pull request
Apr 25, 2026
* fix(preview): render shoutouts with type-specific colors HAST produces whitespace text nodes between block elements, so Children.toArray(children)[0] was '\n' instead of the marker <p>. getAlertKind returned null for every blockquote, causing all shoutouts to fall back to plain <blockquote> without styling. Fix getAlertKind to skip whitespace-only strings when searching for the first child, and derive contentChildren by findIndex on the first <p> so content starts correctly after the marker regardless of leading nodes. Also adds: - normalizeMarkdownShoutouts: converts :::type blocks to GH-style alerts - index.css: shoutout variant styles (info/success/warning/error) - E2E test covering all four variants plus the note alias - Makefile: run-e2e-local-fast target (skip UI build, optional GREP filter) * fix(preview): trim whitespace nodes from shoutout content, forward props - Filter whitespace-only text nodes from contentChildren so the shoutout content div contains no superfluous DOM text nodes - Spread ...props onto <aside> to match the non-alert <blockquote> path and avoid silently dropping rehype-pipeline attributes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
HAST produces whitespace text nodes between block elements, so Children.toArray(children)[0] was '\n' instead of the marker
. getAlertKind returned null for every blockquote, causing all shoutouts to fall back to plain