🔒Открыть пост
и посмотреть медиа
и посмотреть медиа
Три попытки собрать текстовый редактор в браузере: Canvas, contenteditable и textarea
Дэвид Бушелл решил написать свой редактор и прошёл все грабли по очереди. Canvas даёт полный контроль над отрисовкой и ничего бесплатно: ни выделения, ни undo, ни вставки нескольких строк, ни прокрутки, а курсор и стрелки пришлось программировать с нуля при заметной нагрузке на CPU.
Второй заход: contenteditable="plaintext-only" с отключёнными autocapitalize, autocorrect, spellcheck и translate. Проверка орфографии давала скачки задержки ввода. Но на длинном тексте выяснилось, что обычный заметно производительнее. Итоговая схема: textarea принимает ввод, отдельный слой сверху рисует подсветку синтаксиса, а Tree-sitter обрабатывает только видимые строки, потому что слишком много CSS Highlights само становится узким местом.
Бонус для тех, кто считает символы: "🍋🟩".length даёт 5, spread даёт 3, а Intl.Segmenter честно видит один графем. Разбор у автора.
#javascript