Quiero construir un editor de texto único y simple. Con este código JS puedo obtener el texto seleccionado del área de texto, pero ¿cómo puedo darle estilo (peso de fuente, estilo de fuente, etc.) con botones (negrita, cursiva)?

 var selectedText = ''; function getText(e) { selectedText = (document.all) ? document.selection.createRange().text : document.getSelection(); alert(selectedText); } document.onmouseup = getText; if (!document.all) document.captureEvents(Event.MOUSEUP);

Experimenté agregando el siguiente código a la función getText. Funciona en algún momento, el texto seleccionado se envuelve en un lapso, el lapso obtiene las clases .new-span, bold-style y italic-style (btn onclick), pero aún así el estilo no se aplica al texto seleccionado en el textarea, el cambio no es visible.

 var selectedText = ''; function getText(e) { selectedText = (document.all) ? document.selection.createRange().text : document.getSelection(); var newSpan = document.createElement("span"); newSpan.classList.add("new-span"); newSpan.innerText += selectedText; console.log(newSpan); artParag.appendChild(newSpan); var boldStyleBtn = document.querySelector(".bold-style-btn"); var italicStyleBtn = document.querySelector(".italic-style-btn"); boldStyleBtn.addEventListener("click", function boldStyle() { newSpan.classList.toggle("bold-style"); alert(selectedText); }); italicStyleBtn.addEventListener("click", function italicStyle() { newSpan.classList.toggle("italic-style"); alert(selectedText); }); } document.onmouseup = getText; if (!document.all) document.captureEvents(Event.MOUSEUP);

(el CSS):

 .bold-style { font-weight: 700; } .italic-style { font-style: italic; }

¿Es esta una buena dirección? Gracias de antemano por su ayuda.