Skip to content

Problem with highlighting search results using ReaderDecoration and cssSelector #60

Description

@AndriiFlutterDev

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,
  ),
);

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

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions