On-Page React Editor

Name: On-Page React Editor
Brand: jellologic
Availability: InStock
Author: jellologic

Добавляет на React-страницы Payload визуальный редактор: тулбары, панели и редакторы полей поверх отрисованной страницы.

Сообщество 0 1,9 тыс./нед MIT v0.6.0

Установка

$ pnpm add @payload-onpage/react

Описание

Пакет @payload-onpage/react рисует поверх отрисованной страницы слой редактирования. В него входят тулбары строк, панель настроек, док, панель предпросмотра и редакторы полей: текст, числа, даты, чекбоксы, цвета, селекты, связи и загрузки файлов. Изменения записываются обратно в Payload через адаптер источника данных, например payloadRest(). Для медиа используется отдельный источник, например payloadUploads(). Ссылка на выход из режима редактирования передается через объект links. Согласно README, правки сохраняются автоматически как черновики. Пакет не привязан к конкретному фреймворку. Адаптер @payload-onpage/next монтирует редактор в страницу App Router в Next.js, поэтому в большинстве проектов ставить этот пакет вручную не нужно. Основная точка входа экспортирует OnPageEditor, контекстные хуки, реестр редакторов полей и PreviewToolbar. Точка ./client дает компонент OnPageClient для клиентского режима, а ./editor-kit содержит строительные блоки для собственных редакторов полей. Аннотации необязательны: locators на основе stega уже связывают большую часть текста с полями. Функция editable() из точки ./annotations нужна для изображений без alt-текста, для точной разметки строк макета и для списков массивов с кнопкой добавления. Она возвращает data-onpage атрибуты с ID документа и путем к полю и не имеет зависимостей, поэтому безопасна в серверных компонентах. Если режим редактирования выключен, функция возвращает пустой объект, и публичный HTML остается чистым. Для работы нужны React и react-dom 19 и Node.js 20.9 или новее. Версия 0.5.0 еще не достигла 1.0, поэтому API может измениться.