Come deve essere eseguita la selezione selectfinish / selectend?

Sto cercando di fare qualcosa ogni volta che un utente termina di effettuare una selezione, in modo implicito, sul primo evento mouseup dopo ogni selectstart evento, penso- sulla pagina. Voglio prendere quella selezione e avvolgerla in un elemento da designare tramite CSS. Ho presunto che l'API di selezione offrisse un evento per questo; tuttavia, non sembra.

Ho scelto il codice sorgente delle hypothes.is client di annotazione web, nel tentativo di capire in che modo ottengono il loro toolbar di apparire sull'utente selezionare l'azione fine . Sembra essere una questione di utilizzo di un osservatore tramite zen-observable .

La loro soluzione è la migliore / la più semplice / unica? Se è così, come funziona esattamente, è l'installazione; se no, che altro c'è?

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                                                                                                                                                                                                        */