HeadlinesBriefing favicon HeadlinesBriefing.com

ゼロから始めるカスタムテキストエディタの構築

Hacker News •
×

現代のソフトウェアの品質への不満と「They don't make 'em like Sublime Text anymore」という感情にインスパイアされ、著者はカスタムテキストエディタの構築に取り組んだ。この旅では、<canvas>、contenteditable、および<textarea>という3つのレンダリングアプローチを探求する。

初期の<canvas>実験では、60–120 FPSのレンダリングを達成したが、ネイティブなインタラクティビティが欠けていた。カーソル位置、タイピング、行ハイライトなどの基本機能を実装すると、テキスト選択、アンドゥ/リドゥ、オーバーフロースクロールなどの必須要素が欠けていることが明らかになった。ネイティブスクロール計算のために隠し<div>を使用するハイブリッドソリューションはスクロールを改善したが、<canvas>は根本的にアクセス不可能であった。

contenteditable="plaintext-only"への切り替えにより、ネイティブな選択、アンドゥ履歴、およびアクセシビリティが無料で提供された。Selection APIによりカスタムカーソルレンダリングが可能になったが、特にChromiumでは大きなファイルではパフォーマンスが予測不能に低下した。

最後に、<textarea>アプローチは長いテキストに対してはるかに高いパフォーマンスを示した。構文ハイライトは、Micro Lighterを使用した第三レイヤーで追加されたが、新しいOpaque Range APIによりネイティブハイライトが可能になるかもしれない。著者は、Tree-sitterと仮想化スクロールが堅牢性を向上させ得ることを指摘しているが、現在のデモは「テキストエディタの90%に機能の1%」を表していると認めている。

主要なエンティティ: 企業: Apple, Chromium, Web Kit, Firefox