HTML Preview and Click-to-Edit

Описание

Плагин добавляет живое превью в админку Payload для сайтов, которые отдают HTML без JavaScript-фреймворка: статические генераторы, шаблоны Nunjucks или Liquid, Eleventy, PHP. Встроенное live preview Payload рассчитано на фронтенд, который подписывается на данные формы и сам перерисовывается, а такие шаблоны на это не способны. Вместо этого CMS вызывает render endpoint на вашем сайте, передает сохраненный документ или несохраненные данные формы из редактора и показывает готовую страницу. Страница проксируется через Payload, поэтому у нее один origin, а относительные ссылки на ассеты тоже загружаются через CMS. Подключение выполняется через htmlPreviewPlugin в payload.config.ts: вы передаете список коллекций и функцию site. Функция получает req и id документа, проверяет доступ с overrideAccess: false и возвращает URL для рендера, заголовки (например, секрет превью), а также basePath или scrollOffset для фиксированной шапки. Плагин добавляет компонент в форму редактирования каждой указанной коллекции, поэтому после установки нужно выполнить pnpm payload generate:importmap. Сайт должен отвечать на GET сохраненной страницей, а на POST принимать JSON с телом doc. Click-to-edit работает через атрибуты data-payload-id, data-payload-doc и data-payload-field, которые сайт выводит только при включенном preview. Клик по блоку переключает нужную вкладку, раскрывает свернутые строки и прокручивает страницу к полю. Клик по элементу другой коллекции открывает ее документ в drawer, не сбрасывая несохраненные правки. Если сайт не умеет рендерить по запросу, можно указать unsaved: false, и тогда превью покажет только опубликованные страницы без несохраненных изменений. Статическим хостингам нужна функция рендера с файлами, которые лежат рядом с ней, а динамические пути в require ломаются в бандлерах функций.

О пакете

Имя пакета

@focus-reactive/payload-plugin-html-preview

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

1.0.2

Размер

134 кБ

Лицензия

MIT

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

371

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

28 сент. 2026 г.