I am new to React (not that experienced with frontend in general). I am looking for a solution to my simple spell checker where I want to submit a form with a textarea and highlight the wrong words, which may be hovered to show a correction suggestion.

I have tried the 'react-highlight-within-textarea' component, but it just highlights the words and seems to have some bugs when moving the cursor and writing more words.

I have tried the following code on a normal textarea:

const handleSelect = () => {
    const selection = window.getSelection();

    if (!selection.toString()) return;

    const edt = editorRef.current;
    const { selectionStart, selectionEnd } = edt;

    setSelected({
      start: selectionStart,
      end: selectionEnd,
      text: selection.toString()
    });
};

This code gives me the word clicked, but the textarea does not support HTML, so I cannot highlight any words. It also only works when double clicked (do not understand why). Moreover, I do not know how to make the hover behaviour as there does not seem to exist any event to handle that kind of behaviour.

Does anyone have any ideas as to how to achieve the desired behaviour?