How to replace selected text in input with an addition to it?

Question

React

Good evening. I am making an editor, when selecting, I need to replace, say, MY TEXT with MY TEXT2, I was able to do this, but the problem is that if there are 2 or 3 such phrases, then it takes the first match. I do not understand how to implement this through getSelection and work with the selected area itself. How to replace the selected phrase, and not the first match?

import {url} from "../../serverConfig";
import GetTextEditor from "../lowLvlComponents/textEditor/textEditor";
import styles from '../../pages/css/articles/createArticle.module.css';
import { useState } from 'react';


export default function CreateArticle() {

    const [input, setInput] = useState();
    const [data, setData] = useState();

    return (
        <div className={styles.createArticle}>
            <div className={styles.title} onClick={() => input.value =
                input.value.replace(
                    data, `<b>${data}</b>`
                )}>Новая статья</div>
            <form action={`${url}/createArticle`}>
                <input type="text" placeholder={'Название'} onSelect={() => 
                    setData(document.getSelection().toString())
                } onClick={(e) => 
                    setInput(e.target)} onMouseDown={() => false}/>
                <input type="text" placeholder={'Ссылка на превью-картинку'} />
                <input type="text" placeholder={'Превью-текст'} />
                <GetTextEditor />
                <div className={styles.submitBox}>
                    <button>Создать</button>
                </div>
            </form>
        </div>
    )

}

Thank you.

Answer 1

This is not serious, there is a solution to this problem right in the documentation...
https://developer.mozilla.org/ru/docs/Web/API/Sele...