Função para editar o texto de um item

Fui um pouco além do projeto proposto pelo professor. Queria ter um jeito de editar o texto de um item. Vai que por um acaso você escreve errado uma palavra. Ao invés de excluir esse item para acrescentá-lo de novo, fiz um jeito de poder editá-lo.

Primeiro tive que envolver o texto do item num <span class="texto-item">. Depois alterei a função criaElemento() da seguinte forma:

function criaElemento(item) {  
    if (item.quantidade == ''){
        item.quantidade = 1;
    };
    
    const numItem = document.createElement('strong');
    numItem.innerHTML = item.quantidade;
    numItem.dataset.id = item.id;
    
    const novoItem = document.createElement('li');
    novoItem.classList.add("item");
    novoItem.appendChild(numItem); 
    
    const textoItem = document.createElement('span');
    textoItem.classList.add("texto-item");
    textoItem.textContent = item.nome;
    novoItem.appendChild(textoItem);

    novoItem.appendChild(botaoDeleta(item.id));

    lista.appendChild(novoItem);
}

Agora, antes do botão de deletar, a função cria um span com classe "text-item". Ao invés da atribuição incremental que o professor fez, coloquei o a propriedade nome no conteúdo de texto desse elemento e apensei ele em novoItem.

Por fim, acrescentei o seguinte código:

const itensTexto = document.querySelectorAll(".texto-item");

itensTexto.forEach(elemento => {
    elemento.addEventListener('dblclick', function() {
        this.contentEditable = true;
        const i = itens.findIndex(item => item.nome === this.textContent)

        this.addEventListener('focusout', function() {
            this.contentEditable = false;
            itens[i].nome = this.textContent;
            localStorage.setItem("itens", JSON.stringify(itens))
        })
    })
});

Ele cria um array itensTexto com todos os textos dos itens. Então, itera esse array acrescentando um escutador de eventos de clique duplo o qual aplica o atributo contenteditable com valor verdadeiro ao elemento para possibilitar que o html seja editado. Por fim, quando o item perde o foco, pega o texto que foi deixado nele, altera o objeto e atualiza o localStorage.