Live Nav

Описание

payload-live-nav добавляет в админку Payload навигацию по разделам и привязывает её к Live Preview. На длинных страницах обычно приходится отдельно скроллить форму редактирования и iframe превью, разыскивая нужное поле. Плагин закрывает этот пробел двумя механизмами: мостом фокуса и индексом разделов. Мост фокуса работает всегда. Админская сторона слушает события focusin и читает внутреннюю схему Payload для DOM-идентификаторов вида `field-<path>`, определяя, в каком поле вы находитесь, затем отправляет путь в iframe Live Preview через postMessage. Фронтенд-половина, компонент `<LiveNavListener />` для React или фреймворк-агностик функция `attachLiveNavListener()`, находит элемент, помеченный атрибутом `data-cms-field` с совпадающим значением, прокручивает к нему и подсвечивает золотой рамкой. Непарные дочерние пути поднимаются к родителю, поэтому групповой путь вроде `faq` резолвится через `faq.headline`. Индекс разделов представляет собой сворачиваемую панель на настраиваемых страницах редактирования. Вы передаёте карту `entities`, ключами которой служат slug коллекции или global, и каждая указанная сущность получает панель со списком своих разделов. Один клик прокручивает форму к нужной группе и отправляет превью к тому же разделу. Каждый раздел принимает label, field path и необязательный `adminLabel`, используемый как фолбэк при изменении схемы идентификаторов Payload. Работает только с same-origin, что является стандартной схемой Live Preview в Payload. Мост фокуса зависит от внутренней схемы field id; если будущая версия её изменит, плагин просто перестанет работать, не ломая админку, а индекс разделов переключится на сопоставление по тексту заголовка группы. Плагин протестирован на Payload 3.85 и не тестировался на 4.x, внутренности которой могут отличаться.

О пакете

Имя пакета

payload-live-nav

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

0.1.1

Размер

35 кБ

Лицензия

MIT

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

6

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

8 авг. 2026 г.