On-Page React Editor

Name: On-Page React Editor
Brand: jellologic
Availability: InStock
Author: jellologic

Stellt eine Inline-Editor-Oberfläche für Payload-Seiten in React-Frontends bereit, mit Toolbars, Feldeditoren und Element-Annotationen.

Community 0 1910/Wo. MIT v0.6.0

Installation

$ pnpm add @payload-onpage/react

Über

Das Paket @payload-onpage/react ist die React-Oberfläche des Editors von payload-onpage. Es legt ein Bearbeitungs-Overlay über die gerenderte Seite und bringt Row-Toolbars, ein Settings-Panel, ein Dock, eine Preview-Toolbar sowie Feldeditoren für Text, Zahlen, Datumswerte, Checkboxen, Farben, Selects, Relationships und Uploads mit. Änderungen werden über einen Data-Source-Adapter zurück nach Payload geschrieben. Laut README entstehen dabei automatisch gespeicherte Entwürfe. Die Bibliothek ist framework-unabhängig. Für Next.js bindet der Adapter @payload-onpage/next die Oberfläche in eine Seite des App Routers ein. Wer Next.js verwendet, installiert in der Regel diesen Adapter und verdrahtet das React-Paket nicht selbst. Die Editor-Komponenten erhalten ein dataSource-Objekt, etwa payloadRest(), ein media-Objekt, etwa payloadUploads(), sowie ein links-Objekt mit einer Exit-URL. Das Paket hat vier Einstiegspunkte. Der Hauptexport stellt OnPageEditor, die Context-Hooks, die Registry der Feldeditoren und die PreviewToolbar bereit. Der Export ./annotations hat keine Abhängigkeiten und lässt sich in Server Components verwenden. Die Funktion editable() liefert data-onpage-Attribute, die DOM-Elemente einer Dokument-ID und einem Feldpfad zuordnen. Ist der Editor deaktiviert, gibt sie ein leeres Objekt zurück, sodass das öffentliche HTML sauber bleibt. Der Export ./client liefert OnPageClient für den Client-Modus, ./editor-kit enthält die Bausteine für eigene Feldeditoren. Annotationen sind optional. Die Stega-basierten Locators erfassen die meisten Textinhalte automatisch. Annotationen werden vor allem für Bilder ohne Alt-Text, für exakt definierte Layout-Zeilen und für Array-Listen mit Add-Button benötigt. Das Paket setzt React 19 und Node 20.9 oder neuer voraus und hängt für Dokumentreferenzen von @payload-onpage/core ab. Die Version 0.5.0 ist ein Release vor 1.0, die API kann sich daher noch ändern.