Gabung Fragment HTML di ArticleBody React
Bug kecil di ArticleBody bikin paragraf pecah dan jarak antar blok jadi aneh. Solusinya ternyata bukan rewrite parser, cuma gabung fragment HTML yang berurutan.
Spasi aneh yang cuma muncul di inline code
Masalahnya kelihatan sepele. Di artikel yang punya inline <code>, paragraf tiba-tiba seperti dipotong dua. Bukan crash, cuma layout-nya pecah: ada jarak kosong yang nggak harusnya ada di tengah kalimat. Awalnya kelihatan kayak masalah CSS. Ternyata bukan.
Yang bikin ribet: parser parseContent memecah konten di sekitar token literal dan inline code, lalu setiap fragmen HTML itu dirender sebagai node sendiri di dalam wrapper space-y-6. React nggak salah, CSS juga nggak salah. Saya yang tanpa sadar bikin satu paragraf punya dua badan.
Yang dibuang: rewrite besar
Opsi gampangnya jelas: rewrite parser dari nol. Tapi itu kebanyakan. Yang dibutuhkan cuma satu tahap penggabungan lagi di ArticleBody sebelum render. Fragmen HTML yang berurutan digabung jadi satu blok, sementara embed tetap jadi pulau terpisah. Jadi spacing antar embed masih jalan, tapi paragraf biasa balik nyambung.
Ini salah satu bug yang bikin saya makin curiga sama diffs kecil di UI. Satu perubahan kecil di pemisahan string bisa kelihatan seperti masalah layout, padahal sumbernya di pembentukan tree komponen. Begitu run HTML-nya digabung lagi, heading yang sempat seperti meloncat balik normal.