Как Meta переизобрела текстовые редакторы для веба

Вы когда-нибудь пробовали написать свой текстовый редактор на React? Если да, то наверняка помните ту боль, когда стандартный contenteditable начинает вести себя непредсказуемо, курсор прыгает, а история изменений превращается в кашу. Команда Meta (бывший Facebook) годами мучилась с Draft.js, пока не решила: хватит это терпеть. Так появился Lexical.

Что это вообще такое

Lexical — это не просто готовое поле для ввода текста, которое можно «воткнуть» на страницу. Это полноценный фреймворк для создания редакторов. Его главная фишка в том, что он отделяет состояние текста от того, как этот текст отображается в DOM.

Если вы работали с Draft.js, то Lexical покажется вам глотком свежего воздуха. Он легче, быстрее и, что самое приятное, не привязан намертво к React. Хотя официальные биндинги для React есть и они отличные, ядро библиотеки написано на чистом TypeScript и может работать хоть с Vue, хоть с ванильным JS.

Почему на него стоит взглянуть

В моей практике создание Rich Text Editor всегда было лотереей. Либо ты берешь тяжелый Quill/TinyMCE и пытаешься его кастомизировать под дизайн-систему, либо страдаешь с низкоуровневыми API. Lexical пытается найти баланс.

Древовидная структура и неизменяемость

В основе лежит модель дерева. Каждый абзац, ссылка или жирный текст — это узел (Node). Состояние редактора иммутабельно. Это значит, что реализовать «Undo/Redo» или сохранение черновиков становится тривиальной задачей. Вы просто работаете со снимками состояния.

Плагины вместо монолита

Библиотека построена по принципу «плати только за то, что используешь». Хотите поддержку Markdown? Ставите плагин. Нужны таблицы? Еще один плагин. Базовая конфигурация весит копейки, а функционал наращивается как конструктор.

Совместное редактирование

Сейчас сложно представить серьезный сервис без возможности править текст вдвоем, как в Google Docs. Lexical из коробки дружит с Yjs. Это библиотека для работы с CRDT (Conflict-free Replicated Data Types), которая берет на себя всю магию синхронизации между пользователями.

Как это выглядит в коде

Давайте посмотрим на минимальный пример на React. На первый взгляд может показаться, что кода многовато для простого инпута, но в этом и суть — вы полностью контролируете каждый чих редактора.

import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

const initialConfig = {
  namespace: 'MyEditor',
  onError: (error) => console.error(error),
};

function Editor() {
  return (
    <LexicalComposer initialConfig={initialConfig}>
      {/* Основная область редактирования */}
      <PlainTextPlugin
        contentEditable={<ContentEditable className="editor-input" />}
        ErrorBoundary={LexicalErrorBoundary}
      />
      {/* Плагин для истории правок */}
      <HistoryPlugin />
    </LexicalComposer>
  );
}

Здесь LexicalComposer — это контекст, который управляет состоянием, а PlainTextPlugin превращает обычный div в полноценное поле ввода.

Кому это пригодится

Я бы не стал советовать Lexical для простой формы обратной связи. Для этого хватит и обычного textarea. Но он незаменим, если вы строите:

1. CMS или блог-платформу, где важен чистый HTML/JSON на выходе.
2. Мессенджер с поддержкой упоминаний (@mentions), эмодзи и превью ссылок.
3. Инструмент для заметок с иерархической структурой.

Кстати, Lexical очень серьезно относится к доступности (accessibility). Для проектов, где важна поддержка скринридеров и соответствие стандартам WCAG, это, пожалуй, лучший выбор на рынке сейчас.

Lexical — это работа над ошибками Draft.js. Он производительный, типизированный и очень гибкий. Из минусов можно отметить порог входа: придется разобраться в том, как работают узлы (Nodes) и команды (Commands). Документация местами суховата, но это компенсируется активным сообществом в Discord и крутым Playground-ом, где можно подсмотреть реализацию почти любой фичи.

Если вы устали бороться с капризами браузерного редактирования текста, дайте Lexical шанс. Скорее всего, возвращаться к старым решениям уже не захочется.