La imagen de lo que hay que lograr

Hola a todos,

Estoy creando una aplicación de cancionero en reaccionar, donde puedes agregar letras de canciones con acordes. Ahora estoy atascado en la programación del editor.

La idea es que cuando selecciono un texto en div editable en la parte superior, quiero poner un button que, en el momento en que hago clic, envuelve el texto seleccionado con <span class="songChord">the selected text here</span> que entonces puedo "empujar" en la base de datos.

Más tarde, quiero poder editar la letra, por lo que en el momento en que coloque el cursor en un texto previamente envuelto, quiero poder cambiar el <span class="songChord"> a algo como <span class="songChord2"> o eliminarlo en absoluto.

""**Algo así sucede con el editor de texto tradicional con la opción de agregar un hipervínculo al texto seleccionado y la opción de cambiar o eliminar ese hipervínculo en cualquier momento""

Necesito su ayuda para orientarme en la dirección correcta, cualquier idea o biblioteca.

PD. Adjunto una ilustración de lo que quiero lograr.

soy un poco nuevo en programacion