edit text that was wrapped in html tag before in an editable container

Question

The image of what need to achieve

Hi everyone,

I am building a songbook app in react, where you can add song's lyrics with chords. Now I am stuck in programing the editor.

The idea is that when I select some text in editable div at the top I want to put a button which, the moment I click it wraps the selected text with <span class="songChord">the selected text here</span> which then I can "push" in database.

Later I want to be able to edit the lyrics, so the moment I put my cursor in a previously wrapped text want to be able to change the <span class="songChord"> to something like <span class="songChord2"> or remove it at all.

""**something like this happens with traditional text editor with the option to add hyperlink to the selected text and the option to change or remove that hyperlink anytime""

I need your help guys to point me in the right direction, any idea or library.

PS. I've attached an illustration of what I want to achieve

I'm a bit new in programming