HTML Preview and Click-to-Edit

Über

Payloads eingebaute Live-Vorschau setzt voraus, dass das Frontend Formulardaten abonniert und sich selbst neu rendert. Templates aus Nunjucks, Liquid, Eleventy oder PHP können das nicht. Dieses Plugin ruft stattdessen einen Render-Endpunkt der Website auf, übergibt das gespeicherte Dokument oder die ungespeicherten Formulardaten und zeigt die Seite im Admin an. Die Seite wird über Payload ausgeliefert, damit sie einen einzigen Origin hat. Relative Asset-URLs lädt der CMS-Server ebenfalls über Payload. Das Plugin wird in der payload.config mit htmlPreviewPlugin registriert. Es erhält eine Liste von Collections und eine site-Funktion. Diese bekommt req und id, prüft den Zugriff mit overrideAccess: false und gibt die Render-URL zurück, optional Header wie ein Preview-Secret sowie die Optionen basePath und scrollOffset. Das Plugin ergänzt die Edit-View jeder aufgeführten Collection um eine Komponente, daher muss nach der Installation pnpm payload generate:importmap ausgeführt werden. Die Website braucht eine Route, die bei GET die gespeicherte Seite und bei POST einen JSON-Body mit doc beantwortet. Die README enthält Beispiele für Astro mit On-Demand-Rendering, eine Eleventy-Funktion, die Nunjucks ohne Eleventy rendert, und eine Express-Route. Click-to-Edit basiert auf den Attributen data-payload-id, data-payload-doc und data-payload-field. Die Website gibt sie nur aus, wenn preview aktiv ist. Ein Klick auf einen Block wechselt im Admin zum passenden Tab, klappt zugeklappte Rows auf und scrollt zum Feld. Ein Klick auf ein Element einer anderen Collection öffnet das Dokument in einer Drawer, ohne ungespeicherte Änderungen zu verwerfen. Hat die Seite einen fixen Header, verschiebt scrollOffset den Scroll-Ziel um einen px-Wert oder einen Selektor. Mit unsaved: false zeigt die Vorschau nur veröffentlichte Seiten und ignoriert ungespeicherte Änderungen. Statische Hosts brauchen eine Render-Funktion mit den Dateien, die daneben ausgeliefert werden. In Function-Bundlern funktionieren dynamische require-Pfade nicht.

Paketinformationen

Paketname

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

Neueste Version

1.0.2

Entpackte Größe

134 kB

Lizenz

MIT

Wöchentliche Downloads

371

Zuletzt veröffentlicht

28. Sep. 2026