Skip to content

Instantly share code, notes, and snippets.

View liaoleejun's full-sized avatar
🐢
Focusing

Lijun Liao liaoleejun

🐢
Focusing
View GitHub Profile
@Gozala
Gozala / Readme.md
Last active June 8, 2023 07:31
Range hilighting code using getClientRects API

Highlight Selection Ranges

Code here takes a DOM Selection Range instance and creates a highlighting for it by using getClientRects. Approach was inspired by marks although here function attempts to find nearest positioned parent element to the commonAncestorContainer and draw all the highilighting rectangles there, this avoids issues with an overflowing content.

Issues

  • Approach ignores z-index which isn't great as some element might be overlaying the selection in which case it should not appear, but it does if we use high z-index value. If we use low z-index value then some elements (possibly ones containing selection) might end up overlaying selection itself.
  • Rendered selections are scattered all o