首页 > AI前沿 > Fine, I'll build my own text editor

Fine, I'll build my own text editor

Hacker News 2026-09-02 01:12 3 阅读 查看原文
个人项目 文本编辑器 开发者
Tuesday 1 Sept 2026 Play Synthesised Audio “They don’t make ’em like Sublime Text anymore” resonated with a lot of folk. Software these days is garbage. That got me thinking; I’m good at building garbage! Why can’t I build my own text editor? VS Code is built upon Monaco Editor which is a
soup hellscape. I was late to the VS Code train because for years my Intel inside™ Mac was too slow. That issue was resolved when I bought Apple silicon. If that’s the standard I have a lot of room to make mistakes. Canvas My first experiment renders everything on a element. You can’t tell, but your CPU is doing a lot of work to render that picture at 60–120 frames per second. Lack of interactivity is an obvious problem for a text editor. I made a list of the “minimum viable” features and implemented them. Pointer down to position text cursor Arrow keys to move text cursor Highlight current line Type to enter text Fancy cursor animation This next demo is interactive, click around and type. Before you @ me about Vim bindings: shut up, I’ve got more pressing issues. Canvas gives me nothing for free. Amongst many desirable features, I’m missing: Text selection Undo/redo history Multi-line paste Overflow scrolling That last one is critical. Life is too short to implement custom elastic scrollbars. I decided to cheat and use native browser overflow on a hidden element. A
is sized to match the canvas text and the scroll position is used to calculate render offsets on the canvas. I’m pleased with how that’s coming along but I’m also disheartened because is entirely inaccessible. I could continue to add text selection and other features but I’m not solving the fundamental accessibility issue. I had a better idea. Content editable Instead of rendering text on the I can just render it natively in the overflow
and make it editable with a contenteditable attribute. That attribute has a plaintext-only value that is perfect for code. All content remains within a single text node.
Attributes like spellcheck must be disabled to avoid input latency spikes. Want to guess how many days it took me to discover that fix? Days! Using contenteditable gives native text selection and undo history etc. So much accessibility goodness is wired up for free by the browser. The Selection API provides metrics I use to continue rendering a custom text cursor. ::selection is available so I can style that too. I’ve set the native caret-color invisible, which is probably a no-no. The contenteditable technique is promising but I’ve noticed strange performance issues beyond a certain character count. Chromium browsers perform worse than WebKit and whatever Firefox is now but it’s unpredictable. Textarea Instead of plaintext contenteditable would a simple

相关推荐