ReactJS onPaste event: how to determine if user has selected some of textarea's existing content

Question

I'm trying to re-create native textarea behavior in reactjs. Specifically, I'd like a user to be able to select/highlight some of the textarea's existing text, then paste new text over the selection.

My current react onPaste event handler:

onPaste(e) {
    let existingText = e.target.value;
    e.clipboardData.items[0].getAsString((str) => {
        this.setState({
            fieldValue: existingText + str
        });
    });
}

That will append the clipboard content to the existing textarea content, but if the user had selected some of the textarea, that selection doesn't get overwritten like it should.

Is there a way to determine whether some of the textarea content is selected/highlighted?

Thanks.

Answer 1

I figured it out :)

You can use native JS selectionStart and selectionEnd...

onPaste(e) {
    let existingText = e.target.value,
        selectStart = e.target.selectionStart,
        selectEnd = e.target.selectionEnd;

    e.clipboardData.items[0].getAsString((str) => {
        let newText = newText = existingText.substring(0, selectStart) + str + existingText.substring(selectEnd, existingText.length);

        this.setState({
             fieldValue: newText
        });
    });
}