Skip to content

fix(ui): in-page anchor navigation for headings#605

Open
dgrissen2 wants to merge 1 commit intobacknotprop:mainfrom
dgrissen2:bug/anchor-problems
Open

fix(ui): in-page anchor navigation for headings#605
dgrissen2 wants to merge 1 commit intobacknotprop:mainfrom
dgrissen2:bug/anchor-problems

Conversation

@dgrissen2
Copy link
Copy Markdown
Contributor

Summary

  • Intercept #-prefixed link clicks in InlineMarkdown and smooth-scroll
    within the sticky scroll viewport. The native browser jump didn't work
    because plan content lives inside a scrollable container, not the
    document root.
  • Expose both a canonical slug and a legacy slug per heading via
    data-anchor-aliases so previously shared URLs keep resolving. Canonical
    collapses runs of separators; legacy preserves them.
  • Handle hashchange and the initial hash so direct links land on the
    right heading after load.
  • New packages/ui/utils/anchors.ts with normalizeAnchorText,
    decodeAnchorHash, slugifyHeadingAnchor, legacySlugifyHeadingAnchor,
    getHeadingAnchorAliases + unit tests.
  • Thread onNavigateAnchor through BlockRenderer, AlertBlock,
    Callout, TableBlock, TablePopout, proseBody.
  • Ignore .serena/ tooling state.

Test plan

  • bun test packages/ui/utils/anchors.test.ts
  • Render a plan with ## Part I: Overview: Scope and click a TOC link
    like [Scope](#part-i-overview-scope) — scrolls smoothly, sticky
    header isn't overlapping the target.
  • Open a shared URL that uses the legacy double-hyphen slug
    (#part-i--overview--scope) — still resolves via alias.
  • Load a page with #some-heading in the URL directly — auto-scrolls
    on first render.
  • Anchor links inside tables, callouts, alerts, and blockquotes all
    navigate in-page.

Intercept `#`-prefixed link clicks and smooth-scroll inside the sticky
scroll viewport instead of letting the browser jump (which broke when the
content lives inside a scrollable container). Headings now expose both a
canonical slug and a legacy slug via `data-anchor-aliases` so older shared
URLs keep resolving. Also listen for `hashchange` / initial hash so direct
links land on the right heading.

Adds `packages/ui/utils/anchors.ts` with `normalizeAnchorText`,
`decodeAnchorHash`, `slugifyHeadingAnchor`, `legacySlugifyHeadingAnchor`,
and `getHeadingAnchorAliases` (+ tests).

Also ignore `.serena/` tooling state.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant