Ce este un editor binar?

Un editor binar este un instrument care îți permite să editezi un fișier direct în notație hexadecimală sau ASCII. Dacă un editor de text obișnuit lucrează cu „șiruri” de caractere, un editor binar îți oferă acces la „șirul brut de octeți” al fișierului, astfel încât poți modifica orice bit sau octet la orice offset.

Este indispensabil în analiza software-ului, recuperarea de date sau investigarea protocoalelor. Aplicațiile GUI precum HxD sau Binary Ninja sunt bine cunoscute. De data aceasta mi-am propus însă să construiesc un editor binar într-un singur fișier care să ruleze doar în browser.

Abordarea de implementare

  • Exclusiv pe partea de client (fără transmitere de date)
  • Folosirea API-ului FileReader pentru a încărca fișiere locale
  • Afișarea valorilor hexazecimale (Hex) în stânga și a celor ASCII în dreapta
  • Intrarea în modul de editare printr-un clic și rescrierea valorilor pe loc
  • Evidențierea cu roșu a celulelor modificate
  • Comutare între modurile de editare Hex și ASCII
  • Posibilitatea de a descărca din nou fișierul rezultat

Problemele întâlnite și cum le-am rezolvat

1. Chenarul de editare nu era aliniat

În versiunea inițială, conturul galben care marca celula activă era ușor deplasat și arăta ciudat. Vinovate erau line-height și layout-ul creat de flex: baza glifului și baza conturului nu se aliniau. Chiar dacă mă bazam pe un font monospațiat, pipeline-urile de randare din browser tratează diferit baseline-ul fiecărui font, așa că linia se deplasa în sus sau în jos.

Forțarea lui vertical-align: middle și transformarea celulei în inline-block pentru a egala înălțimile au rezolvat problema.

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

2. Tasta ESC introducea caractere în celulă

La început, apăsarea ESC când o celulă era activă scria în ea caractere precum „EE”.

Se întâmpla pentru că nu intercepam evenimentul keydown, iar browserul trimitea codul tastei direct către rutina de editare. Logica mea de intrare se aștepta doar la 0–9 și A–F, dar tasta Escape are și ea un cod (keyCode = 27 în implementările vechi, key = "Escape" în API-urile moderne). Fără un filtru, handlerul interpreta inputul ca litera „E”, iar rezultatul era „EE”.

Soluția a fost simplă: prind Escape în handlerul keydown, anulez editarea și opresc procesarea implicită.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // oprește fluxul către ruta generică de input
  }
});

Acum ESC doar anulează editarea și nu mai scrie caractere.

3. Evidențierile roșii rămâneau după reîncărcare

După ce modificam un fișier și deschideam altul, marcajele roșii rămâneau vizibile.

Cauza era că tablourile și stările care urmăresc celulele modificate nu erau resetate la încărcarea unui fișier nou. Doar curățarea zonei de afișare nu era suficientă, pentru că flagul „modificat” supraviețuia și făcea ca noul fișier să pară deja editat.

Apelarea funcției clearModifiedState() imediat după încărcare șterge aceste flaguri și readuce stilizarea neutră.

4. Comutarea între modurile HEX și ASCII

În prima versiune, utilizatorii puteau edita simultan în HEX și ASCII. Asta făcea dificil de înțeles care input are prioritate, iar modificarea aceluiași octet prin două rute genera conflicte. Actualizarea ASCII suprascria imediat afișarea HEX, dar în timpul editării apăreau stări tranzitorii incoerente.

Pentru a elimina confuzia, am trecut la un select box explicit pentru mod și am stabilit HEX drept implicit. Utilizatorul știe acum în mod clar că editează în HEX, iar logica de sincronizare s-a simplificat.

O privire asupra codului

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

markModified(offset) adaugă clasele pentru evidențierea cu roșu atunci când valoarea diferă de cea inițială. Implementarea este deliberat simplă.

Concluzie

Editorul binar în browser rulează offline și este un „tool” complet client-side, sigur din perspectiva confidențialității.

  • Când ai nevoie să corectezi rapid un fișier binar
  • Când ești într-un mediu în care nu poți instala aplicații dedicate
  • Când vrei să explici sau să înțelegi intuitiv „șirurile de octeți” în scop educațional

În toate aceste situații poate fi de ajutor.