textContent adiciona

Estou criando um editor de texto WYSIWYG para aprofundar os meus estudos. Comecei por adicionar uma funcionalidade de negrito. Mas quando capturo o texto, usando contentText, de uma div editável (contenteditable), vem adicionado um "[object Text]" ao final, que é replicado na div. Já busquei em vários em fóruns mas não encontrei ninguém com o mesmo problema.

Link do jsfiddle: https://jsfiddle.net/vscaramel/12ucxaot/3/

HTML

<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>WYSIWUG Project</title>
        <link rel="stylesheet" href="./assets/stylesheet.css">
    </head>
    <body>
        <div name="text-editor" id="text-editor">
            <nav>
                <button id="bold-btn" onclick="boldBtnEvent(event)" value="false">BOLD</button>
            </nav>
            <div id="text-area" contenteditable="true">
                <pre></pre>
            </div>
        </div>
        <input type="hidden" value>
        <script src="index.js"></script>
    </body>
</html>

Javascript

//Tornar negrito as letras
let boldState = false
const elText = document.getElementById("text-area")
//função para mudar o estado do botão bold
function boldBtnEvent(event){
    boldState = !boldState;
    const btn = event.target;
    if(boldState){
        btn.classList.add('bold-btn-active')
        // const boldEl = document.createElement("span");
        // boldEl.setAttribute('class', 'bold-text');
        // elText.appendChild(boldEl);
    }else{
        btn.classList.remove('bold-btn-active')
    }
}

//Captura de texto
function captureText(){
    const text = elText.textContent;
    console.log(text);
    return text;

}

elText.addEventListener('beforeinput', boldText);

//Deixar negrito o texto
function boldText(){
    let text = document.createTextNode(captureText());
    console.log(boldState);
    if(boldState){
        const boldEl = document.createElement("span");
        boldEl.setAttribute('class', 'bold-text');
        boldEl.textContent = text;
        elText.appendChild(boldEl);
    }
}

CSS

#text-editor {
    width: 600px;
    height: 300px;
    border: 1px solid;
    border-color: black;
    margin: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
}

#text-area {
    width: 100%;
    height: 200px;
    display: inline;
}

nav {
    width: 100%;
    background-color: blue;
    height: 50px;
}

#bold-btn {
    width: 100px;
    height: 100%;
}

.bold-btn-active {
    font-weight: bold;
    background-color: whitesmoke;
}

.bold-text{
    font-weight: bold;
}

Olá Vinicius, tudo bem?

Desculpe a demora em retornar.

Pelo que entendi, você está criando um editor de texto WYSIWYG e está tendo problemas com a funcionalidade de negrito. Quando você captura o texto de uma div editável usando contentText, vem adicionado um "[object Text]" ao final, que é replicado na div.

Eu dei uma olhada no seu código e percebi que o problema está na função boldText(). Você está criando um nó de texto com a função captureText() e adicionando esse nó em um novo elemento span com a classe "bold-text". No entanto, o método createTextNode() retorna um objeto Text e é por isso que você está vendo "[object Text]" no final do texto.

Para resolver esse problema, você pode simplesmente capturar o texto diretamente da div editável usando o método innerHTML. Dessa forma, você não precisará criar um nó de texto e o problema do "[object Text]" será resolvido.

Segue o código atualizado da função boldText():

function boldText(){
    let text = elText.innerHTML;
    console.log(boldState);
    if(boldState){
        const boldEl = document.createElement("span");
        boldEl.setAttribute('class', 'bold-text');
        boldEl.innerHTML = text;
        elText.innerHTML = "";
        elText.appendChild(boldEl);
    }
}

Espero ter ajudado e bons estudos!

textContent adiciona "[object Text]" ao final da string

Chegou a hora de transformar