react-email-studio 3.3.1 → 3.8.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/CHANGELOG.md +80 -2
- package/README.md +12 -0
- package/TUTORIAL.md +56 -2
- package/USER_README.md +17 -0
- package/dist/index.cjs +1563 -493
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +126 -73
- package/dist/index.d.ts +126 -73
- package/dist/index.js +1569 -496
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -96,59 +96,6 @@ type EmailHtmlOptions = {
|
|
|
96
96
|
customCSS?: string;
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
/** Theme color tokens (subset used by the editor chrome). */
|
|
100
|
-
type ThemeColors = (typeof THEMES)["light"];
|
|
101
|
-
/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
|
|
102
|
-
type ReactEmailEditorOptions = EmailHtmlOptions & {
|
|
103
|
-
appearance?: {
|
|
104
|
-
theme?: string;
|
|
105
|
-
/** Shallow merge over the active theme (e.g. accent border). */
|
|
106
|
-
colors?: Partial<ThemeColors>;
|
|
107
|
-
/** Extra named palettes; keys appear in Settings → Color scheme. */
|
|
108
|
-
customThemes?: Record<string, ThemeColors>;
|
|
109
|
-
};
|
|
110
|
-
locale?: string;
|
|
111
|
-
features?: {
|
|
112
|
-
autoSave?: {
|
|
113
|
-
enabled?: boolean;
|
|
114
|
-
interval?: number;
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
tools?: Record<string, {
|
|
118
|
-
enabled?: boolean;
|
|
119
|
-
}>;
|
|
120
|
-
/** Optional labels for block-library sections (row layouts + content blocks). */
|
|
121
|
-
blockLibrary?: {
|
|
122
|
-
groupHeadings?: {
|
|
123
|
-
blocks?: string;
|
|
124
|
-
};
|
|
125
|
-
/** Override default palette group titles (keys: text, structure, media, actions, widgets). */
|
|
126
|
-
paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
|
|
127
|
-
};
|
|
128
|
-
};
|
|
129
|
-
interface ReactEmailEditorRef {
|
|
130
|
-
loadJson(input: string | Record<string, unknown>): void;
|
|
131
|
-
/** Calls `cb` with the design as a JSON string (new `email_document` schema). */
|
|
132
|
-
exportJson(cb: (json: string) => void, pretty?: boolean): void;
|
|
133
|
-
}
|
|
134
|
-
type ReactEmailEditorProps = {
|
|
135
|
-
minHeight?: string;
|
|
136
|
-
editorId?: string;
|
|
137
|
-
options?: ReactEmailEditorOptions;
|
|
138
|
-
style?: CSSProperties;
|
|
139
|
-
onLoad?: (api: ReactEmailEditorRef) => void;
|
|
140
|
-
onReady?: (api: ReactEmailEditorRef) => void;
|
|
141
|
-
onUpload?: (file: File) => Promise<string>;
|
|
142
|
-
templates?: {
|
|
143
|
-
name: string;
|
|
144
|
-
design: unknown;
|
|
145
|
-
thumbnail?: string;
|
|
146
|
-
}[];
|
|
147
|
-
hideTemplates?: boolean;
|
|
148
|
-
children?: ReactNode;
|
|
149
|
-
};
|
|
150
|
-
declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>>;
|
|
151
|
-
|
|
152
99
|
type Padding = {
|
|
153
100
|
top?: number;
|
|
154
101
|
right?: number;
|
|
@@ -184,11 +131,14 @@ type EmailDocumentSettings = {
|
|
|
184
131
|
color?: string;
|
|
185
132
|
responsive?: boolean;
|
|
186
133
|
rtl?: boolean;
|
|
187
|
-
/**
|
|
134
|
+
/** Content card inner padding (editor `settings.padding`). */
|
|
135
|
+
contentPadding?: number;
|
|
136
|
+
/** Content card corner radius (editor `settings.borderRadius`). */
|
|
137
|
+
contentBorderRadius?: number;
|
|
138
|
+
/** Studio snapshot for round-trip with the visual editor (settings + editor chrome). */
|
|
188
139
|
_reactEmailStudio?: {
|
|
189
140
|
contentPadding?: number;
|
|
190
141
|
contentBorderRadius?: number;
|
|
191
|
-
/** Full `ReactEmailEditor` settings object (merged on load after canonical fields). */
|
|
192
142
|
editorSettings?: Record<string, unknown>;
|
|
193
143
|
};
|
|
194
144
|
};
|
|
@@ -197,19 +147,37 @@ type RowLayout = {
|
|
|
197
147
|
gap?: number;
|
|
198
148
|
stackOnMobile?: boolean;
|
|
199
149
|
align?: "left" | "center" | "right";
|
|
150
|
+
/** Editor layout preset key (e.g. `layout2`, `custom`) — optional on `email_document` rows. */
|
|
151
|
+
preset?: string;
|
|
152
|
+
/** Column width ratios; length should match `columns`. */
|
|
153
|
+
ratios?: number[];
|
|
200
154
|
};
|
|
155
|
+
/** Row shell on `email_document` (editor field names). */
|
|
156
|
+
type RowProps = {
|
|
157
|
+
bgColor?: string;
|
|
158
|
+
bgImage?: string;
|
|
159
|
+
bgRepeat?: string;
|
|
160
|
+
bgSize?: string;
|
|
161
|
+
bgPosition?: string;
|
|
162
|
+
bgGradient?: {
|
|
163
|
+
angle?: number;
|
|
164
|
+
colors?: [string, string, string];
|
|
165
|
+
stops?: [number, number, number];
|
|
166
|
+
} | null;
|
|
167
|
+
padding?: Padding;
|
|
168
|
+
borderRadius?: number;
|
|
169
|
+
borderWidth?: number;
|
|
170
|
+
borderColor?: string;
|
|
171
|
+
textAlign?: "left" | "center" | "right" | "justify";
|
|
172
|
+
};
|
|
173
|
+
/** Legacy row shell (`backgroundColor`, …) — import only. */
|
|
201
174
|
type RowStyles = {
|
|
202
175
|
backgroundColor?: string;
|
|
203
176
|
backgroundImage?: string;
|
|
204
177
|
backgroundRepeat?: string;
|
|
205
178
|
backgroundSize?: string;
|
|
206
179
|
backgroundPosition?: string;
|
|
207
|
-
|
|
208
|
-
backgroundGradient?: {
|
|
209
|
-
angle?: number;
|
|
210
|
-
colors?: [string, string, string];
|
|
211
|
-
stops?: [number, number, number];
|
|
212
|
-
};
|
|
180
|
+
backgroundGradient?: RowProps["bgGradient"];
|
|
213
181
|
padding?: Padding;
|
|
214
182
|
borderRadius?: number;
|
|
215
183
|
borderWidth?: number;
|
|
@@ -227,6 +195,18 @@ type ColumnBorderRadius = number | {
|
|
|
227
195
|
br?: number;
|
|
228
196
|
bl?: number;
|
|
229
197
|
};
|
|
198
|
+
/** Column shell on `email_document` (editor field names). */
|
|
199
|
+
type ColumnProps = {
|
|
200
|
+
padding?: Padding;
|
|
201
|
+
bgColor?: string;
|
|
202
|
+
bgImage?: string;
|
|
203
|
+
bgRepeat?: string;
|
|
204
|
+
bgSize?: string;
|
|
205
|
+
bgPosition?: string;
|
|
206
|
+
bgGradient?: RowProps["bgGradient"];
|
|
207
|
+
borderRadius?: ColumnBorderRadius;
|
|
208
|
+
};
|
|
209
|
+
/** Legacy column shell — import only. */
|
|
230
210
|
type ColumnStyles = {
|
|
231
211
|
padding?: Padding;
|
|
232
212
|
backgroundColor?: string;
|
|
@@ -234,28 +214,27 @@ type ColumnStyles = {
|
|
|
234
214
|
backgroundRepeat?: string;
|
|
235
215
|
backgroundSize?: string;
|
|
236
216
|
backgroundPosition?: string;
|
|
237
|
-
|
|
238
|
-
backgroundGradient?: {
|
|
239
|
-
angle?: number;
|
|
240
|
-
colors?: [string, string, string];
|
|
241
|
-
stops?: [number, number, number];
|
|
242
|
-
};
|
|
243
|
-
/** Uniform px or per-corner (matches block border radius in the editor). */
|
|
217
|
+
backgroundGradient?: RowProps["bgGradient"];
|
|
244
218
|
borderRadius?: ColumnBorderRadius;
|
|
245
219
|
};
|
|
246
220
|
type BlockBase = {
|
|
247
221
|
id?: string;
|
|
248
222
|
type: string;
|
|
249
|
-
|
|
223
|
+
/** Payload: object for most blocks; plain HTML string for `type: "html"`. */
|
|
224
|
+
content?: Record<string, unknown> | string;
|
|
225
|
+
/** Full editor block props (export + preferred import). */
|
|
226
|
+
props?: Record<string, unknown>;
|
|
227
|
+
/** Legacy block styling — import only when `props` is absent. */
|
|
250
228
|
styles?: Record<string, unknown>;
|
|
251
229
|
behavior?: Record<string, unknown>;
|
|
252
230
|
responsive?: Record<string, unknown>;
|
|
253
|
-
/** Full editor block props for lossless export/import (react-email-studio). */
|
|
254
|
-
props?: Record<string, unknown>;
|
|
255
231
|
};
|
|
256
232
|
type EmailDocumentColumn = {
|
|
257
233
|
id?: string;
|
|
258
234
|
layout?: ColumnLayout;
|
|
235
|
+
/** Column surface (padding, backgrounds, radius). */
|
|
236
|
+
props?: ColumnProps;
|
|
237
|
+
/** Legacy column shell — import only. */
|
|
259
238
|
styles?: ColumnStyles;
|
|
260
239
|
blocks?: BlockBase[];
|
|
261
240
|
};
|
|
@@ -263,9 +242,12 @@ type EmailDocumentRow = {
|
|
|
263
242
|
id?: string;
|
|
264
243
|
type?: "row";
|
|
265
244
|
layout?: RowLayout;
|
|
245
|
+
/** Row shell (padding, backgrounds). */
|
|
246
|
+
props?: RowProps;
|
|
247
|
+
/** Legacy row shell — import only. */
|
|
266
248
|
styles?: RowStyles;
|
|
267
249
|
columns?: EmailDocumentColumn[];
|
|
268
|
-
/**
|
|
250
|
+
/** Editor row snapshot (`preset`, `ratios`, column props, …) for round-trip. */
|
|
269
251
|
_reactEmailStudio?: {
|
|
270
252
|
row?: Record<string, unknown>;
|
|
271
253
|
};
|
|
@@ -273,11 +255,18 @@ type EmailDocumentRow = {
|
|
|
273
255
|
type EmailDocument = {
|
|
274
256
|
type: "email_document";
|
|
275
257
|
settings?: EmailDocumentSettings;
|
|
258
|
+
/** Flat root blocks (optional interchange; `rows` is the primary LMS/export shape). */
|
|
259
|
+
blocks?: BlockBase[];
|
|
260
|
+
/** Layout rows with `columns[].blocks[]` (primary import/export shape). */
|
|
276
261
|
rows?: EmailDocumentRow[];
|
|
277
262
|
globalStyles?: Record<string, unknown>;
|
|
278
263
|
responsive?: Record<string, unknown>;
|
|
279
264
|
};
|
|
280
265
|
|
|
266
|
+
/** Coerce fragment / array input into `email_document` before normalize. */
|
|
267
|
+
declare function coerceEmailDocumentInput(input: unknown): unknown;
|
|
268
|
+
/** Normalize input and return `email_document` in LMS/export shape (`rows[]` + `_reactEmailStudio`). */
|
|
269
|
+
declare function canonicalizeEmailDocument(input: unknown): EmailDocument | null;
|
|
281
270
|
/** Re-export for consumers typing `jsonToHtml` options. */
|
|
282
271
|
type JsonToHtmlOptions = EmailHtmlOptions;
|
|
283
272
|
/**
|
|
@@ -297,6 +286,70 @@ declare function extractHtmlForDesign(html: string): string;
|
|
|
297
286
|
* @returns `null` when there is no non-empty HTML after extraction/normalization.
|
|
298
287
|
*/
|
|
299
288
|
declare function htmlToEmailDesignTemplate(html: string): EmailDocument | null;
|
|
289
|
+
/**
|
|
290
|
+
* HTML fragment or full document → `email_document` JSON string (for `loadJson` / storage).
|
|
291
|
+
* Returns `""` when there is no non-empty HTML after extraction.
|
|
292
|
+
*/
|
|
293
|
+
declare function htmlToJson(html: string, pretty?: boolean): string;
|
|
294
|
+
|
|
295
|
+
/** Theme color tokens (subset used by the editor chrome). */
|
|
296
|
+
type ThemeColors = (typeof THEMES)["light"];
|
|
297
|
+
/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
|
|
298
|
+
type ReactEmailEditorOptions = EmailHtmlOptions & {
|
|
299
|
+
appearance?: {
|
|
300
|
+
theme?: string;
|
|
301
|
+
/** Shallow merge over the active theme (e.g. accent border). */
|
|
302
|
+
colors?: Partial<ThemeColors>;
|
|
303
|
+
/** Extra named palettes; keys appear in Settings → Color scheme. */
|
|
304
|
+
customThemes?: Record<string, ThemeColors>;
|
|
305
|
+
};
|
|
306
|
+
locale?: string;
|
|
307
|
+
features?: {
|
|
308
|
+
autoSave?: {
|
|
309
|
+
enabled?: boolean;
|
|
310
|
+
interval?: number;
|
|
311
|
+
};
|
|
312
|
+
};
|
|
313
|
+
tools?: Record<string, {
|
|
314
|
+
enabled?: boolean;
|
|
315
|
+
}>;
|
|
316
|
+
/** Optional labels for block-library sections (row layouts + content blocks). */
|
|
317
|
+
blockLibrary?: {
|
|
318
|
+
groupHeadings?: {
|
|
319
|
+
blocks?: string;
|
|
320
|
+
};
|
|
321
|
+
/** Override default palette group titles (keys: text, structure, media, actions, widgets). */
|
|
322
|
+
paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
|
|
323
|
+
};
|
|
324
|
+
};
|
|
325
|
+
type LoadJsonOptions = {
|
|
326
|
+
mode?: "replace" | "append";
|
|
327
|
+
};
|
|
328
|
+
interface ReactEmailEditorRef {
|
|
329
|
+
loadJson(input: string | Record<string, unknown>, options?: LoadJsonOptions): void;
|
|
330
|
+
/** Calls `cb` with the design as a JSON string (new `email_document` schema). */
|
|
331
|
+
exportJson(cb: (json: string) => void, pretty?: boolean): void;
|
|
332
|
+
}
|
|
333
|
+
type ReactEmailEditorProps = {
|
|
334
|
+
minHeight?: string;
|
|
335
|
+
editorId?: string;
|
|
336
|
+
options?: ReactEmailEditorOptions;
|
|
337
|
+
style?: CSSProperties;
|
|
338
|
+
onLoad?: (api: ReactEmailEditorRef) => void;
|
|
339
|
+
onReady?: (api: ReactEmailEditorRef) => void;
|
|
340
|
+
onUpload?: (file: File) => Promise<string>;
|
|
341
|
+
templates?: {
|
|
342
|
+
name: string;
|
|
343
|
+
design: unknown;
|
|
344
|
+
thumbnail?: string;
|
|
345
|
+
}[];
|
|
346
|
+
hideTemplates?: boolean;
|
|
347
|
+
children?: ReactNode;
|
|
348
|
+
};
|
|
349
|
+
declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>> & {
|
|
350
|
+
jsonToHtml: typeof jsonToHtml;
|
|
351
|
+
htmlToJson: typeof htmlToJson;
|
|
352
|
+
};
|
|
300
353
|
|
|
301
354
|
declare function utf8ToBase64(raw: string): string;
|
|
302
355
|
declare function base64ToUtf8(b64: string): string;
|
|
@@ -425,4 +478,4 @@ declare const DEVICES: ({
|
|
|
425
478
|
})[];
|
|
426
479
|
declare function PreviewModal({ html, contentWidth, rowCount, blockCount, editorZoom, locale, initialDevice, initialMobileVariant, onClose, C, title, secondaryActionLabel, onSecondaryAction, }: EmailPreviewModalProps): react_jsx_runtime.JSX.Element;
|
|
427
480
|
|
|
428
|
-
export { type BlockBase, type EmailDocument, type EmailDocumentColumn, type EmailDocumentRow, type EmailDocumentSettings, type EmailHtmlOptions, PreviewModal as EmailPreviewModal, type EmailPreviewModalProps, type JsonToHtmlOptions, type MobilePreviewVariant, ReactEmailEditor, type ReactEmailEditorOptions, type ReactEmailEditorProps, type ReactEmailEditorRef, base64ToUtf8, DEVICES as emailPreviewDevices, extractHtmlForDesign, htmlToEmailDesignTemplate, jsonToHtml, utf8ToBase64 };
|
|
481
|
+
export { type BlockBase, type ColumnProps, type ColumnStyles, type EmailDocument, type EmailDocumentColumn, type EmailDocumentRow, type EmailDocumentSettings, type EmailHtmlOptions, PreviewModal as EmailPreviewModal, type EmailPreviewModalProps, type JsonToHtmlOptions, type LoadJsonOptions, type MobilePreviewVariant, ReactEmailEditor, type ReactEmailEditorOptions, type ReactEmailEditorProps, type ReactEmailEditorRef, type RowProps, type RowStyles, base64ToUtf8, canonicalizeEmailDocument, coerceEmailDocumentInput, DEVICES as emailPreviewDevices, extractHtmlForDesign, htmlToEmailDesignTemplate, htmlToJson, jsonToHtml, utf8ToBase64 };
|
package/dist/index.d.ts
CHANGED
|
@@ -96,59 +96,6 @@ type EmailHtmlOptions = {
|
|
|
96
96
|
customCSS?: string;
|
|
97
97
|
};
|
|
98
98
|
|
|
99
|
-
/** Theme color tokens (subset used by the editor chrome). */
|
|
100
|
-
type ThemeColors = (typeof THEMES)["light"];
|
|
101
|
-
/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
|
|
102
|
-
type ReactEmailEditorOptions = EmailHtmlOptions & {
|
|
103
|
-
appearance?: {
|
|
104
|
-
theme?: string;
|
|
105
|
-
/** Shallow merge over the active theme (e.g. accent border). */
|
|
106
|
-
colors?: Partial<ThemeColors>;
|
|
107
|
-
/** Extra named palettes; keys appear in Settings → Color scheme. */
|
|
108
|
-
customThemes?: Record<string, ThemeColors>;
|
|
109
|
-
};
|
|
110
|
-
locale?: string;
|
|
111
|
-
features?: {
|
|
112
|
-
autoSave?: {
|
|
113
|
-
enabled?: boolean;
|
|
114
|
-
interval?: number;
|
|
115
|
-
};
|
|
116
|
-
};
|
|
117
|
-
tools?: Record<string, {
|
|
118
|
-
enabled?: boolean;
|
|
119
|
-
}>;
|
|
120
|
-
/** Optional labels for block-library sections (row layouts + content blocks). */
|
|
121
|
-
blockLibrary?: {
|
|
122
|
-
groupHeadings?: {
|
|
123
|
-
blocks?: string;
|
|
124
|
-
};
|
|
125
|
-
/** Override default palette group titles (keys: text, structure, media, actions, widgets). */
|
|
126
|
-
paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
|
|
127
|
-
};
|
|
128
|
-
};
|
|
129
|
-
interface ReactEmailEditorRef {
|
|
130
|
-
loadJson(input: string | Record<string, unknown>): void;
|
|
131
|
-
/** Calls `cb` with the design as a JSON string (new `email_document` schema). */
|
|
132
|
-
exportJson(cb: (json: string) => void, pretty?: boolean): void;
|
|
133
|
-
}
|
|
134
|
-
type ReactEmailEditorProps = {
|
|
135
|
-
minHeight?: string;
|
|
136
|
-
editorId?: string;
|
|
137
|
-
options?: ReactEmailEditorOptions;
|
|
138
|
-
style?: CSSProperties;
|
|
139
|
-
onLoad?: (api: ReactEmailEditorRef) => void;
|
|
140
|
-
onReady?: (api: ReactEmailEditorRef) => void;
|
|
141
|
-
onUpload?: (file: File) => Promise<string>;
|
|
142
|
-
templates?: {
|
|
143
|
-
name: string;
|
|
144
|
-
design: unknown;
|
|
145
|
-
thumbnail?: string;
|
|
146
|
-
}[];
|
|
147
|
-
hideTemplates?: boolean;
|
|
148
|
-
children?: ReactNode;
|
|
149
|
-
};
|
|
150
|
-
declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>>;
|
|
151
|
-
|
|
152
99
|
type Padding = {
|
|
153
100
|
top?: number;
|
|
154
101
|
right?: number;
|
|
@@ -184,11 +131,14 @@ type EmailDocumentSettings = {
|
|
|
184
131
|
color?: string;
|
|
185
132
|
responsive?: boolean;
|
|
186
133
|
rtl?: boolean;
|
|
187
|
-
/**
|
|
134
|
+
/** Content card inner padding (editor `settings.padding`). */
|
|
135
|
+
contentPadding?: number;
|
|
136
|
+
/** Content card corner radius (editor `settings.borderRadius`). */
|
|
137
|
+
contentBorderRadius?: number;
|
|
138
|
+
/** Studio snapshot for round-trip with the visual editor (settings + editor chrome). */
|
|
188
139
|
_reactEmailStudio?: {
|
|
189
140
|
contentPadding?: number;
|
|
190
141
|
contentBorderRadius?: number;
|
|
191
|
-
/** Full `ReactEmailEditor` settings object (merged on load after canonical fields). */
|
|
192
142
|
editorSettings?: Record<string, unknown>;
|
|
193
143
|
};
|
|
194
144
|
};
|
|
@@ -197,19 +147,37 @@ type RowLayout = {
|
|
|
197
147
|
gap?: number;
|
|
198
148
|
stackOnMobile?: boolean;
|
|
199
149
|
align?: "left" | "center" | "right";
|
|
150
|
+
/** Editor layout preset key (e.g. `layout2`, `custom`) — optional on `email_document` rows. */
|
|
151
|
+
preset?: string;
|
|
152
|
+
/** Column width ratios; length should match `columns`. */
|
|
153
|
+
ratios?: number[];
|
|
200
154
|
};
|
|
155
|
+
/** Row shell on `email_document` (editor field names). */
|
|
156
|
+
type RowProps = {
|
|
157
|
+
bgColor?: string;
|
|
158
|
+
bgImage?: string;
|
|
159
|
+
bgRepeat?: string;
|
|
160
|
+
bgSize?: string;
|
|
161
|
+
bgPosition?: string;
|
|
162
|
+
bgGradient?: {
|
|
163
|
+
angle?: number;
|
|
164
|
+
colors?: [string, string, string];
|
|
165
|
+
stops?: [number, number, number];
|
|
166
|
+
} | null;
|
|
167
|
+
padding?: Padding;
|
|
168
|
+
borderRadius?: number;
|
|
169
|
+
borderWidth?: number;
|
|
170
|
+
borderColor?: string;
|
|
171
|
+
textAlign?: "left" | "center" | "right" | "justify";
|
|
172
|
+
};
|
|
173
|
+
/** Legacy row shell (`backgroundColor`, …) — import only. */
|
|
201
174
|
type RowStyles = {
|
|
202
175
|
backgroundColor?: string;
|
|
203
176
|
backgroundImage?: string;
|
|
204
177
|
backgroundRepeat?: string;
|
|
205
178
|
backgroundSize?: string;
|
|
206
179
|
backgroundPosition?: string;
|
|
207
|
-
|
|
208
|
-
backgroundGradient?: {
|
|
209
|
-
angle?: number;
|
|
210
|
-
colors?: [string, string, string];
|
|
211
|
-
stops?: [number, number, number];
|
|
212
|
-
};
|
|
180
|
+
backgroundGradient?: RowProps["bgGradient"];
|
|
213
181
|
padding?: Padding;
|
|
214
182
|
borderRadius?: number;
|
|
215
183
|
borderWidth?: number;
|
|
@@ -227,6 +195,18 @@ type ColumnBorderRadius = number | {
|
|
|
227
195
|
br?: number;
|
|
228
196
|
bl?: number;
|
|
229
197
|
};
|
|
198
|
+
/** Column shell on `email_document` (editor field names). */
|
|
199
|
+
type ColumnProps = {
|
|
200
|
+
padding?: Padding;
|
|
201
|
+
bgColor?: string;
|
|
202
|
+
bgImage?: string;
|
|
203
|
+
bgRepeat?: string;
|
|
204
|
+
bgSize?: string;
|
|
205
|
+
bgPosition?: string;
|
|
206
|
+
bgGradient?: RowProps["bgGradient"];
|
|
207
|
+
borderRadius?: ColumnBorderRadius;
|
|
208
|
+
};
|
|
209
|
+
/** Legacy column shell — import only. */
|
|
230
210
|
type ColumnStyles = {
|
|
231
211
|
padding?: Padding;
|
|
232
212
|
backgroundColor?: string;
|
|
@@ -234,28 +214,27 @@ type ColumnStyles = {
|
|
|
234
214
|
backgroundRepeat?: string;
|
|
235
215
|
backgroundSize?: string;
|
|
236
216
|
backgroundPosition?: string;
|
|
237
|
-
|
|
238
|
-
backgroundGradient?: {
|
|
239
|
-
angle?: number;
|
|
240
|
-
colors?: [string, string, string];
|
|
241
|
-
stops?: [number, number, number];
|
|
242
|
-
};
|
|
243
|
-
/** Uniform px or per-corner (matches block border radius in the editor). */
|
|
217
|
+
backgroundGradient?: RowProps["bgGradient"];
|
|
244
218
|
borderRadius?: ColumnBorderRadius;
|
|
245
219
|
};
|
|
246
220
|
type BlockBase = {
|
|
247
221
|
id?: string;
|
|
248
222
|
type: string;
|
|
249
|
-
|
|
223
|
+
/** Payload: object for most blocks; plain HTML string for `type: "html"`. */
|
|
224
|
+
content?: Record<string, unknown> | string;
|
|
225
|
+
/** Full editor block props (export + preferred import). */
|
|
226
|
+
props?: Record<string, unknown>;
|
|
227
|
+
/** Legacy block styling — import only when `props` is absent. */
|
|
250
228
|
styles?: Record<string, unknown>;
|
|
251
229
|
behavior?: Record<string, unknown>;
|
|
252
230
|
responsive?: Record<string, unknown>;
|
|
253
|
-
/** Full editor block props for lossless export/import (react-email-studio). */
|
|
254
|
-
props?: Record<string, unknown>;
|
|
255
231
|
};
|
|
256
232
|
type EmailDocumentColumn = {
|
|
257
233
|
id?: string;
|
|
258
234
|
layout?: ColumnLayout;
|
|
235
|
+
/** Column surface (padding, backgrounds, radius). */
|
|
236
|
+
props?: ColumnProps;
|
|
237
|
+
/** Legacy column shell — import only. */
|
|
259
238
|
styles?: ColumnStyles;
|
|
260
239
|
blocks?: BlockBase[];
|
|
261
240
|
};
|
|
@@ -263,9 +242,12 @@ type EmailDocumentRow = {
|
|
|
263
242
|
id?: string;
|
|
264
243
|
type?: "row";
|
|
265
244
|
layout?: RowLayout;
|
|
245
|
+
/** Row shell (padding, backgrounds). */
|
|
246
|
+
props?: RowProps;
|
|
247
|
+
/** Legacy row shell — import only. */
|
|
266
248
|
styles?: RowStyles;
|
|
267
249
|
columns?: EmailDocumentColumn[];
|
|
268
|
-
/**
|
|
250
|
+
/** Editor row snapshot (`preset`, `ratios`, column props, …) for round-trip. */
|
|
269
251
|
_reactEmailStudio?: {
|
|
270
252
|
row?: Record<string, unknown>;
|
|
271
253
|
};
|
|
@@ -273,11 +255,18 @@ type EmailDocumentRow = {
|
|
|
273
255
|
type EmailDocument = {
|
|
274
256
|
type: "email_document";
|
|
275
257
|
settings?: EmailDocumentSettings;
|
|
258
|
+
/** Flat root blocks (optional interchange; `rows` is the primary LMS/export shape). */
|
|
259
|
+
blocks?: BlockBase[];
|
|
260
|
+
/** Layout rows with `columns[].blocks[]` (primary import/export shape). */
|
|
276
261
|
rows?: EmailDocumentRow[];
|
|
277
262
|
globalStyles?: Record<string, unknown>;
|
|
278
263
|
responsive?: Record<string, unknown>;
|
|
279
264
|
};
|
|
280
265
|
|
|
266
|
+
/** Coerce fragment / array input into `email_document` before normalize. */
|
|
267
|
+
declare function coerceEmailDocumentInput(input: unknown): unknown;
|
|
268
|
+
/** Normalize input and return `email_document` in LMS/export shape (`rows[]` + `_reactEmailStudio`). */
|
|
269
|
+
declare function canonicalizeEmailDocument(input: unknown): EmailDocument | null;
|
|
281
270
|
/** Re-export for consumers typing `jsonToHtml` options. */
|
|
282
271
|
type JsonToHtmlOptions = EmailHtmlOptions;
|
|
283
272
|
/**
|
|
@@ -297,6 +286,70 @@ declare function extractHtmlForDesign(html: string): string;
|
|
|
297
286
|
* @returns `null` when there is no non-empty HTML after extraction/normalization.
|
|
298
287
|
*/
|
|
299
288
|
declare function htmlToEmailDesignTemplate(html: string): EmailDocument | null;
|
|
289
|
+
/**
|
|
290
|
+
* HTML fragment or full document → `email_document` JSON string (for `loadJson` / storage).
|
|
291
|
+
* Returns `""` when there is no non-empty HTML after extraction.
|
|
292
|
+
*/
|
|
293
|
+
declare function htmlToJson(html: string, pretty?: boolean): string;
|
|
294
|
+
|
|
295
|
+
/** Theme color tokens (subset used by the editor chrome). */
|
|
296
|
+
type ThemeColors = (typeof THEMES)["light"];
|
|
297
|
+
/** Known `options` keys for {@link ReactEmailEditor} — callers may pass extra keys; these are what the editor reads. */
|
|
298
|
+
type ReactEmailEditorOptions = EmailHtmlOptions & {
|
|
299
|
+
appearance?: {
|
|
300
|
+
theme?: string;
|
|
301
|
+
/** Shallow merge over the active theme (e.g. accent border). */
|
|
302
|
+
colors?: Partial<ThemeColors>;
|
|
303
|
+
/** Extra named palettes; keys appear in Settings → Color scheme. */
|
|
304
|
+
customThemes?: Record<string, ThemeColors>;
|
|
305
|
+
};
|
|
306
|
+
locale?: string;
|
|
307
|
+
features?: {
|
|
308
|
+
autoSave?: {
|
|
309
|
+
enabled?: boolean;
|
|
310
|
+
interval?: number;
|
|
311
|
+
};
|
|
312
|
+
};
|
|
313
|
+
tools?: Record<string, {
|
|
314
|
+
enabled?: boolean;
|
|
315
|
+
}>;
|
|
316
|
+
/** Optional labels for block-library sections (row layouts + content blocks). */
|
|
317
|
+
blockLibrary?: {
|
|
318
|
+
groupHeadings?: {
|
|
319
|
+
blocks?: string;
|
|
320
|
+
};
|
|
321
|
+
/** Override default palette group titles (keys: text, structure, media, actions, widgets). */
|
|
322
|
+
paletteGroupLabels?: Partial<Record<BlockPaletteGroupKey, string>>;
|
|
323
|
+
};
|
|
324
|
+
};
|
|
325
|
+
type LoadJsonOptions = {
|
|
326
|
+
mode?: "replace" | "append";
|
|
327
|
+
};
|
|
328
|
+
interface ReactEmailEditorRef {
|
|
329
|
+
loadJson(input: string | Record<string, unknown>, options?: LoadJsonOptions): void;
|
|
330
|
+
/** Calls `cb` with the design as a JSON string (new `email_document` schema). */
|
|
331
|
+
exportJson(cb: (json: string) => void, pretty?: boolean): void;
|
|
332
|
+
}
|
|
333
|
+
type ReactEmailEditorProps = {
|
|
334
|
+
minHeight?: string;
|
|
335
|
+
editorId?: string;
|
|
336
|
+
options?: ReactEmailEditorOptions;
|
|
337
|
+
style?: CSSProperties;
|
|
338
|
+
onLoad?: (api: ReactEmailEditorRef) => void;
|
|
339
|
+
onReady?: (api: ReactEmailEditorRef) => void;
|
|
340
|
+
onUpload?: (file: File) => Promise<string>;
|
|
341
|
+
templates?: {
|
|
342
|
+
name: string;
|
|
343
|
+
design: unknown;
|
|
344
|
+
thumbnail?: string;
|
|
345
|
+
}[];
|
|
346
|
+
hideTemplates?: boolean;
|
|
347
|
+
children?: ReactNode;
|
|
348
|
+
};
|
|
349
|
+
declare const ReactEmailEditor: react.ForwardRefExoticComponent<ReactEmailEditorProps & react.RefAttributes<ReactEmailEditorRef>> & {
|
|
350
|
+
jsonToHtml: typeof jsonToHtml;
|
|
351
|
+
htmlToJson: typeof htmlToJson;
|
|
352
|
+
};
|
|
300
353
|
|
|
301
354
|
declare function utf8ToBase64(raw: string): string;
|
|
302
355
|
declare function base64ToUtf8(b64: string): string;
|
|
@@ -425,4 +478,4 @@ declare const DEVICES: ({
|
|
|
425
478
|
})[];
|
|
426
479
|
declare function PreviewModal({ html, contentWidth, rowCount, blockCount, editorZoom, locale, initialDevice, initialMobileVariant, onClose, C, title, secondaryActionLabel, onSecondaryAction, }: EmailPreviewModalProps): react_jsx_runtime.JSX.Element;
|
|
427
480
|
|
|
428
|
-
export { type BlockBase, type EmailDocument, type EmailDocumentColumn, type EmailDocumentRow, type EmailDocumentSettings, type EmailHtmlOptions, PreviewModal as EmailPreviewModal, type EmailPreviewModalProps, type JsonToHtmlOptions, type MobilePreviewVariant, ReactEmailEditor, type ReactEmailEditorOptions, type ReactEmailEditorProps, type ReactEmailEditorRef, base64ToUtf8, DEVICES as emailPreviewDevices, extractHtmlForDesign, htmlToEmailDesignTemplate, jsonToHtml, utf8ToBase64 };
|
|
481
|
+
export { type BlockBase, type ColumnProps, type ColumnStyles, type EmailDocument, type EmailDocumentColumn, type EmailDocumentRow, type EmailDocumentSettings, type EmailHtmlOptions, PreviewModal as EmailPreviewModal, type EmailPreviewModalProps, type JsonToHtmlOptions, type LoadJsonOptions, type MobilePreviewVariant, ReactEmailEditor, type ReactEmailEditorOptions, type ReactEmailEditorProps, type ReactEmailEditorRef, type RowProps, type RowStyles, base64ToUtf8, canonicalizeEmailDocument, coerceEmailDocumentInput, DEVICES as emailPreviewDevices, extractHtmlForDesign, htmlToEmailDesignTemplate, htmlToJson, jsonToHtml, utf8ToBase64 };
|