@kgalexander/mcreate 0.0.6 → 0.0.8

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.
Files changed (8) hide show
  1. package/README.md +14 -0
  2. package/dist/chunk-JD4V766D.mjs +15139 -0
  3. package/dist/core-B2RPCQDU.mjs +15 -0
  4. package/dist/index.d.mts +291 -2
  5. package/dist/index.d.ts +291 -2
  6. package/dist/index.js +23833 -10
  7. package/dist/index.mjs +7885 -5
  8. package/package.json +46 -1
package/dist/core-B2RPCQDU.mjs ADDED
@@ -0,0 +1,15 @@
1
+ "use client";
2
+ import {
3
+ Editor,
4
+ History,
5
+ MAILLOW_EMAIL_EDITOR_VERSION,
6
+ Preview,
7
+ useEditorStore
8
+ } from "./chunk-JD4V766D.mjs";
9
+ export {
10
+ Editor,
11
+ History,
12
+ MAILLOW_EMAIL_EDITOR_VERSION,
13
+ Preview,
14
+ useEditorStore
15
+ };
package/dist/index.d.mts CHANGED
@@ -1,5 +1,294 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
- declare function Editor(): react_jsx_runtime.JSX.Element;
3
+ type PageElement = {
4
+ id?: string;
5
+ type: 'page';
6
+ tagName: 'mj-body';
7
+ data: {
8
+ value: {
9
+ breakpoint?: string;
10
+ headAttributes?: string;
11
+ fontSize?: string;
12
+ fontWeight?: string;
13
+ lineHeight?: string;
14
+ 'font-size'?: string;
15
+ 'font-weight'?: string;
16
+ 'line-height'?: string;
17
+ headStyles?: string[];
18
+ fonts?: {
19
+ name?: string;
20
+ href?: string;
21
+ }[];
22
+ responsive?: boolean;
23
+ fontFamily?: string;
24
+ 'font-family'?: string;
25
+ textColor?: string;
26
+ 'text-color'?: string;
27
+ showCompanyFooter?: boolean;
28
+ [key: string]: any;
29
+ };
30
+ };
31
+ attributes: {
32
+ [key: string]: string;
33
+ };
34
+ children: (SectionElement | SectionColumnElement | SectionPropertyKmElement | SectionPropertySingleTwoElement | SectionPropertyTripleElement)[];
35
+ };
36
+ type SectionElement = {
37
+ type: 'section';
38
+ tagName: 'mj-section';
39
+ data: {
40
+ value: {
41
+ columnRows?: number;
42
+ columnWidths?: string[];
43
+ noWrap?: boolean;
44
+ isCompanyFooter?: boolean;
45
+ [key: string]: any;
46
+ };
47
+ };
48
+ attributes: {
49
+ [key: string]: string;
50
+ };
51
+ children: (ColumnElement)[];
52
+ };
53
+ type SectionColumnElement = {
54
+ type: 'section-column';
55
+ tagName: 'mj-section';
56
+ data: {
57
+ value: {
58
+ columnRows?: number;
59
+ columnWidths?: string[];
60
+ noWrap?: boolean;
61
+ [key: string]: any;
62
+ };
63
+ };
64
+ attributes: {
65
+ [key: string]: string;
66
+ };
67
+ children: (ColumnElement)[];
68
+ };
69
+ type SectionPropertyKmElement = {
70
+ type: 'section-property-km';
71
+ tagName: 'mj-section';
72
+ data: {
73
+ value: {
74
+ noWrap?: boolean;
75
+ [key: string]: any;
76
+ };
77
+ };
78
+ attributes: {
79
+ [key: string]: string;
80
+ };
81
+ children: [ColumnElement];
82
+ };
83
+ type SectionPropertySingleTwoElement = {
84
+ type: 'section-property-single-two';
85
+ tagName: 'mj-section';
86
+ data: {
87
+ value: {
88
+ noWrap?: boolean;
89
+ [key: string]: any;
90
+ };
91
+ };
92
+ attributes: {
93
+ [key: string]: string;
94
+ };
95
+ children: [ColumnElement];
96
+ };
97
+ type ColumnElement = {
98
+ type: 'column';
99
+ tagName: 'mj-column';
100
+ data: {
101
+ value: {
102
+ [key: string]: any;
103
+ };
104
+ };
105
+ attributes: {
106
+ [key: string]: string;
107
+ };
108
+ children: (TextElement | ButtonElement | SpaceElement | DividerElement | ImageElement | SocialElement | PropertyCardElement | PropertyCardSingleTwoElement | PropertyCardTripleElement)[];
109
+ };
110
+ type TextElement = {
111
+ type: 'text';
112
+ tagName: 'mj-text';
113
+ data: {
114
+ value: {
115
+ content: string;
116
+ [key: string]: any;
117
+ };
118
+ };
119
+ attributes: {
120
+ [key: string]: string;
121
+ };
122
+ };
123
+ type ButtonElement = {
124
+ type: 'button';
125
+ tagName: 'mj-button';
126
+ data: {
127
+ value: {
128
+ content: string;
129
+ [key: string]: any;
130
+ };
131
+ };
132
+ attributes: {
133
+ [key: string]: string;
134
+ };
135
+ };
136
+ type PropertyCardElement = {
137
+ type: 'property-card';
138
+ tagName: 'mj-colproperty';
139
+ data: {
140
+ value: {
141
+ [key: string]: any;
142
+ };
143
+ };
144
+ attributes: {
145
+ [key: string]: string;
146
+ };
147
+ };
148
+ type PropertyCardSingleTwoElement = {
149
+ type: 'property-card-single-two';
150
+ tagName: 'mj-propertysingletwo';
151
+ data: {
152
+ value: {
153
+ [key: string]: any;
154
+ };
155
+ };
156
+ attributes: {
157
+ [key: string]: string;
158
+ };
159
+ };
160
+ type PropertyCardTripleItemElement = {
161
+ type: 'property-card-triple-item';
162
+ tagName: 'mj-propertytripleitem';
163
+ data: {
164
+ value: {
165
+ [key: string]: any;
166
+ };
167
+ };
168
+ attributes: {
169
+ [key: string]: string;
170
+ };
171
+ };
172
+ type PropertyCardTripleElement = {
173
+ type: 'property-card-triple';
174
+ tagName: 'mj-propertytriple';
175
+ data: {
176
+ value: {
177
+ [key: string]: any;
178
+ };
179
+ };
180
+ attributes: {
181
+ [key: string]: string;
182
+ };
183
+ children: PropertyCardTripleItemElement[];
184
+ };
185
+ type SectionPropertyTripleElement = {
186
+ type: 'section-property-triple';
187
+ tagName: 'mj-section';
188
+ data: {
189
+ value: {
190
+ noWrap?: boolean;
191
+ [key: string]: any;
192
+ };
193
+ };
194
+ attributes: {
195
+ [key: string]: string;
196
+ };
197
+ children: [ColumnElement];
198
+ };
199
+ type SpaceElement = {
200
+ type: 'space';
201
+ tagName: 'mj-spacer';
202
+ attributes: {
203
+ [key: string]: string;
204
+ };
205
+ };
206
+ type DividerElement = {
207
+ type: 'divider';
208
+ tagName: 'mj-divider';
209
+ attributes: {
210
+ [key: string]: string;
211
+ };
212
+ };
213
+ type ImageElement = {
214
+ type: 'image';
215
+ tagName: 'mj-image';
216
+ attributes: {
217
+ [key: string]: string;
218
+ };
219
+ };
220
+ type SocialStyle = 'Icon + Text' | 'Icon' | 'Text';
221
+ type IconSize = 'Small' | 'Medium' | 'Large';
222
+ type IconStyle = 'Regular' | 'Filled' | 'Outline';
223
+ type IconColor = 'Colored' | 'Dark' | 'Light' | 'Gray';
224
+ type SocialElement = {
225
+ type: 'social';
226
+ tagName: 'mj-social';
227
+ data: {
228
+ value: {
229
+ socialStyle: SocialStyle;
230
+ iconSize: IconSize;
231
+ iconStyle: IconStyle;
232
+ iconColor: IconColor;
233
+ };
234
+ };
235
+ attributes: {
236
+ [key: string]: string;
237
+ };
238
+ children: (SocialItemElement)[];
239
+ };
240
+ type SocialItemElement = {
241
+ type: 'social-item';
242
+ tagName: 'mj-social-element';
243
+ data: {
244
+ value: {
245
+ content: string;
246
+ socialType: string;
247
+ };
248
+ };
249
+ attributes: {
250
+ [key: string]: string;
251
+ };
252
+ };
253
+ type TemplateJSON = {
254
+ id: string;
255
+ name: string;
256
+ version: string;
257
+ published: boolean;
258
+ creator: string;
259
+ content: PageElement[];
260
+ };
4
261
 
5
- export { Editor };
262
+ type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
263
+
264
+ interface EditorProps {
265
+ setEditorLoading?: (loading: boolean) => void;
266
+ editorLoading?: boolean;
267
+ }
268
+ declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
269
+
270
+ declare function TemplatePage({ templateId, initialTemplate, onSave }: {
271
+ templateId: string;
272
+ initialTemplate: TemplateJSON;
273
+ onSave?: OnSaveCallback;
274
+ }): react_jsx_runtime.JSX.Element;
275
+
276
+ /**
277
+ * JSON to MJML Converter
278
+ * Converts template JSON to MJML string for rendering
279
+ */
280
+
281
+ type RenderMode = 'production' | 'editing';
282
+ interface RenderOptions {
283
+ isPaid?: boolean;
284
+ }
285
+ /**
286
+ * Convert template JSON to MJML string
287
+ * @param template - Template JSON object
288
+ * @param mode - Render mode: 'production' for clean output, 'editing' for tracking classes
289
+ * @param options - Render options including isPaid for company footer visibility
290
+ * @returns MJML string
291
+ */
292
+ declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
293
+
294
+ export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };
package/dist/index.d.ts CHANGED
@@ -1,5 +1,294 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
 
3
- declare function Editor(): react_jsx_runtime.JSX.Element;
3
+ type PageElement = {
4
+ id?: string;
5
+ type: 'page';
6
+ tagName: 'mj-body';
7
+ data: {
8
+ value: {
9
+ breakpoint?: string;
10
+ headAttributes?: string;
11
+ fontSize?: string;
12
+ fontWeight?: string;
13
+ lineHeight?: string;
14
+ 'font-size'?: string;
15
+ 'font-weight'?: string;
16
+ 'line-height'?: string;
17
+ headStyles?: string[];
18
+ fonts?: {
19
+ name?: string;
20
+ href?: string;
21
+ }[];
22
+ responsive?: boolean;
23
+ fontFamily?: string;
24
+ 'font-family'?: string;
25
+ textColor?: string;
26
+ 'text-color'?: string;
27
+ showCompanyFooter?: boolean;
28
+ [key: string]: any;
29
+ };
30
+ };
31
+ attributes: {
32
+ [key: string]: string;
33
+ };
34
+ children: (SectionElement | SectionColumnElement | SectionPropertyKmElement | SectionPropertySingleTwoElement | SectionPropertyTripleElement)[];
35
+ };
36
+ type SectionElement = {
37
+ type: 'section';
38
+ tagName: 'mj-section';
39
+ data: {
40
+ value: {
41
+ columnRows?: number;
42
+ columnWidths?: string[];
43
+ noWrap?: boolean;
44
+ isCompanyFooter?: boolean;
45
+ [key: string]: any;
46
+ };
47
+ };
48
+ attributes: {
49
+ [key: string]: string;
50
+ };
51
+ children: (ColumnElement)[];
52
+ };
53
+ type SectionColumnElement = {
54
+ type: 'section-column';
55
+ tagName: 'mj-section';
56
+ data: {
57
+ value: {
58
+ columnRows?: number;
59
+ columnWidths?: string[];
60
+ noWrap?: boolean;
61
+ [key: string]: any;
62
+ };
63
+ };
64
+ attributes: {
65
+ [key: string]: string;
66
+ };
67
+ children: (ColumnElement)[];
68
+ };
69
+ type SectionPropertyKmElement = {
70
+ type: 'section-property-km';
71
+ tagName: 'mj-section';
72
+ data: {
73
+ value: {
74
+ noWrap?: boolean;
75
+ [key: string]: any;
76
+ };
77
+ };
78
+ attributes: {
79
+ [key: string]: string;
80
+ };
81
+ children: [ColumnElement];
82
+ };
83
+ type SectionPropertySingleTwoElement = {
84
+ type: 'section-property-single-two';
85
+ tagName: 'mj-section';
86
+ data: {
87
+ value: {
88
+ noWrap?: boolean;
89
+ [key: string]: any;
90
+ };
91
+ };
92
+ attributes: {
93
+ [key: string]: string;
94
+ };
95
+ children: [ColumnElement];
96
+ };
97
+ type ColumnElement = {
98
+ type: 'column';
99
+ tagName: 'mj-column';
100
+ data: {
101
+ value: {
102
+ [key: string]: any;
103
+ };
104
+ };
105
+ attributes: {
106
+ [key: string]: string;
107
+ };
108
+ children: (TextElement | ButtonElement | SpaceElement | DividerElement | ImageElement | SocialElement | PropertyCardElement | PropertyCardSingleTwoElement | PropertyCardTripleElement)[];
109
+ };
110
+ type TextElement = {
111
+ type: 'text';
112
+ tagName: 'mj-text';
113
+ data: {
114
+ value: {
115
+ content: string;
116
+ [key: string]: any;
117
+ };
118
+ };
119
+ attributes: {
120
+ [key: string]: string;
121
+ };
122
+ };
123
+ type ButtonElement = {
124
+ type: 'button';
125
+ tagName: 'mj-button';
126
+ data: {
127
+ value: {
128
+ content: string;
129
+ [key: string]: any;
130
+ };
131
+ };
132
+ attributes: {
133
+ [key: string]: string;
134
+ };
135
+ };
136
+ type PropertyCardElement = {
137
+ type: 'property-card';
138
+ tagName: 'mj-colproperty';
139
+ data: {
140
+ value: {
141
+ [key: string]: any;
142
+ };
143
+ };
144
+ attributes: {
145
+ [key: string]: string;
146
+ };
147
+ };
148
+ type PropertyCardSingleTwoElement = {
149
+ type: 'property-card-single-two';
150
+ tagName: 'mj-propertysingletwo';
151
+ data: {
152
+ value: {
153
+ [key: string]: any;
154
+ };
155
+ };
156
+ attributes: {
157
+ [key: string]: string;
158
+ };
159
+ };
160
+ type PropertyCardTripleItemElement = {
161
+ type: 'property-card-triple-item';
162
+ tagName: 'mj-propertytripleitem';
163
+ data: {
164
+ value: {
165
+ [key: string]: any;
166
+ };
167
+ };
168
+ attributes: {
169
+ [key: string]: string;
170
+ };
171
+ };
172
+ type PropertyCardTripleElement = {
173
+ type: 'property-card-triple';
174
+ tagName: 'mj-propertytriple';
175
+ data: {
176
+ value: {
177
+ [key: string]: any;
178
+ };
179
+ };
180
+ attributes: {
181
+ [key: string]: string;
182
+ };
183
+ children: PropertyCardTripleItemElement[];
184
+ };
185
+ type SectionPropertyTripleElement = {
186
+ type: 'section-property-triple';
187
+ tagName: 'mj-section';
188
+ data: {
189
+ value: {
190
+ noWrap?: boolean;
191
+ [key: string]: any;
192
+ };
193
+ };
194
+ attributes: {
195
+ [key: string]: string;
196
+ };
197
+ children: [ColumnElement];
198
+ };
199
+ type SpaceElement = {
200
+ type: 'space';
201
+ tagName: 'mj-spacer';
202
+ attributes: {
203
+ [key: string]: string;
204
+ };
205
+ };
206
+ type DividerElement = {
207
+ type: 'divider';
208
+ tagName: 'mj-divider';
209
+ attributes: {
210
+ [key: string]: string;
211
+ };
212
+ };
213
+ type ImageElement = {
214
+ type: 'image';
215
+ tagName: 'mj-image';
216
+ attributes: {
217
+ [key: string]: string;
218
+ };
219
+ };
220
+ type SocialStyle = 'Icon + Text' | 'Icon' | 'Text';
221
+ type IconSize = 'Small' | 'Medium' | 'Large';
222
+ type IconStyle = 'Regular' | 'Filled' | 'Outline';
223
+ type IconColor = 'Colored' | 'Dark' | 'Light' | 'Gray';
224
+ type SocialElement = {
225
+ type: 'social';
226
+ tagName: 'mj-social';
227
+ data: {
228
+ value: {
229
+ socialStyle: SocialStyle;
230
+ iconSize: IconSize;
231
+ iconStyle: IconStyle;
232
+ iconColor: IconColor;
233
+ };
234
+ };
235
+ attributes: {
236
+ [key: string]: string;
237
+ };
238
+ children: (SocialItemElement)[];
239
+ };
240
+ type SocialItemElement = {
241
+ type: 'social-item';
242
+ tagName: 'mj-social-element';
243
+ data: {
244
+ value: {
245
+ content: string;
246
+ socialType: string;
247
+ };
248
+ };
249
+ attributes: {
250
+ [key: string]: string;
251
+ };
252
+ };
253
+ type TemplateJSON = {
254
+ id: string;
255
+ name: string;
256
+ version: string;
257
+ published: boolean;
258
+ creator: string;
259
+ content: PageElement[];
260
+ };
4
261
 
5
- export { Editor };
262
+ type OnSaveCallback = (templateId: string, template: TemplateJSON) => void | Promise<void>;
263
+
264
+ interface EditorProps {
265
+ setEditorLoading?: (loading: boolean) => void;
266
+ editorLoading?: boolean;
267
+ }
268
+ declare function Editor({ setEditorLoading }: EditorProps): react_jsx_runtime.JSX.Element;
269
+
270
+ declare function TemplatePage({ templateId, initialTemplate, onSave }: {
271
+ templateId: string;
272
+ initialTemplate: TemplateJSON;
273
+ onSave?: OnSaveCallback;
274
+ }): react_jsx_runtime.JSX.Element;
275
+
276
+ /**
277
+ * JSON to MJML Converter
278
+ * Converts template JSON to MJML string for rendering
279
+ */
280
+
281
+ type RenderMode = 'production' | 'editing';
282
+ interface RenderOptions {
283
+ isPaid?: boolean;
284
+ }
285
+ /**
286
+ * Convert template JSON to MJML string
287
+ * @param template - Template JSON object
288
+ * @param mode - Render mode: 'production' for clean output, 'editing' for tracking classes
289
+ * @param options - Render options including isPaid for company footer visibility
290
+ * @returns MJML string
291
+ */
292
+ declare function json2mjml(template: TemplateJSON, mode?: RenderMode, options?: RenderOptions): string;
293
+
294
+ export { Editor, type OnSaveCallback, type TemplateJSON, TemplatePage, json2mjml };