@paulpaulstudio/strapi-render 0.5.1 → 0.7.0

package/dist/index.js

@@ -1,6 +1,7 @@
 "use client";
 import { createContext, useContext, useState, useRef, useEffect, useCallback, useMemo, Children, isValidElement, cloneElement, createElement, Fragment as Fragment$1 } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import TurndownService from 'turndown';
 
 var EDIT_SESSION_KEY = "__pp_edit_session";
 var noop = () => {
@@ -233,10 +234,24 @@ function resolveUrl(value, baseUrl) {
   return value.url;
 }
 var HOVER_OUTLINE_COLOR2 = "#FA501E";
-function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "lazy", fallback, allowedTypes, multiple = false, width, height, draggable }) {
+function StrapiImage({
+  path,
+  value,
+  baseUrl,
+  alt,
+  className,
+  style,
+  loading = "lazy",
+  fallback,
+  allowedTypes,
+  multiple = false,
+  width,
+  height,
+  draggable,
+  priority: _ignored
+}) {
   const ctx = useStrapiEditMode();
   const scope = useContentScope();
-  const containerRef = useRef(null);
   const imgRef = useRef(null);
   const handleClick = (e) => {
     if (!ctx.enabled) return;
@@ -254,40 +269,38 @@ function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "l
   if (!value) {
     if (!ctx.enabled) return /* @__PURE__ */ jsx(Fragment, { children: fallback ?? null });
     return /* @__PURE__ */ jsx(
-      "span",
+      "button",
       {
-        ref: containerRef,
-        "data-pp-edit": path,
-        "data-pp-type": "media",
+        type: "button",
         onClick: handleClick,
-        onMouseEnter: (e) => {
-          e.currentTarget.style.outlineColor = HOVER_OUTLINE_COLOR2;
-        },
-        onMouseLeave: (e) => {
-          e.currentTarget.style.outlineColor = "transparent";
-        },
+        className,
         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"
+          cursor: "pointer",
+          ...style
         },
         children: "+ Bild hinzuf\xFCgen"
       }
     );
   }
-  const imgEl = /* @__PURE__ */ jsx(
+  const editStyle = ctx.enabled ? {
+    ...style,
+    outline: "1px dashed transparent",
+    outlineOffset: 2,
+    cursor: "pointer",
+    transition: "outline-color 0.15s ease"
+  } : style ?? {};
+  return /* @__PURE__ */ jsx(
     "img",
     {
       ref: imgRef,
@@ -297,74 +310,21 @@ function StrapiImage({ path, value, baseUrl, alt, className, style, loading = "l
       height: height ?? value.height,
       loading,
       className,
-      style,
-      draggable
-    }
-  );
-  if (!ctx.enabled) return imgEl;
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      ref: containerRef,
-      "data-pp-edit": path,
-      "data-pp-type": "media",
-      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]");
-        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"
-          }
-        )
-      ]
+      style: editStyle,
+      draggable,
+      "data-pp-edit": ctx.enabled ? path : void 0,
+      "data-pp-type": ctx.enabled ? "media" : void 0,
+      onClick: ctx.enabled ? handleClick : void 0,
+      onMouseEnter: ctx.enabled ? (e) => {
+        const el = e.currentTarget;
+        el.style.outlineColor = HOVER_OUTLINE_COLOR2;
+        el.style.outlineStyle = "solid";
+      } : void 0,
+      onMouseLeave: ctx.enabled ? (e) => {
+        const el = e.currentTarget;
+        el.style.outlineColor = "transparent";
+        el.style.outlineStyle = "dashed";
+      } : void 0
     }
   );
 }
@@ -592,7 +552,171 @@ function StrapiMarkdownField({ path, value, render, className, minRows = 12 }) {
     }, children: "Markdown \u2014 **fett**, *kursiv*, ## \xDCberschrift, [link](url)" })
   ] });
 }
+var HOVER_OUTLINE3 = "#FA501E";
+function StrapiRichTextField({ path, value, render, className }) {
+  const ctx = useStrapiEditMode();
+  const scope = useContentScope();
+  const containerRef = useRef(null);
+  const turndownRef = useRef(null);
+  const initial = useRef(value ?? "");
+  const [, force] = useState({});
+  if (typeof window !== "undefined" && !turndownRef.current) {
+    const td = new TurndownService({
+      headingStyle: "atx",
+      hr: "---",
+      bulletListMarker: "-",
+      codeBlockStyle: "fenced",
+      emDelimiter: "*"
+    });
+    td.addRule("br", {
+      filter: "br",
+      replacement: () => "\n"
+    });
+    turndownRef.current = td;
+  }
+  useEffect(() => {
+    initial.current = value ?? "";
+    force({});
+  }, [value]);
+  if (!ctx.enabled) {
+    return /* @__PURE__ */ jsx("div", { className, children: render(value ?? "") });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className,
+      contentEditable: true,
+      suppressContentEditableWarning: true,
+      "data-pp-edit": path,
+      "data-pp-type": "richText",
+      style: {
+        outline: "1px dashed transparent",
+        outlineOffset: 4,
+        transition: "outline-color 0.15s ease",
+        cursor: "text"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE3;
+      },
+      onMouseLeave: (e) => {
+        if (document.activeElement !== e.currentTarget) {
+          e.currentTarget.style.outlineColor = "transparent";
+        }
+      },
+      onFocus: (e) => {
+        e.currentTarget.style.outlineColor = HOVER_OUTLINE3;
+        e.currentTarget.style.outlineStyle = "solid";
+      },
+      onBlur: (e) => {
+        const el = e.currentTarget;
+        el.style.outlineColor = "transparent";
+        el.style.outlineStyle = "dashed";
+        if (!turndownRef.current) return;
+        const html = el.innerHTML;
+        const md = turndownRef.current.turndown(html).trim();
+        if (md !== initial.current.trim()) {
+          postEditChange(scope, path, "richText", md);
+        }
+      },
+      onKeyDown: (e) => {
+        if (e.metaKey || e.ctrlKey) {
+          if (e.key === "b") {
+            e.preventDefault();
+            document.execCommand("bold");
+          } else if (e.key === "i") {
+            e.preventDefault();
+            document.execCommand("italic");
+          } else if (e.key === "u") {
+            e.preventDefault();
+            document.execCommand("underline");
+          } else if (e.key === "k") {
+            e.preventDefault();
+            const url = window.prompt("Link-URL:");
+            if (url) document.execCommand("createLink", false, url);
+          }
+        }
+      },
+      children: render(value ?? "")
+    }
+  );
+}
+function StrapiLink({ path, value, target, rel, className, children }) {
+  const ctx = useStrapiEditMode();
+  const scope = useContentScope();
+  const [hover, setHover] = useState(false);
+  if (!ctx.enabled) {
+    return /* @__PURE__ */ jsx("a", { href: value ?? "#", target, rel, className, children });
+  }
+  const handleEdit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const next = window.prompt("Link-URL bearbeiten:", value ?? "");
+    if (next !== null && next !== value) {
+      postEditChange(scope, path, "text", next);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: { position: "relative", display: "inline-block" },
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+      children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: value ?? "#",
+            target,
+            rel,
+            className,
+            onClick: (e) => {
+              e.preventDefault();
+            },
+            "data-pp-edit": path,
+            "data-pp-type": "text",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleEdit,
+            style: {
+              position: "absolute",
+              top: 8,
+              right: 8,
+              background: "#000",
+              color: "#EBC6DF",
+              border: "2px solid #000",
+              padding: "4px 8px",
+              fontSize: 10,
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "0.15em",
+              cursor: "pointer",
+              opacity: hover ? 1 : 0,
+              transition: "opacity 0.15s ease, background 0.15s ease",
+              fontFamily: "system-ui, sans-serif",
+              zIndex: 10
+            },
+            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: "\u{1F517} Link"
+          }
+        )
+      ]
+    }
+  );
+}
 
-export { StrapiBlocks, StrapiContent, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiMarkdownField, StrapiText, useContentScope, useStrapiEditMode };
+export { StrapiBlocks, StrapiContent, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiLink, StrapiList, StrapiMarkdownField, StrapiRichTextField, StrapiText, useContentScope, useStrapiEditMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map