Skip to content

Commit 402483b

Browse files
fix (docs) Render integartions inside highlight block (#15388)
<!-- Use this checklist to make sure your PR is ready for merge. You may delete any sections you don't need. --> ## Fix integrations wrapper visibility in code blocks with line highlighting ### Problem The integrations array wrapper (`integrations: [` and `],`) wasn't showing/hiding correctly in the Vue quickstart and other guides that use line highlighting syntax (e.g., `{3, 12-41}`). ### Root Cause When code blocks have line highlighting, the `makeHighlightBlocks` function wraps highlighted lines in `<HighlightBlock>` components. This changed the DOM structure so that lines were no longer direct children of the `<code>` element, but nested inside containers. The runtime logic in `updateElementsVisibilityForOptions` assumed lines were direct children, causing `allLines.indexOf(openLine)` to return `-1` and breaking the wrapper show/hide logic. ### Solution Added a `getAllCodeLines` helper function that properly traverses the code block structure, extracting lines from both: - Direct children (non-highlighted lines) - Nested children inside HighlightBlock containers (highlighted lines) This ensures the integrations wrapper visibility logic works correctly regardless of whether the code block uses line highlighting. ### Files Changed - `src/components/onboarding/index.tsx` - Added helper to handle nested line structure in highlighted code blocks ## 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.): <!-- ENTER DATE HERE --> - [ ] Other deadline: <!-- ENTER DATE HERE --> - [x] 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](https://github.com/orgs/getsentry/teams/docs) ## LEGAL BOILERPLATE <!-- Sentry employees and contractors can delete or ignore this section. --> Look, I get it. The entity doing business as "Sentry" was incorporated in the State of Delaware in 2015 as Functional Software, Inc. and is gonna need some rights from me in order to utilize my contributions in this here PR. So here's the deal: I retain all rights, title and interest in and to my contributions, and by keeping this boilerplate intact I confirm that Sentry can use, modify, copy, and redistribute my contributions, under Sentry's choice of terms. ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/) --------- Co-authored-by: getsantry[bot] <66042841+getsantry[bot]@users.noreply.github.com>
1 parent 7cd37ed commit 402483b

File tree

1 file changed

+21
-1
lines changed

1 file changed

+21
-1
lines changed

src/components/onboarding/index.tsx

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,27 @@ export function updateElementsVisibilityForOptions(
239239
const codeBlock = openLine.closest('code.code-highlight');
240240
if (!codeBlock) return;
241241

242-
const allLines = Array.from(codeBlock.children) as HTMLElement[];
242+
// Helper function to get all code lines, including those nested in HighlightBlocks
243+
const getAllCodeLines = (container: Element): HTMLElement[] => {
244+
const lines: HTMLElement[] = [];
245+
Array.from(container.children).forEach(child => {
246+
const el = child as HTMLElement;
247+
// If it's a highlight-block, get lines from inside it
248+
if (el.classList.contains('highlight-block')) {
249+
// Lines are nested in highlight-block > div (CodeLinesContainer)
250+
const linesContainer = el.querySelector('div');
251+
if (linesContainer) {
252+
lines.push(...(Array.from(linesContainer.children) as HTMLElement[]));
253+
}
254+
} else {
255+
// Regular line, add it directly
256+
lines.push(el);
257+
}
258+
});
259+
return lines;
260+
};
261+
262+
const allLines = getAllCodeLines(codeBlock);
243263
const openIndex = allLines.indexOf(openLine);
244264

245265
// Find the matching close line in the same code block

0 commit comments

Comments
 (0)