HeadlinesBriefing favicon HeadlinesBriefing.com

Создание пользовательского текстового редактора с нуля

Hacker News •
×

Вдохновленный разочарованием в качестве современного программного обеспечения и настроением 'They don't make 'em like Sublime Text anymore', автор приступил к созданию пользовательского текстового редактора. Путь исследует три подхода к рендерингу: <canvas>, contenteditable и <textarea>.

Первоначальный эксперимент с <canvas> достиг рендеринга 60–120 FPS, но не имел нативной интерактивности. Реализация базовых функций, таких как позиционирование курсора, ввод и выделение строк, выявила отсутствие важных элементов: выбор текста, отмена/повтор и прокрутка переполнения. Гибридное решение с использованием скрытого <div> для нативных расчетов прокрутки улучшило прокрутку, но <canvas> оставалось фундаментально недоступным.

Переход на contenteditable="plaintext-only" предоставил нативный выбор, историю отмены и доступность бесплатно. API выбора позволил реализовать пользовательский рендеринг курсора, хотя производительность непредсказуемо ухудшалась с большими файлами, особенно в Chromium.

В конце концов, подход с <textarea> оказался значительно более производительным для длинного текста. Подсветка синтаксиса была добавлена через третий слой с использованием Micro Lighter, хотя новая API непрозрачного диапазона может обеспечить нативное выделение. Автор отмечает, что Tree-sitter и виртуализированная прокрутка могли бы улучшить надежность, но признает, что текущая демонстрация представляет «90% текстового редактора с 1% функций».

Ключевые сущности: Компании: Apple, Chromium, Web Kit, Firefox