How to autocomplete brackets in HTML textarea?

I need to autocomplete brackets in an HTML textarea. For example, if the user types ( in the textarea, the value of the textarea should be () (and it is better if the cursor will be in the middle of the brackets; I also need to know how to do that.)

I tried the following:

let editor = document.getElementById("editor");

editor?.addEventListener("keypress", (ev) => {
    if(ev.key == "(") {
        editor.value += ")";
    }
});

<textarea id="editor" cols="30" rows="10"></textarea>

This is what I am getting:

This is what I am expecting to get:

>Solution :

Please use snippets to describe your problems, it helps the community to identify the problem quickly and test it without having to reproduce on our own. Here I’m using the "input" event, detecting the last typed character and acting when it is "(". You can move the carret using selectionStart and selectionEnd

const editor = document.getElementById("editor");

editor?.addEventListener("input", e => {
 if (e.data === "(") {
   editor.value += ")";
   editor.selectionStart = editor.value.length - 1;
   editor.selectionEnd = editor.value.length - 1;
 }
});

<textarea id="editor" cols="30" rows="10"></textarea>