O que é um editor binário?

Um editor binário é uma ferramenta que permite editar arquivos diretamente em formato hexadecimal ou ASCII. Enquanto editores de texto comuns trabalham com “strings”, o editor binário acessa a “sequência bruta de bytes” de um arquivo e modifica bits ou bytes em qualquer posição.

Ele é indispensável em tarefas de análise de software, recuperação de dados e investigação de protocolos. Entre os aplicativos GUI populares estão HxD e Binary Ninja. Porém, minha meta desta vez foi criar um “editor binário em arquivo único que funciona somente no navegador”.

Diretrizes de implementação

  • 100% no lado do cliente (sem transmissão externa)
  • Leitura de arquivos locais com a API FileReader
  • Hexadecimal (Hex) à esquerda e ASCII à direita
  • Clique para entrar no modo de edição e alterar valores diretamente
  • Células editadas ficam destacadas em vermelho
  • Alternância entre os modos de edição HEX e ASCII
  • Resultado editado pode ser baixado novamente como arquivo

Problemas encontrados e correções

1. Deslocamento da borda de edição

Na implementação inicial, ao exibir a borda amarela na célula em edição, ela ficava ligeiramente fora de centro e causava estranheza. Isso ocorreu porque as propriedades line-height e o layout flex do CSS deslocaram o elemento, fazendo com que o ponto de referência do texto e da borda não coincidissem. Mesmo assumindo uma fonte monoespaçada, o processo de renderização do navegador pode usar linhas de base diferentes, o que resulta em deslocamento visual para cima ou para baixo.

Forçar vertical-align: middle e definir o elemento como display: inline-block para alinhar a altura resolveu o problema.

.hex-cell.editing {
  outline: 2px solid yellow;
  vertical-align: middle;
}

2. Pressionar ESC inseria caracteres

No primeiro protótipo, pressionar ESC enquanto a célula estava em modo de edição inseria cadeias como “EE”.

Isso aconteceu porque o evento keydown não era interceptado, e o navegador enviava o código da tecla diretamente para a rotina de entrada da célula. O tratamento padrão esperava apenas 0–9 e A–F, mas Escape também possui código (keyCode=27 no legado e key="Escape" na especificação atual), de modo que era interpretado como "E".

A solução foi direta: capturar Escape no keydown e redirecionar para o cancelamento da edição.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // impede que siga para a rotina de entrada
  }
});

Assim, ESC passou a servir apenas para “cancelar a edição” e não deixa mais caracteres na célula.

3. Destaque em vermelho permanecia após recarregar

Depois de editar um arquivo e carregar outro, os destaques vermelhos do arquivo anterior continuavam visíveis.

O motivo foi que o array ou estado que acompanha as células modificadas não era reiniciado ao ler um novo arquivo. Mesmo limpando a área visível, o “flag de alteração” interno permanecia e contaminava o novo arquivo.

Corrigi chamando clearModifiedState() logo após a leitura, garantindo o reset completo dos indicadores.

4. Alternância entre modos HEX e ASCII

Na primeira versão, era possível editar HEX e ASCII simultaneamente, o que deixava confuso “qual valor é o certo”. Como o mesmo byte era manipulado por dois formulários, ocorria competição de escrita pela mesma célula. A entrada ASCII sobrescrevia o HEX imediatamente, gerando momentos de inconsistência durante a digitação.

Para evitar isso, adicionei um seletor de modo explícito e deixei HEX como padrão. O usuário passa a saber exatamente o que está digitando, e a lógica de sincronização fica mais simples.

Trecho de código

A rotina de edição ficou assim.

function applyEdit(offset, newValue) {
  if (mode === "hex") {
    buffer[offset] = parseInt(newValue, 16);
  } else {
    buffer[offset] = newValue.charCodeAt(0);
  }
  markModified(offset);
  render();
}

markModified(offset) cuida do destaque em vermelho; basta detectar quando o valor difere do original e aplicar a classe correspondente. É uma implementação bem direta.

Conclusão

Este editor binário baseado em navegador funciona offline e, por ser um “ferramenta totalmente cliente”, atende aos requisitos de segurança.

  • Quando é preciso alterar rapidamente pequenos trechos de dados binários
  • Para investigações em ambientes onde não se pode instalar aplicativos dedicados
  • Em aulas ou treinamentos que exigem uma visão intuitiva de “sequências de bytes”

Em todos esses cenários ele se mostra bastante útil.