Skip to content

fix(core): recognize arbitrary HTML anchors in broken anchor checker (AI-assisted) - #12430

Open
Sanjays2402 wants to merge 1 commit into
facebook:mainfrom
Sanjays2402:fix/broken-anchors-arbitrary-html-anchors
Open

Sanjays2402 wants to merge 1 commit into
facebook:mainfrom
Sanjays2402:fix/broken-anchors-arbitrary-html-anchors

Conversation

@Sanjays2402

Copy link
Copy Markdown

Fixes #9808

Problem

The onBrokenAnchors checker only knew about anchors explicitly collected through the useBrokenLinks() API (e.g. by the @theme/Heading component). Valid anchors written directly in MDX/React pages — such as <div id="anchor"/>, <h3 id="anchor">, or legacy <a name="anchor"/> — were never collected, so links targeting them were wrongly reported as broken anchors during docusaurus build, even though the anchors work fine in the browser.

Fix

During SSG (packages/docusaurus/src/client/serverEntry.tsx), anchor targets are now extracted from the fully rendered HTML page — the same source of truth browsers use for fragment navigation — and added to the collected anchors:

  • new extractHtmlAnchors() util (packages/docusaurus/src/client/extractHtmlAnchors.ts) collects the id attribute of any element plus legacy <a name="..."> anchors, with HTML-entity decoding, deduplication, and guards against false positives (data-id, text content, non-<a> name attributes)
  • docs updated (website/docs/api/docusaurus.config.js.mdx): onBrokenAnchors no longer claims anchors must be "declared with the Heading component"

This matches the direction discussed in the issue (automatically supporting <div id="anchor"/>, <a id="anchor"/>, etc. in Markdown files, not just headings).

Test plan

  • New unit tests packages/docusaurus/src/client/__tests__/extractHtmlAnchors.test.ts: 9 tests pass (vitest) — arbitrary element ids, legacy <a name>, mixed pages, dedup, empty anchors, false-positive guards (data-id, aria-labelledby, text content), HTML-entity decoding
  • tsc --noEmit --strict (with repo flags noUncheckedIndexedAccess, erasableSyntaxOnly): clean
  • oxfmt --list-different on changed TS files: clean
  • End-to-end logic simulation of the issue scenario: page HTML containing <a name="anchor"> + link #anchor — before the fix the checker's anchor-matching logic reports #anchor as broken (reproduces the issue); after adding the HTML-extracted anchors, #anchor and #custom-anchor resolve while a genuinely missing #missing anchor is still reported as broken
  • Full monorepo yarn build / jest suite not run here (deps not installed in this environment); CI will cover it

(AI-assisted)

…(AI-assisted)

The onBrokenAnchors checker only knew about anchors explicitly collected
through the useBrokenLinks() API (e.g. by the <Heading/> theme component),
so valid anchors such as <div id="anchor"/> or legacy <a name="anchor"/>
in MDX/React pages were wrongly reported as broken anchors.

During SSG, anchor targets (any element id attribute, plus legacy <a name>)
are now extracted from the rendered HTML page - the same source of truth
browsers use for fragment navigation - and added to the collected anchors.

Fixes facebook#9808
@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Sep 10, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

onBrokenAnchors reports named anchor tags as broken links

1 participant