Apa itu editor biner?

Editor biner adalah alat yang memungkinkan kita mengedit file secara langsung dalam representasi heksadesimal atau ASCII. Berbeda dengan teks editor biasa yang mengubah “string”, editor biner memberi akses ke “deret byte mentah” yang dimiliki file sehingga kita bisa memodifikasi bit atau byte pada posisi mana pun.

Dalam analisis perangkat lunak, pemulihan data, atau penelusuran protokol, alat ini tidak tergantikan. Untuk aplikasi GUI, contoh populer adalah HxD atau Binary Ninja. Target saya kali ini berbeda: editor biner satu file yang berjalan sepenuhnya di browser.

Pendekatan implementasi

  • Seluruh proses di sisi klien (tanpa pengiriman data)
  • Membaca file lokal dengan API FileReader
  • Menampilkan hex di sisi kiri dan ASCII di sisi kanan
  • Klik untuk masuk ke mode edit dan menimpa nilai secara langsung
  • Menyorot area yang diedit dengan warna merah
  • Bisa berganti mode edit HEX / ASCII
  • Hasil edit dapat diunduh kembali sebagai file

Titik tersandung dan perbaikannya

1. Bingkai edit yang tidak tepat posisi

Pada implementasi awal, bingkai kuning yang menunjukkan sel yang sedang diedit sedikit bergeser dan terlihat aneh. Penyebabnya adalah titik acuan antara karakter dan bingkai tidak sejajar karena pengaruh line-height CSS dan tata letak flex. Walau memakai font monospace, proses rendering browser bisa memberikan baseline berbeda antarpengguna sehingga bingkai tampak condong ke atas atau ke bawah.

Solusinya adalah memaksa vertical-align: middle dan mengubah elemen menjadi display: inline-block agar tinggi antar elemen seragam.

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

2. Menekan ESC malah memasukkan karakter

Awalnya, ketika bingkai edit muncul lalu saya menekan ESC, sel justru terisi huruf seperti “EE”.

Penyebabnya adalah tidak ada penanganan keydown, sehingga browser meneruskan kode karakter yang ditekan langsung ke proses input sel. Rutinitas input sebenarnya hanya mengizinkan 0–9 dan A–F, tetapi Escape juga punya kode (implementasi lama memakai keyCode=27, spesifikasi modern memakai key="Escape"). Kode itu tanpa sengaja melewati jalur input dan ditafsir sebagai "E", sehingga muncul “EE”.

Solusi yang diambil sederhana: tangkap Escape lewat event keydown, ubah menjadi operasi pembatalan edit, dan hentikan alur input normal.

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    cancelEdit();
    e.preventDefault(); // jangan teruskan ke alur input utama
  }
});

Dengan begitu ESC hanya berfungsi sebagai “batalkan edit” dan tidak lagi menuliskan karakter.

3. Sorotan merah tertinggal setelah memuat ulang

Saat file baru dimuat setelah sebelumnya mengedit file lain, sorotan merah dari file lama masih muncul.

Ini terjadi karena larik dan status yang melacak sel yang sudah diedit tidak diinisialisasi ulang saat memuat file baru. Meski area tampilan sudah dibersihkan, “flag perubahan” internal masih tersisa sehingga file baru tetap dianggap merah.

Perbaikannya adalah memanggil clearModifiedState() segera setelah file dibaca untuk mereset flag tersebut sepenuhnya.

4. Pergantian mode HEX/ASCII

Implementasi pertama mengizinkan pengeditan HEX dan ASCII secara bersamaan. Akibatnya pengguna bingung menentukan “mana yang benar”. Karena satu byte dipegang dua jalur input sekaligus, muncul konflik ketika sel yang sama ditimpa lewat jalur berbeda. Saat mengetik ASCII, representasi HEX langsung ditulis ulang, tetapi selama proses input sempat terlihat keadaan yang tidak sinkron.

Untuk menghindari kekacauan itu, mode diedit menjadi pilihan eksplisit lewat select box, dan default-nya disatukan ke edit HEX. Dengan begitu pengguna tahu “saat ini saya mengedit HEX” dan proses sinkronisasi menjadi lebih sederhana.

Cuplikan kode

Bagian pengeditan utama saya implementasikan seperti berikut.

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

markModified(offset) dipakai untuk menyorot sel merah. Implementasinya sederhana: ketika nilainya berbeda dari data awal, kelas khusus ditambahkan.

Rangkuman

Editor biner versi browser ini dapat berjalan offline dan aman secara keamanan karena sepenuhnya sisi klien.

  • Cocok untuk koreksi biner ringan
  • Berguna ketika lingkungan tidak mengizinkan instalasi aplikasi khusus
  • Bermanfaat di kelas atau sesi belajar untuk memahami “deret byte” secara intuitif

Itulah skenario utama di mana alat ini bisa membantu.