16.12.2024

Corrigindo o contenteditable no Chrome: de <div> para <br>

Resposta Rápida

Se você deseja evitar a inserção automática de tags <div> ao pressionar a tecla Enter dentro de um elemento contenteditable, utilize o seguinte código JavaScript:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' && !e.shiftKey) { // Trata a tecla Enter sem Shift para evitar a quebra da criação de parágrafo
    document.execCommand('insertLineBreak'); // Substitui div por br
    e.preventDefault(); // Não serão mais criados elementos div indesejados
  }
});

Dessa forma, você evitará a criação automática de tags <div> ao pressionar Enter, substituindo-as pela operação insertLineBreak. Assim funciona a programação!

Melhorando a Experiência do Usuário

Para garantir que o comportamento do contenteditable seja previsível para os usuários, é necessário sobrescrever a resposta à tecla Enter. Por padrão, essa resposta varia entre diferentes navegadores, mas podemos influenciá-la. Veja como:

Inserindo <br> em vez de elementos de bloco

Desative a criação automática de blocos ao formar uma nova linha:

document.execCommand('insertHTML', false, '<br><br>');

Em vez de usar insertLineBreak, utilizamos insertHTML para inserir duas tags <br>, imitando assim uma quebra de linha dupla sem introduzir um elemento de bloco extra.

Bloqueando o Comportamento Padrão

Evite a criação de elementos desnecessários:

if (e.key === 'Enter') {
  e.preventDefault(); // Agora elementos div não interferirão mais!
}

Chamar event.preventDefault() faz com que a tecla Enter siga as novas regras e evita a criação de elementos desnecessários.

Visualização

Uma demonstração do processo de inserção de <div> em contenteditable ao pressionar ENTER no Chrome e como preveni-lo:

Antes: [✍️] -> [🔨 adicionando <div>]

Depois: [✍️] -> [🛑] -> [✏️ Continuando sem <div>]

**Recurso**: Definimos um sinal de parada 🛑 que bloqueia a criação automática da tag `<div>` no Chrome e a substitui pela operação de Enter.

```javascript
document.execCommand('defaultParagraphSeparator', false, 'p');
// Altera a inserção automática da tag <div> para <p> no Chrome ao pressionar Enter

Aplicando Estilos CSS

Você pode mudar o comportamento do contenteditable usando vários métodos de estilização CSS:

Usando Inline-block

Para evitar a criação automática de tags, aplique o seguinte estilo:

[contenteditable] {
  display: inline-block; /* Usar inline-block nos ajuda a combater o div automático */
}

Lidando com Espaços e Quebras de Linha

Utilize CSS para a exibição correta de espaços e quebras de linha:

[contenteditable] {
  white-space: pre-wrap; /* Considera tanto quebras de linha quanto espaços */
}

Controlando o Cursor e Eliminando <br> Extras

Para controlar a posição do cursor, use window.getSelection(). Para gerenciar as tags <br>, recorremos ao JavaScript para manter o código limpo.

Verificação de Compatibilidade e Casos Especiais

Embora o Chrome seja frequentemente nosso foco, não devemos negligenciar outros navegadores. Aqui estão alguns exemplos adicionais de como trabalhar com o DOM e CSS:

Compatibilidade com Vários Navegadores

Certifique-se de testar a solução em todos os principais navegadores, incluindo Firefox, Safari e Edge. A interpretação de contenteditable pode diferir entre os navegadores.

Trabalhando com DocumentFragment e Range

Métodos avançados de manipulação do DOM, como document.createDocumentFragment() e range.deleteContents(), combinados com range.insertNode(), proporcionam um posicionamento preciso do novo conteúdo.

Ajustando Comportamentos de Contêiner

Usando propriedades CSS como background, margin e padding, você pode ajustar a interação do elemento contenteditable com os elementos circundantes.

Recursos Úteis

1. contenteditable - HTML: Linguagem de Marcação HyperText | MDN - Tudo o que você queria saber sobre contenteditable.
2. Lidando com Quebras de Linha em DIV contentEditable - Stack Overflow - Discussão sobre a remoção de tags <div> indesejadas no Stack Overflow.
3. Atributo global contenteditable do HTML - Uma visão geral e exemplos sobre o uso de contenteditable.
4. O atributo contenteditable | HTML5 Doctor - Uma análise aprofundada do contenteditable.
5. Medium - Uma análise dos prós e contras do contenteditable.

Video

Navigation