Visual Editing

Über

Das Plugin verbindet ein Next.js-Frontend mit dem Payload-Admin für Visual Editing. Auf dem Server registriert es afterRead- und afterOperation-Hooks an allen Collections und Globals, die nicht übersprungen werden. Beim Lesen eines Drafts für das Frontend bettet es unsichtbare Vercel-stega-Marker in String-Werte ein, die den Feldpfad jedes Feldes enthalten. Published-Reads und das Admin-Formular bleiben unverändert. Das Client-Overlay durchsucht das gerenderte DOM nach diesen Markern und zeichnet für jedes bearbeitbare Element einen Rahmen mit einem Edit-Badge. Ein Klick auf das Badge sendet eine postMessage an den Admin, der das zugehörige Feld im Formular fokussiert. Der VisualEditingBridgeProvider wird als Admin-Provider registriert, daher muss die Import Map nach Änderungen an der Konfiguration neu generiert werden. Ein beforeChange-Hook entfernt unversehrte Marker aus Schreibvorgängen, sodass sie nicht in der Datenbank landen. Für den Frontend-Einsatz werden die Client-Exporte VisualEditing.Provider, Toggle, Overlay und withVisualEditingPath in einem Layout mit Next.js draftMode eingebunden. Die Collections brauchen versions: { drafts: true }, und die Live-Preview-URL muss auf die Preview-Route zeigen. Text-, Textarea- und E-Mail-Felder werden automatisch angereichert. richText- und Upload-Felder erhalten diese Markierung nicht inline, deshalb muss das gerenderte Element mit withVisualEditingPath versehen werden. Die Optionen skipCollections, skipGlobals, excludeFieldNames, excludeValues (Prädikate für Wertformate wie URL, Slug, Hash oder ISO-Datum), adminBasePath (Standard '/admin') und enrichment ('auto' oder 'explicit') steuern den Umfang. Im Modus 'explicit' muss jeder Read context: { visualEditing: true } übergeben. Das Plugin setzt Payload 3.79 oder neuer und React 18 oder 19 voraus, Next.js ist optional (14, 15 oder 16). Die Anreicherung hängt von Next.js Draft Mode und dem Live-Preview-Setup ab und greift nicht auf veröffentlichten Seiten.

Paketinformationen

Paketname

@focus-reactive/payload-plugin-visual-editing

Neueste Version

1.1.0

Entpackte Größe

324 kB

Lizenz

MIT

Wöchentliche Downloads

113

Zuletzt veröffentlicht

5. Okt. 2026