/hypothesis-highlighter

Primary LanguageTypeScriptOtherNOASSERTION

hypothesis-highlighter

This is highlighter.ts from hypothesis/client extracted as a standalone library.

Also includes a stripped-down version of guest.ts, with most of the functionality removed (in particular, there is no UI, no communication with the sidebar or the host, no events).

The only functionality that is kept is

  • createAnnotation()
    • creates AnnotationData (suitable for storing on a backend)
    • manipulates the DOM to add elements and classes that enable the highlight to be displayed
  • loadAnnotations(annotations: AnnotationData[])
    • takes AnnotationData[] and modifies the DOM enabling the highlights to be displayed

Example usage:

const guest = new Guest(document.body)
const annotations = []
// select text
annotations.push(await guest.createAnnotation({highlight: true}))
// select another piece of text
annotations.push(await guest.createAnnotation({highlight: true}))
guest.destroy()
// annotations are suitable to be stored on a backend

const guest2 = new Guest(document.body)
guest2.loadAnnotations(annotations)