3 ms·
This is really great. I think we're going to use this for helping us highlight parts of the YC application that sticks out to the partners. Very interesting to
by kevin 11y ago
This is really great. I think we're going to use this for helping us highlight parts of the YC application that sticks out to the partners. Very interesting to see that what you actually store in local storage.
[{"startOffset":35,"endOffset":42,"startContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);0","endContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);0"},{"startOffset":32,"endOffset":7,"startContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1);10","endContainerPath":"html>body>div:nth-of-type(1)>div>p:nth-of-type(1)>code:nth-of-type(3);0"}]
One thing I think we might tweak for ourselves is to also store a copy of the string in there.
Thank you so much for sharing! I bet people would love an example showing how to use this to sync highlighted examples across user accounts. Hopefully, someone will do a Show HN of that!
- callmevlad 11y agoIt seems like using a tree-index based path, this serialization format would only work with purely static content. If you have a change to the underlying content (e.g. adding a new paragraph before a selection), there doesn't seem to be enough information in the serialized path to select the right part of the page.
- bowlingx 11y agoThat's correct. But it is possible to specify a context container where the highlighting is executed so if you change parts of the document (like around this container) it doesn't change the relative path. Example: <html> <body> <article id="myContextContainer"> <p>...</p> </article> </body> </html> If you add or change words and paragraphs of course, that would make the highlighting unstable. You could also restrict the marking to a specific paragraph only (and set the context accordingly). It always depends on the application this library is used for. But if anyone has a good idea how to compensate that I'm open for suggestions :) Thank you for your feedback.