@paulpaulstudio/strapi-render 0.4.1 → 0.5.0

package/dist/index.d.cts

@@ -53,30 +53,56 @@ interface MsgEditMediaPicked {
 }
 type StrapiEditMessage = MsgEditReady | MsgEditChange | MsgEditCommitRequest | MsgEditOpenMediaPicker | MsgEditReload | MsgEditCommitResult | MsgEditMediaPicked;
 
-interface PendingChange {
-    path: string;
-    fieldType: StrapiFieldType;
-    value: unknown;
-}
 interface EditModeState {
     enabled: boolean;
     token: string | null;
-    changes: Map<string, PendingChange>;
-    isDirty: boolean;
-    isCommitting: boolean;
-    lastCommitError: string | null;
-    setChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
-    clearChange: (path: string) => void;
-    commit: () => void;
+    /**
+     * Wert/Path-Update an Parent (mit Content-Type-Kontext aus dem nächsten StrapiContent).
+     */
+    publishChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
     openMediaPicker: (path: string, multiple: boolean, allowedTypes: string[] | undefined, currentValue: unknown) => void;
     onMediaPicked: (path: string, listener: (value: unknown) => void) => () => void;
 }
+interface ContentScope {
+    uid: string;
+    kind: "singleType" | "collectionType";
+    documentId?: string;
+}
 declare function useStrapiEditMode(): EditModeState;
+declare function useContentScope(): ContentScope | null;
 interface ProviderProps {
     children: React.ReactNode;
     enabled?: boolean;
 }
+/**
+ * Edit-Mode wird aktiv wenn:
+ * - `?__pp_edit=1` in der URL, ODER
+ * - sessionStorage `__pp_edit_session=1` gesetzt (für Navigation innerhalb der
+ *   Customer-Site — beim ersten Aufruf via URL wird der Flag gesetzt, danach
+ *   bleibt der Mode aktiv auch wenn die URL-Params bei Folge-Links fehlen).
+ */
 declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
+interface StrapiContentProps {
+    /** Strapi-API-ID (z.B. "impressum", "home", "event"). */
+    uid: string;
+    /** "singleType" oder "collectionType". */
+    kind: "singleType" | "collectionType";
+    /** Bei collectionType erforderlich; bei singleType weglassen. */
+    documentId?: string;
+    children: React.ReactNode;
+}
+/**
+ * Marker, der allen inneren `<StrapiField>`s die Content-Type-Identität
+ * mitgibt. Ohne `<StrapiContent>` rund um Felder weiß der Parent-Editor
+ * nicht, wohin er die Änderung saven soll — Felder bleiben dann inert.
+ *
+ * Beispiel:
+ *   <StrapiContent uid="impressum" kind="singleType">
+ *     <StrapiText path="titel" value={data.titel} as="h1" />
+ *     <StrapiMarkdownField path="content" value={data.content} render={...} />
+ *   </StrapiContent>
+ */
+declare function StrapiContent({ uid, kind, documentId, children }: StrapiContentProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiFieldProps {
     path: string;
@@ -85,17 +111,6 @@ interface StrapiFieldProps {
     children: ReactNode;
     className?: string;
 }
-/**
- * Universeller Wrapper. Im Normal-Mode: rendert children unverändert.
- *
- * Im Edit-Mode:
- * - Für text/textarea/richText/email/number: macht das Top-Level-Child
- *   `contenteditable`, mit dünnem orange Hover-Outline, sammelt Wert-Änderungen
- *   in den globalen Edit-Context, der dann beim Klick auf "Speichern" alle
- *   Änderungen in einem Roundtrip ans Parent schickt.
- * - Für andere Typen (media/select/checkbox): trägt ein Click-Handler bzw.
- *   ein Overlay (Implementierung in jeweiligen Sugar-Komponenten).
- */
 declare function StrapiField({ path, type, value, children, className }: StrapiFieldProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiTextProps {
@@ -194,4 +209,4 @@ interface Props {
  */
 declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props): react_jsx_runtime.JSX.Element;
 
-export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, StrapiBlocks, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, StrapiMarkdownField, type StrapiMediaValue, StrapiText, useStrapiEditMode };
+export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, StrapiBlocks, StrapiContent, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, StrapiMarkdownField, type StrapiMediaValue, StrapiText, useContentScope, useStrapiEditMode };

package/dist/index.d.ts

@@ -53,30 +53,56 @@ interface MsgEditMediaPicked {
 }
 type StrapiEditMessage = MsgEditReady | MsgEditChange | MsgEditCommitRequest | MsgEditOpenMediaPicker | MsgEditReload | MsgEditCommitResult | MsgEditMediaPicked;
 
-interface PendingChange {
-    path: string;
-    fieldType: StrapiFieldType;
-    value: unknown;
-}
 interface EditModeState {
     enabled: boolean;
     token: string | null;
-    changes: Map<string, PendingChange>;
-    isDirty: boolean;
-    isCommitting: boolean;
-    lastCommitError: string | null;
-    setChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
-    clearChange: (path: string) => void;
-    commit: () => void;
+    /**
+     * Wert/Path-Update an Parent (mit Content-Type-Kontext aus dem nächsten StrapiContent).
+     */
+    publishChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
     openMediaPicker: (path: string, multiple: boolean, allowedTypes: string[] | undefined, currentValue: unknown) => void;
     onMediaPicked: (path: string, listener: (value: unknown) => void) => () => void;
 }
+interface ContentScope {
+    uid: string;
+    kind: "singleType" | "collectionType";
+    documentId?: string;
+}
 declare function useStrapiEditMode(): EditModeState;
+declare function useContentScope(): ContentScope | null;
 interface ProviderProps {
     children: React.ReactNode;
     enabled?: boolean;
 }
+/**
+ * Edit-Mode wird aktiv wenn:
+ * - `?__pp_edit=1` in der URL, ODER
+ * - sessionStorage `__pp_edit_session=1` gesetzt (für Navigation innerhalb der
+ *   Customer-Site — beim ersten Aufruf via URL wird der Flag gesetzt, danach
+ *   bleibt der Mode aktiv auch wenn die URL-Params bei Folge-Links fehlen).
+ */
 declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
+interface StrapiContentProps {
+    /** Strapi-API-ID (z.B. "impressum", "home", "event"). */
+    uid: string;
+    /** "singleType" oder "collectionType". */
+    kind: "singleType" | "collectionType";
+    /** Bei collectionType erforderlich; bei singleType weglassen. */
+    documentId?: string;
+    children: React.ReactNode;
+}
+/**
+ * Marker, der allen inneren `<StrapiField>`s die Content-Type-Identität
+ * mitgibt. Ohne `<StrapiContent>` rund um Felder weiß der Parent-Editor
+ * nicht, wohin er die Änderung saven soll — Felder bleiben dann inert.
+ *
+ * Beispiel:
+ *   <StrapiContent uid="impressum" kind="singleType">
+ *     <StrapiText path="titel" value={data.titel} as="h1" />
+ *     <StrapiMarkdownField path="content" value={data.content} render={...} />
+ *   </StrapiContent>
+ */
+declare function StrapiContent({ uid, kind, documentId, children }: StrapiContentProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiFieldProps {
     path: string;
@@ -85,17 +111,6 @@ interface StrapiFieldProps {
     children: ReactNode;
     className?: string;
 }
-/**
- * Universeller Wrapper. Im Normal-Mode: rendert children unverändert.
- *
- * Im Edit-Mode:
- * - Für text/textarea/richText/email/number: macht das Top-Level-Child
- *   `contenteditable`, mit dünnem orange Hover-Outline, sammelt Wert-Änderungen
- *   in den globalen Edit-Context, der dann beim Klick auf "Speichern" alle
- *   Änderungen in einem Roundtrip ans Parent schickt.
- * - Für andere Typen (media/select/checkbox): trägt ein Click-Handler bzw.
- *   ein Overlay (Implementierung in jeweiligen Sugar-Komponenten).
- */
 declare function StrapiField({ path, type, value, children, className }: StrapiFieldProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiTextProps {
@@ -194,4 +209,4 @@ interface Props {
  */
 declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props): react_jsx_runtime.JSX.Element;
 
-export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, StrapiBlocks, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, StrapiMarkdownField, type StrapiMediaValue, StrapiText, useStrapiEditMode };
+export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, StrapiBlocks, StrapiContent, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, StrapiMarkdownField, type StrapiMediaValue, StrapiText, useContentScope, useStrapiEditMode };

package/dist/index.js

@@ -1,30 +1,26 @@
 "use client";
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, Children, isValidElement, cloneElement, createElement, Fragment as Fragment$1 } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
+var EDIT_SESSION_KEY = "__pp_edit_session";
 var noop = () => {
 };
 var EditModeContext = createContext({
   enabled: false,
   token: null,
-  changes: /* @__PURE__ */ new Map(),
-  isDirty: false,
-  isCommitting: false,
-  lastCommitError: null,
-  setChange: noop,
-  clearChange: noop,
-  commit: noop,
+  publishChange: noop,
   openMediaPicker: noop,
   onMediaPicked: () => noop
 });
+var ContentScopeContext = createContext(null);
 function useStrapiEditMode() {
   return useContext(EditModeContext);
 }
+function useContentScope() {
+  return useContext(ContentScopeContext);
+}
 function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
   const [urlState, setUrlState] = useState({ enabled: false, token: null });
-  const [changes, setChanges] = useState(/* @__PURE__ */ new Map());
-  const [isCommitting, setIsCommitting] = useState(false);
-  const [lastCommitError, setLastCommitError] = useState(null);
   const mediaPickListeners = useRef(/* @__PURE__ */ new Map());
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -34,9 +30,15 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
     }
     try {
       const params = new URLSearchParams(window.location.search);
-      const edit = params.get("__pp_edit") === "1";
-      const token = params.get("__pp_token");
-      setUrlState({ enabled: edit, token });
+      const urlEdit = params.get("__pp_edit") === "1";
+      const sessionFlag = window.sessionStorage.getItem(EDIT_SESSION_KEY) === "1";
+      const enabled = urlEdit || sessionFlag;
+      if (urlEdit) {
+        window.sessionStorage.setItem(EDIT_SESSION_KEY, "1");
+      }
+      const token = params.get("__pp_token") ?? window.sessionStorage.getItem("__pp_edit_token");
+      if (token) window.sessionStorage.setItem("__pp_edit_token", token);
+      setUrlState({ enabled, token });
     } catch {
     }
   }, [enabledOverride]);
@@ -63,14 +65,9 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
         window.location.reload();
         return;
       }
-      if (d.type === "pp:edit:commit-result") {
-        setIsCommitting(false);
-        if (d.ok) {
-          setChanges(/* @__PURE__ */ new Map());
-          setLastCommitError(null);
-        } else {
-          setLastCommitError(d.error || "Speichern fehlgeschlagen");
-        }
+      if (d.type === "pp:edit:exit") {
+        window.sessionStorage.removeItem(EDIT_SESSION_KEY);
+        window.location.reload();
         return;
       }
       if (d.type === "pp:edit:media-picked") {
@@ -85,58 +82,12 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
     window.addEventListener("message", onMsg);
     return () => window.removeEventListener("message", onMsg);
   }, [urlState.enabled]);
-  const setChange = useCallback((path, fieldType, value2) => {
-    setChanges((prev) => {
-      const next = new Map(prev);
-      next.set(path, { path, fieldType, value: value2 });
-      return next;
-    });
-    setLastCommitError(null);
-    if (typeof window !== "undefined" && window.parent !== window) {
-      try {
-        window.parent.postMessage({ type: "pp:edit:change", path, fieldType, value: value2 }, "*");
-      } catch {
-      }
-    }
-  }, []);
-  const clearChange = useCallback((path) => {
-    setChanges((prev) => {
-      const next = new Map(prev);
-      next.delete(path);
-      return next;
-    });
+  const publishChange = useCallback((_path, _fieldType, _value) => {
   }, []);
-  const commit = useCallback(() => {
-    if (changes.size === 0) return;
-    if (typeof window === "undefined" || window.parent === window) return;
-    setIsCommitting(true);
-    setLastCommitError(null);
-    try {
-      window.parent.postMessage(
-        {
-          type: "pp:edit:commit-request",
-          changes: Array.from(changes.values())
-        },
-        "*"
-      );
-    } catch (err) {
-      setIsCommitting(false);
-      setLastCommitError(err instanceof Error ? err.message : String(err));
-    }
-  }, [changes]);
   const openMediaPicker = useCallback((path, multiple, allowedTypes, currentValue) => {
     if (typeof window === "undefined" || window.parent === window) return;
     try {
-      window.parent.postMessage(
-        {
-          type: "pp:edit:open-media-picker",
-          path,
-          multiple,
-          allowedTypes,
-          currentValue
-        },
-        "*"
-      );
+      window.parent.postMessage({ type: "pp:edit:open-media-picker", path, multiple, allowedTypes, currentValue }, "*");
     } catch {
     }
   }, []);
@@ -149,98 +100,34 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
   const value = useMemo(() => ({
     enabled: urlState.enabled,
     token: urlState.token,
-    changes,
-    isDirty: changes.size > 0,
-    isCommitting,
-    lastCommitError,
-    setChange,
-    clearChange,
-    commit,
+    publishChange,
     openMediaPicker,
     onMediaPicked
-  }), [urlState, changes, isCommitting, lastCommitError, setChange, clearChange, commit, openMediaPicker, onMediaPicked]);
-  return /* @__PURE__ */ jsxs(EditModeContext.Provider, { value, children: [
-    children,
-    urlState.enabled && /* @__PURE__ */ jsx(SaveBar, {})
-  ] });
+  }), [urlState, publishChange, openMediaPicker, onMediaPicked]);
+  return /* @__PURE__ */ jsx(EditModeContext.Provider, { value, children });
 }
-function SaveBar() {
-  const { isDirty, isCommitting, lastCommitError, changes, commit } = useStrapiEditMode();
-  if (!isDirty && !lastCommitError && !isCommitting) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        bottom: 24,
-        right: 24,
-        zIndex: 999999,
-        fontFamily: "system-ui, -apple-system, sans-serif"
-      },
-      children: [
-        lastCommitError && /* @__PURE__ */ jsx("div", { style: {
-          background: "#FA501E",
-          color: "#000",
-          padding: "8px 14px",
-          marginBottom: 8,
-          fontSize: 13,
-          fontWeight: 600,
-          maxWidth: 320
-        }, children: lastCommitError }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: commit,
-            disabled: isCommitting || !isDirty,
-            style: {
-              background: isCommitting ? "#666" : "#000",
-              color: "#EBC6DF",
-              border: "2px solid #000",
-              padding: "14px 22px",
-              fontSize: 13,
-              fontWeight: 700,
-              textTransform: "uppercase",
-              letterSpacing: "0.2em",
-              cursor: isCommitting ? "wait" : "pointer",
-              display: "flex",
-              alignItems: "center",
-              gap: 10,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
-              transition: "background 0.15s ease"
-            },
-            onMouseEnter: (e) => {
-              if (!isCommitting && isDirty) {
-                e.currentTarget.style.background = "#FA501E";
-                e.currentTarget.style.color = "#000";
-              }
-            },
-            onMouseLeave: (e) => {
-              if (!isCommitting && isDirty) {
-                e.currentTarget.style.background = "#000";
-                e.currentTarget.style.color = "#EBC6DF";
-              }
-            },
-            children: isCommitting ? /* @__PURE__ */ jsx("span", { children: "Speichere\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("span", { style: {
-                background: "#FA501E",
-                color: "#000",
-                width: 22,
-                height: 22,
-                borderRadius: "50%",
-                display: "inline-flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 11,
-                fontWeight: 700
-              }, children: changes.size }),
-              /* @__PURE__ */ jsx("span", { children: "Speichern" })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+function StrapiContent({ uid, kind, documentId, children }) {
+  const scope = useMemo(() => ({ uid, kind, documentId }), [uid, kind, documentId]);
+  return /* @__PURE__ */ jsx(ContentScopeContext.Provider, { value: scope, children });
+}
+function postEditChange(scope, path, fieldType, value) {
+  if (typeof window === "undefined" || window.parent === window) return;
+  if (!scope) {
+    console.warn("[strapi-render] Feld ohne <StrapiContent>-Scope \u2014 Save wird nicht funktionieren. Wickle deine Seite mit <StrapiContent uid='...' kind='...'> ein.");
+    return;
+  }
+  try {
+    window.parent.postMessage({
+      type: "pp:edit:change",
+      uid: scope.uid,
+      kind: scope.kind,
+      documentId: scope.documentId,
+      path,
+      fieldType,
+      value
+    }, "*");
+  } catch {
+  }
 }
 var EDITABLE_TYPES = /* @__PURE__ */ new Set([
   "text",
@@ -252,6 +139,7 @@ var EDITABLE_TYPES = /* @__PURE__ */ new Set([
 var HOVER_OUTLINE_COLOR = "#FA501E";
 function StrapiField({ path, type, value, children, className }) {
   const ctx = useStrapiEditMode();
+  const scope = useContentScope();
   const ref = useRef(null);
   const initialText = useRef(void 0);
   useEffect(() => {
@@ -307,7 +195,7 @@ function StrapiField({ path, type, value, children, className }) {
         const original = typeof value === "string" ? value : initialText.current ?? "";
         if (newText !== original) {
           const newValue = type === "number" ? newText === "" ? null : Number(newText) : newText;
-          ctx.setChange(path, type, newValue);
+          postEditChange(scope, path, type, newValue);
         }
       };
       props.onKeyDown = (e) => {
@@ -347,6 +235,7 @@ function resolveUrl(value, baseUrl) {
 var HOVER_OUTLINE_COLOR2 = "#FA501E";
 function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "lazy", fallback, allowedTypes, multiple = false, width, height, draggable }) {
   const ctx = useStrapiEditMode();
+  const scope = useContentScope();
   const containerRef = useRef(null);
   const imgRef = useRef(null);
   const handleClick = (e) => {
@@ -354,7 +243,7 @@ function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "l
     e.preventDefault();
     e.stopPropagation();
     const unsubscribe = ctx.onMediaPicked(path, (picked) => {
-      ctx.setChange(path, "media", picked);
+      postEditChange(scope, path, "media", picked);
       unsubscribe();
       if (imgRef.current && picked && typeof picked === "object" && !Array.isArray(picked) && "url" in picked) {
         imgRef.current.src = resolveUrl(picked, baseUrl);
@@ -576,6 +465,7 @@ function parseBlocksFromDOM(root) {
 }
 function StrapiBlocks({ path, value, className }) {
   const ctx = useStrapiEditMode();
+  const scope = useContentScope();
   const containerRef = useRef(null);
   const initialValue = useRef(null);
   const blocks = Array.isArray(value) ? value : [];
@@ -616,7 +506,7 @@ function StrapiBlocks({ path, value, className }) {
         const before = JSON.stringify(initialValue.current);
         const after = JSON.stringify(parsed);
         if (before !== after) {
-          ctx.setChange(path, "blocks", parsed);
+          postEditChange(scope, path, "blocks", parsed);
         }
         e.currentTarget.style.outlineColor = "transparent";
         e.currentTarget.style.outlineStyle = "dashed";
@@ -628,6 +518,7 @@ function StrapiBlocks({ path, value, className }) {
 var HOVER_OUTLINE2 = "#FA501E";
 function StrapiMarkdownField({ path, value, render, className, minRows = 12 }) {
   const ctx = useStrapiEditMode();
+  const scope = useContentScope();
   const [draft, setDraft] = useState(value ?? "");
   const initial = useRef(value ?? "");
   useEffect(() => {
@@ -645,7 +536,7 @@ function StrapiMarkdownField({ path, value, render, className, minRows = 12 }) {
         onChange: (e) => setDraft(e.target.value),
         onBlur: () => {
           if (draft !== initial.current) {
-            ctx.setChange(path, "richText", draft);
+            postEditChange(scope, path, "richText", draft);
           }
         },
         onFocus: (e) => {
@@ -693,6 +584,6 @@ function StrapiMarkdownField({ path, value, render, className, minRows = 12 }) {
   ] });
 }
 
-export { StrapiBlocks, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiMarkdownField, StrapiText, useStrapiEditMode };
+export { StrapiBlocks, StrapiContent, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiMarkdownField, StrapiText, useContentScope, useStrapiEditMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map