@kontakto/email-template-editor 1.6.0 → 2.0.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/README.md +60 -4
- package/dist/index.cjs +1346 -727
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +152 -14
- package/dist/index.d.ts +152 -14
- package/dist/index.js +1244 -626
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var DOMPurify = require('dompurify');
|
|
4
4
|
var marked = require('marked');
|
|
5
|
-
var
|
|
5
|
+
var React60 = require('react');
|
|
6
6
|
var zod = require('zod');
|
|
7
7
|
var server = require('react-dom/server');
|
|
8
8
|
var styles = require('@mui/material/styles');
|
|
@@ -18,7 +18,7 @@ var htmlfy = require('htmlfy');
|
|
|
18
18
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
19
|
|
|
20
20
|
var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
|
|
21
|
-
var
|
|
21
|
+
var React60__default = /*#__PURE__*/_interopDefault(React60);
|
|
22
22
|
var hljs__default = /*#__PURE__*/_interopDefault(hljs);
|
|
23
23
|
var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
|
|
24
24
|
var xmlHighlighter__default = /*#__PURE__*/_interopDefault(xmlHighlighter);
|
|
@@ -168,8 +168,8 @@ function renderMarkdownString(str) {
|
|
|
168
168
|
}
|
|
169
169
|
function EmailMarkdown(_a) {
|
|
170
170
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
171
|
-
const data =
|
|
172
|
-
return /* @__PURE__ */
|
|
171
|
+
const data = React60.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
172
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
173
173
|
}
|
|
174
174
|
var FONT_FAMILY_SCHEMA = zod.z.enum([
|
|
175
175
|
"MODERN_SANS",
|
|
@@ -245,9 +245,9 @@ function Text({ style, props }) {
|
|
|
245
245
|
};
|
|
246
246
|
const text = (_f = props == null ? void 0 : props.text) != null ? _f : TextPropsDefaults.text;
|
|
247
247
|
if (props == null ? void 0 : props.markdown) {
|
|
248
|
-
return /* @__PURE__ */
|
|
248
|
+
return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
249
249
|
}
|
|
250
|
-
return /* @__PURE__ */
|
|
250
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, text);
|
|
251
251
|
}
|
|
252
252
|
var PADDING_SCHEMA2 = zod.z.object({
|
|
253
253
|
top: zod.z.number(),
|
|
@@ -296,7 +296,7 @@ function Avatar({ style, props }) {
|
|
|
296
296
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
297
297
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
298
298
|
};
|
|
299
|
-
return /* @__PURE__ */
|
|
299
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement(
|
|
300
300
|
"img",
|
|
301
301
|
{
|
|
302
302
|
alt,
|
|
@@ -444,14 +444,14 @@ function Button({ style, props }) {
|
|
|
444
444
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
445
445
|
textDecoration: "none"
|
|
446
446
|
};
|
|
447
|
-
return /* @__PURE__ */
|
|
447
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
448
448
|
"span",
|
|
449
449
|
{
|
|
450
450
|
dangerouslySetInnerHTML: {
|
|
451
451
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
452
452
|
}
|
|
453
453
|
}
|
|
454
|
-
), /* @__PURE__ */
|
|
454
|
+
), /* @__PURE__ */ React60__default.default.createElement("span", null, text), /* @__PURE__ */ React60__default.default.createElement(
|
|
455
455
|
"span",
|
|
456
456
|
{
|
|
457
457
|
dangerouslySetInnerHTML: {
|
|
@@ -500,7 +500,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
500
500
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
501
501
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
502
502
|
};
|
|
503
|
-
return /* @__PURE__ */
|
|
503
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React60__default.default.createElement(
|
|
504
504
|
"table",
|
|
505
505
|
{
|
|
506
506
|
align: "center",
|
|
@@ -509,7 +509,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
509
509
|
border: 0,
|
|
510
510
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
511
511
|
},
|
|
512
|
-
/* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ React60__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React60__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
513
513
|
));
|
|
514
514
|
}
|
|
515
515
|
function TableCell({ index, props, columns }) {
|
|
@@ -527,7 +527,7 @@ function TableCell({ index, props, columns }) {
|
|
|
527
527
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
528
528
|
};
|
|
529
529
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
530
|
-
return /* @__PURE__ */
|
|
530
|
+
return /* @__PURE__ */ React60__default.default.createElement("td", { style }, children);
|
|
531
531
|
}
|
|
532
532
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
533
533
|
if (index === 0) {
|
|
@@ -589,9 +589,9 @@ function Container({ style, children }) {
|
|
|
589
589
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
590
590
|
};
|
|
591
591
|
if (!children) {
|
|
592
|
-
return /* @__PURE__ */
|
|
592
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle });
|
|
593
593
|
}
|
|
594
|
-
return /* @__PURE__ */
|
|
594
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, children);
|
|
595
595
|
}
|
|
596
596
|
var container_default = Container;
|
|
597
597
|
var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -625,7 +625,7 @@ function Divider({ style, props }) {
|
|
|
625
625
|
};
|
|
626
626
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
627
627
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
628
|
-
return /* @__PURE__ */
|
|
628
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: st }, /* @__PURE__ */ React60__default.default.createElement(
|
|
629
629
|
"hr",
|
|
630
630
|
{
|
|
631
631
|
style: {
|
|
@@ -715,11 +715,11 @@ function Heading({ props, style }) {
|
|
|
715
715
|
};
|
|
716
716
|
switch (level) {
|
|
717
717
|
case "h1":
|
|
718
|
-
return /* @__PURE__ */
|
|
718
|
+
return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, text);
|
|
719
719
|
case "h2":
|
|
720
|
-
return /* @__PURE__ */
|
|
720
|
+
return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, text);
|
|
721
721
|
case "h3":
|
|
722
|
-
return /* @__PURE__ */
|
|
722
|
+
return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, text);
|
|
723
723
|
}
|
|
724
724
|
}
|
|
725
725
|
function getFontSize(level) {
|
|
@@ -801,9 +801,9 @@ function Html({ style, props }) {
|
|
|
801
801
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
802
802
|
};
|
|
803
803
|
if (!children) {
|
|
804
|
-
return /* @__PURE__ */
|
|
804
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
|
|
805
805
|
}
|
|
806
|
-
return /* @__PURE__ */
|
|
806
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
807
807
|
}
|
|
808
808
|
var html_default = Html;
|
|
809
809
|
var PADDING_SCHEMA9 = zod.z.object({
|
|
@@ -839,7 +839,7 @@ function Image({ style, props }) {
|
|
|
839
839
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
840
840
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
841
841
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
842
|
-
const imageElement = /* @__PURE__ */
|
|
842
|
+
const imageElement = /* @__PURE__ */ React60__default.default.createElement(
|
|
843
843
|
"img",
|
|
844
844
|
{
|
|
845
845
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -859,9 +859,9 @@ function Image({ style, props }) {
|
|
|
859
859
|
}
|
|
860
860
|
);
|
|
861
861
|
if (!linkHref) {
|
|
862
|
-
return /* @__PURE__ */
|
|
862
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
863
863
|
}
|
|
864
|
-
return /* @__PURE__ */
|
|
864
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React60__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
865
865
|
}
|
|
866
866
|
var image_default = Image;
|
|
867
867
|
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
@@ -1007,7 +1007,7 @@ function Signature({ style, props }) {
|
|
|
1007
1007
|
color: linkColor,
|
|
1008
1008
|
textDecoration: "none"
|
|
1009
1009
|
};
|
|
1010
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1010
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React60__default.default.createElement(
|
|
1011
1011
|
"img",
|
|
1012
1012
|
{
|
|
1013
1013
|
src: imageUrl,
|
|
@@ -1026,18 +1026,18 @@ function Signature({ style, props }) {
|
|
|
1026
1026
|
}
|
|
1027
1027
|
) : null;
|
|
1028
1028
|
const contactParts = [];
|
|
1029
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1030
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1029
|
+
if (email) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1030
|
+
if (phone) contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1031
1031
|
if (website) {
|
|
1032
1032
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1033
|
-
contactParts.push(/* @__PURE__ */
|
|
1033
|
+
contactParts.push(/* @__PURE__ */ React60__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1034
1034
|
}
|
|
1035
|
-
const textContent = /* @__PURE__ */
|
|
1036
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1035
|
+
const textContent = /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1036
|
+
const greetingElement = greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1037
1037
|
if (layout === "vertical") {
|
|
1038
|
-
return /* @__PURE__ */
|
|
1038
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1039
1039
|
}
|
|
1040
|
-
return /* @__PURE__ */
|
|
1040
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1041
1041
|
}
|
|
1042
1042
|
var signature_default = Signature;
|
|
1043
1043
|
var SpacerPropsSchema = zod.z.object({
|
|
@@ -1054,13 +1054,13 @@ function Spacer({ props }) {
|
|
|
1054
1054
|
const style = {
|
|
1055
1055
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1056
1056
|
};
|
|
1057
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style });
|
|
1058
1058
|
}
|
|
1059
1059
|
var spacer_default = Spacer;
|
|
1060
1060
|
function buildBlockComponent(blocks) {
|
|
1061
1061
|
return function BlockComponent({ type, data }) {
|
|
1062
1062
|
const Component = blocks[type].Component;
|
|
1063
|
-
return /* @__PURE__ */
|
|
1063
|
+
return /* @__PURE__ */ React60__default.default.createElement(Component, __spreadValues({}, data));
|
|
1064
1064
|
};
|
|
1065
1065
|
}
|
|
1066
1066
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1097,9 +1097,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1097
1097
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1098
1098
|
let cols = void 0;
|
|
1099
1099
|
if (columns) {
|
|
1100
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1100
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1101
1101
|
}
|
|
1102
|
-
return /* @__PURE__ */
|
|
1102
|
+
return /* @__PURE__ */ React60__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1103
1103
|
}
|
|
1104
1104
|
var ContainerPropsSchema2 = zod.z.object({
|
|
1105
1105
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1110,7 +1110,7 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
1110
1110
|
function ContainerReader({ style, props }) {
|
|
1111
1111
|
var _a;
|
|
1112
1112
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1113
|
-
return /* @__PURE__ */
|
|
1113
|
+
return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1114
1114
|
}
|
|
1115
1115
|
var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1116
1116
|
var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
@@ -1124,6 +1124,10 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
|
1124
1124
|
"BOOK_SERIF",
|
|
1125
1125
|
"MONOSPACE"
|
|
1126
1126
|
]).nullable().optional();
|
|
1127
|
+
var TemplateVariableSchema = zod.z.object({
|
|
1128
|
+
name: zod.z.string(),
|
|
1129
|
+
description: zod.z.string().optional().nullable()
|
|
1130
|
+
});
|
|
1127
1131
|
var EmailLayoutPropsSchema = zod.z.object({
|
|
1128
1132
|
backdropColor: COLOR_SCHEMA9,
|
|
1129
1133
|
backdropDisabled: zod.z.boolean().optional().nullable(),
|
|
@@ -1132,7 +1136,9 @@ var EmailLayoutPropsSchema = zod.z.object({
|
|
|
1132
1136
|
canvasColor: COLOR_SCHEMA9,
|
|
1133
1137
|
textColor: COLOR_SCHEMA9,
|
|
1134
1138
|
fontFamily: FONT_FAMILY_SCHEMA6,
|
|
1135
|
-
childrenIds: zod.z.array(zod.z.string()).optional().nullable()
|
|
1139
|
+
childrenIds: zod.z.array(zod.z.string()).optional().nullable(),
|
|
1140
|
+
subject: zod.z.string().optional().nullable(),
|
|
1141
|
+
variables: zod.z.array(TemplateVariableSchema).optional().nullable()
|
|
1136
1142
|
});
|
|
1137
1143
|
function getFontFamily6(fontFamily) {
|
|
1138
1144
|
const f = fontFamily != null ? fontFamily : "MODERN_SANS";
|
|
@@ -1176,9 +1182,9 @@ function EmailLayoutReader(props) {
|
|
|
1176
1182
|
margin: "0"
|
|
1177
1183
|
};
|
|
1178
1184
|
if (props.backdropDisabled) {
|
|
1179
|
-
return /* @__PURE__ */
|
|
1185
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1180
1186
|
}
|
|
1181
|
-
return /* @__PURE__ */
|
|
1187
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
1182
1188
|
"div",
|
|
1183
1189
|
{
|
|
1184
1190
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1188,7 +1194,7 @@ function EmailLayoutReader(props) {
|
|
|
1188
1194
|
width: "100%"
|
|
1189
1195
|
})
|
|
1190
1196
|
},
|
|
1191
|
-
/* @__PURE__ */
|
|
1197
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
1192
1198
|
"table",
|
|
1193
1199
|
{
|
|
1194
1200
|
align: "center",
|
|
@@ -1206,19 +1212,19 @@ function EmailLayoutReader(props) {
|
|
|
1206
1212
|
cellPadding: "0",
|
|
1207
1213
|
border: 0
|
|
1208
1214
|
},
|
|
1209
|
-
/* @__PURE__ */
|
|
1215
|
+
/* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1210
1216
|
)
|
|
1211
1217
|
);
|
|
1212
1218
|
}
|
|
1213
1219
|
|
|
1214
1220
|
// src/email-builder/reader/core.tsx
|
|
1215
|
-
var ReaderContext =
|
|
1221
|
+
var ReaderContext = React60.createContext({});
|
|
1216
1222
|
function useReaderDocument() {
|
|
1217
|
-
return
|
|
1223
|
+
return React60.useContext(ReaderContext);
|
|
1218
1224
|
}
|
|
1219
1225
|
function ReaderBlock({ id }) {
|
|
1220
1226
|
const document2 = useReaderDocument();
|
|
1221
|
-
return document2[id] ? /* @__PURE__ */
|
|
1227
|
+
return document2[id] ? /* @__PURE__ */ React60__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1222
1228
|
}
|
|
1223
1229
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1224
1230
|
ColumnsContainer: {
|
|
@@ -1275,13 +1281,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1275
1281
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1276
1282
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1277
1283
|
function Reader({ document: document2, rootBlockId }) {
|
|
1278
|
-
return /* @__PURE__ */
|
|
1284
|
+
return /* @__PURE__ */ React60__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React60__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1279
1285
|
}
|
|
1280
1286
|
|
|
1281
1287
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1282
1288
|
function renderToStaticMarkup(document2, { rootBlockId }) {
|
|
1283
1289
|
return "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1284
|
-
/* @__PURE__ */
|
|
1290
|
+
/* @__PURE__ */ React60__default.default.createElement("html", null, /* @__PURE__ */ React60__default.default.createElement("body", null, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1285
1291
|
);
|
|
1286
1292
|
}
|
|
1287
1293
|
|
|
@@ -2022,70 +2028,95 @@ function setSelectedScreenSize(selectedScreenSize) {
|
|
|
2022
2028
|
function setPersistenceEnabled(persistenceEnabled) {
|
|
2023
2029
|
return editorStateStore.setState({ persistenceEnabled });
|
|
2024
2030
|
}
|
|
2025
|
-
|
|
2031
|
+
|
|
2032
|
+
// src/app/save-payload.ts
|
|
2033
|
+
var ROOT_BLOCK_ID = "root";
|
|
2034
|
+
function buildSavePayload(doc) {
|
|
2035
|
+
var _a, _b;
|
|
2036
|
+
const root = doc.root;
|
|
2037
|
+
const layoutData = root && root.type === "EmailLayout" ? root.data : void 0;
|
|
2038
|
+
return {
|
|
2039
|
+
editorConfig: doc,
|
|
2040
|
+
subject: (_a = layoutData == null ? void 0 : layoutData.subject) != null ? _a : void 0,
|
|
2041
|
+
variables: (_b = layoutData == null ? void 0 : layoutData.variables) != null ? _b : void 0,
|
|
2042
|
+
bodyHtml: renderToStaticMarkup(doc, { rootBlockId: ROOT_BLOCK_ID }),
|
|
2043
|
+
bodyText: renderToText(doc, { rootBlockId: ROOT_BLOCK_ID })
|
|
2044
|
+
};
|
|
2045
|
+
}
|
|
2046
|
+
|
|
2047
|
+
// src/app/context.tsx
|
|
2048
|
+
var EmailEditorContext = React60.createContext(null);
|
|
2026
2049
|
var EmailEditorProvider = ({
|
|
2027
2050
|
children,
|
|
2028
2051
|
initialTemplateId = null,
|
|
2029
2052
|
initialTemplateName = null,
|
|
2030
2053
|
onSave
|
|
2031
2054
|
}) => {
|
|
2032
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
2033
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
2034
|
-
const
|
|
2035
|
-
const
|
|
2055
|
+
const [currentTemplateId, setCurrentTemplateId] = React60.useState(initialTemplateId);
|
|
2056
|
+
const [currentTemplateName, setCurrentTemplateName] = React60.useState(initialTemplateName);
|
|
2057
|
+
const [currentTemplateKind, setCurrentTemplateKind] = React60.useState(null);
|
|
2058
|
+
const saveListenersRef = React60.useRef([]);
|
|
2059
|
+
const onSaveRef = React60.useRef(onSave);
|
|
2036
2060
|
onSaveRef.current = onSave;
|
|
2037
|
-
const saveTemplate =
|
|
2061
|
+
const saveTemplate = React60.useCallback(() => {
|
|
2038
2062
|
const currentDoc = getDocument();
|
|
2039
2063
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
2040
2064
|
if (onSaveRef.current) {
|
|
2041
|
-
onSaveRef.current(currentDoc);
|
|
2065
|
+
onSaveRef.current(buildSavePayload(currentDoc));
|
|
2042
2066
|
}
|
|
2043
2067
|
return currentDoc;
|
|
2044
2068
|
}, []);
|
|
2045
|
-
const loadTemplate =
|
|
2069
|
+
const loadTemplate = React60.useCallback((newTemplate, templateId, templateName, kind) => {
|
|
2046
2070
|
if (templateId !== void 0) {
|
|
2047
2071
|
setCurrentTemplateId(templateId);
|
|
2048
2072
|
}
|
|
2049
2073
|
if (templateName !== void 0) {
|
|
2050
2074
|
setCurrentTemplateName(templateName);
|
|
2051
2075
|
}
|
|
2076
|
+
if (kind !== void 0) {
|
|
2077
|
+
setCurrentTemplateKind(kind);
|
|
2078
|
+
}
|
|
2052
2079
|
}, []);
|
|
2053
|
-
const setCurrentTemplate =
|
|
2080
|
+
const setCurrentTemplate = React60.useCallback((templateId, templateName, kind) => {
|
|
2054
2081
|
setCurrentTemplateId(templateId);
|
|
2055
2082
|
setCurrentTemplateName(templateName);
|
|
2083
|
+
if (kind !== void 0) {
|
|
2084
|
+
setCurrentTemplateKind(kind);
|
|
2085
|
+
}
|
|
2056
2086
|
}, []);
|
|
2057
|
-
const registerSaveListener =
|
|
2087
|
+
const registerSaveListener = React60.useCallback((callback) => {
|
|
2058
2088
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
2059
2089
|
return () => {
|
|
2060
2090
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2061
2091
|
};
|
|
2062
2092
|
}, []);
|
|
2063
|
-
const value =
|
|
2093
|
+
const value = React60.useMemo(() => ({
|
|
2064
2094
|
currentTemplateId,
|
|
2065
2095
|
currentTemplateName,
|
|
2096
|
+
currentTemplateKind,
|
|
2066
2097
|
saveTemplate,
|
|
2067
2098
|
loadTemplate,
|
|
2068
2099
|
registerSaveListener,
|
|
2069
2100
|
setCurrentTemplate
|
|
2070
|
-
}), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
2071
|
-
return /* @__PURE__ */
|
|
2101
|
+
}), [currentTemplateId, currentTemplateName, currentTemplateKind, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
2102
|
+
return /* @__PURE__ */ React60__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2072
2103
|
};
|
|
2073
2104
|
var useEmailEditor = () => {
|
|
2074
|
-
const context =
|
|
2105
|
+
const context = React60.useContext(EmailEditorContext);
|
|
2075
2106
|
if (!context) {
|
|
2076
2107
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
2077
2108
|
}
|
|
2078
2109
|
return context;
|
|
2079
2110
|
};
|
|
2080
2111
|
function BaseSidebarPanel({ title, children }) {
|
|
2081
|
-
return /* @__PURE__ */
|
|
2112
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
2082
2113
|
}
|
|
2083
2114
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2084
|
-
const [value, setValue] =
|
|
2085
|
-
|
|
2115
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2116
|
+
React60.useEffect(() => {
|
|
2086
2117
|
setValue(defaultValue);
|
|
2087
2118
|
}, [defaultValue]);
|
|
2088
|
-
return /* @__PURE__ */
|
|
2119
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
|
|
2089
2120
|
material.ToggleButtonGroup,
|
|
2090
2121
|
{
|
|
2091
2122
|
exclusive: true,
|
|
@@ -2105,7 +2136,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2105
2136
|
}
|
|
2106
2137
|
function RawSliderInput(_a) {
|
|
2107
2138
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2108
|
-
return /* @__PURE__ */
|
|
2139
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React60__default.default.createElement(
|
|
2109
2140
|
material.Slider,
|
|
2110
2141
|
__spreadProps(__spreadValues({}, props), {
|
|
2111
2142
|
value,
|
|
@@ -2116,14 +2147,14 @@ function RawSliderInput(_a) {
|
|
|
2116
2147
|
setValue(value2);
|
|
2117
2148
|
}
|
|
2118
2149
|
})
|
|
2119
|
-
), /* @__PURE__ */
|
|
2150
|
+
), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2120
2151
|
}
|
|
2121
2152
|
|
|
2122
2153
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2123
2154
|
function SliderInput(_a) {
|
|
2124
2155
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2125
|
-
const [value, setValue] =
|
|
2126
|
-
return /* @__PURE__ */
|
|
2156
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2157
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
|
|
2127
2158
|
RawSliderInput,
|
|
2128
2159
|
__spreadValues({
|
|
2129
2160
|
value,
|
|
@@ -2135,12 +2166,12 @@ function SliderInput(_a) {
|
|
|
2135
2166
|
));
|
|
2136
2167
|
}
|
|
2137
2168
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
2138
|
-
const [value, setValue] =
|
|
2169
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2139
2170
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
2140
|
-
|
|
2171
|
+
React60.useEffect(() => {
|
|
2141
2172
|
setValue(defaultValue);
|
|
2142
2173
|
}, [defaultValue]);
|
|
2143
|
-
return /* @__PURE__ */
|
|
2174
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2144
2175
|
material.TextField,
|
|
2145
2176
|
{
|
|
2146
2177
|
fullWidth: true,
|
|
@@ -2166,7 +2197,7 @@ var TILE_BUTTON = {
|
|
|
2166
2197
|
};
|
|
2167
2198
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2168
2199
|
const renderButton2 = (colorValue) => {
|
|
2169
|
-
return /* @__PURE__ */
|
|
2200
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2170
2201
|
material.Button,
|
|
2171
2202
|
{
|
|
2172
2203
|
key: colorValue,
|
|
@@ -2185,7 +2216,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2185
2216
|
}
|
|
2186
2217
|
);
|
|
2187
2218
|
};
|
|
2188
|
-
return /* @__PURE__ */
|
|
2219
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2189
2220
|
}
|
|
2190
2221
|
|
|
2191
2222
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2252,7 +2283,7 @@ var SX = {
|
|
|
2252
2283
|
}
|
|
2253
2284
|
};
|
|
2254
2285
|
function Picker({ value, onChange }) {
|
|
2255
|
-
return /* @__PURE__ */
|
|
2286
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React60__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React60__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React60__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2256
2287
|
}
|
|
2257
2288
|
|
|
2258
2289
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2265,8 +2296,8 @@ var BUTTON_SX = {
|
|
|
2265
2296
|
bgcolor: "#FFFFFF"
|
|
2266
2297
|
};
|
|
2267
2298
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
2268
|
-
const [anchorEl, setAnchorEl] =
|
|
2269
|
-
const [value, setValue] =
|
|
2299
|
+
const [anchorEl, setAnchorEl] = React60.useState(null);
|
|
2300
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2270
2301
|
const handleClickOpen = (event) => {
|
|
2271
2302
|
setAnchorEl(event.currentTarget);
|
|
2272
2303
|
};
|
|
@@ -2277,7 +2308,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2277
2308
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2278
2309
|
return null;
|
|
2279
2310
|
}
|
|
2280
|
-
return /* @__PURE__ */
|
|
2311
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2281
2312
|
material.ButtonBase,
|
|
2282
2313
|
{
|
|
2283
2314
|
onClick: () => {
|
|
@@ -2285,16 +2316,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2285
2316
|
onChange(null);
|
|
2286
2317
|
}
|
|
2287
2318
|
},
|
|
2288
|
-
/* @__PURE__ */
|
|
2319
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2289
2320
|
);
|
|
2290
2321
|
};
|
|
2291
2322
|
const renderOpenButton = () => {
|
|
2292
2323
|
if (value) {
|
|
2293
|
-
return /* @__PURE__ */
|
|
2324
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2294
2325
|
}
|
|
2295
|
-
return /* @__PURE__ */
|
|
2326
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
2296
2327
|
};
|
|
2297
|
-
return /* @__PURE__ */
|
|
2328
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React60__default.default.createElement(
|
|
2298
2329
|
material.Menu,
|
|
2299
2330
|
{
|
|
2300
2331
|
anchorEl,
|
|
@@ -2304,7 +2335,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2304
2335
|
sx: { height: "auto", padding: 0 }
|
|
2305
2336
|
}
|
|
2306
2337
|
},
|
|
2307
|
-
/* @__PURE__ */
|
|
2338
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
2308
2339
|
Picker,
|
|
2309
2340
|
{
|
|
2310
2341
|
value: value || "",
|
|
@@ -2319,10 +2350,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2319
2350
|
|
|
2320
2351
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2321
2352
|
function ColorInput2(props) {
|
|
2322
|
-
return /* @__PURE__ */
|
|
2353
|
+
return /* @__PURE__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2323
2354
|
}
|
|
2324
2355
|
function NullableColorInput(props) {
|
|
2325
|
-
return /* @__PURE__ */
|
|
2356
|
+
return /* @__PURE__ */ React60__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2326
2357
|
}
|
|
2327
2358
|
|
|
2328
2359
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2375,13 +2406,13 @@ var FONT_FAMILIES = [
|
|
|
2375
2406
|
];
|
|
2376
2407
|
|
|
2377
2408
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2378
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2409
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2379
2410
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2380
|
-
const [value, setValue] =
|
|
2381
|
-
|
|
2411
|
+
const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2412
|
+
React60.useEffect(() => {
|
|
2382
2413
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2383
2414
|
}, [defaultValue]);
|
|
2384
|
-
return /* @__PURE__ */
|
|
2415
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2385
2416
|
material.TextField,
|
|
2386
2417
|
{
|
|
2387
2418
|
select: true,
|
|
@@ -2394,23 +2425,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2394
2425
|
onChange(v === null ? null : v);
|
|
2395
2426
|
}
|
|
2396
2427
|
},
|
|
2397
|
-
/* @__PURE__ */
|
|
2428
|
+
/* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2398
2429
|
OPTIONS
|
|
2399
2430
|
);
|
|
2400
2431
|
}
|
|
2401
2432
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2402
|
-
const [value, setValue] =
|
|
2403
|
-
|
|
2433
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2434
|
+
React60.useEffect(() => {
|
|
2404
2435
|
setValue(defaultValue);
|
|
2405
2436
|
}, [defaultValue]);
|
|
2406
2437
|
const handleChange = (value2) => {
|
|
2407
2438
|
setValue(value2);
|
|
2408
2439
|
onChange(value2);
|
|
2409
2440
|
};
|
|
2410
|
-
return /* @__PURE__ */
|
|
2441
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
|
|
2411
2442
|
RawSliderInput,
|
|
2412
2443
|
{
|
|
2413
|
-
iconLabel: /* @__PURE__ */
|
|
2444
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2414
2445
|
value,
|
|
2415
2446
|
setValue: handleChange,
|
|
2416
2447
|
units: "px",
|
|
@@ -2421,11 +2452,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2421
2452
|
));
|
|
2422
2453
|
}
|
|
2423
2454
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2424
|
-
const [value, setValue] =
|
|
2425
|
-
|
|
2455
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
2456
|
+
React60.useEffect(() => {
|
|
2426
2457
|
setValue(defaultValue);
|
|
2427
2458
|
}, [defaultValue]);
|
|
2428
|
-
return /* @__PURE__ */
|
|
2459
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2429
2460
|
RadioGroupInput,
|
|
2430
2461
|
{
|
|
2431
2462
|
label,
|
|
@@ -2435,12 +2466,12 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2435
2466
|
onChange(fontWeight);
|
|
2436
2467
|
}
|
|
2437
2468
|
},
|
|
2438
|
-
/* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2469
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2470
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2440
2471
|
);
|
|
2441
2472
|
}
|
|
2442
2473
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2443
|
-
const [value, setValue] =
|
|
2474
|
+
const [value, setValue] = React60.useState(() => {
|
|
2444
2475
|
if (defaultValue) {
|
|
2445
2476
|
return defaultValue;
|
|
2446
2477
|
}
|
|
@@ -2458,10 +2489,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2458
2489
|
setValue(v);
|
|
2459
2490
|
onChange(v);
|
|
2460
2491
|
}
|
|
2461
|
-
return /* @__PURE__ */
|
|
2492
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React60__default.default.createElement(
|
|
2462
2493
|
RawSliderInput,
|
|
2463
2494
|
{
|
|
2464
|
-
iconLabel: /* @__PURE__ */
|
|
2495
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2465
2496
|
value: value.top,
|
|
2466
2497
|
setValue: (num) => handleChange("top", num),
|
|
2467
2498
|
units: "px",
|
|
@@ -2470,10 +2501,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2470
2501
|
max: 80,
|
|
2471
2502
|
marks: true
|
|
2472
2503
|
}
|
|
2473
|
-
), /* @__PURE__ */
|
|
2504
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2474
2505
|
RawSliderInput,
|
|
2475
2506
|
{
|
|
2476
|
-
iconLabel: /* @__PURE__ */
|
|
2507
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2477
2508
|
value: value.bottom,
|
|
2478
2509
|
setValue: (num) => handleChange("bottom", num),
|
|
2479
2510
|
units: "px",
|
|
@@ -2482,10 +2513,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2482
2513
|
max: 80,
|
|
2483
2514
|
marks: true
|
|
2484
2515
|
}
|
|
2485
|
-
), /* @__PURE__ */
|
|
2516
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2486
2517
|
RawSliderInput,
|
|
2487
2518
|
{
|
|
2488
|
-
iconLabel: /* @__PURE__ */
|
|
2519
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2489
2520
|
value: value.left,
|
|
2490
2521
|
setValue: (num) => handleChange("left", num),
|
|
2491
2522
|
units: "px",
|
|
@@ -2494,10 +2525,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2494
2525
|
max: 80,
|
|
2495
2526
|
marks: true
|
|
2496
2527
|
}
|
|
2497
|
-
), /* @__PURE__ */
|
|
2528
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2498
2529
|
RawSliderInput,
|
|
2499
2530
|
{
|
|
2500
|
-
iconLabel: /* @__PURE__ */
|
|
2531
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2501
2532
|
value: value.right,
|
|
2502
2533
|
setValue: (num) => handleChange("right", num),
|
|
2503
2534
|
units: "px",
|
|
@@ -2509,11 +2540,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2509
2540
|
));
|
|
2510
2541
|
}
|
|
2511
2542
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2512
|
-
const [value, setValue] =
|
|
2513
|
-
|
|
2543
|
+
const [value, setValue] = React60.useState(defaultValue != null ? defaultValue : "left");
|
|
2544
|
+
React60.useEffect(() => {
|
|
2514
2545
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2515
2546
|
}, [defaultValue]);
|
|
2516
|
-
return /* @__PURE__ */
|
|
2547
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2517
2548
|
RadioGroupInput,
|
|
2518
2549
|
{
|
|
2519
2550
|
label,
|
|
@@ -2523,9 +2554,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2523
2554
|
onChange(value2);
|
|
2524
2555
|
}
|
|
2525
2556
|
},
|
|
2526
|
-
/* @__PURE__ */
|
|
2527
|
-
/* @__PURE__ */
|
|
2528
|
-
/* @__PURE__ */
|
|
2557
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2558
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2559
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2529
2560
|
);
|
|
2530
2561
|
}
|
|
2531
2562
|
|
|
@@ -2538,14 +2569,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2538
2569
|
};
|
|
2539
2570
|
switch (name) {
|
|
2540
2571
|
case "backgroundColor":
|
|
2541
|
-
return /* @__PURE__ */
|
|
2572
|
+
return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2542
2573
|
case "borderColor":
|
|
2543
|
-
return /* @__PURE__ */
|
|
2574
|
+
return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2544
2575
|
case "borderRadius":
|
|
2545
|
-
return /* @__PURE__ */
|
|
2576
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2546
2577
|
SliderInput,
|
|
2547
2578
|
{
|
|
2548
|
-
iconLabel: /* @__PURE__ */
|
|
2579
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2549
2580
|
units: "px",
|
|
2550
2581
|
step: 4,
|
|
2551
2582
|
marks: true,
|
|
@@ -2557,29 +2588,29 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2557
2588
|
}
|
|
2558
2589
|
);
|
|
2559
2590
|
case "color":
|
|
2560
|
-
return /* @__PURE__ */
|
|
2591
|
+
return /* @__PURE__ */ React60__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2561
2592
|
case "fontFamily":
|
|
2562
|
-
return /* @__PURE__ */
|
|
2593
|
+
return /* @__PURE__ */ React60__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2563
2594
|
case "fontSize":
|
|
2564
|
-
return /* @__PURE__ */
|
|
2595
|
+
return /* @__PURE__ */ React60__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2565
2596
|
case "fontWeight":
|
|
2566
|
-
return /* @__PURE__ */
|
|
2597
|
+
return /* @__PURE__ */ React60__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2567
2598
|
case "textAlign":
|
|
2568
|
-
return /* @__PURE__ */
|
|
2599
|
+
return /* @__PURE__ */ React60__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2569
2600
|
case "padding":
|
|
2570
|
-
return /* @__PURE__ */
|
|
2601
|
+
return /* @__PURE__ */ React60__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2571
2602
|
}
|
|
2572
2603
|
}
|
|
2573
2604
|
|
|
2574
2605
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2575
2606
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2576
|
-
return /* @__PURE__ */
|
|
2607
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React60__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2577
2608
|
}
|
|
2578
2609
|
|
|
2579
2610
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2580
2611
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2581
2612
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2582
|
-
const [, setErrors] =
|
|
2613
|
+
const [, setErrors] = React60.useState(null);
|
|
2583
2614
|
const updateData = (d) => {
|
|
2584
2615
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2585
2616
|
if (res.success) {
|
|
@@ -2593,11 +2624,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2593
2624
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2594
2625
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2595
2626
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2596
|
-
return /* @__PURE__ */
|
|
2627
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2597
2628
|
SliderInput,
|
|
2598
2629
|
{
|
|
2599
2630
|
label: "Size",
|
|
2600
|
-
iconLabel: /* @__PURE__ */
|
|
2631
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2601
2632
|
units: "px",
|
|
2602
2633
|
step: 3,
|
|
2603
2634
|
min: 32,
|
|
@@ -2607,7 +2638,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2607
2638
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2608
2639
|
}
|
|
2609
2640
|
}
|
|
2610
|
-
), /* @__PURE__ */
|
|
2641
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2611
2642
|
RadioGroupInput,
|
|
2612
2643
|
{
|
|
2613
2644
|
label: "Shape",
|
|
@@ -2616,10 +2647,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2616
2647
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2617
2648
|
}
|
|
2618
2649
|
},
|
|
2619
|
-
/* @__PURE__ */
|
|
2620
|
-
/* @__PURE__ */
|
|
2621
|
-
/* @__PURE__ */
|
|
2622
|
-
), /* @__PURE__ */
|
|
2650
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
2651
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
2652
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
2653
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2623
2654
|
TextInput,
|
|
2624
2655
|
{
|
|
2625
2656
|
label: "Image URL",
|
|
@@ -2628,7 +2659,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2628
2659
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2629
2660
|
}
|
|
2630
2661
|
}
|
|
2631
|
-
), /* @__PURE__ */
|
|
2662
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2632
2663
|
TextInput,
|
|
2633
2664
|
{
|
|
2634
2665
|
label: "Alt text",
|
|
@@ -2637,7 +2668,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2637
2668
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2638
2669
|
}
|
|
2639
2670
|
}
|
|
2640
|
-
), /* @__PURE__ */
|
|
2671
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2641
2672
|
MultiStylePropertyPanel,
|
|
2642
2673
|
{
|
|
2643
2674
|
names: ["textAlign", "padding"],
|
|
@@ -2648,7 +2679,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2648
2679
|
}
|
|
2649
2680
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2650
2681
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2651
|
-
const [, setErrors] =
|
|
2682
|
+
const [, setErrors] = React60.useState(null);
|
|
2652
2683
|
const updateData = (d) => {
|
|
2653
2684
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2654
2685
|
if (res.success) {
|
|
@@ -2665,65 +2696,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2665
2696
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2666
2697
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2667
2698
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2668
|
-
return /* @__PURE__ */
|
|
2699
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2669
2700
|
TextInput,
|
|
2670
2701
|
{
|
|
2671
2702
|
label: "Text",
|
|
2672
2703
|
defaultValue: text,
|
|
2673
2704
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2674
2705
|
}
|
|
2675
|
-
), /* @__PURE__ */
|
|
2706
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2676
2707
|
TextInput,
|
|
2677
2708
|
{
|
|
2678
2709
|
label: "Url",
|
|
2679
2710
|
defaultValue: url,
|
|
2680
2711
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2681
2712
|
}
|
|
2682
|
-
), /* @__PURE__ */
|
|
2713
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2683
2714
|
RadioGroupInput,
|
|
2684
2715
|
{
|
|
2685
2716
|
label: "Width",
|
|
2686
2717
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2687
2718
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2688
2719
|
},
|
|
2689
|
-
/* @__PURE__ */
|
|
2690
|
-
/* @__PURE__ */
|
|
2691
|
-
), /* @__PURE__ */
|
|
2720
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2721
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
|
|
2722
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2692
2723
|
RadioGroupInput,
|
|
2693
2724
|
{
|
|
2694
2725
|
label: "Size",
|
|
2695
2726
|
defaultValue: size,
|
|
2696
2727
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2697
2728
|
},
|
|
2698
|
-
/* @__PURE__ */
|
|
2699
|
-
/* @__PURE__ */
|
|
2700
|
-
/* @__PURE__ */
|
|
2701
|
-
/* @__PURE__ */
|
|
2702
|
-
), /* @__PURE__ */
|
|
2729
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
|
|
2730
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
|
|
2731
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
|
|
2732
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
|
|
2733
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2703
2734
|
RadioGroupInput,
|
|
2704
2735
|
{
|
|
2705
2736
|
label: "Style",
|
|
2706
2737
|
defaultValue: buttonStyle,
|
|
2707
2738
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2708
2739
|
},
|
|
2709
|
-
/* @__PURE__ */
|
|
2710
|
-
/* @__PURE__ */
|
|
2711
|
-
/* @__PURE__ */
|
|
2712
|
-
), /* @__PURE__ */
|
|
2740
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2741
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2742
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
|
|
2743
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2713
2744
|
ColorInput2,
|
|
2714
2745
|
{
|
|
2715
2746
|
label: "Text color",
|
|
2716
2747
|
defaultValue: buttonTextColor,
|
|
2717
2748
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2718
2749
|
}
|
|
2719
|
-
), /* @__PURE__ */
|
|
2750
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2720
2751
|
ColorInput2,
|
|
2721
2752
|
{
|
|
2722
2753
|
label: "Button color",
|
|
2723
2754
|
defaultValue: buttonBackgroundColor,
|
|
2724
2755
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2725
2756
|
}
|
|
2726
|
-
), /* @__PURE__ */
|
|
2757
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2727
2758
|
MultiStylePropertyPanel,
|
|
2728
2759
|
{
|
|
2729
2760
|
names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2749,7 +2780,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2749
2780
|
const value = parseInt(ev.target.value);
|
|
2750
2781
|
onChange(isNaN(value) ? null : value);
|
|
2751
2782
|
};
|
|
2752
|
-
return /* @__PURE__ */
|
|
2783
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2753
2784
|
material.TextField,
|
|
2754
2785
|
{
|
|
2755
2786
|
fullWidth: true,
|
|
@@ -2760,7 +2791,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2760
2791
|
placeholder: "auto",
|
|
2761
2792
|
size: "small",
|
|
2762
2793
|
InputProps: {
|
|
2763
|
-
endAdornment: /* @__PURE__ */
|
|
2794
|
+
endAdornment: /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2764
2795
|
}
|
|
2765
2796
|
}
|
|
2766
2797
|
);
|
|
@@ -2768,7 +2799,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2768
2799
|
|
|
2769
2800
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
2770
2801
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
2771
|
-
const [currentValue, setCurrentValue] =
|
|
2802
|
+
const [currentValue, setCurrentValue] = React60.useState(() => {
|
|
2772
2803
|
if (defaultValue) {
|
|
2773
2804
|
return defaultValue;
|
|
2774
2805
|
}
|
|
@@ -2782,7 +2813,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2782
2813
|
};
|
|
2783
2814
|
let column3 = null;
|
|
2784
2815
|
{
|
|
2785
|
-
column3 = /* @__PURE__ */
|
|
2816
|
+
column3 = /* @__PURE__ */ React60__default.default.createElement(
|
|
2786
2817
|
TextDimensionInput,
|
|
2787
2818
|
{
|
|
2788
2819
|
label: "Column 3",
|
|
@@ -2793,7 +2824,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2793
2824
|
}
|
|
2794
2825
|
);
|
|
2795
2826
|
}
|
|
2796
|
-
return /* @__PURE__ */
|
|
2827
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2797
2828
|
TextDimensionInput,
|
|
2798
2829
|
{
|
|
2799
2830
|
label: "Column 1",
|
|
@@ -2802,7 +2833,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2802
2833
|
setIndexValue(0, v);
|
|
2803
2834
|
}
|
|
2804
2835
|
}
|
|
2805
|
-
), /* @__PURE__ */
|
|
2836
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2806
2837
|
TextDimensionInput,
|
|
2807
2838
|
{
|
|
2808
2839
|
label: "Column 2",
|
|
@@ -2817,7 +2848,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2817
2848
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
2818
2849
|
function ColumnsContainerPanel({ data, setData }) {
|
|
2819
2850
|
var _a, _b, _c, _d, _e, _f;
|
|
2820
|
-
const [, setErrors] =
|
|
2851
|
+
const [, setErrors] = React60.useState(null);
|
|
2821
2852
|
const updateData = (d) => {
|
|
2822
2853
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
2823
2854
|
if (res.success) {
|
|
@@ -2827,7 +2858,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2827
2858
|
setErrors(res.error);
|
|
2828
2859
|
}
|
|
2829
2860
|
};
|
|
2830
|
-
return /* @__PURE__ */
|
|
2861
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2831
2862
|
RadioGroupInput,
|
|
2832
2863
|
{
|
|
2833
2864
|
label: "Number of columns",
|
|
@@ -2836,9 +2867,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2836
2867
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
2837
2868
|
}
|
|
2838
2869
|
},
|
|
2839
|
-
/* @__PURE__ */
|
|
2840
|
-
/* @__PURE__ */
|
|
2841
|
-
), /* @__PURE__ */
|
|
2870
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
2871
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
2872
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2842
2873
|
ColumnWidthsInput,
|
|
2843
2874
|
{
|
|
2844
2875
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -2846,11 +2877,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2846
2877
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
2847
2878
|
}
|
|
2848
2879
|
}
|
|
2849
|
-
), /* @__PURE__ */
|
|
2880
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2850
2881
|
SliderInput,
|
|
2851
2882
|
{
|
|
2852
2883
|
label: "Columns gap",
|
|
2853
|
-
iconLabel: /* @__PURE__ */
|
|
2884
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
2854
2885
|
units: "px",
|
|
2855
2886
|
step: 4,
|
|
2856
2887
|
marks: true,
|
|
@@ -2859,7 +2890,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2859
2890
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
2860
2891
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
2861
2892
|
}
|
|
2862
|
-
), /* @__PURE__ */
|
|
2893
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2863
2894
|
RadioGroupInput,
|
|
2864
2895
|
{
|
|
2865
2896
|
label: "Alignment",
|
|
@@ -2868,10 +2899,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2868
2899
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
2869
2900
|
}
|
|
2870
2901
|
},
|
|
2871
|
-
/* @__PURE__ */
|
|
2872
|
-
/* @__PURE__ */
|
|
2873
|
-
/* @__PURE__ */
|
|
2874
|
-
), /* @__PURE__ */
|
|
2902
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
2903
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
2904
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
2905
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2875
2906
|
MultiStylePropertyPanel,
|
|
2876
2907
|
{
|
|
2877
2908
|
names: ["backgroundColor", "padding"],
|
|
@@ -2890,7 +2921,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
2890
2921
|
|
|
2891
2922
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
2892
2923
|
function ContainerSidebarPanel({ data, setData }) {
|
|
2893
|
-
const [, setErrors] =
|
|
2924
|
+
const [, setErrors] = React60.useState(null);
|
|
2894
2925
|
const updateData = (d) => {
|
|
2895
2926
|
const res = container_props_schema_default.safeParse(d);
|
|
2896
2927
|
if (res.success) {
|
|
@@ -2900,7 +2931,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2900
2931
|
setErrors(res.error);
|
|
2901
2932
|
}
|
|
2902
2933
|
};
|
|
2903
|
-
return /* @__PURE__ */
|
|
2934
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2904
2935
|
MultiStylePropertyPanel,
|
|
2905
2936
|
{
|
|
2906
2937
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -2911,7 +2942,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2911
2942
|
}
|
|
2912
2943
|
function DividerSidebarPanel({ data, setData }) {
|
|
2913
2944
|
var _a, _b, _c, _d;
|
|
2914
|
-
const [, setErrors] =
|
|
2945
|
+
const [, setErrors] = React60.useState(null);
|
|
2915
2946
|
const updateData = (d) => {
|
|
2916
2947
|
const res = DividerPropsSchema.safeParse(d);
|
|
2917
2948
|
if (res.success) {
|
|
@@ -2923,18 +2954,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2923
2954
|
};
|
|
2924
2955
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
2925
2956
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
2926
|
-
return /* @__PURE__ */
|
|
2957
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
2927
2958
|
ColorInput2,
|
|
2928
2959
|
{
|
|
2929
2960
|
label: "Color",
|
|
2930
2961
|
defaultValue: lineColor,
|
|
2931
2962
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
2932
2963
|
}
|
|
2933
|
-
), /* @__PURE__ */
|
|
2964
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2934
2965
|
SliderInput,
|
|
2935
2966
|
{
|
|
2936
2967
|
label: "Height",
|
|
2937
|
-
iconLabel: /* @__PURE__ */
|
|
2968
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2938
2969
|
units: "px",
|
|
2939
2970
|
step: 1,
|
|
2940
2971
|
min: 1,
|
|
@@ -2942,7 +2973,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2942
2973
|
defaultValue: lineHeight,
|
|
2943
2974
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
2944
2975
|
}
|
|
2945
|
-
), /* @__PURE__ */
|
|
2976
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
2946
2977
|
MultiStylePropertyPanel,
|
|
2947
2978
|
{
|
|
2948
2979
|
names: ["backgroundColor", "padding"],
|
|
@@ -2963,6 +2994,10 @@ var FONT_FAMILY_SCHEMA7 = zod.z.enum([
|
|
|
2963
2994
|
"BOOK_SERIF",
|
|
2964
2995
|
"MONOSPACE"
|
|
2965
2996
|
]).nullable().optional();
|
|
2997
|
+
var TemplateVariableSchema2 = zod.z.object({
|
|
2998
|
+
name: zod.z.string(),
|
|
2999
|
+
description: zod.z.string().optional().nullable()
|
|
3000
|
+
});
|
|
2966
3001
|
var EmailLayoutPropsSchema2 = zod.z.object({
|
|
2967
3002
|
backdropColor: COLOR_SCHEMA10,
|
|
2968
3003
|
backdropDisabled: zod.z.boolean().optional().nullable(),
|
|
@@ -2971,19 +3006,21 @@ var EmailLayoutPropsSchema2 = zod.z.object({
|
|
|
2971
3006
|
canvasColor: COLOR_SCHEMA10,
|
|
2972
3007
|
textColor: COLOR_SCHEMA10,
|
|
2973
3008
|
fontFamily: FONT_FAMILY_SCHEMA7,
|
|
2974
|
-
childrenIds: zod.z.array(zod.z.string()).optional().nullable()
|
|
3009
|
+
childrenIds: zod.z.array(zod.z.string()).optional().nullable(),
|
|
3010
|
+
subject: zod.z.string().optional().nullable(),
|
|
3011
|
+
variables: zod.z.array(TemplateVariableSchema2).optional().nullable()
|
|
2975
3012
|
});
|
|
2976
3013
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
2977
3014
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
2978
|
-
const [value, setValue] =
|
|
2979
|
-
|
|
3015
|
+
const [value, setValue] = React60.useState(defaultValue);
|
|
3016
|
+
React60.useEffect(() => {
|
|
2980
3017
|
setValue(defaultValue);
|
|
2981
3018
|
}, [defaultValue]);
|
|
2982
|
-
return /* @__PURE__ */
|
|
3019
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
2983
3020
|
material.FormControlLabel,
|
|
2984
3021
|
{
|
|
2985
3022
|
label,
|
|
2986
|
-
control: /* @__PURE__ */
|
|
3023
|
+
control: /* @__PURE__ */ React60__default.default.createElement(
|
|
2987
3024
|
material.Switch,
|
|
2988
3025
|
{
|
|
2989
3026
|
checked: value,
|
|
@@ -3000,7 +3037,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3000
3037
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
3001
3038
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
3002
3039
|
var _a, _b, _c, _d, _e, _f;
|
|
3003
|
-
const [, setErrors] =
|
|
3040
|
+
const [, setErrors] = React60.useState(null);
|
|
3004
3041
|
const updateData = (d) => {
|
|
3005
3042
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
3006
3043
|
if (res.success) {
|
|
@@ -3011,38 +3048,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3011
3048
|
}
|
|
3012
3049
|
};
|
|
3013
3050
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3014
|
-
return /* @__PURE__ */
|
|
3051
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3015
3052
|
BooleanInput,
|
|
3016
3053
|
{
|
|
3017
3054
|
label: "Disable backdrop",
|
|
3018
3055
|
defaultValue: backdropDisabled,
|
|
3019
3056
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3020
3057
|
}
|
|
3021
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3058
|
+
), !backdropDisabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
3022
3059
|
ColorInput2,
|
|
3023
3060
|
{
|
|
3024
3061
|
label: "Backdrop color",
|
|
3025
3062
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3026
3063
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3027
3064
|
}
|
|
3028
|
-
), /* @__PURE__ */
|
|
3065
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3029
3066
|
ColorInput2,
|
|
3030
3067
|
{
|
|
3031
3068
|
label: "Canvas color",
|
|
3032
3069
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3033
3070
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3034
3071
|
}
|
|
3035
|
-
), /* @__PURE__ */
|
|
3072
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3036
3073
|
NullableColorInput,
|
|
3037
3074
|
{
|
|
3038
3075
|
label: "Canvas border color",
|
|
3039
3076
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3040
3077
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3041
3078
|
}
|
|
3042
|
-
), /* @__PURE__ */
|
|
3079
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3043
3080
|
SliderInput,
|
|
3044
3081
|
{
|
|
3045
|
-
iconLabel: /* @__PURE__ */
|
|
3082
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
3046
3083
|
units: "px",
|
|
3047
3084
|
step: 4,
|
|
3048
3085
|
marks: true,
|
|
@@ -3052,14 +3089,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3052
3089
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3053
3090
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3054
3091
|
}
|
|
3055
|
-
)), /* @__PURE__ */
|
|
3092
|
+
)), /* @__PURE__ */ React60__default.default.createElement(
|
|
3056
3093
|
NullableFontFamily,
|
|
3057
3094
|
{
|
|
3058
3095
|
label: "Font family",
|
|
3059
3096
|
defaultValue: "MODERN_SANS",
|
|
3060
3097
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3061
3098
|
}
|
|
3062
|
-
), /* @__PURE__ */
|
|
3099
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3063
3100
|
ColorInput2,
|
|
3064
3101
|
{
|
|
3065
3102
|
label: "Text color",
|
|
@@ -3070,7 +3107,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3070
3107
|
}
|
|
3071
3108
|
function HeadingSidebarPanel({ data, setData }) {
|
|
3072
3109
|
var _a, _b, _c, _d;
|
|
3073
|
-
const [, setErrors] =
|
|
3110
|
+
const [, setErrors] = React60.useState(null);
|
|
3074
3111
|
const updateData = (d) => {
|
|
3075
3112
|
const res = HeadingPropsSchema.safeParse(d);
|
|
3076
3113
|
if (res.success) {
|
|
@@ -3080,7 +3117,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3080
3117
|
setErrors(res.error);
|
|
3081
3118
|
}
|
|
3082
3119
|
};
|
|
3083
|
-
return /* @__PURE__ */
|
|
3120
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3084
3121
|
TextInput,
|
|
3085
3122
|
{
|
|
3086
3123
|
label: "Content",
|
|
@@ -3090,7 +3127,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3090
3127
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3091
3128
|
}
|
|
3092
3129
|
}
|
|
3093
|
-
), /* @__PURE__ */
|
|
3130
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3094
3131
|
RadioGroupInput,
|
|
3095
3132
|
{
|
|
3096
3133
|
label: "Level",
|
|
@@ -3099,10 +3136,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3099
3136
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3100
3137
|
}
|
|
3101
3138
|
},
|
|
3102
|
-
/* @__PURE__ */
|
|
3103
|
-
/* @__PURE__ */
|
|
3104
|
-
/* @__PURE__ */
|
|
3105
|
-
), /* @__PURE__ */
|
|
3139
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
3140
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
3141
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
3142
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3106
3143
|
MultiStylePropertyPanel,
|
|
3107
3144
|
{
|
|
3108
3145
|
names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
|
|
@@ -3113,7 +3150,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3113
3150
|
}
|
|
3114
3151
|
function HtmlSidebarPanel({ data, setData }) {
|
|
3115
3152
|
var _a, _b;
|
|
3116
|
-
const [, setErrors] =
|
|
3153
|
+
const [, setErrors] = React60.useState(null);
|
|
3117
3154
|
const updateData = (d) => {
|
|
3118
3155
|
const res = HtmlPropsSchema.safeParse(d);
|
|
3119
3156
|
if (res.success) {
|
|
@@ -3123,7 +3160,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3123
3160
|
setErrors(res.error);
|
|
3124
3161
|
}
|
|
3125
3162
|
};
|
|
3126
|
-
return /* @__PURE__ */
|
|
3163
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3127
3164
|
TextInput,
|
|
3128
3165
|
{
|
|
3129
3166
|
label: "Content",
|
|
@@ -3131,7 +3168,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3131
3168
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3132
3169
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3133
3170
|
}
|
|
3134
|
-
), /* @__PURE__ */
|
|
3171
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3135
3172
|
MultiStylePropertyPanel,
|
|
3136
3173
|
{
|
|
3137
3174
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3142,7 +3179,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3142
3179
|
}
|
|
3143
3180
|
function ImageSidebarPanel({ data, setData }) {
|
|
3144
3181
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
3145
|
-
const [, setErrors] =
|
|
3182
|
+
const [, setErrors] = React60.useState(null);
|
|
3146
3183
|
const updateData = (d) => {
|
|
3147
3184
|
const res = ImagePropsSchema.safeParse(d);
|
|
3148
3185
|
if (res.success) {
|
|
@@ -3152,7 +3189,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3152
3189
|
setErrors(res.error);
|
|
3153
3190
|
}
|
|
3154
3191
|
};
|
|
3155
|
-
return /* @__PURE__ */
|
|
3192
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3156
3193
|
TextInput,
|
|
3157
3194
|
{
|
|
3158
3195
|
label: "Source URL",
|
|
@@ -3162,14 +3199,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3162
3199
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
|
|
3163
3200
|
}
|
|
3164
3201
|
}
|
|
3165
|
-
), /* @__PURE__ */
|
|
3202
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3166
3203
|
TextInput,
|
|
3167
3204
|
{
|
|
3168
3205
|
label: "Alt text",
|
|
3169
3206
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3170
3207
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3171
3208
|
}
|
|
3172
|
-
), /* @__PURE__ */
|
|
3209
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3173
3210
|
TextInput,
|
|
3174
3211
|
{
|
|
3175
3212
|
label: "Click through URL",
|
|
@@ -3179,31 +3216,31 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3179
3216
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3180
3217
|
}
|
|
3181
3218
|
}
|
|
3182
|
-
), /* @__PURE__ */
|
|
3219
|
+
), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3183
3220
|
TextDimensionInput,
|
|
3184
3221
|
{
|
|
3185
3222
|
label: "Width",
|
|
3186
3223
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3187
3224
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3188
3225
|
}
|
|
3189
|
-
), /* @__PURE__ */
|
|
3226
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3190
3227
|
TextDimensionInput,
|
|
3191
3228
|
{
|
|
3192
3229
|
label: "Height",
|
|
3193
3230
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3194
3231
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3195
3232
|
}
|
|
3196
|
-
)), /* @__PURE__ */
|
|
3233
|
+
)), /* @__PURE__ */ React60__default.default.createElement(
|
|
3197
3234
|
RadioGroupInput,
|
|
3198
3235
|
{
|
|
3199
3236
|
label: "Alignment",
|
|
3200
3237
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3201
3238
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3202
3239
|
},
|
|
3203
|
-
/* @__PURE__ */
|
|
3204
|
-
/* @__PURE__ */
|
|
3205
|
-
/* @__PURE__ */
|
|
3206
|
-
), /* @__PURE__ */
|
|
3240
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3241
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3242
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3243
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3207
3244
|
MultiStylePropertyPanel,
|
|
3208
3245
|
{
|
|
3209
3246
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
@@ -3214,7 +3251,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3214
3251
|
}
|
|
3215
3252
|
function SignatureSidebarPanel({ data, setData }) {
|
|
3216
3253
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
|
|
3217
|
-
const [, setErrors] =
|
|
3254
|
+
const [, setErrors] = React60.useState(null);
|
|
3218
3255
|
const updateData = (d) => {
|
|
3219
3256
|
const res = SignaturePropsSchema.safeParse(d);
|
|
3220
3257
|
if (res.success) {
|
|
@@ -3239,74 +3276,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3239
3276
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3240
3277
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3241
3278
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3242
|
-
return /* @__PURE__ */
|
|
3279
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3243
3280
|
TextInput,
|
|
3244
3281
|
{
|
|
3245
3282
|
label: "Greeting",
|
|
3246
3283
|
defaultValue: greeting,
|
|
3247
3284
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3248
3285
|
}
|
|
3249
|
-
), /* @__PURE__ */
|
|
3286
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3250
3287
|
TextInput,
|
|
3251
3288
|
{
|
|
3252
3289
|
label: "Name",
|
|
3253
3290
|
defaultValue: name,
|
|
3254
3291
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3255
3292
|
}
|
|
3256
|
-
), /* @__PURE__ */
|
|
3293
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3257
3294
|
TextInput,
|
|
3258
3295
|
{
|
|
3259
3296
|
label: "Title",
|
|
3260
3297
|
defaultValue: title,
|
|
3261
3298
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3262
3299
|
}
|
|
3263
|
-
), /* @__PURE__ */
|
|
3300
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3264
3301
|
TextInput,
|
|
3265
3302
|
{
|
|
3266
3303
|
label: "Company",
|
|
3267
3304
|
defaultValue: company,
|
|
3268
3305
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3269
3306
|
}
|
|
3270
|
-
), /* @__PURE__ */
|
|
3307
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3271
3308
|
TextInput,
|
|
3272
3309
|
{
|
|
3273
3310
|
label: "Address",
|
|
3274
3311
|
defaultValue: address,
|
|
3275
3312
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3276
3313
|
}
|
|
3277
|
-
), /* @__PURE__ */
|
|
3314
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3278
3315
|
TextInput,
|
|
3279
3316
|
{
|
|
3280
3317
|
label: "Email",
|
|
3281
3318
|
defaultValue: email,
|
|
3282
3319
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3283
3320
|
}
|
|
3284
|
-
), /* @__PURE__ */
|
|
3321
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3285
3322
|
TextInput,
|
|
3286
3323
|
{
|
|
3287
3324
|
label: "Phone",
|
|
3288
3325
|
defaultValue: phone,
|
|
3289
3326
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3290
3327
|
}
|
|
3291
|
-
), /* @__PURE__ */
|
|
3328
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3292
3329
|
TextInput,
|
|
3293
3330
|
{
|
|
3294
3331
|
label: "Website",
|
|
3295
3332
|
defaultValue: website,
|
|
3296
3333
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3297
3334
|
}
|
|
3298
|
-
), /* @__PURE__ */
|
|
3335
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3299
3336
|
TextInput,
|
|
3300
3337
|
{
|
|
3301
3338
|
label: "Image URL",
|
|
3302
3339
|
defaultValue: imageUrl,
|
|
3303
3340
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3304
3341
|
}
|
|
3305
|
-
), /* @__PURE__ */
|
|
3342
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3306
3343
|
SliderInput,
|
|
3307
3344
|
{
|
|
3308
3345
|
label: "Image size",
|
|
3309
|
-
iconLabel: /* @__PURE__ */
|
|
3346
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3310
3347
|
units: "px",
|
|
3311
3348
|
step: 4,
|
|
3312
3349
|
min: 32,
|
|
@@ -3314,47 +3351,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3314
3351
|
defaultValue: imageSize,
|
|
3315
3352
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3316
3353
|
}
|
|
3317
|
-
), /* @__PURE__ */
|
|
3354
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3318
3355
|
RadioGroupInput,
|
|
3319
3356
|
{
|
|
3320
3357
|
label: "Image shape",
|
|
3321
3358
|
defaultValue: imageShape,
|
|
3322
3359
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3323
3360
|
},
|
|
3324
|
-
/* @__PURE__ */
|
|
3325
|
-
/* @__PURE__ */
|
|
3326
|
-
/* @__PURE__ */
|
|
3327
|
-
), /* @__PURE__ */
|
|
3361
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
3362
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
3363
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
3364
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3328
3365
|
RadioGroupInput,
|
|
3329
3366
|
{
|
|
3330
3367
|
label: "Layout",
|
|
3331
3368
|
defaultValue: layout,
|
|
3332
3369
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3333
3370
|
},
|
|
3334
|
-
/* @__PURE__ */
|
|
3335
|
-
/* @__PURE__ */
|
|
3336
|
-
), /* @__PURE__ */
|
|
3371
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3372
|
+
/* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
|
|
3373
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3337
3374
|
ColorInput2,
|
|
3338
3375
|
{
|
|
3339
3376
|
label: "Name color",
|
|
3340
3377
|
defaultValue: nameColor,
|
|
3341
3378
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3342
3379
|
}
|
|
3343
|
-
), /* @__PURE__ */
|
|
3380
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3344
3381
|
ColorInput2,
|
|
3345
3382
|
{
|
|
3346
3383
|
label: "Text color",
|
|
3347
3384
|
defaultValue: textColor,
|
|
3348
3385
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3349
3386
|
}
|
|
3350
|
-
), /* @__PURE__ */
|
|
3387
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3351
3388
|
ColorInput2,
|
|
3352
3389
|
{
|
|
3353
3390
|
label: "Link color",
|
|
3354
3391
|
defaultValue: linkColor,
|
|
3355
3392
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3356
3393
|
}
|
|
3357
|
-
), /* @__PURE__ */
|
|
3394
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3358
3395
|
MultiStylePropertyPanel,
|
|
3359
3396
|
{
|
|
3360
3397
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3365,7 +3402,7 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3365
3402
|
}
|
|
3366
3403
|
function SpacerSidebarPanel({ data, setData }) {
|
|
3367
3404
|
var _a, _b;
|
|
3368
|
-
const [, setErrors] =
|
|
3405
|
+
const [, setErrors] = React60.useState(null);
|
|
3369
3406
|
const updateData = (d) => {
|
|
3370
3407
|
const res = SpacerPropsSchema.safeParse(d);
|
|
3371
3408
|
if (res.success) {
|
|
@@ -3375,11 +3412,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3375
3412
|
setErrors(res.error);
|
|
3376
3413
|
}
|
|
3377
3414
|
};
|
|
3378
|
-
return /* @__PURE__ */
|
|
3415
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3379
3416
|
SliderInput,
|
|
3380
3417
|
{
|
|
3381
3418
|
label: "Height",
|
|
3382
|
-
iconLabel: /* @__PURE__ */
|
|
3419
|
+
iconLabel: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3383
3420
|
units: "px",
|
|
3384
3421
|
step: 4,
|
|
3385
3422
|
min: 4,
|
|
@@ -3391,7 +3428,7 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3391
3428
|
}
|
|
3392
3429
|
function TextSidebarPanel({ data, setData }) {
|
|
3393
3430
|
var _a, _b, _c, _d;
|
|
3394
|
-
const [, setErrors] =
|
|
3431
|
+
const [, setErrors] = React60.useState(null);
|
|
3395
3432
|
const updateData = (d) => {
|
|
3396
3433
|
const res = TextPropsSchema.safeParse(d);
|
|
3397
3434
|
if (res.success) {
|
|
@@ -3401,7 +3438,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3401
3438
|
setErrors(res.error);
|
|
3402
3439
|
}
|
|
3403
3440
|
};
|
|
3404
|
-
return /* @__PURE__ */
|
|
3441
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3405
3442
|
TextInput,
|
|
3406
3443
|
{
|
|
3407
3444
|
label: "Content",
|
|
@@ -3409,14 +3446,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3409
3446
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3410
3447
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3411
3448
|
}
|
|
3412
|
-
), /* @__PURE__ */
|
|
3449
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3413
3450
|
BooleanInput,
|
|
3414
3451
|
{
|
|
3415
3452
|
label: "Markdown",
|
|
3416
3453
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3417
3454
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3418
3455
|
}
|
|
3419
|
-
), /* @__PURE__ */
|
|
3456
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3420
3457
|
MultiStylePropertyPanel,
|
|
3421
3458
|
{
|
|
3422
3459
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -3428,7 +3465,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3428
3465
|
|
|
3429
3466
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3430
3467
|
function renderMessage(val) {
|
|
3431
|
-
return /* @__PURE__ */
|
|
3468
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
3432
3469
|
}
|
|
3433
3470
|
function ConfigurationPanel() {
|
|
3434
3471
|
const document2 = useDocument();
|
|
@@ -3444,55 +3481,55 @@ function ConfigurationPanel() {
|
|
|
3444
3481
|
const { data, type } = block;
|
|
3445
3482
|
switch (type) {
|
|
3446
3483
|
case "Avatar":
|
|
3447
|
-
return /* @__PURE__ */
|
|
3484
|
+
return /* @__PURE__ */ React60__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3448
3485
|
case "Button":
|
|
3449
|
-
return /* @__PURE__ */
|
|
3486
|
+
return /* @__PURE__ */ React60__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3450
3487
|
case "ColumnsContainer":
|
|
3451
|
-
return /* @__PURE__ */
|
|
3488
|
+
return /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3452
3489
|
case "Container":
|
|
3453
|
-
return /* @__PURE__ */
|
|
3490
|
+
return /* @__PURE__ */ React60__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3454
3491
|
case "Divider":
|
|
3455
|
-
return /* @__PURE__ */
|
|
3492
|
+
return /* @__PURE__ */ React60__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3456
3493
|
case "Heading":
|
|
3457
|
-
return /* @__PURE__ */
|
|
3494
|
+
return /* @__PURE__ */ React60__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3458
3495
|
case "Html":
|
|
3459
|
-
return /* @__PURE__ */
|
|
3496
|
+
return /* @__PURE__ */ React60__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3460
3497
|
case "Image":
|
|
3461
|
-
return /* @__PURE__ */
|
|
3498
|
+
return /* @__PURE__ */ React60__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3462
3499
|
case "EmailLayout":
|
|
3463
|
-
return /* @__PURE__ */
|
|
3500
|
+
return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3464
3501
|
case "Spacer":
|
|
3465
|
-
return /* @__PURE__ */
|
|
3502
|
+
return /* @__PURE__ */ React60__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3466
3503
|
case "Signature":
|
|
3467
|
-
return /* @__PURE__ */
|
|
3504
|
+
return /* @__PURE__ */ React60__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3468
3505
|
case "Text":
|
|
3469
|
-
return /* @__PURE__ */
|
|
3506
|
+
return /* @__PURE__ */ React60__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3470
3507
|
default:
|
|
3471
|
-
return /* @__PURE__ */
|
|
3508
|
+
return /* @__PURE__ */ React60__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3472
3509
|
}
|
|
3473
3510
|
}
|
|
3474
3511
|
function StylesPanel() {
|
|
3475
3512
|
const block = useDocument().root;
|
|
3476
3513
|
if (!block) {
|
|
3477
|
-
return /* @__PURE__ */
|
|
3514
|
+
return /* @__PURE__ */ React60__default.default.createElement("p", null, "Block not found");
|
|
3478
3515
|
}
|
|
3479
3516
|
const { data, type } = block;
|
|
3480
3517
|
if (type !== "EmailLayout") {
|
|
3481
3518
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3482
3519
|
}
|
|
3483
|
-
return /* @__PURE__ */
|
|
3520
|
+
return /* @__PURE__ */ React60__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3484
3521
|
}
|
|
3485
3522
|
function TemplateDownloadButton() {
|
|
3486
3523
|
const doc = useDocument();
|
|
3487
|
-
const href =
|
|
3524
|
+
const href = React60.useMemo(() => {
|
|
3488
3525
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3489
3526
|
}, [doc]);
|
|
3490
|
-
return /* @__PURE__ */
|
|
3527
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
3491
3528
|
material.Button,
|
|
3492
3529
|
{
|
|
3493
3530
|
variant: "outlined",
|
|
3494
3531
|
color: "primary",
|
|
3495
|
-
startIcon: /* @__PURE__ */
|
|
3532
|
+
startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
3496
3533
|
href,
|
|
3497
3534
|
download: "emailTemplate.json",
|
|
3498
3535
|
fullWidth: true
|
|
@@ -3524,9 +3561,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3524
3561
|
}
|
|
3525
3562
|
};
|
|
3526
3563
|
if (!currentTemplateId) {
|
|
3527
|
-
return /* @__PURE__ */
|
|
3564
|
+
return /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
|
|
3528
3565
|
}
|
|
3529
|
-
return /* @__PURE__ */
|
|
3566
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(
|
|
3530
3567
|
material.Typography,
|
|
3531
3568
|
{
|
|
3532
3569
|
variant: "body2",
|
|
@@ -3539,29 +3576,110 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3539
3576
|
}
|
|
3540
3577
|
},
|
|
3541
3578
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
3542
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
3579
|
+
), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
3543
3580
|
material.Button,
|
|
3544
3581
|
{
|
|
3545
3582
|
variant: "outlined",
|
|
3546
3583
|
color: "primary",
|
|
3547
|
-
startIcon: /* @__PURE__ */
|
|
3584
|
+
startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
3548
3585
|
onClick: handleCopyToSamples,
|
|
3549
3586
|
fullWidth: true,
|
|
3550
3587
|
disabled: !copyTemplate
|
|
3551
3588
|
},
|
|
3552
3589
|
"Save as Sample Template"
|
|
3553
|
-
), /* @__PURE__ */
|
|
3590
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
3554
3591
|
material.Button,
|
|
3555
3592
|
{
|
|
3556
3593
|
variant: "outlined",
|
|
3557
3594
|
color: "error",
|
|
3558
|
-
startIcon: /* @__PURE__ */
|
|
3595
|
+
startIcon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
3559
3596
|
onClick: handleDelete,
|
|
3560
3597
|
fullWidth: true,
|
|
3561
3598
|
disabled: !deleteTemplate
|
|
3562
3599
|
},
|
|
3563
3600
|
"Delete Template"
|
|
3564
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
3601
|
+
)))), persistenceEnabled && /* @__PURE__ */ React60__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(TemplateDownloadButton, null))));
|
|
3602
|
+
}
|
|
3603
|
+
var VARIABLE_NAME_RE = /^[a-zA-Z_][a-zA-Z0-9_]*$/;
|
|
3604
|
+
function validateName(name, index, all) {
|
|
3605
|
+
if (!name.trim()) return "Name is required";
|
|
3606
|
+
if (!VARIABLE_NAME_RE.test(name)) return "Use letters, digits, underscore; start with a letter or underscore";
|
|
3607
|
+
const duplicate = all.some((v, i) => i !== index && v.name === name);
|
|
3608
|
+
if (duplicate) return "Already declared";
|
|
3609
|
+
return null;
|
|
3610
|
+
}
|
|
3611
|
+
function VariablesPanel() {
|
|
3612
|
+
var _a;
|
|
3613
|
+
const document2 = useDocument();
|
|
3614
|
+
const root = document2.root;
|
|
3615
|
+
if (!root || root.type !== "EmailLayout") {
|
|
3616
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Alert, { severity: "info" }, "Open a template to manage variables."));
|
|
3617
|
+
}
|
|
3618
|
+
const data = root.data;
|
|
3619
|
+
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
3620
|
+
var _a2;
|
|
3621
|
+
return {
|
|
3622
|
+
name: v.name,
|
|
3623
|
+
description: (_a2 = v.description) != null ? _a2 : ""
|
|
3624
|
+
};
|
|
3625
|
+
});
|
|
3626
|
+
const commit = (next) => {
|
|
3627
|
+
setDocument({
|
|
3628
|
+
root: __spreadProps(__spreadValues({}, root), {
|
|
3629
|
+
data: __spreadProps(__spreadValues({}, data), {
|
|
3630
|
+
variables: next.map((v) => ({
|
|
3631
|
+
name: v.name,
|
|
3632
|
+
description: v.description ? v.description : void 0
|
|
3633
|
+
}))
|
|
3634
|
+
})
|
|
3635
|
+
})
|
|
3636
|
+
});
|
|
3637
|
+
};
|
|
3638
|
+
const updateAt = (index, patch) => {
|
|
3639
|
+
const next = variables.map((v, i) => i === index ? __spreadValues(__spreadValues({}, v), patch) : v);
|
|
3640
|
+
commit(next);
|
|
3641
|
+
};
|
|
3642
|
+
const add = () => {
|
|
3643
|
+
commit([...variables, { name: "", description: "" }]);
|
|
3644
|
+
};
|
|
3645
|
+
const removeAt = (index) => {
|
|
3646
|
+
commit(variables.filter((_, i) => i !== index));
|
|
3647
|
+
};
|
|
3648
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, "Variables"), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": "Add variable" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, "Declared variables travel with the template. Reference them in subject and body as", " ", /* @__PURE__ */ React60__default.default.createElement(material.Box, { component: "code", sx: { fontFamily: "monospace" } }, "{{name}}"), "."), variables.length === 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, "No variables declared. Click + to add one.") : /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
3649
|
+
var _a2;
|
|
3650
|
+
const nameError = validateName(v.name, i, variables);
|
|
3651
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { key: i, spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3652
|
+
material.TextField,
|
|
3653
|
+
{
|
|
3654
|
+
label: "Name",
|
|
3655
|
+
size: "small",
|
|
3656
|
+
fullWidth: true,
|
|
3657
|
+
value: v.name,
|
|
3658
|
+
onChange: (e) => updateAt(i, { name: e.target.value }),
|
|
3659
|
+
error: Boolean(nameError),
|
|
3660
|
+
helperText: nameError != null ? nameError : " "
|
|
3661
|
+
}
|
|
3662
|
+
), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Remove" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3663
|
+
material.IconButton,
|
|
3664
|
+
{
|
|
3665
|
+
size: "small",
|
|
3666
|
+
onClick: () => removeAt(i),
|
|
3667
|
+
"aria-label": `Remove ${v.name || "variable"}`,
|
|
3668
|
+
sx: { mt: 0.5 }
|
|
3669
|
+
},
|
|
3670
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
3671
|
+
))), /* @__PURE__ */ React60__default.default.createElement(
|
|
3672
|
+
material.TextField,
|
|
3673
|
+
{
|
|
3674
|
+
label: "Description",
|
|
3675
|
+
size: "small",
|
|
3676
|
+
fullWidth: true,
|
|
3677
|
+
value: (_a2 = v.description) != null ? _a2 : "",
|
|
3678
|
+
onChange: (e) => updateAt(i, { description: e.target.value }),
|
|
3679
|
+
placeholder: "Optional"
|
|
3680
|
+
}
|
|
3681
|
+
));
|
|
3682
|
+
})));
|
|
3565
3683
|
}
|
|
3566
3684
|
|
|
3567
3685
|
// src/app/inspector-drawer/index.tsx
|
|
@@ -3578,11 +3696,13 @@ function InspectorDrawer({
|
|
|
3578
3696
|
const renderCurrentSidebarPanel = () => {
|
|
3579
3697
|
switch (selectedSidebarTab) {
|
|
3580
3698
|
case "block-configuration":
|
|
3581
|
-
return /* @__PURE__ */
|
|
3699
|
+
return /* @__PURE__ */ React60__default.default.createElement(ConfigurationPanel, null);
|
|
3582
3700
|
case "styles":
|
|
3583
|
-
return /* @__PURE__ */
|
|
3701
|
+
return /* @__PURE__ */ React60__default.default.createElement(StylesPanel, null);
|
|
3702
|
+
case "variables":
|
|
3703
|
+
return /* @__PURE__ */ React60__default.default.createElement(VariablesPanel, null);
|
|
3584
3704
|
case "template-settings":
|
|
3585
|
-
return /* @__PURE__ */
|
|
3705
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
3586
3706
|
TemplatePanel,
|
|
3587
3707
|
{
|
|
3588
3708
|
deleteTemplate,
|
|
@@ -3591,7 +3711,7 @@ function InspectorDrawer({
|
|
|
3591
3711
|
);
|
|
3592
3712
|
}
|
|
3593
3713
|
};
|
|
3594
|
-
return /* @__PURE__ */
|
|
3714
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
3595
3715
|
material.Drawer,
|
|
3596
3716
|
{
|
|
3597
3717
|
variant: "persistent",
|
|
@@ -3613,30 +3733,437 @@ function InspectorDrawer({
|
|
|
3613
3733
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
3614
3734
|
}
|
|
3615
3735
|
},
|
|
3616
|
-
/* @__PURE__ */
|
|
3617
|
-
|
|
3736
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3737
|
+
material.Tabs,
|
|
3738
|
+
{
|
|
3739
|
+
value: selectedSidebarTab,
|
|
3740
|
+
onChange: (_, v) => setSidebarTab(v),
|
|
3741
|
+
variant: "fullWidth",
|
|
3742
|
+
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
3743
|
+
},
|
|
3744
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }),
|
|
3745
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }),
|
|
3746
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "variables", label: "Variables" }),
|
|
3747
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })
|
|
3748
|
+
))),
|
|
3749
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
3618
3750
|
);
|
|
3619
3751
|
}
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
|
|
3752
|
+
var SnackbarContext = React60.createContext(null);
|
|
3753
|
+
function useSnackbar() {
|
|
3754
|
+
const context = React60.useContext(SnackbarContext);
|
|
3755
|
+
if (!context) {
|
|
3756
|
+
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
3757
|
+
}
|
|
3758
|
+
return context;
|
|
3759
|
+
}
|
|
3760
|
+
function SnackbarProvider({ children }) {
|
|
3761
|
+
const [message, setMessage] = React60.useState(null);
|
|
3762
|
+
const [duration, setDuration] = React60.useState(3e3);
|
|
3763
|
+
const showMessage = (text, customDuration = 3e3) => {
|
|
3764
|
+
setMessage(text);
|
|
3765
|
+
setDuration(customDuration);
|
|
3766
|
+
};
|
|
3767
|
+
const handleClose = () => {
|
|
3768
|
+
setMessage(null);
|
|
3769
|
+
};
|
|
3770
|
+
return /* @__PURE__ */ React60__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React60__default.default.createElement(
|
|
3771
|
+
material.Snackbar,
|
|
3772
|
+
{
|
|
3773
|
+
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
3774
|
+
open: message !== null,
|
|
3775
|
+
onClose: handleClose,
|
|
3776
|
+
message,
|
|
3777
|
+
autoHideDuration: duration,
|
|
3778
|
+
sx: {
|
|
3779
|
+
zIndex: 1e4,
|
|
3780
|
+
// Very high z-index
|
|
3781
|
+
position: "fixed"
|
|
3782
|
+
// Make sure it's fixed positioned
|
|
3783
|
+
}
|
|
3784
|
+
}
|
|
3785
|
+
));
|
|
3786
|
+
}
|
|
3787
|
+
function relativeTime(iso) {
|
|
3788
|
+
if (!iso) return null;
|
|
3789
|
+
const date = new Date(iso).getTime();
|
|
3790
|
+
if (Number.isNaN(date)) return null;
|
|
3791
|
+
const diffMs = Date.now() - date;
|
|
3792
|
+
const diffSec = Math.round(diffMs / 1e3);
|
|
3793
|
+
if (diffSec < 60) return "just now";
|
|
3794
|
+
const diffMin = Math.round(diffSec / 60);
|
|
3795
|
+
if (diffMin < 60) return `${diffMin}m ago`;
|
|
3796
|
+
const diffHr = Math.round(diffMin / 60);
|
|
3797
|
+
if (diffHr < 24) return `${diffHr}h ago`;
|
|
3798
|
+
const diffDay = Math.round(diffHr / 24);
|
|
3799
|
+
if (diffDay < 30) return `${diffDay}d ago`;
|
|
3800
|
+
const diffMo = Math.round(diffDay / 30);
|
|
3801
|
+
if (diffMo < 12) return `${diffMo}mo ago`;
|
|
3802
|
+
const diffYr = Math.round(diffMo / 12);
|
|
3803
|
+
return `${diffYr}y ago`;
|
|
3804
|
+
}
|
|
3805
|
+
function TemplateRow({
|
|
3806
|
+
template,
|
|
3807
|
+
isCurrent,
|
|
3623
3808
|
templateLoader,
|
|
3624
|
-
|
|
3809
|
+
onDuplicate,
|
|
3810
|
+
onRename,
|
|
3811
|
+
onDelete,
|
|
3812
|
+
onPromote,
|
|
3813
|
+
onDemote,
|
|
3814
|
+
onDuplicateAsTemplate
|
|
3625
3815
|
}) {
|
|
3626
3816
|
const { setCurrentTemplate } = useEmailEditor();
|
|
3627
|
-
const
|
|
3628
|
-
|
|
3817
|
+
const [hover, setHover] = React60.useState(false);
|
|
3818
|
+
const handleClick = () => __async(null, null, function* () {
|
|
3629
3819
|
try {
|
|
3630
|
-
const
|
|
3631
|
-
if (
|
|
3632
|
-
resetDocument(
|
|
3633
|
-
setCurrentTemplate(
|
|
3820
|
+
const content = yield templateLoader();
|
|
3821
|
+
if (content) {
|
|
3822
|
+
resetDocument(content);
|
|
3823
|
+
setCurrentTemplate(template.id, template.slug, template.kind);
|
|
3634
3824
|
}
|
|
3635
3825
|
} catch (error) {
|
|
3636
3826
|
console.error("Error loading template:", error);
|
|
3637
3827
|
}
|
|
3638
3828
|
});
|
|
3639
|
-
|
|
3829
|
+
const stop = (e) => {
|
|
3830
|
+
e.stopPropagation();
|
|
3831
|
+
};
|
|
3832
|
+
const updated = relativeTime(template.updatedAt);
|
|
3833
|
+
const hasActions = Boolean(
|
|
3834
|
+
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
3835
|
+
);
|
|
3836
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
3837
|
+
material.Box,
|
|
3838
|
+
{
|
|
3839
|
+
role: "button",
|
|
3840
|
+
tabIndex: 0,
|
|
3841
|
+
onClick: handleClick,
|
|
3842
|
+
onKeyDown: (e) => {
|
|
3843
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
3844
|
+
e.preventDefault();
|
|
3845
|
+
handleClick();
|
|
3846
|
+
}
|
|
3847
|
+
},
|
|
3848
|
+
onMouseEnter: () => setHover(true),
|
|
3849
|
+
onMouseLeave: () => setHover(false),
|
|
3850
|
+
sx: {
|
|
3851
|
+
position: "relative",
|
|
3852
|
+
width: "100%",
|
|
3853
|
+
px: 1.5,
|
|
3854
|
+
py: 1,
|
|
3855
|
+
borderRadius: 1,
|
|
3856
|
+
cursor: "pointer",
|
|
3857
|
+
bgcolor: isCurrent ? "rgba(0, 0, 0, 0.08)" : "transparent",
|
|
3858
|
+
"&:hover": { bgcolor: "rgba(0, 0, 0, 0.04)" },
|
|
3859
|
+
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
3860
|
+
}
|
|
3861
|
+
},
|
|
3862
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3863
|
+
material.Typography,
|
|
3864
|
+
{
|
|
3865
|
+
variant: "body2",
|
|
3866
|
+
sx: {
|
|
3867
|
+
fontWeight: 600,
|
|
3868
|
+
flexGrow: 1,
|
|
3869
|
+
overflow: "hidden",
|
|
3870
|
+
textOverflow: "ellipsis",
|
|
3871
|
+
whiteSpace: "nowrap"
|
|
3872
|
+
},
|
|
3873
|
+
title: template.slug
|
|
3874
|
+
},
|
|
3875
|
+
template.slug
|
|
3876
|
+
), updated && /* @__PURE__ */ React60__default.default.createElement(
|
|
3877
|
+
material.Typography,
|
|
3878
|
+
{
|
|
3879
|
+
variant: "caption",
|
|
3880
|
+
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
3881
|
+
},
|
|
3882
|
+
updated
|
|
3883
|
+
)), template.description && /* @__PURE__ */ React60__default.default.createElement(
|
|
3884
|
+
material.Typography,
|
|
3885
|
+
{
|
|
3886
|
+
variant: "caption",
|
|
3887
|
+
sx: {
|
|
3888
|
+
color: "text.secondary",
|
|
3889
|
+
display: "-webkit-box",
|
|
3890
|
+
WebkitLineClamp: 2,
|
|
3891
|
+
WebkitBoxOrient: "vertical",
|
|
3892
|
+
overflow: "hidden",
|
|
3893
|
+
lineHeight: 1.3
|
|
3894
|
+
}
|
|
3895
|
+
},
|
|
3896
|
+
template.description
|
|
3897
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
|
|
3898
|
+
material.Chip,
|
|
3899
|
+
{
|
|
3900
|
+
key: tag,
|
|
3901
|
+
label: tag,
|
|
3902
|
+
size: "small",
|
|
3903
|
+
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
3904
|
+
}
|
|
3905
|
+
))))),
|
|
3906
|
+
hasActions && hover && /* @__PURE__ */ React60__default.default.createElement(
|
|
3907
|
+
material.Stack,
|
|
3908
|
+
{
|
|
3909
|
+
direction: "row",
|
|
3910
|
+
spacing: 0.25,
|
|
3911
|
+
onClick: stop,
|
|
3912
|
+
sx: {
|
|
3913
|
+
position: "absolute",
|
|
3914
|
+
top: 4,
|
|
3915
|
+
right: 4,
|
|
3916
|
+
bgcolor: "background.paper",
|
|
3917
|
+
borderRadius: 1,
|
|
3918
|
+
boxShadow: 1,
|
|
3919
|
+
p: 0.25
|
|
3920
|
+
}
|
|
3921
|
+
},
|
|
3922
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate as template" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3923
|
+
material.IconButton,
|
|
3924
|
+
{
|
|
3925
|
+
size: "small",
|
|
3926
|
+
onClick: (e) => {
|
|
3927
|
+
stop(e);
|
|
3928
|
+
onDuplicateAsTemplate();
|
|
3929
|
+
}
|
|
3930
|
+
},
|
|
3931
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })
|
|
3932
|
+
)),
|
|
3933
|
+
onDuplicate && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Duplicate" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3934
|
+
material.IconButton,
|
|
3935
|
+
{
|
|
3936
|
+
size: "small",
|
|
3937
|
+
onClick: (e) => {
|
|
3938
|
+
stop(e);
|
|
3939
|
+
onDuplicate();
|
|
3940
|
+
}
|
|
3941
|
+
},
|
|
3942
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
|
|
3943
|
+
)),
|
|
3944
|
+
onRename && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Rename" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3945
|
+
material.IconButton,
|
|
3946
|
+
{
|
|
3947
|
+
size: "small",
|
|
3948
|
+
onClick: (e) => {
|
|
3949
|
+
stop(e);
|
|
3950
|
+
onRename();
|
|
3951
|
+
}
|
|
3952
|
+
},
|
|
3953
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })
|
|
3954
|
+
)),
|
|
3955
|
+
onPromote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Promote to sample" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3956
|
+
material.IconButton,
|
|
3957
|
+
{
|
|
3958
|
+
size: "small",
|
|
3959
|
+
onClick: (e) => {
|
|
3960
|
+
stop(e);
|
|
3961
|
+
onPromote();
|
|
3962
|
+
}
|
|
3963
|
+
},
|
|
3964
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })
|
|
3965
|
+
)),
|
|
3966
|
+
onDemote && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Demote to template" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3967
|
+
material.IconButton,
|
|
3968
|
+
{
|
|
3969
|
+
size: "small",
|
|
3970
|
+
onClick: (e) => {
|
|
3971
|
+
stop(e);
|
|
3972
|
+
onDemote();
|
|
3973
|
+
}
|
|
3974
|
+
},
|
|
3975
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })
|
|
3976
|
+
)),
|
|
3977
|
+
onDelete && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
3978
|
+
material.IconButton,
|
|
3979
|
+
{
|
|
3980
|
+
size: "small",
|
|
3981
|
+
onClick: (e) => {
|
|
3982
|
+
stop(e);
|
|
3983
|
+
onDelete();
|
|
3984
|
+
}
|
|
3985
|
+
},
|
|
3986
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })
|
|
3987
|
+
))
|
|
3988
|
+
)
|
|
3989
|
+
);
|
|
3990
|
+
}
|
|
3991
|
+
function RenameDialog({
|
|
3992
|
+
open,
|
|
3993
|
+
currentSlug,
|
|
3994
|
+
existingSlugs,
|
|
3995
|
+
onClose,
|
|
3996
|
+
onSubmit
|
|
3997
|
+
}) {
|
|
3998
|
+
const [value, setValue] = React60.useState(currentSlug);
|
|
3999
|
+
const [error, setError] = React60.useState(null);
|
|
4000
|
+
const [submitting, setSubmitting] = React60.useState(false);
|
|
4001
|
+
React60.useEffect(() => {
|
|
4002
|
+
if (open) {
|
|
4003
|
+
setValue(currentSlug);
|
|
4004
|
+
setError(null);
|
|
4005
|
+
setSubmitting(false);
|
|
4006
|
+
}
|
|
4007
|
+
}, [open, currentSlug]);
|
|
4008
|
+
const handleChange = (e) => {
|
|
4009
|
+
setValue(e.target.value);
|
|
4010
|
+
setError(null);
|
|
4011
|
+
};
|
|
4012
|
+
const handleSubmit = () => __async(null, null, function* () {
|
|
4013
|
+
const trimmed = value.trim();
|
|
4014
|
+
if (!trimmed) {
|
|
4015
|
+
setError("Please enter a name");
|
|
4016
|
+
return;
|
|
4017
|
+
}
|
|
4018
|
+
if (trimmed === currentSlug) {
|
|
4019
|
+
onClose();
|
|
4020
|
+
return;
|
|
4021
|
+
}
|
|
4022
|
+
if (existingSlugs.some((s) => s.toLowerCase() === trimmed.toLowerCase())) {
|
|
4023
|
+
setError("A template with this name already exists");
|
|
4024
|
+
return;
|
|
4025
|
+
}
|
|
4026
|
+
setSubmitting(true);
|
|
4027
|
+
try {
|
|
4028
|
+
yield onSubmit(trimmed);
|
|
4029
|
+
onClose();
|
|
4030
|
+
} catch (e) {
|
|
4031
|
+
console.error("Error renaming template:", e);
|
|
4032
|
+
setError("Failed to rename template");
|
|
4033
|
+
} finally {
|
|
4034
|
+
setSubmitting(false);
|
|
4035
|
+
}
|
|
4036
|
+
});
|
|
4037
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Rename template"), /* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
4038
|
+
material.TextField,
|
|
4039
|
+
{
|
|
4040
|
+
autoFocus: true,
|
|
4041
|
+
margin: "dense",
|
|
4042
|
+
label: "Slug",
|
|
4043
|
+
fullWidth: true,
|
|
4044
|
+
variant: "outlined",
|
|
4045
|
+
value,
|
|
4046
|
+
onChange: handleChange,
|
|
4047
|
+
error: !!error,
|
|
4048
|
+
helperText: error,
|
|
4049
|
+
disabled: submitting,
|
|
4050
|
+
onKeyPress: (e) => {
|
|
4051
|
+
if (e.key === "Enter" && !submitting) {
|
|
4052
|
+
handleSubmit();
|
|
4053
|
+
}
|
|
4054
|
+
}
|
|
4055
|
+
}
|
|
4056
|
+
)), /* @__PURE__ */ React60__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
|
|
4057
|
+
material.Button,
|
|
4058
|
+
{
|
|
4059
|
+
onClick: handleSubmit,
|
|
4060
|
+
variant: "contained",
|
|
4061
|
+
disabled: !value.trim() || submitting
|
|
4062
|
+
},
|
|
4063
|
+
submitting ? "Renaming..." : "Rename"
|
|
4064
|
+
)));
|
|
4065
|
+
}
|
|
4066
|
+
function SaveTemplateDialog({
|
|
4067
|
+
open,
|
|
4068
|
+
onClose,
|
|
4069
|
+
onSave,
|
|
4070
|
+
onNameChange,
|
|
4071
|
+
defaultName = "",
|
|
4072
|
+
error: externalError = null
|
|
4073
|
+
}) {
|
|
4074
|
+
const [templateName, setTemplateName] = React60.useState(defaultName);
|
|
4075
|
+
const [internalError, setInternalError] = React60.useState("");
|
|
4076
|
+
const [isSubmitting, setIsSubmitting] = React60.useState(false);
|
|
4077
|
+
React60.useEffect(() => {
|
|
4078
|
+
if (open) {
|
|
4079
|
+
setTemplateName(defaultName);
|
|
4080
|
+
setInternalError("");
|
|
4081
|
+
setIsSubmitting(false);
|
|
4082
|
+
}
|
|
4083
|
+
}, [open, defaultName]);
|
|
4084
|
+
const displayError = externalError || internalError;
|
|
4085
|
+
const handleNameChange = (e) => {
|
|
4086
|
+
setTemplateName(e.target.value);
|
|
4087
|
+
if (e.target.value.trim()) {
|
|
4088
|
+
setInternalError("");
|
|
4089
|
+
}
|
|
4090
|
+
if (onNameChange) {
|
|
4091
|
+
onNameChange();
|
|
4092
|
+
}
|
|
4093
|
+
};
|
|
4094
|
+
const handleSave = () => __async(null, null, function* () {
|
|
4095
|
+
if (!templateName.trim()) {
|
|
4096
|
+
setInternalError("Please enter a template name");
|
|
4097
|
+
return;
|
|
4098
|
+
}
|
|
4099
|
+
setIsSubmitting(true);
|
|
4100
|
+
try {
|
|
4101
|
+
const result = onSave(templateName);
|
|
4102
|
+
if (result instanceof Promise) {
|
|
4103
|
+
const success = yield result;
|
|
4104
|
+
if (success) {
|
|
4105
|
+
setTemplateName("");
|
|
4106
|
+
setInternalError("");
|
|
4107
|
+
onClose();
|
|
4108
|
+
}
|
|
4109
|
+
} else if (result !== false) {
|
|
4110
|
+
setTemplateName("");
|
|
4111
|
+
setInternalError("");
|
|
4112
|
+
onClose();
|
|
4113
|
+
}
|
|
4114
|
+
} catch (error) {
|
|
4115
|
+
console.error("Error saving template:", error);
|
|
4116
|
+
} finally {
|
|
4117
|
+
setIsSubmitting(false);
|
|
4118
|
+
}
|
|
4119
|
+
});
|
|
4120
|
+
const handleCancel = () => {
|
|
4121
|
+
setTemplateName("");
|
|
4122
|
+
setInternalError("");
|
|
4123
|
+
onClose();
|
|
4124
|
+
};
|
|
4125
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4126
|
+
material.Dialog,
|
|
4127
|
+
{
|
|
4128
|
+
open,
|
|
4129
|
+
onClose: handleCancel,
|
|
4130
|
+
maxWidth: "sm",
|
|
4131
|
+
fullWidth: true
|
|
4132
|
+
},
|
|
4133
|
+
/* @__PURE__ */ React60__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
|
|
4134
|
+
/* @__PURE__ */ React60__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(
|
|
4135
|
+
material.TextField,
|
|
4136
|
+
{
|
|
4137
|
+
autoFocus: true,
|
|
4138
|
+
margin: "dense",
|
|
4139
|
+
id: "template-name",
|
|
4140
|
+
label: "Template Name",
|
|
4141
|
+
type: "text",
|
|
4142
|
+
fullWidth: true,
|
|
4143
|
+
variant: "outlined",
|
|
4144
|
+
value: templateName,
|
|
4145
|
+
onChange: handleNameChange,
|
|
4146
|
+
error: !!displayError,
|
|
4147
|
+
helperText: displayError,
|
|
4148
|
+
onKeyPress: (e) => {
|
|
4149
|
+
if (e.key === "Enter" && templateName.trim() && !displayError && !isSubmitting) {
|
|
4150
|
+
handleSave();
|
|
4151
|
+
}
|
|
4152
|
+
},
|
|
4153
|
+
disabled: isSubmitting
|
|
4154
|
+
}
|
|
4155
|
+
))),
|
|
4156
|
+
/* @__PURE__ */ React60__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React60__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React60__default.default.createElement(
|
|
4157
|
+
material.Button,
|
|
4158
|
+
{
|
|
4159
|
+
onClick: handleSave,
|
|
4160
|
+
variant: "contained",
|
|
4161
|
+
color: "primary",
|
|
4162
|
+
disabled: !templateName.trim() || !!displayError || isSubmitting
|
|
4163
|
+
},
|
|
4164
|
+
isSubmitting ? "Saving..." : "Save Template"
|
|
4165
|
+
))
|
|
4166
|
+
);
|
|
3640
4167
|
}
|
|
3641
4168
|
|
|
3642
4169
|
// sample-templates/empty-email-message.ts
|
|
@@ -3655,12 +4182,29 @@ var EMPTY_EMAIL_MESSAGE = {
|
|
|
3655
4182
|
var empty_email_message_default = EMPTY_EMAIL_MESSAGE;
|
|
3656
4183
|
|
|
3657
4184
|
// src/app/templates-drawer/index.tsx
|
|
3658
|
-
var SAMPLES_DRAWER_WIDTH =
|
|
4185
|
+
var SAMPLES_DRAWER_WIDTH = 320;
|
|
3659
4186
|
var EMPTY_TEMPLATE = {
|
|
3660
4187
|
id: "empty-email",
|
|
3661
|
-
|
|
4188
|
+
slug: "Empty email",
|
|
4189
|
+
kind: "sample",
|
|
3662
4190
|
description: "A blank email template to start from scratch"
|
|
3663
4191
|
};
|
|
4192
|
+
var SORT_OPTIONS = [
|
|
4193
|
+
{ value: "updatedAt", label: "Last updated" },
|
|
4194
|
+
{ value: "createdAt", label: "Recently created" },
|
|
4195
|
+
{ value: "slug", label: "Name (A\u2013Z)" }
|
|
4196
|
+
];
|
|
4197
|
+
function compareTemplates(a, b, key) {
|
|
4198
|
+
if (key === "slug") {
|
|
4199
|
+
return a.slug.localeCompare(b.slug);
|
|
4200
|
+
}
|
|
4201
|
+
const av = a[key];
|
|
4202
|
+
const bv = b[key];
|
|
4203
|
+
if (!av && !bv) return 0;
|
|
4204
|
+
if (!av) return 1;
|
|
4205
|
+
if (!bv) return -1;
|
|
4206
|
+
return new Date(bv).getTime() - new Date(av).getTime();
|
|
4207
|
+
}
|
|
3664
4208
|
function SamplesDrawer({
|
|
3665
4209
|
enterDuration = 225,
|
|
3666
4210
|
exitDuration = 225,
|
|
@@ -3669,13 +4213,27 @@ function SamplesDrawer({
|
|
|
3669
4213
|
loadTemplates,
|
|
3670
4214
|
loadTemplate,
|
|
3671
4215
|
currentTemplateId,
|
|
3672
|
-
deleteTemplate
|
|
4216
|
+
deleteTemplate,
|
|
4217
|
+
copyTemplate,
|
|
4218
|
+
renameTemplate,
|
|
4219
|
+
setTemplateKind,
|
|
4220
|
+
saveAs
|
|
3673
4221
|
}) {
|
|
4222
|
+
var _a;
|
|
3674
4223
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
3675
|
-
const
|
|
3676
|
-
const
|
|
3677
|
-
const [
|
|
3678
|
-
const [
|
|
4224
|
+
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
4225
|
+
const { showMessage } = useSnackbar();
|
|
4226
|
+
const [samples, setSamples] = React60.useState([EMPTY_TEMPLATE]);
|
|
4227
|
+
const [templates, setTemplates] = React60.useState([]);
|
|
4228
|
+
const [loadingSamples, setLoadingSamples] = React60.useState(false);
|
|
4229
|
+
const [loadingTemplates, setLoadingTemplates] = React60.useState(false);
|
|
4230
|
+
const [templatesError, setTemplatesError] = React60.useState(null);
|
|
4231
|
+
const [search, setSearch] = React60.useState("");
|
|
4232
|
+
const [sortKey, setSortKey] = React60.useState("updatedAt");
|
|
4233
|
+
const [activeTags, setActiveTags] = React60.useState([]);
|
|
4234
|
+
const [renameTarget, setRenameTarget] = React60.useState(null);
|
|
4235
|
+
const [pendingSaveAs, setPendingSaveAs] = React60.useState(null);
|
|
4236
|
+
const [newError, setNewError] = React60.useState(null);
|
|
3679
4237
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
3680
4238
|
if (templateId === "empty-email") {
|
|
3681
4239
|
return empty_email_message_default;
|
|
@@ -3685,149 +4243,295 @@ function SamplesDrawer({
|
|
|
3685
4243
|
}
|
|
3686
4244
|
return null;
|
|
3687
4245
|
});
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
console.error("Failed to load samples:", error);
|
|
3701
|
-
setSamples([EMPTY_TEMPLATE]);
|
|
3702
|
-
setLoadingSamples(false);
|
|
3703
|
-
});
|
|
3704
|
-
}
|
|
4246
|
+
const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
|
|
4247
|
+
React60.useEffect(() => {
|
|
4248
|
+
if (!enabled || !samplesDrawerOpen || !loadSamples) return;
|
|
4249
|
+
setLoadingSamples(true);
|
|
4250
|
+
loadSamples().then((results) => {
|
|
4251
|
+
const normalized = withKind(results, "sample");
|
|
4252
|
+
const existingEmpty = normalized.find((s) => s.id === "empty-email");
|
|
4253
|
+
setSamples(existingEmpty ? normalized : [EMPTY_TEMPLATE, ...normalized]);
|
|
4254
|
+
}).catch((error) => {
|
|
4255
|
+
console.error("Failed to load samples:", error);
|
|
4256
|
+
setSamples([EMPTY_TEMPLATE]);
|
|
4257
|
+
}).finally(() => setLoadingSamples(false));
|
|
3705
4258
|
}, [enabled, samplesDrawerOpen, loadSamples]);
|
|
3706
|
-
|
|
3707
|
-
if (
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
|
|
3714
|
-
|
|
3715
|
-
|
|
4259
|
+
const refreshTemplates = () => __async(null, null, function* () {
|
|
4260
|
+
if (!loadTemplates) return;
|
|
4261
|
+
setLoadingTemplates(true);
|
|
4262
|
+
setTemplatesError(null);
|
|
4263
|
+
try {
|
|
4264
|
+
const results = yield loadTemplates();
|
|
4265
|
+
setTemplates(withKind(results, "template"));
|
|
4266
|
+
} catch (error) {
|
|
4267
|
+
console.error("Failed to load templates:", error);
|
|
4268
|
+
setTemplatesError("Could not load templates");
|
|
4269
|
+
} finally {
|
|
4270
|
+
setLoadingTemplates(false);
|
|
3716
4271
|
}
|
|
4272
|
+
});
|
|
4273
|
+
React60.useEffect(() => {
|
|
4274
|
+
if (!enabled || !loadTemplates) return;
|
|
4275
|
+
refreshTemplates();
|
|
3717
4276
|
}, [enabled, loadTemplates]);
|
|
3718
|
-
|
|
3719
|
-
const
|
|
3720
|
-
|
|
4277
|
+
React60.useEffect(() => {
|
|
4278
|
+
const handler = (e) => {
|
|
4279
|
+
const detail = e.detail;
|
|
4280
|
+
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
3721
4281
|
};
|
|
3722
|
-
window.addEventListener("templateListUpdated",
|
|
3723
|
-
return () => window.removeEventListener("templateListUpdated",
|
|
4282
|
+
window.addEventListener("templateListUpdated", handler);
|
|
4283
|
+
return () => window.removeEventListener("templateListUpdated", handler);
|
|
3724
4284
|
}, []);
|
|
4285
|
+
const { templateRows, sampleRows } = React60.useMemo(() => {
|
|
4286
|
+
const byId = /* @__PURE__ */ new Map();
|
|
4287
|
+
for (const s of samples) byId.set(s.id, s);
|
|
4288
|
+
for (const t of templates) byId.set(t.id, t);
|
|
4289
|
+
const all = Array.from(byId.values());
|
|
4290
|
+
return {
|
|
4291
|
+
templateRows: all.filter((t) => t.kind === "template"),
|
|
4292
|
+
sampleRows: all.filter((t) => t.kind === "sample")
|
|
4293
|
+
};
|
|
4294
|
+
}, [samples, templates]);
|
|
4295
|
+
const allTags = React60.useMemo(() => {
|
|
4296
|
+
var _a2;
|
|
4297
|
+
const set = /* @__PURE__ */ new Set();
|
|
4298
|
+
for (const t of templateRows) {
|
|
4299
|
+
(_a2 = t.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
4300
|
+
}
|
|
4301
|
+
return Array.from(set).sort();
|
|
4302
|
+
}, [templateRows]);
|
|
4303
|
+
const filteredTemplates = React60.useMemo(() => {
|
|
4304
|
+
const term = search.trim().toLowerCase();
|
|
4305
|
+
const matchSearch = (t) => {
|
|
4306
|
+
if (!term) return true;
|
|
4307
|
+
const haystack = [t.slug, t.description, t.subject].filter(Boolean).join(" ").toLowerCase();
|
|
4308
|
+
return haystack.includes(term);
|
|
4309
|
+
};
|
|
4310
|
+
const matchTags = (t) => {
|
|
4311
|
+
if (activeTags.length === 0) return true;
|
|
4312
|
+
if (!t.tags || t.tags.length === 0) return false;
|
|
4313
|
+
return activeTags.every((tag) => t.tags.includes(tag));
|
|
4314
|
+
};
|
|
4315
|
+
return templateRows.filter((t) => matchSearch(t) && matchTags(t)).slice().sort((a, b) => compareTemplates(a, b, sortKey));
|
|
4316
|
+
}, [templateRows, search, activeTags, sortKey]);
|
|
4317
|
+
const toggleTag = (tag) => {
|
|
4318
|
+
setActiveTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
|
|
4319
|
+
};
|
|
4320
|
+
const handleDuplicate = (template) => {
|
|
4321
|
+
if (!copyTemplate) return;
|
|
4322
|
+
(() => __async(null, null, function* () {
|
|
4323
|
+
try {
|
|
4324
|
+
const full = yield handleLoadTemplate(template.id);
|
|
4325
|
+
if (!full) {
|
|
4326
|
+
showMessage("Could not load template to duplicate");
|
|
4327
|
+
return;
|
|
4328
|
+
}
|
|
4329
|
+
copyTemplate(`${template.slug} (Copy)`, full);
|
|
4330
|
+
showMessage("Template duplicated");
|
|
4331
|
+
} catch (e) {
|
|
4332
|
+
console.error("Error duplicating template:", e);
|
|
4333
|
+
showMessage("Error duplicating template");
|
|
4334
|
+
}
|
|
4335
|
+
}))();
|
|
4336
|
+
};
|
|
4337
|
+
const handleDelete = (template) => {
|
|
4338
|
+
if (!deleteTemplate) return;
|
|
4339
|
+
if (!window.confirm(`Delete "${template.slug}"? This cannot be undone.`)) return;
|
|
4340
|
+
deleteTemplate(template.id);
|
|
4341
|
+
showMessage("Template deleted");
|
|
4342
|
+
};
|
|
4343
|
+
const handleRenameSubmit = (newSlug) => __async(null, null, function* () {
|
|
4344
|
+
if (!renameTarget || !renameTemplate) return;
|
|
4345
|
+
yield renameTemplate(renameTarget.id, newSlug);
|
|
4346
|
+
setTemplates(
|
|
4347
|
+
(prev) => prev.map((t) => t.id === renameTarget.id ? __spreadProps(__spreadValues({}, t), { slug: newSlug }) : t)
|
|
4348
|
+
);
|
|
4349
|
+
if (currentTemplateId === renameTarget.id) {
|
|
4350
|
+
setCurrentTemplate(renameTarget.id, newSlug);
|
|
4351
|
+
}
|
|
4352
|
+
showMessage("Template renamed");
|
|
4353
|
+
});
|
|
4354
|
+
const flipKindLocally = (id, kind) => {
|
|
4355
|
+
setTemplates((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
|
|
4356
|
+
setSamples((prev) => prev.map((t) => t.id === id ? __spreadProps(__spreadValues({}, t), { kind }) : t));
|
|
4357
|
+
};
|
|
4358
|
+
const handleSetKind = (template, kind) => {
|
|
4359
|
+
if (!setTemplateKind) return;
|
|
4360
|
+
(() => __async(null, null, function* () {
|
|
4361
|
+
try {
|
|
4362
|
+
yield setTemplateKind(template.id, kind);
|
|
4363
|
+
flipKindLocally(template.id, kind);
|
|
4364
|
+
if (currentTemplateId === template.id) {
|
|
4365
|
+
setCurrentTemplate(template.id, template.slug, kind);
|
|
4366
|
+
}
|
|
4367
|
+
showMessage(kind === "sample" ? "Promoted to sample" : "Demoted to template");
|
|
4368
|
+
} catch (e) {
|
|
4369
|
+
console.error("Error updating template kind:", e);
|
|
4370
|
+
showMessage("Error updating template kind");
|
|
4371
|
+
}
|
|
4372
|
+
}))();
|
|
4373
|
+
};
|
|
4374
|
+
const handleDuplicateAsTemplate = (sample) => {
|
|
4375
|
+
if (!saveAs) return;
|
|
4376
|
+
(() => __async(null, null, function* () {
|
|
4377
|
+
try {
|
|
4378
|
+
const content = yield handleLoadTemplate(sample.id);
|
|
4379
|
+
if (!content) {
|
|
4380
|
+
showMessage("Could not load sample");
|
|
4381
|
+
return;
|
|
4382
|
+
}
|
|
4383
|
+
resetDocument(content);
|
|
4384
|
+
setPendingSaveAs({ content, defaultName: `${sample.slug} (Copy)` });
|
|
4385
|
+
} catch (e) {
|
|
4386
|
+
console.error("Error duplicating sample:", e);
|
|
4387
|
+
showMessage("Error duplicating sample");
|
|
4388
|
+
}
|
|
4389
|
+
}))();
|
|
4390
|
+
};
|
|
4391
|
+
const handleSaveAsSubmit = (templateName) => __async(null, null, function* () {
|
|
4392
|
+
if (!saveAs || !pendingSaveAs) return false;
|
|
4393
|
+
const taken = templateRows.some((t) => t.slug.toLowerCase() === templateName.toLowerCase());
|
|
4394
|
+
if (taken) {
|
|
4395
|
+
setNewError("A template with this name already exists");
|
|
4396
|
+
return false;
|
|
4397
|
+
}
|
|
4398
|
+
try {
|
|
4399
|
+
const content = pendingSaveAs.content;
|
|
4400
|
+
const { id, slug } = yield saveAs(templateName, buildSavePayload(content));
|
|
4401
|
+
resetDocument(content);
|
|
4402
|
+
setCurrentTemplate(id, slug, "template");
|
|
4403
|
+
ctxLoadTemplate(content, id, slug, "template");
|
|
4404
|
+
showMessage("New template created!");
|
|
4405
|
+
window.location.hash = `#template/${id}`;
|
|
4406
|
+
yield refreshTemplates();
|
|
4407
|
+
return true;
|
|
4408
|
+
} catch (e) {
|
|
4409
|
+
console.error("Error creating template:", e);
|
|
4410
|
+
showMessage("Error creating template");
|
|
4411
|
+
return false;
|
|
4412
|
+
}
|
|
4413
|
+
});
|
|
4414
|
+
const openNewTemplateDialog = () => {
|
|
4415
|
+
setNewError(null);
|
|
4416
|
+
setPendingSaveAs({ content: empty_email_message_default, defaultName: "New Template" });
|
|
4417
|
+
};
|
|
3725
4418
|
if (!enabled) {
|
|
3726
4419
|
return null;
|
|
3727
4420
|
}
|
|
3728
|
-
|
|
4421
|
+
const existingSlugs = templates.map((t) => t.slug);
|
|
4422
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
3729
4423
|
material.Drawer,
|
|
3730
4424
|
{
|
|
3731
4425
|
variant: "persistent",
|
|
3732
4426
|
anchor: "left",
|
|
3733
4427
|
open: samplesDrawerOpen,
|
|
3734
|
-
PaperProps: {
|
|
3735
|
-
style: { position: "absolute" }
|
|
3736
|
-
},
|
|
4428
|
+
PaperProps: { style: { position: "absolute" } },
|
|
3737
4429
|
ModalProps: {
|
|
3738
4430
|
container: document.getElementById("drawer-container"),
|
|
3739
4431
|
style: { position: "absolute" },
|
|
3740
4432
|
keepMounted: true
|
|
3741
4433
|
},
|
|
3742
|
-
transitionDuration: {
|
|
3743
|
-
|
|
3744
|
-
exit: exitDuration
|
|
3745
|
-
},
|
|
3746
|
-
sx: {
|
|
3747
|
-
width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
|
|
3748
|
-
}
|
|
4434
|
+
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
4435
|
+
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
3749
4436
|
},
|
|
3750
|
-
/* @__PURE__ */
|
|
4437
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
3751
4438
|
material.Stack,
|
|
3752
4439
|
{
|
|
3753
|
-
spacing: 3,
|
|
3754
4440
|
py: 1,
|
|
3755
4441
|
px: 2,
|
|
3756
4442
|
width: SAMPLES_DRAWER_WIDTH,
|
|
3757
|
-
|
|
3758
|
-
|
|
4443
|
+
height: "100%",
|
|
4444
|
+
spacing: 1.5,
|
|
4445
|
+
sx: { overflowY: "auto" }
|
|
3759
4446
|
},
|
|
3760
|
-
/* @__PURE__ */
|
|
3761
|
-
material.
|
|
4447
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, "Templates"), saveAs && /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(
|
|
4448
|
+
material.IconButton,
|
|
3762
4449
|
{
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
4450
|
+
size: "small",
|
|
4451
|
+
onClick: openNewTemplateDialog,
|
|
4452
|
+
"aria-label": "New template"
|
|
4453
|
+
},
|
|
4454
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
4455
|
+
))),
|
|
4456
|
+
loadTemplates && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
4457
|
+
material.TextField,
|
|
4458
|
+
{
|
|
4459
|
+
size: "small",
|
|
4460
|
+
placeholder: "Search templates",
|
|
4461
|
+
value: search,
|
|
4462
|
+
onChange: (e) => setSearch(e.target.value),
|
|
4463
|
+
InputProps: {
|
|
4464
|
+
startAdornment: /* @__PURE__ */ React60__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
3769
4465
|
}
|
|
4466
|
+
}
|
|
4467
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
4468
|
+
material.TextField,
|
|
4469
|
+
{
|
|
4470
|
+
select: true,
|
|
4471
|
+
size: "small",
|
|
4472
|
+
label: "Sort by",
|
|
4473
|
+
value: sortKey,
|
|
4474
|
+
onChange: (e) => setSortKey(e.target.value)
|
|
3770
4475
|
},
|
|
3771
|
-
/* @__PURE__ */
|
|
3772
|
-
|
|
3773
|
-
|
|
3774
|
-
|
|
3775
|
-
|
|
3776
|
-
|
|
3777
|
-
|
|
3778
|
-
|
|
3779
|
-
"
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
)
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
variant: "body2",
|
|
3808
|
-
sx: { color: "text.secondary", py: 1 }
|
|
3809
|
-
},
|
|
3810
|
-
"No saved templates"
|
|
3811
|
-
), /* @__PURE__ */ React72__default.default.createElement(material.Divider, null)),
|
|
3812
|
-
/* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3813
|
-
material.Typography,
|
|
3814
|
-
{
|
|
3815
|
-
variant: "subtitle2",
|
|
3816
|
-
component: "h2",
|
|
3817
|
-
sx: { fontWeight: "bold", mt: 1 }
|
|
3818
|
-
},
|
|
3819
|
-
"Sample Templates"
|
|
3820
|
-
), loadingSamples ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.CircularProgress, { size: 24 })) : /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React72__default.default.createElement(
|
|
3821
|
-
SidebarButton,
|
|
3822
|
-
{
|
|
3823
|
-
key: sample.id,
|
|
3824
|
-
templateId: sample.id,
|
|
3825
|
-
templateLoader: () => handleLoadTemplate(sample.id)
|
|
3826
|
-
},
|
|
3827
|
-
sample.name
|
|
3828
|
-
))))
|
|
3829
|
-
)
|
|
4476
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React60__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, opt.label))
|
|
4477
|
+
), allTags.length > 0 && /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, allTags.map((tag) => /* @__PURE__ */ React60__default.default.createElement(
|
|
4478
|
+
material.Chip,
|
|
4479
|
+
{
|
|
4480
|
+
key: tag,
|
|
4481
|
+
label: tag,
|
|
4482
|
+
size: "small",
|
|
4483
|
+
clickable: true,
|
|
4484
|
+
color: activeTags.includes(tag) ? "primary" : "default",
|
|
4485
|
+
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
4486
|
+
onClick: () => toggleTag(tag)
|
|
4487
|
+
}
|
|
4488
|
+
))), /* @__PURE__ */ React60__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Your Templates"), loadingTemplates ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React60__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React60__default.default.createElement(
|
|
4489
|
+
TemplateRow,
|
|
4490
|
+
{
|
|
4491
|
+
key: template.id,
|
|
4492
|
+
template,
|
|
4493
|
+
isCurrent: currentTemplateId === template.id,
|
|
4494
|
+
templateLoader: () => handleLoadTemplate(template.id),
|
|
4495
|
+
onDuplicate: copyTemplate ? () => handleDuplicate(template) : void 0,
|
|
4496
|
+
onRename: renameTemplate ? () => setRenameTarget(template) : void 0,
|
|
4497
|
+
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
4498
|
+
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
4499
|
+
}
|
|
4500
|
+
))) : /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? "No saved templates yet" : "No templates match your filters")), /* @__PURE__ */ React60__default.default.createElement(material.Divider, null)),
|
|
4501
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, null, /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5 } }, "Sample Templates"), loadingSamples ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.CircularProgress, { size: 24 })) : sampleRows.length > 0 ? /* @__PURE__ */ React60__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, sampleRows.map((sample) => /* @__PURE__ */ React60__default.default.createElement(
|
|
4502
|
+
TemplateRow,
|
|
4503
|
+
{
|
|
4504
|
+
key: sample.id,
|
|
4505
|
+
template: sample,
|
|
4506
|
+
isCurrent: currentTemplateId === sample.id,
|
|
4507
|
+
templateLoader: () => handleLoadTemplate(sample.id),
|
|
4508
|
+
onDuplicateAsTemplate: saveAs ? () => handleDuplicateAsTemplate(sample) : void 0,
|
|
4509
|
+
onDemote: setTemplateKind && sample.id !== "empty-email" ? () => handleSetKind(sample, "template") : void 0
|
|
4510
|
+
}
|
|
4511
|
+
))) : /* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, "No samples available"))
|
|
3830
4512
|
)
|
|
4513
|
+
), renameTarget && /* @__PURE__ */ React60__default.default.createElement(
|
|
4514
|
+
RenameDialog,
|
|
4515
|
+
{
|
|
4516
|
+
open: !!renameTarget,
|
|
4517
|
+
currentSlug: renameTarget.slug,
|
|
4518
|
+
existingSlugs: existingSlugs.filter((s) => s !== renameTarget.slug),
|
|
4519
|
+
onClose: () => setRenameTarget(null),
|
|
4520
|
+
onSubmit: handleRenameSubmit
|
|
4521
|
+
}
|
|
4522
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
4523
|
+
SaveTemplateDialog,
|
|
4524
|
+
{
|
|
4525
|
+
open: !!pendingSaveAs,
|
|
4526
|
+
onClose: () => {
|
|
4527
|
+
setPendingSaveAs(null);
|
|
4528
|
+
setNewError(null);
|
|
4529
|
+
},
|
|
4530
|
+
onSave: handleSaveAsSubmit,
|
|
4531
|
+
onNameChange: () => setNewError(null),
|
|
4532
|
+
defaultName: (_a = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _a : "New Template",
|
|
4533
|
+
error: newError
|
|
4534
|
+
}
|
|
3831
4535
|
));
|
|
3832
4536
|
}
|
|
3833
4537
|
var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
|
|
@@ -3842,7 +4546,7 @@ var ICON_SX = {
|
|
|
3842
4546
|
borderColor: "cadet.300"
|
|
3843
4547
|
};
|
|
3844
4548
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
3845
|
-
return /* @__PURE__ */
|
|
4549
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
3846
4550
|
material.Button,
|
|
3847
4551
|
{
|
|
3848
4552
|
sx: BUTTON_SX2,
|
|
@@ -3851,14 +4555,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
3851
4555
|
onClick();
|
|
3852
4556
|
}
|
|
3853
4557
|
},
|
|
3854
|
-
/* @__PURE__ */
|
|
3855
|
-
/* @__PURE__ */
|
|
4558
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
4559
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
3856
4560
|
);
|
|
3857
4561
|
}
|
|
3858
4562
|
var BUTTONS = [
|
|
3859
4563
|
{
|
|
3860
4564
|
label: "Heading",
|
|
3861
|
-
icon: /* @__PURE__ */
|
|
4565
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
3862
4566
|
block: () => ({
|
|
3863
4567
|
type: "Heading",
|
|
3864
4568
|
data: {
|
|
@@ -3871,7 +4575,7 @@ var BUTTONS = [
|
|
|
3871
4575
|
},
|
|
3872
4576
|
{
|
|
3873
4577
|
label: "Text",
|
|
3874
|
-
icon: /* @__PURE__ */
|
|
4578
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
3875
4579
|
block: () => ({
|
|
3876
4580
|
type: "Text",
|
|
3877
4581
|
data: {
|
|
@@ -3885,7 +4589,7 @@ var BUTTONS = [
|
|
|
3885
4589
|
},
|
|
3886
4590
|
{
|
|
3887
4591
|
label: "Button",
|
|
3888
|
-
icon: /* @__PURE__ */
|
|
4592
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
3889
4593
|
block: () => ({
|
|
3890
4594
|
type: "Button",
|
|
3891
4595
|
data: {
|
|
@@ -3899,7 +4603,7 @@ var BUTTONS = [
|
|
|
3899
4603
|
},
|
|
3900
4604
|
{
|
|
3901
4605
|
label: "Image",
|
|
3902
|
-
icon: /* @__PURE__ */
|
|
4606
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
3903
4607
|
block: () => ({
|
|
3904
4608
|
type: "Image",
|
|
3905
4609
|
data: {
|
|
@@ -3915,7 +4619,7 @@ var BUTTONS = [
|
|
|
3915
4619
|
},
|
|
3916
4620
|
{
|
|
3917
4621
|
label: "Avatar",
|
|
3918
|
-
icon: /* @__PURE__ */
|
|
4622
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
3919
4623
|
block: () => ({
|
|
3920
4624
|
type: "Avatar",
|
|
3921
4625
|
data: {
|
|
@@ -3929,7 +4633,7 @@ var BUTTONS = [
|
|
|
3929
4633
|
},
|
|
3930
4634
|
{
|
|
3931
4635
|
label: "Personal Signature",
|
|
3932
|
-
icon: /* @__PURE__ */
|
|
4636
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
3933
4637
|
block: () => ({
|
|
3934
4638
|
type: "Signature",
|
|
3935
4639
|
data: {
|
|
@@ -3951,7 +4655,7 @@ var BUTTONS = [
|
|
|
3951
4655
|
},
|
|
3952
4656
|
{
|
|
3953
4657
|
label: "Company Signature",
|
|
3954
|
-
icon: /* @__PURE__ */
|
|
4658
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
3955
4659
|
block: () => ({
|
|
3956
4660
|
type: "Signature",
|
|
3957
4661
|
data: {
|
|
@@ -3971,7 +4675,7 @@ var BUTTONS = [
|
|
|
3971
4675
|
},
|
|
3972
4676
|
{
|
|
3973
4677
|
label: "Divider",
|
|
3974
|
-
icon: /* @__PURE__ */
|
|
4678
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
3975
4679
|
block: () => ({
|
|
3976
4680
|
type: "Divider",
|
|
3977
4681
|
data: {
|
|
@@ -3984,7 +4688,7 @@ var BUTTONS = [
|
|
|
3984
4688
|
},
|
|
3985
4689
|
{
|
|
3986
4690
|
label: "Spacer",
|
|
3987
|
-
icon: /* @__PURE__ */
|
|
4691
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
3988
4692
|
block: () => ({
|
|
3989
4693
|
type: "Spacer",
|
|
3990
4694
|
data: {}
|
|
@@ -3992,7 +4696,7 @@ var BUTTONS = [
|
|
|
3992
4696
|
},
|
|
3993
4697
|
{
|
|
3994
4698
|
label: "Html",
|
|
3995
|
-
icon: /* @__PURE__ */
|
|
4699
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
3996
4700
|
block: () => ({
|
|
3997
4701
|
type: "Html",
|
|
3998
4702
|
data: {
|
|
@@ -4007,7 +4711,7 @@ var BUTTONS = [
|
|
|
4007
4711
|
},
|
|
4008
4712
|
{
|
|
4009
4713
|
label: "Columns",
|
|
4010
|
-
icon: /* @__PURE__ */
|
|
4714
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
4011
4715
|
block: () => ({
|
|
4012
4716
|
type: "ColumnsContainer",
|
|
4013
4717
|
data: {
|
|
@@ -4022,7 +4726,7 @@ var BUTTONS = [
|
|
|
4022
4726
|
},
|
|
4023
4727
|
{
|
|
4024
4728
|
label: "Container",
|
|
4025
|
-
icon: /* @__PURE__ */
|
|
4729
|
+
icon: /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
4026
4730
|
block: () => ({
|
|
4027
4731
|
type: "Container",
|
|
4028
4732
|
data: {
|
|
@@ -4046,7 +4750,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
4046
4750
|
if (anchorEl === null) {
|
|
4047
4751
|
return null;
|
|
4048
4752
|
}
|
|
4049
|
-
return /* @__PURE__ */
|
|
4753
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4050
4754
|
material.Menu,
|
|
4051
4755
|
{
|
|
4052
4756
|
open: true,
|
|
@@ -4055,12 +4759,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
4055
4759
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
4056
4760
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
4057
4761
|
},
|
|
4058
|
-
/* @__PURE__ */
|
|
4762
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React60__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
4059
4763
|
);
|
|
4060
4764
|
}
|
|
4061
4765
|
function DividerButton({ buttonElement, onClick }) {
|
|
4062
|
-
const [visible, setVisible] =
|
|
4063
|
-
|
|
4766
|
+
const [visible, setVisible] = React60.useState(false);
|
|
4767
|
+
React60.useEffect(() => {
|
|
4064
4768
|
function listener({ clientX, clientY }) {
|
|
4065
4769
|
if (!buttonElement) {
|
|
4066
4770
|
return;
|
|
@@ -4082,7 +4786,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
4082
4786
|
window.removeEventListener("mousemove", listener);
|
|
4083
4787
|
};
|
|
4084
4788
|
}, [buttonElement, setVisible]);
|
|
4085
|
-
return /* @__PURE__ */
|
|
4789
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React60__default.default.createElement(
|
|
4086
4790
|
material.IconButton,
|
|
4087
4791
|
{
|
|
4088
4792
|
size: "small",
|
|
@@ -4105,11 +4809,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
4105
4809
|
onClick();
|
|
4106
4810
|
}
|
|
4107
4811
|
},
|
|
4108
|
-
/* @__PURE__ */
|
|
4812
|
+
/* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
4109
4813
|
));
|
|
4110
4814
|
}
|
|
4111
4815
|
function PlaceholderButton({ onClick }) {
|
|
4112
|
-
return /* @__PURE__ */
|
|
4816
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4113
4817
|
material.ButtonBase,
|
|
4114
4818
|
{
|
|
4115
4819
|
onClick: (ev) => {
|
|
@@ -4125,7 +4829,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
4125
4829
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
4126
4830
|
}
|
|
4127
4831
|
},
|
|
4128
|
-
/* @__PURE__ */
|
|
4832
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
4129
4833
|
iconsMaterial.AddOutlined,
|
|
4130
4834
|
{
|
|
4131
4835
|
sx: {
|
|
@@ -4142,19 +4846,19 @@ function PlaceholderButton({ onClick }) {
|
|
|
4142
4846
|
|
|
4143
4847
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
4144
4848
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
4145
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
4146
|
-
const [buttonElement, setButtonElement] =
|
|
4849
|
+
const [menuAnchorEl, setMenuAnchorEl] = React60.useState(null);
|
|
4850
|
+
const [buttonElement, setButtonElement] = React60.useState(null);
|
|
4147
4851
|
const handleButtonClick = () => {
|
|
4148
4852
|
setMenuAnchorEl(buttonElement);
|
|
4149
4853
|
};
|
|
4150
4854
|
const renderButton2 = () => {
|
|
4151
4855
|
if (placeholder) {
|
|
4152
|
-
return /* @__PURE__ */
|
|
4856
|
+
return /* @__PURE__ */ React60__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
4153
4857
|
} else {
|
|
4154
|
-
return /* @__PURE__ */
|
|
4858
|
+
return /* @__PURE__ */ React60__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
4155
4859
|
}
|
|
4156
4860
|
};
|
|
4157
|
-
return /* @__PURE__ */
|
|
4861
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React60__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
4158
4862
|
}
|
|
4159
4863
|
|
|
4160
4864
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -4181,9 +4885,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
|
|
|
4181
4885
|
});
|
|
4182
4886
|
};
|
|
4183
4887
|
if (!childrenIds || childrenIds.length === 0) {
|
|
4184
|
-
return /* @__PURE__ */
|
|
4888
|
+
return /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
|
|
4185
4889
|
}
|
|
4186
|
-
return /* @__PURE__ */
|
|
4890
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React60__default.default.createElement(React60.Fragment, { key: childId }, /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React60__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
|
|
4187
4891
|
}
|
|
4188
4892
|
|
|
4189
4893
|
// src/editor/blocks/columns-container/columns-container-editor.tsx
|
|
@@ -4210,15 +4914,15 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
4210
4914
|
});
|
|
4211
4915
|
setSelectedBlockId(blockId);
|
|
4212
4916
|
};
|
|
4213
|
-
return /* @__PURE__ */
|
|
4917
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4214
4918
|
columns_container_default,
|
|
4215
4919
|
{
|
|
4216
4920
|
props: restProps,
|
|
4217
4921
|
style,
|
|
4218
4922
|
columns: [
|
|
4219
|
-
/* @__PURE__ */
|
|
4220
|
-
/* @__PURE__ */
|
|
4221
|
-
/* @__PURE__ */
|
|
4923
|
+
/* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
|
|
4924
|
+
/* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
|
|
4925
|
+
/* @__PURE__ */ React60__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
|
|
4222
4926
|
]
|
|
4223
4927
|
}
|
|
4224
4928
|
);
|
|
@@ -4228,7 +4932,7 @@ function ContainerEditor({ style, props }) {
|
|
|
4228
4932
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
4229
4933
|
const document2 = useDocument();
|
|
4230
4934
|
const currentBlockId = useCurrentBlockId();
|
|
4231
|
-
return /* @__PURE__ */
|
|
4935
|
+
return /* @__PURE__ */ React60__default.default.createElement(container_default, { style }, /* @__PURE__ */ React60__default.default.createElement(
|
|
4232
4936
|
EditorChildrenIds,
|
|
4233
4937
|
{
|
|
4234
4938
|
childrenIds,
|
|
@@ -4334,7 +5038,7 @@ function EmailLayoutEditor(props) {
|
|
|
4334
5038
|
const document2 = useDocument();
|
|
4335
5039
|
const currentBlockId = useCurrentBlockId();
|
|
4336
5040
|
const selectedBlockId = useSelectedBlockId();
|
|
4337
|
-
const handleDelete =
|
|
5041
|
+
const handleDelete = React60.useCallback((e) => {
|
|
4338
5042
|
var _a2, _b2, _c2;
|
|
4339
5043
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
4340
5044
|
if (!selectedBlockId) return;
|
|
@@ -4365,7 +5069,7 @@ function EmailLayoutEditor(props) {
|
|
|
4365
5069
|
delete nDocument[selectedBlockId];
|
|
4366
5070
|
resetDocument(nDocument);
|
|
4367
5071
|
}, [selectedBlockId, document2]);
|
|
4368
|
-
const handleCopy =
|
|
5072
|
+
const handleCopy = React60.useCallback((e) => {
|
|
4369
5073
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
4370
5074
|
if (!selectedBlockId) return;
|
|
4371
5075
|
const target = e.target;
|
|
@@ -4378,7 +5082,7 @@ function EmailLayoutEditor(props) {
|
|
|
4378
5082
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
4379
5083
|
navigator.clipboard.writeText(payload);
|
|
4380
5084
|
}, [selectedBlockId, document2]);
|
|
4381
|
-
const handlePaste =
|
|
5085
|
+
const handlePaste = React60.useCallback((e) => __async(null, null, function* () {
|
|
4382
5086
|
var _a2;
|
|
4383
5087
|
const target = e.target;
|
|
4384
5088
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -4409,7 +5113,7 @@ function EmailLayoutEditor(props) {
|
|
|
4409
5113
|
resetDocument(doc);
|
|
4410
5114
|
setSelectedBlockId(newRootId);
|
|
4411
5115
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
4412
|
-
|
|
5116
|
+
React60.useEffect(() => {
|
|
4413
5117
|
window.addEventListener("keydown", handleDelete);
|
|
4414
5118
|
window.addEventListener("keydown", handleCopy);
|
|
4415
5119
|
window.addEventListener("paste", handlePaste);
|
|
@@ -4428,7 +5132,7 @@ function EmailLayoutEditor(props) {
|
|
|
4428
5132
|
lineHeight: "1.5",
|
|
4429
5133
|
margin: "0"
|
|
4430
5134
|
};
|
|
4431
|
-
const editorChildren = /* @__PURE__ */
|
|
5135
|
+
const editorChildren = /* @__PURE__ */ React60__default.default.createElement(
|
|
4432
5136
|
EditorChildrenIds,
|
|
4433
5137
|
{
|
|
4434
5138
|
childrenIds,
|
|
@@ -4447,7 +5151,7 @@ function EmailLayoutEditor(props) {
|
|
|
4447
5151
|
}
|
|
4448
5152
|
);
|
|
4449
5153
|
if (props.backdropDisabled) {
|
|
4450
|
-
return /* @__PURE__ */
|
|
5154
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4451
5155
|
"div",
|
|
4452
5156
|
{
|
|
4453
5157
|
onClick: () => {
|
|
@@ -4460,10 +5164,10 @@ function EmailLayoutEditor(props) {
|
|
|
4460
5164
|
minHeight: "100%"
|
|
4461
5165
|
})
|
|
4462
5166
|
},
|
|
4463
|
-
/* @__PURE__ */
|
|
5167
|
+
/* @__PURE__ */ React60__default.default.createElement("div", { style: { maxWidth: "600px" } }, editorChildren)
|
|
4464
5168
|
);
|
|
4465
5169
|
}
|
|
4466
|
-
return /* @__PURE__ */
|
|
5170
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4467
5171
|
"div",
|
|
4468
5172
|
{
|
|
4469
5173
|
onClick: () => {
|
|
@@ -4476,7 +5180,7 @@ function EmailLayoutEditor(props) {
|
|
|
4476
5180
|
minHeight: "100%"
|
|
4477
5181
|
})
|
|
4478
5182
|
},
|
|
4479
|
-
/* @__PURE__ */
|
|
5183
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
4480
5184
|
"table",
|
|
4481
5185
|
{
|
|
4482
5186
|
align: "center",
|
|
@@ -4500,7 +5204,7 @@ function EmailLayoutEditor(props) {
|
|
|
4500
5204
|
cellPadding: "0",
|
|
4501
5205
|
border: 0
|
|
4502
5206
|
},
|
|
4503
|
-
/* @__PURE__ */
|
|
5207
|
+
/* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React60__default.default.createElement("td", null, editorChildren)))
|
|
4504
5208
|
)
|
|
4505
5209
|
);
|
|
4506
5210
|
}
|
|
@@ -4659,13 +5363,13 @@ function TuneMenu({ blockId }) {
|
|
|
4659
5363
|
resetDocument(nDocument);
|
|
4660
5364
|
setSelectedBlockId(blockId);
|
|
4661
5365
|
};
|
|
4662
|
-
return /* @__PURE__ */
|
|
5366
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, null, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
4663
5367
|
}
|
|
4664
5368
|
|
|
4665
5369
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
4666
5370
|
function EditorBlockWrapper({ children }) {
|
|
4667
5371
|
const selectedBlockId = useSelectedBlockId();
|
|
4668
|
-
const [mouseInside, setMouseInside] =
|
|
5372
|
+
const [mouseInside, setMouseInside] = React60.useState(false);
|
|
4669
5373
|
const blockId = useCurrentBlockId();
|
|
4670
5374
|
let outline;
|
|
4671
5375
|
if (selectedBlockId === blockId) {
|
|
@@ -4677,9 +5381,9 @@ function EditorBlockWrapper({ children }) {
|
|
|
4677
5381
|
if (selectedBlockId !== blockId) {
|
|
4678
5382
|
return null;
|
|
4679
5383
|
}
|
|
4680
|
-
return /* @__PURE__ */
|
|
5384
|
+
return /* @__PURE__ */ React60__default.default.createElement(TuneMenu, { blockId });
|
|
4681
5385
|
};
|
|
4682
|
-
return /* @__PURE__ */
|
|
5386
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4683
5387
|
material.Box,
|
|
4684
5388
|
{
|
|
4685
5389
|
sx: {
|
|
@@ -4765,8 +5469,8 @@ function ButtonEditor({ style, props }) {
|
|
|
4765
5469
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
4766
5470
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
4767
5471
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
4768
|
-
const [localText, setLocalText] =
|
|
4769
|
-
|
|
5472
|
+
const [localText, setLocalText] = React60.useState(text);
|
|
5473
|
+
React60.useEffect(() => {
|
|
4770
5474
|
setLocalText(text);
|
|
4771
5475
|
}, [text]);
|
|
4772
5476
|
const padding = getButtonSizePadding2(props);
|
|
@@ -4809,7 +5513,7 @@ function ButtonEditor({ style, props }) {
|
|
|
4809
5513
|
width: fullWidth ? "100%" : void 0,
|
|
4810
5514
|
textAlign: "center"
|
|
4811
5515
|
});
|
|
4812
|
-
return /* @__PURE__ */
|
|
5516
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement(
|
|
4813
5517
|
"input",
|
|
4814
5518
|
{
|
|
4815
5519
|
type: "text",
|
|
@@ -4820,7 +5524,7 @@ function ButtonEditor({ style, props }) {
|
|
|
4820
5524
|
}
|
|
4821
5525
|
));
|
|
4822
5526
|
}
|
|
4823
|
-
return /* @__PURE__ */
|
|
5527
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React60__default.default.createElement("span", null, text)));
|
|
4824
5528
|
}
|
|
4825
5529
|
function getFontFamily9(fontFamily) {
|
|
4826
5530
|
switch (fontFamily) {
|
|
@@ -4891,10 +5595,10 @@ function HeadingEditor({ style, props }) {
|
|
|
4891
5595
|
const isSelected = selectedBlockId === blockId;
|
|
4892
5596
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
4893
5597
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
4894
|
-
const [localText, setLocalText] =
|
|
5598
|
+
const [localText, setLocalText] = React60.useState(textContent);
|
|
4895
5599
|
const rootBlock = document2.root;
|
|
4896
5600
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
4897
|
-
|
|
5601
|
+
React60.useEffect(() => {
|
|
4898
5602
|
setLocalText(textContent);
|
|
4899
5603
|
}, [textContent]);
|
|
4900
5604
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -4943,7 +5647,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4943
5647
|
}
|
|
4944
5648
|
};
|
|
4945
5649
|
if (isSelected) {
|
|
4946
|
-
return /* @__PURE__ */
|
|
5650
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
4947
5651
|
"textarea",
|
|
4948
5652
|
{
|
|
4949
5653
|
value: localText,
|
|
@@ -4958,11 +5662,11 @@ function HeadingEditor({ style, props }) {
|
|
|
4958
5662
|
}
|
|
4959
5663
|
switch (level) {
|
|
4960
5664
|
case "h1":
|
|
4961
|
-
return /* @__PURE__ */
|
|
5665
|
+
return /* @__PURE__ */ React60__default.default.createElement("h1", { style: hStyle }, textContent);
|
|
4962
5666
|
case "h2":
|
|
4963
|
-
return /* @__PURE__ */
|
|
5667
|
+
return /* @__PURE__ */ React60__default.default.createElement("h2", { style: hStyle }, textContent);
|
|
4964
5668
|
case "h3":
|
|
4965
|
-
return /* @__PURE__ */
|
|
5669
|
+
return /* @__PURE__ */ React60__default.default.createElement("h3", { style: hStyle }, textContent);
|
|
4966
5670
|
}
|
|
4967
5671
|
}
|
|
4968
5672
|
function HtmlEditor({ style, props }) {
|
|
@@ -4971,8 +5675,8 @@ function HtmlEditor({ style, props }) {
|
|
|
4971
5675
|
const selectedBlockId = useSelectedBlockId();
|
|
4972
5676
|
const isSelected = selectedBlockId === blockId;
|
|
4973
5677
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
4974
|
-
const [localContents, setLocalContents] =
|
|
4975
|
-
|
|
5678
|
+
const [localContents, setLocalContents] = React60.useState(contents);
|
|
5679
|
+
React60.useEffect(() => {
|
|
4976
5680
|
setLocalContents(contents);
|
|
4977
5681
|
}, [contents]);
|
|
4978
5682
|
const cssStyle = {
|
|
@@ -5017,7 +5721,7 @@ function HtmlEditor({ style, props }) {
|
|
|
5017
5721
|
margin: 0,
|
|
5018
5722
|
backgroundColor: "transparent"
|
|
5019
5723
|
});
|
|
5020
|
-
return /* @__PURE__ */
|
|
5724
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React60__default.default.createElement(
|
|
5021
5725
|
"textarea",
|
|
5022
5726
|
{
|
|
5023
5727
|
value: localContents,
|
|
@@ -5031,9 +5735,9 @@ function HtmlEditor({ style, props }) {
|
|
|
5031
5735
|
));
|
|
5032
5736
|
}
|
|
5033
5737
|
if (!contents) {
|
|
5034
|
-
return /* @__PURE__ */
|
|
5738
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle });
|
|
5035
5739
|
}
|
|
5036
|
-
return /* @__PURE__ */
|
|
5740
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
5037
5741
|
}
|
|
5038
5742
|
function getImageBorderRadius2(shape, size) {
|
|
5039
5743
|
switch (shape) {
|
|
@@ -5066,36 +5770,36 @@ function SignatureEditor({ style, props }) {
|
|
|
5066
5770
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
5067
5771
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
5068
5772
|
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
5069
|
-
const [localGreeting, setLocalGreeting] =
|
|
5070
|
-
const [localName, setLocalName] =
|
|
5071
|
-
const [localTitle, setLocalTitle] =
|
|
5072
|
-
const [localCompany, setLocalCompany] =
|
|
5073
|
-
const [localAddress, setLocalAddress] =
|
|
5074
|
-
const [localEmail, setLocalEmail] =
|
|
5075
|
-
const [localPhone, setLocalPhone] =
|
|
5076
|
-
const [localWebsite, setLocalWebsite] =
|
|
5077
|
-
|
|
5773
|
+
const [localGreeting, setLocalGreeting] = React60.useState(greeting);
|
|
5774
|
+
const [localName, setLocalName] = React60.useState(name);
|
|
5775
|
+
const [localTitle, setLocalTitle] = React60.useState(title);
|
|
5776
|
+
const [localCompany, setLocalCompany] = React60.useState(company);
|
|
5777
|
+
const [localAddress, setLocalAddress] = React60.useState(address);
|
|
5778
|
+
const [localEmail, setLocalEmail] = React60.useState(email);
|
|
5779
|
+
const [localPhone, setLocalPhone] = React60.useState(phone);
|
|
5780
|
+
const [localWebsite, setLocalWebsite] = React60.useState(website);
|
|
5781
|
+
React60.useEffect(() => {
|
|
5078
5782
|
setLocalGreeting(greeting);
|
|
5079
5783
|
}, [greeting]);
|
|
5080
|
-
|
|
5784
|
+
React60.useEffect(() => {
|
|
5081
5785
|
setLocalName(name);
|
|
5082
5786
|
}, [name]);
|
|
5083
|
-
|
|
5787
|
+
React60.useEffect(() => {
|
|
5084
5788
|
setLocalTitle(title);
|
|
5085
5789
|
}, [title]);
|
|
5086
|
-
|
|
5790
|
+
React60.useEffect(() => {
|
|
5087
5791
|
setLocalCompany(company);
|
|
5088
5792
|
}, [company]);
|
|
5089
|
-
|
|
5793
|
+
React60.useEffect(() => {
|
|
5090
5794
|
setLocalAddress(address);
|
|
5091
5795
|
}, [address]);
|
|
5092
|
-
|
|
5796
|
+
React60.useEffect(() => {
|
|
5093
5797
|
setLocalEmail(email);
|
|
5094
5798
|
}, [email]);
|
|
5095
|
-
|
|
5799
|
+
React60.useEffect(() => {
|
|
5096
5800
|
setLocalPhone(phone);
|
|
5097
5801
|
}, [phone]);
|
|
5098
|
-
|
|
5802
|
+
React60.useEffect(() => {
|
|
5099
5803
|
setLocalWebsite(website);
|
|
5100
5804
|
}, [website]);
|
|
5101
5805
|
const updateProps = (updates) => {
|
|
@@ -5148,7 +5852,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5148
5852
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
5149
5853
|
padding: (style == null ? void 0 : style.padding) ? `${style.padding.top}px ${style.padding.right}px ${style.padding.bottom}px ${style.padding.left}px` : void 0
|
|
5150
5854
|
};
|
|
5151
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
5855
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React60__default.default.createElement(
|
|
5152
5856
|
"img",
|
|
5153
5857
|
{
|
|
5154
5858
|
src: imageUrl,
|
|
@@ -5166,7 +5870,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5166
5870
|
}
|
|
5167
5871
|
}
|
|
5168
5872
|
) : null;
|
|
5169
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
5873
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
|
|
5170
5874
|
"input",
|
|
5171
5875
|
{
|
|
5172
5876
|
value: localGreeting,
|
|
@@ -5177,8 +5881,8 @@ function SignatureEditor({ style, props }) {
|
|
|
5177
5881
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
5178
5882
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
5179
5883
|
}
|
|
5180
|
-
)) : greeting ? /* @__PURE__ */
|
|
5181
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
5884
|
+
)) : greeting ? /* @__PURE__ */ React60__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
5885
|
+
const textContent = isSelected ? /* @__PURE__ */ React60__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React60__default.default.createElement(
|
|
5182
5886
|
"input",
|
|
5183
5887
|
{
|
|
5184
5888
|
value: localName,
|
|
@@ -5189,7 +5893,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5189
5893
|
placeholder: "Name",
|
|
5190
5894
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
5191
5895
|
}
|
|
5192
|
-
), /* @__PURE__ */
|
|
5896
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5193
5897
|
"input",
|
|
5194
5898
|
{
|
|
5195
5899
|
value: localTitle,
|
|
@@ -5200,7 +5904,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5200
5904
|
placeholder: "Title",
|
|
5201
5905
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5202
5906
|
}
|
|
5203
|
-
), /* @__PURE__ */
|
|
5907
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5204
5908
|
"input",
|
|
5205
5909
|
{
|
|
5206
5910
|
value: localCompany,
|
|
@@ -5211,7 +5915,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5211
5915
|
placeholder: "Company",
|
|
5212
5916
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5213
5917
|
}
|
|
5214
|
-
), /* @__PURE__ */
|
|
5918
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5215
5919
|
"input",
|
|
5216
5920
|
{
|
|
5217
5921
|
value: localAddress,
|
|
@@ -5222,7 +5926,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5222
5926
|
placeholder: "Address",
|
|
5223
5927
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5224
5928
|
}
|
|
5225
|
-
), /* @__PURE__ */
|
|
5929
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5226
5930
|
"input",
|
|
5227
5931
|
{
|
|
5228
5932
|
value: localEmail,
|
|
@@ -5233,7 +5937,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5233
5937
|
placeholder: "Email",
|
|
5234
5938
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
5235
5939
|
}
|
|
5236
|
-
), /* @__PURE__ */
|
|
5940
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5237
5941
|
"input",
|
|
5238
5942
|
{
|
|
5239
5943
|
value: localPhone,
|
|
@@ -5244,7 +5948,7 @@ function SignatureEditor({ style, props }) {
|
|
|
5244
5948
|
placeholder: "Phone",
|
|
5245
5949
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
5246
5950
|
}
|
|
5247
|
-
), /* @__PURE__ */
|
|
5951
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5248
5952
|
"input",
|
|
5249
5953
|
{
|
|
5250
5954
|
value: localWebsite,
|
|
@@ -5255,11 +5959,11 @@ function SignatureEditor({ style, props }) {
|
|
|
5255
5959
|
placeholder: "Website",
|
|
5256
5960
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
5257
5961
|
}
|
|
5258
|
-
)) : /* @__PURE__ */
|
|
5962
|
+
)) : /* @__PURE__ */ React60__default.default.createElement("div", null, name && /* @__PURE__ */ React60__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React60__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React60__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React60__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React60__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
5259
5963
|
if (layout === "vertical") {
|
|
5260
|
-
return /* @__PURE__ */
|
|
5964
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React60__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
5261
5965
|
}
|
|
5262
|
-
return /* @__PURE__ */
|
|
5966
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React60__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React60__default.default.createElement("tbody", null, /* @__PURE__ */ React60__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React60__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
5263
5967
|
}
|
|
5264
5968
|
function getFontFamily10(fontFamily) {
|
|
5265
5969
|
switch (fontFamily) {
|
|
@@ -5319,11 +6023,11 @@ function TextEditor({ style, props }) {
|
|
|
5319
6023
|
const document2 = useDocument();
|
|
5320
6024
|
const isSelected = selectedBlockId === blockId;
|
|
5321
6025
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
5322
|
-
const [localText, setLocalText] =
|
|
6026
|
+
const [localText, setLocalText] = React60.useState(textContent);
|
|
5323
6027
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
5324
6028
|
const rootBlock = document2.root;
|
|
5325
6029
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
5326
|
-
|
|
6030
|
+
React60.useEffect(() => {
|
|
5327
6031
|
setLocalText(textContent);
|
|
5328
6032
|
}, [textContent]);
|
|
5329
6033
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -5374,7 +6078,7 @@ function TextEditor({ style, props }) {
|
|
|
5374
6078
|
}
|
|
5375
6079
|
};
|
|
5376
6080
|
if (isSelected) {
|
|
5377
|
-
return /* @__PURE__ */
|
|
6081
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
5378
6082
|
"textarea",
|
|
5379
6083
|
{
|
|
5380
6084
|
value: localText,
|
|
@@ -5388,36 +6092,36 @@ function TextEditor({ style, props }) {
|
|
|
5388
6092
|
);
|
|
5389
6093
|
}
|
|
5390
6094
|
if (isMarkdown) {
|
|
5391
|
-
return /* @__PURE__ */
|
|
6095
|
+
return /* @__PURE__ */ React60__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
|
|
5392
6096
|
}
|
|
5393
|
-
return /* @__PURE__ */
|
|
6097
|
+
return /* @__PURE__ */ React60__default.default.createElement("div", { style: wStyle }, textContent);
|
|
5394
6098
|
}
|
|
5395
6099
|
|
|
5396
6100
|
// src/editor/core.tsx
|
|
5397
6101
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
5398
6102
|
Avatar: {
|
|
5399
6103
|
schema: AvatarPropsSchema,
|
|
5400
|
-
Component: (props) => /* @__PURE__ */
|
|
6104
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
5401
6105
|
},
|
|
5402
6106
|
Button: {
|
|
5403
6107
|
schema: ButtonPropsSchema,
|
|
5404
|
-
Component: (props) => /* @__PURE__ */
|
|
6108
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
5405
6109
|
},
|
|
5406
6110
|
Container: {
|
|
5407
6111
|
schema: container_props_schema_default,
|
|
5408
|
-
Component: (props) => /* @__PURE__ */
|
|
6112
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
5409
6113
|
},
|
|
5410
6114
|
ColumnsContainer: {
|
|
5411
6115
|
schema: columns_container_props_schema_default2,
|
|
5412
|
-
Component: (props) => /* @__PURE__ */
|
|
6116
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
5413
6117
|
},
|
|
5414
6118
|
Heading: {
|
|
5415
6119
|
schema: HeadingPropsSchema,
|
|
5416
|
-
Component: (props) => /* @__PURE__ */
|
|
6120
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
5417
6121
|
},
|
|
5418
6122
|
Html: {
|
|
5419
6123
|
schema: HtmlPropsSchema,
|
|
5420
|
-
Component: (props) => /* @__PURE__ */
|
|
6124
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
5421
6125
|
},
|
|
5422
6126
|
Image: {
|
|
5423
6127
|
schema: ImagePropsSchema,
|
|
@@ -5429,28 +6133,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
5429
6133
|
linkHref: null
|
|
5430
6134
|
})
|
|
5431
6135
|
});
|
|
5432
|
-
return /* @__PURE__ */
|
|
6136
|
+
return /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
5433
6137
|
}
|
|
5434
6138
|
},
|
|
5435
6139
|
Text: {
|
|
5436
6140
|
schema: TextPropsSchema,
|
|
5437
|
-
Component: (props) => /* @__PURE__ */
|
|
6141
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
5438
6142
|
},
|
|
5439
6143
|
EmailLayout: {
|
|
5440
6144
|
schema: email_layout_props_schema_default,
|
|
5441
|
-
Component: (p) => /* @__PURE__ */
|
|
6145
|
+
Component: (p) => /* @__PURE__ */ React60__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
5442
6146
|
},
|
|
5443
6147
|
Spacer: {
|
|
5444
6148
|
schema: SpacerPropsSchema,
|
|
5445
|
-
Component: (props) => /* @__PURE__ */
|
|
6149
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
5446
6150
|
},
|
|
5447
6151
|
Divider: {
|
|
5448
6152
|
schema: DividerPropsSchema,
|
|
5449
|
-
Component: (props) => /* @__PURE__ */
|
|
6153
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
5450
6154
|
},
|
|
5451
6155
|
Signature: {
|
|
5452
6156
|
schema: SignaturePropsSchema,
|
|
5453
|
-
Component: (props) => /* @__PURE__ */
|
|
6157
|
+
Component: (props) => /* @__PURE__ */ React60__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React60__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
5454
6158
|
}
|
|
5455
6159
|
});
|
|
5456
6160
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -5458,15 +6162,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
5458
6162
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
5459
6163
|
|
|
5460
6164
|
// src/editor/editor-block.tsx
|
|
5461
|
-
var EditorBlockContext =
|
|
5462
|
-
var useCurrentBlockId = () =>
|
|
6165
|
+
var EditorBlockContext = React60.createContext(null);
|
|
6166
|
+
var useCurrentBlockId = () => React60.useContext(EditorBlockContext);
|
|
5463
6167
|
function EditorBlock({ id }) {
|
|
5464
6168
|
const document2 = useDocument();
|
|
5465
6169
|
const block = document2[id];
|
|
5466
6170
|
if (!block) {
|
|
5467
6171
|
throw new Error("Could not find block");
|
|
5468
6172
|
}
|
|
5469
|
-
return /* @__PURE__ */
|
|
6173
|
+
return /* @__PURE__ */ React60__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
5470
6174
|
}
|
|
5471
6175
|
function ToggleInspectorPanelButton() {
|
|
5472
6176
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -5474,20 +6178,20 @@ function ToggleInspectorPanelButton() {
|
|
|
5474
6178
|
toggleInspectorDrawerOpen();
|
|
5475
6179
|
};
|
|
5476
6180
|
if (inspectorDrawerOpen) {
|
|
5477
|
-
return /* @__PURE__ */
|
|
6181
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
5478
6182
|
}
|
|
5479
|
-
return /* @__PURE__ */
|
|
6183
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
5480
6184
|
}
|
|
5481
6185
|
function useIcon() {
|
|
5482
6186
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5483
6187
|
if (samplesDrawerOpen) {
|
|
5484
|
-
return /* @__PURE__ */
|
|
6188
|
+
return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
5485
6189
|
}
|
|
5486
|
-
return /* @__PURE__ */
|
|
6190
|
+
return /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
5487
6191
|
}
|
|
5488
6192
|
function ToggleSamplesPanelButton() {
|
|
5489
6193
|
const icon = useIcon();
|
|
5490
|
-
return /* @__PURE__ */
|
|
6194
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
5491
6195
|
}
|
|
5492
6196
|
function formatHtml(html2, spaces = 2) {
|
|
5493
6197
|
try {
|
|
@@ -5535,8 +6239,8 @@ function json(value) {
|
|
|
5535
6239
|
|
|
5536
6240
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
5537
6241
|
function HighlightedCodePanel({ type, value }) {
|
|
5538
|
-
const [code, setCode] =
|
|
5539
|
-
|
|
6242
|
+
const [code, setCode] = React60.useState(null);
|
|
6243
|
+
React60.useEffect(() => {
|
|
5540
6244
|
switch (type) {
|
|
5541
6245
|
case "html":
|
|
5542
6246
|
html(value).then(setCode);
|
|
@@ -5549,7 +6253,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
5549
6253
|
if (code === null) {
|
|
5550
6254
|
return null;
|
|
5551
6255
|
}
|
|
5552
|
-
return /* @__PURE__ */
|
|
6256
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
5553
6257
|
"pre",
|
|
5554
6258
|
{
|
|
5555
6259
|
style: {
|
|
@@ -5574,18 +6278,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
5574
6278
|
// src/app/email-canvas/html-panel.tsx
|
|
5575
6279
|
function HtmlPanel() {
|
|
5576
6280
|
const document2 = useDocument();
|
|
5577
|
-
const code =
|
|
5578
|
-
return /* @__PURE__ */
|
|
6281
|
+
const code = React60.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
6282
|
+
return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
5579
6283
|
}
|
|
5580
6284
|
function JsonPanel() {
|
|
5581
6285
|
const document2 = useDocument();
|
|
5582
|
-
const code =
|
|
5583
|
-
return /* @__PURE__ */
|
|
6286
|
+
const code = React60.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
6287
|
+
return /* @__PURE__ */ React60__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
5584
6288
|
}
|
|
5585
6289
|
function TextPanel() {
|
|
5586
6290
|
const document2 = useDocument();
|
|
5587
|
-
const text =
|
|
5588
|
-
return /* @__PURE__ */
|
|
6291
|
+
const text = React60.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
6292
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
5589
6293
|
"pre",
|
|
5590
6294
|
{
|
|
5591
6295
|
style: {
|
|
@@ -5621,185 +6325,47 @@ function MainTabsGroup() {
|
|
|
5621
6325
|
setSelectedMainTab("editor");
|
|
5622
6326
|
}
|
|
5623
6327
|
};
|
|
5624
|
-
return /* @__PURE__ */
|
|
6328
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React60__default.default.createElement(
|
|
5625
6329
|
material.Tab,
|
|
5626
6330
|
{
|
|
5627
6331
|
value: "editor",
|
|
5628
|
-
label: /* @__PURE__ */
|
|
6332
|
+
label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
5629
6333
|
}
|
|
5630
|
-
), /* @__PURE__ */
|
|
6334
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5631
6335
|
material.Tab,
|
|
5632
6336
|
{
|
|
5633
6337
|
value: "preview",
|
|
5634
|
-
label: /* @__PURE__ */
|
|
6338
|
+
label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
5635
6339
|
}
|
|
5636
|
-
), /* @__PURE__ */
|
|
6340
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5637
6341
|
material.Tab,
|
|
5638
6342
|
{
|
|
5639
6343
|
value: "html",
|
|
5640
|
-
label: /* @__PURE__ */
|
|
6344
|
+
label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
5641
6345
|
}
|
|
5642
|
-
), /* @__PURE__ */
|
|
6346
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5643
6347
|
material.Tab,
|
|
5644
6348
|
{
|
|
5645
6349
|
value: "text",
|
|
5646
|
-
label: /* @__PURE__ */
|
|
6350
|
+
label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
5647
6351
|
}
|
|
5648
|
-
), /* @__PURE__ */
|
|
6352
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5649
6353
|
material.Tab,
|
|
5650
6354
|
{
|
|
5651
6355
|
value: "json",
|
|
5652
|
-
label: /* @__PURE__ */
|
|
6356
|
+
label: /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
5653
6357
|
}
|
|
5654
6358
|
));
|
|
5655
6359
|
}
|
|
5656
|
-
var SnackbarContext = React72.createContext(null);
|
|
5657
|
-
function useSnackbar() {
|
|
5658
|
-
const context = React72.useContext(SnackbarContext);
|
|
5659
|
-
if (!context) {
|
|
5660
|
-
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
5661
|
-
}
|
|
5662
|
-
return context;
|
|
5663
|
-
}
|
|
5664
|
-
function SnackbarProvider({ children }) {
|
|
5665
|
-
const [message, setMessage] = React72.useState(null);
|
|
5666
|
-
const [duration, setDuration] = React72.useState(3e3);
|
|
5667
|
-
const showMessage = (text, customDuration = 3e3) => {
|
|
5668
|
-
setMessage(text);
|
|
5669
|
-
setDuration(customDuration);
|
|
5670
|
-
};
|
|
5671
|
-
const handleClose = () => {
|
|
5672
|
-
setMessage(null);
|
|
5673
|
-
};
|
|
5674
|
-
return /* @__PURE__ */ React72__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72__default.default.createElement(
|
|
5675
|
-
material.Snackbar,
|
|
5676
|
-
{
|
|
5677
|
-
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
5678
|
-
open: message !== null,
|
|
5679
|
-
onClose: handleClose,
|
|
5680
|
-
message,
|
|
5681
|
-
autoHideDuration: duration,
|
|
5682
|
-
sx: {
|
|
5683
|
-
zIndex: 1e4,
|
|
5684
|
-
// Very high z-index
|
|
5685
|
-
position: "fixed"
|
|
5686
|
-
// Make sure it's fixed positioned
|
|
5687
|
-
}
|
|
5688
|
-
}
|
|
5689
|
-
));
|
|
5690
|
-
}
|
|
5691
|
-
function SaveTemplateDialog({
|
|
5692
|
-
open,
|
|
5693
|
-
onClose,
|
|
5694
|
-
onSave,
|
|
5695
|
-
onNameChange,
|
|
5696
|
-
defaultName = "",
|
|
5697
|
-
error: externalError = null
|
|
5698
|
-
}) {
|
|
5699
|
-
const [templateName, setTemplateName] = React72.useState(defaultName);
|
|
5700
|
-
const [internalError, setInternalError] = React72.useState("");
|
|
5701
|
-
const [isSubmitting, setIsSubmitting] = React72.useState(false);
|
|
5702
|
-
React72.useEffect(() => {
|
|
5703
|
-
if (open) {
|
|
5704
|
-
setTemplateName(defaultName);
|
|
5705
|
-
setInternalError("");
|
|
5706
|
-
setIsSubmitting(false);
|
|
5707
|
-
}
|
|
5708
|
-
}, [open, defaultName]);
|
|
5709
|
-
const displayError = externalError || internalError;
|
|
5710
|
-
const handleNameChange = (e) => {
|
|
5711
|
-
setTemplateName(e.target.value);
|
|
5712
|
-
if (e.target.value.trim()) {
|
|
5713
|
-
setInternalError("");
|
|
5714
|
-
}
|
|
5715
|
-
if (onNameChange) {
|
|
5716
|
-
onNameChange();
|
|
5717
|
-
}
|
|
5718
|
-
};
|
|
5719
|
-
const handleSave = () => __async(null, null, function* () {
|
|
5720
|
-
if (!templateName.trim()) {
|
|
5721
|
-
setInternalError("Please enter a template name");
|
|
5722
|
-
return;
|
|
5723
|
-
}
|
|
5724
|
-
setIsSubmitting(true);
|
|
5725
|
-
try {
|
|
5726
|
-
const result = onSave(templateName);
|
|
5727
|
-
if (result instanceof Promise) {
|
|
5728
|
-
const success = yield result;
|
|
5729
|
-
if (success) {
|
|
5730
|
-
setTemplateName("");
|
|
5731
|
-
setInternalError("");
|
|
5732
|
-
onClose();
|
|
5733
|
-
}
|
|
5734
|
-
} else if (result !== false) {
|
|
5735
|
-
setTemplateName("");
|
|
5736
|
-
setInternalError("");
|
|
5737
|
-
onClose();
|
|
5738
|
-
}
|
|
5739
|
-
} catch (error) {
|
|
5740
|
-
console.error("Error saving template:", error);
|
|
5741
|
-
} finally {
|
|
5742
|
-
setIsSubmitting(false);
|
|
5743
|
-
}
|
|
5744
|
-
});
|
|
5745
|
-
const handleCancel = () => {
|
|
5746
|
-
setTemplateName("");
|
|
5747
|
-
setInternalError("");
|
|
5748
|
-
onClose();
|
|
5749
|
-
};
|
|
5750
|
-
return /* @__PURE__ */ React72__default.default.createElement(
|
|
5751
|
-
material.Dialog,
|
|
5752
|
-
{
|
|
5753
|
-
open,
|
|
5754
|
-
onClose: handleCancel,
|
|
5755
|
-
maxWidth: "sm",
|
|
5756
|
-
fullWidth: true
|
|
5757
|
-
},
|
|
5758
|
-
/* @__PURE__ */ React72__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
|
|
5759
|
-
/* @__PURE__ */ React72__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React72__default.default.createElement(
|
|
5760
|
-
material.TextField,
|
|
5761
|
-
{
|
|
5762
|
-
autoFocus: true,
|
|
5763
|
-
margin: "dense",
|
|
5764
|
-
id: "template-name",
|
|
5765
|
-
label: "Template Name",
|
|
5766
|
-
type: "text",
|
|
5767
|
-
fullWidth: true,
|
|
5768
|
-
variant: "outlined",
|
|
5769
|
-
value: templateName,
|
|
5770
|
-
onChange: handleNameChange,
|
|
5771
|
-
error: !!displayError,
|
|
5772
|
-
helperText: displayError,
|
|
5773
|
-
onKeyPress: (e) => {
|
|
5774
|
-
if (e.key === "Enter" && templateName.trim() && !displayError && !isSubmitting) {
|
|
5775
|
-
handleSave();
|
|
5776
|
-
}
|
|
5777
|
-
},
|
|
5778
|
-
disabled: isSubmitting
|
|
5779
|
-
}
|
|
5780
|
-
))),
|
|
5781
|
-
/* @__PURE__ */ React72__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React72__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React72__default.default.createElement(
|
|
5782
|
-
material.Button,
|
|
5783
|
-
{
|
|
5784
|
-
onClick: handleSave,
|
|
5785
|
-
variant: "contained",
|
|
5786
|
-
color: "primary",
|
|
5787
|
-
disabled: !templateName.trim() || !!displayError || isSubmitting
|
|
5788
|
-
},
|
|
5789
|
-
isSubmitting ? "Saving..." : "Save Template"
|
|
5790
|
-
))
|
|
5791
|
-
);
|
|
5792
|
-
}
|
|
5793
|
-
|
|
5794
|
-
// src/app/email-canvas/save-button.tsx
|
|
5795
6360
|
function SaveButton({ loadTemplates, saveAs }) {
|
|
5796
|
-
const { saveTemplate, currentTemplateId, setCurrentTemplate } = useEmailEditor();
|
|
6361
|
+
const { saveTemplate, currentTemplateId, currentTemplateKind, setCurrentTemplate } = useEmailEditor();
|
|
5797
6362
|
const { showMessage } = useSnackbar();
|
|
5798
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
6363
|
+
const [saveDialogOpen, setSaveDialogOpen] = React60.useState(false);
|
|
5799
6364
|
const document2 = useDocument();
|
|
6365
|
+
const isSample = currentTemplateKind === "sample";
|
|
5800
6366
|
const handleSave = () => __async(null, null, function* () {
|
|
5801
6367
|
try {
|
|
5802
|
-
if (!currentTemplateId ||
|
|
6368
|
+
if (!currentTemplateId || isSample) {
|
|
5803
6369
|
setSaveDialogOpen(true);
|
|
5804
6370
|
return;
|
|
5805
6371
|
}
|
|
@@ -5816,8 +6382,8 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
5816
6382
|
const handleSaveAs = (templateName) => __async(null, null, function* () {
|
|
5817
6383
|
try {
|
|
5818
6384
|
if (saveAs) {
|
|
5819
|
-
const { id: templateId,
|
|
5820
|
-
setCurrentTemplate(templateId,
|
|
6385
|
+
const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(document2));
|
|
6386
|
+
setCurrentTemplate(templateId, slug, "template");
|
|
5821
6387
|
if (loadTemplates) {
|
|
5822
6388
|
yield loadTemplates();
|
|
5823
6389
|
}
|
|
@@ -5833,7 +6399,7 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
5833
6399
|
return false;
|
|
5834
6400
|
}
|
|
5835
6401
|
});
|
|
5836
|
-
return /* @__PURE__ */
|
|
6402
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
5837
6403
|
material.IconButton,
|
|
5838
6404
|
{
|
|
5839
6405
|
onClick: handleSave,
|
|
@@ -5844,23 +6410,23 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
5844
6410
|
}
|
|
5845
6411
|
}
|
|
5846
6412
|
},
|
|
5847
|
-
/* @__PURE__ */
|
|
5848
|
-
), /* @__PURE__ */
|
|
6413
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: isSample ? "Save as new template" : "Save template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
|
|
6414
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5849
6415
|
SaveTemplateDialog,
|
|
5850
6416
|
{
|
|
5851
6417
|
open: saveDialogOpen,
|
|
5852
6418
|
onClose: () => setSaveDialogOpen(false),
|
|
5853
6419
|
onSave: handleSaveAs,
|
|
5854
|
-
defaultName:
|
|
6420
|
+
defaultName: isSample ? "New Template" : "New Template"
|
|
5855
6421
|
}
|
|
5856
6422
|
));
|
|
5857
6423
|
}
|
|
5858
6424
|
function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
5859
6425
|
const { setCurrentTemplate, loadTemplate } = useEmailEditor();
|
|
5860
6426
|
const { showMessage } = useSnackbar();
|
|
5861
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
5862
|
-
const [templates, setTemplates] =
|
|
5863
|
-
const [nameError, setNameError] =
|
|
6427
|
+
const [saveDialogOpen, setSaveDialogOpen] = React60.useState(false);
|
|
6428
|
+
const [templates, setTemplates] = React60.useState([]);
|
|
6429
|
+
const [nameError, setNameError] = React60.useState(null);
|
|
5864
6430
|
const fetchTemplates = () => __async(null, null, function* () {
|
|
5865
6431
|
if (loadTemplates) {
|
|
5866
6432
|
try {
|
|
@@ -5880,7 +6446,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
5880
6446
|
});
|
|
5881
6447
|
const validateTemplateName = (name) => {
|
|
5882
6448
|
const nameExists = templates.some(
|
|
5883
|
-
(template) => template.
|
|
6449
|
+
(template) => template.slug.toLowerCase() === name.toLowerCase()
|
|
5884
6450
|
);
|
|
5885
6451
|
if (nameExists) {
|
|
5886
6452
|
setNameError("A template with this name already exists");
|
|
@@ -5898,10 +6464,10 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
5898
6464
|
}
|
|
5899
6465
|
try {
|
|
5900
6466
|
if (saveAs) {
|
|
5901
|
-
const { id: templateId,
|
|
6467
|
+
const { id: templateId, slug } = yield saveAs(templateName, buildSavePayload(empty_email_message_default));
|
|
5902
6468
|
resetDocument(empty_email_message_default);
|
|
5903
|
-
setCurrentTemplate(templateId,
|
|
5904
|
-
loadTemplate(empty_email_message_default, templateId,
|
|
6469
|
+
setCurrentTemplate(templateId, slug, "template");
|
|
6470
|
+
loadTemplate(empty_email_message_default, templateId, slug, "template");
|
|
5905
6471
|
if (loadTemplates) {
|
|
5906
6472
|
yield loadTemplates();
|
|
5907
6473
|
}
|
|
@@ -5915,7 +6481,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
5915
6481
|
}
|
|
5916
6482
|
return false;
|
|
5917
6483
|
});
|
|
5918
|
-
return /* @__PURE__ */
|
|
6484
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
5919
6485
|
material.IconButton,
|
|
5920
6486
|
{
|
|
5921
6487
|
onClick: handleNewTemplate,
|
|
@@ -5926,8 +6492,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
5926
6492
|
}
|
|
5927
6493
|
}
|
|
5928
6494
|
},
|
|
5929
|
-
/* @__PURE__ */
|
|
5930
|
-
), /* @__PURE__ */
|
|
6495
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
|
|
6496
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
5931
6497
|
SaveTemplateDialog,
|
|
5932
6498
|
{
|
|
5933
6499
|
open: saveDialogOpen,
|
|
@@ -5942,6 +6508,48 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
5942
6508
|
}
|
|
5943
6509
|
));
|
|
5944
6510
|
}
|
|
6511
|
+
function SubjectInput() {
|
|
6512
|
+
var _a;
|
|
6513
|
+
const document2 = useDocument();
|
|
6514
|
+
const root = document2.root;
|
|
6515
|
+
if (!root || root.type !== "EmailLayout") return null;
|
|
6516
|
+
const data = root.data;
|
|
6517
|
+
const subject = (_a = data.subject) != null ? _a : "";
|
|
6518
|
+
const handleChange = (value) => {
|
|
6519
|
+
setDocument({
|
|
6520
|
+
root: __spreadProps(__spreadValues({}, root), { data: __spreadProps(__spreadValues({}, data), { subject: value }) })
|
|
6521
|
+
});
|
|
6522
|
+
};
|
|
6523
|
+
return /* @__PURE__ */ React60__default.default.createElement(
|
|
6524
|
+
material.Box,
|
|
6525
|
+
{
|
|
6526
|
+
sx: {
|
|
6527
|
+
px: 3,
|
|
6528
|
+
py: 1.25,
|
|
6529
|
+
borderBottom: 1,
|
|
6530
|
+
borderColor: "divider",
|
|
6531
|
+
backgroundColor: "white",
|
|
6532
|
+
position: "sticky",
|
|
6533
|
+
top: 49,
|
|
6534
|
+
zIndex: "appBar",
|
|
6535
|
+
display: "flex",
|
|
6536
|
+
alignItems: "center",
|
|
6537
|
+
gap: 1.5
|
|
6538
|
+
}
|
|
6539
|
+
},
|
|
6540
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, "Subject"),
|
|
6541
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
6542
|
+
material.InputBase,
|
|
6543
|
+
{
|
|
6544
|
+
fullWidth: true,
|
|
6545
|
+
placeholder: "Email subject \u2014 supports {{variables}}",
|
|
6546
|
+
value: subject,
|
|
6547
|
+
onChange: (e) => handleChange(e.target.value),
|
|
6548
|
+
sx: { fontSize: 14 }
|
|
6549
|
+
}
|
|
6550
|
+
)
|
|
6551
|
+
);
|
|
6552
|
+
}
|
|
5945
6553
|
|
|
5946
6554
|
// src/app/email-canvas/index.tsx
|
|
5947
6555
|
function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
|
|
@@ -5974,19 +6582,19 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
5974
6582
|
const renderMainPanel = () => {
|
|
5975
6583
|
switch (selectedMainTab) {
|
|
5976
6584
|
case "editor":
|
|
5977
|
-
return /* @__PURE__ */
|
|
6585
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(EditorBlock, { id: "root" }));
|
|
5978
6586
|
case "preview":
|
|
5979
|
-
return /* @__PURE__ */
|
|
6587
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React60__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
|
|
5980
6588
|
case "html":
|
|
5981
|
-
return /* @__PURE__ */
|
|
6589
|
+
return /* @__PURE__ */ React60__default.default.createElement(HtmlPanel, null);
|
|
5982
6590
|
case "text":
|
|
5983
|
-
return /* @__PURE__ */
|
|
6591
|
+
return /* @__PURE__ */ React60__default.default.createElement(TextPanel, null);
|
|
5984
6592
|
case "json":
|
|
5985
|
-
return /* @__PURE__ */
|
|
6593
|
+
return /* @__PURE__ */ React60__default.default.createElement(JsonPanel, null);
|
|
5986
6594
|
}
|
|
5987
6595
|
};
|
|
5988
6596
|
const showSaveButtons = persistenceEnabled;
|
|
5989
|
-
return /* @__PURE__ */
|
|
6597
|
+
return /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
5990
6598
|
material.Stack,
|
|
5991
6599
|
{
|
|
5992
6600
|
sx: {
|
|
@@ -6003,10 +6611,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
6003
6611
|
justifyContent: "space-between",
|
|
6004
6612
|
alignItems: "center"
|
|
6005
6613
|
},
|
|
6006
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
6007
|
-
/* @__PURE__ */
|
|
6008
|
-
/* @__PURE__ */
|
|
6009
|
-
), /* @__PURE__ */
|
|
6614
|
+
samplesDrawerEnabled && /* @__PURE__ */ React60__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
6615
|
+
/* @__PURE__ */ React60__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React60__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React60__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React60__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React60__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React60__default.default.createElement(React60__default.default.Fragment, null, /* @__PURE__ */ React60__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React60__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
|
|
6616
|
+
/* @__PURE__ */ React60__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
6617
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React60__default.default.createElement(SubjectInput, null), /* @__PURE__ */ React60__default.default.createElement(material.Box, { sx: {
|
|
6010
6618
|
paddingBottom: "50px",
|
|
6011
6619
|
minWidth: 370
|
|
6012
6620
|
} }, renderMainPanel()));
|
|
@@ -6045,7 +6653,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
6045
6653
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
6046
6654
|
});
|
|
6047
6655
|
}
|
|
6048
|
-
var EmailEditorInternal =
|
|
6656
|
+
var EmailEditorInternal = React60.forwardRef((props, ref) => {
|
|
6049
6657
|
const {
|
|
6050
6658
|
drawerEnterDuration = 225,
|
|
6051
6659
|
drawerExitDuration = 225,
|
|
@@ -6056,6 +6664,8 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6056
6664
|
loadTemplate,
|
|
6057
6665
|
deleteTemplate,
|
|
6058
6666
|
copyTemplate,
|
|
6667
|
+
renameTemplate,
|
|
6668
|
+
setTemplateKind,
|
|
6059
6669
|
saveAs,
|
|
6060
6670
|
onChange
|
|
6061
6671
|
} = props;
|
|
@@ -6065,10 +6675,10 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6065
6675
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
6066
6676
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
6067
6677
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
6068
|
-
const onChangeRef =
|
|
6678
|
+
const onChangeRef = React60.useRef(onChange);
|
|
6069
6679
|
onChangeRef.current = onChange;
|
|
6070
|
-
const prevDocJsonRef =
|
|
6071
|
-
|
|
6680
|
+
const prevDocJsonRef = React60.useRef("");
|
|
6681
|
+
React60.useEffect(() => {
|
|
6072
6682
|
var _a;
|
|
6073
6683
|
const docJson = JSON.stringify(currentDocument);
|
|
6074
6684
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -6076,7 +6686,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6076
6686
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
6077
6687
|
}
|
|
6078
6688
|
}, [currentDocument]);
|
|
6079
|
-
|
|
6689
|
+
React60.useImperativeHandle(ref, () => ({
|
|
6080
6690
|
saveTemplate: () => {
|
|
6081
6691
|
return saveTemplate();
|
|
6082
6692
|
},
|
|
@@ -6088,7 +6698,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6088
6698
|
return getDocument();
|
|
6089
6699
|
}
|
|
6090
6700
|
}));
|
|
6091
|
-
return /* @__PURE__ */
|
|
6701
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React60__default.default.createElement(
|
|
6092
6702
|
InspectorDrawer,
|
|
6093
6703
|
{
|
|
6094
6704
|
enterDuration: drawerEnterDuration,
|
|
@@ -6096,7 +6706,7 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6096
6706
|
deleteTemplate,
|
|
6097
6707
|
copyTemplate
|
|
6098
6708
|
}
|
|
6099
|
-
), /* @__PURE__ */
|
|
6709
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
6100
6710
|
SamplesDrawer,
|
|
6101
6711
|
{
|
|
6102
6712
|
enterDuration: drawerEnterDuration,
|
|
@@ -6106,9 +6716,13 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6106
6716
|
loadTemplates,
|
|
6107
6717
|
loadTemplate,
|
|
6108
6718
|
currentTemplateId,
|
|
6109
|
-
deleteTemplate
|
|
6719
|
+
deleteTemplate,
|
|
6720
|
+
copyTemplate,
|
|
6721
|
+
renameTemplate,
|
|
6722
|
+
setTemplateKind,
|
|
6723
|
+
saveAs
|
|
6110
6724
|
}
|
|
6111
|
-
), /* @__PURE__ */
|
|
6725
|
+
), /* @__PURE__ */ React60__default.default.createElement(
|
|
6112
6726
|
material.Stack,
|
|
6113
6727
|
{
|
|
6114
6728
|
sx: {
|
|
@@ -6117,10 +6731,10 @@ var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
|
6117
6731
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
6118
6732
|
}
|
|
6119
6733
|
},
|
|
6120
|
-
/* @__PURE__ */
|
|
6734
|
+
/* @__PURE__ */ React60__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
6121
6735
|
));
|
|
6122
6736
|
});
|
|
6123
|
-
var EmailEditor =
|
|
6737
|
+
var EmailEditor = React60.forwardRef((props, ref) => {
|
|
6124
6738
|
const {
|
|
6125
6739
|
initialTemplate: initialTemplateProp,
|
|
6126
6740
|
initialTemplateId,
|
|
@@ -6137,22 +6751,24 @@ var EmailEditor = React72.forwardRef((props, ref) => {
|
|
|
6137
6751
|
loadTemplate,
|
|
6138
6752
|
deleteTemplate,
|
|
6139
6753
|
copyTemplate,
|
|
6754
|
+
renameTemplate,
|
|
6755
|
+
setTemplateKind,
|
|
6140
6756
|
saveAs,
|
|
6141
6757
|
theme
|
|
6142
6758
|
} = props;
|
|
6143
|
-
const resolvedTemplate =
|
|
6759
|
+
const resolvedTemplate = React60.useMemo(
|
|
6144
6760
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
6145
6761
|
[initialTemplateProp]
|
|
6146
6762
|
);
|
|
6147
|
-
const prevTemplateRef =
|
|
6763
|
+
const prevTemplateRef = React60.useRef(void 0);
|
|
6148
6764
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
6149
6765
|
prevTemplateRef.current = resolvedTemplate;
|
|
6150
6766
|
resetDocument(resolvedTemplate);
|
|
6151
6767
|
}
|
|
6152
|
-
|
|
6768
|
+
React60.useEffect(() => {
|
|
6153
6769
|
setPersistenceEnabled(persistenceEnabled);
|
|
6154
6770
|
}, [persistenceEnabled]);
|
|
6155
|
-
return /* @__PURE__ */
|
|
6771
|
+
return /* @__PURE__ */ React60__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React60__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React60__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React60__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React60__default.default.createElement(
|
|
6156
6772
|
EmailEditorProvider,
|
|
6157
6773
|
{
|
|
6158
6774
|
initialTemplate: resolvedTemplate,
|
|
@@ -6161,7 +6777,7 @@ var EmailEditor = React72.forwardRef((props, ref) => {
|
|
|
6161
6777
|
onSave,
|
|
6162
6778
|
onChange
|
|
6163
6779
|
},
|
|
6164
|
-
/* @__PURE__ */
|
|
6780
|
+
/* @__PURE__ */ React60__default.default.createElement(
|
|
6165
6781
|
EmailEditorInternal,
|
|
6166
6782
|
{
|
|
6167
6783
|
ref,
|
|
@@ -6174,6 +6790,8 @@ var EmailEditor = React72.forwardRef((props, ref) => {
|
|
|
6174
6790
|
loadTemplate,
|
|
6175
6791
|
deleteTemplate,
|
|
6176
6792
|
copyTemplate,
|
|
6793
|
+
renameTemplate,
|
|
6794
|
+
setTemplateKind,
|
|
6177
6795
|
saveAs,
|
|
6178
6796
|
onChange
|
|
6179
6797
|
}
|
|
@@ -6232,6 +6850,7 @@ exports.Spacer = spacer_default;
|
|
|
6232
6850
|
exports.SpacerProps = SpacerProps;
|
|
6233
6851
|
exports.SpacerPropsDefaults = SpacerPropsDefaults;
|
|
6234
6852
|
exports.SpacerPropsSchema = SpacerPropsSchema;
|
|
6853
|
+
exports.TemplateVariableSchema = TemplateVariableSchema;
|
|
6235
6854
|
exports.Text = Text;
|
|
6236
6855
|
exports.TextProps = TextProps;
|
|
6237
6856
|
exports.TextPropsDefaults = TextPropsDefaults;
|