fix(ContentToc): correct highlight feature for custom depth headers

[tratteo]

🔗 Linked issue

Resolves #5967

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

 

In the ContentToc component, the useScrollSpy was attached to h2 and h3 headings independently of the links passed in the props or the content/build/markdown/toc/depth configuration entry of Nuxt Content.
This caused the height of the indicator to be "wrong".

The fix was to instruct the spy to only look for the actual links passed in the props.

📝 Checklist

 

 

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 63a3cd37-d618-4f82-8daa-690d0e713c42

📥 Commits

Reviewing files that changed from the base of the PR and between b03875b and e6e9f9c.

📒 Files selected for processing (1)

• src/runtime/components/content/ContentToc.vue

---

📝 Walkthrough

Walkthrough

Replaces two Nuxt lifecycle callbacks that queried the DOM for all h2, h3 headings with a shared refreshHeadings() function. refreshHeadings() flattens props.links to a list of link ids, calls updateHeadings([]) when there are no links, and otherwise queries the DOM only for elements matching #${CSS.escape(id)} for each id. The component captures the unregister functions returned by page:loading:end and page:transition:finish and calls them in onUnmounted. No public API, props, or types were changed.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix(ContentToc): correct highlight feature for custom depth headers' clearly describes the main change: fixing the ContentToc highlight feature for custom depth headers.
Description check	✅ Passed	The PR description is related to the changeset, explaining the bug in ContentToc's useScrollSpy and how it was fixed by restricting it to links in props.
Linked Issues check	✅ Passed	The PR successfully addresses issue #5967 by restricting useScrollSpy to only the actual links passed in props, fixing the indicator height computation when TOC depth excludes certain heading levels.
Out of Scope Changes check	✅ Passed	All changes in ContentToc.vue are directly scoped to the linked issue: refactoring lifecycle hooks and restricting DOM queries to TOC-relevant headings only.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/runtime/components/content/ContentToc.vue`:
- Around line 196-213: The page hook handlers register identical logic and can
throw when props.links is empty and leak when the component unmounts; refactor
by extracting the logic into a single handler function (e.g.,
computeHeadingsOrUpdate) that calls flattenLinks(props.links || []) and returns
early if the flattened array is empty (avoid calling document.querySelectorAll
with an empty selector), use CSS.escape when building the selector, register
that single handler for both "page:loading:end" and "page:transition:finish" via
nuxtApp.hooks.hook, store the returned unregister functions and call them in
onUnmounted to avoid leaks, and fix lint issues by using single quotes, removing
extra semicolons, and removing trailing commas to satisfy pnpm run lint;
reference functions/idents: nuxtApp.hooks.hook, flattenLinks, updateHeadings,
props.links, onUnmounted.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8aa94222-067d-4aca-a8c4-8e83e70dacf9

📥 Commits

Reviewing files that changed from the base of the PR and between f1b5892 and c1b4929.

📒 Files selected for processing (1)

• src/runtime/components/content/ContentToc.vue

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6282

commit: e6e9f9c

[benjamincanac]

Would you mind putting back imports in their original order?