Puck ist der von Measured entwickelte visuelle Open-Source-Editor für React – eine selbst gehostete Alternative zu builder.io, WordPress und anderen WYSIWYG-Tools.

Wir feiern 5.000 Sterne auf GitHub! Vielen Dank an unsere wunderbare Community!

Puck v0.16 ist eine große Veröffentlichung, die die Headline-Berechtigungs-API und – Sie haben es erraten – Verbesserungen der Lebensqualität einführt. Es hat eine Weile gedauert, dieses zusammenzustellen, und wir danken Ihnen für Ihre Geduld und Unterstützung.

• Berechtigungen: Schalten Sie Puck-Funktionen wie Duplizieren, Ziehen und Löschen über die neuen Berechtigungen und ResolverPermissions-APIs um.
• Aktionsleisten-Überschreibung: Erstellen Sie benutzerdefinierte Aktionsleisten mit der ActionBar-Überschreibung oder erweitern Sie die Standardleiste mit der neuen -Komponente.
• Iframe-Stilinjektion: Greifen Sie über die neue Iframe-Überschreibung auf das Iframe-Dokument zu, um Stile direkt einzufügen oder andere Änderungen vorzunehmen. Wir haben auch das Emotion-Cache-Plugin für den allgemeinen Anwendungsfall Emotion eingeführt.
• History-Injektion: Injizieren Sie den Rückgängig-/Wiederherstellen-Verlauf über eine Reihe neuer APIs
• Auf Aktionen reagieren: Reagieren Sie auf Aktionen, die Puck über den onAction-Callback auslöst.
• Optionale Felder: Optionale Requisiten müssen nicht mehr in Feldern definiert werden, da sie möglicherweise definiert sind

Aktualisieren Sie noch heute oder beginnen Sie mit:

npx create-puck-app@latest

Berechtigungen

Mit Berechtigungen können Sie die Kernfunktionen von Puck global, pro Komponente oder dynamisch umschalten. Vielen Dank an @xaviemirmon für seine Bemühungen in diesem Bereich.

export function Editor() {
  return (
    
  );
}

Überschreiben der Aktionsleiste

Mit der neuen ActionBar-Überschreibung können Sie ein benutzerdefiniertes Aktionsleisten-Overlay erstellen oder das Standard-Overlay mit der -Komponente erweitern:

const overrides = {
  actionBar: ({ children }) => (
    
      {/* Render default actions */}
      {children}

      {/* Render new actions */}
      
         console.log("Clicked!")}>
          ★
        
      
    
  ),
};

Injektion im Iframe-Stil

Mit der Iframe-Überschreibung können Sie auf das Iframe-Dokument zugreifen und so Stile in den Kopf einfügen:

const overrides = {
  iframe: ({ children, document }) => {
    useEffect(() => {
      if (document) {
        document.body.setAttribute("style", "background: hotpink;");
      }
    }, [document]);

    return {children}>;
  },
};

Das neue Emotion-Cache-Plugin verwendet diese API, um einen Emotion-Cache innerhalb des Iframes zu erstellen, wodurch Puck einfach mit jeder Emotion-basierten Komponentenbibliothek verwendet werden kann.

Geschichtsinjektion

Verwenden Sie die neuen History-Injection-APIs, um Ihren eigenen Rückgängig-/Wiederholen-Verlauf über die initialHistory-Requisite oder dynamisch über die Funktionen setHistories und setHistoryIndex von usePuck().history bereitzustellen.

const historyState = {
  data: {
    root: {
      props: { title: "My History" },
    },
  },
};

export function Editor() {
  return (
    
  );
}

Reagieren Sie auf Aktionen

Mit der onAction-API können Sie auf interne Aktionen von Puck reagieren, sobald diese ausgeführt werden:

export function Editor() {
  return (
     {
        if (action.type === "insert") {
          console.log("New component was inserted", appState);
        }
      }}
    />
  );
}

Bahnbrechende Veränderungen

„history.data“ heißt jetzt „history.state“.

Bei Verwendung der usePuck-Verlaufs-API werden Daten jetzt in Status umbenannt.

History.id ist jetzt optional (TypeScript)

Bei Verwendung der usePuck-History-API ist die ID jetzt optional. Puck generiert immer eine ID, aber TypeScript kann sich beschweren.

lastData wird jetzt in Resolvern als null statt als {} zurückgegeben, wenn es leer ist

Wenn Sie die Option „lastData“ verwenden, die für die Funktionen „resolveData“ oder „resolveFields“ bereitgestellt wird, und keine vorherigen Daten vorhanden sind, ist „lastData“ jetzt null anstelle von {}.

Vollständiges Änderungsprotokoll

Merkmale

• ActionBar-Überschreibung zum Hinzufügen von Komponentensteuerelementen hinzufügen (48ec0d7)
• Automatischen RSC-Export hinzufügen und /rsc-Bundle (d21eba6) ersetzen
• isDisabled-Requisite zu Drawer.Item (cad95b8) hinzufügen
• generischen Typ zur Verwendung hinzufügenPuck-Hook (01703a9)
• Iframe-Override für Style-Injektion hinzufügen (7cac376)
• InitialHistory-Requisite zu Puck hinzufügen (54b5a87)
• onAction-API hinzufügen, um Statusänderungen zu verfolgen und darauf zu reagieren (c7007ac)
• Berechtigungen hinzufügen API (a43914d)
• Plugin zum Einfügen von Emotion-Cache hinzufügen (f8a88b9)
• resolvePermissions API hinzufügen (f0655f0)
• WaitForStyles-Option zur Iframe-Konfiguration hinzufügen (bc81d9c)
• resolveData aufrufen, wenn neues Element eingefügt wird (3298831)
• Keine Felder für optionale Requisiten vorschreiben (5a219ef)
• ActionBar-Komponente zur Verwendung in Überschreibungen exportieren (04fd6c5)
• Datentyp aus Benutzerkonfiguration ableiten (50045bb)
• ID im Verlaufstyp optional machen (BREAKING CHANGE) (d917229)
• ES-Modul-Build bereitstellen (ff9076b)
• history.data in History.state umbenennen (BREAKING CHANGE) (b09244c)
• Spinner anzeigen, wenn die Iframe-Last mehr als 500 ms dauert (cfecf54)
• usePuck History API optimieren (c8b2807)
• Upgrade des „nächsten“ Rezepts auf [email protected] (60fe631)

Fehlerbehebungen

• Favicon zum nächsten Rezept hinzufügen, um Puck 404 (2c52d27) zu verhindern
• Fehlenden ReadOnly-Status zu externen Feldern hinzufügen (bf1449d)
• Verlauf immer beim Einfügen von Komponenten aufzeichnen (88c5ab6)
• Route im nächsten Rezept nicht zwischenspeichern/bearbeiten (94f16b2)
• Schaltflächen nicht senden, wenn Puck im Formular verwendet wird (f761e5f)
• Stellen Sie sicher, dass die Demotypen mit TypeScript@5 (958dc25) zufrieden sind
• fehlenden Plugin-Typ exportieren (eb42734)
• Absturz beheben, wenn Komponente in Daten in der Konfiguration fehlt (0daf478)
• Verbesserung der Ausfallsicherheit von Iframe-CSS für einige Frameworks, wie Mantine (538cb05)
• Konfigurations- und Datentypen robuster machen (6bcf555)
• Endlosschleife bei Verwendung von Plugins mit einigen Frameworks verhindern (3870871)
• Verhindern Sie, dass Tailwind mit der Zoomauswahl im Ansichtsfenster kollidiert (9151255)
• Körperrand im Remix-Rezept entfernen (0898b26)
• Größe des Ansichtsfensters ändern, wenn es über den App-Status geändert wird (14419ec)
• Felder auflösen, wenn zwischen Elementen desselben Typs gewechselt wird (a3518ca)
• lastData als Null statt als leeres Objekt in Resolvern zurückgeben (BREAKING CHANGE) (648eb92)
• Warnung anzeigen, wenn Überschriftenanalysator-Stile nicht geladen sind (4e7110b)
• Verwenden Sie die richtige Farbe in FieldLabel-Beschriftungen (b0469a1)

Neue Mitwirkende

• @mkilpatrick hat seinen ersten Beitrag unter https://github.com/measuredco/puck/pull/505 geleistet
• @nova4u hat seinen ersten Beitrag unter https://github.com/measuredco/puck/pull/538 geleistet
• @antonmalyavkin hat seinen ersten Beitrag unter https://github.com/measuredco/puck/pull/585 geleistet

Vollständiges Änderungsprotokoll: https://github.com/measuredco/puck/compare/v0.15.0...v0.16.0