Resize a span highlighting a word to include multiple words of a text by dragging the span element

I want to resize the size of a span by dragging its border following the text characters.

Here’s an image to better understand:

I leave a stackblitz using React: https://stackblitz.com/edit/react-qvvqfe?file=src/App.js

As I said I’m using React, but a solution using Javascript alone it’s fine.

Here’s what I tried:

since I know the offset of the mention in the text like so:

{
   startPos: 5,
   endPos: 10
}

I just changed the mention positions to make the span larger and rerendered the document content. I’m doing this using an onClick event because I’m kind of lost when including the drag part.