@paulpaulstudio/strapi-render 0.4.1 → 0.5.1

package/dist/index.cjs

@@ -4,29 +4,25 @@
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+var EDIT_SESSION_KEY = "__pp_edit_session";
 var noop = () => {
 };
 var EditModeContext = react.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 = react.createContext(null);
 function useStrapiEditMode() {
   return react.useContext(EditModeContext);
 }
+function useContentScope() {
+  return react.useContext(ContentScopeContext);
+}
 function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
   const [urlState, setUrlState] = react.useState({ enabled: false, token: null });
-  const [changes, setChanges] = react.useState(/* @__PURE__ */ new Map());
-  const [isCommitting, setIsCommitting] = react.useState(false);
-  const [lastCommitError, setLastCommitError] = react.useState(null);
   const mediaPickListeners = react.useRef(/* @__PURE__ */ new Map());
   react.useEffect(() => {
     if (typeof window === "undefined") return;
@@ -36,9 +32,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]);
@@ -65,14 +67,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") {
@@ -87,58 +84,12 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
     window.addEventListener("message", onMsg);
     return () => window.removeEventListener("message", onMsg);
   }, [urlState.enabled]);
-  const setChange = react.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 = react.useCallback((path) => {
-    setChanges((prev) => {
-      const next = new Map(prev);
-      next.delete(path);
-      return next;
-    });
+  const publishChange = react.useCallback((_path, _fieldType, _value) => {
   }, []);
-  const commit = react.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 = react.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 {
     }
   }, []);
@@ -151,98 +102,34 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
   const value = react.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__ */ jsxRuntime.jsxs(EditModeContext.Provider, { value, children: [
-    children,
-    urlState.enabled && /* @__PURE__ */ jsxRuntime.jsx(SaveBar, {})
-  ] });
+  }), [urlState, publishChange, openMediaPicker, onMediaPicked]);
+  return /* @__PURE__ */ jsxRuntime.jsx(EditModeContext.Provider, { value, children });
 }
-function SaveBar() {
-  const { isDirty, isCommitting, lastCommitError, changes, commit } = useStrapiEditMode();
-  if (!isDirty && !lastCommitError && !isCommitting) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        position: "fixed",
-        bottom: 24,
-        right: 24,
-        zIndex: 999999,
-        fontFamily: "system-ui, -apple-system, sans-serif"
-      },
-      children: [
-        lastCommitError && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-          background: "#FA501E",
-          color: "#000",
-          padding: "8px 14px",
-          marginBottom: 8,
-          fontSize: 13,
-          fontWeight: 600,
-          maxWidth: 320
-        }, children: lastCommitError }),
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "Speichere\u2026" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: "Speichern" })
-            ] })
-          }
-        )
-      ]
-    }
-  );
+function StrapiContent({ uid, kind, documentId, children }) {
+  const scope = react.useMemo(() => ({ uid, kind, documentId }), [uid, kind, documentId]);
+  return /* @__PURE__ */ jsxRuntime.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",
@@ -254,6 +141,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 = react.useRef(null);
   const initialText = react.useRef(void 0);
   react.useEffect(() => {
@@ -309,7 +197,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) => {
@@ -349,6 +237,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 = react.useRef(null);
   const imgRef = react.useRef(null);
   const handleClick = (e) => {
@@ -356,7 +245,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);
@@ -421,7 +310,16 @@ function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "l
       ref: containerRef,
       "data-pp-edit": path,
       "data-pp-type": "media",
-      style: { position: "relative", display: "inline-block", outline: "1px dashed transparent", outlineOffset: 2, transition: "outline-color 0.15s ease" },
+      style: {
+        position: "relative",
+        display: "block",
+        // Wrapper ist block-level damit das innere img mit className w-full / h-[60vh] etc.
+        // die korrekte Größe ausfüllt. Im Read-Mode (kein Wrapper) hatte das img direkt
+        // diese Größe — beim Wrap mit inline-block-span schrumpfte das.
+        outline: "1px dashed transparent",
+        outlineOffset: 2,
+        transition: "outline-color 0.15s ease"
+      },
       onMouseEnter: (e) => {
         e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR2;
         const btn = e.currentTarget.querySelector("[data-pp-edit-btn]");
@@ -578,6 +476,7 @@ function parseBlocksFromDOM(root) {
 }
 function StrapiBlocks({ path, value, className }) {
   const ctx = useStrapiEditMode();
+  const scope = useContentScope();
   const containerRef = react.useRef(null);
   const initialValue = react.useRef(null);
   const blocks = Array.isArray(value) ? value : [];
@@ -618,7 +517,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";
@@ -630,6 +529,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] = react.useState(value ?? "");
   const initial = react.useRef(value ?? "");
   react.useEffect(() => {
@@ -647,7 +547,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) => {
@@ -696,12 +596,14 @@ function StrapiMarkdownField({ path, value, render, className, minRows = 12 }) {
 }
 
 exports.StrapiBlocks = StrapiBlocks;
+exports.StrapiContent = StrapiContent;
 exports.StrapiEditModeProvider = StrapiEditModeProvider;
 exports.StrapiField = StrapiField;
 exports.StrapiImage = StrapiImage;
 exports.StrapiList = StrapiList;
 exports.StrapiMarkdownField = StrapiMarkdownField;
 exports.StrapiText = StrapiText;
+exports.useContentScope = useContentScope;
 exports.useStrapiEditMode = useStrapiEditMode;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map