Para fazer isso você precisa colocar o texto do usuário em uma tag HTML que tenha o atributo contenteditable="true"
ao invés de um <textarea>
. Depois basta pegar o texto selecionado pelo usuário e colocar entre tags que alterarão o seu estilo.
Para pegar o texto selecionado você pode usar o window.getSelection().toString()
.
O código ficaria mais ou menos assim:
function setStyle(property, value) {
// Pega o objeto que contém o texto selecionado
const selection = window.getSelection();
// Testa se existe alguma seleção
if (selection.rangeCount) {
// Cria o elemento que terá o texto selecionado com o estilo
const element = document.createElement('span');
// Altera o estilo do texto
element.style[property] = value;
// Insere o texto selecionado no elemento criado
element.innerHTML = selection.toString();
// Retorna um objeto range que contém informações detalhadas
// do texto selecionado
const range = selection.getRangeAt(0);
// Insere o novo elemento criado com o estilo
range.surroundContents(element);
}
}
// Negrito
setStyle('fontWeight', 'bold')
// Itálico
setStyle('fontStyle', 'italic')
// Underline
setStyle('textDecoration', 'underline')
Acho que já serve como uma base para o que você quer fazer.