Cross-browser selection UI injection flow:
- Listen for
mouseuponbody - When triggered, let s be
window.getSelection() - If
s.isCollapsed === false, return - Else, let r be
s.getRangeAt(0) - Create a new element e
- Call
r.surroundContents(e) e.innerHTMLande.textContentnow return useful values, and e’s coordinates can be used to inject UI into the page
To resolve: what element should e be? Or more accurately, what display property should it have? Possibly inline-block (inline mucks up if selection is across block elements, block mucks up selections within text nodes)
r.surroundContent, namely that it does not handle partial element selections. See MDNs explanation and solution.