Веб-страница | frontend, backend, fullstack, react, vue, javascript, typescript, css, html
IT и технологии · 3 сентября 2026 г.
Три попытки собрать текстовый редактор в браузере: Canvas, contenteditable и textarea — 3 сентября 2026 г. в 13:19:05.312
Три попытки собрать текстовый редактор в браузере: Canvas, contenteditable и textarea Дэвид Бушелл решил написать свой редактор и прошёл все грабли по очереди. Canvas даёт полный контроль над отрисовкой и ничего бесплатно: ни выделения, ни undo, ни вставки нескольких строк, ни прокрутки, а курсор и стрелки пришлось программировать с нуля при заметной нагрузке на CPU. Второй заход: contenteditable="plaintext-only" с отключёнными autocapitalize, autocorrect, spellcheck и translate. Проверка орфографии давала скачки задержки ввода. Но на длинном тексте выяснилось, что обычный <textarea> заметно производительнее. Итоговая схема: textarea принимает ввод, отдельный слой сверху рисует подсветку синтаксиса, а Tree-sitter обрабатывает только видимые строки, потому что слишком много CSS Highlights само становится узким местом. Бонус для тех, кто считает символы: "🍋🟩".length даёт 5, spread даёт 3, а Intl.Segmenter честно видит один графем. Разбор у автора. #javascript