@paulpaulstudio/strapi-render 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1,29 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode, ElementType } from 'react';
3
3
 
4
- interface EditModeState {
5
- enabled: boolean;
6
- token: string | null;
7
- }
8
- declare function useStrapiEditMode(): EditModeState;
9
- interface ProviderProps {
10
- children: React.ReactNode;
11
- /**
12
- * Override automatic URL-based detection. If `true`/`false` ist gesetzt,
13
- * wird der URL-Parameter ignoriert.
14
- */
15
- enabled?: boolean;
16
- }
17
- /**
18
- * Provider, der den Edit-Mode aus `?__pp_edit=1&__pp_token=<jwt>` der URL
19
- * liest und an Kinder via Context weitergibt. Token wird sicherheitshalber
20
- * NICHT ans CSR exponiert über Props oder DOM — er bleibt nur im Context.
21
- *
22
- * Im Edit-Mode wird ausserdem eine kleine globale CSS-Klasse `pp-edit-active`
23
- * am `<html>` gesetzt, sodass Customer-Sites optional CSS-Hooks setzen können.
24
- */
25
- declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
26
-
27
4
  type StrapiFieldType = "text" | "textarea" | "richText" | "number" | "checkbox" | "date" | "email" | "media" | "select" | "relation" | "group" | "array" | "blocks" | "json" | "unknown";
28
5
  interface StrapiMediaValue {
29
6
  id?: number;
@@ -35,94 +12,115 @@ interface StrapiMediaValue {
35
12
  width?: number;
36
13
  height?: number;
37
14
  }
38
- interface StrapiEditReadyMessage {
15
+ interface MsgEditReady {
39
16
  type: "pp:edit:ready";
40
17
  href: string;
41
18
  }
42
- interface StrapiEditClickMessage {
43
- type: "pp:edit:click";
19
+ interface MsgEditChange {
20
+ type: "pp:edit:change";
44
21
  path: string;
45
22
  fieldType: StrapiFieldType;
46
- rect: {
47
- top: number;
48
- left: number;
49
- width: number;
50
- height: number;
51
- };
23
+ value: unknown;
24
+ }
25
+ interface MsgEditCommitRequest {
26
+ type: "pp:edit:commit-request";
27
+ changes: Array<{
28
+ path: string;
29
+ fieldType: StrapiFieldType;
30
+ value: unknown;
31
+ }>;
32
+ }
33
+ interface MsgEditOpenMediaPicker {
34
+ type: "pp:edit:open-media-picker";
35
+ path: string;
36
+ multiple: boolean;
37
+ allowedTypes?: string[];
52
38
  currentValue: unknown;
53
39
  }
54
- interface StrapiEditReloadMessage {
40
+ interface MsgEditReload {
55
41
  type: "pp:edit:reload";
56
42
  }
57
- type StrapiEditMessage = StrapiEditReadyMessage | StrapiEditClickMessage | StrapiEditReloadMessage;
43
+ interface MsgEditCommitResult {
44
+ type: "pp:edit:commit-result";
45
+ ok: boolean;
46
+ error?: string;
47
+ savedPaths?: string[];
48
+ }
49
+ interface MsgEditMediaPicked {
50
+ type: "pp:edit:media-picked";
51
+ path: string;
52
+ value: StrapiMediaValue | StrapiMediaValue[] | null;
53
+ }
54
+ type StrapiEditMessage = MsgEditReady | MsgEditChange | MsgEditCommitRequest | MsgEditOpenMediaPicker | MsgEditReload | MsgEditCommitResult | MsgEditMediaPicked;
55
+
56
+ interface PendingChange {
57
+ path: string;
58
+ fieldType: StrapiFieldType;
59
+ value: unknown;
60
+ }
61
+ interface EditModeState {
62
+ enabled: boolean;
63
+ token: string | null;
64
+ changes: Map<string, PendingChange>;
65
+ isDirty: boolean;
66
+ isCommitting: boolean;
67
+ lastCommitError: string | null;
68
+ setChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
69
+ clearChange: (path: string) => void;
70
+ commit: () => void;
71
+ openMediaPicker: (path: string, multiple: boolean, allowedTypes: string[] | undefined, currentValue: unknown) => void;
72
+ onMediaPicked: (path: string, listener: (value: unknown) => void) => () => void;
73
+ }
74
+ declare function useStrapiEditMode(): EditModeState;
75
+ interface ProviderProps {
76
+ children: React.ReactNode;
77
+ enabled?: boolean;
78
+ }
79
+ declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
58
80
 
59
81
  interface StrapiFieldProps {
60
- /** Dot-notation path im Strapi-Document, z.B. "hero.title" oder "features.0.image" */
61
82
  path: string;
62
- /** Strapi field type — bestimmt welche Edit-UI im Parent geöffnet wird */
63
83
  type: StrapiFieldType;
64
- /** Aktueller Wert. Wird beim Click-Event mitgesendet, damit der Editor initial befüllt ist */
65
84
  value?: unknown;
66
- /** Inhalt (das echte gerenderte HTML). Wird im Edit-Mode mit data-attrs + Hover/Click annotiert */
67
85
  children: ReactNode;
68
- /** Optional: zusätzliche CSS-Klassen die im Edit-Mode angehängt werden */
69
86
  className?: string;
70
87
  }
71
88
  /**
72
- * Universeller Wrapper für editierbare Strapi-Felder.
89
+ * Universeller Wrapper. Im Normal-Mode: rendert children unverändert.
73
90
  *
74
- * Im normalen Mode rendert er nur die `children` — keine zusätzlichen DOM-
75
- * Nodes, kein Overhead. Im Edit-Mode wird das einzige Top-Level-Child mit
76
- * `data-pp-edit="<path>"` annotiert + Click-Handler bekommt.
77
- *
78
- * Falls children mehrere Top-Level-Knoten haben, wird automatisch ein
79
- * `<span>` als Wrapper eingefügt.
91
+ * Im Edit-Mode:
92
+ * - Für text/textarea/richText/email/number: macht das Top-Level-Child
93
+ * `contenteditable`, mit dünnem orange Hover-Outline, sammelt Wert-Änderungen
94
+ * in den globalen Edit-Context, der dann beim Klick auf "Speichern" alle
95
+ * Änderungen in einem Roundtrip ans Parent schickt.
96
+ * - Für andere Typen (media/select/checkbox): trägt ein Click-Handler bzw.
97
+ * ein Overlay (Implementierung in jeweiligen Sugar-Komponenten).
80
98
  */
81
99
  declare function StrapiField({ path, type, value, children, className }: StrapiFieldProps): react_jsx_runtime.JSX.Element;
82
100
 
83
101
  interface StrapiTextProps {
84
102
  path: string;
85
103
  value: string | number | null | undefined;
86
- /** Welcher Strapi-Feldtyp ist das? Default "text". Für mehrzeilige Felder "textarea", für Markdown "richText". */
87
104
  fieldType?: Extract<StrapiFieldType, "text" | "textarea" | "richText" | "email" | "number">;
88
- /** HTML-Tag um den Wert zu rendern. Default "span". */
89
105
  as?: ElementType;
90
106
  className?: string;
91
107
  children?: ReactNode;
92
108
  }
93
- /**
94
- * Inline-Text wrapper. Im normalen Mode rendert es einfach `value` im
95
- * gewählten Tag — identisch zu einem rohen `<h1>{value}</h1>`. Im Edit-Mode
96
- * wird ein Click-Handler aktiviert.
97
- *
98
- * Wenn `children` mitgegeben sind, werden diese statt `value` als Inhalt
99
- * verwendet — nützlich für custom Formatierung. Der Click-Wert bleibt
100
- * `value`.
101
- */
102
109
  declare function StrapiText({ path, value, fieldType, as, className, children }: StrapiTextProps): react_jsx_runtime.JSX.Element;
103
110
 
104
111
  interface StrapiImageProps {
105
112
  path: string;
106
113
  value: StrapiMediaValue | null | undefined;
107
- /** Optional: Strapi-Basis-URL für relative URLs (z.B. "https://cms.paulpaul.studio") */
108
114
  baseUrl?: string;
109
- /** Override alt-Text (default: alternativeText vom Strapi-Objekt, dann name) */
110
115
  alt?: string;
111
116
  className?: string;
112
117
  style?: React.CSSProperties;
113
118
  loading?: "lazy" | "eager";
114
- /** Fallback wenn value null/undefined ist */
115
119
  fallback?: React.ReactNode;
120
+ allowedTypes?: string[];
121
+ multiple?: boolean;
116
122
  }
117
- /**
118
- * Wrapper für ein einzelnes Strapi-Media-Feld. Rendert `<img>` mit der
119
- * abgeleiteten URL. Im Edit-Mode klickbar — der Editor öffnet einen
120
- * MediaPicker.
121
- *
122
- * Wenn `value` null ist, wird der `fallback` gerendert (oder ein leeres
123
- * `<span>`).
124
- */
125
- declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback }: StrapiImageProps): react_jsx_runtime.JSX.Element;
123
+ declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple }: StrapiImageProps): react_jsx_runtime.JSX.Element;
126
124
 
127
125
  interface StrapiListProps<T> {
128
126
  /** Pfad zum Array-Feld, z.B. "features" */
@@ -151,4 +149,4 @@ interface StrapiListProps<T> {
151
149
  */
152
150
  declare function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>): react_jsx_runtime.JSX.Element;
153
151
 
154
- export { type StrapiEditClickMessage, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, type StrapiMediaValue, StrapiText, useStrapiEditMode };
152
+ export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, type StrapiMediaValue, StrapiText, useStrapiEditMode };
package/dist/index.d.ts CHANGED
@@ -1,29 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode, ElementType } from 'react';
3
3
 
4
- interface EditModeState {
5
- enabled: boolean;
6
- token: string | null;
7
- }
8
- declare function useStrapiEditMode(): EditModeState;
9
- interface ProviderProps {
10
- children: React.ReactNode;
11
- /**
12
- * Override automatic URL-based detection. If `true`/`false` ist gesetzt,
13
- * wird der URL-Parameter ignoriert.
14
- */
15
- enabled?: boolean;
16
- }
17
- /**
18
- * Provider, der den Edit-Mode aus `?__pp_edit=1&__pp_token=<jwt>` der URL
19
- * liest und an Kinder via Context weitergibt. Token wird sicherheitshalber
20
- * NICHT ans CSR exponiert über Props oder DOM — er bleibt nur im Context.
21
- *
22
- * Im Edit-Mode wird ausserdem eine kleine globale CSS-Klasse `pp-edit-active`
23
- * am `<html>` gesetzt, sodass Customer-Sites optional CSS-Hooks setzen können.
24
- */
25
- declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
26
-
27
4
  type StrapiFieldType = "text" | "textarea" | "richText" | "number" | "checkbox" | "date" | "email" | "media" | "select" | "relation" | "group" | "array" | "blocks" | "json" | "unknown";
28
5
  interface StrapiMediaValue {
29
6
  id?: number;
@@ -35,94 +12,115 @@ interface StrapiMediaValue {
35
12
  width?: number;
36
13
  height?: number;
37
14
  }
38
- interface StrapiEditReadyMessage {
15
+ interface MsgEditReady {
39
16
  type: "pp:edit:ready";
40
17
  href: string;
41
18
  }
42
- interface StrapiEditClickMessage {
43
- type: "pp:edit:click";
19
+ interface MsgEditChange {
20
+ type: "pp:edit:change";
44
21
  path: string;
45
22
  fieldType: StrapiFieldType;
46
- rect: {
47
- top: number;
48
- left: number;
49
- width: number;
50
- height: number;
51
- };
23
+ value: unknown;
24
+ }
25
+ interface MsgEditCommitRequest {
26
+ type: "pp:edit:commit-request";
27
+ changes: Array<{
28
+ path: string;
29
+ fieldType: StrapiFieldType;
30
+ value: unknown;
31
+ }>;
32
+ }
33
+ interface MsgEditOpenMediaPicker {
34
+ type: "pp:edit:open-media-picker";
35
+ path: string;
36
+ multiple: boolean;
37
+ allowedTypes?: string[];
52
38
  currentValue: unknown;
53
39
  }
54
- interface StrapiEditReloadMessage {
40
+ interface MsgEditReload {
55
41
  type: "pp:edit:reload";
56
42
  }
57
- type StrapiEditMessage = StrapiEditReadyMessage | StrapiEditClickMessage | StrapiEditReloadMessage;
43
+ interface MsgEditCommitResult {
44
+ type: "pp:edit:commit-result";
45
+ ok: boolean;
46
+ error?: string;
47
+ savedPaths?: string[];
48
+ }
49
+ interface MsgEditMediaPicked {
50
+ type: "pp:edit:media-picked";
51
+ path: string;
52
+ value: StrapiMediaValue | StrapiMediaValue[] | null;
53
+ }
54
+ type StrapiEditMessage = MsgEditReady | MsgEditChange | MsgEditCommitRequest | MsgEditOpenMediaPicker | MsgEditReload | MsgEditCommitResult | MsgEditMediaPicked;
55
+
56
+ interface PendingChange {
57
+ path: string;
58
+ fieldType: StrapiFieldType;
59
+ value: unknown;
60
+ }
61
+ interface EditModeState {
62
+ enabled: boolean;
63
+ token: string | null;
64
+ changes: Map<string, PendingChange>;
65
+ isDirty: boolean;
66
+ isCommitting: boolean;
67
+ lastCommitError: string | null;
68
+ setChange: (path: string, fieldType: StrapiFieldType, value: unknown) => void;
69
+ clearChange: (path: string) => void;
70
+ commit: () => void;
71
+ openMediaPicker: (path: string, multiple: boolean, allowedTypes: string[] | undefined, currentValue: unknown) => void;
72
+ onMediaPicked: (path: string, listener: (value: unknown) => void) => () => void;
73
+ }
74
+ declare function useStrapiEditMode(): EditModeState;
75
+ interface ProviderProps {
76
+ children: React.ReactNode;
77
+ enabled?: boolean;
78
+ }
79
+ declare function StrapiEditModeProvider({ children, enabled: enabledOverride }: ProviderProps): react_jsx_runtime.JSX.Element;
58
80
 
59
81
  interface StrapiFieldProps {
60
- /** Dot-notation path im Strapi-Document, z.B. "hero.title" oder "features.0.image" */
61
82
  path: string;
62
- /** Strapi field type — bestimmt welche Edit-UI im Parent geöffnet wird */
63
83
  type: StrapiFieldType;
64
- /** Aktueller Wert. Wird beim Click-Event mitgesendet, damit der Editor initial befüllt ist */
65
84
  value?: unknown;
66
- /** Inhalt (das echte gerenderte HTML). Wird im Edit-Mode mit data-attrs + Hover/Click annotiert */
67
85
  children: ReactNode;
68
- /** Optional: zusätzliche CSS-Klassen die im Edit-Mode angehängt werden */
69
86
  className?: string;
70
87
  }
71
88
  /**
72
- * Universeller Wrapper für editierbare Strapi-Felder.
89
+ * Universeller Wrapper. Im Normal-Mode: rendert children unverändert.
73
90
  *
74
- * Im normalen Mode rendert er nur die `children` — keine zusätzlichen DOM-
75
- * Nodes, kein Overhead. Im Edit-Mode wird das einzige Top-Level-Child mit
76
- * `data-pp-edit="<path>"` annotiert + Click-Handler bekommt.
77
- *
78
- * Falls children mehrere Top-Level-Knoten haben, wird automatisch ein
79
- * `<span>` als Wrapper eingefügt.
91
+ * Im Edit-Mode:
92
+ * - Für text/textarea/richText/email/number: macht das Top-Level-Child
93
+ * `contenteditable`, mit dünnem orange Hover-Outline, sammelt Wert-Änderungen
94
+ * in den globalen Edit-Context, der dann beim Klick auf "Speichern" alle
95
+ * Änderungen in einem Roundtrip ans Parent schickt.
96
+ * - Für andere Typen (media/select/checkbox): trägt ein Click-Handler bzw.
97
+ * ein Overlay (Implementierung in jeweiligen Sugar-Komponenten).
80
98
  */
81
99
  declare function StrapiField({ path, type, value, children, className }: StrapiFieldProps): react_jsx_runtime.JSX.Element;
82
100
 
83
101
  interface StrapiTextProps {
84
102
  path: string;
85
103
  value: string | number | null | undefined;
86
- /** Welcher Strapi-Feldtyp ist das? Default "text". Für mehrzeilige Felder "textarea", für Markdown "richText". */
87
104
  fieldType?: Extract<StrapiFieldType, "text" | "textarea" | "richText" | "email" | "number">;
88
- /** HTML-Tag um den Wert zu rendern. Default "span". */
89
105
  as?: ElementType;
90
106
  className?: string;
91
107
  children?: ReactNode;
92
108
  }
93
- /**
94
- * Inline-Text wrapper. Im normalen Mode rendert es einfach `value` im
95
- * gewählten Tag — identisch zu einem rohen `<h1>{value}</h1>`. Im Edit-Mode
96
- * wird ein Click-Handler aktiviert.
97
- *
98
- * Wenn `children` mitgegeben sind, werden diese statt `value` als Inhalt
99
- * verwendet — nützlich für custom Formatierung. Der Click-Wert bleibt
100
- * `value`.
101
- */
102
109
  declare function StrapiText({ path, value, fieldType, as, className, children }: StrapiTextProps): react_jsx_runtime.JSX.Element;
103
110
 
104
111
  interface StrapiImageProps {
105
112
  path: string;
106
113
  value: StrapiMediaValue | null | undefined;
107
- /** Optional: Strapi-Basis-URL für relative URLs (z.B. "https://cms.paulpaul.studio") */
108
114
  baseUrl?: string;
109
- /** Override alt-Text (default: alternativeText vom Strapi-Objekt, dann name) */
110
115
  alt?: string;
111
116
  className?: string;
112
117
  style?: React.CSSProperties;
113
118
  loading?: "lazy" | "eager";
114
- /** Fallback wenn value null/undefined ist */
115
119
  fallback?: React.ReactNode;
120
+ allowedTypes?: string[];
121
+ multiple?: boolean;
116
122
  }
117
- /**
118
- * Wrapper für ein einzelnes Strapi-Media-Feld. Rendert `<img>` mit der
119
- * abgeleiteten URL. Im Edit-Mode klickbar — der Editor öffnet einen
120
- * MediaPicker.
121
- *
122
- * Wenn `value` null ist, wird der `fallback` gerendert (oder ein leeres
123
- * `<span>`).
124
- */
125
- declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback }: StrapiImageProps): react_jsx_runtime.JSX.Element;
123
+ declare function StrapiImage({ path, value, baseUrl, alt, className, style, loading, fallback, allowedTypes, multiple }: StrapiImageProps): react_jsx_runtime.JSX.Element;
126
124
 
127
125
  interface StrapiListProps<T> {
128
126
  /** Pfad zum Array-Feld, z.B. "features" */
@@ -151,4 +149,4 @@ interface StrapiListProps<T> {
151
149
  */
152
150
  declare function StrapiList<T>({ path, value, renderItem, fallback }: StrapiListProps<T>): react_jsx_runtime.JSX.Element;
153
151
 
154
- export { type StrapiEditClickMessage, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, type StrapiMediaValue, StrapiText, useStrapiEditMode };
152
+ export { type MsgEditChange, type MsgEditCommitRequest, type MsgEditCommitResult, type MsgEditMediaPicked, type MsgEditOpenMediaPicker, type MsgEditReady, type MsgEditReload, type StrapiEditMessage, StrapiEditModeProvider, StrapiField, type StrapiFieldType, StrapiImage, StrapiList, type StrapiMediaValue, StrapiText, useStrapiEditMode };