Hacker News Digest

01 сентября 2026 г. в 17:12 • dbushell.com • ⭐ 147 • 💬 132

OriginalHN

#canvas#contenteditable#editcontext#javascript#microlighter#opaque-range#text-editor#tree-sitter

Fine, I'll build my own text editor

Автор экспериментирует с созданием собственного текстового редактора, начиная с рендера на <canvas>, где реализовал базовые функции: позиционирование курсора, перемещение стрелками, подсветку текущей строки, ввод текста и анимацию курсора. Однако столкнулся с отсутствием выделения текста, undo/redo, многострочной вставки и прокрутки — последняя решена через скрытый <div> с нативным overflow, но доступность осталась проблемой. Перешёл на contenteditable с plaintext-only, получив бесплатную выделение, историю изменений и доступность, но обнаружил непредсказуемые проблемы с производительностью в Chromium при большом объёме текста. Попробовал <textarea> — оказался более производительным, особенно с подсветкой синтаксиса через дополнительный слой <div> и MicroLighter. Упомянул новые API: OpaqueRange для кастомных выделений в <textarea> и EditContext для улучшения ввода в <canvas>. Отметил, что слишком много CSS-подсветок создаёт узкое место, и предложил использовать Tree-sitter для генерации подсветки только видимых строк или применить «обратную липкую технику» для оптимизации скроллинга. Заключил, что для его задач contenteditable достаточно, так как редактируемые файлы малы. Демонстрации неоптимизированы и не идеальны по доступности, но отправной точки лучше, чем с <canvas>. Завершил примером на UTF-16 и графемах, показывающим сложность корректной работы с текстом в JavaScript.