Problem with highlighting search results using ReaderDecoration and cssSelector #60
Description
Hello. I am trying to implement highlighting of search results and notes inside the reader using ReaderDecoration, but I am facing an issue. I create a decoration using cssSelector together with progression, however the highlight works inconsistently: sometimes it is not visible at all or appears in the wrong position. My expectation is that after performing a search all matches should be highlighted correctly in the text, similar to Kindle or Apple Books behaviour, but currently it is unclear what approach is considered correct. I would like to understand whether using cssSelector with progression is the recommended way to highlight search results, or if DomRange or another locator structure should be used instead. I am also interested to know if there is an example or recommendation on how to properly highlight multiple matches at once and how best to connect user text selections with notes.I would be grateful for your help.
final decoration = ReaderDecoration(
id: 'search-css',
locator: Locator(
href: _activeSearch!.href,
type: 'application/xhtml+xml',
locations: Locations(
cssSelector: _activeSearch!.cssSelector,
progression: progression,
),
),
style: ReaderDecorationStyle(
style: DecorationStyle.highlight,
tint: ColorName.primary,
),
);