Редакторы текста в Вебе
Ниже краткий путеводитель по редакторам текста для Веба. Мы пройдёмся по базовым технологиям, подходам и свободным библиотекам.
Задачи: какие мы редакторы мы рассматриваем?
Мы будем исходить из задачи создания редактора текста общего назначения — для редактирования публикаций в CMS, чат-клиенте, написания комментариев в социальной сети и так далее. Нам нужно разнообразное форматирование: общепринятые выделения курсивом и полужирным, заголовки и так далее. Также нам нужны добавление изображений, видео, кода и прочих произвольных виджетов.
Общие принципы
Рассмотренные здесь редакторы воплощают несколько общих базовых подходов, на которых сошлись как на оптимальных:
Conteditable как база
Иммутабельные структуры данных
ProseMirror хранит контент и метаданные редактора в состоянии (state), иммутабельной структуре состоящей из объединённых в дерево нод1. Такой подход стал общим местом и похожие решения используются в других редакторах. Автор ProseMirror описывает главное преимущество иммутабельности: при каждом изменении контента создаётся новый объект состояния всего редактора, что позволяет избежать «промежуточных» некорректных состояний.
Текстовые координаты
Lexical
Quill
ProseMirror
Редакторы на основе ProseMirror
TipTap
ProseBlock
CKEditor
Overtype
Достоин отдельного упоминания Overtype — простой редактор для Markdown, который использует интересный трюк чтобы избежать всех сложностей описанных выше. Он совсем из другой лиги, но идея отличная!