Live Nav

Über

payload-live-nav erweitert das Payload-Admin um eine Abschnittsnavigation und bindet diese an Live Preview. Auf langen Seiten scrollen Formular und Preview-Iframe normalerweise unabhängig voneinander, was das Finden des richtigen Feldes erschwert. Das Plugin schließt diese Lücke mit zwei Komponenten: einer Fokus-Bridge und einem Seitenindex. Die Fokus-Bridge ist immer aktiv. Die Admin-Seite hört auf `focusin`-Events und liest das interne `field-<path>`-DOM-ID-Schema von Payload aus, um das fokussierte Feld zu ermitteln. Der Feldpfad wird per `postMessage` an den Live-Preview-Iframe gesendet. Auf der Frontend-Seite findet entweder die React-Komponente `<LiveNavListener />` oder die framework-agnostische Funktion `attachLiveNavListener()` das Element mit dem passenden `data-cms-field`-Attribut, scrollt es in den sichtbaren Bereich und hebt es mit einer goldenen Umrandung hervor. Trefferlose Kinderpfade klettern zum Elternpfad auf, sodass ein Gruppenpfad wie `faq` über `faq.headline` aufgelöst wird. Der Seitenindex ist eine einklappbare Seitenleiste auf den konfigurierten Edit-Ansichten. Über eine `entities`-Map, die nach Collection- oder Global-Slug geschlüsselt ist, wird pro Eintrag die Seitenleiste mit den Abschnitten eingeblendet. Ein Klick scrollt das Formular zur entsprechenden Gruppe und steuert die Preview auf denselben Abschnitt. Jeder Abschnitt benötigt ein Label, einen Feldpfad und ein optionales `adminLabel` als Fallback. Funktioniert nur mit Same-Origin-Setups, was der Standardkonfiguration von Payloads Live Preview entspricht. Die Fokus-Bridge nutzt das interne Feld-ID-Schema von Payload. Falls eine künftige Version dieses Schema ändert, degradiert das Plugin zu einem stillen No-Op, ohne das Admin zu beeinträchtigen, und der Seitenindex greift auf einen Match der Überschrift zurück. Die Tests erfolgten auf Payload 3.85, auf Version 4.x ist das Plugin nicht getestet.

Paketinformationen

Paketname

payload-live-nav

Neueste Version

0.1.1

Entpackte Größe

35 kB

Lizenz

MIT

Wöchentliche Downloads

6

Zuletzt veröffentlicht

8. Aug. 2026