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?).
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:
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
showRightPanein PageViewer.tsx must also become true when highlights exist (currentlyshowTocButton || attachments.length > 0).==occurrences inside code.Implementation sketch
remark-flexible-markersalready runs.<mark>elements currently carry no id. Assign stable ids via a small rehype step (likerehypeLineNumberdoes for headings), or reuse the existingdata-linescroll mechanism, so entries can link to a target.tocEntries/attachments.useTocScrollSpyso the active highlight is marked while scrolling, consistent with headings.viewernamespace (toc.highlightsor similar),en/+de/, key-parity test enforced.==**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