DEV Community

Discussion on: How would you build a Medium-esque highlighting feature?

Collapse
 
albertofdzm profile image
Alberto Fernandez Medina

I think one of the most important things to take care of is how you store the content in the DB. For example, store the posts in some kind of text field with a bunch of markdown text or use some other protocol or format like WordPress using a mix of HTML and shortcodes (keywords). Ghost has changed the way it stores its content from a whole huge markdown field to a structured object using the mobiledoc standard.

From here you can start thinking how that info is going to change.

My guess is that Medium stores the position of the user annotations (first and last char pos) but the platform stores the content in a structured way like mobiledoc, so you can expose a link to a concrete paragraph of that content. By this way, if the author edits the article you can detect if the annotated paragraph has changed and opt to remove (or not) the annotation display int he content (the reference to that paragraph on the shared annotation links would still working).

Without a structured object having only a huge text field I would reference the whole article in the shared annotations link and I would invalidate the display of previous annotations if the author edits it.

For the collisions, Kindle does that stuff too saying how many people have highlighted some text.

I think that the best approach is to have some rules that would trigger a visual annotation in the content, like to have at least 5 annotations between similar ranges/positions and once this condition has being accomplished get the minimum start position and the maximum end position of that annotation group to generate a display annotation avoiding generate annotations with more length than 250 chars (for example).

So you would have the real annotations made by users in one place and display annotations (generated from the real ones) for visual purposes in another place, the last ones could even be referenced by URL.