CSS transform selected text - NEEDS WORK

transform-selected-text.js

// From browser source/snippets
// TODO: use selection API
// IDEA: selecting -> uppercase => voices -> yelling one word at a time (AWS?)

//noting line breaks in chrome devtools between selection and post slice

//FIXME: better attach
document.styleSheets[document.styleSheets.length - 1].addRule("::selection", "background: red !important; color: pink !important; text-transform: uppercase !important");

//get whole parent
document.addEventListener('selectionchange', e => {

    console.clear();
    slice = document.getSelection().toString();
    if (slice !== "") {
        parent = document.getSelection().getRangeAt(0).commonAncestorContainer.textContent;
        preSlice = parent.slice(0, parent.indexOf(slice))
        postSlice = parent.slice(parent.indexOf(slice) + slice.length, parent.length - 1)
//        otherStyle = 'font-weight: normal';
//        sliceStyle = 'font-weight: bold';
//         string = preSlice + '{{ ' + slice.toUpperCase() + ' }}' + postSlice;
        string = preSlice + slice.toUpperCase() + postSlice;
        console.log(string)
//         string = "%c"+ preSlice + '%c' + slice + '%c' + postSlice;
//         console.log(string, otherStyle, sliceStyle, otherStyle)

    }
})