On-Page Editing

Name: On-Page Editing
Brand: jellologic
Availability: InStock
Author: jellologic

Ergänzt Payload-Collections und Globals um Inline-Bearbeitung direkt auf der Next.js-Seite, mit Draft-Speicherung und Preview-Links.

Community 0 1684/Wo. MIT v0.6.0

Installation

$ pnpm add @payload-onpage/plugin

Über

Das Plugin ergänzt Payload 3 um Inline-Bearbeitung direkt auf der gerenderten Seite. Die Collections und Globals, die in den Optionen `collections` und `globals` aufgeführt sind, lassen sich so ändern: Editoren klicken auf einen Textbereich im Frontend, tippen, und die Änderung wird als Draft gespeichert. Dafür stellt das Plugin Endpoints bereit, um den Bearbeitungsmodus zu starten, den Modus zu wechseln, ihn zu beenden und Preview-Links zu erzeugen. Alle diese Endpoints benötigen einen `session`-Adapter. Der dokumentierte Adapter ist `nextSession()` aus `@payload-onpage/next/session`. Die Speicherung läuft über die REST-API von Payload, nicht über einen eigenen Kanal. Access Control, Hooks, Validierung, Drafts und Versionen greifen deshalb wie bei jedem anderen Schreibzugriff. Die Berechtigung prüft das Plugin über `docAccessOperation` für jedes Dokument. Zusätzlich entfernen Marker-Hooks in `beforeValidate` und `beforeChange` die Metadaten des Editors, bevor gespeichert wird. Ein Stale-Write-Guard in `beforeChange` lehnt Speicherungen ab, wenn das Dokument seit dem Laden durch den Editor geändert wurde. Der `afterRead`-Hook wendet das Auto-Mapping an, sofern es angefordert wird. Im Admin-Bereich erscheinen für jedes aktivierte Dokument ein Button "Edit on page" und ein Button "Copy preview link", beide über `beforeDocumentControls`. Pro Dokument lassen sich `fields` und `url` festlegen. Weitere Optionen sind `access`, `session`, `encode`, `previewLinkTTL`, `validatePreviewLink`, `secret`, `authCookie`, `routePrefix` und `enabled`. Ist `serverURL` in Produktion nicht gesetzt, schreibt das Plugin eine Warnung ins Log. Redirects, Preview-Links und Secure-Cookies brauchen die öffentliche Origin. Fehlt `session` oder ist `secret` leer, bricht die Konfiguration mit einem `InvalidConfiguration`-Fehler ab. Das Plugin zielt auf Next.js-Frontends, in den Keywords der README wird außerdem TanStack Start genannt.