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.
- 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 highz-index
value. If we use lowz-index
value then some elements (possibly ones containing selection) might end up overlaying selection itself. - Rendered selections are scattered all o