Skip to content

fix(mdx): push last highlighted line when making highlight blocks #13156

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

Merged
merged 3 commits into from
Mar 31, 2025

Conversation

nikolovlazar
Copy link
Member

@nikolovlazar nikolovlazar commented Mar 29, 2025

DESCRIBE YOUR PR

I noticed that in code blocks where the last line is highlighted it doesn't get shown. There's a good example in the TanStack Start React guide:
image

The code block ends abruptly and it doesn't show how to wrap the defaultStreamHandler with Sentry's wrapStreamHandlerWithSentry. I checked the mdx page and noticed that there's only one missing line from the code block and it's also the highlighted one.

The changes I made ensure that we "flush" any started highlight groups at the end before returning the markup. The previous implementation relied on having a non-highlighted line that follows a highlighted one in order to "flush" the group.

This PR would fix any code blocks that highlight the last line(s). I'm not sure if there are other instances other than the TanStack Start one.

After the fix:

image

Additionally, this PR removes the bottom padding of codeblocks whose last child is a highlight:

image

IS YOUR CHANGE URGENT?

Help us prioritize incoming PRs by letting us know when the change needs to go live.

  • Urgent deadline (GA date, etc.): no deadline, but we're missing critical instructions in docs without this fix
  • Other deadline:
  • None: Not urgent, can wait up to 1 week+

SLA

  • Teamwork makes the dream work, so please add a reviewer to your PRs.
  • Please give the docs team up to 1 week to review your PR unless you've added an urgent due date to it.
    Thanks in advance for your help!

PRE-MERGE CHECKLIST

Make sure you've checked the following before merging your changes:

  • Checked Vercel preview for correctness, including links
  • PR was reviewed and approved by any necessary SMEs (subject matter experts)
  • PR was reviewed and approved by a member of the Sentry docs team

@nikolovlazar nikolovlazar requested review from Lms24 and Copilot March 29, 2025 12:17
Copy link

vercel bot commented Mar 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
develop-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 29, 2025 2:11pm
sentry-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 29, 2025 2:11pm
1 Skipped Deployment
Name Status Preview Comments Updated (UTC)
changelog ⬜️ Ignored (Inspect) Visit Preview Mar 29, 2025 2:11pm

Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes the issue where the last highlighted line in MDX code blocks wasn’t being pushed into the rendered output.

  • Added an index parameter to the reduce function
  • Modified the conditional logic to flush highlighted groups when the last item is reached
Comments suppressed due to low confidence (1)

src/components/codeHighlights/codeHighlights.tsx:47

  • Consider adding tests that specifically cover the case where the last line is highlighted to ensure that the flush logic handles this scenario as expected.
if (!isHighlightedLine || index === items.length - 1) {

@nikolovlazar nikolovlazar removed the request for review from Lms24 March 29, 2025 13:56
Copy link

codecov bot commented Mar 29, 2025

Bundle Report

Changes will increase total bundle size by 280 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
sentry-docs-server-cjs 10.6MB 91 bytes (0.0%) ⬆️
sentry-docs-client-array-push 9.44MB 189 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
1729.js -3 bytes 1.58MB -0.0%
../instrumentation.js -3 bytes 911.63kB -0.0%
9523.js -3 bytes 887.68kB -0.0%
../app/[[...path]]/page.js 100 bytes 538.95kB 0.02%

Files in ../app/[[...path]]/page.js:

  • ./src/components/codeBlock/code-blocks.module.scss → Total Size: 300 bytes

App Routes Affected:

App Route Size Change Total Size Change (%)
/[[...path]] 100 bytes 3.09MB 0.0%
view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
static/chunks/pages/_app-*.js -3 bytes 868.67kB -0.0%
static/css/*.css 95 bytes 18.64kB 0.51%
static/chunks/8931-*.js -3 bytes 397.42kB -0.0%
static/chunks/app/[[...path]]/page-*.js 100 bytes 77.85kB 0.13%
server/middleware-*.js 5.55kB 6.55kB 555.3% ⚠️
server/middleware-*.js -5.55kB 1.0kB -84.74%
static/VgjzlMgG-*.js (New) 77 bytes 77 bytes 100.0% 🚀
static/VgjzlMgG-*.js (New) 578 bytes 578 bytes 100.0% 🚀
static/5pkgtGrS5eCJ-*.js (Deleted) -578 bytes 0 bytes -100.0% 🗑️
static/5pkgtGrS5eCJ-*.js (Deleted) -77 bytes 0 bytes -100.0% 🗑️

Files in static/chunks/app/[[...path]]/page-*.js:

  • ./src/components/codeBlock/code-blocks.module.scss → Total Size: 309 bytes

Copy link
Member

@Lms24 Lms24 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for fixing this @nikolovlazar - great catch! (for context, I caused this in #12983)

I hope you don't mind but I'll merge this to get it out :)

@Lms24 Lms24 merged commit b76a1e8 into master Mar 31, 2025
13 checks passed
@Lms24 Lms24 deleted the fix/code-highlight-last-line-fix branch March 31, 2025 07:43
@github-actions github-actions bot locked and limited conversation to collaborators Apr 16, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants