Skip to content

[Feature Request]: Highlights overview section in the page panel (TOC-style) #1521

Description

@perber

Context

Follow-up to Discussion #1354. The base request from that discussion — ==highlighted== markdown syntax rendering as <mark> plus an editor toolbar control — already shipped in #1421.

Still open is the second part:

Cherry on the cake would be an overview of all highlighted positions in the current article, probably implemented like the TOC.

Proposal

Add a "Highlights" section to the existing right-hand page panel (TocSidePanel / TocDropdownButton), listing every ==highlight== span on the current page and letting the reader jump to it.

This reuses the panel that already hosts On this page (headings) and Attached Media (attachments) — highlights become a third section in the same shared component, exactly the way attachments were added.

Behaviour

  • Collect all highlight spans from the current page, in document order.
  • Render them as a new section in the shared panel, using each highlight's text as the label (truncated for long spans).
  • Clicking an entry scrolls the highlight into view and briefly emphasises it so it's findable.
  • The section is always available — it simply renders only when the page contains at least one highlight. No setting/toggle.
  • showRightPane in PageViewer.tsx must also become true when highlights exist (currently showTocButton || attachments.length > 0).
  • Respect the existing "code fences / inline code are not markers" rule — the overview must not list == occurrences inside code.

Implementation sketch

  • Extraction: new helper next to extractTocEntries.ts, reusing its code-fence-skipping logic, returning the highlight spans (text + anchor id). Alternatively derive from the parsed tree in MarkdownPreview.tsx where remark-flexible-markers already runs.
  • Anchors: <mark> elements currently carry no id. Assign stable ids via a small rehype step (like rehypeLineNumber does for headings), or reuse the existing data-line scroll mechanism, so entries can link to a target.
  • UI: extend TocSidePanel.tsx and TocDropdownButton.tsx with the new section; wire the entries through PageViewer.tsx next to tocEntries / attachments.
  • Scroll spy: optional — reuse useTocScrollSpy so the active highlight is marked while scrolling, consistent with headings.
  • i18n: new key(s) in the viewer namespace (toc.highlights or similar), en/ + de/, key-parity test enforced.
  • Tests: Vitest unit tests for the extractor (document order, code-fence exclusion, nested formatting inside a highlight e.g. ==**bold**==, empty page → no entries) and a component test for click-to-scroll and for the section being hidden when there are no highlights.

Open questions

  • Exact scroll-into-view emphasis (reuse the heading flash, or a dedicated mark pulse?).

Activity

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions