Visual Editing

Описание

Плагин связывает Next.js-фронтенд с админкой Payload для визуального редактирования. На сервере хуки afterRead и afterOperation добавляют в коллекции и глобалы, которые не пропущены через skipCollections и skipGlobals, невидимые маркеры Vercel stega с путём каждого поля. Маркеры встраиваются только в черновые чтения вне админки, а опубликованные страницы и форма админки не меняются. Клиентский оверлей находит маркеры в DOM отрендеренной страницы, обводит редактируемые элементы и выводит кнопку Edit. Клик отправляет postMessage в админку, и VisualEditingBridgeProvider фокусирует соответствующее поле в форме. Текстовые поля, textarea и email обрабатываются автоматически. Для richText и upload нужно обернуть отрисовываемый элемент функцией withVisualEditingPath, так как их значения не кодируются inline. Хук beforeChange удаляет целые маркеры из входящих записей, поэтому в базу данных они не попадают. Настройки: skipCollections, skipGlobals, excludeFieldNames, excludeValues (предикаты по форме значения: URL, slug, hash, ISO-дата), adminBasePath (по умолчанию /admin) и enrichment со значениями 'auto' или 'explicit'. В режиме explicit чтения должны передавать context: { visualEditing: true }. Для работы нужны включенные drafts в коллекциях, preview-маршруты с draftMode Next.js и Live Preview, указывающий на preview-маршрут. Плагин требует payload ^3.79.0, @payloadcms/ui ^3.79.0 и React 18 или 19, Next.js опционален (14, 15 или 16). Обогащение зависит от draft mode и настройки Live Preview, поэтому на опубликованных страницах оно не работает.

О пакете

Имя пакета

@focus-reactive/payload-plugin-visual-editing

Последняя версия

1.1.0

Размер

324 кБ

Лицензия

MIT

Загрузок в неделю

113

Последняя публикация

5 окт. 2026 г.