I'm looking to do something whenever a user finishes making a selection —essentially, on the first mouseup
event after every selectstart
event, I think— on the page. I want to take that selection and wrap it in an element to be styled via CSS. I presumed the Selection API offered an event for this; however, it doesn't seem to.
let selContainer = document.createElement('span')
span.classList.add('user-selection')
const wrapSelection = () => {
window.getSelection().getRangeAt(0).surroundContent(selContainer)
}
/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┃
┃ The Selection API only ┃
┃ affords these events: ┃
┃ ┃
┃ - selectionchange ┃
┃ - selectstart ┏━━━━━┫
┃ ┃issue┃
┗━━━━━━━━━━━━━━━━━━━━┻━━━━━┛
*/document.addEventListener('selectfinish', wrapSelection)/*┗━━━━┳━━━━━┛
┃
┃
no such
event */