hack: render highlights on canvas

[okjodom]

Made a first pass hacky fix for #73 Works for highlights within DOM paragraph nodes only.

For a more robust and inclusive impl that can highlight across multiple and diverse DOM nodes, we'd need to revisit range serialization and deserialization.

Notes:

• serializeRange happens after a highlight has been made on a page, so the plain information currently captured is what we'd need to reproduce after successful re-rendering of the highlight
• ISerializedRange needs to include common ancestor information

[vercel[bot]]

@okjodom is attempting to deploy a commit to the colighter Team on Vercel.

A member of the Team first needs to authorize it.

[okjodom]

Approving for now even it works for p tags only. There's still the issue of nested tags.

Instead of building this complex functionality ourselves, I think we can leverage existing libraries that cover most edge cases (serialisation, ranges, etc). I found this good library Rangy on npm. They have a Highlighter Module that we can use -> https://github.com/timdown/rangy/wiki/Highlighter-Module

You can play with a demo app built using the library here -> https://www.tomasr.com/rangy/demos/highlighter.html It perfectly solves this issue and I believe this serve us and help abstract the complexities of persisting highlights in the DOM as well as serialisation. I'll try to do an implementation of it after diving into their API docs

concept ack. Specifically, it'd be great to get a library replacement of serializeRange and deserializeRange functions, which might require redefinition of ISerializedRange.

[okjodom]

Approving for now even it works for p tags only. There's still the issue of nested tags. Instead of building this complex functionality ourselves, I think we can leverage existing libraries that cover most edge cases (serialisation, ranges, etc). I found this good library Rangy on npm. They have a Highlighter Module that we can use -> https://github.com/timdown/rangy/wiki/Highlighter-Module You can play with a demo app built using the library here -> https://www.tomasr.com/rangy/demos/highlighter.html It perfectly solves this issue and I believe this serve us and help abstract the complexities of persisting highlights in the DOM as well as serialisation. I'll try to do an implementation of it after diving into their API docs

concept ack. Specifically, it'd be great to get a library replacement of serializeRange and deserializeRange functions, which might require redefinition of ISerializedRange.

@Extheoisah if you have explored the lib to a significant extent, try the replacement I propose here. I expect it to work out of the box because persistence of highlights is solved by our data model

[okjodom]

@Extheoisah, @BalogunofAfrica, I skimmed the rangy library this evening to closer familiarize with their impl of range selection and highlighting. I believe it's going to take some work to borrow from the lib and apply to colighter extension. In particular, this logic section is most relevant to our need

If / when you take a look at this, please be sure to share notes here :)