@paulpaulstudio/strapi-render 0.1.1 → 0.3.0

package/dist/index.js

@@ -1,13 +1,31 @@
 "use client";
-import { createContext, useContext, useState, useEffect, useMemo, useCallback, Children, isValidElement, cloneElement, createElement, Fragment as Fragment$1 } from 'react';
-import { jsx, Fragment } from 'react/jsx-runtime';
+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';
 
-var EditModeContext = createContext({ enabled: false, token: null });
+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,
+  openMediaPicker: noop,
+  onMediaPicked: () => noop
+});
 function useStrapiEditMode() {
   return useContext(EditModeContext);
 }
 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;
     if (enabledOverride !== void 0) {
@@ -31,10 +49,7 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
     if (!urlState.enabled) return;
     if (window.parent === window) return;
     try {
-      window.parent.postMessage(
-        { type: "pp:edit:ready", href: window.location.href },
-        "*"
-      );
+      window.parent.postMessage({ type: "pp:edit:ready", href: window.location.href }, "*");
     } catch {
     }
   }, [urlState.enabled]);
@@ -43,91 +58,278 @@ function StrapiEditModeProvider({ children, enabled: enabledOverride }) {
     if (!urlState.enabled) return;
     function onMsg(e) {
       const d = e.data;
-      if (d && typeof d === "object" && d.type === "pp:edit:reload") {
+      if (!d || typeof d !== "object") return;
+      if (d.type === "pp:edit:reload") {
         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");
+        }
+        return;
+      }
+      if (d.type === "pp:edit:media-picked") {
+        const listener = mediaPickListeners.current.get(d.path);
+        if (listener) {
+          listener(d.value);
+          mediaPickListeners.current.delete(d.path);
+        }
+        return;
       }
     }
     window.addEventListener("message", onMsg);
     return () => window.removeEventListener("message", onMsg);
   }, [urlState.enabled]);
-  const value = useMemo(() => urlState, [urlState]);
-  return /* @__PURE__ */ jsx(EditModeContext.Provider, { value, children });
-}
-var EDIT_ATTR_STYLE = {
-  outline: "1px dashed transparent",
-  outlineOffset: "2px",
-  cursor: "pointer",
-  transition: "outline-color 0.15s ease"
-};
-var EDIT_HOVER_STYLE = {
-  outlineColor: "#FA501E"
-};
-function StrapiField({ path, type, value, children, className }) {
-  const { enabled } = useStrapiEditMode();
-  const onClick = useCallback(
-    (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      if (typeof window === "undefined" || window.parent === window) return;
-      const target = e.currentTarget;
-      const rect = target.getBoundingClientRect();
+  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:click",
-            path,
-            fieldType: type,
-            rect: {
-              top: rect.top,
-              left: rect.left,
-              width: rect.width,
-              height: rect.height
-            },
-            currentValue: value
-          },
-          "*"
-        );
+        window.parent.postMessage({ type: "pp:edit:change", path, fieldType, value: value2 }, "*");
       } catch {
       }
-    },
-    [path, type, value]
+    }
+  }, []);
+  const clearChange = useCallback((path) => {
+    setChanges((prev) => {
+      const next = new Map(prev);
+      next.delete(path);
+      return next;
+    });
+  }, []);
+  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
+        },
+        "*"
+      );
+    } catch {
+    }
+  }, []);
+  const onMediaPicked = useCallback((path, listener) => {
+    mediaPickListeners.current.set(path, listener);
+    return () => {
+      mediaPickListeners.current.delete(path);
+    };
+  }, []);
+  const value = useMemo(() => ({
+    enabled: urlState.enabled,
+    token: urlState.token,
+    changes,
+    isDirty: changes.size > 0,
+    isCommitting,
+    lastCommitError,
+    setChange,
+    clearChange,
+    commit,
+    openMediaPicker,
+    onMediaPicked
+  }), [urlState, changes, isCommitting, lastCommitError, setChange, clearChange, commit, openMediaPicker, onMediaPicked]);
+  return /* @__PURE__ */ jsxs(EditModeContext.Provider, { value, children: [
+    children,
+    urlState.enabled && /* @__PURE__ */ jsx(SaveBar, {})
+  ] });
+}
+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" })
+            ] })
+          }
+        )
+      ]
+    }
   );
-  if (!enabled) {
+}
+var EDITABLE_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "textarea",
+  "richText",
+  "email",
+  "number"
+]);
+var HOVER_OUTLINE_COLOR = "#FA501E";
+function StrapiField({ path, type, value, children, className }) {
+  const ctx = useStrapiEditMode();
+  const ref = useRef(null);
+  const initialText = useRef(void 0);
+  useEffect(() => {
+    if (!ctx.enabled) return;
+    if (!EDITABLE_TYPES.has(type)) return;
+    if (initialText.current === void 0 && ref.current) {
+      initialText.current = ref.current.textContent ?? "";
+    }
+  }, [ctx.enabled, type]);
+  if (!ctx.enabled) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   const arr = Children.toArray(children);
+  const isTextual = EDITABLE_TYPES.has(type);
   if (arr.length === 1 && isValidElement(arr[0])) {
     const el = arr[0];
-    const existing = el.props.style ?? {};
+    const existingStyle = el.props.style ?? {};
     const existingClass = el.props.className ?? "";
-    return cloneElement(el, {
+    const inlineStyle = {
+      outline: "1px dashed transparent",
+      outlineOffset: 2,
+      transition: "outline-color 0.15s ease",
+      cursor: isTextual ? "text" : "pointer",
+      ...existingStyle
+    };
+    const props = {
       "data-pp-edit": path,
       "data-pp-type": type,
-      onClick,
+      ref: (node) => {
+        ref.current = node;
+      },
+      className: [existingClass, className, "pp-edit-target"].filter(Boolean).join(" "),
+      style: inlineStyle,
       onMouseEnter: (e) => {
-        e.currentTarget.style.outlineColor = EDIT_HOVER_STYLE.outlineColor;
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR;
       },
       onMouseLeave: (e) => {
         e.currentTarget.style.outlineColor = "transparent";
-      },
-      style: { ...EDIT_ATTR_STYLE, ...existing },
-      className: [existingClass, className, "pp-edit-target"].filter(Boolean).join(" ")
-    });
+      }
+    };
+    if (isTextual) {
+      props.contentEditable = "plaintext-only";
+      props.suppressContentEditableWarning = true;
+      props.onFocus = (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR;
+        e.currentTarget.style.outlineStyle = "solid";
+      };
+      props.onBlur = (e) => {
+        const target = e.currentTarget;
+        target.style.outlineColor = "transparent";
+        target.style.outlineStyle = "dashed";
+        const newText = target.textContent ?? "";
+        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);
+        }
+      };
+      props.onKeyDown = (e) => {
+        if (e.key === "Enter" && !e.shiftKey && type === "text") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          e.currentTarget.blur();
+        }
+      };
+    }
+    return cloneElement(el, props);
   }
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-pp-edit": path,
       "data-pp-type": type,
-      onClick,
-      onMouseEnter: (e) => {
-        e.currentTarget.style.outlineColor = EDIT_HOVER_STYLE.outlineColor;
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.outlineColor = "transparent";
-      },
-      style: EDIT_ATTR_STYLE,
       className: ["pp-edit-target", className].filter(Boolean).join(" "),
+      style: { outline: "1px dashed transparent", outlineOffset: 2 },
       children
     }
   );
@@ -138,18 +340,68 @@ function StrapiText({ path, value, fieldType = "text", as = "span", className, c
   return /* @__PURE__ */ jsx(StrapiField, { path, type: fieldType, value, children: el });
 }
 function resolveUrl(value, baseUrl) {
-  const u = value.url;
-  if (u.startsWith("http")) return u;
-  if (baseUrl) return `${baseUrl.replace(/\/$/, "")}${u.startsWith("/") ? "" : "/"}${u}`;
-  return u;
+  if (value.url.startsWith("http")) return value.url;
+  if (baseUrl) return `${baseUrl.replace(/\/$/, "")}${value.url.startsWith("/") ? "" : "/"}${value.url}`;
+  return value.url;
 }
-function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "lazy", fallback }) {
+var HOVER_OUTLINE_COLOR2 = "#FA501E";
+function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "lazy", fallback, allowedTypes, multiple = false }) {
+  const ctx = useStrapiEditMode();
+  const containerRef = useRef(null);
+  const imgRef = useRef(null);
+  const handleClick = (e) => {
+    if (!ctx.enabled) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const unsubscribe = ctx.onMediaPicked(path, (picked) => {
+      ctx.setChange(path, "media", picked);
+      unsubscribe();
+      if (imgRef.current && picked && typeof picked === "object" && !Array.isArray(picked) && "url" in picked) {
+        imgRef.current.src = resolveUrl(picked, baseUrl);
+      }
+    });
+    ctx.openMediaPicker(path, multiple, allowedTypes, value);
+  };
   if (!value) {
-    return /* @__PURE__ */ jsx(StrapiField, { path, type: "media", value: null, children: /* @__PURE__ */ jsx("span", { className, style, children: fallback ?? "" }) });
+    if (!ctx.enabled) return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? null });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: containerRef,
+        "data-pp-edit": path,
+        "data-pp-type": "media",
+        onClick: handleClick,
+        onMouseEnter: (e) => {
+          e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR2;
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.outlineColor = "transparent";
+        },
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "rgba(0,0,0,0.05)",
+          border: "1px dashed rgba(0,0,0,0.3)",
+          outline: "1px dashed transparent",
+          outlineOffset: 2,
+          cursor: "pointer",
+          padding: "20px 28px",
+          fontSize: 12,
+          fontWeight: 700,
+          textTransform: "uppercase",
+          letterSpacing: "0.15em",
+          color: "#000",
+          transition: "outline-color 0.15s ease"
+        },
+        children: "+ Bild hinzuf\xFCgen"
+      }
+    );
   }
-  return /* @__PURE__ */ jsx(StrapiField, { path, type: "media", value, children: /* @__PURE__ */ jsx(
+  const imgEl = /* @__PURE__ */ jsx(
     "img",
     {
+      ref: imgRef,
       src: resolveUrl(value, baseUrl),
       alt: alt ?? value.alternativeText ?? value.name ?? "",
       width: value.width,
@@ -158,7 +410,64 @@ function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "l
       className,
       style
     }
-  ) });
+  );
+  if (!ctx.enabled) return imgEl;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      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" },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR2;
+        const btn = e.currentTarget.querySelector("[data-pp-edit-btn]");
+        if (btn) btn.style.opacity = "1";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.outlineColor = "transparent";
+        const btn = e.currentTarget.querySelector("[data-pp-edit-btn]");
+        if (btn) btn.style.opacity = "0";
+      },
+      children: [
+        imgEl,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-pp-edit-btn": true,
+            onClick: handleClick,
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              background: "#000",
+              color: "#EBC6DF",
+              border: "2px solid #000",
+              padding: "6px 10px",
+              fontSize: 11,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "0.15em",
+              cursor: "pointer",
+              opacity: 0,
+              transition: "opacity 0.15s ease, background 0.15s ease",
+              fontFamily: "system-ui, -apple-system, sans-serif"
+            },
+            onMouseEnter: (e) => {
+              e.currentTarget.style.background = "#FA501E";
+              e.currentTarget.style.color = "#000";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.background = "#000";
+              e.currentTarget.style.color = "#EBC6DF";
+            },
+            children: "\xC4ndern"
+          }
+        )
+      ]
+    }
+  );
 }
 function StrapiList({ path, value, renderItem, fallback }) {
   if (!Array.isArray(value) || value.length === 0) {
@@ -166,7 +475,156 @@ function StrapiList({ path, value, renderItem, fallback }) {
   }
   return /* @__PURE__ */ jsx(Fragment, { children: value.map((item, i) => /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, `${path}.${i}`, i) }, i)) });
 }
+var HOVER_OUTLINE = "#FA501E";
+function renderInline(node, key) {
+  if (node.type === "link") {
+    return /* @__PURE__ */ jsx("a", { href: node.url, style: { fontWeight: 700, textDecoration: "underline", textUnderlineOffset: 4 }, children: (node.children ?? []).map((c, i) => renderInline(c, i)) }, key);
+  }
+  let el = node.text;
+  if (node.code) el = /* @__PURE__ */ jsx("code", { style: { background: "rgba(0,0,0,0.08)", padding: "0 4px", fontFamily: "ui-monospace, monospace", fontSize: "0.9em" }, children: el });
+  if (node.bold) el = /* @__PURE__ */ jsx("strong", { children: el });
+  if (node.italic) el = /* @__PURE__ */ jsx("em", { children: el });
+  if (node.underline) el = /* @__PURE__ */ jsx("u", { children: el });
+  if (node.strikethrough) el = /* @__PURE__ */ jsx("s", { children: el });
+  return /* @__PURE__ */ jsx(Fragment$1, { children: el }, key);
+}
+function renderBlock(b, key) {
+  if (b.type === "paragraph") {
+    return /* @__PURE__ */ jsx("p", { children: (b.children ?? []).map((c, i) => renderInline(c, i)) }, key);
+  }
+  if (b.type === "heading") {
+    const Tag = `h${Math.min(Math.max(b.level ?? 2, 1), 6)}`;
+    return /* @__PURE__ */ jsx(Tag, { children: (b.children ?? []).map((c, i) => renderInline(c, i)) }, key);
+  }
+  if (b.type === "quote") {
+    return /* @__PURE__ */ jsx("blockquote", { children: (b.children ?? []).map((c, i) => renderInline(c, i)) }, key);
+  }
+  if (b.type === "list") {
+    const ListTag = b.format === "ordered" ? "ol" : "ul";
+    return /* @__PURE__ */ jsx(ListTag, { children: (b.children ?? []).map((li, i) => /* @__PURE__ */ jsx("li", { children: (li.children ?? []).map((c, j) => renderInline(c, j)) }, i)) }, key);
+  }
+  if (b.type === "code") {
+    return /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: (b.children ?? []).map((c) => c.text).join("") }) }, key);
+  }
+  if (b.type === "image") {
+    return /* @__PURE__ */ jsx("img", { src: b.image.url, alt: b.image.alternativeText ?? "" }, key);
+  }
+  return null;
+}
+function parseInline(node) {
+  const out = [];
+  for (const child of Array.from(node.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent ?? "";
+      if (text) out.push({ type: "text", text });
+    } else if (child.nodeType === Node.ELEMENT_NODE) {
+      const el = child;
+      const tag = el.tagName.toLowerCase();
+      if (tag === "br") {
+        out.push({ type: "text", text: "\n" });
+        continue;
+      }
+      if (tag === "a") {
+        const inner2 = parseInline(el).filter((n) => n.type === "text");
+        out.push({ type: "link", url: el.getAttribute("href") ?? "", children: inner2.length > 0 ? inner2 : [{ type: "text", text: el.textContent ?? "" }] });
+        continue;
+      }
+      const inner = parseInline(el);
+      const flagged = inner.map((n) => {
+        if (n.type !== "text") return n;
+        const t = { ...n };
+        if (tag === "strong" || tag === "b") t.bold = true;
+        if (tag === "em" || tag === "i") t.italic = true;
+        if (tag === "u") t.underline = true;
+        if (tag === "s" || tag === "strike" || tag === "del") t.strikethrough = true;
+        if (tag === "code") t.code = true;
+        return t;
+      });
+      out.push(...flagged);
+    }
+  }
+  return out;
+}
+function parseBlocksFromDOM(root) {
+  const blocks = [];
+  for (const child of Array.from(root.children)) {
+    const el = child;
+    const tag = el.tagName.toLowerCase();
+    if (tag === "p") {
+      blocks.push({ type: "paragraph", children: parseInline(el) });
+    } else if (/^h[1-6]$/.test(tag)) {
+      const level = parseInt(tag.slice(1), 10);
+      blocks.push({ type: "heading", level, children: parseInline(el) });
+    } else if (tag === "blockquote") {
+      blocks.push({ type: "quote", children: parseInline(el) });
+    } else if (tag === "ul" || tag === "ol") {
+      const items = [];
+      for (const li of Array.from(el.querySelectorAll(":scope > li"))) {
+        items.push({ type: "list-item", children: parseInline(li) });
+      }
+      blocks.push({ type: "list", format: tag === "ol" ? "ordered" : "unordered", children: items });
+    } else if (tag === "pre") {
+      blocks.push({ type: "code", children: [{ type: "text", text: el.textContent ?? "" }] });
+    } else if (tag === "img") {
+      blocks.push({ type: "image", image: { url: el.getAttribute("src") ?? "", alternativeText: el.getAttribute("alt") ?? "" } });
+    } else {
+      blocks.push({ type: "paragraph", children: parseInline(el) });
+    }
+  }
+  return blocks;
+}
+function StrapiBlocks({ path, value, className }) {
+  const ctx = useStrapiEditMode();
+  const containerRef = useRef(null);
+  const initialValue = useRef(null);
+  const blocks = Array.isArray(value) ? value : [];
+  useEffect(() => {
+    if (initialValue.current === null) initialValue.current = blocks;
+  }, [blocks]);
+  if (!ctx.enabled) {
+    return /* @__PURE__ */ jsx("div", { className, children: blocks.map((b, i) => renderBlock(b, i)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-pp-edit": path,
+      "data-pp-type": "blocks",
+      style: {
+        outline: "1px dashed transparent",
+        outlineOffset: 4,
+        transition: "outline-color 0.15s ease",
+        minHeight: "1em"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE;
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.outlineColor = "transparent";
+      },
+      onFocus: (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE;
+        e.currentTarget.style.outlineStyle = "solid";
+      },
+      onBlur: (e) => {
+        const root = e.currentTarget;
+        const parsed = parseBlocksFromDOM(root);
+        const before = JSON.stringify(initialValue.current);
+        const after = JSON.stringify(parsed);
+        if (before !== after) {
+          ctx.setChange(path, "blocks", parsed);
+        }
+        e.currentTarget.style.outlineColor = "transparent";
+        e.currentTarget.style.outlineStyle = "dashed";
+      },
+      children: blocks.map((b, i) => renderBlock(b, i))
+    }
+  );
+}
 
-export { StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiText, useStrapiEditMode };
+export { StrapiBlocks, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiText, useStrapiEditMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map