Text selections through JS

text-selection.js

// Url to test on: https://the-internet.herokuapp.com/tinymce

function selectorTest() {
    const iframeDocument = document.querySelector('iframe').contentDocument
    const textNode = iframeDocument.querySelector('#tinymce p')
    const text = textNode.firstChild
    let selection = iframeDocument.getSelection()

    // Remove all existing ranges first
    selection.removeAllRanges()
    
    // Create a range based on the firstChild (text) of the <p> element
    const startPos = Math.round(text.length / 2)
    const endPos = startPos + 2
    const range = iframeDocument.createRange()

    range.setStart(text, startPos)
    range.setEnd(text, endPos)
    selection.addRange(range)

    // Do some selection edits
    let cursor = startPos

    let interval = setInterval(function() {
        if (cursor === endPos) {
            clearInterval(interval)
        }

        selection.modify('extend', 'forward', 'character')
        cursor += 1
    }, 1000)
}