Интеграция Lexical: кастомные ноды, коллаборация, производительность

Редактор тормозит на 500+ страницах, кастомные вставки — только через iframes, а коллаборация приводит к конфликтам слияния. На одном проекте мы сократили время загрузки редактора с 3 секунд до 200 мс, сэкономив клиенту 40% бюджета. За 5 лет мы решили эти задачи в 20+ проектах с помощью Lexical — headless-редактора от Meta. Однако интеграция требует глубокого понимания архитектуры. Свяжитесь с нами, чтобы обсудить ваш проект.

Почему Lexical быстрее Tiptap?

Согласно документации Meta, Lexical обрабатывает документ в 2 раза быстрее Tiptap при 5000 символах. Ключевое отличие — виртуальная модель документа с иммутабельными нодами и событийной системой, минимизирующей перерисовки. В отличие от Tiptap, Lexical не использует ProseMirror, а в отличие от Slate — имеет официальную поддержку от Meta. При 10 000 знаках он сохраняет стабильную работу, потребляя на 40% меньше памяти.

Эта скорость особенно заметна на больших объёмах: клиенты с документооборотом от 1000 страниц экономят до 40% времени редакторов.

Как экспортировать контент для SEO?

Lexical хранит данные в JSON, но для поисковой индексации требуется HTML. Используйте сериализатор @lexical/html для генерации чистого HTML-кода. Альтернативно — создайте кастомный сериализатор для специфических нод. Например, для ImageNode экспортируйте alt и src. Это повышает LCP и видимость контента.

Как мы интегрируем Lexical в вашу CMS

Мы встраиваем редактор в вашу архитектуру: бэкенд, фронтенд, API. Рассмотрим пример на React 18 и TypeScript 5. После установки пакетов создаём конфиг с темой и списком нод — базовый набор покрывает 80% задач. Добавляем плагины для истории, автофокуса и линковки.

import { LexicalComposer } from '@lexical/react/LexicalComposer'; import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'; import { ContentEditable } from '@lexical/react/LexicalContentEditable'; import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'; import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin'; import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'; import { ListPlugin } from '@lexical/react/LexicalListPlugin'; import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'; import { HeadingNode, QuoteNode } from '@lexical/rich-text'; import { ListNode, ListItemNode } from '@lexical/list'; import { LinkNode, AutoLinkNode } from '@lexical/link'; import { CodeNode, CodeHighlightNode } from '@lexical/code'; const editorConfig = { namespace: 'cms-editor', theme: { paragraph: 'mb-3', heading: { h1: 'text-3xl font-bold', h2: 'text-2xl font-bold', h3: 'text-xl font-bold' }, list: { ol: 'list-decimal ml-6', ul: 'list-disc ml-6' }, text: { bold: 'font-bold', italic: 'italic', underline: 'underline' } }, nodes: [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode, CodeNode, CodeHighlightNode], onError: console.error }; function LexicalEditor({ initialState, onChange }) { return ( <LexicalComposer initialConfig={{ ...editorConfig, editorState: initialState }}> <div className="relative border rounded-lg"> <ToolbarPlugin /> <div className="relative"> <RichTextPlugin contentEditable={<ContentEditable className="outline-none p-4 min-h-96" />} placeholder={<div className="absolute top-4 left-4 text-gray-400">Начните вводить...</div>} ErrorBoundary={({ children }) => children} /> <HistoryPlugin /> <AutoFocusPlugin /> <ListPlugin /> <LinkPlugin /> <OnChangePlugin onChange={(editorState) => { editorState.read(() => { const json = editorState.toJSON(); onChange(JSON.stringify(json)); }); }} /> </div> </div> </LexicalComposer> ); } 

Создание кастомной ноды: пошаговое руководство

1. Наследуйтесь от DecoratorNode (для React-компонентов) или ElementNode (для блочных элементов).
2. Определите статические методы getType() и clone().
3. Реализуйте createDOM(), decorate() и exportJSON().
4. Зарегистрируйте ноду в конфиге через поле nodes.
5. Используйте плагин для интеграции с тулбаром.

Пример кастомной ноды ImageNode:

class ImageNode extends DecoratorNode<React.ReactElement> { static getType() { return 'image'; } static clone(node: ImageNode) { return new ImageNode(node.__src, node.__alt, node.__key); } constructor(private __src: string, private __alt: string, key?: string) { super(key); } createDOM() { return document.createElement('div'); } decorate() { return <img src={this.__src} alt={this.__alt} className="max-w-full rounded" />; } exportJSON(): SerializedLexicalNode { return { type: 'image', src: this.__src, alt: this.__alt, version: 1 }; } } 

Как настроить коллаборацию без конфликтов?

Lexical поддерживает коллаборацию через встроенный Operational Transform (OT). Мы настраиваем бэкенд-сервер (например, на Node.js) для синхронизации через WebSockets. В одном проекте мы реализовали коллаборацию для 10 редакторов — задержка составила менее 50 мс. Конфликты разрешаются автоматически. Дополнительно используем Yjs для стабильности.

Типичные ошибки при интеграции Lexical

• Неправильная регистрация нод: кастомные ноды необходимо добавить в конфиг явно.
• Игнорирование экспорта/импорта JSON: без правильного exportJSON() данные не сериализуются.
• Отсутствие обработки ошибок: обязательно используйте onError в конфиге.

Этапы интеграции

Сроки и бюджет

Типовой проект занимает от 2 до 4 рабочих дней. Если требуется более 5 кастомных нод — добавляем 2 дня. Благодаря накопленному опыту, мы сокращаем бюджет на 30–50% по сравнению с самостоятельной разработкой. Стоимость рассчитывается индивидуально, исходя из сложности.

Что вы получите

• Полноценный редактор с тулбаром, поддержкой Rich Text, списков, ссылок и кода
• Кастомные ноды по вашему техническому заданию
• Интеграция с бэкендом (сохранение в JSON, экспорт в HTML)
• Документация и обучение редакторов
• Два месяца бесплатной поддержки после сдачи

Закажите интеграцию Lexical — получите готовый редактор за 2 дня. Свяжитесь с нами, чтобы обсудить ваш проект. Получите консультацию — просто напишите нам.