Fixed the alignment, and v12 removed the workaround that was no longer needed.

Layer 1 — The textarea (invisible) sits on top and handles all keyboard input, cursor positioning, and text selection. When you double-click a word like "Above", the textarea selects just those 5 characters.
Layer 2 — The syntax-highlighted overlay (visible) renders the colored code you actually see. This is built line-by-line with HTML divs.
Back in v6, the native textarea selection was showing jagged/misaligned blue blocks because the two layers weren't perfectly aligned at the time. To fix that, we hid the native selection entirely (::selection { background: transparent }) and built a custom selection system that highlighted whole lines instead.
That custom system worked like this: when you selected any text, handleSelect converted the character positions to line numbers, stored them in selRange, and the overlay painted full-width blue highlights on those lines. So selecting the word "Above" on line 19 would highlight all of line 19.
The result: you'd visually see the whole line highlighted, but the textarea actually only had "Above" selected. Pressing Cmd+C copied whatever the textarea had selected — which looked wrong because the visual highlight suggested the entire line was selected.
The v12 fix removes that custom system entirely and brings back the native textarea selection. This works now because v11 fixed the root alignment issue — disabling ligatures and syncing font rendering properties between the textarea and overlay means characters are at identical positions in both layers. So the native selection highlight (semi-transparent blue over the invisible textarea text) now lines up perfectly with the visible code underneath.

Author: angshumanbasak