Any thoughts on how to best implement highlights for editable text?
There is quite a bit of prior work on this for "scroll to text highlight" in browsers.
Good discussion around it all here: https://github.com/mozilla/standards-positions/issues/194
Discussion
Sounds interesting, but what is the goal of it? Just to highlight text?
Swarm highlights
https://dergigi.com/2023/04/04/purple-text-orange-highlights/
The default "scroll to text" functionality in most browsers is dependent upon the text area being wrapped in div with an ID.
If you have control over the content of the page, it would certainly be possible to add div wrappers around a section of highlighted text.
I just read the article #[2]
I see you are referring to building Nostr reading client, text reading this functionality is 100% possible on web browsers.
The only important caveat that I can think of is that there would be to be some guard rails in place so readers can only highlight valid text. As adding HTML elements to the DOM could break things if not handled properly.
This shouldn't be a problem with pure text though. But multi-section or multi-paragraph highlighting could have some unique (but minor) challenges.
I'm a writer and software engineer so this sounds like a great idea!
Two other side problems:
1) Overlapping user highlights, this wouldn't be supported and there would be to be some algorithmic way to decide what text should receive highlights if multiple users have highlighted the text.
2) Editing of the document wouldn't be supported, as if the base text changes it would break all of the relative highlighting. Granted, if this is all built on Notes this wouldn't be relevant as "Notes are forever" 💎💍
Scroll to text fragment seems like a separate matter—the core feature is to highlight text, not scroll to it, yes? Like the crowdsourced highlights in Kindle?
I was involved in a project about ten years ago that involved highlighting arbitrary runs of HTML in an online Bible. The browser Selection and Range API was a mess back then—looks like it's come a long way, and may actually be reliable: https://developer.mozilla.org/en-US/docs/Web/API/Selection
If there are still any cross-browser gotchas, the Rangy JS library may help paper them over: https://github.com/timdown/rangy
We used the selection interface to inject spans into the DOM, then styled those spans with classes. We had a set of colors that customers could use to highlight arbitrary Bible passages. We even supported overlapping colors! 😅
Making it work on arbitrary sites with arbitrary styling will be a nightmare. For your use case, you could follow Kindle and do a simple underline or other non-color decoration.
Also, because the web evolves over time, you'll have the problem of text that shifts on you, getting edited, completely rewritten, or outright moved. (People forget that *Cool URIs Don't Change*!) There's only so much one can do about this.
In our application, we controlled the text, so we could use a simple addressing system based on chapter/verse number and character offset. You won't have it so easy. :(
I saw a presentation on this problem a number of years ago, and the advice from someone with experience was to "chunk the text and hash the chunks". If a chunk of text changes, the hash changes, and your highlights disappear.
Looks like there's been movement toward a robust Text fragment linking interface, but it's not widely supported: https://developer.mozilla.org/en-US/docs/Web/Text_fragments
Prior work you might look into for inspiration:
- "Purple" numbers (paragraph-level addressing): https://eekim.com/software/purple/purple.html
- Dissenter browser extension (a centralized Gab-led effort to add "a comment section for the internet"—might be defunct?)
Good luck!
Have you heard of https://dokie.li/ ?
It's a client based decentrliased editor for annotations by the solid people (https://solidproject.org/TR/2022/protocol-20221231)
There are many interesting parallels between what's going on here:
"The aims of the Solid project are in line with those of the Web itself: empowerment towards "an equitable, informed and interconnected society". Solid adds to existing Web standards to realise a space where individuals can maintain their autonomy, control their data and privacy, and choose applications and services to fulfil their needs."