@paulpaulstudio/strapi-render 0.5.1 → 0.6.0

package/dist/index.d.cts

@@ -134,15 +134,19 @@ interface StrapiImageProps {
     fallback?: React.ReactNode;
     allowedTypes?: string[];
     multiple?: boolean;
-    /** Optional width override (default: value.width). Akzeptiert `<img>`-Attribute. */
     width?: number | string;
-    /** Optional height override (default: value.height). */
     height?: number | string;
-    /** Optional ARIA/Image-Attribute, falls vom Customer gebraucht. */
     draggable?: boolean;
     priority?: boolean;
 }
-declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple, width, height, draggable }: StrapiImageProps): react_jsx_runtime.JSX.Element;
+/**
+ * Render-Mode: identisches HTML wie ein nativer <img>.
+ *
+ * Edit-Mode: derselbe <img>, aber mit Click-Handler + Hover-Outline. KEIN
+ * extra Wrapper-Element — Layouts mit `position:absolute; inset:0` o.ä.
+ * funktionieren exakt wie ohne SDK.
+ */
+declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple, width, height, draggable, priority: _ignored, }: StrapiImageProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiListProps<T> {
     /** Pfad zum Array-Feld, z.B. "features" */
@@ -171,14 +175,14 @@ interface StrapiListProps<T> {
  */
 declare function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>): react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$2 {
     path: string;
     value: unknown;
     className?: string;
 }
-declare function StrapiBlocks({ path, value, className }: Props$1): react_jsx_runtime.JSX.Element;
+declare function StrapiBlocks({ path, value, className }: Props$2): react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$1 {
     path: string;
     /** Markdown-Quelle aus Strapi. */
     value: string | null | undefined;
@@ -207,6 +211,29 @@ interface Props {
  *     className="prose"
  *   />
  */
-declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props): react_jsx_runtime.JSX.Element;
+declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props$1): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    path: string;
+    /** Markdown-Quelle aus Strapi. */
+    value: string | null | undefined;
+    /** Render-Funktion für Read-Mode (z.B. ReactMarkdown). Wird auch im Edit-Mode
+     *  initial gerendert — der User editiert dann direkt das ergebende HTML. */
+    render: (markdown: string) => ReactNode;
+    className?: string;
+}
+/**
+ * WYSIWYG-RichText.
+ *
+ * Read-Mode: ruft `render(value)` auf — das ist der bereits gerenderte
+ * Inhalt (z.B. ReactMarkdown → HTML). Keine Modifikation.
+ *
+ * Edit-Mode: derselbe gerenderte HTML-Inhalt wird in einem `contentEditable`-
+ * Container angezeigt. Der User editiert das HTML inline (Word-Style). Beim
+ * Blur wird das HTML via Turndown wieder in Markdown zurückgewandelt und an
+ * den Parent geschickt — damit die Strapi-Quelle Markdown bleibt + ohne
+ * Verluste round-trippt (Headings, Listen, Links, Bold/Italic bleiben).
+ */
+declare function StrapiRichTextField({ path, value, render, className }: Props): react_jsx_runtime.JSX.Element;
 
-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 };
+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, StrapiRichTextField, StrapiText, useContentScope, useStrapiEditMode };

package/dist/index.d.ts

@@ -134,15 +134,19 @@ interface StrapiImageProps {
     fallback?: React.ReactNode;
     allowedTypes?: string[];
     multiple?: boolean;
-    /** Optional width override (default: value.width). Akzeptiert `<img>`-Attribute. */
     width?: number | string;
-    /** Optional height override (default: value.height). */
     height?: number | string;
-    /** Optional ARIA/Image-Attribute, falls vom Customer gebraucht. */
     draggable?: boolean;
     priority?: boolean;
 }
-declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple, width, height, draggable }: StrapiImageProps): react_jsx_runtime.JSX.Element;
+/**
+ * Render-Mode: identisches HTML wie ein nativer <img>.
+ *
+ * Edit-Mode: derselbe <img>, aber mit Click-Handler + Hover-Outline. KEIN
+ * extra Wrapper-Element — Layouts mit `position:absolute; inset:0` o.ä.
+ * funktionieren exakt wie ohne SDK.
+ */
+declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple, width, height, draggable, priority: _ignored, }: StrapiImageProps): react_jsx_runtime.JSX.Element;
 
 interface StrapiListProps<T> {
     /** Pfad zum Array-Feld, z.B. "features" */
@@ -171,14 +175,14 @@ interface StrapiListProps<T> {
  */
 declare function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>): react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$2 {
     path: string;
     value: unknown;
     className?: string;
 }
-declare function StrapiBlocks({ path, value, className }: Props$1): react_jsx_runtime.JSX.Element;
+declare function StrapiBlocks({ path, value, className }: Props$2): react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$1 {
     path: string;
     /** Markdown-Quelle aus Strapi. */
     value: string | null | undefined;
@@ -207,6 +211,29 @@ interface Props {
  *     className="prose"
  *   />
  */
-declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props): react_jsx_runtime.JSX.Element;
+declare function StrapiMarkdownField({ path, value, render, className, minRows }: Props$1): react_jsx_runtime.JSX.Element;
+
+interface Props {
+    path: string;
+    /** Markdown-Quelle aus Strapi. */
+    value: string | null | undefined;
+    /** Render-Funktion für Read-Mode (z.B. ReactMarkdown). Wird auch im Edit-Mode
+     *  initial gerendert — der User editiert dann direkt das ergebende HTML. */
+    render: (markdown: string) => ReactNode;
+    className?: string;
+}
+/**
+ * WYSIWYG-RichText.
+ *
+ * Read-Mode: ruft `render(value)` auf — das ist der bereits gerenderte
+ * Inhalt (z.B. ReactMarkdown → HTML). Keine Modifikation.
+ *
+ * Edit-Mode: derselbe gerenderte HTML-Inhalt wird in einem `contentEditable`-
+ * Container angezeigt. Der User editiert das HTML inline (Word-Style). Beim
+ * Blur wird das HTML via Turndown wieder in Markdown zurückgewandelt und an
+ * den Parent geschickt — damit die Strapi-Quelle Markdown bleibt + ohne
+ * Verluste round-trippt (Headings, Listen, Links, Bold/Italic bleiben).
+ */
+declare function StrapiRichTextField({ path, value, render, className }: Props): react_jsx_runtime.JSX.Element;
 
-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 };
+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, StrapiRichTextField, StrapiText, useContentScope, useStrapiEditMode };

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,96 @@ 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 ?? "")
+    }
+  );
+}
 
-export { StrapiBlocks, StrapiContent, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiMarkdownField, StrapiText, useContentScope, useStrapiEditMode };
+export { StrapiBlocks, StrapiContent, StrapiEditModeProvider, StrapiField, StrapiImage, StrapiList, StrapiMarkdownField, StrapiRichTextField, StrapiText, useContentScope, useStrapiEditMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map