How can I get the user’s selection’s center anchor point position (x, y) relative to the document/window?

How can I get the user’s selection’s center anchor point position (x, y) relative to the document/window?

I only know how to get selected nodes using window.getSelection(). But not the position:

example use case

Answer

You can use getBoundingClientRect() for this purpose. To get the center point, add the half of width to the horizontal distance from the left edge of the screen.

let coords = window.getSelection().getRangeAt(0).getBoundingClientRect()
let center = coords.x + (  coords.width / 2 )

To get the accurate vertical position from the top of the document.

coords.y + window.scrollY