@kontakto/email-template-editor 2.11.0 → 2.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +859 -789
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +28 -1
- package/dist/index.d.ts +28 -1
- package/dist/index.js +650 -580
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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 React63 = require('react');
|
|
6
6
|
var zod = require('zod');
|
|
7
7
|
var server = require('react-dom/server');
|
|
8
8
|
var Handlebars = require('handlebars');
|
|
@@ -22,7 +22,7 @@ var htmlfy = require('htmlfy');
|
|
|
22
22
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
23
23
|
|
|
24
24
|
var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
|
|
25
|
-
var
|
|
25
|
+
var React63__default = /*#__PURE__*/_interopDefault(React63);
|
|
26
26
|
var Handlebars__default = /*#__PURE__*/_interopDefault(Handlebars);
|
|
27
27
|
var hljs__default = /*#__PURE__*/_interopDefault(hljs);
|
|
28
28
|
var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
|
|
@@ -163,6 +163,15 @@ ${body}</tbody>
|
|
|
163
163
|
paragraph(text) {
|
|
164
164
|
return `<p style="margin:0 0 1em 0">${text}</p>`;
|
|
165
165
|
}
|
|
166
|
+
list(body, ordered, start) {
|
|
167
|
+
const tag = ordered ? "ol" : "ul";
|
|
168
|
+
const type = ordered ? "list-style-type:decimal" : "list-style-type:disc";
|
|
169
|
+
const startAttr = ordered && start !== 1 ? ` start="${start}"` : "";
|
|
170
|
+
return `<${tag} style="margin:0 0 1em 0;padding-left:1.5em;${type}"${startAttr}>${body}</${tag}>`;
|
|
171
|
+
}
|
|
172
|
+
listitem(text) {
|
|
173
|
+
return `<li style="margin-bottom:0.25em">${text}</li>`;
|
|
174
|
+
}
|
|
166
175
|
};
|
|
167
176
|
function renderMarkdownString(str) {
|
|
168
177
|
const html2 = marked.marked.parse(str, {
|
|
@@ -194,8 +203,8 @@ function renderInlineMarkdownString(str) {
|
|
|
194
203
|
}
|
|
195
204
|
function EmailMarkdown(_a) {
|
|
196
205
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
197
|
-
const data =
|
|
198
|
-
return /* @__PURE__ */
|
|
206
|
+
const data = React63.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
207
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
199
208
|
}
|
|
200
209
|
var FONT_FAMILY_SCHEMA = zod.z.enum([
|
|
201
210
|
"MODERN_SANS",
|
|
@@ -275,9 +284,9 @@ function Text({ style, props }) {
|
|
|
275
284
|
};
|
|
276
285
|
const text = (_g = props == null ? void 0 : props.text) != null ? _g : TextPropsDefaults.text;
|
|
277
286
|
if (props == null ? void 0 : props.markdown) {
|
|
278
|
-
return /* @__PURE__ */
|
|
287
|
+
return /* @__PURE__ */ React63__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
279
288
|
}
|
|
280
|
-
return /* @__PURE__ */
|
|
289
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wStyle }, text);
|
|
281
290
|
}
|
|
282
291
|
var PADDING_SCHEMA2 = zod.z.object({
|
|
283
292
|
top: zod.z.number(),
|
|
@@ -326,7 +335,7 @@ function Avatar({ style, props }) {
|
|
|
326
335
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
327
336
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
328
337
|
};
|
|
329
|
-
return /* @__PURE__ */
|
|
338
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React63__default.default.createElement(
|
|
330
339
|
"img",
|
|
331
340
|
{
|
|
332
341
|
alt,
|
|
@@ -478,14 +487,14 @@ function Button({ style, props }) {
|
|
|
478
487
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
479
488
|
textDecoration: "none"
|
|
480
489
|
};
|
|
481
|
-
return /* @__PURE__ */
|
|
490
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React63__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
482
491
|
"span",
|
|
483
492
|
{
|
|
484
493
|
dangerouslySetInnerHTML: {
|
|
485
494
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
486
495
|
}
|
|
487
496
|
}
|
|
488
|
-
), /* @__PURE__ */
|
|
497
|
+
), /* @__PURE__ */ React63__default.default.createElement("span", null, text), /* @__PURE__ */ React63__default.default.createElement(
|
|
489
498
|
"span",
|
|
490
499
|
{
|
|
491
500
|
dangerouslySetInnerHTML: {
|
|
@@ -534,7 +543,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
534
543
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
535
544
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
536
545
|
};
|
|
537
|
-
return /* @__PURE__ */
|
|
546
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React63__default.default.createElement(
|
|
538
547
|
"table",
|
|
539
548
|
{
|
|
540
549
|
align: "center",
|
|
@@ -543,7 +552,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
543
552
|
border: 0,
|
|
544
553
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
545
554
|
},
|
|
546
|
-
/* @__PURE__ */
|
|
555
|
+
/* @__PURE__ */ React63__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React63__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React63__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React63__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React63__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
547
556
|
));
|
|
548
557
|
}
|
|
549
558
|
function TableCell({ index, props, columns }) {
|
|
@@ -561,7 +570,7 @@ function TableCell({ index, props, columns }) {
|
|
|
561
570
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
562
571
|
};
|
|
563
572
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
564
|
-
return /* @__PURE__ */
|
|
573
|
+
return /* @__PURE__ */ React63__default.default.createElement("td", { style }, children);
|
|
565
574
|
}
|
|
566
575
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
567
576
|
if (index === 0) {
|
|
@@ -620,12 +629,13 @@ function Container({ style, children }) {
|
|
|
620
629
|
backgroundColor: (_a = style == null ? void 0 : style.backgroundColor) != null ? _a : void 0,
|
|
621
630
|
border: getBorder(style),
|
|
622
631
|
borderRadius: (_b = style == null ? void 0 : style.borderRadius) != null ? _b : void 0,
|
|
632
|
+
overflow: (style == null ? void 0 : style.borderRadius) ? "hidden" : void 0,
|
|
623
633
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
624
634
|
};
|
|
625
635
|
if (!children) {
|
|
626
|
-
return /* @__PURE__ */
|
|
636
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wStyle });
|
|
627
637
|
}
|
|
628
|
-
return /* @__PURE__ */
|
|
638
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wStyle }, children);
|
|
629
639
|
}
|
|
630
640
|
var container_default = Container;
|
|
631
641
|
var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -659,7 +669,7 @@ function Divider({ style, props }) {
|
|
|
659
669
|
};
|
|
660
670
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
661
671
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
662
|
-
return /* @__PURE__ */
|
|
672
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: st }, /* @__PURE__ */ React63__default.default.createElement(
|
|
663
673
|
"hr",
|
|
664
674
|
{
|
|
665
675
|
style: {
|
|
@@ -753,15 +763,15 @@ function Heading({ props, style }) {
|
|
|
753
763
|
fontSize: getFontSize(level),
|
|
754
764
|
padding: getPadding7(style == null ? void 0 : style.padding)
|
|
755
765
|
};
|
|
756
|
-
const html2 =
|
|
766
|
+
const html2 = React63.useMemo(() => isMarkdown ? renderInlineMarkdownString(text) : null, [isMarkdown, text]);
|
|
757
767
|
const renderProps = isMarkdown ? { style: hStyle, dangerouslySetInnerHTML: { __html: html2 != null ? html2 : "" } } : { style: hStyle, children: text };
|
|
758
768
|
switch (level) {
|
|
759
769
|
case "h1":
|
|
760
|
-
return /* @__PURE__ */
|
|
770
|
+
return /* @__PURE__ */ React63__default.default.createElement("h1", __spreadValues({}, renderProps));
|
|
761
771
|
case "h2":
|
|
762
|
-
return /* @__PURE__ */
|
|
772
|
+
return /* @__PURE__ */ React63__default.default.createElement("h2", __spreadValues({}, renderProps));
|
|
763
773
|
case "h3":
|
|
764
|
-
return /* @__PURE__ */
|
|
774
|
+
return /* @__PURE__ */ React63__default.default.createElement("h3", __spreadValues({}, renderProps));
|
|
765
775
|
}
|
|
766
776
|
}
|
|
767
777
|
function getFontSize(level) {
|
|
@@ -843,9 +853,9 @@ function Html({ style, props }) {
|
|
|
843
853
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
844
854
|
};
|
|
845
855
|
if (!children) {
|
|
846
|
-
return /* @__PURE__ */
|
|
856
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: cssStyle });
|
|
847
857
|
}
|
|
848
|
-
return /* @__PURE__ */
|
|
858
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
849
859
|
}
|
|
850
860
|
var html_default = Html;
|
|
851
861
|
var PADDING_SCHEMA9 = zod.z.object({
|
|
@@ -881,7 +891,7 @@ function Image({ style, props }) {
|
|
|
881
891
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
882
892
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
883
893
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
884
|
-
const imageElement = /* @__PURE__ */
|
|
894
|
+
const imageElement = /* @__PURE__ */ React63__default.default.createElement(
|
|
885
895
|
"img",
|
|
886
896
|
{
|
|
887
897
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -901,9 +911,9 @@ function Image({ style, props }) {
|
|
|
901
911
|
}
|
|
902
912
|
);
|
|
903
913
|
if (!linkHref) {
|
|
904
|
-
return /* @__PURE__ */
|
|
914
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
905
915
|
}
|
|
906
|
-
return /* @__PURE__ */
|
|
916
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React63__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
907
917
|
}
|
|
908
918
|
var image_default = Image;
|
|
909
919
|
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
@@ -1049,7 +1059,7 @@ function Signature({ style, props }) {
|
|
|
1049
1059
|
color: linkColor,
|
|
1050
1060
|
textDecoration: "none"
|
|
1051
1061
|
};
|
|
1052
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
1062
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React63__default.default.createElement(
|
|
1053
1063
|
"img",
|
|
1054
1064
|
{
|
|
1055
1065
|
src: imageUrl,
|
|
@@ -1068,18 +1078,18 @@ function Signature({ style, props }) {
|
|
|
1068
1078
|
}
|
|
1069
1079
|
) : null;
|
|
1070
1080
|
const contactParts = [];
|
|
1071
|
-
if (email) contactParts.push(/* @__PURE__ */
|
|
1072
|
-
if (phone) contactParts.push(/* @__PURE__ */
|
|
1081
|
+
if (email) contactParts.push(/* @__PURE__ */ React63__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1082
|
+
if (phone) contactParts.push(/* @__PURE__ */ React63__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1073
1083
|
if (website) {
|
|
1074
1084
|
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1075
|
-
contactParts.push(/* @__PURE__ */
|
|
1085
|
+
contactParts.push(/* @__PURE__ */ React63__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1076
1086
|
}
|
|
1077
|
-
const textContent = /* @__PURE__ */
|
|
1078
|
-
const greetingElement = greeting ? /* @__PURE__ */
|
|
1087
|
+
const textContent = /* @__PURE__ */ React63__default.default.createElement("div", null, name && /* @__PURE__ */ React63__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React63__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React63__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1088
|
+
const greetingElement = greeting ? /* @__PURE__ */ React63__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1079
1089
|
if (layout === "vertical") {
|
|
1080
|
-
return /* @__PURE__ */
|
|
1090
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React63__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1081
1091
|
}
|
|
1082
|
-
return /* @__PURE__ */
|
|
1092
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React63__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React63__default.default.createElement("tbody", null, /* @__PURE__ */ React63__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React63__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React63__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1083
1093
|
}
|
|
1084
1094
|
var signature_default = Signature;
|
|
1085
1095
|
var SpacerPropsSchema = zod.z.object({
|
|
@@ -1096,13 +1106,13 @@ function Spacer({ props }) {
|
|
|
1096
1106
|
const style = {
|
|
1097
1107
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
1098
1108
|
};
|
|
1099
|
-
return /* @__PURE__ */
|
|
1109
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style });
|
|
1100
1110
|
}
|
|
1101
1111
|
var spacer_default = Spacer;
|
|
1102
1112
|
function buildBlockComponent(blocks) {
|
|
1103
1113
|
return function BlockComponent({ type, data }) {
|
|
1104
1114
|
const Component = blocks[type].Component;
|
|
1105
|
-
return /* @__PURE__ */
|
|
1115
|
+
return /* @__PURE__ */ React63__default.default.createElement(Component, __spreadValues({}, data));
|
|
1106
1116
|
};
|
|
1107
1117
|
}
|
|
1108
1118
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -1171,9 +1181,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
1171
1181
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
1172
1182
|
let cols = void 0;
|
|
1173
1183
|
if (columns) {
|
|
1174
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1184
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React63__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1175
1185
|
}
|
|
1176
|
-
return /* @__PURE__ */
|
|
1186
|
+
return /* @__PURE__ */ React63__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
1177
1187
|
}
|
|
1178
1188
|
var ContainerPropsSchema2 = zod.z.object({
|
|
1179
1189
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -1184,7 +1194,7 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
1184
1194
|
function ContainerReader({ style, props }) {
|
|
1185
1195
|
var _a;
|
|
1186
1196
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
1187
|
-
return /* @__PURE__ */
|
|
1197
|
+
return /* @__PURE__ */ React63__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React63__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1188
1198
|
}
|
|
1189
1199
|
var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1190
1200
|
var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
@@ -1257,9 +1267,9 @@ function EmailLayoutReader(props) {
|
|
|
1257
1267
|
margin: "0"
|
|
1258
1268
|
};
|
|
1259
1269
|
if (props.backdropDisabled) {
|
|
1260
|
-
return /* @__PURE__ */
|
|
1270
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: baseStyle }, childrenIds.map((childId) => /* @__PURE__ */ React63__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
1261
1271
|
}
|
|
1262
|
-
return /* @__PURE__ */
|
|
1272
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
1263
1273
|
"div",
|
|
1264
1274
|
{
|
|
1265
1275
|
style: __spreadProps(__spreadValues({}, baseStyle), {
|
|
@@ -1269,7 +1279,7 @@ function EmailLayoutReader(props) {
|
|
|
1269
1279
|
width: "100%"
|
|
1270
1280
|
})
|
|
1271
1281
|
},
|
|
1272
|
-
/* @__PURE__ */
|
|
1282
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
1273
1283
|
"table",
|
|
1274
1284
|
{
|
|
1275
1285
|
align: "center",
|
|
@@ -1287,19 +1297,19 @@ function EmailLayoutReader(props) {
|
|
|
1287
1297
|
cellPadding: "0",
|
|
1288
1298
|
border: 0
|
|
1289
1299
|
},
|
|
1290
|
-
/* @__PURE__ */
|
|
1300
|
+
/* @__PURE__ */ React63__default.default.createElement("tbody", null, /* @__PURE__ */ React63__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React63__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React63__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1291
1301
|
)
|
|
1292
1302
|
);
|
|
1293
1303
|
}
|
|
1294
1304
|
|
|
1295
1305
|
// src/email-builder/reader/core.tsx
|
|
1296
|
-
var ReaderContext =
|
|
1306
|
+
var ReaderContext = React63.createContext({});
|
|
1297
1307
|
function useReaderDocument() {
|
|
1298
|
-
return
|
|
1308
|
+
return React63.useContext(ReaderContext);
|
|
1299
1309
|
}
|
|
1300
1310
|
function ReaderBlock({ id }) {
|
|
1301
1311
|
const document2 = useReaderDocument();
|
|
1302
|
-
return document2[id] ? /* @__PURE__ */
|
|
1312
|
+
return document2[id] ? /* @__PURE__ */ React63__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1303
1313
|
}
|
|
1304
1314
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1305
1315
|
ColumnsContainer: {
|
|
@@ -1356,13 +1366,13 @@ var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
|
1356
1366
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1357
1367
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1358
1368
|
function Reader({ document: document2, rootBlockId }) {
|
|
1359
|
-
return /* @__PURE__ */
|
|
1369
|
+
return /* @__PURE__ */ React63__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React63__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1360
1370
|
}
|
|
1361
1371
|
|
|
1362
1372
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1363
1373
|
function renderToStaticMarkup(document2, { rootBlockId, variables }) {
|
|
1364
1374
|
const html2 = "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1365
|
-
/* @__PURE__ */
|
|
1375
|
+
/* @__PURE__ */ React63__default.default.createElement("html", null, /* @__PURE__ */ React63__default.default.createElement("body", null, /* @__PURE__ */ React63__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1366
1376
|
);
|
|
1367
1377
|
if (!variables) return html2;
|
|
1368
1378
|
return evaluateHandlebars(html2, variables);
|
|
@@ -2236,21 +2246,21 @@ function buildSavePayload(doc) {
|
|
|
2236
2246
|
}
|
|
2237
2247
|
|
|
2238
2248
|
// src/app/context.tsx
|
|
2239
|
-
var EmailEditorContext =
|
|
2249
|
+
var EmailEditorContext = React63.createContext(null);
|
|
2240
2250
|
var EmailEditorProvider = ({
|
|
2241
2251
|
children,
|
|
2242
2252
|
initialTemplateId = null,
|
|
2243
2253
|
initialTemplateName = null,
|
|
2244
2254
|
onSave
|
|
2245
2255
|
}) => {
|
|
2246
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
2247
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
2248
|
-
const [currentTemplateKind, setCurrentTemplateKind] =
|
|
2249
|
-
const [currentTemplateTags, setCurrentTemplateTagsState] =
|
|
2250
|
-
const saveListenersRef =
|
|
2251
|
-
const onSaveRef =
|
|
2256
|
+
const [currentTemplateId, setCurrentTemplateId] = React63.useState(initialTemplateId);
|
|
2257
|
+
const [currentTemplateName, setCurrentTemplateName] = React63.useState(initialTemplateName);
|
|
2258
|
+
const [currentTemplateKind, setCurrentTemplateKind] = React63.useState(null);
|
|
2259
|
+
const [currentTemplateTags, setCurrentTemplateTagsState] = React63.useState([]);
|
|
2260
|
+
const saveListenersRef = React63.useRef([]);
|
|
2261
|
+
const onSaveRef = React63.useRef(onSave);
|
|
2252
2262
|
onSaveRef.current = onSave;
|
|
2253
|
-
const saveTemplate =
|
|
2263
|
+
const saveTemplate = React63.useCallback(() => {
|
|
2254
2264
|
const currentDoc = getDocument();
|
|
2255
2265
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
2256
2266
|
if (onSaveRef.current) {
|
|
@@ -2258,7 +2268,7 @@ var EmailEditorProvider = ({
|
|
|
2258
2268
|
}
|
|
2259
2269
|
return currentDoc;
|
|
2260
2270
|
}, []);
|
|
2261
|
-
const loadTemplate =
|
|
2271
|
+
const loadTemplate = React63.useCallback(
|
|
2262
2272
|
(_newTemplate, templateId, templateName, kind, tags) => {
|
|
2263
2273
|
if (templateId !== void 0) setCurrentTemplateId(templateId);
|
|
2264
2274
|
if (templateName !== void 0) setCurrentTemplateName(templateName);
|
|
@@ -2267,7 +2277,7 @@ var EmailEditorProvider = ({
|
|
|
2267
2277
|
},
|
|
2268
2278
|
[]
|
|
2269
2279
|
);
|
|
2270
|
-
const setCurrentTemplate =
|
|
2280
|
+
const setCurrentTemplate = React63.useCallback(
|
|
2271
2281
|
(templateId, templateName, kind, tags) => {
|
|
2272
2282
|
setCurrentTemplateId(templateId);
|
|
2273
2283
|
setCurrentTemplateName(templateName);
|
|
@@ -2276,16 +2286,16 @@ var EmailEditorProvider = ({
|
|
|
2276
2286
|
},
|
|
2277
2287
|
[]
|
|
2278
2288
|
);
|
|
2279
|
-
const setCurrentTemplateTags =
|
|
2289
|
+
const setCurrentTemplateTags = React63.useCallback((tags) => {
|
|
2280
2290
|
setCurrentTemplateTagsState(tags);
|
|
2281
2291
|
}, []);
|
|
2282
|
-
const registerSaveListener =
|
|
2292
|
+
const registerSaveListener = React63.useCallback((callback) => {
|
|
2283
2293
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
2284
2294
|
return () => {
|
|
2285
2295
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
2286
2296
|
};
|
|
2287
2297
|
}, []);
|
|
2288
|
-
const value =
|
|
2298
|
+
const value = React63.useMemo(
|
|
2289
2299
|
() => ({
|
|
2290
2300
|
currentTemplateId,
|
|
2291
2301
|
currentTemplateName,
|
|
@@ -2309,24 +2319,34 @@ var EmailEditorProvider = ({
|
|
|
2309
2319
|
setCurrentTemplateTags
|
|
2310
2320
|
]
|
|
2311
2321
|
);
|
|
2312
|
-
return /* @__PURE__ */
|
|
2322
|
+
return /* @__PURE__ */ React63__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
2313
2323
|
};
|
|
2314
2324
|
var useEmailEditor = () => {
|
|
2315
|
-
const context =
|
|
2325
|
+
const context = React63.useContext(EmailEditorContext);
|
|
2316
2326
|
if (!context) {
|
|
2317
2327
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
2318
2328
|
}
|
|
2319
2329
|
return context;
|
|
2320
2330
|
};
|
|
2321
|
-
var
|
|
2331
|
+
var EditorConfigContext = React63.createContext({});
|
|
2332
|
+
function EditorConfigProvider({
|
|
2333
|
+
config,
|
|
2334
|
+
children
|
|
2335
|
+
}) {
|
|
2336
|
+
return /* @__PURE__ */ React63__default.default.createElement(EditorConfigContext.Provider, { value: config }, children);
|
|
2337
|
+
}
|
|
2338
|
+
function useEditorConfig() {
|
|
2339
|
+
return React63.useContext(EditorConfigContext);
|
|
2340
|
+
}
|
|
2341
|
+
var ImageCallbacksContext = React63.createContext({});
|
|
2322
2342
|
function ImageCallbacksProvider({
|
|
2323
2343
|
callbacks,
|
|
2324
2344
|
children
|
|
2325
2345
|
}) {
|
|
2326
|
-
return /* @__PURE__ */
|
|
2346
|
+
return /* @__PURE__ */ React63__default.default.createElement(ImageCallbacksContext.Provider, { value: callbacks }, children);
|
|
2327
2347
|
}
|
|
2328
2348
|
function useImageCallbacks() {
|
|
2329
|
-
return
|
|
2349
|
+
return React63.useContext(ImageCallbacksContext);
|
|
2330
2350
|
}
|
|
2331
2351
|
var TITLE_KEYS = {
|
|
2332
2352
|
"Editor appearance": "panel.editor-appearance",
|
|
@@ -2349,14 +2369,14 @@ var TITLE_KEYS = {
|
|
|
2349
2369
|
function BaseSidebarPanel({ title, children }) {
|
|
2350
2370
|
const key = TITLE_KEYS[title];
|
|
2351
2371
|
const displayTitle = key ? t(key, title) : title;
|
|
2352
|
-
return /* @__PURE__ */
|
|
2372
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, displayTitle), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
2353
2373
|
}
|
|
2354
2374
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
2355
|
-
const [value, setValue] =
|
|
2356
|
-
|
|
2375
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2376
|
+
React63.useEffect(() => {
|
|
2357
2377
|
setValue(defaultValue);
|
|
2358
2378
|
}, [defaultValue]);
|
|
2359
|
-
return /* @__PURE__ */
|
|
2379
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2360
2380
|
material.ToggleButtonGroup,
|
|
2361
2381
|
{
|
|
2362
2382
|
exclusive: true,
|
|
@@ -2376,7 +2396,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
2376
2396
|
}
|
|
2377
2397
|
function RawSliderInput(_a) {
|
|
2378
2398
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
2379
|
-
return /* @__PURE__ */
|
|
2399
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React63__default.default.createElement(
|
|
2380
2400
|
material.Slider,
|
|
2381
2401
|
__spreadProps(__spreadValues({}, props), {
|
|
2382
2402
|
value,
|
|
@@ -2387,14 +2407,14 @@ function RawSliderInput(_a) {
|
|
|
2387
2407
|
setValue(value2);
|
|
2388
2408
|
}
|
|
2389
2409
|
})
|
|
2390
|
-
), /* @__PURE__ */
|
|
2410
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
2391
2411
|
}
|
|
2392
2412
|
|
|
2393
2413
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
2394
2414
|
function SliderInput(_a) {
|
|
2395
2415
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
2396
|
-
const [value, setValue] =
|
|
2397
|
-
return /* @__PURE__ */
|
|
2416
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2417
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2398
2418
|
RawSliderInput,
|
|
2399
2419
|
__spreadValues({
|
|
2400
2420
|
value,
|
|
@@ -2406,12 +2426,12 @@ function SliderInput(_a) {
|
|
|
2406
2426
|
));
|
|
2407
2427
|
}
|
|
2408
2428
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
2409
|
-
const [value, setValue] =
|
|
2429
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2410
2430
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
2411
|
-
|
|
2431
|
+
React63.useEffect(() => {
|
|
2412
2432
|
setValue(defaultValue);
|
|
2413
2433
|
}, [defaultValue]);
|
|
2414
|
-
return /* @__PURE__ */
|
|
2434
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2415
2435
|
material.TextField,
|
|
2416
2436
|
{
|
|
2417
2437
|
fullWidth: true,
|
|
@@ -2437,7 +2457,7 @@ var TILE_BUTTON = {
|
|
|
2437
2457
|
};
|
|
2438
2458
|
function Swatch({ paletteColors, value, onChange }) {
|
|
2439
2459
|
const renderButton2 = (colorValue) => {
|
|
2440
|
-
return /* @__PURE__ */
|
|
2460
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2441
2461
|
material.Button,
|
|
2442
2462
|
{
|
|
2443
2463
|
key: colorValue,
|
|
@@ -2456,7 +2476,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
2456
2476
|
}
|
|
2457
2477
|
);
|
|
2458
2478
|
};
|
|
2459
|
-
return /* @__PURE__ */
|
|
2479
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2460
2480
|
}
|
|
2461
2481
|
|
|
2462
2482
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2523,7 +2543,9 @@ var SX = {
|
|
|
2523
2543
|
}
|
|
2524
2544
|
};
|
|
2525
2545
|
function Picker({ value, onChange }) {
|
|
2526
|
-
|
|
2546
|
+
const { favoriteColors } = useEditorConfig();
|
|
2547
|
+
const hasFavorites = favoriteColors && favoriteColors.length > 0;
|
|
2548
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React63__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), hasFavorites && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(Swatch, { paletteColors: favoriteColors, value, onChange }), /* @__PURE__ */ React63__default.default.createElement(material.Divider, null)), /* @__PURE__ */ React63__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React63__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React63__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2527
2549
|
}
|
|
2528
2550
|
|
|
2529
2551
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2536,8 +2558,8 @@ var BUTTON_SX = {
|
|
|
2536
2558
|
bgcolor: "#FFFFFF"
|
|
2537
2559
|
};
|
|
2538
2560
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
2539
|
-
const [anchorEl, setAnchorEl] =
|
|
2540
|
-
const [value, setValue] =
|
|
2561
|
+
const [anchorEl, setAnchorEl] = React63.useState(null);
|
|
2562
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2541
2563
|
const handleClickOpen = (event) => {
|
|
2542
2564
|
setAnchorEl(event.currentTarget);
|
|
2543
2565
|
};
|
|
@@ -2548,7 +2570,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2548
2570
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2549
2571
|
return null;
|
|
2550
2572
|
}
|
|
2551
|
-
return /* @__PURE__ */
|
|
2573
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2552
2574
|
material.ButtonBase,
|
|
2553
2575
|
{
|
|
2554
2576
|
onClick: () => {
|
|
@@ -2556,16 +2578,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2556
2578
|
onChange(null);
|
|
2557
2579
|
}
|
|
2558
2580
|
},
|
|
2559
|
-
/* @__PURE__ */
|
|
2581
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2560
2582
|
);
|
|
2561
2583
|
};
|
|
2562
2584
|
const renderOpenButton = () => {
|
|
2563
2585
|
if (value) {
|
|
2564
|
-
return /* @__PURE__ */
|
|
2586
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2565
2587
|
}
|
|
2566
|
-
return /* @__PURE__ */
|
|
2588
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
2567
2589
|
};
|
|
2568
|
-
return /* @__PURE__ */
|
|
2590
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React63__default.default.createElement(
|
|
2569
2591
|
material.Menu,
|
|
2570
2592
|
{
|
|
2571
2593
|
anchorEl,
|
|
@@ -2575,7 +2597,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2575
2597
|
sx: { height: "auto", padding: 0 }
|
|
2576
2598
|
}
|
|
2577
2599
|
},
|
|
2578
|
-
/* @__PURE__ */
|
|
2600
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
2579
2601
|
Picker,
|
|
2580
2602
|
{
|
|
2581
2603
|
value: value || "",
|
|
@@ -2590,10 +2612,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2590
2612
|
|
|
2591
2613
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2592
2614
|
function ColorInput2(props) {
|
|
2593
|
-
return /* @__PURE__ */
|
|
2615
|
+
return /* @__PURE__ */ React63__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2594
2616
|
}
|
|
2595
2617
|
function NullableColorInput(props) {
|
|
2596
|
-
return /* @__PURE__ */
|
|
2618
|
+
return /* @__PURE__ */ React63__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2597
2619
|
}
|
|
2598
2620
|
|
|
2599
2621
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2647,11 +2669,11 @@ var FONT_FAMILIES = [
|
|
|
2647
2669
|
|
|
2648
2670
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2649
2671
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2650
|
-
const [value, setValue] =
|
|
2651
|
-
|
|
2672
|
+
const [value, setValue] = React63.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2673
|
+
React63.useEffect(() => {
|
|
2652
2674
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2653
2675
|
}, [defaultValue]);
|
|
2654
|
-
return /* @__PURE__ */
|
|
2676
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2655
2677
|
material.TextField,
|
|
2656
2678
|
{
|
|
2657
2679
|
select: true,
|
|
@@ -2664,23 +2686,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2664
2686
|
onChange(v === null ? null : v);
|
|
2665
2687
|
}
|
|
2666
2688
|
},
|
|
2667
|
-
/* @__PURE__ */
|
|
2668
|
-
FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2689
|
+
/* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { value: "inherit" }, t("font-family.inherit", "Match email settings")),
|
|
2690
|
+
FONT_FAMILIES.map((option) => /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, t(`font-family.${option.key.toLowerCase()}`, option.label)))
|
|
2669
2691
|
);
|
|
2670
2692
|
}
|
|
2671
2693
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2672
|
-
const [value, setValue] =
|
|
2673
|
-
|
|
2694
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2695
|
+
React63.useEffect(() => {
|
|
2674
2696
|
setValue(defaultValue);
|
|
2675
2697
|
}, [defaultValue]);
|
|
2676
2698
|
const handleChange = (value2) => {
|
|
2677
2699
|
setValue(value2);
|
|
2678
2700
|
onChange(value2);
|
|
2679
2701
|
};
|
|
2680
|
-
return /* @__PURE__ */
|
|
2702
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2681
2703
|
RawSliderInput,
|
|
2682
2704
|
{
|
|
2683
|
-
iconLabel: /* @__PURE__ */
|
|
2705
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2684
2706
|
value,
|
|
2685
2707
|
setValue: handleChange,
|
|
2686
2708
|
units: "px",
|
|
@@ -2691,11 +2713,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2691
2713
|
));
|
|
2692
2714
|
}
|
|
2693
2715
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2694
|
-
const [value, setValue] =
|
|
2695
|
-
|
|
2716
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
2717
|
+
React63.useEffect(() => {
|
|
2696
2718
|
setValue(defaultValue);
|
|
2697
2719
|
}, [defaultValue]);
|
|
2698
|
-
return /* @__PURE__ */
|
|
2720
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2699
2721
|
RadioGroupInput,
|
|
2700
2722
|
{
|
|
2701
2723
|
label,
|
|
@@ -2705,23 +2727,23 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2705
2727
|
onChange(fontWeight);
|
|
2706
2728
|
}
|
|
2707
2729
|
},
|
|
2708
|
-
/* @__PURE__ */
|
|
2709
|
-
/* @__PURE__ */
|
|
2730
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "normal" }, t("font-weight.regular", "Regular")),
|
|
2731
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "bold" }, t("font-weight.bold", "Bold"))
|
|
2710
2732
|
);
|
|
2711
2733
|
}
|
|
2712
2734
|
function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
2713
|
-
const [value, setValue] =
|
|
2714
|
-
|
|
2735
|
+
const [value, setValue] = React63.useState(defaultValue != null ? defaultValue : 0);
|
|
2736
|
+
React63.useEffect(() => {
|
|
2715
2737
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2716
2738
|
}, [defaultValue]);
|
|
2717
2739
|
const handleChange = (v) => {
|
|
2718
2740
|
setValue(v);
|
|
2719
2741
|
onChange(v === 0 ? null : v);
|
|
2720
2742
|
};
|
|
2721
|
-
return /* @__PURE__ */
|
|
2743
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2722
2744
|
RawSliderInput,
|
|
2723
2745
|
{
|
|
2724
|
-
iconLabel: /* @__PURE__ */
|
|
2746
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { fontSize: 16 } }),
|
|
2725
2747
|
value,
|
|
2726
2748
|
setValue: handleChange,
|
|
2727
2749
|
units: "px",
|
|
@@ -2732,18 +2754,18 @@ function LetterSpacingInput({ label, defaultValue, onChange }) {
|
|
|
2732
2754
|
));
|
|
2733
2755
|
}
|
|
2734
2756
|
function LineHeightInput({ label, defaultValue, onChange }) {
|
|
2735
|
-
const [value, setValue] =
|
|
2736
|
-
|
|
2757
|
+
const [value, setValue] = React63.useState(defaultValue != null ? defaultValue : 0);
|
|
2758
|
+
React63.useEffect(() => {
|
|
2737
2759
|
setValue(defaultValue != null ? defaultValue : 0);
|
|
2738
2760
|
}, [defaultValue]);
|
|
2739
2761
|
const handleChange = (v) => {
|
|
2740
2762
|
setValue(v);
|
|
2741
2763
|
onChange(v === 0 ? null : v);
|
|
2742
2764
|
};
|
|
2743
|
-
return /* @__PURE__ */
|
|
2765
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2744
2766
|
RawSliderInput,
|
|
2745
2767
|
{
|
|
2746
|
-
iconLabel: /* @__PURE__ */
|
|
2768
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatLineSpacingOutlined, { sx: { fontSize: 16 } }),
|
|
2747
2769
|
value,
|
|
2748
2770
|
setValue: handleChange,
|
|
2749
2771
|
units: "",
|
|
@@ -2754,7 +2776,7 @@ function LineHeightInput({ label, defaultValue, onChange }) {
|
|
|
2754
2776
|
));
|
|
2755
2777
|
}
|
|
2756
2778
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2757
|
-
const [value, setValue] =
|
|
2779
|
+
const [value, setValue] = React63.useState(() => {
|
|
2758
2780
|
if (defaultValue) {
|
|
2759
2781
|
return defaultValue;
|
|
2760
2782
|
}
|
|
@@ -2772,10 +2794,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2772
2794
|
setValue(v);
|
|
2773
2795
|
onChange(v);
|
|
2774
2796
|
}
|
|
2775
|
-
return /* @__PURE__ */
|
|
2797
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React63__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React63__default.default.createElement(
|
|
2776
2798
|
RawSliderInput,
|
|
2777
2799
|
{
|
|
2778
|
-
iconLabel: /* @__PURE__ */
|
|
2800
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2779
2801
|
value: value.top,
|
|
2780
2802
|
setValue: (num) => handleChange("top", num),
|
|
2781
2803
|
units: "px",
|
|
@@ -2784,10 +2806,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2784
2806
|
max: 80,
|
|
2785
2807
|
marks: true
|
|
2786
2808
|
}
|
|
2787
|
-
), /* @__PURE__ */
|
|
2809
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2788
2810
|
RawSliderInput,
|
|
2789
2811
|
{
|
|
2790
|
-
iconLabel: /* @__PURE__ */
|
|
2812
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2791
2813
|
value: value.bottom,
|
|
2792
2814
|
setValue: (num) => handleChange("bottom", num),
|
|
2793
2815
|
units: "px",
|
|
@@ -2796,10 +2818,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2796
2818
|
max: 80,
|
|
2797
2819
|
marks: true
|
|
2798
2820
|
}
|
|
2799
|
-
), /* @__PURE__ */
|
|
2821
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2800
2822
|
RawSliderInput,
|
|
2801
2823
|
{
|
|
2802
|
-
iconLabel: /* @__PURE__ */
|
|
2824
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2803
2825
|
value: value.left,
|
|
2804
2826
|
setValue: (num) => handleChange("left", num),
|
|
2805
2827
|
units: "px",
|
|
@@ -2808,10 +2830,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2808
2830
|
max: 80,
|
|
2809
2831
|
marks: true
|
|
2810
2832
|
}
|
|
2811
|
-
), /* @__PURE__ */
|
|
2833
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2812
2834
|
RawSliderInput,
|
|
2813
2835
|
{
|
|
2814
|
-
iconLabel: /* @__PURE__ */
|
|
2836
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2815
2837
|
value: value.right,
|
|
2816
2838
|
setValue: (num) => handleChange("right", num),
|
|
2817
2839
|
units: "px",
|
|
@@ -2823,11 +2845,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2823
2845
|
));
|
|
2824
2846
|
}
|
|
2825
2847
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2826
|
-
const [value, setValue] =
|
|
2827
|
-
|
|
2848
|
+
const [value, setValue] = React63.useState(defaultValue != null ? defaultValue : "left");
|
|
2849
|
+
React63.useEffect(() => {
|
|
2828
2850
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2829
2851
|
}, [defaultValue]);
|
|
2830
|
-
return /* @__PURE__ */
|
|
2852
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2831
2853
|
RadioGroupInput,
|
|
2832
2854
|
{
|
|
2833
2855
|
label,
|
|
@@ -2837,9 +2859,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2837
2859
|
onChange(value2);
|
|
2838
2860
|
}
|
|
2839
2861
|
},
|
|
2840
|
-
/* @__PURE__ */
|
|
2841
|
-
/* @__PURE__ */
|
|
2842
|
-
/* @__PURE__ */
|
|
2862
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2863
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2864
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2843
2865
|
);
|
|
2844
2866
|
}
|
|
2845
2867
|
|
|
@@ -2852,14 +2874,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2852
2874
|
};
|
|
2853
2875
|
switch (name) {
|
|
2854
2876
|
case "backgroundColor":
|
|
2855
|
-
return /* @__PURE__ */
|
|
2877
|
+
return /* @__PURE__ */ React63__default.default.createElement(NullableColorInput, { label: t("style.background-color", "Background color"), defaultValue, onChange: handleChange });
|
|
2856
2878
|
case "borderColor":
|
|
2857
|
-
return /* @__PURE__ */
|
|
2879
|
+
return /* @__PURE__ */ React63__default.default.createElement(NullableColorInput, { label: t("style.border-color", "Border color"), defaultValue, onChange: handleChange });
|
|
2858
2880
|
case "borderRadius":
|
|
2859
|
-
return /* @__PURE__ */
|
|
2881
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
2860
2882
|
SliderInput,
|
|
2861
2883
|
{
|
|
2862
|
-
iconLabel: /* @__PURE__ */
|
|
2884
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2863
2885
|
units: "px",
|
|
2864
2886
|
step: 4,
|
|
2865
2887
|
marks: true,
|
|
@@ -2871,33 +2893,33 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2871
2893
|
}
|
|
2872
2894
|
);
|
|
2873
2895
|
case "color":
|
|
2874
|
-
return /* @__PURE__ */
|
|
2896
|
+
return /* @__PURE__ */ React63__default.default.createElement(NullableColorInput, { label: t("style.text-color", "Text color"), defaultValue, onChange: handleChange });
|
|
2875
2897
|
case "fontFamily":
|
|
2876
|
-
return /* @__PURE__ */
|
|
2898
|
+
return /* @__PURE__ */ React63__default.default.createElement(NullableFontFamily, { label: t("style.font-family", "Font family"), defaultValue, onChange: handleChange });
|
|
2877
2899
|
case "fontSize":
|
|
2878
|
-
return /* @__PURE__ */
|
|
2900
|
+
return /* @__PURE__ */ React63__default.default.createElement(FontSizeInput, { label: t("style.font-size", "Font size"), defaultValue, onChange: handleChange });
|
|
2879
2901
|
case "fontWeight":
|
|
2880
|
-
return /* @__PURE__ */
|
|
2902
|
+
return /* @__PURE__ */ React63__default.default.createElement(FontWeightInput, { label: t("style.font-weight", "Font weight"), defaultValue, onChange: handleChange });
|
|
2881
2903
|
case "lineHeight":
|
|
2882
|
-
return /* @__PURE__ */
|
|
2904
|
+
return /* @__PURE__ */ React63__default.default.createElement(LineHeightInput, { label: t("style.line-height", "Line height"), defaultValue, onChange: handleChange });
|
|
2883
2905
|
case "letterSpacing":
|
|
2884
|
-
return /* @__PURE__ */
|
|
2906
|
+
return /* @__PURE__ */ React63__default.default.createElement(LetterSpacingInput, { label: t("style.letter-spacing", "Letter spacing"), defaultValue, onChange: handleChange });
|
|
2885
2907
|
case "textAlign":
|
|
2886
|
-
return /* @__PURE__ */
|
|
2908
|
+
return /* @__PURE__ */ React63__default.default.createElement(TextAlignInput, { label: t("style.alignment", "Alignment"), defaultValue, onChange: handleChange });
|
|
2887
2909
|
case "padding":
|
|
2888
|
-
return /* @__PURE__ */
|
|
2910
|
+
return /* @__PURE__ */ React63__default.default.createElement(PaddingInput, { label: t("style.padding", "Padding"), defaultValue, onChange: handleChange });
|
|
2889
2911
|
}
|
|
2890
2912
|
}
|
|
2891
2913
|
|
|
2892
2914
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2893
2915
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2894
|
-
return /* @__PURE__ */
|
|
2916
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React63__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2895
2917
|
}
|
|
2896
2918
|
|
|
2897
2919
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2898
2920
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2899
2921
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2900
|
-
const [, setErrors] =
|
|
2922
|
+
const [, setErrors] = React63.useState(null);
|
|
2901
2923
|
const updateData = (d) => {
|
|
2902
2924
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2903
2925
|
if (res.success) {
|
|
@@ -2911,11 +2933,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2911
2933
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2912
2934
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2913
2935
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2914
|
-
return /* @__PURE__ */
|
|
2936
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
2915
2937
|
SliderInput,
|
|
2916
2938
|
{
|
|
2917
2939
|
label: t("field.size", "Size"),
|
|
2918
|
-
iconLabel: /* @__PURE__ */
|
|
2940
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2919
2941
|
units: "px",
|
|
2920
2942
|
step: 3,
|
|
2921
2943
|
min: 32,
|
|
@@ -2925,7 +2947,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2925
2947
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2926
2948
|
}
|
|
2927
2949
|
}
|
|
2928
|
-
), /* @__PURE__ */
|
|
2950
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2929
2951
|
RadioGroupInput,
|
|
2930
2952
|
{
|
|
2931
2953
|
label: t("avatar.shape", "Shape"),
|
|
@@ -2934,10 +2956,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2934
2956
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2935
2957
|
}
|
|
2936
2958
|
},
|
|
2937
|
-
/* @__PURE__ */
|
|
2938
|
-
/* @__PURE__ */
|
|
2939
|
-
/* @__PURE__ */
|
|
2940
|
-
), /* @__PURE__ */
|
|
2959
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "circle" }, t("signature.shape.circle", "Circle")),
|
|
2960
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "square" }, t("signature.shape.square", "Square")),
|
|
2961
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("signature.shape.rounded", "Rounded"))
|
|
2962
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2941
2963
|
TextInput,
|
|
2942
2964
|
{
|
|
2943
2965
|
label: t("signature.image-url", "Image URL"),
|
|
@@ -2946,7 +2968,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2946
2968
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2947
2969
|
}
|
|
2948
2970
|
}
|
|
2949
|
-
), /* @__PURE__ */
|
|
2971
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2950
2972
|
TextInput,
|
|
2951
2973
|
{
|
|
2952
2974
|
label: t("image.alt-text", "Alt text"),
|
|
@@ -2955,7 +2977,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2955
2977
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2956
2978
|
}
|
|
2957
2979
|
}
|
|
2958
|
-
), /* @__PURE__ */
|
|
2980
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2959
2981
|
MultiStylePropertyPanel,
|
|
2960
2982
|
{
|
|
2961
2983
|
names: ["textAlign", "padding"],
|
|
@@ -2966,7 +2988,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2966
2988
|
}
|
|
2967
2989
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2968
2990
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2969
|
-
const [, setErrors] =
|
|
2991
|
+
const [, setErrors] = React63.useState(null);
|
|
2970
2992
|
const updateData = (d) => {
|
|
2971
2993
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2972
2994
|
if (res.success) {
|
|
@@ -2983,65 +3005,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2983
3005
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2984
3006
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2985
3007
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2986
|
-
return /* @__PURE__ */
|
|
3008
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
2987
3009
|
TextInput,
|
|
2988
3010
|
{
|
|
2989
3011
|
label: t("field.text", "Text"),
|
|
2990
3012
|
defaultValue: text,
|
|
2991
3013
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2992
3014
|
}
|
|
2993
|
-
), /* @__PURE__ */
|
|
3015
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
2994
3016
|
TextInput,
|
|
2995
3017
|
{
|
|
2996
3018
|
label: t("field.url", "Url"),
|
|
2997
3019
|
defaultValue: url,
|
|
2998
3020
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2999
3021
|
}
|
|
3000
|
-
), /* @__PURE__ */
|
|
3022
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3001
3023
|
RadioGroupInput,
|
|
3002
3024
|
{
|
|
3003
3025
|
label: t("field.width", "Width"),
|
|
3004
3026
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
3005
3027
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
3006
3028
|
},
|
|
3007
|
-
/* @__PURE__ */
|
|
3008
|
-
/* @__PURE__ */
|
|
3009
|
-
), /* @__PURE__ */
|
|
3029
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, t("button.width.full", "Full")),
|
|
3030
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "AUTO" }, t("button.width.auto", "Auto"))
|
|
3031
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3010
3032
|
RadioGroupInput,
|
|
3011
3033
|
{
|
|
3012
3034
|
label: t("field.size", "Size"),
|
|
3013
3035
|
defaultValue: size,
|
|
3014
3036
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
3015
3037
|
},
|
|
3016
|
-
/* @__PURE__ */
|
|
3017
|
-
/* @__PURE__ */
|
|
3018
|
-
/* @__PURE__ */
|
|
3019
|
-
/* @__PURE__ */
|
|
3020
|
-
), /* @__PURE__ */
|
|
3038
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "x-small" }, t("size.xs", "Xs")),
|
|
3039
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "small" }, t("size.sm", "Sm")),
|
|
3040
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "medium" }, t("size.md", "Md")),
|
|
3041
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "large" }, t("size.lg", "Lg"))
|
|
3042
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3021
3043
|
RadioGroupInput,
|
|
3022
3044
|
{
|
|
3023
3045
|
label: t("field.style", "Style"),
|
|
3024
3046
|
defaultValue: buttonStyle,
|
|
3025
3047
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
3026
3048
|
},
|
|
3027
|
-
/* @__PURE__ */
|
|
3028
|
-
/* @__PURE__ */
|
|
3029
|
-
/* @__PURE__ */
|
|
3030
|
-
), /* @__PURE__ */
|
|
3049
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "rectangle" }, t("button.style.rectangle", "Rectangle")),
|
|
3050
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("button.style.rounded", "Rounded")),
|
|
3051
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "pill" }, t("button.style.pill", "Pill"))
|
|
3052
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3031
3053
|
ColorInput2,
|
|
3032
3054
|
{
|
|
3033
3055
|
label: t("style.text-color", "Text color"),
|
|
3034
3056
|
defaultValue: buttonTextColor,
|
|
3035
3057
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
3036
3058
|
}
|
|
3037
|
-
), /* @__PURE__ */
|
|
3059
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3038
3060
|
ColorInput2,
|
|
3039
3061
|
{
|
|
3040
3062
|
label: t("button.color", "Button color"),
|
|
3041
3063
|
defaultValue: buttonBackgroundColor,
|
|
3042
3064
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
3043
3065
|
}
|
|
3044
|
-
), /* @__PURE__ */
|
|
3066
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3045
3067
|
MultiStylePropertyPanel,
|
|
3046
3068
|
{
|
|
3047
3069
|
names: [
|
|
@@ -3076,7 +3098,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3076
3098
|
const value = parseInt(ev.target.value);
|
|
3077
3099
|
onChange(isNaN(value) ? null : value);
|
|
3078
3100
|
};
|
|
3079
|
-
return /* @__PURE__ */
|
|
3101
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
3080
3102
|
material.TextField,
|
|
3081
3103
|
{
|
|
3082
3104
|
fullWidth: true,
|
|
@@ -3087,7 +3109,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3087
3109
|
placeholder: "auto",
|
|
3088
3110
|
size: "small",
|
|
3089
3111
|
InputProps: {
|
|
3090
|
-
endAdornment: /* @__PURE__ */
|
|
3112
|
+
endAdornment: /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
3091
3113
|
}
|
|
3092
3114
|
}
|
|
3093
3115
|
);
|
|
@@ -3095,7 +3117,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
3095
3117
|
|
|
3096
3118
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
3097
3119
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
3098
|
-
const [currentValue, setCurrentValue] =
|
|
3120
|
+
const [currentValue, setCurrentValue] = React63.useState(() => {
|
|
3099
3121
|
if (defaultValue) {
|
|
3100
3122
|
return defaultValue;
|
|
3101
3123
|
}
|
|
@@ -3109,7 +3131,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3109
3131
|
};
|
|
3110
3132
|
let column3 = null;
|
|
3111
3133
|
{
|
|
3112
|
-
column3 = /* @__PURE__ */
|
|
3134
|
+
column3 = /* @__PURE__ */ React63__default.default.createElement(
|
|
3113
3135
|
TextDimensionInput,
|
|
3114
3136
|
{
|
|
3115
3137
|
label: "Column 3",
|
|
@@ -3120,7 +3142,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3120
3142
|
}
|
|
3121
3143
|
);
|
|
3122
3144
|
}
|
|
3123
|
-
return /* @__PURE__ */
|
|
3145
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3124
3146
|
TextDimensionInput,
|
|
3125
3147
|
{
|
|
3126
3148
|
label: "Column 1",
|
|
@@ -3129,7 +3151,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3129
3151
|
setIndexValue(0, v);
|
|
3130
3152
|
}
|
|
3131
3153
|
}
|
|
3132
|
-
), /* @__PURE__ */
|
|
3154
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3133
3155
|
TextDimensionInput,
|
|
3134
3156
|
{
|
|
3135
3157
|
label: "Column 2",
|
|
@@ -3144,7 +3166,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
3144
3166
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
3145
3167
|
function ColumnsContainerPanel({ data, setData }) {
|
|
3146
3168
|
var _a, _b, _c, _d, _e, _f;
|
|
3147
|
-
const [, setErrors] =
|
|
3169
|
+
const [, setErrors] = React63.useState(null);
|
|
3148
3170
|
const updateData = (d) => {
|
|
3149
3171
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
3150
3172
|
if (res.success) {
|
|
@@ -3154,7 +3176,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3154
3176
|
setErrors(res.error);
|
|
3155
3177
|
}
|
|
3156
3178
|
};
|
|
3157
|
-
return /* @__PURE__ */
|
|
3179
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3158
3180
|
RadioGroupInput,
|
|
3159
3181
|
{
|
|
3160
3182
|
label: t("columns.count", "Number of columns"),
|
|
@@ -3163,9 +3185,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3163
3185
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
3164
3186
|
}
|
|
3165
3187
|
},
|
|
3166
|
-
/* @__PURE__ */
|
|
3167
|
-
/* @__PURE__ */
|
|
3168
|
-
), /* @__PURE__ */
|
|
3188
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
3189
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
3190
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3169
3191
|
ColumnWidthsInput,
|
|
3170
3192
|
{
|
|
3171
3193
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -3173,11 +3195,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3173
3195
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
3174
3196
|
}
|
|
3175
3197
|
}
|
|
3176
|
-
), /* @__PURE__ */
|
|
3198
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3177
3199
|
SliderInput,
|
|
3178
3200
|
{
|
|
3179
3201
|
label: t("columns.gap", "Columns gap"),
|
|
3180
|
-
iconLabel: /* @__PURE__ */
|
|
3202
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
3181
3203
|
units: "px",
|
|
3182
3204
|
step: 4,
|
|
3183
3205
|
marks: true,
|
|
@@ -3186,7 +3208,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3186
3208
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
3187
3209
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
3188
3210
|
}
|
|
3189
|
-
), /* @__PURE__ */
|
|
3211
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3190
3212
|
RadioGroupInput,
|
|
3191
3213
|
{
|
|
3192
3214
|
label: t("style.alignment", "Alignment"),
|
|
@@ -3195,10 +3217,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
3195
3217
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
3196
3218
|
}
|
|
3197
3219
|
},
|
|
3198
|
-
/* @__PURE__ */
|
|
3199
|
-
/* @__PURE__ */
|
|
3200
|
-
/* @__PURE__ */
|
|
3201
|
-
), /* @__PURE__ */
|
|
3220
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3221
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3222
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3223
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3202
3224
|
MultiStylePropertyPanel,
|
|
3203
3225
|
{
|
|
3204
3226
|
names: ["backgroundColor", "padding"],
|
|
@@ -3217,7 +3239,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
3217
3239
|
|
|
3218
3240
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
3219
3241
|
function ContainerSidebarPanel({ data, setData }) {
|
|
3220
|
-
const [, setErrors] =
|
|
3242
|
+
const [, setErrors] = React63.useState(null);
|
|
3221
3243
|
const updateData = (d) => {
|
|
3222
3244
|
const res = container_props_schema_default.safeParse(d);
|
|
3223
3245
|
if (res.success) {
|
|
@@ -3227,7 +3249,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3227
3249
|
setErrors(res.error);
|
|
3228
3250
|
}
|
|
3229
3251
|
};
|
|
3230
|
-
return /* @__PURE__ */
|
|
3252
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3231
3253
|
MultiStylePropertyPanel,
|
|
3232
3254
|
{
|
|
3233
3255
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -3238,7 +3260,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
3238
3260
|
}
|
|
3239
3261
|
function DividerSidebarPanel({ data, setData }) {
|
|
3240
3262
|
var _a, _b, _c, _d;
|
|
3241
|
-
const [, setErrors] =
|
|
3263
|
+
const [, setErrors] = React63.useState(null);
|
|
3242
3264
|
const updateData = (d) => {
|
|
3243
3265
|
const res = DividerPropsSchema.safeParse(d);
|
|
3244
3266
|
if (res.success) {
|
|
@@ -3250,18 +3272,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3250
3272
|
};
|
|
3251
3273
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
3252
3274
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
3253
|
-
return /* @__PURE__ */
|
|
3275
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3254
3276
|
ColorInput2,
|
|
3255
3277
|
{
|
|
3256
3278
|
label: t("divider.color", "Color"),
|
|
3257
3279
|
defaultValue: lineColor,
|
|
3258
3280
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
3259
3281
|
}
|
|
3260
|
-
), /* @__PURE__ */
|
|
3282
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3261
3283
|
SliderInput,
|
|
3262
3284
|
{
|
|
3263
3285
|
label: t("field.height", "Height"),
|
|
3264
|
-
iconLabel: /* @__PURE__ */
|
|
3286
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3265
3287
|
units: "px",
|
|
3266
3288
|
step: 1,
|
|
3267
3289
|
min: 1,
|
|
@@ -3269,7 +3291,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
3269
3291
|
defaultValue: lineHeight,
|
|
3270
3292
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
3271
3293
|
}
|
|
3272
|
-
), /* @__PURE__ */
|
|
3294
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3273
3295
|
MultiStylePropertyPanel,
|
|
3274
3296
|
{
|
|
3275
3297
|
names: ["backgroundColor", "padding"],
|
|
@@ -3309,15 +3331,15 @@ var EmailLayoutPropsSchema2 = zod.z.object({
|
|
|
3309
3331
|
});
|
|
3310
3332
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
3311
3333
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
3312
|
-
const [value, setValue] =
|
|
3313
|
-
|
|
3334
|
+
const [value, setValue] = React63.useState(defaultValue);
|
|
3335
|
+
React63.useEffect(() => {
|
|
3314
3336
|
setValue(defaultValue);
|
|
3315
3337
|
}, [defaultValue]);
|
|
3316
|
-
return /* @__PURE__ */
|
|
3338
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
3317
3339
|
material.FormControlLabel,
|
|
3318
3340
|
{
|
|
3319
3341
|
label,
|
|
3320
|
-
control: /* @__PURE__ */
|
|
3342
|
+
control: /* @__PURE__ */ React63__default.default.createElement(
|
|
3321
3343
|
material.Switch,
|
|
3322
3344
|
{
|
|
3323
3345
|
checked: value,
|
|
@@ -3334,7 +3356,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3334
3356
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
3335
3357
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
3336
3358
|
var _a, _b, _c, _d, _e, _f;
|
|
3337
|
-
const [, setErrors] =
|
|
3359
|
+
const [, setErrors] = React63.useState(null);
|
|
3338
3360
|
const updateData = (d) => {
|
|
3339
3361
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
3340
3362
|
if (res.success) {
|
|
@@ -3345,38 +3367,38 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3345
3367
|
}
|
|
3346
3368
|
};
|
|
3347
3369
|
const backdropDisabled = (_a = data.backdropDisabled) != null ? _a : false;
|
|
3348
|
-
return /* @__PURE__ */
|
|
3370
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3349
3371
|
BooleanInput,
|
|
3350
3372
|
{
|
|
3351
3373
|
label: t("global.disable-backdrop", "Disable backdrop"),
|
|
3352
3374
|
defaultValue: backdropDisabled,
|
|
3353
3375
|
onChange: (backdropDisabled2) => updateData(__spreadProps(__spreadValues({}, data), { backdropDisabled: backdropDisabled2 }))
|
|
3354
3376
|
}
|
|
3355
|
-
), !backdropDisabled && /* @__PURE__ */
|
|
3377
|
+
), !backdropDisabled && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
3356
3378
|
ColorInput2,
|
|
3357
3379
|
{
|
|
3358
3380
|
label: t("global.backdrop-color", "Backdrop color"),
|
|
3359
3381
|
defaultValue: (_b = data.backdropColor) != null ? _b : "#F5F5F5",
|
|
3360
3382
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
3361
3383
|
}
|
|
3362
|
-
), /* @__PURE__ */
|
|
3384
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3363
3385
|
ColorInput2,
|
|
3364
3386
|
{
|
|
3365
3387
|
label: t("global.canvas-color", "Canvas color"),
|
|
3366
3388
|
defaultValue: (_c = data.canvasColor) != null ? _c : "#FFFFFF",
|
|
3367
3389
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
3368
3390
|
}
|
|
3369
|
-
), /* @__PURE__ */
|
|
3391
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3370
3392
|
NullableColorInput,
|
|
3371
3393
|
{
|
|
3372
3394
|
label: t("global.canvas-border-color", "Canvas border color"),
|
|
3373
3395
|
defaultValue: (_d = data.borderColor) != null ? _d : null,
|
|
3374
3396
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
3375
3397
|
}
|
|
3376
|
-
), /* @__PURE__ */
|
|
3398
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3377
3399
|
SliderInput,
|
|
3378
3400
|
{
|
|
3379
|
-
iconLabel: /* @__PURE__ */
|
|
3401
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
3380
3402
|
units: "px",
|
|
3381
3403
|
step: 4,
|
|
3382
3404
|
marks: true,
|
|
@@ -3386,14 +3408,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3386
3408
|
defaultValue: (_e = data.borderRadius) != null ? _e : 0,
|
|
3387
3409
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
3388
3410
|
}
|
|
3389
|
-
)), /* @__PURE__ */
|
|
3411
|
+
)), /* @__PURE__ */ React63__default.default.createElement(
|
|
3390
3412
|
NullableFontFamily,
|
|
3391
3413
|
{
|
|
3392
3414
|
label: t("style.font-family", "Font family"),
|
|
3393
3415
|
defaultValue: "MODERN_SANS",
|
|
3394
3416
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
3395
3417
|
}
|
|
3396
|
-
), /* @__PURE__ */
|
|
3418
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3397
3419
|
ColorInput2,
|
|
3398
3420
|
{
|
|
3399
3421
|
label: t("style.text-color", "Text color"),
|
|
@@ -3404,7 +3426,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
3404
3426
|
}
|
|
3405
3427
|
function HeadingSidebarPanel({ data, setData }) {
|
|
3406
3428
|
var _a, _b, _c, _d;
|
|
3407
|
-
const [, setErrors] =
|
|
3429
|
+
const [, setErrors] = React63.useState(null);
|
|
3408
3430
|
const updateData = (d) => {
|
|
3409
3431
|
const res = HeadingPropsSchema.safeParse(d);
|
|
3410
3432
|
if (res.success) {
|
|
@@ -3414,7 +3436,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3414
3436
|
setErrors(res.error);
|
|
3415
3437
|
}
|
|
3416
3438
|
};
|
|
3417
|
-
return /* @__PURE__ */
|
|
3439
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3418
3440
|
TextInput,
|
|
3419
3441
|
{
|
|
3420
3442
|
label: t("field.content", "Content"),
|
|
@@ -3424,7 +3446,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3424
3446
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
3425
3447
|
}
|
|
3426
3448
|
}
|
|
3427
|
-
), /* @__PURE__ */
|
|
3449
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3428
3450
|
RadioGroupInput,
|
|
3429
3451
|
{
|
|
3430
3452
|
label: t("field.level", "Level"),
|
|
@@ -3433,10 +3455,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3433
3455
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
3434
3456
|
}
|
|
3435
3457
|
},
|
|
3436
|
-
/* @__PURE__ */
|
|
3437
|
-
/* @__PURE__ */
|
|
3438
|
-
/* @__PURE__ */
|
|
3439
|
-
), /* @__PURE__ */
|
|
3458
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
3459
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
3460
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
3461
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3440
3462
|
MultiStylePropertyPanel,
|
|
3441
3463
|
{
|
|
3442
3464
|
names: [
|
|
@@ -3456,7 +3478,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
3456
3478
|
}
|
|
3457
3479
|
function HtmlSidebarPanel({ data, setData }) {
|
|
3458
3480
|
var _a, _b;
|
|
3459
|
-
const [, setErrors] =
|
|
3481
|
+
const [, setErrors] = React63.useState(null);
|
|
3460
3482
|
const updateData = (d) => {
|
|
3461
3483
|
const res = HtmlPropsSchema.safeParse(d);
|
|
3462
3484
|
if (res.success) {
|
|
@@ -3466,7 +3488,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3466
3488
|
setErrors(res.error);
|
|
3467
3489
|
}
|
|
3468
3490
|
};
|
|
3469
|
-
return /* @__PURE__ */
|
|
3491
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3470
3492
|
TextInput,
|
|
3471
3493
|
{
|
|
3472
3494
|
label: t("field.content", "Content"),
|
|
@@ -3474,7 +3496,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3474
3496
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
3475
3497
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
3476
3498
|
}
|
|
3477
|
-
), /* @__PURE__ */
|
|
3499
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3478
3500
|
MultiStylePropertyPanel,
|
|
3479
3501
|
{
|
|
3480
3502
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -3485,10 +3507,10 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
3485
3507
|
}
|
|
3486
3508
|
function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
3487
3509
|
const { loadImages, deleteImage } = useImageCallbacks();
|
|
3488
|
-
const [images, setImages] =
|
|
3489
|
-
const [error, setError] =
|
|
3490
|
-
const [query, setQuery] =
|
|
3491
|
-
const [busy, setBusy] =
|
|
3510
|
+
const [images, setImages] = React63.useState(null);
|
|
3511
|
+
const [error, setError] = React63.useState(null);
|
|
3512
|
+
const [query, setQuery] = React63.useState("");
|
|
3513
|
+
const [busy, setBusy] = React63.useState(false);
|
|
3492
3514
|
const refresh = () => __async(null, null, function* () {
|
|
3493
3515
|
if (!loadImages) return;
|
|
3494
3516
|
setBusy(true);
|
|
@@ -3502,13 +3524,13 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3502
3524
|
setBusy(false);
|
|
3503
3525
|
}
|
|
3504
3526
|
});
|
|
3505
|
-
|
|
3527
|
+
React63.useEffect(() => {
|
|
3506
3528
|
if (open) {
|
|
3507
3529
|
setQuery("");
|
|
3508
3530
|
void refresh();
|
|
3509
3531
|
}
|
|
3510
3532
|
}, [open]);
|
|
3511
|
-
const filtered =
|
|
3533
|
+
const filtered = React63.useMemo(() => {
|
|
3512
3534
|
if (!images) return null;
|
|
3513
3535
|
const q = query.trim().toLowerCase();
|
|
3514
3536
|
if (!q) return images;
|
|
@@ -3531,7 +3553,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3531
3553
|
setBusy(false);
|
|
3532
3554
|
}
|
|
3533
3555
|
});
|
|
3534
|
-
return /* @__PURE__ */
|
|
3556
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React63__default.default.createElement(material.DialogTitle, null, "Image library"), /* @__PURE__ */ React63__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3535
3557
|
material.TextField,
|
|
3536
3558
|
{
|
|
3537
3559
|
fullWidth: true,
|
|
@@ -3541,11 +3563,11 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3541
3563
|
onChange: (e) => setQuery(e.target.value),
|
|
3542
3564
|
autoFocus: true,
|
|
3543
3565
|
InputProps: {
|
|
3544
|
-
startAdornment: /* @__PURE__ */
|
|
3566
|
+
startAdornment: /* @__PURE__ */ React63__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
3545
3567
|
},
|
|
3546
3568
|
sx: { mb: 2 }
|
|
3547
3569
|
}
|
|
3548
|
-
), error && /* @__PURE__ */
|
|
3570
|
+
), error && /* @__PURE__ */ React63__default.default.createElement(material.Alert, { severity: "error", sx: { mb: 2 } }, error), busy && !images && /* @__PURE__ */ React63__default.default.createElement(material.Stack, { alignItems: "center", sx: { py: 4 } }, /* @__PURE__ */ React63__default.default.createElement(material.CircularProgress, { size: 28 })), filtered && filtered.length === 0 && /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", textAlign: "center", py: 4 } }, query ? "No images match your search." : "No images in the library yet."), filtered && filtered.length > 0 && /* @__PURE__ */ React63__default.default.createElement(
|
|
3549
3571
|
material.Box,
|
|
3550
3572
|
{
|
|
3551
3573
|
sx: {
|
|
@@ -3554,7 +3576,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3554
3576
|
gap: 1.5
|
|
3555
3577
|
}
|
|
3556
3578
|
},
|
|
3557
|
-
filtered.map((img) => /* @__PURE__ */
|
|
3579
|
+
filtered.map((img) => /* @__PURE__ */ React63__default.default.createElement(
|
|
3558
3580
|
ImageTile,
|
|
3559
3581
|
{
|
|
3560
3582
|
key: img.url,
|
|
@@ -3563,7 +3585,7 @@ function ImageLibraryDialog({ open, onClose, onPick }) {
|
|
|
3563
3585
|
onDelete: deleteImage ? () => handleDelete(img.url) : void 0
|
|
3564
3586
|
}
|
|
3565
3587
|
))
|
|
3566
|
-
)), /* @__PURE__ */
|
|
3588
|
+
)), /* @__PURE__ */ React63__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React63__default.default.createElement(material.Button, { onClick: onClose }, "Close")));
|
|
3567
3589
|
}
|
|
3568
3590
|
function ImageTile({
|
|
3569
3591
|
image,
|
|
@@ -3573,7 +3595,7 @@ function ImageTile({
|
|
|
3573
3595
|
var _a, _b;
|
|
3574
3596
|
const src = (_a = image.thumbnailUrl) != null ? _a : image.url;
|
|
3575
3597
|
const label = image.alt || image.url.split("/").pop() || "image";
|
|
3576
|
-
return /* @__PURE__ */
|
|
3598
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
3577
3599
|
material.Box,
|
|
3578
3600
|
{
|
|
3579
3601
|
sx: {
|
|
@@ -3589,7 +3611,7 @@ function ImageTile({
|
|
|
3589
3611
|
},
|
|
3590
3612
|
onClick: onPick
|
|
3591
3613
|
},
|
|
3592
|
-
/* @__PURE__ */
|
|
3614
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
3593
3615
|
material.Box,
|
|
3594
3616
|
{
|
|
3595
3617
|
component: "img",
|
|
@@ -3598,8 +3620,8 @@ function ImageTile({
|
|
|
3598
3620
|
sx: { display: "block", width: "100%", aspectRatio: "1 / 1", objectFit: "cover", backgroundColor: "#f5f5f5" }
|
|
3599
3621
|
}
|
|
3600
3622
|
),
|
|
3601
|
-
/* @__PURE__ */
|
|
3602
|
-
onDelete && /* @__PURE__ */
|
|
3623
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { p: 0.75, fontSize: 11, color: "text.secondary", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, label),
|
|
3624
|
+
onDelete && /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: "Delete from library" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3603
3625
|
material.IconButton,
|
|
3604
3626
|
{
|
|
3605
3627
|
size: "small",
|
|
@@ -3619,7 +3641,7 @@ function ImageTile({
|
|
|
3619
3641
|
},
|
|
3620
3642
|
"aria-label": "Delete image"
|
|
3621
3643
|
},
|
|
3622
|
-
/* @__PURE__ */
|
|
3644
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
3623
3645
|
))
|
|
3624
3646
|
);
|
|
3625
3647
|
}
|
|
@@ -3631,12 +3653,12 @@ function isHttpUrl(value) {
|
|
|
3631
3653
|
}
|
|
3632
3654
|
function ImageSidebarPanel({ data, setData }) {
|
|
3633
3655
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
3634
|
-
const [, setErrors] =
|
|
3656
|
+
const [, setErrors] = React63.useState(null);
|
|
3635
3657
|
const { uploadImage, loadImages } = useImageCallbacks();
|
|
3636
|
-
const fileInputRef =
|
|
3637
|
-
const [uploading, setUploading] =
|
|
3638
|
-
const [uploadError, setUploadError] =
|
|
3639
|
-
const [libraryOpen, setLibraryOpen] =
|
|
3658
|
+
const fileInputRef = React63.useRef(null);
|
|
3659
|
+
const [uploading, setUploading] = React63.useState(false);
|
|
3660
|
+
const [uploadError, setUploadError] = React63.useState(null);
|
|
3661
|
+
const [libraryOpen, setLibraryOpen] = React63.useState(false);
|
|
3640
3662
|
const updateData = (d) => {
|
|
3641
3663
|
const res = ImagePropsSchema.safeParse(d);
|
|
3642
3664
|
if (res.success) {
|
|
@@ -3672,13 +3694,13 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3672
3694
|
});
|
|
3673
3695
|
const url = (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "";
|
|
3674
3696
|
const showHttpWarning = isHttpUrl(url);
|
|
3675
|
-
return /* @__PURE__ */
|
|
3697
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, (uploadImage || loadImages) && /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, uploadImage && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
3676
3698
|
material.Button,
|
|
3677
3699
|
{
|
|
3678
3700
|
fullWidth: true,
|
|
3679
3701
|
variant: "outlined",
|
|
3680
3702
|
size: "small",
|
|
3681
|
-
startIcon: uploading ? /* @__PURE__ */
|
|
3703
|
+
startIcon: uploading ? /* @__PURE__ */ React63__default.default.createElement(material.CircularProgress, { size: 14 }) : /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CloudUploadOutlined, { fontSize: "small" }),
|
|
3682
3704
|
disabled: uploading,
|
|
3683
3705
|
onClick: () => {
|
|
3684
3706
|
var _a2;
|
|
@@ -3686,7 +3708,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3686
3708
|
}
|
|
3687
3709
|
},
|
|
3688
3710
|
uploading ? t("image.uploading", "Uploading\u2026") : t("image.upload", "Upload")
|
|
3689
|
-
), /* @__PURE__ */
|
|
3711
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3690
3712
|
"input",
|
|
3691
3713
|
{
|
|
3692
3714
|
ref: fileInputRef,
|
|
@@ -3700,17 +3722,17 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3700
3722
|
if (file) yield handleFile(file);
|
|
3701
3723
|
})
|
|
3702
3724
|
}
|
|
3703
|
-
)), loadImages && /* @__PURE__ */
|
|
3725
|
+
)), loadImages && /* @__PURE__ */ React63__default.default.createElement(
|
|
3704
3726
|
material.Button,
|
|
3705
3727
|
{
|
|
3706
3728
|
fullWidth: true,
|
|
3707
3729
|
variant: "outlined",
|
|
3708
3730
|
size: "small",
|
|
3709
|
-
startIcon: /* @__PURE__ */
|
|
3731
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CollectionsOutlined, { fontSize: "small" }),
|
|
3710
3732
|
onClick: () => setLibraryOpen(true)
|
|
3711
3733
|
},
|
|
3712
3734
|
t("image.library", "Library")
|
|
3713
|
-
)), uploadError && /* @__PURE__ */
|
|
3735
|
+
)), uploadError && /* @__PURE__ */ React63__default.default.createElement(material.Alert, { severity: "error", onClose: () => setUploadError(null), sx: { mt: 1 } }, uploadError), /* @__PURE__ */ React63__default.default.createElement(
|
|
3714
3736
|
TextInput,
|
|
3715
3737
|
{
|
|
3716
3738
|
label: t("image.source-url", "Source URL"),
|
|
@@ -3720,14 +3742,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3720
3742
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: next }) }));
|
|
3721
3743
|
}
|
|
3722
3744
|
}
|
|
3723
|
-
), showHttpWarning && /* @__PURE__ */
|
|
3745
|
+
), showHttpWarning && /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { mt: -1, mb: 1, display: "flex", alignItems: "flex-start", gap: 0.75 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ErrorOutlineOutlined, { fontSize: "small", sx: { color: "warning.main", mt: "2px" } }), /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { fontSize: 12, color: "warning.dark" } }, t("image.http-warning", "Non-HTTPS URL: Gmail and other clients strip mixed content. Use https:// for reliable delivery."))), /* @__PURE__ */ React63__default.default.createElement(
|
|
3724
3746
|
TextInput,
|
|
3725
3747
|
{
|
|
3726
3748
|
label: t("image.alt-text", "Alt text"),
|
|
3727
3749
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
3728
3750
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
3729
3751
|
}
|
|
3730
|
-
), /* @__PURE__ */
|
|
3752
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3731
3753
|
TextInput,
|
|
3732
3754
|
{
|
|
3733
3755
|
label: t("image.link-href", "Click through URL"),
|
|
@@ -3737,38 +3759,38 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3737
3759
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
3738
3760
|
}
|
|
3739
3761
|
}
|
|
3740
|
-
), /* @__PURE__ */
|
|
3762
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3741
3763
|
TextDimensionInput,
|
|
3742
3764
|
{
|
|
3743
3765
|
label: t("field.width", "Width"),
|
|
3744
3766
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
3745
3767
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
3746
3768
|
}
|
|
3747
|
-
), /* @__PURE__ */
|
|
3769
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3748
3770
|
TextDimensionInput,
|
|
3749
3771
|
{
|
|
3750
3772
|
label: t("field.height", "Height"),
|
|
3751
3773
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
3752
3774
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
3753
3775
|
}
|
|
3754
|
-
)), /* @__PURE__ */
|
|
3776
|
+
)), /* @__PURE__ */ React63__default.default.createElement(
|
|
3755
3777
|
RadioGroupInput,
|
|
3756
3778
|
{
|
|
3757
3779
|
label: t("style.alignment", "Alignment"),
|
|
3758
3780
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
3759
3781
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
3760
3782
|
},
|
|
3761
|
-
/* @__PURE__ */
|
|
3762
|
-
/* @__PURE__ */
|
|
3763
|
-
/* @__PURE__ */
|
|
3764
|
-
), /* @__PURE__ */
|
|
3783
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3784
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3785
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3786
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3765
3787
|
MultiStylePropertyPanel,
|
|
3766
3788
|
{
|
|
3767
3789
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
3768
3790
|
value: data.style,
|
|
3769
3791
|
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3770
3792
|
}
|
|
3771
|
-
), loadImages && /* @__PURE__ */
|
|
3793
|
+
), loadImages && /* @__PURE__ */ React63__default.default.createElement(
|
|
3772
3794
|
ImageLibraryDialog,
|
|
3773
3795
|
{
|
|
3774
3796
|
open: libraryOpen,
|
|
@@ -3782,7 +3804,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
3782
3804
|
}
|
|
3783
3805
|
function SignatureSidebarPanel({ data, setData }) {
|
|
3784
3806
|
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;
|
|
3785
|
-
const [, setErrors] =
|
|
3807
|
+
const [, setErrors] = React63.useState(null);
|
|
3786
3808
|
const updateData = (d) => {
|
|
3787
3809
|
const res = SignaturePropsSchema.safeParse(d);
|
|
3788
3810
|
if (res.success) {
|
|
@@ -3807,74 +3829,74 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3807
3829
|
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3808
3830
|
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3809
3831
|
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3810
|
-
return /* @__PURE__ */
|
|
3832
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3811
3833
|
TextInput,
|
|
3812
3834
|
{
|
|
3813
3835
|
label: t("signature.greeting", "Greeting"),
|
|
3814
3836
|
defaultValue: greeting,
|
|
3815
3837
|
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3816
3838
|
}
|
|
3817
|
-
), /* @__PURE__ */
|
|
3839
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3818
3840
|
TextInput,
|
|
3819
3841
|
{
|
|
3820
3842
|
label: t("signature.name", "Name"),
|
|
3821
3843
|
defaultValue: name,
|
|
3822
3844
|
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3823
3845
|
}
|
|
3824
|
-
), /* @__PURE__ */
|
|
3846
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3825
3847
|
TextInput,
|
|
3826
3848
|
{
|
|
3827
3849
|
label: t("signature.title", "Title"),
|
|
3828
3850
|
defaultValue: title,
|
|
3829
3851
|
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3830
3852
|
}
|
|
3831
|
-
), /* @__PURE__ */
|
|
3853
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3832
3854
|
TextInput,
|
|
3833
3855
|
{
|
|
3834
3856
|
label: t("signature.company", "Company"),
|
|
3835
3857
|
defaultValue: company,
|
|
3836
3858
|
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3837
3859
|
}
|
|
3838
|
-
), /* @__PURE__ */
|
|
3860
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3839
3861
|
TextInput,
|
|
3840
3862
|
{
|
|
3841
3863
|
label: t("signature.address", "Address"),
|
|
3842
3864
|
defaultValue: address,
|
|
3843
3865
|
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3844
3866
|
}
|
|
3845
|
-
), /* @__PURE__ */
|
|
3867
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3846
3868
|
TextInput,
|
|
3847
3869
|
{
|
|
3848
3870
|
label: t("signature.email", "Email"),
|
|
3849
3871
|
defaultValue: email,
|
|
3850
3872
|
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3851
3873
|
}
|
|
3852
|
-
), /* @__PURE__ */
|
|
3874
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3853
3875
|
TextInput,
|
|
3854
3876
|
{
|
|
3855
3877
|
label: t("signature.phone", "Phone"),
|
|
3856
3878
|
defaultValue: phone,
|
|
3857
3879
|
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3858
3880
|
}
|
|
3859
|
-
), /* @__PURE__ */
|
|
3881
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3860
3882
|
TextInput,
|
|
3861
3883
|
{
|
|
3862
3884
|
label: t("signature.website", "Website"),
|
|
3863
3885
|
defaultValue: website,
|
|
3864
3886
|
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3865
3887
|
}
|
|
3866
|
-
), /* @__PURE__ */
|
|
3888
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3867
3889
|
TextInput,
|
|
3868
3890
|
{
|
|
3869
3891
|
label: t("signature.image-url", "Image URL"),
|
|
3870
3892
|
defaultValue: imageUrl,
|
|
3871
3893
|
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3872
3894
|
}
|
|
3873
|
-
), /* @__PURE__ */
|
|
3895
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3874
3896
|
SliderInput,
|
|
3875
3897
|
{
|
|
3876
3898
|
label: t("signature.image-size", "Image size"),
|
|
3877
|
-
iconLabel: /* @__PURE__ */
|
|
3899
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3878
3900
|
units: "px",
|
|
3879
3901
|
step: 4,
|
|
3880
3902
|
min: 32,
|
|
@@ -3882,47 +3904,47 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3882
3904
|
defaultValue: imageSize,
|
|
3883
3905
|
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3884
3906
|
}
|
|
3885
|
-
), /* @__PURE__ */
|
|
3907
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3886
3908
|
RadioGroupInput,
|
|
3887
3909
|
{
|
|
3888
3910
|
label: t("signature.image-shape", "Image shape"),
|
|
3889
3911
|
defaultValue: imageShape,
|
|
3890
3912
|
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3891
3913
|
},
|
|
3892
|
-
/* @__PURE__ */
|
|
3893
|
-
/* @__PURE__ */
|
|
3894
|
-
/* @__PURE__ */
|
|
3895
|
-
), /* @__PURE__ */
|
|
3914
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "circle" }, t("signature.shape.circle", "Circle")),
|
|
3915
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "square" }, t("signature.shape.square", "Square")),
|
|
3916
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "rounded" }, t("signature.shape.rounded", "Rounded"))
|
|
3917
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3896
3918
|
RadioGroupInput,
|
|
3897
3919
|
{
|
|
3898
3920
|
label: t("signature.layout", "Layout"),
|
|
3899
3921
|
defaultValue: layout,
|
|
3900
3922
|
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3901
3923
|
},
|
|
3902
|
-
/* @__PURE__ */
|
|
3903
|
-
/* @__PURE__ */
|
|
3904
|
-
), /* @__PURE__ */
|
|
3924
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "horizontal" }, t("signature.layout.horizontal", "Horizontal")),
|
|
3925
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "vertical" }, t("signature.layout.vertical", "Vertical"))
|
|
3926
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3905
3927
|
ColorInput2,
|
|
3906
3928
|
{
|
|
3907
3929
|
label: t("signature.name-color", "Name color"),
|
|
3908
3930
|
defaultValue: nameColor,
|
|
3909
3931
|
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3910
3932
|
}
|
|
3911
|
-
), /* @__PURE__ */
|
|
3933
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3912
3934
|
ColorInput2,
|
|
3913
3935
|
{
|
|
3914
3936
|
label: t("style.text-color", "Text color"),
|
|
3915
3937
|
defaultValue: textColor,
|
|
3916
3938
|
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3917
3939
|
}
|
|
3918
|
-
), /* @__PURE__ */
|
|
3940
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3919
3941
|
ColorInput2,
|
|
3920
3942
|
{
|
|
3921
3943
|
label: t("signature.link-color", "Link color"),
|
|
3922
3944
|
defaultValue: linkColor,
|
|
3923
3945
|
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3924
3946
|
}
|
|
3925
|
-
), /* @__PURE__ */
|
|
3947
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3926
3948
|
MultiStylePropertyPanel,
|
|
3927
3949
|
{
|
|
3928
3950
|
names: ["backgroundColor", "fontFamily", "padding"],
|
|
@@ -3933,7 +3955,7 @@ function SignatureSidebarPanel({ data, setData }) {
|
|
|
3933
3955
|
}
|
|
3934
3956
|
function SpacerSidebarPanel({ data, setData }) {
|
|
3935
3957
|
var _a, _b;
|
|
3936
|
-
const [, setErrors] =
|
|
3958
|
+
const [, setErrors] = React63.useState(null);
|
|
3937
3959
|
const updateData = (d) => {
|
|
3938
3960
|
const res = SpacerPropsSchema.safeParse(d);
|
|
3939
3961
|
if (res.success) {
|
|
@@ -3943,11 +3965,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3943
3965
|
setErrors(res.error);
|
|
3944
3966
|
}
|
|
3945
3967
|
};
|
|
3946
|
-
return /* @__PURE__ */
|
|
3968
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3947
3969
|
SliderInput,
|
|
3948
3970
|
{
|
|
3949
3971
|
label: t("field.height", "Height"),
|
|
3950
|
-
iconLabel: /* @__PURE__ */
|
|
3972
|
+
iconLabel: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3951
3973
|
units: "px",
|
|
3952
3974
|
step: 4,
|
|
3953
3975
|
min: 4,
|
|
@@ -3959,7 +3981,7 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3959
3981
|
}
|
|
3960
3982
|
function TextSidebarPanel({ data, setData }) {
|
|
3961
3983
|
var _a, _b, _c, _d;
|
|
3962
|
-
const [, setErrors] =
|
|
3984
|
+
const [, setErrors] = React63.useState(null);
|
|
3963
3985
|
const updateData = (d) => {
|
|
3964
3986
|
const res = TextPropsSchema.safeParse(d);
|
|
3965
3987
|
if (res.success) {
|
|
@@ -3969,7 +3991,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3969
3991
|
setErrors(res.error);
|
|
3970
3992
|
}
|
|
3971
3993
|
};
|
|
3972
|
-
return /* @__PURE__ */
|
|
3994
|
+
return /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
3973
3995
|
TextInput,
|
|
3974
3996
|
{
|
|
3975
3997
|
label: t("field.content", "Content"),
|
|
@@ -3977,14 +3999,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3977
3999
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3978
4000
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3979
4001
|
}
|
|
3980
|
-
), /* @__PURE__ */
|
|
4002
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3981
4003
|
BooleanInput,
|
|
3982
4004
|
{
|
|
3983
4005
|
label: t("field.markdown", "Markdown"),
|
|
3984
4006
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3985
4007
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3986
4008
|
}
|
|
3987
|
-
), /* @__PURE__ */
|
|
4009
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
3988
4010
|
MultiStylePropertyPanel,
|
|
3989
4011
|
{
|
|
3990
4012
|
names: [
|
|
@@ -4006,7 +4028,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
4006
4028
|
|
|
4007
4029
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
4008
4030
|
function renderMessage(val) {
|
|
4009
|
-
return /* @__PURE__ */
|
|
4031
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
4010
4032
|
}
|
|
4011
4033
|
function ConfigurationPanel() {
|
|
4012
4034
|
const document2 = useDocument();
|
|
@@ -4022,55 +4044,55 @@ function ConfigurationPanel() {
|
|
|
4022
4044
|
const { data, type } = block;
|
|
4023
4045
|
switch (type) {
|
|
4024
4046
|
case "Avatar":
|
|
4025
|
-
return /* @__PURE__ */
|
|
4047
|
+
return /* @__PURE__ */ React63__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4026
4048
|
case "Button":
|
|
4027
|
-
return /* @__PURE__ */
|
|
4049
|
+
return /* @__PURE__ */ React63__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4028
4050
|
case "ColumnsContainer":
|
|
4029
|
-
return /* @__PURE__ */
|
|
4051
|
+
return /* @__PURE__ */ React63__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4030
4052
|
case "Container":
|
|
4031
|
-
return /* @__PURE__ */
|
|
4053
|
+
return /* @__PURE__ */ React63__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4032
4054
|
case "Divider":
|
|
4033
|
-
return /* @__PURE__ */
|
|
4055
|
+
return /* @__PURE__ */ React63__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4034
4056
|
case "Heading":
|
|
4035
|
-
return /* @__PURE__ */
|
|
4057
|
+
return /* @__PURE__ */ React63__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4036
4058
|
case "Html":
|
|
4037
|
-
return /* @__PURE__ */
|
|
4059
|
+
return /* @__PURE__ */ React63__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4038
4060
|
case "Image":
|
|
4039
|
-
return /* @__PURE__ */
|
|
4061
|
+
return /* @__PURE__ */ React63__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4040
4062
|
case "EmailLayout":
|
|
4041
|
-
return /* @__PURE__ */
|
|
4063
|
+
return /* @__PURE__ */ React63__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4042
4064
|
case "Spacer":
|
|
4043
|
-
return /* @__PURE__ */
|
|
4065
|
+
return /* @__PURE__ */ React63__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4044
4066
|
case "Signature":
|
|
4045
|
-
return /* @__PURE__ */
|
|
4067
|
+
return /* @__PURE__ */ React63__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4046
4068
|
case "Text":
|
|
4047
|
-
return /* @__PURE__ */
|
|
4069
|
+
return /* @__PURE__ */ React63__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
4048
4070
|
default:
|
|
4049
|
-
return /* @__PURE__ */
|
|
4071
|
+
return /* @__PURE__ */ React63__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
4050
4072
|
}
|
|
4051
4073
|
}
|
|
4052
4074
|
function StylesPanel() {
|
|
4053
4075
|
const block = useDocument().root;
|
|
4054
4076
|
if (!block) {
|
|
4055
|
-
return /* @__PURE__ */
|
|
4077
|
+
return /* @__PURE__ */ React63__default.default.createElement("p", null, "Block not found");
|
|
4056
4078
|
}
|
|
4057
4079
|
const { data, type } = block;
|
|
4058
4080
|
if (type !== "EmailLayout") {
|
|
4059
4081
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
4060
4082
|
}
|
|
4061
|
-
return /* @__PURE__ */
|
|
4083
|
+
return /* @__PURE__ */ React63__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
4062
4084
|
}
|
|
4063
4085
|
function TemplateDownloadButton() {
|
|
4064
4086
|
const doc = useDocument();
|
|
4065
|
-
const href =
|
|
4087
|
+
const href = React63.useMemo(() => {
|
|
4066
4088
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
4067
4089
|
}, [doc]);
|
|
4068
|
-
return /* @__PURE__ */
|
|
4090
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
4069
4091
|
material.Button,
|
|
4070
4092
|
{
|
|
4071
4093
|
variant: "outlined",
|
|
4072
4094
|
color: "primary",
|
|
4073
|
-
startIcon: /* @__PURE__ */
|
|
4095
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
4074
4096
|
href,
|
|
4075
4097
|
download: "emailTemplate.json",
|
|
4076
4098
|
fullWidth: true
|
|
@@ -4112,7 +4134,7 @@ function TemplatePanel({
|
|
|
4112
4134
|
window.alert(t("settings.copied", "Template copied successfully!"));
|
|
4113
4135
|
}
|
|
4114
4136
|
};
|
|
4115
|
-
const workspaceToggle = /* @__PURE__ */
|
|
4137
|
+
const workspaceToggle = /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Editor appearance" }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1 }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary" } }, t("settings.workspace-background", "Workspace background")), /* @__PURE__ */ React63__default.default.createElement(
|
|
4116
4138
|
material.ToggleButtonGroup,
|
|
4117
4139
|
{
|
|
4118
4140
|
value: workspaceBackground,
|
|
@@ -4120,13 +4142,13 @@ function TemplatePanel({
|
|
|
4120
4142
|
size: "small",
|
|
4121
4143
|
onChange: (_, v) => v && setWorkspaceBackground(v)
|
|
4122
4144
|
},
|
|
4123
|
-
/* @__PURE__ */
|
|
4124
|
-
/* @__PURE__ */
|
|
4125
|
-
), /* @__PURE__ */
|
|
4145
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "checkerboard", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.GridOnOutlined, { fontSize: "small" }), t("settings.checkerboard", "Checkerboard")),
|
|
4146
|
+
/* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "solid", sx: { textTransform: "none", gap: 0.75 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SquareOutlined, { fontSize: "small" }), t("settings.solid", "Solid"))
|
|
4147
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled" } }, t("settings.editor-only-hint", "Editor-only \u2014 never reaches the rendered email."))));
|
|
4126
4148
|
if (!currentTemplateId) {
|
|
4127
|
-
return /* @__PURE__ */
|
|
4149
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Template" }, t("settings.no-template", "No template selected")), workspaceToggle);
|
|
4128
4150
|
}
|
|
4129
|
-
return /* @__PURE__ */
|
|
4151
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Details" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4130
4152
|
DetailsEditor,
|
|
4131
4153
|
{
|
|
4132
4154
|
templateId: currentTemplateId,
|
|
@@ -4140,7 +4162,7 @@ function TemplatePanel({
|
|
|
4140
4162
|
setCurrentTemplateTags(tags);
|
|
4141
4163
|
})
|
|
4142
4164
|
}
|
|
4143
|
-
)), /* @__PURE__ */
|
|
4165
|
+
)), /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React63__default.default.createElement(
|
|
4144
4166
|
material.Typography,
|
|
4145
4167
|
{
|
|
4146
4168
|
variant: "body2",
|
|
@@ -4153,40 +4175,40 @@ function TemplatePanel({
|
|
|
4153
4175
|
}
|
|
4154
4176
|
},
|
|
4155
4177
|
t("settings.save-disabled", "Save functionality is disabled. To enable saving, provide the necessary callback functions.")
|
|
4156
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
4178
|
+
), persistenceEnabled && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
4157
4179
|
material.Button,
|
|
4158
4180
|
{
|
|
4159
4181
|
variant: "outlined",
|
|
4160
4182
|
color: "primary",
|
|
4161
|
-
startIcon: /* @__PURE__ */
|
|
4183
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
4162
4184
|
onClick: handleCopyToSamples,
|
|
4163
4185
|
fullWidth: true,
|
|
4164
4186
|
disabled: !copyTemplate
|
|
4165
4187
|
},
|
|
4166
4188
|
t("settings.save-as-sample", "Save as Sample Template")
|
|
4167
|
-
), /* @__PURE__ */
|
|
4189
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
4168
4190
|
material.Button,
|
|
4169
4191
|
{
|
|
4170
4192
|
variant: "outlined",
|
|
4171
4193
|
color: "error",
|
|
4172
|
-
startIcon: /* @__PURE__ */
|
|
4194
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
4173
4195
|
onClick: handleDelete,
|
|
4174
4196
|
fullWidth: true,
|
|
4175
4197
|
disabled: !deleteTemplate
|
|
4176
4198
|
},
|
|
4177
4199
|
t("settings.delete", "Delete Template")
|
|
4178
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
4200
|
+
)))), persistenceEnabled && /* @__PURE__ */ React63__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React63__default.default.createElement(TemplateDownloadButton, null))), workspaceToggle);
|
|
4179
4201
|
}
|
|
4180
4202
|
function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }) {
|
|
4181
|
-
const [name, setName] =
|
|
4182
|
-
const [tags, setTags] =
|
|
4183
|
-
const [tagInput, setTagInput] =
|
|
4184
|
-
const [saving, setSaving] =
|
|
4185
|
-
const [justSaved, setJustSaved] =
|
|
4186
|
-
|
|
4203
|
+
const [name, setName] = React63.useState(currentName);
|
|
4204
|
+
const [tags, setTags] = React63.useState(currentTags);
|
|
4205
|
+
const [tagInput, setTagInput] = React63.useState("");
|
|
4206
|
+
const [saving, setSaving] = React63.useState(false);
|
|
4207
|
+
const [justSaved, setJustSaved] = React63.useState(false);
|
|
4208
|
+
React63.useEffect(() => {
|
|
4187
4209
|
setName(currentName);
|
|
4188
4210
|
}, [templateId, currentName]);
|
|
4189
|
-
|
|
4211
|
+
React63.useEffect(() => {
|
|
4190
4212
|
setTags(currentTags);
|
|
4191
4213
|
}, [templateId, currentTags.join("")]);
|
|
4192
4214
|
const addTag = () => {
|
|
@@ -4212,7 +4234,7 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4212
4234
|
setSaving(false);
|
|
4213
4235
|
}
|
|
4214
4236
|
});
|
|
4215
|
-
return /* @__PURE__ */
|
|
4237
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 1.5 }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4216
4238
|
material.TextField,
|
|
4217
4239
|
{
|
|
4218
4240
|
size: "small",
|
|
@@ -4222,7 +4244,7 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4222
4244
|
disabled: !canEdit || saving,
|
|
4223
4245
|
fullWidth: true
|
|
4224
4246
|
}
|
|
4225
|
-
), /* @__PURE__ */
|
|
4247
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Box, null, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 0.5 } }, t("rename.tags", "Tags")), tags.length > 0 ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React63__default.default.createElement(
|
|
4226
4248
|
material.Chip,
|
|
4227
4249
|
{
|
|
4228
4250
|
key: tag,
|
|
@@ -4230,7 +4252,7 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4230
4252
|
size: "small",
|
|
4231
4253
|
onDelete: canEdit && !saving ? () => removeTag(tag) : void 0
|
|
4232
4254
|
}
|
|
4233
|
-
))) : /* @__PURE__ */
|
|
4255
|
+
))) : /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, t("rename.no-tags", "No tags yet.")), /* @__PURE__ */ React63__default.default.createElement(
|
|
4234
4256
|
material.TextField,
|
|
4235
4257
|
{
|
|
4236
4258
|
size: "small",
|
|
@@ -4249,20 +4271,20 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4249
4271
|
}
|
|
4250
4272
|
},
|
|
4251
4273
|
InputProps: {
|
|
4252
|
-
endAdornment: /* @__PURE__ */
|
|
4274
|
+
endAdornment: /* @__PURE__ */ React63__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4253
4275
|
material.Button,
|
|
4254
4276
|
{
|
|
4255
4277
|
size: "small",
|
|
4256
4278
|
onClick: addTag,
|
|
4257
4279
|
disabled: !canEdit || saving || !tagInput.trim(),
|
|
4258
|
-
startIcon: /* @__PURE__ */
|
|
4280
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
4259
4281
|
sx: { textTransform: "none" }
|
|
4260
4282
|
},
|
|
4261
4283
|
t("common.add", "Add")
|
|
4262
4284
|
))
|
|
4263
4285
|
}
|
|
4264
4286
|
}
|
|
4265
|
-
)), /* @__PURE__ */
|
|
4287
|
+
)), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: canEdit ? "" : t("settings.no-rename-cb", "Wire a renameTemplate callback to enable editing from here"), placement: "top" }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
4266
4288
|
material.Button,
|
|
4267
4289
|
{
|
|
4268
4290
|
variant: "contained",
|
|
@@ -4270,7 +4292,7 @@ function DetailsEditor({ templateId, currentName, currentTags, canEdit, onSave }
|
|
|
4270
4292
|
fullWidth: true,
|
|
4271
4293
|
onClick: handleSave,
|
|
4272
4294
|
disabled: !canEdit || saving || !dirty || !name.trim(),
|
|
4273
|
-
startIcon: justSaved ? /* @__PURE__ */
|
|
4295
|
+
startIcon: justSaved ? /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CheckOutlined, { fontSize: "small" }) : null
|
|
4274
4296
|
},
|
|
4275
4297
|
saving ? t("common.saving", "Saving\u2026") : justSaved ? t("settings.saved", "Saved") : t("settings.save-details", "Save details")
|
|
4276
4298
|
))));
|
|
@@ -4447,7 +4469,7 @@ function VariablesPanel() {
|
|
|
4447
4469
|
const lastFocused = useLastFocusedEditable();
|
|
4448
4470
|
const root = document2.root;
|
|
4449
4471
|
if (!root || root.type !== "EmailLayout") {
|
|
4450
|
-
return /* @__PURE__ */
|
|
4472
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React63__default.default.createElement(material.Alert, { severity: "info" }, t("variables.open-template", "Open a template to manage variables.")));
|
|
4451
4473
|
}
|
|
4452
4474
|
const data = root.data;
|
|
4453
4475
|
const variables = ((_a = data.variables) != null ? _a : []).map((v) => {
|
|
@@ -4458,9 +4480,9 @@ function VariablesPanel() {
|
|
|
4458
4480
|
sampleValue: (_b = v.sampleValue) != null ? _b : ""
|
|
4459
4481
|
};
|
|
4460
4482
|
});
|
|
4461
|
-
const usage =
|
|
4462
|
-
const declaredNames =
|
|
4463
|
-
const undeclared =
|
|
4483
|
+
const usage = React63.useMemo(() => collectTokenUsage(document2), [document2]);
|
|
4484
|
+
const declaredNames = React63.useMemo(() => new Set(variables.map((v) => v.name)), [variables]);
|
|
4485
|
+
const undeclared = React63.useMemo(
|
|
4464
4486
|
() => [...usage.keys()].filter((n) => n && !declaredNames.has(n)),
|
|
4465
4487
|
[usage, declaredNames]
|
|
4466
4488
|
);
|
|
@@ -4542,10 +4564,10 @@ function VariablesPanel() {
|
|
|
4542
4564
|
} catch (e) {
|
|
4543
4565
|
}
|
|
4544
4566
|
});
|
|
4545
|
-
return /* @__PURE__ */
|
|
4567
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { mb: 1 } }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "subtitle1", sx: { fontWeight: 600 } }, t("variables.title", "Variables")), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("variables.add", "Add variable") }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: add, "aria-label": t("variables.add", "Add variable") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })))), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mb: 2 } }, t(
|
|
4546
4568
|
"variables.intro",
|
|
4547
4569
|
"Declared variables travel with the template. Reference them in subject and body as {{name}}. In Preview mode, tokens render with the sample values below."
|
|
4548
|
-
)), undeclared.length > 0 && /* @__PURE__ */
|
|
4570
|
+
)), undeclared.length > 0 && /* @__PURE__ */ React63__default.default.createElement(material.Alert, { severity: "warning", sx: { mb: 2 } }, /* @__PURE__ */ React63__default.default.createElement(material.AlertTitle, { sx: { fontSize: 13 } }, t("variables.undeclared", "Undeclared in body")), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, useFlexGap: true, flexWrap: "wrap" }, undeclared.map((name) => /* @__PURE__ */ React63__default.default.createElement(
|
|
4549
4571
|
material.Chip,
|
|
4550
4572
|
{
|
|
4551
4573
|
key: name,
|
|
@@ -4553,12 +4575,12 @@ function VariablesPanel() {
|
|
|
4553
4575
|
label: name,
|
|
4554
4576
|
onClick: () => addFromToken(name),
|
|
4555
4577
|
onDelete: () => addFromToken(name),
|
|
4556
|
-
deleteIcon: /* @__PURE__ */
|
|
4578
|
+
deleteIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
4557
4579
|
sx: { fontFamily: "monospace" }
|
|
4558
4580
|
}
|
|
4559
|
-
))), /* @__PURE__ */
|
|
4581
|
+
))), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 0.5 } }, t("variables.click-to-declare", "Click a token to declare it."))), variables.length === 0 ? /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary" } }, t("variables.none", "No variables declared. Click + to add one.")) : /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 2 }, variables.map((v, i) => {
|
|
4560
4582
|
var _a2;
|
|
4561
|
-
return /* @__PURE__ */
|
|
4583
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
4562
4584
|
VariableRow,
|
|
4563
4585
|
{
|
|
4564
4586
|
key: i,
|
|
@@ -4591,9 +4613,9 @@ function VariableRow({
|
|
|
4591
4613
|
onCopy
|
|
4592
4614
|
}) {
|
|
4593
4615
|
var _a, _b;
|
|
4594
|
-
const [draftName, setDraftName] =
|
|
4595
|
-
const [isEditing, setIsEditing] =
|
|
4596
|
-
|
|
4616
|
+
const [draftName, setDraftName] = React63.useState(variable.name);
|
|
4617
|
+
const [isEditing, setIsEditing] = React63.useState(false);
|
|
4618
|
+
React63.useEffect(() => {
|
|
4597
4619
|
if (!isEditing) setDraftName(variable.name);
|
|
4598
4620
|
}, [variable.name, isEditing]);
|
|
4599
4621
|
const nameError = validateVariableName(draftName, siblings, index);
|
|
@@ -4609,7 +4631,7 @@ function VariableRow({
|
|
|
4609
4631
|
onCommitRename(draftName.trim());
|
|
4610
4632
|
}
|
|
4611
4633
|
};
|
|
4612
|
-
return /* @__PURE__ */
|
|
4634
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 0.75, sx: { pb: 1, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4613
4635
|
material.TextField,
|
|
4614
4636
|
{
|
|
4615
4637
|
label: t("rename.name-label", "Name"),
|
|
@@ -4634,7 +4656,7 @@ function VariableRow({
|
|
|
4634
4656
|
error: Boolean(nameError),
|
|
4635
4657
|
helperText: nameError != null ? nameError : " "
|
|
4636
4658
|
}
|
|
4637
|
-
), /* @__PURE__ */
|
|
4659
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25, sx: { mt: 0.5 } }, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("variables.copy-token", "Copy {{name}} token") }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
4638
4660
|
material.IconButton,
|
|
4639
4661
|
{
|
|
4640
4662
|
size: "small",
|
|
@@ -4642,8 +4664,8 @@ function VariableRow({
|
|
|
4642
4664
|
disabled: !hasName,
|
|
4643
4665
|
"aria-label": t("variables.copy-token", "Copy {{name}} token")
|
|
4644
4666
|
},
|
|
4645
|
-
/* @__PURE__ */
|
|
4646
|
-
))), /* @__PURE__ */
|
|
4667
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })
|
|
4668
|
+
))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: canInsert ? t("variables.insert-at-cursor", "Insert at cursor") : t("variables.focus-first", "Focus a text field first") }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
4647
4669
|
material.IconButton,
|
|
4648
4670
|
{
|
|
4649
4671
|
size: "small",
|
|
@@ -4651,16 +4673,16 @@ function VariableRow({
|
|
|
4651
4673
|
disabled: !hasName || !canInsert,
|
|
4652
4674
|
"aria-label": t("variables.insert-at-cursor", "Insert at cursor")
|
|
4653
4675
|
},
|
|
4654
|
-
/* @__PURE__ */
|
|
4655
|
-
))), /* @__PURE__ */
|
|
4676
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.InputOutlined, { fontSize: "small" })
|
|
4677
|
+
))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("variables.remove", "Remove") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4656
4678
|
material.IconButton,
|
|
4657
4679
|
{
|
|
4658
4680
|
size: "small",
|
|
4659
4681
|
onClick: onRemove,
|
|
4660
4682
|
"aria-label": t("variables.remove", "Remove")
|
|
4661
4683
|
},
|
|
4662
|
-
/* @__PURE__ */
|
|
4663
|
-
)))), /* @__PURE__ */
|
|
4684
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DeleteOutline, { fontSize: "small" })
|
|
4685
|
+
)))), /* @__PURE__ */ React63__default.default.createElement(
|
|
4664
4686
|
material.TextField,
|
|
4665
4687
|
{
|
|
4666
4688
|
label: t("variables.description", "Description"),
|
|
@@ -4670,7 +4692,7 @@ function VariableRow({
|
|
|
4670
4692
|
onChange: (e) => onChangeDescription(e.target.value),
|
|
4671
4693
|
placeholder: t("variables.optional", "Optional")
|
|
4672
4694
|
}
|
|
4673
|
-
), /* @__PURE__ */
|
|
4695
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
4674
4696
|
material.TextField,
|
|
4675
4697
|
{
|
|
4676
4698
|
label: t("variables.sample-value", "Sample value"),
|
|
@@ -4680,7 +4702,7 @@ function VariableRow({
|
|
|
4680
4702
|
onChange: (e) => onChangeSampleValue(e.target.value),
|
|
4681
4703
|
placeholder: t("variables.sample-hint", "Shown in Preview mode"),
|
|
4682
4704
|
InputProps: {
|
|
4683
|
-
startAdornment: /* @__PURE__ */
|
|
4705
|
+
startAdornment: /* @__PURE__ */ React63__default.default.createElement(
|
|
4684
4706
|
iconsMaterial.DataObjectOutlined,
|
|
4685
4707
|
{
|
|
4686
4708
|
fontSize: "small",
|
|
@@ -4689,7 +4711,7 @@ function VariableRow({
|
|
|
4689
4711
|
)
|
|
4690
4712
|
}
|
|
4691
4713
|
}
|
|
4692
|
-
), /* @__PURE__ */
|
|
4714
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { pt: 0.25 } }, hasName && (unused ? /* @__PURE__ */ React63__default.default.createElement(material.Chip, { size: "small", color: "warning", variant: "outlined", label: t("variables.unused", "Unused in body") }) : /* @__PURE__ */ React63__default.default.createElement(
|
|
4693
4715
|
material.Chip,
|
|
4694
4716
|
{
|
|
4695
4717
|
size: "small",
|
|
@@ -4714,13 +4736,13 @@ function InspectorDrawer({
|
|
|
4714
4736
|
const renderCurrentSidebarPanel = () => {
|
|
4715
4737
|
switch (selectedSidebarTab) {
|
|
4716
4738
|
case "block-configuration":
|
|
4717
|
-
return /* @__PURE__ */
|
|
4739
|
+
return /* @__PURE__ */ React63__default.default.createElement(ConfigurationPanel, null);
|
|
4718
4740
|
case "styles":
|
|
4719
|
-
return /* @__PURE__ */
|
|
4741
|
+
return /* @__PURE__ */ React63__default.default.createElement(StylesPanel, null);
|
|
4720
4742
|
case "variables":
|
|
4721
|
-
return /* @__PURE__ */
|
|
4743
|
+
return /* @__PURE__ */ React63__default.default.createElement(VariablesPanel, null);
|
|
4722
4744
|
case "template-settings":
|
|
4723
|
-
return /* @__PURE__ */
|
|
4745
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
4724
4746
|
TemplatePanel,
|
|
4725
4747
|
{
|
|
4726
4748
|
deleteTemplate,
|
|
@@ -4730,7 +4752,7 @@ function InspectorDrawer({
|
|
|
4730
4752
|
);
|
|
4731
4753
|
}
|
|
4732
4754
|
};
|
|
4733
|
-
return /* @__PURE__ */
|
|
4755
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
4734
4756
|
material.Drawer,
|
|
4735
4757
|
{
|
|
4736
4758
|
variant: "persistent",
|
|
@@ -4752,7 +4774,7 @@ function InspectorDrawer({
|
|
|
4752
4774
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
4753
4775
|
}
|
|
4754
4776
|
},
|
|
4755
|
-
/* @__PURE__ */
|
|
4777
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React63__default.default.createElement(material.Box, { px: 1 }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4756
4778
|
material.Tabs,
|
|
4757
4779
|
{
|
|
4758
4780
|
value: selectedSidebarTab,
|
|
@@ -4760,25 +4782,25 @@ function InspectorDrawer({
|
|
|
4760
4782
|
variant: "fullWidth",
|
|
4761
4783
|
sx: { "& .MuiTab-root": { minWidth: 0, px: 1, fontSize: 13 } }
|
|
4762
4784
|
},
|
|
4763
|
-
/* @__PURE__ */
|
|
4764
|
-
/* @__PURE__ */
|
|
4765
|
-
/* @__PURE__ */
|
|
4766
|
-
/* @__PURE__ */
|
|
4785
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "styles", label: t("inspector.tab.styles", "Styles") }),
|
|
4786
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "block-configuration", label: t("inspector.tab.inspect", "Inspect") }),
|
|
4787
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "variables", label: t("inspector.tab.variables", "Variables") }),
|
|
4788
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "template-settings", label: t("inspector.tab.settings", "Settings") })
|
|
4767
4789
|
))),
|
|
4768
|
-
/* @__PURE__ */
|
|
4790
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
4769
4791
|
);
|
|
4770
4792
|
}
|
|
4771
|
-
var SnackbarContext =
|
|
4793
|
+
var SnackbarContext = React63.createContext(null);
|
|
4772
4794
|
function useSnackbar() {
|
|
4773
|
-
const context =
|
|
4795
|
+
const context = React63.useContext(SnackbarContext);
|
|
4774
4796
|
if (!context) {
|
|
4775
4797
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4776
4798
|
}
|
|
4777
4799
|
return context;
|
|
4778
4800
|
}
|
|
4779
4801
|
function SnackbarProvider({ children }) {
|
|
4780
|
-
const [message, setMessage] =
|
|
4781
|
-
const [duration, setDuration] =
|
|
4802
|
+
const [message, setMessage] = React63.useState(null);
|
|
4803
|
+
const [duration, setDuration] = React63.useState(3e3);
|
|
4782
4804
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4783
4805
|
setMessage(text);
|
|
4784
4806
|
setDuration(customDuration);
|
|
@@ -4786,7 +4808,7 @@ function SnackbarProvider({ children }) {
|
|
|
4786
4808
|
const handleClose = () => {
|
|
4787
4809
|
setMessage(null);
|
|
4788
4810
|
};
|
|
4789
|
-
return /* @__PURE__ */
|
|
4811
|
+
return /* @__PURE__ */ React63__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React63__default.default.createElement(
|
|
4790
4812
|
material.Snackbar,
|
|
4791
4813
|
{
|
|
4792
4814
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4833,8 +4855,8 @@ function TemplateRow({
|
|
|
4833
4855
|
onDuplicateAsTemplate
|
|
4834
4856
|
}) {
|
|
4835
4857
|
const { setCurrentTemplate } = useEmailEditor();
|
|
4836
|
-
const [hover, setHover] =
|
|
4837
|
-
const [menuAnchor, setMenuAnchor] =
|
|
4858
|
+
const [hover, setHover] = React63.useState(false);
|
|
4859
|
+
const [menuAnchor, setMenuAnchor] = React63.useState(null);
|
|
4838
4860
|
const closeMenu = () => setMenuAnchor(null);
|
|
4839
4861
|
const openMenu = (e) => {
|
|
4840
4862
|
e.stopPropagation();
|
|
@@ -4863,7 +4885,7 @@ function TemplateRow({
|
|
|
4863
4885
|
const hasActions = Boolean(
|
|
4864
4886
|
onDuplicate || onRename || onDelete || onPromote || onDemote || onDuplicateAsTemplate
|
|
4865
4887
|
);
|
|
4866
|
-
return /* @__PURE__ */
|
|
4888
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
4867
4889
|
material.Box,
|
|
4868
4890
|
{
|
|
4869
4891
|
role: "button",
|
|
@@ -4889,7 +4911,7 @@ function TemplateRow({
|
|
|
4889
4911
|
"&:focus-visible": { outline: "2px solid", outlineColor: "primary.main" }
|
|
4890
4912
|
}
|
|
4891
4913
|
},
|
|
4892
|
-
/* @__PURE__ */
|
|
4914
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "flex-start", spacing: 1 }, /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { flexGrow: 1, minWidth: 0, pr: hasActions ? 3 : 0 } }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "baseline", spacing: 1, sx: { minWidth: 0 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4893
4915
|
material.Typography,
|
|
4894
4916
|
{
|
|
4895
4917
|
variant: "body2",
|
|
@@ -4903,14 +4925,14 @@ function TemplateRow({
|
|
|
4903
4925
|
title: template.slug
|
|
4904
4926
|
},
|
|
4905
4927
|
template.slug
|
|
4906
|
-
), updated && !hasActions && /* @__PURE__ */
|
|
4928
|
+
), updated && !hasActions && /* @__PURE__ */ React63__default.default.createElement(
|
|
4907
4929
|
material.Typography,
|
|
4908
4930
|
{
|
|
4909
4931
|
variant: "caption",
|
|
4910
4932
|
sx: { color: "text.secondary", flexShrink: 0, fontSize: "0.7rem" }
|
|
4911
4933
|
},
|
|
4912
4934
|
updated
|
|
4913
|
-
)), template.description && /* @__PURE__ */
|
|
4935
|
+
)), template.description && /* @__PURE__ */ React63__default.default.createElement(
|
|
4914
4936
|
material.Typography,
|
|
4915
4937
|
{
|
|
4916
4938
|
variant: "caption",
|
|
@@ -4924,7 +4946,7 @@ function TemplateRow({
|
|
|
4924
4946
|
}
|
|
4925
4947
|
},
|
|
4926
4948
|
template.description
|
|
4927
|
-
), template.tags && template.tags.length > 0 && /* @__PURE__ */
|
|
4949
|
+
), template.tags && template.tags.length > 0 && /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { mt: 0.5, flexWrap: "wrap", gap: 0.5 } }, template.tags.map((tag) => /* @__PURE__ */ React63__default.default.createElement(
|
|
4928
4950
|
material.Chip,
|
|
4929
4951
|
{
|
|
4930
4952
|
key: tag,
|
|
@@ -4933,7 +4955,7 @@ function TemplateRow({
|
|
|
4933
4955
|
sx: { height: 18, fontSize: "0.65rem", "& .MuiChip-label": { px: 0.75 } }
|
|
4934
4956
|
}
|
|
4935
4957
|
))))),
|
|
4936
|
-
hasActions && /* @__PURE__ */
|
|
4958
|
+
hasActions && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("row.more", "More") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
4937
4959
|
material.IconButton,
|
|
4938
4960
|
{
|
|
4939
4961
|
size: "small",
|
|
@@ -4949,8 +4971,8 @@ function TemplateRow({
|
|
|
4949
4971
|
transition: "opacity 120ms"
|
|
4950
4972
|
}
|
|
4951
4973
|
},
|
|
4952
|
-
/* @__PURE__ */
|
|
4953
|
-
)), /* @__PURE__ */
|
|
4974
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.MoreVertOutlined, { fontSize: "small" })
|
|
4975
|
+
)), /* @__PURE__ */ React63__default.default.createElement(
|
|
4954
4976
|
material.Menu,
|
|
4955
4977
|
{
|
|
4956
4978
|
anchorEl: menuAnchor,
|
|
@@ -4961,14 +4983,14 @@ function TemplateRow({
|
|
|
4961
4983
|
transformOrigin: { vertical: "top", horizontal: "right" },
|
|
4962
4984
|
slotProps: { paper: { sx: { minWidth: 200 } } }
|
|
4963
4985
|
},
|
|
4964
|
-
onRename && /* @__PURE__ */
|
|
4965
|
-
onDuplicate && /* @__PURE__ */
|
|
4966
|
-
onDuplicateAsTemplate && /* @__PURE__ */
|
|
4967
|
-
onPromote && /* @__PURE__ */
|
|
4968
|
-
onDemote && /* @__PURE__ */
|
|
4986
|
+
onRename && /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { onClick: runAction(onRename) }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DriveFileRenameOutlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("row.edit-details", "Edit name & tags\u2026"))),
|
|
4987
|
+
onDuplicate && /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicate) }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("row.duplicate", "Duplicate"))),
|
|
4988
|
+
onDuplicateAsTemplate && /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { onClick: runAction(onDuplicateAsTemplate) }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("row.duplicate-as-template", "Duplicate as template"))),
|
|
4989
|
+
onPromote && /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { onClick: runAction(onPromote) }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FileUploadOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("row.promote", "Promote to sample"))),
|
|
4990
|
+
onDemote && /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { onClick: runAction(onDemote) }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, null, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FileDownloadOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("row.demote", "Demote to template"))),
|
|
4969
4991
|
onDelete && [
|
|
4970
|
-
/* @__PURE__ */
|
|
4971
|
-
/* @__PURE__ */
|
|
4992
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Divider, { key: "divider" }),
|
|
4993
|
+
/* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { key: "delete", onClick: runAction(onDelete), sx: { color: "error.main" } }, /* @__PURE__ */ React63__default.default.createElement(material.ListItemIcon, { sx: { color: "error.main" } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, null, t("tune.delete", "Delete")))
|
|
4972
4994
|
]
|
|
4973
4995
|
))
|
|
4974
4996
|
);
|
|
@@ -5083,31 +5105,31 @@ var PREVIEW_MAX = 36;
|
|
|
5083
5105
|
function iconForType(type) {
|
|
5084
5106
|
switch (type) {
|
|
5085
5107
|
case "EmailLayout":
|
|
5086
|
-
return /* @__PURE__ */
|
|
5108
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DashboardOutlined, { fontSize: "small" });
|
|
5087
5109
|
case "Heading":
|
|
5088
|
-
return /* @__PURE__ */
|
|
5110
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HMobiledataOutlined, { fontSize: "small" });
|
|
5089
5111
|
case "Text":
|
|
5090
|
-
return /* @__PURE__ */
|
|
5112
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.NotesOutlined, { fontSize: "small" });
|
|
5091
5113
|
case "Button":
|
|
5092
|
-
return /* @__PURE__ */
|
|
5114
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SmartButtonOutlined, { fontSize: "small" });
|
|
5093
5115
|
case "Image":
|
|
5094
|
-
return /* @__PURE__ */
|
|
5116
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ImageOutlined, { fontSize: "small" });
|
|
5095
5117
|
case "Avatar":
|
|
5096
|
-
return /* @__PURE__ */
|
|
5118
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AccountCircleOutlined, { fontSize: "small" });
|
|
5097
5119
|
case "Signature":
|
|
5098
|
-
return /* @__PURE__ */
|
|
5120
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContactMailOutlined, { fontSize: "small" });
|
|
5099
5121
|
case "Divider":
|
|
5100
|
-
return /* @__PURE__ */
|
|
5122
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, { fontSize: "small" });
|
|
5101
5123
|
case "Spacer":
|
|
5102
|
-
return /* @__PURE__ */
|
|
5124
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.Crop32Outlined, { fontSize: "small" });
|
|
5103
5125
|
case "Html":
|
|
5104
|
-
return /* @__PURE__ */
|
|
5126
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HtmlOutlined, { fontSize: "small" });
|
|
5105
5127
|
case "Container":
|
|
5106
|
-
return /* @__PURE__ */
|
|
5128
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.LibraryAddOutlined, { fontSize: "small" });
|
|
5107
5129
|
case "ColumnsContainer":
|
|
5108
|
-
return /* @__PURE__ */
|
|
5130
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ViewColumnOutlined, { fontSize: "small" });
|
|
5109
5131
|
default:
|
|
5110
|
-
return /* @__PURE__ */
|
|
5132
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.BusinessOutlined, { fontSize: "small" });
|
|
5111
5133
|
}
|
|
5112
5134
|
}
|
|
5113
5135
|
function previewText(text) {
|
|
@@ -5185,7 +5207,7 @@ function buildNode(id, doc, ctx) {
|
|
|
5185
5207
|
id: `${id}::col${colIdx}`,
|
|
5186
5208
|
label: `Column ${colIdx + 1}`,
|
|
5187
5209
|
preview: colChildren.length === 1 ? "1 child" : `${colChildren.length} children`,
|
|
5188
|
-
icon: /* @__PURE__ */
|
|
5210
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ViewColumnSharp, { fontSize: "small", sx: { opacity: 0.6 } }),
|
|
5189
5211
|
children: colChildren,
|
|
5190
5212
|
containerChildrenRef: parentForCol
|
|
5191
5213
|
});
|
|
@@ -5232,7 +5254,7 @@ var DRAG_MIME = "application/x-email-editor-block";
|
|
|
5232
5254
|
function OutlinePanel() {
|
|
5233
5255
|
const document2 = useDocument();
|
|
5234
5256
|
const selectedBlockId = useSelectedBlockId();
|
|
5235
|
-
const [dragging, setDragging] =
|
|
5257
|
+
const [dragging, setDragging] = React63.useState(null);
|
|
5236
5258
|
const tree = buildNode(ROOT_BLOCK_ID2, document2);
|
|
5237
5259
|
const performMove = (payload, targetParent, targetIndex) => {
|
|
5238
5260
|
const patch = buildMovePatch(
|
|
@@ -5247,7 +5269,7 @@ function OutlinePanel() {
|
|
|
5247
5269
|
setSelectedBlockId(payload.sourceId);
|
|
5248
5270
|
}
|
|
5249
5271
|
};
|
|
5250
|
-
return /* @__PURE__ */
|
|
5272
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, null, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "subtitle2", component: "h2", sx: { fontWeight: "bold", mb: 0.5, px: 0.5 } }, t("outline.title", "Outline")), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { display: "block", color: "text.secondary", px: 0.5, mb: 1 } }, t("outline.hint", "Click a row to select. Drag a row to reorder or move it into a container.")), tree ? /* @__PURE__ */ React63__default.default.createElement(
|
|
5251
5273
|
OutlineRow,
|
|
5252
5274
|
{
|
|
5253
5275
|
node: tree,
|
|
@@ -5258,7 +5280,7 @@ function OutlinePanel() {
|
|
|
5258
5280
|
setDragging,
|
|
5259
5281
|
performMove
|
|
5260
5282
|
}
|
|
5261
|
-
) : /* @__PURE__ */
|
|
5283
|
+
) : /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", px: 0.5 } }, "Nothing to outline."));
|
|
5262
5284
|
}
|
|
5263
5285
|
function OutlineRow({
|
|
5264
5286
|
node,
|
|
@@ -5269,8 +5291,8 @@ function OutlineRow({
|
|
|
5269
5291
|
setDragging,
|
|
5270
5292
|
performMove
|
|
5271
5293
|
}) {
|
|
5272
|
-
const [expanded, setExpanded] =
|
|
5273
|
-
const [dropPos, setDropPos] =
|
|
5294
|
+
const [expanded, setExpanded] = React63.useState(true);
|
|
5295
|
+
const [dropPos, setDropPos] = React63.useState(null);
|
|
5274
5296
|
const hasChildren = Boolean(node.children && node.children.length > 0);
|
|
5275
5297
|
const isSelectable = !node.id.includes("::");
|
|
5276
5298
|
const isSelected = isSelectable && selectedBlockId === node.id;
|
|
@@ -5344,7 +5366,7 @@ function OutlineRow({
|
|
|
5344
5366
|
const patch = buildMovePatch(document2, node.id, node.parent, node.parent, nextIndex + (delta > 0 ? 1 : 0));
|
|
5345
5367
|
if (patch) setDocument(patch);
|
|
5346
5368
|
};
|
|
5347
|
-
return /* @__PURE__ */
|
|
5369
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { position: "relative" } }, dropPos === "before" && /* @__PURE__ */ React63__default.default.createElement(DropLine, { depth }), /* @__PURE__ */ React63__default.default.createElement(
|
|
5348
5370
|
material.Stack,
|
|
5349
5371
|
{
|
|
5350
5372
|
direction: "row",
|
|
@@ -5377,7 +5399,7 @@ function OutlineRow({
|
|
|
5377
5399
|
userSelect: "none"
|
|
5378
5400
|
}
|
|
5379
5401
|
},
|
|
5380
|
-
hasChildren ? /* @__PURE__ */
|
|
5402
|
+
hasChildren ? /* @__PURE__ */ React63__default.default.createElement(
|
|
5381
5403
|
material.Box,
|
|
5382
5404
|
{
|
|
5383
5405
|
role: "button",
|
|
@@ -5388,9 +5410,9 @@ function OutlineRow({
|
|
|
5388
5410
|
},
|
|
5389
5411
|
sx: { display: "flex", alignItems: "center", cursor: "pointer" }
|
|
5390
5412
|
},
|
|
5391
|
-
expanded ? /* @__PURE__ */
|
|
5392
|
-
) : /* @__PURE__ */
|
|
5393
|
-
/* @__PURE__ */
|
|
5413
|
+
expanded ? /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ExpandMore, { fontSize: "small" }) : /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ChevronRight, { fontSize: "small" })
|
|
5414
|
+
) : /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { width: 20 } }),
|
|
5415
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
5394
5416
|
material.Box,
|
|
5395
5417
|
{
|
|
5396
5418
|
sx: {
|
|
@@ -5402,7 +5424,7 @@ function OutlineRow({
|
|
|
5402
5424
|
},
|
|
5403
5425
|
node.icon
|
|
5404
5426
|
),
|
|
5405
|
-
/* @__PURE__ */
|
|
5427
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
5406
5428
|
material.Typography,
|
|
5407
5429
|
{
|
|
5408
5430
|
variant: "body2",
|
|
@@ -5414,7 +5436,7 @@ function OutlineRow({
|
|
|
5414
5436
|
},
|
|
5415
5437
|
node.label
|
|
5416
5438
|
),
|
|
5417
|
-
node.preview && /* @__PURE__ */
|
|
5439
|
+
node.preview && /* @__PURE__ */ React63__default.default.createElement(
|
|
5418
5440
|
material.Typography,
|
|
5419
5441
|
{
|
|
5420
5442
|
variant: "body2",
|
|
@@ -5430,7 +5452,7 @@ function OutlineRow({
|
|
|
5430
5452
|
"\u2014 ",
|
|
5431
5453
|
node.preview
|
|
5432
5454
|
),
|
|
5433
|
-
canMove && /* @__PURE__ */
|
|
5455
|
+
canMove && /* @__PURE__ */ React63__default.default.createElement(
|
|
5434
5456
|
material.Box,
|
|
5435
5457
|
{
|
|
5436
5458
|
className: "outline-move-btns",
|
|
@@ -5441,7 +5463,7 @@ function OutlineRow({
|
|
|
5441
5463
|
transition: "opacity 120ms"
|
|
5442
5464
|
}
|
|
5443
5465
|
},
|
|
5444
|
-
/* @__PURE__ */
|
|
5466
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: "Move up" }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
5445
5467
|
material.IconButton,
|
|
5446
5468
|
{
|
|
5447
5469
|
size: "small",
|
|
@@ -5453,9 +5475,9 @@ function OutlineRow({
|
|
|
5453
5475
|
"aria-label": `Move ${node.label} up`,
|
|
5454
5476
|
sx: { p: 0.25 }
|
|
5455
5477
|
},
|
|
5456
|
-
/* @__PURE__ */
|
|
5478
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.KeyboardArrowUp, { fontSize: "small" })
|
|
5457
5479
|
))),
|
|
5458
|
-
/* @__PURE__ */
|
|
5480
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: "Move down" }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
5459
5481
|
material.IconButton,
|
|
5460
5482
|
{
|
|
5461
5483
|
size: "small",
|
|
@@ -5467,10 +5489,10 @@ function OutlineRow({
|
|
|
5467
5489
|
"aria-label": `Move ${node.label} down`,
|
|
5468
5490
|
sx: { p: 0.25 }
|
|
5469
5491
|
},
|
|
5470
|
-
/* @__PURE__ */
|
|
5492
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.KeyboardArrowDown, { fontSize: "small" })
|
|
5471
5493
|
)))
|
|
5472
5494
|
)
|
|
5473
|
-
), dropPos === "after" && /* @__PURE__ */
|
|
5495
|
+
), dropPos === "after" && /* @__PURE__ */ React63__default.default.createElement(DropLine, { depth })), hasChildren && expanded && /* @__PURE__ */ React63__default.default.createElement(material.Box, null, node.children.map((child) => /* @__PURE__ */ React63__default.default.createElement(
|
|
5474
5496
|
OutlineRow,
|
|
5475
5497
|
{
|
|
5476
5498
|
key: child.id,
|
|
@@ -5485,7 +5507,7 @@ function OutlineRow({
|
|
|
5485
5507
|
))));
|
|
5486
5508
|
}
|
|
5487
5509
|
function DropLine({ depth }) {
|
|
5488
|
-
return /* @__PURE__ */
|
|
5510
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
5489
5511
|
material.Box,
|
|
5490
5512
|
{
|
|
5491
5513
|
sx: {
|
|
@@ -5493,7 +5515,7 @@ function DropLine({ depth }) {
|
|
|
5493
5515
|
height: 0
|
|
5494
5516
|
}
|
|
5495
5517
|
},
|
|
5496
|
-
/* @__PURE__ */
|
|
5518
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
5497
5519
|
material.Box,
|
|
5498
5520
|
{
|
|
5499
5521
|
sx: {
|
|
@@ -5519,11 +5541,11 @@ function NewTemplatePickerDialog({
|
|
|
5519
5541
|
onClose,
|
|
5520
5542
|
onCreate
|
|
5521
5543
|
}) {
|
|
5522
|
-
const [name, setName] =
|
|
5523
|
-
const [selectedStarter, setSelectedStarter] =
|
|
5524
|
-
const [error, setError] =
|
|
5525
|
-
const [busy, setBusy] =
|
|
5526
|
-
|
|
5544
|
+
const [name, setName] = React63.useState("");
|
|
5545
|
+
const [selectedStarter, setSelectedStarter] = React63.useState(null);
|
|
5546
|
+
const [error, setError] = React63.useState(null);
|
|
5547
|
+
const [busy, setBusy] = React63.useState(false);
|
|
5548
|
+
React63.useEffect(() => {
|
|
5527
5549
|
if (open) {
|
|
5528
5550
|
setName(defaultName != null ? defaultName : t(kind === "sample" ? "drawer.new-sample" : "drawer.new-template", kind === "sample" ? "New sample" : "New template"));
|
|
5529
5551
|
setSelectedStarter(null);
|
|
@@ -5554,7 +5576,7 @@ function NewTemplatePickerDialog({
|
|
|
5554
5576
|
}
|
|
5555
5577
|
});
|
|
5556
5578
|
const pickable = samples.filter((s) => s.id !== "empty-email");
|
|
5557
|
-
return /* @__PURE__ */
|
|
5579
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Dialog, { open, onClose: busy ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React63__default.default.createElement(material.DialogTitle, null, kind === "sample" ? t("picker.title-sample", "New sample") : t("picker.title-template", "New template")), /* @__PURE__ */ React63__default.default.createElement(material.DialogContent, { dividers: true }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "subtitle2", sx: { mb: 1 } }, t("picker.start-from", "Start from")), /* @__PURE__ */ React63__default.default.createElement(
|
|
5558
5580
|
material.List,
|
|
5559
5581
|
{
|
|
5560
5582
|
dense: true,
|
|
@@ -5568,24 +5590,24 @@ function NewTemplatePickerDialog({
|
|
|
5568
5590
|
overflowY: "auto"
|
|
5569
5591
|
}
|
|
5570
5592
|
},
|
|
5571
|
-
/* @__PURE__ */
|
|
5593
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
5572
5594
|
material.ListItemButton,
|
|
5573
5595
|
{
|
|
5574
5596
|
selected: selectedStarter === null,
|
|
5575
5597
|
onClick: () => setSelectedStarter(null)
|
|
5576
5598
|
},
|
|
5577
|
-
/* @__PURE__ */
|
|
5599
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.InsertDriveFileOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, { primary: t("picker.blank-title", "Blank"), secondary: t("picker.blank-desc", "Start from an empty email") }))
|
|
5578
5600
|
),
|
|
5579
|
-
pickable.map((s) => /* @__PURE__ */
|
|
5601
|
+
pickable.map((s) => /* @__PURE__ */ React63__default.default.createElement(
|
|
5580
5602
|
material.ListItemButton,
|
|
5581
5603
|
{
|
|
5582
5604
|
key: s.id,
|
|
5583
5605
|
selected: selectedStarter === s.id,
|
|
5584
5606
|
onClick: () => setSelectedStarter(s.id)
|
|
5585
5607
|
},
|
|
5586
|
-
/* @__PURE__ */
|
|
5608
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1.5, flex: 1 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DescriptionOutlined, { fontSize: "small", sx: { color: "text.secondary" } }), /* @__PURE__ */ React63__default.default.createElement(material.ListItemText, { primary: s.slug, secondary: s.description }))
|
|
5587
5609
|
))
|
|
5588
|
-
), /* @__PURE__ */
|
|
5610
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
5589
5611
|
material.TextField,
|
|
5590
5612
|
{
|
|
5591
5613
|
autoFocus: true,
|
|
@@ -5605,7 +5627,7 @@ function NewTemplatePickerDialog({
|
|
|
5605
5627
|
helperText: error != null ? error : " ",
|
|
5606
5628
|
disabled: busy
|
|
5607
5629
|
}
|
|
5608
|
-
)), /* @__PURE__ */
|
|
5630
|
+
)), /* @__PURE__ */ React63__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React63__default.default.createElement(material.Button, { onClick: onClose, disabled: busy }, t("common.cancel", "Cancel")), /* @__PURE__ */ React63__default.default.createElement(material.Button, { variant: "contained", onClick: handleCreate, disabled: busy }, busy ? t("picker.creating", "Creating\u2026") : kind === "sample" ? t("picker.create-sample", "Create sample") : t("picker.create-template", "Create template"))));
|
|
5609
5631
|
}
|
|
5610
5632
|
function RenameDialog({
|
|
5611
5633
|
open,
|
|
@@ -5615,12 +5637,12 @@ function RenameDialog({
|
|
|
5615
5637
|
onClose,
|
|
5616
5638
|
onSubmit
|
|
5617
5639
|
}) {
|
|
5618
|
-
const [slug, setSlug] =
|
|
5619
|
-
const [tags, setTags] =
|
|
5620
|
-
const [tagInput, setTagInput] =
|
|
5621
|
-
const [error, setError] =
|
|
5622
|
-
const [submitting, setSubmitting] =
|
|
5623
|
-
|
|
5640
|
+
const [slug, setSlug] = React63.useState(currentSlug);
|
|
5641
|
+
const [tags, setTags] = React63.useState(currentTags);
|
|
5642
|
+
const [tagInput, setTagInput] = React63.useState("");
|
|
5643
|
+
const [error, setError] = React63.useState(null);
|
|
5644
|
+
const [submitting, setSubmitting] = React63.useState(false);
|
|
5645
|
+
React63.useEffect(() => {
|
|
5624
5646
|
if (open) {
|
|
5625
5647
|
setSlug(currentSlug);
|
|
5626
5648
|
setTags(currentTags);
|
|
@@ -5667,7 +5689,7 @@ function RenameDialog({
|
|
|
5667
5689
|
setSubmitting(false);
|
|
5668
5690
|
}
|
|
5669
5691
|
});
|
|
5670
|
-
return /* @__PURE__ */
|
|
5692
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Dialog, { open, onClose: submitting ? void 0 : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React63__default.default.createElement(material.DialogTitle, null, t("rename.title", "Edit details")), /* @__PURE__ */ React63__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
5671
5693
|
material.TextField,
|
|
5672
5694
|
{
|
|
5673
5695
|
autoFocus: true,
|
|
@@ -5687,7 +5709,7 @@ function RenameDialog({
|
|
|
5687
5709
|
if (e.key === "Enter" && !submitting) handleSubmit();
|
|
5688
5710
|
}
|
|
5689
5711
|
}
|
|
5690
|
-
), /* @__PURE__ */
|
|
5712
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.secondary", display: "block", mt: 1, mb: 0.5 } }, t("rename.tags", "Tags")), tags.length > 0 ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, sx: { flexWrap: "wrap", gap: 0.5, mb: 1 } }, tags.map((tag) => /* @__PURE__ */ React63__default.default.createElement(
|
|
5691
5713
|
material.Chip,
|
|
5692
5714
|
{
|
|
5693
5715
|
key: tag,
|
|
@@ -5695,7 +5717,7 @@ function RenameDialog({
|
|
|
5695
5717
|
size: "small",
|
|
5696
5718
|
onDelete: submitting ? void 0 : () => removeTag(tag)
|
|
5697
5719
|
}
|
|
5698
|
-
))) : /* @__PURE__ */
|
|
5720
|
+
))) : /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { color: "text.disabled", display: "block", mb: 1 } }, t("rename.no-tags", "No tags yet.")), /* @__PURE__ */ React63__default.default.createElement(
|
|
5699
5721
|
material.TextField,
|
|
5700
5722
|
{
|
|
5701
5723
|
size: "small",
|
|
@@ -5714,20 +5736,20 @@ function RenameDialog({
|
|
|
5714
5736
|
}
|
|
5715
5737
|
},
|
|
5716
5738
|
InputProps: {
|
|
5717
|
-
endAdornment: /* @__PURE__ */
|
|
5739
|
+
endAdornment: /* @__PURE__ */ React63__default.default.createElement(material.InputAdornment, { position: "end" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
5718
5740
|
material.Button,
|
|
5719
5741
|
{
|
|
5720
5742
|
size: "small",
|
|
5721
5743
|
onClick: addTag,
|
|
5722
5744
|
disabled: !tagInput.trim() || submitting,
|
|
5723
|
-
startIcon: /* @__PURE__ */
|
|
5745
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }),
|
|
5724
5746
|
sx: { textTransform: "none" }
|
|
5725
5747
|
},
|
|
5726
5748
|
t("common.add", "Add")
|
|
5727
5749
|
))
|
|
5728
5750
|
}
|
|
5729
5751
|
}
|
|
5730
|
-
), /* @__PURE__ */
|
|
5752
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { minHeight: 8 } })), /* @__PURE__ */ React63__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React63__default.default.createElement(material.Button, { onClick: onClose, disabled: submitting }, t("common.cancel", "Cancel")), /* @__PURE__ */ React63__default.default.createElement(
|
|
5731
5753
|
material.Button,
|
|
5732
5754
|
{
|
|
5733
5755
|
onClick: handleSubmit,
|
|
@@ -5746,10 +5768,10 @@ function SaveTemplateDialog({
|
|
|
5746
5768
|
error: externalError = null,
|
|
5747
5769
|
mode = "save-as"
|
|
5748
5770
|
}) {
|
|
5749
|
-
const [templateName, setTemplateName] =
|
|
5750
|
-
const [internalError, setInternalError] =
|
|
5751
|
-
const [isSubmitting, setIsSubmitting] =
|
|
5752
|
-
|
|
5771
|
+
const [templateName, setTemplateName] = React63.useState(defaultName);
|
|
5772
|
+
const [internalError, setInternalError] = React63.useState("");
|
|
5773
|
+
const [isSubmitting, setIsSubmitting] = React63.useState(false);
|
|
5774
|
+
React63.useEffect(() => {
|
|
5753
5775
|
if (open) {
|
|
5754
5776
|
setTemplateName(defaultName);
|
|
5755
5777
|
setInternalError("");
|
|
@@ -5797,7 +5819,7 @@ function SaveTemplateDialog({
|
|
|
5797
5819
|
setInternalError("");
|
|
5798
5820
|
onClose();
|
|
5799
5821
|
};
|
|
5800
|
-
return /* @__PURE__ */
|
|
5822
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
5801
5823
|
material.Dialog,
|
|
5802
5824
|
{
|
|
5803
5825
|
open,
|
|
@@ -5805,8 +5827,8 @@ function SaveTemplateDialog({
|
|
|
5805
5827
|
maxWidth: "sm",
|
|
5806
5828
|
fullWidth: true
|
|
5807
5829
|
},
|
|
5808
|
-
/* @__PURE__ */
|
|
5809
|
-
/* @__PURE__ */
|
|
5830
|
+
/* @__PURE__ */ React63__default.default.createElement(material.DialogTitle, null, mode === "new" ? t("save-dialog.title-new", "Create a new template") : t("save-dialog.title", "Save as a new template")),
|
|
5831
|
+
/* @__PURE__ */ React63__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
5810
5832
|
material.TextField,
|
|
5811
5833
|
{
|
|
5812
5834
|
autoFocus: true,
|
|
@@ -5829,7 +5851,7 @@ function SaveTemplateDialog({
|
|
|
5829
5851
|
disabled: isSubmitting
|
|
5830
5852
|
}
|
|
5831
5853
|
))),
|
|
5832
|
-
/* @__PURE__ */
|
|
5854
|
+
/* @__PURE__ */ React63__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React63__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, t("common.cancel", "Cancel")), /* @__PURE__ */ React63__default.default.createElement(
|
|
5833
5855
|
material.Button,
|
|
5834
5856
|
{
|
|
5835
5857
|
onClick: handleSave,
|
|
@@ -5899,19 +5921,19 @@ function SamplesDrawer({
|
|
|
5899
5921
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5900
5922
|
const { setCurrentTemplate, loadTemplate: ctxLoadTemplate } = useEmailEditor();
|
|
5901
5923
|
const { showMessage } = useSnackbar();
|
|
5902
|
-
const [samples, setSamples] =
|
|
5903
|
-
const [templates, setTemplates] =
|
|
5904
|
-
const [loadingSamples, setLoadingSamples] =
|
|
5905
|
-
const [loadingTemplates, setLoadingTemplates] =
|
|
5906
|
-
const [templatesError, setTemplatesError] =
|
|
5907
|
-
const [activeLeftTab, setActiveLeftTab] =
|
|
5908
|
-
const [search, setSearch] =
|
|
5909
|
-
const [sortKey, setSortKey] =
|
|
5910
|
-
const [activeTags, setActiveTags] =
|
|
5911
|
-
const [renameTarget, setRenameTarget] =
|
|
5912
|
-
const [pendingSaveAs, setPendingSaveAs] =
|
|
5913
|
-
const [newError, setNewError] =
|
|
5914
|
-
const [pickerKind, setPickerKind] =
|
|
5924
|
+
const [samples, setSamples] = React63.useState([buildEmptyTemplate()]);
|
|
5925
|
+
const [templates, setTemplates] = React63.useState([]);
|
|
5926
|
+
const [loadingSamples, setLoadingSamples] = React63.useState(false);
|
|
5927
|
+
const [loadingTemplates, setLoadingTemplates] = React63.useState(false);
|
|
5928
|
+
const [templatesError, setTemplatesError] = React63.useState(null);
|
|
5929
|
+
const [activeLeftTab, setActiveLeftTab] = React63.useState("templates");
|
|
5930
|
+
const [search, setSearch] = React63.useState("");
|
|
5931
|
+
const [sortKey, setSortKey] = React63.useState("updatedAt");
|
|
5932
|
+
const [activeTags, setActiveTags] = React63.useState([]);
|
|
5933
|
+
const [renameTarget, setRenameTarget] = React63.useState(null);
|
|
5934
|
+
const [pendingSaveAs, setPendingSaveAs] = React63.useState(null);
|
|
5935
|
+
const [newError, setNewError] = React63.useState(null);
|
|
5936
|
+
const [pickerKind, setPickerKind] = React63.useState(null);
|
|
5915
5937
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
5916
5938
|
if (templateId === "empty-email") {
|
|
5917
5939
|
return empty_email_message_default;
|
|
@@ -5922,7 +5944,7 @@ function SamplesDrawer({
|
|
|
5922
5944
|
return null;
|
|
5923
5945
|
});
|
|
5924
5946
|
const withKind = (items, fallback) => items.map((item) => item.kind ? item : __spreadProps(__spreadValues({}, item), { kind: fallback }));
|
|
5925
|
-
|
|
5947
|
+
React63.useEffect(() => {
|
|
5926
5948
|
if (!enabled || !samplesDrawerOpen || !loadSamples) return;
|
|
5927
5949
|
setLoadingSamples(true);
|
|
5928
5950
|
loadSamples().then((results) => {
|
|
@@ -5957,11 +5979,11 @@ function SamplesDrawer({
|
|
|
5957
5979
|
setTemplates((prev) => prev.some((t2) => t2.id === id) ? prev : [...prev, row]);
|
|
5958
5980
|
}
|
|
5959
5981
|
};
|
|
5960
|
-
|
|
5982
|
+
React63.useEffect(() => {
|
|
5961
5983
|
if (!enabled || !loadTemplates) return;
|
|
5962
5984
|
refreshTemplates();
|
|
5963
5985
|
}, [enabled, loadTemplates]);
|
|
5964
|
-
|
|
5986
|
+
React63.useEffect(() => {
|
|
5965
5987
|
const handler = (e) => {
|
|
5966
5988
|
const detail = e.detail;
|
|
5967
5989
|
if (Array.isArray(detail)) setTemplates(withKind(detail, "template"));
|
|
@@ -5969,7 +5991,7 @@ function SamplesDrawer({
|
|
|
5969
5991
|
window.addEventListener("templateListUpdated", handler);
|
|
5970
5992
|
return () => window.removeEventListener("templateListUpdated", handler);
|
|
5971
5993
|
}, []);
|
|
5972
|
-
const { templateRows, sampleRows } =
|
|
5994
|
+
const { templateRows, sampleRows } = React63.useMemo(() => {
|
|
5973
5995
|
const byId = /* @__PURE__ */ new Map();
|
|
5974
5996
|
for (const s of samples) byId.set(s.id, s);
|
|
5975
5997
|
for (const t2 of templates) byId.set(t2.id, t2);
|
|
@@ -5979,14 +6001,14 @@ function SamplesDrawer({
|
|
|
5979
6001
|
sampleRows: all.filter((t2) => t2.kind === "sample")
|
|
5980
6002
|
};
|
|
5981
6003
|
}, [samples, templates]);
|
|
5982
|
-
const allTags =
|
|
6004
|
+
const allTags = React63.useMemo(() => {
|
|
5983
6005
|
var _a2, _b2;
|
|
5984
6006
|
const set = /* @__PURE__ */ new Set();
|
|
5985
6007
|
for (const t2 of templateRows) (_a2 = t2.tags) == null ? void 0 : _a2.forEach((tag) => set.add(tag));
|
|
5986
6008
|
for (const s of sampleRows) (_b2 = s.tags) == null ? void 0 : _b2.forEach((tag) => set.add(tag));
|
|
5987
6009
|
return Array.from(set).sort();
|
|
5988
6010
|
}, [templateRows, sampleRows]);
|
|
5989
|
-
const matchesSearchAndTags =
|
|
6011
|
+
const matchesSearchAndTags = React63.useMemo(() => {
|
|
5990
6012
|
const term = search.trim().toLowerCase();
|
|
5991
6013
|
return (t2) => {
|
|
5992
6014
|
if (term) {
|
|
@@ -6000,11 +6022,11 @@ function SamplesDrawer({
|
|
|
6000
6022
|
return true;
|
|
6001
6023
|
};
|
|
6002
6024
|
}, [search, activeTags]);
|
|
6003
|
-
const filteredTemplates =
|
|
6025
|
+
const filteredTemplates = React63.useMemo(
|
|
6004
6026
|
() => templateRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6005
6027
|
[templateRows, matchesSearchAndTags, sortKey]
|
|
6006
6028
|
);
|
|
6007
|
-
const filteredSamples =
|
|
6029
|
+
const filteredSamples = React63.useMemo(
|
|
6008
6030
|
() => sampleRows.filter(matchesSearchAndTags).slice().sort((a, b) => compareTemplates(a, b, sortKey)),
|
|
6009
6031
|
[sampleRows, matchesSearchAndTags, sortKey]
|
|
6010
6032
|
);
|
|
@@ -6150,7 +6172,7 @@ function SamplesDrawer({
|
|
|
6150
6172
|
return null;
|
|
6151
6173
|
}
|
|
6152
6174
|
const existingSlugs = templates.map((t2) => t2.slug);
|
|
6153
|
-
return /* @__PURE__ */
|
|
6175
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
6154
6176
|
material.Drawer,
|
|
6155
6177
|
{
|
|
6156
6178
|
variant: "persistent",
|
|
@@ -6165,7 +6187,7 @@ function SamplesDrawer({
|
|
|
6165
6187
|
transitionDuration: { enter: enterDuration, exit: exitDuration },
|
|
6166
6188
|
sx: { width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0 }
|
|
6167
6189
|
},
|
|
6168
|
-
/* @__PURE__ */
|
|
6190
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6169
6191
|
material.Stack,
|
|
6170
6192
|
{
|
|
6171
6193
|
py: 1,
|
|
@@ -6175,16 +6197,16 @@ function SamplesDrawer({
|
|
|
6175
6197
|
spacing: 1.5,
|
|
6176
6198
|
sx: { overflowY: "auto" }
|
|
6177
6199
|
},
|
|
6178
|
-
/* @__PURE__ */
|
|
6200
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { pt: 1 } }, /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "h6", component: "h1" }, /* @__PURE__ */ React63__default.default.createElement(react.Trans, { id: "drawer.library" }, "Library")), saveAs && (activeLeftTab === "templates" || activeLeftTab === "samples") && /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
6179
6201
|
material.IconButton,
|
|
6180
6202
|
{
|
|
6181
6203
|
size: "small",
|
|
6182
6204
|
onClick: () => openNewPicker(activeLeftTab === "samples" ? "sample" : "template"),
|
|
6183
6205
|
"aria-label": activeLeftTab === "samples" ? t("drawer.new-sample", "New sample") : t("drawer.new-template", "New template")
|
|
6184
6206
|
},
|
|
6185
|
-
/* @__PURE__ */
|
|
6207
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6186
6208
|
))),
|
|
6187
|
-
/* @__PURE__ */
|
|
6209
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6188
6210
|
material.Tabs,
|
|
6189
6211
|
{
|
|
6190
6212
|
value: activeLeftTab,
|
|
@@ -6192,11 +6214,11 @@ function SamplesDrawer({
|
|
|
6192
6214
|
variant: "fullWidth",
|
|
6193
6215
|
sx: { minHeight: 36, "& .MuiTab-root": { minHeight: 36, minWidth: 0, px: 1, fontSize: 13 } }
|
|
6194
6216
|
},
|
|
6195
|
-
/* @__PURE__ */
|
|
6196
|
-
/* @__PURE__ */
|
|
6197
|
-
/* @__PURE__ */
|
|
6217
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "templates", label: t("drawer.tab.templates", "Templates"), disabled: !loadTemplates }),
|
|
6218
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "samples", label: t("drawer.tab.samples", "Samples") }),
|
|
6219
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tab, { value: "outline", label: t("drawer.tab.outline", "Outline") })
|
|
6198
6220
|
),
|
|
6199
|
-
activeLeftTab === "outline" ? /* @__PURE__ */
|
|
6221
|
+
activeLeftTab === "outline" ? /* @__PURE__ */ React63__default.default.createElement(OutlinePanel, null) : /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
6200
6222
|
material.TextField,
|
|
6201
6223
|
{
|
|
6202
6224
|
size: "small",
|
|
@@ -6204,10 +6226,10 @@ function SamplesDrawer({
|
|
|
6204
6226
|
value: search,
|
|
6205
6227
|
onChange: (e) => setSearch(e.target.value),
|
|
6206
6228
|
InputProps: {
|
|
6207
|
-
startAdornment: /* @__PURE__ */
|
|
6229
|
+
startAdornment: /* @__PURE__ */ React63__default.default.createElement(material.InputAdornment, { position: "start" }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SearchOutlined, { fontSize: "small" }))
|
|
6208
6230
|
}
|
|
6209
6231
|
}
|
|
6210
|
-
), /* @__PURE__ */
|
|
6232
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
6211
6233
|
material.TextField,
|
|
6212
6234
|
{
|
|
6213
6235
|
select: true,
|
|
@@ -6216,8 +6238,8 @@ function SamplesDrawer({
|
|
|
6216
6238
|
value: sortKey,
|
|
6217
6239
|
onChange: (e) => setSortKey(e.target.value)
|
|
6218
6240
|
},
|
|
6219
|
-
SORT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
6220
|
-
), allTags.length > 0 && /* @__PURE__ */
|
|
6241
|
+
SORT_OPTIONS.map((opt) => /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value }, t(opt.labelKey, opt.fallback)))
|
|
6242
|
+
), allTags.length > 0 && /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", sx: { flexWrap: "wrap", gap: 0.5 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
6221
6243
|
material.Chip,
|
|
6222
6244
|
{
|
|
6223
6245
|
label: t("drawer.tag.all", "All"),
|
|
@@ -6227,7 +6249,7 @@ function SamplesDrawer({
|
|
|
6227
6249
|
variant: activeTags.length === 0 ? "filled" : "outlined",
|
|
6228
6250
|
onClick: () => setActiveTags([])
|
|
6229
6251
|
}
|
|
6230
|
-
), allTags.map((tag) => /* @__PURE__ */
|
|
6252
|
+
), allTags.map((tag) => /* @__PURE__ */ React63__default.default.createElement(
|
|
6231
6253
|
material.Chip,
|
|
6232
6254
|
{
|
|
6233
6255
|
key: tag,
|
|
@@ -6238,7 +6260,7 @@ function SamplesDrawer({
|
|
|
6238
6260
|
variant: activeTags.includes(tag) ? "filled" : "outlined",
|
|
6239
6261
|
onClick: () => toggleTag(tag)
|
|
6240
6262
|
}
|
|
6241
|
-
))), activeLeftTab === "templates" ? /* @__PURE__ */
|
|
6263
|
+
))), activeLeftTab === "templates" ? /* @__PURE__ */ React63__default.default.createElement(material.Box, null, loadingTemplates ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React63__default.default.createElement(material.CircularProgress, { size: 24 })) : templatesError ? /* @__PURE__ */ React63__default.default.createElement(material.Alert, { severity: "error", sx: { my: 1 } }, templatesError) : filteredTemplates.length > 0 ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredTemplates.map((template) => /* @__PURE__ */ React63__default.default.createElement(
|
|
6242
6264
|
TemplateRow,
|
|
6243
6265
|
{
|
|
6244
6266
|
key: template.id,
|
|
@@ -6250,7 +6272,7 @@ function SamplesDrawer({
|
|
|
6250
6272
|
onDelete: deleteTemplate ? () => handleDelete(template) : void 0,
|
|
6251
6273
|
onPromote: setTemplateKind ? () => handleSetKind(template, "sample") : void 0
|
|
6252
6274
|
}
|
|
6253
|
-
))) : /* @__PURE__ */
|
|
6275
|
+
))) : /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, templateRows.length === 0 ? t("drawer.no-templates", "No saved templates yet") : t("drawer.no-templates-match", "No templates match your filters"))) : /* @__PURE__ */ React63__default.default.createElement(material.Box, null, loadingSamples ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 2 }, /* @__PURE__ */ React63__default.default.createElement(material.CircularProgress, { size: 24 })) : filteredSamples.length > 0 ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { spacing: 0.25, sx: { width: "100%" } }, filteredSamples.map((sample) => /* @__PURE__ */ React63__default.default.createElement(
|
|
6254
6276
|
TemplateRow,
|
|
6255
6277
|
{
|
|
6256
6278
|
key: sample.id,
|
|
@@ -6262,9 +6284,9 @@ function SamplesDrawer({
|
|
|
6262
6284
|
onDelete: deleteTemplate ? () => handleDelete(sample) : void 0,
|
|
6263
6285
|
onDemote: setTemplateKind ? () => handleSetKind(sample, "template") : void 0
|
|
6264
6286
|
}
|
|
6265
|
-
))) : /* @__PURE__ */
|
|
6287
|
+
))) : /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2", sx: { color: "text.secondary", py: 1 } }, sampleRows.length === 0 ? t("drawer.no-samples", "No samples available") : t("drawer.no-samples-match", "No samples match your filters"))))
|
|
6266
6288
|
)
|
|
6267
|
-
), renameTarget && /* @__PURE__ */
|
|
6289
|
+
), renameTarget && /* @__PURE__ */ React63__default.default.createElement(
|
|
6268
6290
|
RenameDialog,
|
|
6269
6291
|
{
|
|
6270
6292
|
open: !!renameTarget,
|
|
@@ -6274,7 +6296,7 @@ function SamplesDrawer({
|
|
|
6274
6296
|
onClose: () => setRenameTarget(null),
|
|
6275
6297
|
onSubmit: handleRenameSubmit
|
|
6276
6298
|
}
|
|
6277
|
-
), /* @__PURE__ */
|
|
6299
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
6278
6300
|
SaveTemplateDialog,
|
|
6279
6301
|
{
|
|
6280
6302
|
open: !!pendingSaveAs,
|
|
@@ -6287,7 +6309,7 @@ function SamplesDrawer({
|
|
|
6287
6309
|
defaultName: (_b = pendingSaveAs == null ? void 0 : pendingSaveAs.defaultName) != null ? _b : "New Template",
|
|
6288
6310
|
error: newError
|
|
6289
6311
|
}
|
|
6290
|
-
), /* @__PURE__ */
|
|
6312
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
6291
6313
|
NewTemplatePickerDialog,
|
|
6292
6314
|
{
|
|
6293
6315
|
open: pickerKind !== null,
|
|
@@ -6299,6 +6321,66 @@ function SamplesDrawer({
|
|
|
6299
6321
|
}
|
|
6300
6322
|
));
|
|
6301
6323
|
}
|
|
6324
|
+
|
|
6325
|
+
// src/editor/blocks/helpers/block-utils.ts
|
|
6326
|
+
function generateId() {
|
|
6327
|
+
return `block-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
|
|
6328
|
+
}
|
|
6329
|
+
function rekeyBlocks(blocks, rootBlockId) {
|
|
6330
|
+
var _a, _b, _c;
|
|
6331
|
+
const idMap = {};
|
|
6332
|
+
for (const oldId of Object.keys(blocks)) {
|
|
6333
|
+
idMap[oldId] = generateId();
|
|
6334
|
+
}
|
|
6335
|
+
const remapIds = (ids) => ids == null ? void 0 : ids.map((id) => {
|
|
6336
|
+
var _a2;
|
|
6337
|
+
return (_a2 = idMap[id]) != null ? _a2 : id;
|
|
6338
|
+
});
|
|
6339
|
+
const newBlocks = {};
|
|
6340
|
+
for (const [oldId, block] of Object.entries(blocks)) {
|
|
6341
|
+
const b = block;
|
|
6342
|
+
const newId = idMap[oldId];
|
|
6343
|
+
if (b.type === "Container") {
|
|
6344
|
+
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
6345
|
+
data: __spreadProps(__spreadValues({}, b.data), {
|
|
6346
|
+
props: __spreadProps(__spreadValues({}, b.data.props), { childrenIds: remapIds((_a = b.data.props) == null ? void 0 : _a.childrenIds) })
|
|
6347
|
+
})
|
|
6348
|
+
});
|
|
6349
|
+
} else if (b.type === "ColumnsContainer") {
|
|
6350
|
+
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
6351
|
+
data: __spreadProps(__spreadValues({}, b.data), {
|
|
6352
|
+
props: __spreadProps(__spreadValues({}, b.data.props), {
|
|
6353
|
+
columns: (_c = (_b = b.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => __spreadProps(__spreadValues({}, c), {
|
|
6354
|
+
childrenIds: remapIds(c.childrenIds)
|
|
6355
|
+
}))
|
|
6356
|
+
})
|
|
6357
|
+
})
|
|
6358
|
+
});
|
|
6359
|
+
} else {
|
|
6360
|
+
newBlocks[newId] = b;
|
|
6361
|
+
}
|
|
6362
|
+
}
|
|
6363
|
+
return { blocks: newBlocks, newRootId: idMap[rootBlockId] };
|
|
6364
|
+
}
|
|
6365
|
+
function collectBlock(blockId, document2) {
|
|
6366
|
+
var _a, _b, _c, _d, _e;
|
|
6367
|
+
const block = document2[blockId];
|
|
6368
|
+
if (!block) return {};
|
|
6369
|
+
const result = { [blockId]: block };
|
|
6370
|
+
if (block.type === "Container") {
|
|
6371
|
+
for (const childId of (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : []) {
|
|
6372
|
+
Object.assign(result, collectBlock(childId, document2));
|
|
6373
|
+
}
|
|
6374
|
+
}
|
|
6375
|
+
if (block.type === "ColumnsContainer") {
|
|
6376
|
+
for (const col of (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : []) {
|
|
6377
|
+
for (const childId of (_e = col.childrenIds) != null ? _e : []) {
|
|
6378
|
+
Object.assign(result, collectBlock(childId, document2));
|
|
6379
|
+
}
|
|
6380
|
+
}
|
|
6381
|
+
}
|
|
6382
|
+
return result;
|
|
6383
|
+
}
|
|
6302
6384
|
var BUTTON_SX2 = { p: 1.5, display: "flex", flexDirection: "column" };
|
|
6303
6385
|
var ICON_SX = {
|
|
6304
6386
|
mb: 0.75,
|
|
@@ -6311,7 +6393,7 @@ var ICON_SX = {
|
|
|
6311
6393
|
borderColor: "cadet.300"
|
|
6312
6394
|
};
|
|
6313
6395
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
6314
|
-
return /* @__PURE__ */
|
|
6396
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6315
6397
|
material.Button,
|
|
6316
6398
|
{
|
|
6317
6399
|
sx: BUTTON_SX2,
|
|
@@ -6320,14 +6402,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
6320
6402
|
onClick();
|
|
6321
6403
|
}
|
|
6322
6404
|
},
|
|
6323
|
-
/* @__PURE__ */
|
|
6324
|
-
/* @__PURE__ */
|
|
6405
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
6406
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
6325
6407
|
);
|
|
6326
6408
|
}
|
|
6327
6409
|
var BUTTONS = [
|
|
6328
6410
|
{
|
|
6329
6411
|
label: "Heading",
|
|
6330
|
-
icon: /* @__PURE__ */
|
|
6412
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
6331
6413
|
block: () => ({
|
|
6332
6414
|
type: "Heading",
|
|
6333
6415
|
data: {
|
|
@@ -6340,7 +6422,7 @@ var BUTTONS = [
|
|
|
6340
6422
|
},
|
|
6341
6423
|
{
|
|
6342
6424
|
label: "Text",
|
|
6343
|
-
icon: /* @__PURE__ */
|
|
6425
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
6344
6426
|
block: () => ({
|
|
6345
6427
|
type: "Text",
|
|
6346
6428
|
data: {
|
|
@@ -6354,7 +6436,7 @@ var BUTTONS = [
|
|
|
6354
6436
|
},
|
|
6355
6437
|
{
|
|
6356
6438
|
label: "Button",
|
|
6357
|
-
icon: /* @__PURE__ */
|
|
6439
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
6358
6440
|
block: () => ({
|
|
6359
6441
|
type: "Button",
|
|
6360
6442
|
data: {
|
|
@@ -6368,7 +6450,7 @@ var BUTTONS = [
|
|
|
6368
6450
|
},
|
|
6369
6451
|
{
|
|
6370
6452
|
label: "Image",
|
|
6371
|
-
icon: /* @__PURE__ */
|
|
6453
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
6372
6454
|
block: () => ({
|
|
6373
6455
|
type: "Image",
|
|
6374
6456
|
data: {
|
|
@@ -6384,7 +6466,7 @@ var BUTTONS = [
|
|
|
6384
6466
|
},
|
|
6385
6467
|
{
|
|
6386
6468
|
label: "Avatar",
|
|
6387
|
-
icon: /* @__PURE__ */
|
|
6469
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
6388
6470
|
block: () => ({
|
|
6389
6471
|
type: "Avatar",
|
|
6390
6472
|
data: {
|
|
@@ -6398,7 +6480,7 @@ var BUTTONS = [
|
|
|
6398
6480
|
},
|
|
6399
6481
|
{
|
|
6400
6482
|
label: "Personal Signature",
|
|
6401
|
-
icon: /* @__PURE__ */
|
|
6483
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
6402
6484
|
block: () => ({
|
|
6403
6485
|
type: "Signature",
|
|
6404
6486
|
data: {
|
|
@@ -6420,7 +6502,7 @@ var BUTTONS = [
|
|
|
6420
6502
|
},
|
|
6421
6503
|
{
|
|
6422
6504
|
label: "Company Signature",
|
|
6423
|
-
icon: /* @__PURE__ */
|
|
6505
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
6424
6506
|
block: () => ({
|
|
6425
6507
|
type: "Signature",
|
|
6426
6508
|
data: {
|
|
@@ -6440,7 +6522,7 @@ var BUTTONS = [
|
|
|
6440
6522
|
},
|
|
6441
6523
|
{
|
|
6442
6524
|
label: "Divider",
|
|
6443
|
-
icon: /* @__PURE__ */
|
|
6525
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
6444
6526
|
block: () => ({
|
|
6445
6527
|
type: "Divider",
|
|
6446
6528
|
data: {
|
|
@@ -6453,7 +6535,7 @@ var BUTTONS = [
|
|
|
6453
6535
|
},
|
|
6454
6536
|
{
|
|
6455
6537
|
label: "Spacer",
|
|
6456
|
-
icon: /* @__PURE__ */
|
|
6538
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
6457
6539
|
block: () => ({
|
|
6458
6540
|
type: "Spacer",
|
|
6459
6541
|
data: {}
|
|
@@ -6461,7 +6543,7 @@ var BUTTONS = [
|
|
|
6461
6543
|
},
|
|
6462
6544
|
{
|
|
6463
6545
|
label: "Html",
|
|
6464
|
-
icon: /* @__PURE__ */
|
|
6546
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
6465
6547
|
block: () => ({
|
|
6466
6548
|
type: "Html",
|
|
6467
6549
|
data: {
|
|
@@ -6476,7 +6558,7 @@ var BUTTONS = [
|
|
|
6476
6558
|
},
|
|
6477
6559
|
{
|
|
6478
6560
|
label: "Columns",
|
|
6479
|
-
icon: /* @__PURE__ */
|
|
6561
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
6480
6562
|
block: () => ({
|
|
6481
6563
|
type: "ColumnsContainer",
|
|
6482
6564
|
data: {
|
|
@@ -6491,7 +6573,7 @@ var BUTTONS = [
|
|
|
6491
6573
|
},
|
|
6492
6574
|
{
|
|
6493
6575
|
label: "Container",
|
|
6494
|
-
icon: /* @__PURE__ */
|
|
6576
|
+
icon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
6495
6577
|
block: () => ({
|
|
6496
6578
|
type: "Container",
|
|
6497
6579
|
data: {
|
|
@@ -6519,6 +6601,7 @@ var LABEL_KEYS = {
|
|
|
6519
6601
|
Container: "block-add.container"
|
|
6520
6602
|
};
|
|
6521
6603
|
function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
6604
|
+
const { customBlocks } = useEditorConfig();
|
|
6522
6605
|
const onClose = () => {
|
|
6523
6606
|
setAnchorEl(null);
|
|
6524
6607
|
};
|
|
@@ -6526,10 +6609,26 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6526
6609
|
onSelect(block);
|
|
6527
6610
|
setAnchorEl(null);
|
|
6528
6611
|
};
|
|
6612
|
+
const onCustomBlockClick = (customBlock) => {
|
|
6613
|
+
const { blocks: rekeyed, newRootId } = rekeyBlocks(customBlock.blocks, customBlock.rootBlockId);
|
|
6614
|
+
const rootBlock = rekeyed[newRootId];
|
|
6615
|
+
const extraBlocks = {};
|
|
6616
|
+
for (const [id, block] of Object.entries(rekeyed)) {
|
|
6617
|
+
if (id !== newRootId) {
|
|
6618
|
+
extraBlocks[id] = block;
|
|
6619
|
+
}
|
|
6620
|
+
}
|
|
6621
|
+
if (Object.keys(extraBlocks).length > 0) {
|
|
6622
|
+
setDocument(extraBlocks);
|
|
6623
|
+
}
|
|
6624
|
+
onSelect(rootBlock);
|
|
6625
|
+
setAnchorEl(null);
|
|
6626
|
+
};
|
|
6529
6627
|
if (anchorEl === null) {
|
|
6530
6628
|
return null;
|
|
6531
6629
|
}
|
|
6532
|
-
|
|
6630
|
+
const hasCustomBlocks = customBlocks && customBlocks.length > 0;
|
|
6631
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6533
6632
|
material.Menu,
|
|
6534
6633
|
{
|
|
6535
6634
|
open: true,
|
|
@@ -6538,7 +6637,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6538
6637
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
6539
6638
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
6540
6639
|
},
|
|
6541
|
-
/* @__PURE__ */
|
|
6640
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React63__default.default.createElement(
|
|
6542
6641
|
BlockTypeButton,
|
|
6543
6642
|
{
|
|
6544
6643
|
key: i,
|
|
@@ -6546,12 +6645,24 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
6546
6645
|
icon: k.icon,
|
|
6547
6646
|
onClick: () => onClick(k.block())
|
|
6548
6647
|
}
|
|
6549
|
-
)))
|
|
6648
|
+
))),
|
|
6649
|
+
hasCustomBlocks && /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(material.Divider, { sx: { my: 1 } }), /* @__PURE__ */ React63__default.default.createElement(material.Typography, { variant: "caption", sx: { px: 2, py: 0.5, color: "text.secondary" } }, t("block-add.custom-blocks", "Custom blocks")), /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, customBlocks.map((cb, i) => {
|
|
6650
|
+
var _a;
|
|
6651
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6652
|
+
BlockTypeButton,
|
|
6653
|
+
{
|
|
6654
|
+
key: `custom-${i}`,
|
|
6655
|
+
label: cb.label,
|
|
6656
|
+
icon: (_a = cb.icon) != null ? _a : /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.WidgetsOutlined, null),
|
|
6657
|
+
onClick: () => onCustomBlockClick(cb)
|
|
6658
|
+
}
|
|
6659
|
+
);
|
|
6660
|
+
})))
|
|
6550
6661
|
);
|
|
6551
6662
|
}
|
|
6552
6663
|
function DividerButton({ buttonElement, onClick }) {
|
|
6553
|
-
const [visible, setVisible] =
|
|
6554
|
-
|
|
6664
|
+
const [visible, setVisible] = React63.useState(false);
|
|
6665
|
+
React63.useEffect(() => {
|
|
6555
6666
|
function listener({ clientX, clientY }) {
|
|
6556
6667
|
if (!buttonElement) {
|
|
6557
6668
|
return;
|
|
@@ -6573,7 +6684,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6573
6684
|
window.removeEventListener("mousemove", listener);
|
|
6574
6685
|
};
|
|
6575
6686
|
}, [buttonElement, setVisible]);
|
|
6576
|
-
return /* @__PURE__ */
|
|
6687
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React63__default.default.createElement(
|
|
6577
6688
|
material.IconButton,
|
|
6578
6689
|
{
|
|
6579
6690
|
size: "small",
|
|
@@ -6596,11 +6707,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
6596
6707
|
onClick();
|
|
6597
6708
|
}
|
|
6598
6709
|
},
|
|
6599
|
-
/* @__PURE__ */
|
|
6710
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
6600
6711
|
));
|
|
6601
6712
|
}
|
|
6602
6713
|
function PlaceholderButton({ onClick }) {
|
|
6603
|
-
return /* @__PURE__ */
|
|
6714
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6604
6715
|
material.ButtonBase,
|
|
6605
6716
|
{
|
|
6606
6717
|
onClick: (ev) => {
|
|
@@ -6616,7 +6727,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
6616
6727
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
6617
6728
|
}
|
|
6618
6729
|
},
|
|
6619
|
-
/* @__PURE__ */
|
|
6730
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6620
6731
|
iconsMaterial.AddOutlined,
|
|
6621
6732
|
{
|
|
6622
6733
|
sx: {
|
|
@@ -6633,38 +6744,38 @@ function PlaceholderButton({ onClick }) {
|
|
|
6633
6744
|
|
|
6634
6745
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
6635
6746
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
6636
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
6637
|
-
const [buttonElement, setButtonElement] =
|
|
6747
|
+
const [menuAnchorEl, setMenuAnchorEl] = React63.useState(null);
|
|
6748
|
+
const [buttonElement, setButtonElement] = React63.useState(null);
|
|
6638
6749
|
const handleButtonClick = () => {
|
|
6639
6750
|
setMenuAnchorEl(buttonElement);
|
|
6640
6751
|
};
|
|
6641
6752
|
const renderButton2 = () => {
|
|
6642
6753
|
if (placeholder) {
|
|
6643
|
-
return /* @__PURE__ */
|
|
6754
|
+
return /* @__PURE__ */ React63__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
6644
6755
|
} else {
|
|
6645
|
-
return /* @__PURE__ */
|
|
6756
|
+
return /* @__PURE__ */ React63__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
6646
6757
|
}
|
|
6647
6758
|
};
|
|
6648
|
-
return /* @__PURE__ */
|
|
6759
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React63__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
6649
6760
|
}
|
|
6650
|
-
var BlockParentContext =
|
|
6761
|
+
var BlockParentContext = React63.createContext(null);
|
|
6651
6762
|
function BlockParentProvider({
|
|
6652
6763
|
info,
|
|
6653
6764
|
children
|
|
6654
6765
|
}) {
|
|
6655
|
-
return /* @__PURE__ */
|
|
6766
|
+
return /* @__PURE__ */ React63__default.default.createElement(BlockParentContext.Provider, { value: info }, children);
|
|
6656
6767
|
}
|
|
6657
6768
|
function useBlockParent() {
|
|
6658
|
-
return
|
|
6769
|
+
return React63.useContext(BlockParentContext);
|
|
6659
6770
|
}
|
|
6660
6771
|
|
|
6661
6772
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
6662
|
-
function
|
|
6773
|
+
function generateId2() {
|
|
6663
6774
|
return `block-${Date.now()}`;
|
|
6664
6775
|
}
|
|
6665
6776
|
function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
6666
6777
|
const appendBlock = (block) => {
|
|
6667
|
-
const blockId =
|
|
6778
|
+
const blockId = generateId2();
|
|
6668
6779
|
return onChange({
|
|
6669
6780
|
blockId,
|
|
6670
6781
|
block,
|
|
@@ -6672,7 +6783,7 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6672
6783
|
});
|
|
6673
6784
|
};
|
|
6674
6785
|
const insertBlock = (block, index) => {
|
|
6675
|
-
const blockId =
|
|
6786
|
+
const blockId = generateId2();
|
|
6676
6787
|
const newChildrenIds = [...childrenIds || []];
|
|
6677
6788
|
newChildrenIds.splice(index, 0, blockId);
|
|
6678
6789
|
return onChange({
|
|
@@ -6682,9 +6793,9 @@ function EditorChildrenIds({ childrenIds, onChange, parentRef }) {
|
|
|
6682
6793
|
});
|
|
6683
6794
|
};
|
|
6684
6795
|
if (!childrenIds || childrenIds.length === 0) {
|
|
6685
|
-
return /* @__PURE__ */
|
|
6796
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock }), parentRef && /* @__PURE__ */ React63__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: 0, placeholder: true }));
|
|
6686
6797
|
}
|
|
6687
|
-
return /* @__PURE__ */
|
|
6798
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React63__default.default.createElement(React63.Fragment, { key: childId }, /* @__PURE__ */ React63__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), parentRef && /* @__PURE__ */ React63__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: i }), parentRef ? /* @__PURE__ */ React63__default.default.createElement(BlockParentProvider, { info: { parent: parentRef, indexInParent: i } }, /* @__PURE__ */ React63__default.default.createElement(EditorBlock, { id: childId })) : /* @__PURE__ */ React63__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React63__default.default.createElement(AddBlockButton, { onSelect: appendBlock }), parentRef && /* @__PURE__ */ React63__default.default.createElement(CanvasDropZone, { parentRef, targetIndex: childrenIds.length }));
|
|
6688
6799
|
}
|
|
6689
6800
|
function CanvasDropZone({
|
|
6690
6801
|
parentRef,
|
|
@@ -6693,7 +6804,7 @@ function CanvasDropZone({
|
|
|
6693
6804
|
}) {
|
|
6694
6805
|
const document2 = useDocument();
|
|
6695
6806
|
const dragging = useDraggingBlock();
|
|
6696
|
-
const [over, setOver] =
|
|
6807
|
+
const [over, setOver] = React63.useState(false);
|
|
6697
6808
|
if (!dragging) return null;
|
|
6698
6809
|
if (isDescendant(document2, dragging.sourceId, parentRef.parentId)) return null;
|
|
6699
6810
|
const handleDragOver = (e) => {
|
|
@@ -6721,7 +6832,7 @@ function CanvasDropZone({
|
|
|
6721
6832
|
}
|
|
6722
6833
|
setDraggingBlock(null);
|
|
6723
6834
|
};
|
|
6724
|
-
return /* @__PURE__ */
|
|
6835
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6725
6836
|
material.Box,
|
|
6726
6837
|
{
|
|
6727
6838
|
onDragOver: handleDragOver,
|
|
@@ -6764,13 +6875,13 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6764
6875
|
});
|
|
6765
6876
|
setSelectedBlockId(blockId);
|
|
6766
6877
|
};
|
|
6767
|
-
return /* @__PURE__ */
|
|
6878
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
6768
6879
|
columns_container_default,
|
|
6769
6880
|
{
|
|
6770
6881
|
props: restProps,
|
|
6771
6882
|
style,
|
|
6772
6883
|
columns: [
|
|
6773
|
-
/* @__PURE__ */
|
|
6884
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6774
6885
|
EditorChildrenIds,
|
|
6775
6886
|
{
|
|
6776
6887
|
childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds,
|
|
@@ -6778,7 +6889,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6778
6889
|
onChange: (change) => updateColumn(0, change)
|
|
6779
6890
|
}
|
|
6780
6891
|
),
|
|
6781
|
-
/* @__PURE__ */
|
|
6892
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6782
6893
|
EditorChildrenIds,
|
|
6783
6894
|
{
|
|
6784
6895
|
childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds,
|
|
@@ -6786,7 +6897,7 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
6786
6897
|
onChange: (change) => updateColumn(1, change)
|
|
6787
6898
|
}
|
|
6788
6899
|
),
|
|
6789
|
-
/* @__PURE__ */
|
|
6900
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
6790
6901
|
EditorChildrenIds,
|
|
6791
6902
|
{
|
|
6792
6903
|
childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds,
|
|
@@ -6803,7 +6914,7 @@ function ContainerEditor({ style, props }) {
|
|
|
6803
6914
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
6804
6915
|
const document2 = useDocument();
|
|
6805
6916
|
const currentBlockId = useCurrentBlockId();
|
|
6806
|
-
return /* @__PURE__ */
|
|
6917
|
+
return /* @__PURE__ */ React63__default.default.createElement(container_default, { style }, /* @__PURE__ */ React63__default.default.createElement(
|
|
6807
6918
|
EditorChildrenIds,
|
|
6808
6919
|
{
|
|
6809
6920
|
childrenIds,
|
|
@@ -6823,64 +6934,6 @@ function ContainerEditor({ style, props }) {
|
|
|
6823
6934
|
}
|
|
6824
6935
|
));
|
|
6825
6936
|
}
|
|
6826
|
-
function generateId2() {
|
|
6827
|
-
return `block-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
|
|
6828
|
-
}
|
|
6829
|
-
function rekeyBlocks(blocks, rootBlockId) {
|
|
6830
|
-
var _a, _b, _c;
|
|
6831
|
-
const idMap = {};
|
|
6832
|
-
for (const oldId of Object.keys(blocks)) {
|
|
6833
|
-
idMap[oldId] = generateId2();
|
|
6834
|
-
}
|
|
6835
|
-
const remapIds = (ids) => ids == null ? void 0 : ids.map((id) => {
|
|
6836
|
-
var _a2;
|
|
6837
|
-
return (_a2 = idMap[id]) != null ? _a2 : id;
|
|
6838
|
-
});
|
|
6839
|
-
const newBlocks = {};
|
|
6840
|
-
for (const [oldId, block] of Object.entries(blocks)) {
|
|
6841
|
-
const b = block;
|
|
6842
|
-
const newId = idMap[oldId];
|
|
6843
|
-
if (b.type === "Container") {
|
|
6844
|
-
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
6845
|
-
data: __spreadProps(__spreadValues({}, b.data), {
|
|
6846
|
-
props: __spreadProps(__spreadValues({}, b.data.props), { childrenIds: remapIds((_a = b.data.props) == null ? void 0 : _a.childrenIds) })
|
|
6847
|
-
})
|
|
6848
|
-
});
|
|
6849
|
-
} else if (b.type === "ColumnsContainer") {
|
|
6850
|
-
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
6851
|
-
data: __spreadProps(__spreadValues({}, b.data), {
|
|
6852
|
-
props: __spreadProps(__spreadValues({}, b.data.props), {
|
|
6853
|
-
columns: (_c = (_b = b.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => __spreadProps(__spreadValues({}, c), {
|
|
6854
|
-
childrenIds: remapIds(c.childrenIds)
|
|
6855
|
-
}))
|
|
6856
|
-
})
|
|
6857
|
-
})
|
|
6858
|
-
});
|
|
6859
|
-
} else {
|
|
6860
|
-
newBlocks[newId] = b;
|
|
6861
|
-
}
|
|
6862
|
-
}
|
|
6863
|
-
return { blocks: newBlocks, newRootId: idMap[rootBlockId] };
|
|
6864
|
-
}
|
|
6865
|
-
function collectBlock(blockId, document2) {
|
|
6866
|
-
var _a, _b, _c, _d, _e;
|
|
6867
|
-
const block = document2[blockId];
|
|
6868
|
-
if (!block) return {};
|
|
6869
|
-
const result = { [blockId]: block };
|
|
6870
|
-
if (block.type === "Container") {
|
|
6871
|
-
for (const childId of (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : []) {
|
|
6872
|
-
Object.assign(result, collectBlock(childId, document2));
|
|
6873
|
-
}
|
|
6874
|
-
}
|
|
6875
|
-
if (block.type === "ColumnsContainer") {
|
|
6876
|
-
for (const col of (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : []) {
|
|
6877
|
-
for (const childId of (_e = col.childrenIds) != null ? _e : []) {
|
|
6878
|
-
Object.assign(result, collectBlock(childId, document2));
|
|
6879
|
-
}
|
|
6880
|
-
}
|
|
6881
|
-
}
|
|
6882
|
-
return result;
|
|
6883
|
-
}
|
|
6884
6937
|
function getFontFamily7(fontFamily) {
|
|
6885
6938
|
const f = fontFamily != null ? fontFamily : "MODERN_SANS";
|
|
6886
6939
|
switch (f) {
|
|
@@ -6910,7 +6963,7 @@ function EmailLayoutEditor(props) {
|
|
|
6910
6963
|
const document2 = useDocument();
|
|
6911
6964
|
const currentBlockId = useCurrentBlockId();
|
|
6912
6965
|
const selectedBlockId = useSelectedBlockId();
|
|
6913
|
-
const handleDelete =
|
|
6966
|
+
const handleDelete = React63.useCallback((e) => {
|
|
6914
6967
|
var _a2, _b2, _c2;
|
|
6915
6968
|
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
6916
6969
|
if (!selectedBlockId) return;
|
|
@@ -6941,7 +6994,7 @@ function EmailLayoutEditor(props) {
|
|
|
6941
6994
|
delete nDocument[selectedBlockId];
|
|
6942
6995
|
replaceDocument(nDocument);
|
|
6943
6996
|
}, [selectedBlockId, document2]);
|
|
6944
|
-
const handleCopy =
|
|
6997
|
+
const handleCopy = React63.useCallback((e) => {
|
|
6945
6998
|
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
6946
6999
|
if (!selectedBlockId) return;
|
|
6947
7000
|
const target = e.target;
|
|
@@ -6954,7 +7007,7 @@ function EmailLayoutEditor(props) {
|
|
|
6954
7007
|
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
6955
7008
|
navigator.clipboard.writeText(payload);
|
|
6956
7009
|
}, [selectedBlockId, document2]);
|
|
6957
|
-
const handlePaste =
|
|
7010
|
+
const handlePaste = React63.useCallback((e) => __async(null, null, function* () {
|
|
6958
7011
|
var _a2;
|
|
6959
7012
|
const target = e.target;
|
|
6960
7013
|
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
@@ -6985,7 +7038,7 @@ function EmailLayoutEditor(props) {
|
|
|
6985
7038
|
replaceDocument(doc);
|
|
6986
7039
|
setSelectedBlockId(newRootId);
|
|
6987
7040
|
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
6988
|
-
|
|
7041
|
+
React63.useEffect(() => {
|
|
6989
7042
|
window.addEventListener("keydown", handleDelete);
|
|
6990
7043
|
window.addEventListener("keydown", handleCopy);
|
|
6991
7044
|
window.addEventListener("paste", handlePaste);
|
|
@@ -7004,7 +7057,7 @@ function EmailLayoutEditor(props) {
|
|
|
7004
7057
|
lineHeight: "1.5",
|
|
7005
7058
|
margin: "0"
|
|
7006
7059
|
};
|
|
7007
|
-
const editorChildren = /* @__PURE__ */
|
|
7060
|
+
const editorChildren = /* @__PURE__ */ React63__default.default.createElement(
|
|
7008
7061
|
EditorChildrenIds,
|
|
7009
7062
|
{
|
|
7010
7063
|
childrenIds,
|
|
@@ -7031,7 +7084,7 @@ function EmailLayoutEditor(props) {
|
|
|
7031
7084
|
boxShadow: "0 1px 2px rgba(33, 36, 67, 0.05), 0 8px 24px rgba(33, 36, 67, 0.08)"
|
|
7032
7085
|
};
|
|
7033
7086
|
if (props.backdropDisabled) {
|
|
7034
|
-
return /* @__PURE__ */
|
|
7087
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
7035
7088
|
"div",
|
|
7036
7089
|
{
|
|
7037
7090
|
onClick: () => {
|
|
@@ -7043,7 +7096,7 @@ function EmailLayoutEditor(props) {
|
|
|
7043
7096
|
minHeight: "100%"
|
|
7044
7097
|
})
|
|
7045
7098
|
},
|
|
7046
|
-
/* @__PURE__ */
|
|
7099
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
7047
7100
|
"div",
|
|
7048
7101
|
{
|
|
7049
7102
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7051,11 +7104,11 @@ function EmailLayoutEditor(props) {
|
|
|
7051
7104
|
padding: "32px"
|
|
7052
7105
|
})
|
|
7053
7106
|
},
|
|
7054
|
-
/* @__PURE__ */
|
|
7107
|
+
/* @__PURE__ */ React63__default.default.createElement("div", { style: { maxWidth: "600px", margin: "0 auto" } }, editorChildren)
|
|
7055
7108
|
)
|
|
7056
7109
|
);
|
|
7057
7110
|
}
|
|
7058
|
-
return /* @__PURE__ */
|
|
7111
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
7059
7112
|
"div",
|
|
7060
7113
|
{
|
|
7061
7114
|
onClick: () => {
|
|
@@ -7067,7 +7120,7 @@ function EmailLayoutEditor(props) {
|
|
|
7067
7120
|
minHeight: "100%"
|
|
7068
7121
|
})
|
|
7069
7122
|
},
|
|
7070
|
-
/* @__PURE__ */
|
|
7123
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
7071
7124
|
"div",
|
|
7072
7125
|
{
|
|
7073
7126
|
style: __spreadProps(__spreadValues({}, cardStyle), {
|
|
@@ -7075,7 +7128,7 @@ function EmailLayoutEditor(props) {
|
|
|
7075
7128
|
padding: "32px 0"
|
|
7076
7129
|
})
|
|
7077
7130
|
},
|
|
7078
|
-
/* @__PURE__ */
|
|
7131
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
7079
7132
|
"table",
|
|
7080
7133
|
{
|
|
7081
7134
|
align: "center",
|
|
@@ -7099,7 +7152,7 @@ function EmailLayoutEditor(props) {
|
|
|
7099
7152
|
cellPadding: "0",
|
|
7100
7153
|
border: 0
|
|
7101
7154
|
},
|
|
7102
|
-
/* @__PURE__ */
|
|
7155
|
+
/* @__PURE__ */ React63__default.default.createElement("tbody", null, /* @__PURE__ */ React63__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React63__default.default.createElement("td", null, editorChildren)))
|
|
7103
7156
|
)
|
|
7104
7157
|
)
|
|
7105
7158
|
);
|
|
@@ -7259,7 +7312,7 @@ function TuneMenu({ blockId }) {
|
|
|
7259
7312
|
resetDocument(nDocument);
|
|
7260
7313
|
setSelectedBlockId(blockId);
|
|
7261
7314
|
};
|
|
7262
|
-
return /* @__PURE__ */
|
|
7315
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, null, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tune.move-up", "Move up"), placement: "left-start" }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { "aria-label": t("tune.move-up", "Move up"), onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tune.move-down", "Move down"), placement: "left-start" }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { "aria-label": t("tune.move-down", "Move down"), onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tune.copy", "Copy block"), placement: "left-start" }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { "aria-label": t("tune.copy", "Copy block"), onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tune.delete", "Delete"), placement: "left-start" }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { "aria-label": t("tune.delete", "Delete"), onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
7263
7316
|
}
|
|
7264
7317
|
|
|
7265
7318
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
@@ -7268,7 +7321,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7268
7321
|
const hoveredBlockId = useHoveredBlockId();
|
|
7269
7322
|
const draggingBlock = useDraggingBlock();
|
|
7270
7323
|
const blockParent = useBlockParent();
|
|
7271
|
-
const [mouseInside, setMouseInside] =
|
|
7324
|
+
const [mouseInside, setMouseInside] = React63.useState(false);
|
|
7272
7325
|
const blockId = useCurrentBlockId();
|
|
7273
7326
|
const isBeingDragged = (draggingBlock == null ? void 0 : draggingBlock.sourceId) === blockId;
|
|
7274
7327
|
let outline;
|
|
@@ -7281,7 +7334,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7281
7334
|
if (selectedBlockId !== blockId) {
|
|
7282
7335
|
return null;
|
|
7283
7336
|
}
|
|
7284
|
-
return /* @__PURE__ */
|
|
7337
|
+
return /* @__PURE__ */ React63__default.default.createElement(TuneMenu, { blockId });
|
|
7285
7338
|
};
|
|
7286
7339
|
const draggable = Boolean(blockParent) && selectedBlockId !== blockId;
|
|
7287
7340
|
const handleDragStart = (e) => {
|
|
@@ -7294,7 +7347,7 @@ function EditorBlockWrapper({ children }) {
|
|
|
7294
7347
|
const handleDragEnd = () => {
|
|
7295
7348
|
setDraggingBlock(null);
|
|
7296
7349
|
};
|
|
7297
|
-
return /* @__PURE__ */
|
|
7350
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
7298
7351
|
material.Box,
|
|
7299
7352
|
{
|
|
7300
7353
|
draggable,
|
|
@@ -7385,8 +7438,8 @@ function ButtonEditor({ style, props }) {
|
|
|
7385
7438
|
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
7386
7439
|
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
7387
7440
|
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
7388
|
-
const [localText, setLocalText] =
|
|
7389
|
-
|
|
7441
|
+
const [localText, setLocalText] = React63.useState(text);
|
|
7442
|
+
React63.useEffect(() => {
|
|
7390
7443
|
setLocalText(text);
|
|
7391
7444
|
}, [text]);
|
|
7392
7445
|
const padding = getButtonSizePadding2(props);
|
|
@@ -7439,7 +7492,7 @@ function ButtonEditor({ style, props }) {
|
|
|
7439
7492
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7440
7493
|
});
|
|
7441
7494
|
};
|
|
7442
|
-
return /* @__PURE__ */
|
|
7495
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React63__default.default.createElement(
|
|
7443
7496
|
"input",
|
|
7444
7497
|
{
|
|
7445
7498
|
type: "text",
|
|
@@ -7456,18 +7509,18 @@ function ButtonEditor({ style, props }) {
|
|
|
7456
7509
|
}
|
|
7457
7510
|
));
|
|
7458
7511
|
}
|
|
7459
|
-
return /* @__PURE__ */
|
|
7512
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React63__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React63__default.default.createElement("span", null, text)));
|
|
7460
7513
|
}
|
|
7461
7514
|
function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
7462
|
-
const textareaRef =
|
|
7463
|
-
const [selection, setSelection] =
|
|
7464
|
-
const [activePrompt, setActivePrompt] =
|
|
7465
|
-
const pendingSelectionRef =
|
|
7466
|
-
const textRef =
|
|
7467
|
-
|
|
7515
|
+
const textareaRef = React63.useRef(null);
|
|
7516
|
+
const [selection, setSelection] = React63.useState({ start: 0, end: 0 });
|
|
7517
|
+
const [activePrompt, setActivePrompt] = React63.useState("none");
|
|
7518
|
+
const pendingSelectionRef = React63.useRef(null);
|
|
7519
|
+
const textRef = React63.useRef(text);
|
|
7520
|
+
React63.useEffect(() => {
|
|
7468
7521
|
textRef.current = text;
|
|
7469
7522
|
}, [text]);
|
|
7470
|
-
const syncSelection =
|
|
7523
|
+
const syncSelection = React63.useCallback(
|
|
7471
7524
|
(start, end) => {
|
|
7472
7525
|
const next = { start, end };
|
|
7473
7526
|
setSelection(next);
|
|
@@ -7475,7 +7528,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7475
7528
|
},
|
|
7476
7529
|
[trackSelection]
|
|
7477
7530
|
);
|
|
7478
|
-
const trackFocus =
|
|
7531
|
+
const trackFocus = React63.useCallback(
|
|
7479
7532
|
(e) => {
|
|
7480
7533
|
var _a, _b;
|
|
7481
7534
|
const el = e.currentTarget;
|
|
@@ -7485,7 +7538,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7485
7538
|
},
|
|
7486
7539
|
[syncSelection]
|
|
7487
7540
|
);
|
|
7488
|
-
|
|
7541
|
+
React63.useEffect(() => {
|
|
7489
7542
|
const target = pendingSelectionRef.current;
|
|
7490
7543
|
if (!target) return;
|
|
7491
7544
|
const ta = textareaRef.current;
|
|
@@ -7495,7 +7548,7 @@ function useMarkdownToolbar({ text, isSelected, commitText, trackSelection }) {
|
|
|
7495
7548
|
syncSelection(target.start, target.end);
|
|
7496
7549
|
pendingSelectionRef.current = null;
|
|
7497
7550
|
}, [text, syncSelection]);
|
|
7498
|
-
|
|
7551
|
+
React63.useEffect(() => {
|
|
7499
7552
|
if (!isSelected || selection.start === selection.end) {
|
|
7500
7553
|
setActivePrompt("none");
|
|
7501
7554
|
}
|
|
@@ -7650,12 +7703,12 @@ function InlineFormattingToolbar({
|
|
|
7650
7703
|
onFontSubmit,
|
|
7651
7704
|
onPromptCancel
|
|
7652
7705
|
}) {
|
|
7653
|
-
const [url, setUrl] =
|
|
7654
|
-
const [color, setColor] =
|
|
7655
|
-
const [font, setFont] =
|
|
7656
|
-
const urlRef =
|
|
7657
|
-
const colorRef =
|
|
7658
|
-
|
|
7706
|
+
const [url, setUrl] = React63.useState("");
|
|
7707
|
+
const [color, setColor] = React63.useState("#000000");
|
|
7708
|
+
const [font, setFont] = React63.useState(FONT_OPTIONS[0].value);
|
|
7709
|
+
const urlRef = React63.useRef(null);
|
|
7710
|
+
const colorRef = React63.useRef(null);
|
|
7711
|
+
React63.useEffect(() => {
|
|
7659
7712
|
if (activePrompt === "link") {
|
|
7660
7713
|
setUrl("");
|
|
7661
7714
|
setTimeout(() => {
|
|
@@ -7673,7 +7726,7 @@ function InlineFormattingToolbar({
|
|
|
7673
7726
|
}
|
|
7674
7727
|
}, [activePrompt]);
|
|
7675
7728
|
const preventBlur = (e) => e.preventDefault();
|
|
7676
|
-
return /* @__PURE__ */
|
|
7729
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Popper, { open: visible, anchorEl, placement: "top-start", style: { zIndex: 1300 } }, /* @__PURE__ */ React63__default.default.createElement(material.Paper, { elevation: 4, sx: { px: 0.5, py: 0.25, mb: 0.5 }, onMouseDown: preventBlur }, activePrompt === "link" ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
7677
7730
|
material.TextField,
|
|
7678
7731
|
{
|
|
7679
7732
|
inputRef: urlRef,
|
|
@@ -7695,7 +7748,7 @@ function InlineFormattingToolbar({
|
|
|
7695
7748
|
},
|
|
7696
7749
|
sx: { width: 220 }
|
|
7697
7750
|
}
|
|
7698
|
-
)) : activePrompt === "color" ? /* @__PURE__ */
|
|
7751
|
+
)) : activePrompt === "color" ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
7699
7752
|
"input",
|
|
7700
7753
|
{
|
|
7701
7754
|
ref: colorRef,
|
|
@@ -7708,7 +7761,7 @@ function InlineFormattingToolbar({
|
|
|
7708
7761
|
},
|
|
7709
7762
|
style: { width: 40, height: 28, border: "none", padding: 0, background: "transparent", cursor: "pointer" }
|
|
7710
7763
|
}
|
|
7711
|
-
), /* @__PURE__ */
|
|
7764
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" }))) : activePrompt === "font" ? /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 0.5, sx: { px: 0.5, py: 0.25 } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
7712
7765
|
material.Select,
|
|
7713
7766
|
{
|
|
7714
7767
|
value: font,
|
|
@@ -7721,8 +7774,8 @@ function InlineFormattingToolbar({
|
|
|
7721
7774
|
variant: "standard",
|
|
7722
7775
|
sx: { minWidth: 180, fontSize: 13 }
|
|
7723
7776
|
},
|
|
7724
|
-
FONT_OPTIONS.map((opt) => /* @__PURE__ */
|
|
7725
|
-
), /* @__PURE__ */
|
|
7777
|
+
FONT_OPTIONS.map((opt) => /* @__PURE__ */ React63__default.default.createElement(material.MenuItem, { key: opt.value, value: opt.value, sx: { fontFamily: opt.value } }, opt.label))
|
|
7778
|
+
), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onPromptCancel, title: t("common.cancel", "Cancel") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" }))) : /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.25 }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onBold, title: t("toolbar.bold-shortcut", "Bold (Cmd+B)"), "aria-label": t("toolbar.bold", "Bold") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatBoldOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onItalic, title: t("toolbar.italic-shortcut", "Italic (Cmd+I)"), "aria-label": t("toolbar.italic", "Italic") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatItalicOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onUnderline, title: t("toolbar.underline-shortcut", "Underline (Cmd+U)"), "aria-label": t("toolbar.underline", "Underline") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatUnderlinedOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onOverline, title: t("toolbar.overline", "Overline"), "aria-label": t("toolbar.overline", "Overline") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatOverlineOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onColorRequest, title: t("toolbar.text-color", "Text color"), "aria-label": t("toolbar.text-color", "Text color") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FormatColorTextOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onFontRequest, title: t("toolbar.font-family", "Font family"), "aria-label": t("toolbar.font-family", "Font family") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.TextFieldsOutlined, { fontSize: "small" })), /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: onLinkRequest, title: t("toolbar.link-shortcut", "Link (Cmd+K)"), "aria-label": t("toolbar.link", "Link") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.LinkOutlined, { fontSize: "small" })))));
|
|
7726
7779
|
}
|
|
7727
7780
|
|
|
7728
7781
|
// src/editor/blocks/heading/heading-editor.tsx
|
|
@@ -7795,11 +7848,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7795
7848
|
const isSelected = selectedBlockId === blockId;
|
|
7796
7849
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
7797
7850
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
7798
|
-
const [localText, setLocalText] =
|
|
7851
|
+
const [localText, setLocalText] = React63.useState(textContent);
|
|
7799
7852
|
const isMarkdown = (_c = props == null ? void 0 : props.markdown) != null ? _c : false;
|
|
7800
7853
|
const rootBlock = document2.root;
|
|
7801
7854
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
7802
|
-
|
|
7855
|
+
React63.useEffect(() => {
|
|
7803
7856
|
setLocalText(textContent);
|
|
7804
7857
|
}, [textContent]);
|
|
7805
7858
|
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -7845,9 +7898,9 @@ function HeadingEditor({ style, props }) {
|
|
|
7845
7898
|
const handleTextChange = (e) => {
|
|
7846
7899
|
commitText(e.target.value);
|
|
7847
7900
|
};
|
|
7848
|
-
const displayRef =
|
|
7849
|
-
const lastDisplayHeightRef =
|
|
7850
|
-
|
|
7901
|
+
const displayRef = React63.useRef(null);
|
|
7902
|
+
const lastDisplayHeightRef = React63.useRef(0);
|
|
7903
|
+
React63.useLayoutEffect(() => {
|
|
7851
7904
|
if (!isSelected && displayRef.current) {
|
|
7852
7905
|
const h = displayRef.current.offsetHeight;
|
|
7853
7906
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -7873,11 +7926,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7873
7926
|
});
|
|
7874
7927
|
}
|
|
7875
7928
|
});
|
|
7876
|
-
|
|
7929
|
+
React63.useLayoutEffect(() => {
|
|
7877
7930
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
7878
7931
|
}, [localText, isSelected]);
|
|
7879
7932
|
if (isSelected) {
|
|
7880
|
-
return /* @__PURE__ */
|
|
7933
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
7881
7934
|
"textarea",
|
|
7882
7935
|
{
|
|
7883
7936
|
ref: textareaRef,
|
|
@@ -7895,7 +7948,7 @@ function HeadingEditor({ style, props }) {
|
|
|
7895
7948
|
rows: 1,
|
|
7896
7949
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
7897
7950
|
}
|
|
7898
|
-
), /* @__PURE__ */
|
|
7951
|
+
), /* @__PURE__ */ React63__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
7899
7952
|
}
|
|
7900
7953
|
const headingProps = isMarkdown ? {
|
|
7901
7954
|
ref: displayRef,
|
|
@@ -7904,11 +7957,11 @@ function HeadingEditor({ style, props }) {
|
|
|
7904
7957
|
} : { ref: displayRef, style: hStyle, children: textContent };
|
|
7905
7958
|
switch (level) {
|
|
7906
7959
|
case "h1":
|
|
7907
|
-
return /* @__PURE__ */
|
|
7960
|
+
return /* @__PURE__ */ React63__default.default.createElement("h1", __spreadValues({}, headingProps));
|
|
7908
7961
|
case "h2":
|
|
7909
|
-
return /* @__PURE__ */
|
|
7962
|
+
return /* @__PURE__ */ React63__default.default.createElement("h2", __spreadValues({}, headingProps));
|
|
7910
7963
|
case "h3":
|
|
7911
|
-
return /* @__PURE__ */
|
|
7964
|
+
return /* @__PURE__ */ React63__default.default.createElement("h3", __spreadValues({}, headingProps));
|
|
7912
7965
|
}
|
|
7913
7966
|
}
|
|
7914
7967
|
function HtmlEditor({ style, props }) {
|
|
@@ -7917,8 +7970,8 @@ function HtmlEditor({ style, props }) {
|
|
|
7917
7970
|
const selectedBlockId = useSelectedBlockId();
|
|
7918
7971
|
const isSelected = selectedBlockId === blockId;
|
|
7919
7972
|
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
7920
|
-
const [localContents, setLocalContents] =
|
|
7921
|
-
|
|
7973
|
+
const [localContents, setLocalContents] = React63.useState(contents);
|
|
7974
|
+
React63.useEffect(() => {
|
|
7922
7975
|
setLocalContents(contents);
|
|
7923
7976
|
}, [contents]);
|
|
7924
7977
|
const cssStyle = {
|
|
@@ -7973,7 +8026,7 @@ function HtmlEditor({ style, props }) {
|
|
|
7973
8026
|
selectionEnd: (_b2 = el.selectionEnd) != null ? _b2 : el.value.length
|
|
7974
8027
|
});
|
|
7975
8028
|
};
|
|
7976
|
-
return /* @__PURE__ */
|
|
8029
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React63__default.default.createElement(
|
|
7977
8030
|
"textarea",
|
|
7978
8031
|
{
|
|
7979
8032
|
value: localContents,
|
|
@@ -7993,9 +8046,9 @@ function HtmlEditor({ style, props }) {
|
|
|
7993
8046
|
));
|
|
7994
8047
|
}
|
|
7995
8048
|
if (!contents) {
|
|
7996
|
-
return /* @__PURE__ */
|
|
8049
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: cssStyle });
|
|
7997
8050
|
}
|
|
7998
|
-
return /* @__PURE__ */
|
|
8051
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
7999
8052
|
}
|
|
8000
8053
|
function getImageBorderRadius2(shape, size) {
|
|
8001
8054
|
switch (shape) {
|
|
@@ -8028,36 +8081,36 @@ function SignatureEditor({ style, props }) {
|
|
|
8028
8081
|
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
8029
8082
|
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
8030
8083
|
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
8031
|
-
const [localGreeting, setLocalGreeting] =
|
|
8032
|
-
const [localName, setLocalName] =
|
|
8033
|
-
const [localTitle, setLocalTitle] =
|
|
8034
|
-
const [localCompany, setLocalCompany] =
|
|
8035
|
-
const [localAddress, setLocalAddress] =
|
|
8036
|
-
const [localEmail, setLocalEmail] =
|
|
8037
|
-
const [localPhone, setLocalPhone] =
|
|
8038
|
-
const [localWebsite, setLocalWebsite] =
|
|
8039
|
-
|
|
8084
|
+
const [localGreeting, setLocalGreeting] = React63.useState(greeting);
|
|
8085
|
+
const [localName, setLocalName] = React63.useState(name);
|
|
8086
|
+
const [localTitle, setLocalTitle] = React63.useState(title);
|
|
8087
|
+
const [localCompany, setLocalCompany] = React63.useState(company);
|
|
8088
|
+
const [localAddress, setLocalAddress] = React63.useState(address);
|
|
8089
|
+
const [localEmail, setLocalEmail] = React63.useState(email);
|
|
8090
|
+
const [localPhone, setLocalPhone] = React63.useState(phone);
|
|
8091
|
+
const [localWebsite, setLocalWebsite] = React63.useState(website);
|
|
8092
|
+
React63.useEffect(() => {
|
|
8040
8093
|
setLocalGreeting(greeting);
|
|
8041
8094
|
}, [greeting]);
|
|
8042
|
-
|
|
8095
|
+
React63.useEffect(() => {
|
|
8043
8096
|
setLocalName(name);
|
|
8044
8097
|
}, [name]);
|
|
8045
|
-
|
|
8098
|
+
React63.useEffect(() => {
|
|
8046
8099
|
setLocalTitle(title);
|
|
8047
8100
|
}, [title]);
|
|
8048
|
-
|
|
8101
|
+
React63.useEffect(() => {
|
|
8049
8102
|
setLocalCompany(company);
|
|
8050
8103
|
}, [company]);
|
|
8051
|
-
|
|
8104
|
+
React63.useEffect(() => {
|
|
8052
8105
|
setLocalAddress(address);
|
|
8053
8106
|
}, [address]);
|
|
8054
|
-
|
|
8107
|
+
React63.useEffect(() => {
|
|
8055
8108
|
setLocalEmail(email);
|
|
8056
8109
|
}, [email]);
|
|
8057
|
-
|
|
8110
|
+
React63.useEffect(() => {
|
|
8058
8111
|
setLocalPhone(phone);
|
|
8059
8112
|
}, [phone]);
|
|
8060
|
-
|
|
8113
|
+
React63.useEffect(() => {
|
|
8061
8114
|
setLocalWebsite(website);
|
|
8062
8115
|
}, [website]);
|
|
8063
8116
|
const updateProps = (updates) => {
|
|
@@ -8110,7 +8163,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8110
8163
|
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
8111
8164
|
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
|
|
8112
8165
|
};
|
|
8113
|
-
const imageElement = imageUrl ? /* @__PURE__ */
|
|
8166
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React63__default.default.createElement(
|
|
8114
8167
|
"img",
|
|
8115
8168
|
{
|
|
8116
8169
|
src: imageUrl,
|
|
@@ -8128,7 +8181,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8128
8181
|
}
|
|
8129
8182
|
}
|
|
8130
8183
|
) : null;
|
|
8131
|
-
const greetingElement = isSelected ? /* @__PURE__ */
|
|
8184
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React63__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8132
8185
|
"input",
|
|
8133
8186
|
{
|
|
8134
8187
|
value: localGreeting,
|
|
@@ -8139,8 +8192,8 @@ function SignatureEditor({ style, props }) {
|
|
|
8139
8192
|
placeholder: "Greeting (e.g. Best regards,)",
|
|
8140
8193
|
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
8141
8194
|
}
|
|
8142
|
-
)) : greeting ? /* @__PURE__ */
|
|
8143
|
-
const textContent = isSelected ? /* @__PURE__ */
|
|
8195
|
+
)) : greeting ? /* @__PURE__ */ React63__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
8196
|
+
const textContent = isSelected ? /* @__PURE__ */ React63__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8144
8197
|
"input",
|
|
8145
8198
|
{
|
|
8146
8199
|
value: localName,
|
|
@@ -8151,7 +8204,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8151
8204
|
placeholder: "Name",
|
|
8152
8205
|
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
8153
8206
|
}
|
|
8154
|
-
), /* @__PURE__ */
|
|
8207
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8155
8208
|
"input",
|
|
8156
8209
|
{
|
|
8157
8210
|
value: localTitle,
|
|
@@ -8162,7 +8215,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8162
8215
|
placeholder: "Title",
|
|
8163
8216
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8164
8217
|
}
|
|
8165
|
-
), /* @__PURE__ */
|
|
8218
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8166
8219
|
"input",
|
|
8167
8220
|
{
|
|
8168
8221
|
value: localCompany,
|
|
@@ -8173,7 +8226,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8173
8226
|
placeholder: "Company",
|
|
8174
8227
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8175
8228
|
}
|
|
8176
|
-
), /* @__PURE__ */
|
|
8229
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8177
8230
|
"input",
|
|
8178
8231
|
{
|
|
8179
8232
|
value: localAddress,
|
|
@@ -8184,7 +8237,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8184
8237
|
placeholder: "Address",
|
|
8185
8238
|
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
8186
8239
|
}
|
|
8187
|
-
), /* @__PURE__ */
|
|
8240
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8188
8241
|
"input",
|
|
8189
8242
|
{
|
|
8190
8243
|
value: localEmail,
|
|
@@ -8195,7 +8248,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8195
8248
|
placeholder: "Email",
|
|
8196
8249
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
8197
8250
|
}
|
|
8198
|
-
), /* @__PURE__ */
|
|
8251
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8199
8252
|
"input",
|
|
8200
8253
|
{
|
|
8201
8254
|
value: localPhone,
|
|
@@ -8206,7 +8259,7 @@ function SignatureEditor({ style, props }) {
|
|
|
8206
8259
|
placeholder: "Phone",
|
|
8207
8260
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8208
8261
|
}
|
|
8209
|
-
), /* @__PURE__ */
|
|
8262
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8210
8263
|
"input",
|
|
8211
8264
|
{
|
|
8212
8265
|
value: localWebsite,
|
|
@@ -8217,11 +8270,11 @@ function SignatureEditor({ style, props }) {
|
|
|
8217
8270
|
placeholder: "Website",
|
|
8218
8271
|
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
8219
8272
|
}
|
|
8220
|
-
)) : /* @__PURE__ */
|
|
8273
|
+
)) : /* @__PURE__ */ React63__default.default.createElement("div", null, name && /* @__PURE__ */ React63__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React63__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React63__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React63__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React63__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React63__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React63__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React63__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
8221
8274
|
if (layout === "vertical") {
|
|
8222
|
-
return /* @__PURE__ */
|
|
8275
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React63__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
8223
8276
|
}
|
|
8224
|
-
return /* @__PURE__ */
|
|
8277
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React63__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React63__default.default.createElement("tbody", null, /* @__PURE__ */ React63__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React63__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React63__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
8225
8278
|
}
|
|
8226
8279
|
function getFontFamily10(fontFamily) {
|
|
8227
8280
|
switch (fontFamily) {
|
|
@@ -8281,11 +8334,11 @@ function TextEditor({ style, props }) {
|
|
|
8281
8334
|
const document2 = useDocument();
|
|
8282
8335
|
const isSelected = selectedBlockId === blockId;
|
|
8283
8336
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
8284
|
-
const [localText, setLocalText] =
|
|
8337
|
+
const [localText, setLocalText] = React63.useState(textContent);
|
|
8285
8338
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
8286
8339
|
const rootBlock = document2.root;
|
|
8287
8340
|
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
8288
|
-
|
|
8341
|
+
React63.useEffect(() => {
|
|
8289
8342
|
setLocalText(textContent);
|
|
8290
8343
|
}, [textContent]);
|
|
8291
8344
|
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
@@ -8333,9 +8386,9 @@ function TextEditor({ style, props }) {
|
|
|
8333
8386
|
const handleTextChange = (e) => {
|
|
8334
8387
|
commitText(e.target.value);
|
|
8335
8388
|
};
|
|
8336
|
-
const displayRef =
|
|
8337
|
-
const lastDisplayHeightRef =
|
|
8338
|
-
|
|
8389
|
+
const displayRef = React63.useRef(null);
|
|
8390
|
+
const lastDisplayHeightRef = React63.useRef(0);
|
|
8391
|
+
React63.useLayoutEffect(() => {
|
|
8339
8392
|
if (!isSelected && displayRef.current) {
|
|
8340
8393
|
const h = displayRef.current.offsetHeight;
|
|
8341
8394
|
if (h > 0) lastDisplayHeightRef.current = h;
|
|
@@ -8361,11 +8414,11 @@ function TextEditor({ style, props }) {
|
|
|
8361
8414
|
});
|
|
8362
8415
|
}
|
|
8363
8416
|
});
|
|
8364
|
-
|
|
8417
|
+
React63.useLayoutEffect(() => {
|
|
8365
8418
|
if (textareaRef.current) adjustTextareaHeight(textareaRef.current);
|
|
8366
8419
|
}, [localText, isSelected]);
|
|
8367
8420
|
if (isSelected) {
|
|
8368
|
-
return /* @__PURE__ */
|
|
8421
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
8369
8422
|
"textarea",
|
|
8370
8423
|
{
|
|
8371
8424
|
ref: textareaRef,
|
|
@@ -8383,10 +8436,10 @@ function TextEditor({ style, props }) {
|
|
|
8383
8436
|
rows: 1,
|
|
8384
8437
|
onInput: (e) => adjustTextareaHeight(e.target)
|
|
8385
8438
|
}
|
|
8386
|
-
), /* @__PURE__ */
|
|
8439
|
+
), /* @__PURE__ */ React63__default.default.createElement(InlineFormattingToolbar, __spreadValues({ anchorEl: textareaRef.current }, toolbarProps)));
|
|
8387
8440
|
}
|
|
8388
8441
|
if (isMarkdown) {
|
|
8389
|
-
return /* @__PURE__ */
|
|
8442
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
8390
8443
|
"div",
|
|
8391
8444
|
{
|
|
8392
8445
|
ref: displayRef,
|
|
@@ -8395,34 +8448,34 @@ function TextEditor({ style, props }) {
|
|
|
8395
8448
|
}
|
|
8396
8449
|
);
|
|
8397
8450
|
}
|
|
8398
|
-
return /* @__PURE__ */
|
|
8451
|
+
return /* @__PURE__ */ React63__default.default.createElement("div", { ref: displayRef, style: wStyle }, textContent);
|
|
8399
8452
|
}
|
|
8400
8453
|
|
|
8401
8454
|
// src/editor/core.tsx
|
|
8402
8455
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
8403
8456
|
Avatar: {
|
|
8404
8457
|
schema: AvatarPropsSchema,
|
|
8405
|
-
Component: (props) => /* @__PURE__ */
|
|
8458
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
8406
8459
|
},
|
|
8407
8460
|
Button: {
|
|
8408
8461
|
schema: ButtonPropsSchema,
|
|
8409
|
-
Component: (props) => /* @__PURE__ */
|
|
8462
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
8410
8463
|
},
|
|
8411
8464
|
Container: {
|
|
8412
8465
|
schema: container_props_schema_default,
|
|
8413
|
-
Component: (props) => /* @__PURE__ */
|
|
8466
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
8414
8467
|
},
|
|
8415
8468
|
ColumnsContainer: {
|
|
8416
8469
|
schema: columns_container_props_schema_default2,
|
|
8417
|
-
Component: (props) => /* @__PURE__ */
|
|
8470
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
8418
8471
|
},
|
|
8419
8472
|
Heading: {
|
|
8420
8473
|
schema: HeadingPropsSchema,
|
|
8421
|
-
Component: (props) => /* @__PURE__ */
|
|
8474
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
8422
8475
|
},
|
|
8423
8476
|
Html: {
|
|
8424
8477
|
schema: HtmlPropsSchema,
|
|
8425
|
-
Component: (props) => /* @__PURE__ */
|
|
8478
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
8426
8479
|
},
|
|
8427
8480
|
Image: {
|
|
8428
8481
|
schema: ImagePropsSchema,
|
|
@@ -8434,28 +8487,28 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
8434
8487
|
linkHref: null
|
|
8435
8488
|
})
|
|
8436
8489
|
});
|
|
8437
|
-
return /* @__PURE__ */
|
|
8490
|
+
return /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
8438
8491
|
}
|
|
8439
8492
|
},
|
|
8440
8493
|
Text: {
|
|
8441
8494
|
schema: TextPropsSchema,
|
|
8442
|
-
Component: (props) => /* @__PURE__ */
|
|
8495
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
8443
8496
|
},
|
|
8444
8497
|
EmailLayout: {
|
|
8445
8498
|
schema: email_layout_props_schema_default,
|
|
8446
|
-
Component: (p) => /* @__PURE__ */
|
|
8499
|
+
Component: (p) => /* @__PURE__ */ React63__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
8447
8500
|
},
|
|
8448
8501
|
Spacer: {
|
|
8449
8502
|
schema: SpacerPropsSchema,
|
|
8450
|
-
Component: (props) => /* @__PURE__ */
|
|
8503
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
8451
8504
|
},
|
|
8452
8505
|
Divider: {
|
|
8453
8506
|
schema: DividerPropsSchema,
|
|
8454
|
-
Component: (props) => /* @__PURE__ */
|
|
8507
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
8455
8508
|
},
|
|
8456
8509
|
Signature: {
|
|
8457
8510
|
schema: SignaturePropsSchema,
|
|
8458
|
-
Component: (props) => /* @__PURE__ */
|
|
8511
|
+
Component: (props) => /* @__PURE__ */ React63__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React63__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
8459
8512
|
}
|
|
8460
8513
|
});
|
|
8461
8514
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -8463,15 +8516,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
8463
8516
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
8464
8517
|
|
|
8465
8518
|
// src/editor/editor-block.tsx
|
|
8466
|
-
var EditorBlockContext =
|
|
8467
|
-
var useCurrentBlockId = () =>
|
|
8519
|
+
var EditorBlockContext = React63.createContext(null);
|
|
8520
|
+
var useCurrentBlockId = () => React63.useContext(EditorBlockContext);
|
|
8468
8521
|
function EditorBlock({ id }) {
|
|
8469
8522
|
const document2 = useDocument();
|
|
8470
8523
|
const block = document2[id];
|
|
8471
8524
|
if (!block) {
|
|
8472
8525
|
throw new Error("Could not find block");
|
|
8473
8526
|
}
|
|
8474
|
-
return /* @__PURE__ */
|
|
8527
|
+
return /* @__PURE__ */ React63__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React63__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
8475
8528
|
}
|
|
8476
8529
|
function ToggleInspectorPanelButton() {
|
|
8477
8530
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -8479,20 +8532,20 @@ function ToggleInspectorPanelButton() {
|
|
|
8479
8532
|
toggleInspectorDrawerOpen();
|
|
8480
8533
|
};
|
|
8481
8534
|
if (inspectorDrawerOpen) {
|
|
8482
|
-
return /* @__PURE__ */
|
|
8535
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
8483
8536
|
}
|
|
8484
|
-
return /* @__PURE__ */
|
|
8537
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
8485
8538
|
}
|
|
8486
8539
|
function useIcon() {
|
|
8487
8540
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
8488
8541
|
if (samplesDrawerOpen) {
|
|
8489
|
-
return /* @__PURE__ */
|
|
8542
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
8490
8543
|
}
|
|
8491
|
-
return /* @__PURE__ */
|
|
8544
|
+
return /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
8492
8545
|
}
|
|
8493
8546
|
function ToggleSamplesPanelButton() {
|
|
8494
8547
|
const icon = useIcon();
|
|
8495
|
-
return /* @__PURE__ */
|
|
8548
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
8496
8549
|
}
|
|
8497
8550
|
function formatHtml(html2, spaces = 2) {
|
|
8498
8551
|
try {
|
|
@@ -8540,8 +8593,8 @@ function json(value) {
|
|
|
8540
8593
|
|
|
8541
8594
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
8542
8595
|
function HighlightedCodePanel({ type, value }) {
|
|
8543
|
-
const [code, setCode] =
|
|
8544
|
-
|
|
8596
|
+
const [code, setCode] = React63.useState(null);
|
|
8597
|
+
React63.useEffect(() => {
|
|
8545
8598
|
switch (type) {
|
|
8546
8599
|
case "html":
|
|
8547
8600
|
html(value).then(setCode);
|
|
@@ -8554,7 +8607,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8554
8607
|
if (code === null) {
|
|
8555
8608
|
return null;
|
|
8556
8609
|
}
|
|
8557
|
-
return /* @__PURE__ */
|
|
8610
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
8558
8611
|
"pre",
|
|
8559
8612
|
{
|
|
8560
8613
|
style: {
|
|
@@ -8579,18 +8632,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
8579
8632
|
// src/app/email-canvas/html-panel.tsx
|
|
8580
8633
|
function HtmlPanel() {
|
|
8581
8634
|
const document2 = useDocument();
|
|
8582
|
-
const code =
|
|
8583
|
-
return /* @__PURE__ */
|
|
8635
|
+
const code = React63.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
8636
|
+
return /* @__PURE__ */ React63__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
8584
8637
|
}
|
|
8585
8638
|
function JsonPanel() {
|
|
8586
8639
|
const document2 = useDocument();
|
|
8587
|
-
const code =
|
|
8588
|
-
return /* @__PURE__ */
|
|
8640
|
+
const code = React63.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
8641
|
+
return /* @__PURE__ */ React63__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
8589
8642
|
}
|
|
8590
8643
|
function TextPanel() {
|
|
8591
8644
|
const document2 = useDocument();
|
|
8592
|
-
const text =
|
|
8593
|
-
return /* @__PURE__ */
|
|
8645
|
+
const text = React63.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
8646
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
8594
8647
|
"pre",
|
|
8595
8648
|
{
|
|
8596
8649
|
style: {
|
|
@@ -8626,35 +8679,35 @@ function MainTabsGroup() {
|
|
|
8626
8679
|
setSelectedMainTab("editor");
|
|
8627
8680
|
}
|
|
8628
8681
|
};
|
|
8629
|
-
return /* @__PURE__ */
|
|
8682
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8630
8683
|
material.Tab,
|
|
8631
8684
|
{
|
|
8632
8685
|
value: "editor",
|
|
8633
|
-
label: /* @__PURE__ */
|
|
8686
|
+
label: /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tab.edit", "Edit") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
8634
8687
|
}
|
|
8635
|
-
), /* @__PURE__ */
|
|
8688
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8636
8689
|
material.Tab,
|
|
8637
8690
|
{
|
|
8638
8691
|
value: "preview",
|
|
8639
|
-
label: /* @__PURE__ */
|
|
8692
|
+
label: /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tab.preview", "Preview") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
8640
8693
|
}
|
|
8641
|
-
), /* @__PURE__ */
|
|
8694
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8642
8695
|
material.Tab,
|
|
8643
8696
|
{
|
|
8644
8697
|
value: "html",
|
|
8645
|
-
label: /* @__PURE__ */
|
|
8698
|
+
label: /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tab.html-output", "HTML output") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
8646
8699
|
}
|
|
8647
|
-
), /* @__PURE__ */
|
|
8700
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8648
8701
|
material.Tab,
|
|
8649
8702
|
{
|
|
8650
8703
|
value: "text",
|
|
8651
|
-
label: /* @__PURE__ */
|
|
8704
|
+
label: /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tab.text-output", "Plain text output") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
8652
8705
|
}
|
|
8653
|
-
), /* @__PURE__ */
|
|
8706
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8654
8707
|
material.Tab,
|
|
8655
8708
|
{
|
|
8656
8709
|
value: "json",
|
|
8657
|
-
label: /* @__PURE__ */
|
|
8710
|
+
label: /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("tab.json-output", "JSON output") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
8658
8711
|
}
|
|
8659
8712
|
));
|
|
8660
8713
|
}
|
|
@@ -8669,8 +8722,8 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8669
8722
|
} = useEmailEditor();
|
|
8670
8723
|
const { showMessage } = useSnackbar();
|
|
8671
8724
|
const document2 = useDocument();
|
|
8672
|
-
const [dialogMode, setDialogMode] =
|
|
8673
|
-
const [nameError, setNameError] =
|
|
8725
|
+
const [dialogMode, setDialogMode] = React63.useState(null);
|
|
8726
|
+
const [nameError, setNameError] = React63.useState(null);
|
|
8674
8727
|
const hasOpenRow = Boolean(currentTemplateId);
|
|
8675
8728
|
const isSample = currentTemplateKind === "sample";
|
|
8676
8729
|
const primaryLabel = hasOpenRow ? t("savebar.save", "Save") : t("savebar.save-as-new", "Save as new\u2026");
|
|
@@ -8709,7 +8762,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8709
8762
|
return false;
|
|
8710
8763
|
}
|
|
8711
8764
|
});
|
|
8712
|
-
return /* @__PURE__ */
|
|
8765
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
8713
8766
|
material.Box,
|
|
8714
8767
|
{
|
|
8715
8768
|
sx: {
|
|
@@ -8722,7 +8775,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8722
8775
|
pb: 3
|
|
8723
8776
|
}
|
|
8724
8777
|
},
|
|
8725
|
-
/* @__PURE__ */
|
|
8778
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
8726
8779
|
material.Box,
|
|
8727
8780
|
{
|
|
8728
8781
|
sx: {
|
|
@@ -8737,7 +8790,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8737
8790
|
boxShadow: "0 2px 6px rgba(33, 36, 67, 0.06), 0 16px 40px rgba(33, 36, 67, 0.14)"
|
|
8738
8791
|
}
|
|
8739
8792
|
},
|
|
8740
|
-
hasOpenRow && currentTemplateName && /* @__PURE__ */
|
|
8793
|
+
hasOpenRow && currentTemplateName && /* @__PURE__ */ React63__default.default.createElement(
|
|
8741
8794
|
material.Box,
|
|
8742
8795
|
{
|
|
8743
8796
|
sx: {
|
|
@@ -8753,25 +8806,25 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8753
8806
|
title: currentTemplateName
|
|
8754
8807
|
},
|
|
8755
8808
|
isSample ? `${t("savebar.sample-prefix", "Sample")} \xB7 ` : "",
|
|
8756
|
-
/* @__PURE__ */
|
|
8809
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { component: "span", sx: { color: "text.primary", fontWeight: 600 } }, currentTemplateName)
|
|
8757
8810
|
),
|
|
8758
|
-
/* @__PURE__ */
|
|
8811
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: hasOpenRow ? isSample ? t("savebar.save-changes-to-sample", "Save changes to this sample") : t("savebar.save-changes", "Save changes") : t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8759
8812
|
material.Button,
|
|
8760
8813
|
{
|
|
8761
8814
|
variant: "contained",
|
|
8762
8815
|
size: "large",
|
|
8763
|
-
startIcon: /* @__PURE__ */
|
|
8816
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SaveOutlined, null),
|
|
8764
8817
|
onClick: handlePrimary,
|
|
8765
8818
|
sx: { borderRadius: 999, textTransform: "none", px: 2.5, fontSize: 15, fontWeight: 600 }
|
|
8766
8819
|
},
|
|
8767
8820
|
primaryLabel
|
|
8768
8821
|
)),
|
|
8769
|
-
hasOpenRow && saveAs && /* @__PURE__ */
|
|
8822
|
+
hasOpenRow && saveAs && /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("savebar.save-as-new-template", "Save as a new template") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8770
8823
|
material.Button,
|
|
8771
8824
|
{
|
|
8772
8825
|
variant: "outlined",
|
|
8773
8826
|
size: "large",
|
|
8774
|
-
startIcon: /* @__PURE__ */
|
|
8827
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SaveAsOutlined, null),
|
|
8775
8828
|
onClick: () => {
|
|
8776
8829
|
setNameError(null);
|
|
8777
8830
|
setDialogMode("save-as");
|
|
@@ -8780,12 +8833,12 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8780
8833
|
},
|
|
8781
8834
|
t("savebar.save-as", "Save as\u2026")
|
|
8782
8835
|
)),
|
|
8783
|
-
saveAs && /* @__PURE__ */
|
|
8836
|
+
saveAs && /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("savebar.start-fresh", "Start a fresh template") }, /* @__PURE__ */ React63__default.default.createElement(
|
|
8784
8837
|
material.Button,
|
|
8785
8838
|
{
|
|
8786
8839
|
variant: "text",
|
|
8787
8840
|
size: "large",
|
|
8788
|
-
startIcon: /* @__PURE__ */
|
|
8841
|
+
startIcon: /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.AddOutlined, null),
|
|
8789
8842
|
onClick: () => {
|
|
8790
8843
|
setNameError(null);
|
|
8791
8844
|
setDialogMode("new-blank");
|
|
@@ -8795,7 +8848,7 @@ function SaveBar({ loadTemplates, saveAs }) {
|
|
|
8795
8848
|
t("savebar.new", "New")
|
|
8796
8849
|
))
|
|
8797
8850
|
)
|
|
8798
|
-
), /* @__PURE__ */
|
|
8851
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
8799
8852
|
SaveTemplateDialog,
|
|
8800
8853
|
{
|
|
8801
8854
|
open: dialogMode !== null,
|
|
@@ -8832,7 +8885,7 @@ function UndoRedoButtons() {
|
|
|
8832
8885
|
const modKey = mac ? "\u2318" : "Ctrl";
|
|
8833
8886
|
const undoHint = `${modKey}+Z`;
|
|
8834
8887
|
const redoHint = mac ? `${modKey}+\u21E7+Z` : `${modKey}+Shift+Z / ${modKey}+Y`;
|
|
8835
|
-
|
|
8888
|
+
React63.useEffect(() => {
|
|
8836
8889
|
const onKeyDown = (e) => {
|
|
8837
8890
|
const mod = mac ? e.metaKey : e.ctrlKey;
|
|
8838
8891
|
if (!mod) return;
|
|
@@ -8849,7 +8902,7 @@ function UndoRedoButtons() {
|
|
|
8849
8902
|
window.addEventListener("keydown", onKeyDown);
|
|
8850
8903
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
8851
8904
|
}, [mac]);
|
|
8852
|
-
return /* @__PURE__ */
|
|
8905
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 0.5, alignItems: "center" }, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: `${t("undo.tooltip", "Undo")} (${undoHint})` }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
8853
8906
|
material.IconButton,
|
|
8854
8907
|
{
|
|
8855
8908
|
size: "small",
|
|
@@ -8857,8 +8910,8 @@ function UndoRedoButtons() {
|
|
|
8857
8910
|
disabled: !canUndo,
|
|
8858
8911
|
"aria-label": t("undo.label", "Undo")
|
|
8859
8912
|
},
|
|
8860
|
-
/* @__PURE__ */
|
|
8861
|
-
))), /* @__PURE__ */
|
|
8913
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.UndoOutlined, { fontSize: "small" })
|
|
8914
|
+
))), /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: `${t("redo.tooltip", "Redo")} (${redoHint})` }, /* @__PURE__ */ React63__default.default.createElement("span", null, /* @__PURE__ */ React63__default.default.createElement(
|
|
8862
8915
|
material.IconButton,
|
|
8863
8916
|
{
|
|
8864
8917
|
size: "small",
|
|
@@ -8866,7 +8919,7 @@ function UndoRedoButtons() {
|
|
|
8866
8919
|
disabled: !canRedo,
|
|
8867
8920
|
"aria-label": t("redo.label", "Redo")
|
|
8868
8921
|
},
|
|
8869
|
-
/* @__PURE__ */
|
|
8922
|
+
/* @__PURE__ */ React63__default.default.createElement(iconsMaterial.RedoOutlined, { fontSize: "small" })
|
|
8870
8923
|
))));
|
|
8871
8924
|
}
|
|
8872
8925
|
function SubjectInput() {
|
|
@@ -8892,7 +8945,7 @@ function SubjectInput() {
|
|
|
8892
8945
|
selectionEnd: (_b = target.selectionEnd) != null ? _b : target.value.length
|
|
8893
8946
|
});
|
|
8894
8947
|
};
|
|
8895
|
-
return /* @__PURE__ */
|
|
8948
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
8896
8949
|
material.Box,
|
|
8897
8950
|
{
|
|
8898
8951
|
sx: {
|
|
@@ -8909,8 +8962,8 @@ function SubjectInput() {
|
|
|
8909
8962
|
gap: 1.5
|
|
8910
8963
|
}
|
|
8911
8964
|
},
|
|
8912
|
-
/* @__PURE__ */
|
|
8913
|
-
/* @__PURE__ */
|
|
8965
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, t("subject.label", "Subject")),
|
|
8966
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
8914
8967
|
material.InputBase,
|
|
8915
8968
|
{
|
|
8916
8969
|
fullWidth: true,
|
|
@@ -8936,7 +8989,7 @@ function SubjectPreview() {
|
|
|
8936
8989
|
if (!subject) return null;
|
|
8937
8990
|
const samples = buildSampleValueMap((_b = data.variables) != null ? _b : []);
|
|
8938
8991
|
const rendered = substituteSampleValues(subject, samples);
|
|
8939
|
-
return /* @__PURE__ */
|
|
8992
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
8940
8993
|
material.Box,
|
|
8941
8994
|
{
|
|
8942
8995
|
sx: {
|
|
@@ -8953,8 +9006,8 @@ function SubjectPreview() {
|
|
|
8953
9006
|
gap: 1.5
|
|
8954
9007
|
}
|
|
8955
9008
|
},
|
|
8956
|
-
/* @__PURE__ */
|
|
8957
|
-
/* @__PURE__ */
|
|
9009
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { color: "text.secondary", fontSize: 13, fontWeight: 600, minWidth: 56 } }, t("subject.label", "Subject")),
|
|
9010
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { fontSize: 14 } }, rendered)
|
|
8958
9011
|
);
|
|
8959
9012
|
}
|
|
8960
9013
|
function generateId3() {
|
|
@@ -9001,12 +9054,12 @@ function findImageFile(items) {
|
|
|
9001
9054
|
}
|
|
9002
9055
|
function ImageDropPasteHandler({ enabled, children }) {
|
|
9003
9056
|
const { uploadImage } = useImageCallbacks();
|
|
9004
|
-
const wrapperRef =
|
|
9005
|
-
const dragDepth =
|
|
9006
|
-
const [dragging, setDragging] =
|
|
9007
|
-
const [uploading, setUploading] =
|
|
9057
|
+
const wrapperRef = React63.useRef(null);
|
|
9058
|
+
const dragDepth = React63.useRef(0);
|
|
9059
|
+
const [dragging, setDragging] = React63.useState(false);
|
|
9060
|
+
const [uploading, setUploading] = React63.useState(false);
|
|
9008
9061
|
const active = enabled && Boolean(uploadImage);
|
|
9009
|
-
|
|
9062
|
+
React63.useEffect(() => {
|
|
9010
9063
|
if (!active || !uploadImage) return;
|
|
9011
9064
|
const handlePaste = (e) => __async(null, null, function* () {
|
|
9012
9065
|
var _a;
|
|
@@ -9027,7 +9080,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
9027
9080
|
window.addEventListener("paste", handlePaste);
|
|
9028
9081
|
return () => window.removeEventListener("paste", handlePaste);
|
|
9029
9082
|
}, [active, uploadImage]);
|
|
9030
|
-
if (!active) return /* @__PURE__ */
|
|
9083
|
+
if (!active) return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, children);
|
|
9031
9084
|
const onDragEnter = (e) => {
|
|
9032
9085
|
var _a, _b;
|
|
9033
9086
|
if (!Array.from((_b = (_a = e.dataTransfer) == null ? void 0 : _a.items) != null ? _b : []).some((i) => i.kind === "file")) return;
|
|
@@ -9060,7 +9113,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
9060
9113
|
setUploading(false);
|
|
9061
9114
|
}
|
|
9062
9115
|
});
|
|
9063
|
-
return /* @__PURE__ */
|
|
9116
|
+
return /* @__PURE__ */ React63__default.default.createElement(
|
|
9064
9117
|
material.Box,
|
|
9065
9118
|
{
|
|
9066
9119
|
ref: wrapperRef,
|
|
@@ -9071,7 +9124,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
9071
9124
|
sx: { position: "relative" }
|
|
9072
9125
|
},
|
|
9073
9126
|
children,
|
|
9074
|
-
(dragging || uploading) && /* @__PURE__ */
|
|
9127
|
+
(dragging || uploading) && /* @__PURE__ */ React63__default.default.createElement(
|
|
9075
9128
|
material.Box,
|
|
9076
9129
|
{
|
|
9077
9130
|
sx: {
|
|
@@ -9090,7 +9143,7 @@ function ImageDropPasteHandler({ enabled, children }) {
|
|
|
9090
9143
|
zIndex: 10
|
|
9091
9144
|
}
|
|
9092
9145
|
},
|
|
9093
|
-
/* @__PURE__ */
|
|
9146
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1, fontWeight: 600, fontSize: 14 } }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.CloudUploadOutlined, null), uploading ? "Uploading\u2026" : "Drop image to insert")
|
|
9094
9147
|
)
|
|
9095
9148
|
);
|
|
9096
9149
|
}
|
|
@@ -9104,6 +9157,16 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9104
9157
|
const selectedScreenSize = useSelectedScreenSize();
|
|
9105
9158
|
const persistenceEnabled = usePersistenceEnabled();
|
|
9106
9159
|
const workspaceBackground = useWorkspaceBackground();
|
|
9160
|
+
const { onTestSend } = useEditorConfig();
|
|
9161
|
+
const handleTestSend = () => {
|
|
9162
|
+
var _a;
|
|
9163
|
+
if (!onTestSend) return;
|
|
9164
|
+
const root = document2.root;
|
|
9165
|
+
const layoutData = root && root.type === "EmailLayout" ? root.data : void 0;
|
|
9166
|
+
const html2 = renderToStaticMarkup(document2, { rootBlockId: "root" });
|
|
9167
|
+
const text = renderToText(document2, { rootBlockId: "root" });
|
|
9168
|
+
onTestSend({ html: html2, text, subject: (_a = layoutData == null ? void 0 : layoutData.subject) != null ? _a : void 0 });
|
|
9169
|
+
};
|
|
9107
9170
|
let mainBoxSx = {
|
|
9108
9171
|
height: "100%"
|
|
9109
9172
|
};
|
|
@@ -9130,7 +9193,7 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9130
9193
|
var _a;
|
|
9131
9194
|
switch (selectedMainTab) {
|
|
9132
9195
|
case "editor":
|
|
9133
|
-
return /* @__PURE__ */
|
|
9196
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React63__default.default.createElement(EditorBlock, { id: "root" }));
|
|
9134
9197
|
case "preview": {
|
|
9135
9198
|
const rootBlock = document2.root;
|
|
9136
9199
|
const layoutData = rootBlock && rootBlock.type === "EmailLayout" ? rootBlock.data : void 0;
|
|
@@ -9138,18 +9201,18 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9138
9201
|
(_a = layoutData == null ? void 0 : layoutData.variables) != null ? _a : []
|
|
9139
9202
|
);
|
|
9140
9203
|
const previewDoc = applySampleValuesToDocument(document2, samples);
|
|
9141
|
-
return /* @__PURE__ */
|
|
9204
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React63__default.default.createElement(Reader, { document: previewDoc, rootBlockId: "root" }));
|
|
9142
9205
|
}
|
|
9143
9206
|
case "html":
|
|
9144
|
-
return /* @__PURE__ */
|
|
9207
|
+
return /* @__PURE__ */ React63__default.default.createElement(HtmlPanel, null);
|
|
9145
9208
|
case "text":
|
|
9146
|
-
return /* @__PURE__ */
|
|
9209
|
+
return /* @__PURE__ */ React63__default.default.createElement(TextPanel, null);
|
|
9147
9210
|
case "json":
|
|
9148
|
-
return /* @__PURE__ */
|
|
9211
|
+
return /* @__PURE__ */ React63__default.default.createElement(JsonPanel, null);
|
|
9149
9212
|
}
|
|
9150
9213
|
};
|
|
9151
9214
|
const showSaveButtons = persistenceEnabled;
|
|
9152
|
-
return /* @__PURE__ */
|
|
9215
|
+
return /* @__PURE__ */ React63__default.default.createElement(React63__default.default.Fragment, null, /* @__PURE__ */ React63__default.default.createElement(
|
|
9153
9216
|
material.Stack,
|
|
9154
9217
|
{
|
|
9155
9218
|
sx: {
|
|
@@ -9166,10 +9229,10 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9166
9229
|
justifyContent: "space-between",
|
|
9167
9230
|
alignItems: "center"
|
|
9168
9231
|
},
|
|
9169
|
-
samplesDrawerEnabled && /* @__PURE__ */
|
|
9170
|
-
/* @__PURE__ */
|
|
9171
|
-
/* @__PURE__ */
|
|
9172
|
-
), selectedMainTab === "editor" && /* @__PURE__ */
|
|
9232
|
+
samplesDrawerEnabled && /* @__PURE__ */ React63__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
9233
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React63__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React63__default.default.createElement(material.Stack, { direction: "row", spacing: 2, alignItems: "center" }, selectedMainTab === "editor" && /* @__PURE__ */ React63__default.default.createElement(UndoRedoButtons, null), /* @__PURE__ */ React63__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("canvas.desktop-view", "Desktop view") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React63__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("canvas.mobile-view", "Mobile view") }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), onTestSend && /* @__PURE__ */ React63__default.default.createElement(material.Tooltip, { title: t("canvas.send-test", "Send test") }, /* @__PURE__ */ React63__default.default.createElement(material.IconButton, { size: "small", onClick: handleTestSend }, /* @__PURE__ */ React63__default.default.createElement(iconsMaterial.SendOutlined, { fontSize: "small" }))))),
|
|
9234
|
+
/* @__PURE__ */ React63__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
9235
|
+
), selectedMainTab === "editor" && /* @__PURE__ */ React63__default.default.createElement(SubjectInput, null), selectedMainTab === "preview" && /* @__PURE__ */ React63__default.default.createElement(SubjectPreview, null), /* @__PURE__ */ React63__default.default.createElement(ImageDropPasteHandler, { enabled: selectedMainTab === "editor" }, /* @__PURE__ */ React63__default.default.createElement(
|
|
9173
9236
|
material.Box,
|
|
9174
9237
|
{
|
|
9175
9238
|
sx: {
|
|
@@ -9185,8 +9248,8 @@ function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true })
|
|
|
9185
9248
|
background: selectedMainTab === "editor" ? workspaceBackground === "checkerboard" ? WORKSPACE_CHECKERBOARD : WORKSPACE_SOLID : void 0
|
|
9186
9249
|
}
|
|
9187
9250
|
},
|
|
9188
|
-
/* @__PURE__ */
|
|
9189
|
-
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */
|
|
9251
|
+
/* @__PURE__ */ React63__default.default.createElement(material.Box, { sx: { flexGrow: 1 } }, renderMainPanel()),
|
|
9252
|
+
showSaveButtons && selectedMainTab === "editor" && /* @__PURE__ */ React63__default.default.createElement(SaveBar, { loadTemplates, saveAs })
|
|
9190
9253
|
)));
|
|
9191
9254
|
}
|
|
9192
9255
|
|
|
@@ -9223,7 +9286,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
9223
9286
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
9224
9287
|
});
|
|
9225
9288
|
}
|
|
9226
|
-
var EmailEditorInternal =
|
|
9289
|
+
var EmailEditorInternal = React63.forwardRef((props, ref) => {
|
|
9227
9290
|
const {
|
|
9228
9291
|
drawerEnterDuration = 225,
|
|
9229
9292
|
drawerExitDuration = 225,
|
|
@@ -9245,10 +9308,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9245
9308
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
9246
9309
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
9247
9310
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
9248
|
-
const onChangeRef =
|
|
9311
|
+
const onChangeRef = React63.useRef(onChange);
|
|
9249
9312
|
onChangeRef.current = onChange;
|
|
9250
|
-
const prevDocJsonRef =
|
|
9251
|
-
|
|
9313
|
+
const prevDocJsonRef = React63.useRef("");
|
|
9314
|
+
React63.useEffect(() => {
|
|
9252
9315
|
var _a;
|
|
9253
9316
|
const docJson = JSON.stringify(currentDocument);
|
|
9254
9317
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -9256,7 +9319,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9256
9319
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
9257
9320
|
}
|
|
9258
9321
|
}, [currentDocument]);
|
|
9259
|
-
|
|
9322
|
+
React63.useImperativeHandle(ref, () => ({
|
|
9260
9323
|
saveTemplate: () => {
|
|
9261
9324
|
return saveTemplate();
|
|
9262
9325
|
},
|
|
@@ -9268,7 +9331,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9268
9331
|
return getDocument();
|
|
9269
9332
|
}
|
|
9270
9333
|
}));
|
|
9271
|
-
return /* @__PURE__ */
|
|
9334
|
+
return /* @__PURE__ */ React63__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React63__default.default.createElement(
|
|
9272
9335
|
InspectorDrawer,
|
|
9273
9336
|
{
|
|
9274
9337
|
enterDuration: drawerEnterDuration,
|
|
@@ -9277,7 +9340,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9277
9340
|
copyTemplate,
|
|
9278
9341
|
renameTemplate
|
|
9279
9342
|
}
|
|
9280
|
-
), /* @__PURE__ */
|
|
9343
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
9281
9344
|
SamplesDrawer,
|
|
9282
9345
|
{
|
|
9283
9346
|
enterDuration: drawerEnterDuration,
|
|
@@ -9293,7 +9356,7 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9293
9356
|
setTemplateKind,
|
|
9294
9357
|
saveAs
|
|
9295
9358
|
}
|
|
9296
|
-
), /* @__PURE__ */
|
|
9359
|
+
), /* @__PURE__ */ React63__default.default.createElement(
|
|
9297
9360
|
material.Stack,
|
|
9298
9361
|
{
|
|
9299
9362
|
sx: {
|
|
@@ -9302,10 +9365,10 @@ var EmailEditorInternal = React62.forwardRef((props, ref) => {
|
|
|
9302
9365
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
9303
9366
|
}
|
|
9304
9367
|
},
|
|
9305
|
-
/* @__PURE__ */
|
|
9368
|
+
/* @__PURE__ */ React63__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
9306
9369
|
));
|
|
9307
9370
|
});
|
|
9308
|
-
var EmailEditor =
|
|
9371
|
+
var EmailEditor = React63.forwardRef((props, ref) => {
|
|
9309
9372
|
const {
|
|
9310
9373
|
initialTemplate: initialTemplateProp,
|
|
9311
9374
|
initialTemplateId,
|
|
@@ -9329,26 +9392,33 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
9329
9392
|
loadImages,
|
|
9330
9393
|
deleteImage,
|
|
9331
9394
|
theme,
|
|
9332
|
-
locale
|
|
9395
|
+
locale,
|
|
9396
|
+
favoriteColors,
|
|
9397
|
+
customBlocks,
|
|
9398
|
+
onTestSend
|
|
9333
9399
|
} = props;
|
|
9334
9400
|
activateLocale(locale);
|
|
9335
|
-
const resolvedTemplate =
|
|
9401
|
+
const resolvedTemplate = React63.useMemo(
|
|
9336
9402
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
9337
9403
|
[initialTemplateProp]
|
|
9338
9404
|
);
|
|
9339
|
-
const prevTemplateRef =
|
|
9405
|
+
const prevTemplateRef = React63.useRef(void 0);
|
|
9340
9406
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
9341
9407
|
prevTemplateRef.current = resolvedTemplate;
|
|
9342
9408
|
resetDocument(resolvedTemplate);
|
|
9343
9409
|
}
|
|
9344
|
-
|
|
9410
|
+
React63.useEffect(() => {
|
|
9345
9411
|
setPersistenceEnabled(persistenceEnabled);
|
|
9346
9412
|
}, [persistenceEnabled]);
|
|
9347
|
-
const imageCallbacks =
|
|
9413
|
+
const imageCallbacks = React63.useMemo(
|
|
9348
9414
|
() => ({ uploadImage, loadImages, deleteImage }),
|
|
9349
9415
|
[uploadImage, loadImages, deleteImage]
|
|
9350
9416
|
);
|
|
9351
|
-
|
|
9417
|
+
const editorConfig = React63.useMemo(
|
|
9418
|
+
() => ({ favoriteColors, customBlocks, onTestSend }),
|
|
9419
|
+
[favoriteColors, customBlocks, onTestSend]
|
|
9420
|
+
);
|
|
9421
|
+
return /* @__PURE__ */ React63__default.default.createElement(react.I18nProvider, { i18n: core.i18n }, /* @__PURE__ */ React63__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React63__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React63__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React63__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React63__default.default.createElement(EditorConfigProvider, { config: editorConfig }, /* @__PURE__ */ React63__default.default.createElement(ImageCallbacksProvider, { callbacks: imageCallbacks }, /* @__PURE__ */ React63__default.default.createElement(
|
|
9352
9422
|
EmailEditorProvider,
|
|
9353
9423
|
{
|
|
9354
9424
|
initialTemplate: resolvedTemplate,
|
|
@@ -9357,7 +9427,7 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
9357
9427
|
onSave,
|
|
9358
9428
|
onChange
|
|
9359
9429
|
},
|
|
9360
|
-
/* @__PURE__ */
|
|
9430
|
+
/* @__PURE__ */ React63__default.default.createElement(
|
|
9361
9431
|
EmailEditorInternal,
|
|
9362
9432
|
{
|
|
9363
9433
|
ref,
|
|
@@ -9376,7 +9446,7 @@ var EmailEditor = React62.forwardRef((props, ref) => {
|
|
|
9376
9446
|
onChange
|
|
9377
9447
|
}
|
|
9378
9448
|
)
|
|
9379
|
-
))))));
|
|
9449
|
+
)))))));
|
|
9380
9450
|
});
|
|
9381
9451
|
EmailEditor.displayName = "EmailEditor";
|
|
9382
9452
|
EmailEditorInternal.displayName = "EmailEditorInternal";
|