CodingNic

Bookmarks, Highlights & Notes

Build the Annotations Experience

Bookmarks, Highlights & Notes 20 min read

Build the Annotations Experience

Build the Annotations Experience

Task

Bring bookmarks, Highlights, and Notes together so the user can move between annotation context and the Reader.

From Highlights or Notes, provide an Open Passage action that opens the correct Book and CFI range.

For a Highlight range:

ts
await rendition.display(highlight.cfiRange);

Keep the selected Book and annotation visible in the surrounding UI.

Handle missing or deleted annotations gracefully.

Test

Complete this workflow:

  1. highlight text
  2. add a note
  3. favorite the Highlight
  4. leave the Reader
  5. open Highlights
  6. open the passage
  7. return to the Reader

Verify the correct passage is displayed.

Checkpoint

Readly now has a connected annotations workflow rather than three isolated CRUD features.

Module Complete

Bookmarks, Highlights, Favorites, and Notes are persistent and connected to the Reader. Module 9 will make the Reader itself personal through saved preferences.