@kontakto/email-template-editor 1.4.0 → 1.5.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 +1396 -423
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +754 -9
- package/dist/index.d.ts +754 -9
- package/dist/index.js +1304 -335
- package/dist/index.js.map +1 -1
- package/package.json +10 -19
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 React72 = require('react');
|
|
6
6
|
var zod = require('zod');
|
|
7
7
|
var server = require('react-dom/server');
|
|
8
8
|
var styles = require('@mui/material/styles');
|
|
@@ -18,7 +18,7 @@ var htmlfy = require('htmlfy');
|
|
|
18
18
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
19
19
|
|
|
20
20
|
var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
|
|
21
|
-
var
|
|
21
|
+
var React72__default = /*#__PURE__*/_interopDefault(React72);
|
|
22
22
|
var hljs__default = /*#__PURE__*/_interopDefault(hljs);
|
|
23
23
|
var jsonHighlighter__default = /*#__PURE__*/_interopDefault(jsonHighlighter);
|
|
24
24
|
var xmlHighlighter__default = /*#__PURE__*/_interopDefault(xmlHighlighter);
|
|
@@ -168,8 +168,8 @@ function renderMarkdownString(str) {
|
|
|
168
168
|
}
|
|
169
169
|
function EmailMarkdown(_a) {
|
|
170
170
|
var _b = _a, { markdown } = _b, props = __objRest(_b, ["markdown"]);
|
|
171
|
-
const data =
|
|
172
|
-
return /* @__PURE__ */
|
|
171
|
+
const data = React72.useMemo(() => renderMarkdownString(markdown), [markdown]);
|
|
172
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", __spreadProps(__spreadValues({}, props), { dangerouslySetInnerHTML: { __html: data } }));
|
|
173
173
|
}
|
|
174
174
|
var FONT_FAMILY_SCHEMA = zod.z.enum([
|
|
175
175
|
"MODERN_SANS",
|
|
@@ -245,9 +245,9 @@ function Text({ style, props }) {
|
|
|
245
245
|
};
|
|
246
246
|
const text = (_f = props == null ? void 0 : props.text) != null ? _f : TextPropsDefaults.text;
|
|
247
247
|
if (props == null ? void 0 : props.markdown) {
|
|
248
|
-
return /* @__PURE__ */
|
|
248
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: text });
|
|
249
249
|
}
|
|
250
|
-
return /* @__PURE__ */
|
|
250
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, text);
|
|
251
251
|
}
|
|
252
252
|
var PADDING_SCHEMA2 = zod.z.object({
|
|
253
253
|
top: zod.z.number(),
|
|
@@ -296,7 +296,7 @@ function Avatar({ style, props }) {
|
|
|
296
296
|
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
297
297
|
padding: getPadding2(style == null ? void 0 : style.padding)
|
|
298
298
|
};
|
|
299
|
-
return /* @__PURE__ */
|
|
299
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72__default.default.createElement(
|
|
300
300
|
"img",
|
|
301
301
|
{
|
|
302
302
|
alt,
|
|
@@ -444,14 +444,14 @@ function Button({ style, props }) {
|
|
|
444
444
|
padding: `${padding[0]}px ${padding[1]}px`,
|
|
445
445
|
textDecoration: "none"
|
|
446
446
|
};
|
|
447
|
-
return /* @__PURE__ */
|
|
447
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement("a", { href: url, style: linkStyle, target: "_blank" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
448
448
|
"span",
|
|
449
449
|
{
|
|
450
450
|
dangerouslySetInnerHTML: {
|
|
451
451
|
__html: `<!--[if mso]><i style="letter-spacing: ${padding[1]}px;mso-font-width:-100%;mso-text-raise:${textRaise}" hidden> </i><![endif]-->`
|
|
452
452
|
}
|
|
453
453
|
}
|
|
454
|
-
), /* @__PURE__ */
|
|
454
|
+
), /* @__PURE__ */ React72__default.default.createElement("span", null, text), /* @__PURE__ */ React72__default.default.createElement(
|
|
455
455
|
"span",
|
|
456
456
|
{
|
|
457
457
|
dangerouslySetInnerHTML: {
|
|
@@ -500,7 +500,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
500
500
|
contentAlignment: (_d = props == null ? void 0 : props.contentAlignment) != null ? _d : ColumnsContainerPropsDefaults.contentAlignment,
|
|
501
501
|
fixedWidths: props == null ? void 0 : props.fixedWidths
|
|
502
502
|
};
|
|
503
|
-
return /* @__PURE__ */
|
|
503
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, /* @__PURE__ */ React72__default.default.createElement(
|
|
504
504
|
"table",
|
|
505
505
|
{
|
|
506
506
|
align: "center",
|
|
@@ -509,7 +509,7 @@ function ColumnsContainer({ style, columns, props }) {
|
|
|
509
509
|
border: 0,
|
|
510
510
|
style: { tableLayout: "fixed", borderCollapse: "collapse" }
|
|
511
511
|
},
|
|
512
|
-
/* @__PURE__ */
|
|
512
|
+
/* @__PURE__ */ React72__default.default.createElement("tbody", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 0, props: blockProps, columns }), /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 1, props: blockProps, columns }), /* @__PURE__ */ React72__default.default.createElement(TableCell, { index: 2, props: blockProps, columns })))
|
|
513
513
|
));
|
|
514
514
|
}
|
|
515
515
|
function TableCell({ index, props, columns }) {
|
|
@@ -527,7 +527,7 @@ function TableCell({ index, props, columns }) {
|
|
|
527
527
|
width: (_d = (_c = props.fixedWidths) == null ? void 0 : _c[index]) != null ? _d : void 0
|
|
528
528
|
};
|
|
529
529
|
const children = (_e = columns && columns[index]) != null ? _e : null;
|
|
530
|
-
return /* @__PURE__ */
|
|
530
|
+
return /* @__PURE__ */ React72__default.default.createElement("td", { style }, children);
|
|
531
531
|
}
|
|
532
532
|
function getPaddingBefore(index, { columnsGap, columnsCount }) {
|
|
533
533
|
if (index === 0) {
|
|
@@ -589,9 +589,9 @@ function Container({ style, children }) {
|
|
|
589
589
|
padding: getPadding5(style == null ? void 0 : style.padding)
|
|
590
590
|
};
|
|
591
591
|
if (!children) {
|
|
592
|
-
return /* @__PURE__ */
|
|
592
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle });
|
|
593
593
|
}
|
|
594
|
-
return /* @__PURE__ */
|
|
594
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, children);
|
|
595
595
|
}
|
|
596
596
|
var container_default = Container;
|
|
597
597
|
var COLOR_SCHEMA5 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
@@ -625,7 +625,7 @@ function Divider({ style, props }) {
|
|
|
625
625
|
};
|
|
626
626
|
const borderTopWidth = (_b = props == null ? void 0 : props.lineHeight) != null ? _b : DividerPropsDefaults.lineHeight;
|
|
627
627
|
const borderTopColor = (_c = props == null ? void 0 : props.lineColor) != null ? _c : DividerPropsDefaults.lineColor;
|
|
628
|
-
return /* @__PURE__ */
|
|
628
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: st }, /* @__PURE__ */ React72__default.default.createElement(
|
|
629
629
|
"hr",
|
|
630
630
|
{
|
|
631
631
|
style: {
|
|
@@ -715,11 +715,11 @@ function Heading({ props, style }) {
|
|
|
715
715
|
};
|
|
716
716
|
switch (level) {
|
|
717
717
|
case "h1":
|
|
718
|
-
return /* @__PURE__ */
|
|
718
|
+
return /* @__PURE__ */ React72__default.default.createElement("h1", { style: hStyle }, text);
|
|
719
719
|
case "h2":
|
|
720
|
-
return /* @__PURE__ */
|
|
720
|
+
return /* @__PURE__ */ React72__default.default.createElement("h2", { style: hStyle }, text);
|
|
721
721
|
case "h3":
|
|
722
|
-
return /* @__PURE__ */
|
|
722
|
+
return /* @__PURE__ */ React72__default.default.createElement("h3", { style: hStyle }, text);
|
|
723
723
|
}
|
|
724
724
|
}
|
|
725
725
|
function getFontSize(level) {
|
|
@@ -801,9 +801,9 @@ function Html({ style, props }) {
|
|
|
801
801
|
padding: getPadding8(style == null ? void 0 : style.padding)
|
|
802
802
|
};
|
|
803
803
|
if (!children) {
|
|
804
|
-
return /* @__PURE__ */
|
|
804
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle });
|
|
805
805
|
}
|
|
806
|
-
return /* @__PURE__ */
|
|
806
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: children } });
|
|
807
807
|
}
|
|
808
808
|
var html_default = Html;
|
|
809
809
|
var PADDING_SCHEMA9 = zod.z.object({
|
|
@@ -839,7 +839,7 @@ function Image({ style, props }) {
|
|
|
839
839
|
const linkHref = (_c = props == null ? void 0 : props.linkHref) != null ? _c : null;
|
|
840
840
|
const width = (_d = props == null ? void 0 : props.width) != null ? _d : void 0;
|
|
841
841
|
const height = (_e = props == null ? void 0 : props.height) != null ? _e : void 0;
|
|
842
|
-
const imageElement = /* @__PURE__ */
|
|
842
|
+
const imageElement = /* @__PURE__ */ React72__default.default.createElement(
|
|
843
843
|
"img",
|
|
844
844
|
{
|
|
845
845
|
alt: (_f = props == null ? void 0 : props.alt) != null ? _f : "",
|
|
@@ -859,11 +859,187 @@ function Image({ style, props }) {
|
|
|
859
859
|
}
|
|
860
860
|
);
|
|
861
861
|
if (!linkHref) {
|
|
862
|
-
return /* @__PURE__ */
|
|
862
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: sectionStyle }, imageElement);
|
|
863
863
|
}
|
|
864
|
-
return /* @__PURE__ */
|
|
864
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: sectionStyle }, /* @__PURE__ */ React72__default.default.createElement("a", { href: linkHref, style: { textDecoration: "none" }, target: "_blank" }, imageElement));
|
|
865
865
|
}
|
|
866
866
|
var image_default = Image;
|
|
867
|
+
var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
868
|
+
"MODERN_SANS",
|
|
869
|
+
"BOOK_SANS",
|
|
870
|
+
"ORGANIC_SANS",
|
|
871
|
+
"GEOMETRIC_SANS",
|
|
872
|
+
"HEAVY_SANS",
|
|
873
|
+
"ROUNDED_SANS",
|
|
874
|
+
"MODERN_SERIF",
|
|
875
|
+
"BOOK_SERIF",
|
|
876
|
+
"MONOSPACE"
|
|
877
|
+
]).nullable().optional();
|
|
878
|
+
function getFontFamily5(fontFamily) {
|
|
879
|
+
switch (fontFamily) {
|
|
880
|
+
case "MODERN_SANS":
|
|
881
|
+
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
882
|
+
case "BOOK_SANS":
|
|
883
|
+
return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
|
|
884
|
+
case "ORGANIC_SANS":
|
|
885
|
+
return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
|
|
886
|
+
case "GEOMETRIC_SANS":
|
|
887
|
+
return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
|
|
888
|
+
case "HEAVY_SANS":
|
|
889
|
+
return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
|
|
890
|
+
case "ROUNDED_SANS":
|
|
891
|
+
return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
|
|
892
|
+
case "MODERN_SERIF":
|
|
893
|
+
return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
|
|
894
|
+
case "BOOK_SERIF":
|
|
895
|
+
return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
|
|
896
|
+
case "MONOSPACE":
|
|
897
|
+
return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
|
|
898
|
+
}
|
|
899
|
+
return void 0;
|
|
900
|
+
}
|
|
901
|
+
var COLOR_SCHEMA8 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
902
|
+
var PADDING_SCHEMA10 = zod.z.object({
|
|
903
|
+
top: zod.z.number(),
|
|
904
|
+
bottom: zod.z.number(),
|
|
905
|
+
right: zod.z.number(),
|
|
906
|
+
left: zod.z.number()
|
|
907
|
+
}).optional().nullable();
|
|
908
|
+
var getPadding10 = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
|
|
909
|
+
var SignaturePropsSchema = zod.z.object({
|
|
910
|
+
style: zod.z.object({
|
|
911
|
+
backgroundColor: COLOR_SCHEMA8,
|
|
912
|
+
fontFamily: FONT_FAMILY_SCHEMA5,
|
|
913
|
+
padding: PADDING_SCHEMA10
|
|
914
|
+
}).optional().nullable(),
|
|
915
|
+
props: zod.z.object({
|
|
916
|
+
greeting: zod.z.string().optional().nullable(),
|
|
917
|
+
name: zod.z.string().optional().nullable(),
|
|
918
|
+
title: zod.z.string().optional().nullable(),
|
|
919
|
+
company: zod.z.string().optional().nullable(),
|
|
920
|
+
address: zod.z.string().optional().nullable(),
|
|
921
|
+
email: zod.z.string().optional().nullable(),
|
|
922
|
+
phone: zod.z.string().optional().nullable(),
|
|
923
|
+
website: zod.z.string().optional().nullable(),
|
|
924
|
+
imageUrl: zod.z.string().optional().nullable(),
|
|
925
|
+
imageSize: zod.z.number().optional().nullable(),
|
|
926
|
+
imageShape: zod.z.enum(["circle", "square", "rounded"]).optional().nullable(),
|
|
927
|
+
layout: zod.z.enum(["horizontal", "vertical"]).optional().nullable(),
|
|
928
|
+
nameColor: COLOR_SCHEMA8,
|
|
929
|
+
textColor: COLOR_SCHEMA8,
|
|
930
|
+
linkColor: COLOR_SCHEMA8
|
|
931
|
+
}).optional().nullable()
|
|
932
|
+
});
|
|
933
|
+
var SignatureProps = SignaturePropsSchema;
|
|
934
|
+
var SignaturePropsDefaults = {
|
|
935
|
+
greeting: "",
|
|
936
|
+
name: "",
|
|
937
|
+
title: "",
|
|
938
|
+
company: "",
|
|
939
|
+
address: "",
|
|
940
|
+
email: "",
|
|
941
|
+
phone: "",
|
|
942
|
+
website: "",
|
|
943
|
+
imageUrl: "",
|
|
944
|
+
imageSize: 64,
|
|
945
|
+
imageShape: "circle",
|
|
946
|
+
layout: "horizontal",
|
|
947
|
+
nameColor: "#262626",
|
|
948
|
+
textColor: "#666666",
|
|
949
|
+
linkColor: "#0079CC"
|
|
950
|
+
};
|
|
951
|
+
function getImageBorderRadius(shape, size) {
|
|
952
|
+
switch (shape) {
|
|
953
|
+
case "circle":
|
|
954
|
+
return size;
|
|
955
|
+
case "rounded":
|
|
956
|
+
return size * 0.125;
|
|
957
|
+
case "square":
|
|
958
|
+
default:
|
|
959
|
+
return void 0;
|
|
960
|
+
}
|
|
961
|
+
}
|
|
962
|
+
function Signature({ style, props }) {
|
|
963
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
964
|
+
const greeting = (_a = props == null ? void 0 : props.greeting) != null ? _a : SignaturePropsDefaults.greeting;
|
|
965
|
+
const name = (_b = props == null ? void 0 : props.name) != null ? _b : SignaturePropsDefaults.name;
|
|
966
|
+
const title = (_c = props == null ? void 0 : props.title) != null ? _c : SignaturePropsDefaults.title;
|
|
967
|
+
const company = (_d = props == null ? void 0 : props.company) != null ? _d : SignaturePropsDefaults.company;
|
|
968
|
+
const address = (_e = props == null ? void 0 : props.address) != null ? _e : SignaturePropsDefaults.address;
|
|
969
|
+
const email = (_f = props == null ? void 0 : props.email) != null ? _f : SignaturePropsDefaults.email;
|
|
970
|
+
const phone = (_g = props == null ? void 0 : props.phone) != null ? _g : SignaturePropsDefaults.phone;
|
|
971
|
+
const website = (_h = props == null ? void 0 : props.website) != null ? _h : SignaturePropsDefaults.website;
|
|
972
|
+
const imageUrl = (_i = props == null ? void 0 : props.imageUrl) != null ? _i : SignaturePropsDefaults.imageUrl;
|
|
973
|
+
const imageSize = (_j = props == null ? void 0 : props.imageSize) != null ? _j : SignaturePropsDefaults.imageSize;
|
|
974
|
+
const imageShape = (_k = props == null ? void 0 : props.imageShape) != null ? _k : SignaturePropsDefaults.imageShape;
|
|
975
|
+
const layout = (_l = props == null ? void 0 : props.layout) != null ? _l : SignaturePropsDefaults.layout;
|
|
976
|
+
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
977
|
+
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
978
|
+
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
979
|
+
const wrapperStyle = {
|
|
980
|
+
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
981
|
+
fontFamily: getFontFamily5(style == null ? void 0 : style.fontFamily),
|
|
982
|
+
padding: getPadding10(style == null ? void 0 : style.padding)
|
|
983
|
+
};
|
|
984
|
+
const greetingStyle = {
|
|
985
|
+
fontSize: 14,
|
|
986
|
+
color: textColor,
|
|
987
|
+
margin: 0,
|
|
988
|
+
marginBottom: 8,
|
|
989
|
+
lineHeight: "1.4",
|
|
990
|
+
fontStyle: "italic"
|
|
991
|
+
};
|
|
992
|
+
const nameStyle = {
|
|
993
|
+
fontSize: 16,
|
|
994
|
+
fontWeight: "bold",
|
|
995
|
+
color: nameColor,
|
|
996
|
+
margin: 0,
|
|
997
|
+
lineHeight: "1.4"
|
|
998
|
+
};
|
|
999
|
+
const detailStyle = {
|
|
1000
|
+
fontSize: 14,
|
|
1001
|
+
color: textColor,
|
|
1002
|
+
margin: 0,
|
|
1003
|
+
lineHeight: "1.4"
|
|
1004
|
+
};
|
|
1005
|
+
const linkStyle = {
|
|
1006
|
+
fontSize: 14,
|
|
1007
|
+
color: linkColor,
|
|
1008
|
+
textDecoration: "none"
|
|
1009
|
+
};
|
|
1010
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React72__default.default.createElement(
|
|
1011
|
+
"img",
|
|
1012
|
+
{
|
|
1013
|
+
src: imageUrl,
|
|
1014
|
+
alt: name || company,
|
|
1015
|
+
width: imageSize,
|
|
1016
|
+
height: imageSize,
|
|
1017
|
+
style: {
|
|
1018
|
+
width: imageSize,
|
|
1019
|
+
height: imageSize,
|
|
1020
|
+
objectFit: "cover",
|
|
1021
|
+
borderRadius: getImageBorderRadius(imageShape, imageSize),
|
|
1022
|
+
display: "block",
|
|
1023
|
+
outline: "none",
|
|
1024
|
+
border: "none"
|
|
1025
|
+
}
|
|
1026
|
+
}
|
|
1027
|
+
) : null;
|
|
1028
|
+
const contactParts = [];
|
|
1029
|
+
if (email) contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "email", href: `mailto:${email}`, style: linkStyle }, email));
|
|
1030
|
+
if (phone) contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "phone", href: `tel:${phone}`, style: linkStyle }, phone));
|
|
1031
|
+
if (website) {
|
|
1032
|
+
const href = website.startsWith("http") ? website : `https://${website}`;
|
|
1033
|
+
contactParts.push(/* @__PURE__ */ React72__default.default.createElement("a", { key: "website", href, style: linkStyle, target: "_blank" }, website));
|
|
1034
|
+
}
|
|
1035
|
+
const textContent = /* @__PURE__ */ React72__default.default.createElement("div", null, name && /* @__PURE__ */ React72__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, address), contactParts.length > 0 && /* @__PURE__ */ React72__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, contactParts.map((part, i) => /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, { key: i }, i > 0 && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), part))));
|
|
1036
|
+
const greetingElement = greeting ? /* @__PURE__ */ React72__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
1037
|
+
if (layout === "vertical") {
|
|
1038
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
1039
|
+
}
|
|
1040
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
1041
|
+
}
|
|
1042
|
+
var signature_default = Signature;
|
|
867
1043
|
var SpacerPropsSchema = zod.z.object({
|
|
868
1044
|
props: zod.z.object({
|
|
869
1045
|
height: zod.z.number().gte(0).optional().nullish()
|
|
@@ -878,13 +1054,13 @@ function Spacer({ props }) {
|
|
|
878
1054
|
const style = {
|
|
879
1055
|
height: (_a = props == null ? void 0 : props.height) != null ? _a : SpacerPropsDefaults.height
|
|
880
1056
|
};
|
|
881
|
-
return /* @__PURE__ */
|
|
1057
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style });
|
|
882
1058
|
}
|
|
883
1059
|
var spacer_default = Spacer;
|
|
884
1060
|
function buildBlockComponent(blocks) {
|
|
885
1061
|
return function BlockComponent({ type, data }) {
|
|
886
1062
|
const Component = blocks[type].Component;
|
|
887
|
-
return /* @__PURE__ */
|
|
1063
|
+
return /* @__PURE__ */ React72__default.default.createElement(Component, __spreadValues({}, data));
|
|
888
1064
|
};
|
|
889
1065
|
}
|
|
890
1066
|
function buildBlockConfigurationSchema(blocks) {
|
|
@@ -921,9 +1097,9 @@ function ColumnsContainerReader({ style, props }) {
|
|
|
921
1097
|
const _a = props != null ? props : {}, { columns } = _a, restProps = __objRest(_a, ["columns"]);
|
|
922
1098
|
let cols = void 0;
|
|
923
1099
|
if (columns) {
|
|
924
|
-
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */
|
|
1100
|
+
cols = columns.map((col) => col.childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
925
1101
|
}
|
|
926
|
-
return /* @__PURE__ */
|
|
1102
|
+
return /* @__PURE__ */ React72__default.default.createElement(columns_container_default, { props: restProps, columns: cols, style });
|
|
927
1103
|
}
|
|
928
1104
|
var ContainerPropsSchema2 = zod.z.object({
|
|
929
1105
|
style: ContainerPropsSchema.shape.style,
|
|
@@ -934,10 +1110,10 @@ var ContainerPropsSchema2 = zod.z.object({
|
|
|
934
1110
|
function ContainerReader({ style, props }) {
|
|
935
1111
|
var _a;
|
|
936
1112
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
937
|
-
return /* @__PURE__ */
|
|
1113
|
+
return /* @__PURE__ */ React72__default.default.createElement(container_default, { style }, childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })));
|
|
938
1114
|
}
|
|
939
|
-
var
|
|
940
|
-
var
|
|
1115
|
+
var COLOR_SCHEMA9 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
1116
|
+
var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
941
1117
|
"MODERN_SANS",
|
|
942
1118
|
"BOOK_SANS",
|
|
943
1119
|
"ORGANIC_SANS",
|
|
@@ -949,15 +1125,15 @@ var FONT_FAMILY_SCHEMA5 = zod.z.enum([
|
|
|
949
1125
|
"MONOSPACE"
|
|
950
1126
|
]).nullable().optional();
|
|
951
1127
|
var EmailLayoutPropsSchema = zod.z.object({
|
|
952
|
-
backdropColor:
|
|
953
|
-
borderColor:
|
|
1128
|
+
backdropColor: COLOR_SCHEMA9,
|
|
1129
|
+
borderColor: COLOR_SCHEMA9,
|
|
954
1130
|
borderRadius: zod.z.number().optional().nullable(),
|
|
955
|
-
canvasColor:
|
|
956
|
-
textColor:
|
|
957
|
-
fontFamily:
|
|
1131
|
+
canvasColor: COLOR_SCHEMA9,
|
|
1132
|
+
textColor: COLOR_SCHEMA9,
|
|
1133
|
+
fontFamily: FONT_FAMILY_SCHEMA6,
|
|
958
1134
|
childrenIds: zod.z.array(zod.z.string()).optional().nullable()
|
|
959
1135
|
});
|
|
960
|
-
function
|
|
1136
|
+
function getFontFamily6(fontFamily) {
|
|
961
1137
|
const f = fontFamily != null ? fontFamily : "MODERN_SANS";
|
|
962
1138
|
switch (f) {
|
|
963
1139
|
case "MODERN_SANS":
|
|
@@ -989,13 +1165,13 @@ function getBorder2({ borderColor }) {
|
|
|
989
1165
|
function EmailLayoutReader(props) {
|
|
990
1166
|
var _a, _b, _c, _d, _e;
|
|
991
1167
|
const childrenIds = (_a = props.childrenIds) != null ? _a : [];
|
|
992
|
-
return /* @__PURE__ */
|
|
1168
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
993
1169
|
"div",
|
|
994
1170
|
{
|
|
995
1171
|
style: {
|
|
996
1172
|
backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
|
|
997
1173
|
color: (_c = props.textColor) != null ? _c : "#262626",
|
|
998
|
-
fontFamily:
|
|
1174
|
+
fontFamily: getFontFamily6(props.fontFamily),
|
|
999
1175
|
fontSize: "16px",
|
|
1000
1176
|
fontWeight: "400",
|
|
1001
1177
|
letterSpacing: "0.15008px",
|
|
@@ -1006,7 +1182,7 @@ function EmailLayoutReader(props) {
|
|
|
1006
1182
|
width: "100%"
|
|
1007
1183
|
}
|
|
1008
1184
|
},
|
|
1009
|
-
/* @__PURE__ */
|
|
1185
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
1010
1186
|
"table",
|
|
1011
1187
|
{
|
|
1012
1188
|
align: "center",
|
|
@@ -1023,19 +1199,19 @@ function EmailLayoutReader(props) {
|
|
|
1023
1199
|
cellPadding: "0",
|
|
1024
1200
|
border: 0
|
|
1025
1201
|
},
|
|
1026
|
-
/* @__PURE__ */
|
|
1202
|
+
/* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, childrenIds.map((childId) => /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { key: childId, id: childId })))))
|
|
1027
1203
|
)
|
|
1028
1204
|
);
|
|
1029
1205
|
}
|
|
1030
1206
|
|
|
1031
1207
|
// src/email-builder/reader/core.tsx
|
|
1032
|
-
var ReaderContext =
|
|
1208
|
+
var ReaderContext = React72.createContext({});
|
|
1033
1209
|
function useReaderDocument() {
|
|
1034
|
-
return
|
|
1210
|
+
return React72.useContext(ReaderContext);
|
|
1035
1211
|
}
|
|
1036
1212
|
function ReaderBlock({ id }) {
|
|
1037
1213
|
const document2 = useReaderDocument();
|
|
1038
|
-
return document2[id] ? /* @__PURE__ */
|
|
1214
|
+
return document2[id] ? /* @__PURE__ */ React72__default.default.createElement(BaseReaderBlock, __spreadValues({}, document2[id])) : null;
|
|
1039
1215
|
}
|
|
1040
1216
|
var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
1041
1217
|
ColumnsContainer: {
|
|
@@ -1082,19 +1258,23 @@ var READER_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
1082
1258
|
Text: {
|
|
1083
1259
|
schema: TextPropsSchema,
|
|
1084
1260
|
Component: Text
|
|
1261
|
+
},
|
|
1262
|
+
Signature: {
|
|
1263
|
+
schema: SignaturePropsSchema,
|
|
1264
|
+
Component: signature_default
|
|
1085
1265
|
}
|
|
1086
1266
|
});
|
|
1087
1267
|
var ReaderBlockSchema = buildBlockConfigurationSchema(READER_DICTIONARY);
|
|
1088
1268
|
var ReaderDocumentSchema = zod.z.record(zod.z.string(), ReaderBlockSchema);
|
|
1089
1269
|
var BaseReaderBlock = buildBlockComponent(READER_DICTIONARY);
|
|
1090
1270
|
function Reader({ document: document2, rootBlockId }) {
|
|
1091
|
-
return /* @__PURE__ */
|
|
1271
|
+
return /* @__PURE__ */ React72__default.default.createElement(ReaderContext.Provider, { value: document2 }, /* @__PURE__ */ React72__default.default.createElement(ReaderBlock, { id: rootBlockId }));
|
|
1092
1272
|
}
|
|
1093
1273
|
|
|
1094
1274
|
// src/email-builder/renderers/render-to-static-markup.tsx
|
|
1095
1275
|
function renderToStaticMarkup(document2, { rootBlockId }) {
|
|
1096
1276
|
return "<!DOCTYPE html>" + server.renderToStaticMarkup(
|
|
1097
|
-
/* @__PURE__ */
|
|
1277
|
+
/* @__PURE__ */ React72__default.default.createElement("html", null, /* @__PURE__ */ React72__default.default.createElement("body", null, /* @__PURE__ */ React72__default.default.createElement(Reader, { document: document2, rootBlockId })))
|
|
1098
1278
|
);
|
|
1099
1279
|
}
|
|
1100
1280
|
|
|
@@ -1835,19 +2015,19 @@ function setSelectedScreenSize(selectedScreenSize) {
|
|
|
1835
2015
|
function setPersistenceEnabled(persistenceEnabled) {
|
|
1836
2016
|
return editorStateStore.setState({ persistenceEnabled });
|
|
1837
2017
|
}
|
|
1838
|
-
var EmailEditorContext =
|
|
2018
|
+
var EmailEditorContext = React72.createContext(null);
|
|
1839
2019
|
var EmailEditorProvider = ({
|
|
1840
2020
|
children,
|
|
1841
2021
|
initialTemplateId = null,
|
|
1842
2022
|
initialTemplateName = null,
|
|
1843
2023
|
onSave
|
|
1844
2024
|
}) => {
|
|
1845
|
-
const [currentTemplateId, setCurrentTemplateId] =
|
|
1846
|
-
const [currentTemplateName, setCurrentTemplateName] =
|
|
1847
|
-
const saveListenersRef =
|
|
1848
|
-
const onSaveRef =
|
|
2025
|
+
const [currentTemplateId, setCurrentTemplateId] = React72.useState(initialTemplateId);
|
|
2026
|
+
const [currentTemplateName, setCurrentTemplateName] = React72.useState(initialTemplateName);
|
|
2027
|
+
const saveListenersRef = React72.useRef([]);
|
|
2028
|
+
const onSaveRef = React72.useRef(onSave);
|
|
1849
2029
|
onSaveRef.current = onSave;
|
|
1850
|
-
const saveTemplate =
|
|
2030
|
+
const saveTemplate = React72.useCallback(() => {
|
|
1851
2031
|
const currentDoc = getDocument();
|
|
1852
2032
|
saveListenersRef.current.forEach((listener) => listener(currentDoc));
|
|
1853
2033
|
if (onSaveRef.current) {
|
|
@@ -1855,7 +2035,7 @@ var EmailEditorProvider = ({
|
|
|
1855
2035
|
}
|
|
1856
2036
|
return currentDoc;
|
|
1857
2037
|
}, []);
|
|
1858
|
-
const loadTemplate =
|
|
2038
|
+
const loadTemplate = React72.useCallback((newTemplate, templateId, templateName) => {
|
|
1859
2039
|
if (templateId !== void 0) {
|
|
1860
2040
|
setCurrentTemplateId(templateId);
|
|
1861
2041
|
}
|
|
@@ -1863,17 +2043,17 @@ var EmailEditorProvider = ({
|
|
|
1863
2043
|
setCurrentTemplateName(templateName);
|
|
1864
2044
|
}
|
|
1865
2045
|
}, []);
|
|
1866
|
-
const setCurrentTemplate =
|
|
2046
|
+
const setCurrentTemplate = React72.useCallback((templateId, templateName) => {
|
|
1867
2047
|
setCurrentTemplateId(templateId);
|
|
1868
2048
|
setCurrentTemplateName(templateName);
|
|
1869
2049
|
}, []);
|
|
1870
|
-
const registerSaveListener =
|
|
2050
|
+
const registerSaveListener = React72.useCallback((callback) => {
|
|
1871
2051
|
saveListenersRef.current = [...saveListenersRef.current, callback];
|
|
1872
2052
|
return () => {
|
|
1873
2053
|
saveListenersRef.current = saveListenersRef.current.filter((listener) => listener !== callback);
|
|
1874
2054
|
};
|
|
1875
2055
|
}, []);
|
|
1876
|
-
const value =
|
|
2056
|
+
const value = React72.useMemo(() => ({
|
|
1877
2057
|
currentTemplateId,
|
|
1878
2058
|
currentTemplateName,
|
|
1879
2059
|
saveTemplate,
|
|
@@ -1881,24 +2061,24 @@ var EmailEditorProvider = ({
|
|
|
1881
2061
|
registerSaveListener,
|
|
1882
2062
|
setCurrentTemplate
|
|
1883
2063
|
}), [currentTemplateId, currentTemplateName, saveTemplate, loadTemplate, registerSaveListener, setCurrentTemplate]);
|
|
1884
|
-
return /* @__PURE__ */
|
|
2064
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailEditorContext.Provider, { value }, children);
|
|
1885
2065
|
};
|
|
1886
2066
|
var useEmailEditor = () => {
|
|
1887
|
-
const context =
|
|
2067
|
+
const context = React72.useContext(EmailEditorContext);
|
|
1888
2068
|
if (!context) {
|
|
1889
2069
|
throw new Error("useEmailEditor must be used within an EmailEditorProvider");
|
|
1890
2070
|
}
|
|
1891
2071
|
return context;
|
|
1892
2072
|
};
|
|
1893
2073
|
function BaseSidebarPanel({ title, children }) {
|
|
1894
|
-
return /* @__PURE__ */
|
|
2074
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { p: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "overline", color: "text.secondary", sx: { display: "block", mb: 2 } }, title), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 5, mb: 3 }, children));
|
|
1895
2075
|
}
|
|
1896
2076
|
function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
1897
|
-
const [value, setValue] =
|
|
1898
|
-
|
|
2077
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2078
|
+
React72.useEffect(() => {
|
|
1899
2079
|
setValue(defaultValue);
|
|
1900
2080
|
}, [defaultValue]);
|
|
1901
|
-
return /* @__PURE__ */
|
|
2081
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
|
|
1902
2082
|
material.ToggleButtonGroup,
|
|
1903
2083
|
{
|
|
1904
2084
|
exclusive: true,
|
|
@@ -1918,7 +2098,7 @@ function RadioGroupInput({ label, children, defaultValue, onChange }) {
|
|
|
1918
2098
|
}
|
|
1919
2099
|
function RawSliderInput(_a) {
|
|
1920
2100
|
var _b = _a, { iconLabel, value, setValue, units } = _b, props = __objRest(_b, ["iconLabel", "value", "setValue", "units"]);
|
|
1921
|
-
return /* @__PURE__ */
|
|
2101
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", alignItems: "center", spacing: 2, justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { minWidth: 24, lineHeight: 1, flexShrink: 0 } }, iconLabel), /* @__PURE__ */ React72__default.default.createElement(
|
|
1922
2102
|
material.Slider,
|
|
1923
2103
|
__spreadProps(__spreadValues({}, props), {
|
|
1924
2104
|
value,
|
|
@@ -1929,14 +2109,14 @@ function RawSliderInput(_a) {
|
|
|
1929
2109
|
setValue(value2);
|
|
1930
2110
|
}
|
|
1931
2111
|
})
|
|
1932
|
-
), /* @__PURE__ */
|
|
2112
|
+
), /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { minWidth: 32, textAlign: "right", flexShrink: 0 } }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary", sx: { lineHeight: 1 } }, value, units)));
|
|
1933
2113
|
}
|
|
1934
2114
|
|
|
1935
2115
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/slider-input.tsx
|
|
1936
2116
|
function SliderInput(_a) {
|
|
1937
2117
|
var _b = _a, { label, defaultValue, onChange } = _b, props = __objRest(_b, ["label", "defaultValue", "onChange"]);
|
|
1938
|
-
const [value, setValue] =
|
|
1939
|
-
return /* @__PURE__ */
|
|
2118
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2119
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
|
|
1940
2120
|
RawSliderInput,
|
|
1941
2121
|
__spreadValues({
|
|
1942
2122
|
value,
|
|
@@ -1948,12 +2128,12 @@ function SliderInput(_a) {
|
|
|
1948
2128
|
));
|
|
1949
2129
|
}
|
|
1950
2130
|
function TextInput({ helperText, label, placeholder, rows, InputProps: InputProps2, defaultValue, onChange }) {
|
|
1951
|
-
const [value, setValue] =
|
|
2131
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
1952
2132
|
const isMultiline = typeof rows === "number" && rows > 1;
|
|
1953
|
-
|
|
2133
|
+
React72.useEffect(() => {
|
|
1954
2134
|
setValue(defaultValue);
|
|
1955
2135
|
}, [defaultValue]);
|
|
1956
|
-
return /* @__PURE__ */
|
|
2136
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
1957
2137
|
material.TextField,
|
|
1958
2138
|
{
|
|
1959
2139
|
fullWidth: true,
|
|
@@ -1979,7 +2159,7 @@ var TILE_BUTTON = {
|
|
|
1979
2159
|
};
|
|
1980
2160
|
function Swatch({ paletteColors, value, onChange }) {
|
|
1981
2161
|
const renderButton2 = (colorValue) => {
|
|
1982
|
-
return /* @__PURE__ */
|
|
2162
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
1983
2163
|
material.Button,
|
|
1984
2164
|
{
|
|
1985
2165
|
key: colorValue,
|
|
@@ -1998,7 +2178,7 @@ function Swatch({ paletteColors, value, onChange }) {
|
|
|
1998
2178
|
}
|
|
1999
2179
|
);
|
|
2000
2180
|
};
|
|
2001
|
-
return /* @__PURE__ */
|
|
2181
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { width: "100%", sx: { display: "grid", gap: 1, gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr" } }, paletteColors.map((c) => renderButton2(c)));
|
|
2002
2182
|
}
|
|
2003
2183
|
|
|
2004
2184
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/picker.tsx
|
|
@@ -2065,7 +2245,7 @@ var SX = {
|
|
|
2065
2245
|
}
|
|
2066
2246
|
};
|
|
2067
2247
|
function Picker({ value, onChange }) {
|
|
2068
|
-
return /* @__PURE__ */
|
|
2248
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, sx: SX }, /* @__PURE__ */ React72__default.default.createElement(reactColorful.HexColorPicker, { color: value, onChange }), /* @__PURE__ */ React72__default.default.createElement(Swatch, { paletteColors: DEFAULT_PRESET_COLORS, value, onChange }), /* @__PURE__ */ React72__default.default.createElement(material.Box, { pt: 1 }, /* @__PURE__ */ React72__default.default.createElement(reactColorful.HexColorInput, { prefixed: true, color: value, onChange })));
|
|
2069
2249
|
}
|
|
2070
2250
|
|
|
2071
2251
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/base-color-input.tsx
|
|
@@ -2078,8 +2258,8 @@ var BUTTON_SX = {
|
|
|
2078
2258
|
bgcolor: "#FFFFFF"
|
|
2079
2259
|
};
|
|
2080
2260
|
function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
2081
|
-
const [anchorEl, setAnchorEl] =
|
|
2082
|
-
const [value, setValue] =
|
|
2261
|
+
const [anchorEl, setAnchorEl] = React72.useState(null);
|
|
2262
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2083
2263
|
const handleClickOpen = (event) => {
|
|
2084
2264
|
setAnchorEl(event.currentTarget);
|
|
2085
2265
|
};
|
|
@@ -2090,7 +2270,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2090
2270
|
if (typeof value !== "string" || value.trim().length === 0) {
|
|
2091
2271
|
return null;
|
|
2092
2272
|
}
|
|
2093
|
-
return /* @__PURE__ */
|
|
2273
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2094
2274
|
material.ButtonBase,
|
|
2095
2275
|
{
|
|
2096
2276
|
onClick: () => {
|
|
@@ -2098,16 +2278,16 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2098
2278
|
onChange(null);
|
|
2099
2279
|
}
|
|
2100
2280
|
},
|
|
2101
|
-
/* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CloseOutlined, { fontSize: "small", sx: { color: "grey.600" } })
|
|
2102
2282
|
);
|
|
2103
2283
|
};
|
|
2104
2284
|
const renderOpenButton = () => {
|
|
2105
2285
|
if (value) {
|
|
2106
|
-
return /* @__PURE__ */
|
|
2286
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadProps(__spreadValues({}, BUTTON_SX), { bgcolor: value }) });
|
|
2107
2287
|
}
|
|
2108
|
-
return /* @__PURE__ */
|
|
2288
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.ButtonBase, { onClick: handleClickOpen, sx: __spreadValues({}, BUTTON_SX) }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" }));
|
|
2109
2289
|
};
|
|
2110
|
-
return /* @__PURE__ */
|
|
2290
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { sx: { mb: 0.5 } }, label), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, renderOpenButton(), renderResetButton()), /* @__PURE__ */ React72__default.default.createElement(
|
|
2111
2291
|
material.Menu,
|
|
2112
2292
|
{
|
|
2113
2293
|
anchorEl,
|
|
@@ -2117,7 +2297,7 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2117
2297
|
sx: { height: "auto", padding: 0 }
|
|
2118
2298
|
}
|
|
2119
2299
|
},
|
|
2120
|
-
/* @__PURE__ */
|
|
2300
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
2121
2301
|
Picker,
|
|
2122
2302
|
{
|
|
2123
2303
|
value: value || "",
|
|
@@ -2132,10 +2312,10 @@ function ColorInput({ label, defaultValue, onChange, nullable }) {
|
|
|
2132
2312
|
|
|
2133
2313
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/color-input/index.tsx
|
|
2134
2314
|
function ColorInput2(props) {
|
|
2135
|
-
return /* @__PURE__ */
|
|
2315
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: false }));
|
|
2136
2316
|
}
|
|
2137
2317
|
function NullableColorInput(props) {
|
|
2138
|
-
return /* @__PURE__ */
|
|
2318
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColorInput, __spreadProps(__spreadValues({}, props), { nullable: true }));
|
|
2139
2319
|
}
|
|
2140
2320
|
|
|
2141
2321
|
// src/editor/blocks/helpers/font-family.ts
|
|
@@ -2188,13 +2368,13 @@ var FONT_FAMILIES = [
|
|
|
2188
2368
|
];
|
|
2189
2369
|
|
|
2190
2370
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/font-family.tsx
|
|
2191
|
-
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */
|
|
2371
|
+
var OPTIONS = FONT_FAMILIES.map((option) => /* @__PURE__ */ React72__default.default.createElement(material.MenuItem, { key: option.key, value: option.key, sx: { fontFamily: option.value } }, option.label));
|
|
2192
2372
|
function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
2193
|
-
const [value, setValue] =
|
|
2194
|
-
|
|
2373
|
+
const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "inherit");
|
|
2374
|
+
React72.useEffect(() => {
|
|
2195
2375
|
setValue(defaultValue != null ? defaultValue : "inherit");
|
|
2196
2376
|
}, [defaultValue]);
|
|
2197
|
-
return /* @__PURE__ */
|
|
2377
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2198
2378
|
material.TextField,
|
|
2199
2379
|
{
|
|
2200
2380
|
select: true,
|
|
@@ -2207,23 +2387,23 @@ function NullableFontFamily({ label, onChange, defaultValue }) {
|
|
|
2207
2387
|
onChange(v === null ? null : v);
|
|
2208
2388
|
}
|
|
2209
2389
|
},
|
|
2210
|
-
/* @__PURE__ */
|
|
2390
|
+
/* @__PURE__ */ React72__default.default.createElement(material.MenuItem, { value: "inherit" }, "Match email settings"),
|
|
2211
2391
|
OPTIONS
|
|
2212
2392
|
);
|
|
2213
2393
|
}
|
|
2214
2394
|
function FontSizeInput({ label, defaultValue, onChange }) {
|
|
2215
|
-
const [value, setValue] =
|
|
2216
|
-
|
|
2395
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2396
|
+
React72.useEffect(() => {
|
|
2217
2397
|
setValue(defaultValue);
|
|
2218
2398
|
}, [defaultValue]);
|
|
2219
2399
|
const handleChange = (value2) => {
|
|
2220
2400
|
setValue(value2);
|
|
2221
2401
|
onChange(value2);
|
|
2222
2402
|
};
|
|
2223
|
-
return /* @__PURE__ */
|
|
2403
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 1, alignItems: "flex-start" }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
|
|
2224
2404
|
RawSliderInput,
|
|
2225
2405
|
{
|
|
2226
|
-
iconLabel: /* @__PURE__ */
|
|
2406
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.TextFieldsOutlined, { sx: { fontSize: 16 } }),
|
|
2227
2407
|
value,
|
|
2228
2408
|
setValue: handleChange,
|
|
2229
2409
|
units: "px",
|
|
@@ -2234,11 +2414,11 @@ function FontSizeInput({ label, defaultValue, onChange }) {
|
|
|
2234
2414
|
));
|
|
2235
2415
|
}
|
|
2236
2416
|
function FontWeightInput({ label, defaultValue, onChange }) {
|
|
2237
|
-
const [value, setValue] =
|
|
2238
|
-
|
|
2417
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
2418
|
+
React72.useEffect(() => {
|
|
2239
2419
|
setValue(defaultValue);
|
|
2240
2420
|
}, [defaultValue]);
|
|
2241
|
-
return /* @__PURE__ */
|
|
2421
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2242
2422
|
RadioGroupInput,
|
|
2243
2423
|
{
|
|
2244
2424
|
label,
|
|
@@ -2248,12 +2428,12 @@ function FontWeightInput({ label, defaultValue, onChange }) {
|
|
|
2248
2428
|
onChange(fontWeight);
|
|
2249
2429
|
}
|
|
2250
2430
|
},
|
|
2251
|
-
/* @__PURE__ */
|
|
2252
|
-
/* @__PURE__ */
|
|
2431
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "normal" }, "Regular"),
|
|
2432
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bold" }, "Bold")
|
|
2253
2433
|
);
|
|
2254
2434
|
}
|
|
2255
2435
|
function PaddingInput({ label, defaultValue, onChange }) {
|
|
2256
|
-
const [value, setValue] =
|
|
2436
|
+
const [value, setValue] = React72.useState(() => {
|
|
2257
2437
|
if (defaultValue) {
|
|
2258
2438
|
return defaultValue;
|
|
2259
2439
|
}
|
|
@@ -2271,10 +2451,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2271
2451
|
setValue(v);
|
|
2272
2452
|
onChange(v);
|
|
2273
2453
|
}
|
|
2274
|
-
return /* @__PURE__ */
|
|
2454
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2, alignItems: "flex-start", pb: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.InputLabel, { shrink: true }, label), /* @__PURE__ */ React72__default.default.createElement(
|
|
2275
2455
|
RawSliderInput,
|
|
2276
2456
|
{
|
|
2277
|
-
iconLabel: /* @__PURE__ */
|
|
2457
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalTopOutlined, { sx: { fontSize: 16 } }),
|
|
2278
2458
|
value: value.top,
|
|
2279
2459
|
setValue: (num) => handleChange("top", num),
|
|
2280
2460
|
units: "px",
|
|
@@ -2283,10 +2463,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2283
2463
|
max: 80,
|
|
2284
2464
|
marks: true
|
|
2285
2465
|
}
|
|
2286
|
-
), /* @__PURE__ */
|
|
2466
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2287
2467
|
RawSliderInput,
|
|
2288
2468
|
{
|
|
2289
|
-
iconLabel: /* @__PURE__ */
|
|
2469
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignVerticalBottomOutlined, { sx: { fontSize: 16 } }),
|
|
2290
2470
|
value: value.bottom,
|
|
2291
2471
|
setValue: (num) => handleChange("bottom", num),
|
|
2292
2472
|
units: "px",
|
|
@@ -2295,10 +2475,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2295
2475
|
max: 80,
|
|
2296
2476
|
marks: true
|
|
2297
2477
|
}
|
|
2298
|
-
), /* @__PURE__ */
|
|
2478
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2299
2479
|
RawSliderInput,
|
|
2300
2480
|
{
|
|
2301
|
-
iconLabel: /* @__PURE__ */
|
|
2481
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalLeftOutlined, { sx: { fontSize: 16 } }),
|
|
2302
2482
|
value: value.left,
|
|
2303
2483
|
setValue: (num) => handleChange("left", num),
|
|
2304
2484
|
units: "px",
|
|
@@ -2307,10 +2487,10 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2307
2487
|
max: 80,
|
|
2308
2488
|
marks: true
|
|
2309
2489
|
}
|
|
2310
|
-
), /* @__PURE__ */
|
|
2490
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2311
2491
|
RawSliderInput,
|
|
2312
2492
|
{
|
|
2313
|
-
iconLabel: /* @__PURE__ */
|
|
2493
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AlignHorizontalRightOutlined, { sx: { fontSize: 16 } }),
|
|
2314
2494
|
value: value.right,
|
|
2315
2495
|
setValue: (num) => handleChange("right", num),
|
|
2316
2496
|
units: "px",
|
|
@@ -2322,11 +2502,11 @@ function PaddingInput({ label, defaultValue, onChange }) {
|
|
|
2322
2502
|
));
|
|
2323
2503
|
}
|
|
2324
2504
|
function TextAlignInput({ label, defaultValue, onChange }) {
|
|
2325
|
-
const [value, setValue] =
|
|
2326
|
-
|
|
2505
|
+
const [value, setValue] = React72.useState(defaultValue != null ? defaultValue : "left");
|
|
2506
|
+
React72.useEffect(() => {
|
|
2327
2507
|
setValue(defaultValue != null ? defaultValue : "left");
|
|
2328
2508
|
}, [defaultValue]);
|
|
2329
|
-
return /* @__PURE__ */
|
|
2509
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2330
2510
|
RadioGroupInput,
|
|
2331
2511
|
{
|
|
2332
2512
|
label,
|
|
@@ -2336,9 +2516,9 @@ function TextAlignInput({ label, defaultValue, onChange }) {
|
|
|
2336
2516
|
onChange(value2);
|
|
2337
2517
|
}
|
|
2338
2518
|
},
|
|
2339
|
-
/* @__PURE__ */
|
|
2340
|
-
/* @__PURE__ */
|
|
2341
|
-
/* @__PURE__ */
|
|
2519
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "left" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignLeftOutlined, { fontSize: "small" })),
|
|
2520
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "center" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignCenterOutlined, { fontSize: "small" })),
|
|
2521
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "right" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FormatAlignRightOutlined, { fontSize: "small" }))
|
|
2342
2522
|
);
|
|
2343
2523
|
}
|
|
2344
2524
|
|
|
@@ -2351,14 +2531,14 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2351
2531
|
};
|
|
2352
2532
|
switch (name) {
|
|
2353
2533
|
case "backgroundColor":
|
|
2354
|
-
return /* @__PURE__ */
|
|
2534
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Background color", defaultValue, onChange: handleChange });
|
|
2355
2535
|
case "borderColor":
|
|
2356
|
-
return /* @__PURE__ */
|
|
2536
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Border color", defaultValue, onChange: handleChange });
|
|
2357
2537
|
case "borderRadius":
|
|
2358
|
-
return /* @__PURE__ */
|
|
2538
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2359
2539
|
SliderInput,
|
|
2360
2540
|
{
|
|
2361
|
-
iconLabel: /* @__PURE__ */
|
|
2541
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2362
2542
|
units: "px",
|
|
2363
2543
|
step: 4,
|
|
2364
2544
|
marks: true,
|
|
@@ -2370,29 +2550,29 @@ function SingleStylePropertyPanel({ name, value, onChange }) {
|
|
|
2370
2550
|
}
|
|
2371
2551
|
);
|
|
2372
2552
|
case "color":
|
|
2373
|
-
return /* @__PURE__ */
|
|
2553
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableColorInput, { label: "Text color", defaultValue, onChange: handleChange });
|
|
2374
2554
|
case "fontFamily":
|
|
2375
|
-
return /* @__PURE__ */
|
|
2555
|
+
return /* @__PURE__ */ React72__default.default.createElement(NullableFontFamily, { label: "Font family", defaultValue, onChange: handleChange });
|
|
2376
2556
|
case "fontSize":
|
|
2377
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ React72__default.default.createElement(FontSizeInput, { label: "Font size", defaultValue, onChange: handleChange });
|
|
2378
2558
|
case "fontWeight":
|
|
2379
|
-
return /* @__PURE__ */
|
|
2559
|
+
return /* @__PURE__ */ React72__default.default.createElement(FontWeightInput, { label: "Font weight", defaultValue, onChange: handleChange });
|
|
2380
2560
|
case "textAlign":
|
|
2381
|
-
return /* @__PURE__ */
|
|
2561
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextAlignInput, { label: "Alignment", defaultValue, onChange: handleChange });
|
|
2382
2562
|
case "padding":
|
|
2383
|
-
return /* @__PURE__ */
|
|
2563
|
+
return /* @__PURE__ */ React72__default.default.createElement(PaddingInput, { label: "Padding", defaultValue, onChange: handleChange });
|
|
2384
2564
|
}
|
|
2385
2565
|
}
|
|
2386
2566
|
|
|
2387
2567
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/style-inputs/multi-style-property-panel.tsx
|
|
2388
2568
|
function MultiStylePropertyPanel({ names, value, onChange }) {
|
|
2389
|
-
return /* @__PURE__ */
|
|
2569
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, names.map((name) => /* @__PURE__ */ React72__default.default.createElement(SingleStylePropertyPanel, { key: name, name, value: value || {}, onChange })));
|
|
2390
2570
|
}
|
|
2391
2571
|
|
|
2392
2572
|
// src/app/inspector-drawer/configuration-panel/input-panels/avatar-sidebar-panel.tsx
|
|
2393
2573
|
function AvatarSidebarPanel({ data, setData }) {
|
|
2394
2574
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
2395
|
-
const [, setErrors] =
|
|
2575
|
+
const [, setErrors] = React72.useState(null);
|
|
2396
2576
|
const updateData = (d) => {
|
|
2397
2577
|
const res = AvatarPropsSchema.safeParse(d);
|
|
2398
2578
|
if (res.success) {
|
|
@@ -2406,11 +2586,11 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2406
2586
|
const imageUrl = (_d = (_c = data.props) == null ? void 0 : _c.imageUrl) != null ? _d : AvatarPropsDefaults.imageUrl;
|
|
2407
2587
|
const alt = (_f = (_e = data.props) == null ? void 0 : _e.alt) != null ? _f : AvatarPropsDefaults.alt;
|
|
2408
2588
|
const shape = (_h = (_g = data.props) == null ? void 0 : _g.shape) != null ? _h : AvatarPropsDefaults.shape;
|
|
2409
|
-
return /* @__PURE__ */
|
|
2589
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Avatar block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2410
2590
|
SliderInput,
|
|
2411
2591
|
{
|
|
2412
2592
|
label: "Size",
|
|
2413
|
-
iconLabel: /* @__PURE__ */
|
|
2593
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
2414
2594
|
units: "px",
|
|
2415
2595
|
step: 3,
|
|
2416
2596
|
min: 32,
|
|
@@ -2420,7 +2600,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2420
2600
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }));
|
|
2421
2601
|
}
|
|
2422
2602
|
}
|
|
2423
|
-
), /* @__PURE__ */
|
|
2603
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2424
2604
|
RadioGroupInput,
|
|
2425
2605
|
{
|
|
2426
2606
|
label: "Shape",
|
|
@@ -2429,10 +2609,10 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2429
2609
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { shape: shape2 }) }));
|
|
2430
2610
|
}
|
|
2431
2611
|
},
|
|
2432
|
-
/* @__PURE__ */
|
|
2433
|
-
/* @__PURE__ */
|
|
2434
|
-
/* @__PURE__ */
|
|
2435
|
-
), /* @__PURE__ */
|
|
2612
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
2613
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
2614
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
2615
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2436
2616
|
TextInput,
|
|
2437
2617
|
{
|
|
2438
2618
|
label: "Image URL",
|
|
@@ -2441,7 +2621,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2441
2621
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }));
|
|
2442
2622
|
}
|
|
2443
2623
|
}
|
|
2444
|
-
), /* @__PURE__ */
|
|
2624
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2445
2625
|
TextInput,
|
|
2446
2626
|
{
|
|
2447
2627
|
label: "Alt text",
|
|
@@ -2450,7 +2630,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2450
2630
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt: alt2 }) }));
|
|
2451
2631
|
}
|
|
2452
2632
|
}
|
|
2453
|
-
), /* @__PURE__ */
|
|
2633
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2454
2634
|
MultiStylePropertyPanel,
|
|
2455
2635
|
{
|
|
2456
2636
|
names: ["textAlign", "padding"],
|
|
@@ -2461,7 +2641,7 @@ function AvatarSidebarPanel({ data, setData }) {
|
|
|
2461
2641
|
}
|
|
2462
2642
|
function ButtonSidebarPanel({ data, setData }) {
|
|
2463
2643
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
|
|
2464
|
-
const [, setErrors] =
|
|
2644
|
+
const [, setErrors] = React72.useState(null);
|
|
2465
2645
|
const updateData = (d) => {
|
|
2466
2646
|
const res = ButtonPropsSchema.safeParse(d);
|
|
2467
2647
|
if (res.success) {
|
|
@@ -2478,65 +2658,65 @@ function ButtonSidebarPanel({ data, setData }) {
|
|
|
2478
2658
|
const buttonStyle = (_j = (_i = data.props) == null ? void 0 : _i.buttonStyle) != null ? _j : ButtonPropsDefaults.buttonStyle;
|
|
2479
2659
|
const buttonTextColor = (_l = (_k = data.props) == null ? void 0 : _k.buttonTextColor) != null ? _l : ButtonPropsDefaults.buttonTextColor;
|
|
2480
2660
|
const buttonBackgroundColor = (_n = (_m = data.props) == null ? void 0 : _m.buttonBackgroundColor) != null ? _n : ButtonPropsDefaults.buttonBackgroundColor;
|
|
2481
|
-
return /* @__PURE__ */
|
|
2661
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Button block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2482
2662
|
TextInput,
|
|
2483
2663
|
{
|
|
2484
2664
|
label: "Text",
|
|
2485
2665
|
defaultValue: text,
|
|
2486
2666
|
onChange: (text2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text: text2 }) }))
|
|
2487
2667
|
}
|
|
2488
|
-
), /* @__PURE__ */
|
|
2668
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2489
2669
|
TextInput,
|
|
2490
2670
|
{
|
|
2491
2671
|
label: "Url",
|
|
2492
2672
|
defaultValue: url,
|
|
2493
2673
|
onChange: (url2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url: url2 }) }))
|
|
2494
2674
|
}
|
|
2495
|
-
), /* @__PURE__ */
|
|
2675
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2496
2676
|
RadioGroupInput,
|
|
2497
2677
|
{
|
|
2498
2678
|
label: "Width",
|
|
2499
2679
|
defaultValue: fullWidth ? "FULL_WIDTH" : "AUTO",
|
|
2500
2680
|
onChange: (v) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fullWidth: v === "FULL_WIDTH" }) }))
|
|
2501
2681
|
},
|
|
2502
|
-
/* @__PURE__ */
|
|
2503
|
-
/* @__PURE__ */
|
|
2504
|
-
), /* @__PURE__ */
|
|
2682
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "FULL_WIDTH" }, "Full"),
|
|
2683
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "AUTO" }, "Auto")
|
|
2684
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2505
2685
|
RadioGroupInput,
|
|
2506
2686
|
{
|
|
2507
2687
|
label: "Size",
|
|
2508
2688
|
defaultValue: size,
|
|
2509
2689
|
onChange: (size2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { size: size2 }) }))
|
|
2510
2690
|
},
|
|
2511
|
-
/* @__PURE__ */
|
|
2512
|
-
/* @__PURE__ */
|
|
2513
|
-
/* @__PURE__ */
|
|
2514
|
-
/* @__PURE__ */
|
|
2515
|
-
), /* @__PURE__ */
|
|
2691
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "x-small" }, "Xs"),
|
|
2692
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "small" }, "Sm"),
|
|
2693
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "medium" }, "Md"),
|
|
2694
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "large" }, "Lg")
|
|
2695
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2516
2696
|
RadioGroupInput,
|
|
2517
2697
|
{
|
|
2518
2698
|
label: "Style",
|
|
2519
2699
|
defaultValue: buttonStyle,
|
|
2520
2700
|
onChange: (buttonStyle2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonStyle: buttonStyle2 }) }))
|
|
2521
2701
|
},
|
|
2522
|
-
/* @__PURE__ */
|
|
2523
|
-
/* @__PURE__ */
|
|
2524
|
-
/* @__PURE__ */
|
|
2525
|
-
), /* @__PURE__ */
|
|
2702
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rectangle" }, "Rectangle"),
|
|
2703
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded"),
|
|
2704
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "pill" }, "Pill")
|
|
2705
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2526
2706
|
ColorInput2,
|
|
2527
2707
|
{
|
|
2528
2708
|
label: "Text color",
|
|
2529
2709
|
defaultValue: buttonTextColor,
|
|
2530
2710
|
onChange: (buttonTextColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonTextColor: buttonTextColor2 }) }))
|
|
2531
2711
|
}
|
|
2532
|
-
), /* @__PURE__ */
|
|
2712
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2533
2713
|
ColorInput2,
|
|
2534
2714
|
{
|
|
2535
2715
|
label: "Button color",
|
|
2536
2716
|
defaultValue: buttonBackgroundColor,
|
|
2537
2717
|
onChange: (buttonBackgroundColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { buttonBackgroundColor: buttonBackgroundColor2 }) }))
|
|
2538
2718
|
}
|
|
2539
|
-
), /* @__PURE__ */
|
|
2719
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2540
2720
|
MultiStylePropertyPanel,
|
|
2541
2721
|
{
|
|
2542
2722
|
names: ["backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -2562,7 +2742,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2562
2742
|
const value = parseInt(ev.target.value);
|
|
2563
2743
|
onChange(isNaN(value) ? null : value);
|
|
2564
2744
|
};
|
|
2565
|
-
return /* @__PURE__ */
|
|
2745
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
2566
2746
|
material.TextField,
|
|
2567
2747
|
{
|
|
2568
2748
|
fullWidth: true,
|
|
@@ -2573,7 +2753,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2573
2753
|
placeholder: "auto",
|
|
2574
2754
|
size: "small",
|
|
2575
2755
|
InputProps: {
|
|
2576
|
-
endAdornment: /* @__PURE__ */
|
|
2756
|
+
endAdornment: /* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2", color: "text.secondary" }, "px")
|
|
2577
2757
|
}
|
|
2578
2758
|
}
|
|
2579
2759
|
);
|
|
@@ -2581,7 +2761,7 @@ function TextDimensionInput({ label, defaultValue, onChange }) {
|
|
|
2581
2761
|
|
|
2582
2762
|
// src/app/inspector-drawer/configuration-panel/input-panels/helpers/inputs/column-widths-input.tsx
|
|
2583
2763
|
function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
2584
|
-
const [currentValue, setCurrentValue] =
|
|
2764
|
+
const [currentValue, setCurrentValue] = React72.useState(() => {
|
|
2585
2765
|
if (defaultValue) {
|
|
2586
2766
|
return defaultValue;
|
|
2587
2767
|
}
|
|
@@ -2595,7 +2775,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2595
2775
|
};
|
|
2596
2776
|
let column3 = null;
|
|
2597
2777
|
{
|
|
2598
|
-
column3 = /* @__PURE__ */
|
|
2778
|
+
column3 = /* @__PURE__ */ React72__default.default.createElement(
|
|
2599
2779
|
TextDimensionInput,
|
|
2600
2780
|
{
|
|
2601
2781
|
label: "Column 3",
|
|
@@ -2606,7 +2786,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2606
2786
|
}
|
|
2607
2787
|
);
|
|
2608
2788
|
}
|
|
2609
|
-
return /* @__PURE__ */
|
|
2789
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 1 }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2610
2790
|
TextDimensionInput,
|
|
2611
2791
|
{
|
|
2612
2792
|
label: "Column 1",
|
|
@@ -2615,7 +2795,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2615
2795
|
setIndexValue(0, v);
|
|
2616
2796
|
}
|
|
2617
2797
|
}
|
|
2618
|
-
), /* @__PURE__ */
|
|
2798
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2619
2799
|
TextDimensionInput,
|
|
2620
2800
|
{
|
|
2621
2801
|
label: "Column 2",
|
|
@@ -2630,7 +2810,7 @@ function ColumnWidthsInput({ defaultValue, onChange }) {
|
|
|
2630
2810
|
// src/app/inspector-drawer/configuration-panel/input-panels/columns-container-sidebar-panel.tsx
|
|
2631
2811
|
function ColumnsContainerPanel({ data, setData }) {
|
|
2632
2812
|
var _a, _b, _c, _d, _e, _f;
|
|
2633
|
-
const [, setErrors] =
|
|
2813
|
+
const [, setErrors] = React72.useState(null);
|
|
2634
2814
|
const updateData = (d) => {
|
|
2635
2815
|
const res = columns_container_props_schema_default2.safeParse(d);
|
|
2636
2816
|
if (res.success) {
|
|
@@ -2640,7 +2820,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2640
2820
|
setErrors(res.error);
|
|
2641
2821
|
}
|
|
2642
2822
|
};
|
|
2643
|
-
return /* @__PURE__ */
|
|
2823
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Columns block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2644
2824
|
RadioGroupInput,
|
|
2645
2825
|
{
|
|
2646
2826
|
label: "Number of columns",
|
|
@@ -2649,9 +2829,9 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2649
2829
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsCount: v === "2" ? 2 : 3 }) }));
|
|
2650
2830
|
}
|
|
2651
2831
|
},
|
|
2652
|
-
/* @__PURE__ */
|
|
2653
|
-
/* @__PURE__ */
|
|
2654
|
-
), /* @__PURE__ */
|
|
2832
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "2" }, "2"),
|
|
2833
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "3" }, "3")
|
|
2834
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2655
2835
|
ColumnWidthsInput,
|
|
2656
2836
|
{
|
|
2657
2837
|
defaultValue: (_b = data.props) == null ? void 0 : _b.fixedWidths,
|
|
@@ -2659,11 +2839,11 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2659
2839
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { fixedWidths }) }));
|
|
2660
2840
|
}
|
|
2661
2841
|
}
|
|
2662
|
-
), /* @__PURE__ */
|
|
2842
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2663
2843
|
SliderInput,
|
|
2664
2844
|
{
|
|
2665
2845
|
label: "Columns gap",
|
|
2666
|
-
iconLabel: /* @__PURE__ */
|
|
2846
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SpaceBarOutlined, { sx: { color: "text.secondary" } }),
|
|
2667
2847
|
units: "px",
|
|
2668
2848
|
step: 4,
|
|
2669
2849
|
marks: true,
|
|
@@ -2672,7 +2852,7 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2672
2852
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.columnsGap) != null ? _d : 0,
|
|
2673
2853
|
onChange: (columnsGap) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { columnsGap }) }))
|
|
2674
2854
|
}
|
|
2675
|
-
), /* @__PURE__ */
|
|
2855
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2676
2856
|
RadioGroupInput,
|
|
2677
2857
|
{
|
|
2678
2858
|
label: "Alignment",
|
|
@@ -2681,10 +2861,10 @@ function ColumnsContainerPanel({ data, setData }) {
|
|
|
2681
2861
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }));
|
|
2682
2862
|
}
|
|
2683
2863
|
},
|
|
2684
|
-
/* @__PURE__ */
|
|
2685
|
-
/* @__PURE__ */
|
|
2686
|
-
/* @__PURE__ */
|
|
2687
|
-
), /* @__PURE__ */
|
|
2864
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
2865
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
2866
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
2867
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2688
2868
|
MultiStylePropertyPanel,
|
|
2689
2869
|
{
|
|
2690
2870
|
names: ["backgroundColor", "padding"],
|
|
@@ -2703,7 +2883,7 @@ var container_props_schema_default = ContainerPropsSchema3;
|
|
|
2703
2883
|
|
|
2704
2884
|
// src/app/inspector-drawer/configuration-panel/input-panels/container-sidebar-panel.tsx
|
|
2705
2885
|
function ContainerSidebarPanel({ data, setData }) {
|
|
2706
|
-
const [, setErrors] =
|
|
2886
|
+
const [, setErrors] = React72.useState(null);
|
|
2707
2887
|
const updateData = (d) => {
|
|
2708
2888
|
const res = container_props_schema_default.safeParse(d);
|
|
2709
2889
|
if (res.success) {
|
|
@@ -2713,7 +2893,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2713
2893
|
setErrors(res.error);
|
|
2714
2894
|
}
|
|
2715
2895
|
};
|
|
2716
|
-
return /* @__PURE__ */
|
|
2896
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Container block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2717
2897
|
MultiStylePropertyPanel,
|
|
2718
2898
|
{
|
|
2719
2899
|
names: ["backgroundColor", "borderColor", "borderRadius", "padding"],
|
|
@@ -2724,7 +2904,7 @@ function ContainerSidebarPanel({ data, setData }) {
|
|
|
2724
2904
|
}
|
|
2725
2905
|
function DividerSidebarPanel({ data, setData }) {
|
|
2726
2906
|
var _a, _b, _c, _d;
|
|
2727
|
-
const [, setErrors] =
|
|
2907
|
+
const [, setErrors] = React72.useState(null);
|
|
2728
2908
|
const updateData = (d) => {
|
|
2729
2909
|
const res = DividerPropsSchema.safeParse(d);
|
|
2730
2910
|
if (res.success) {
|
|
@@ -2736,18 +2916,18 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2736
2916
|
};
|
|
2737
2917
|
const lineColor = (_b = (_a = data.props) == null ? void 0 : _a.lineColor) != null ? _b : DividerPropsDefaults.lineColor;
|
|
2738
2918
|
const lineHeight = (_d = (_c = data.props) == null ? void 0 : _c.lineHeight) != null ? _d : DividerPropsDefaults.lineHeight;
|
|
2739
|
-
return /* @__PURE__ */
|
|
2919
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Divider block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2740
2920
|
ColorInput2,
|
|
2741
2921
|
{
|
|
2742
2922
|
label: "Color",
|
|
2743
2923
|
defaultValue: lineColor,
|
|
2744
2924
|
onChange: (lineColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineColor: lineColor2 }) }))
|
|
2745
2925
|
}
|
|
2746
|
-
), /* @__PURE__ */
|
|
2926
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2747
2927
|
SliderInput,
|
|
2748
2928
|
{
|
|
2749
2929
|
label: "Height",
|
|
2750
|
-
iconLabel: /* @__PURE__ */
|
|
2930
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
2751
2931
|
units: "px",
|
|
2752
2932
|
step: 1,
|
|
2753
2933
|
min: 1,
|
|
@@ -2755,7 +2935,7 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2755
2935
|
defaultValue: lineHeight,
|
|
2756
2936
|
onChange: (lineHeight2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { lineHeight: lineHeight2 }) }))
|
|
2757
2937
|
}
|
|
2758
|
-
), /* @__PURE__ */
|
|
2938
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2759
2939
|
MultiStylePropertyPanel,
|
|
2760
2940
|
{
|
|
2761
2941
|
names: ["backgroundColor", "padding"],
|
|
@@ -2764,8 +2944,8 @@ function DividerSidebarPanel({ data, setData }) {
|
|
|
2764
2944
|
}
|
|
2765
2945
|
));
|
|
2766
2946
|
}
|
|
2767
|
-
var
|
|
2768
|
-
var
|
|
2947
|
+
var COLOR_SCHEMA10 = zod.z.string().regex(/^#[0-9a-fA-F]{6}$/).nullable().optional();
|
|
2948
|
+
var FONT_FAMILY_SCHEMA7 = zod.z.enum([
|
|
2769
2949
|
"MODERN_SANS",
|
|
2770
2950
|
"BOOK_SANS",
|
|
2771
2951
|
"ORGANIC_SANS",
|
|
@@ -2777,12 +2957,12 @@ var FONT_FAMILY_SCHEMA6 = zod.z.enum([
|
|
|
2777
2957
|
"MONOSPACE"
|
|
2778
2958
|
]).nullable().optional();
|
|
2779
2959
|
var EmailLayoutPropsSchema2 = zod.z.object({
|
|
2780
|
-
backdropColor:
|
|
2781
|
-
borderColor:
|
|
2960
|
+
backdropColor: COLOR_SCHEMA10,
|
|
2961
|
+
borderColor: COLOR_SCHEMA10,
|
|
2782
2962
|
borderRadius: zod.z.number().optional().nullable(),
|
|
2783
|
-
canvasColor:
|
|
2784
|
-
textColor:
|
|
2785
|
-
fontFamily:
|
|
2963
|
+
canvasColor: COLOR_SCHEMA10,
|
|
2964
|
+
textColor: COLOR_SCHEMA10,
|
|
2965
|
+
fontFamily: FONT_FAMILY_SCHEMA7,
|
|
2786
2966
|
childrenIds: zod.z.array(zod.z.string()).optional().nullable()
|
|
2787
2967
|
});
|
|
2788
2968
|
var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
@@ -2790,7 +2970,7 @@ var email_layout_props_schema_default = EmailLayoutPropsSchema2;
|
|
|
2790
2970
|
// src/app/inspector-drawer/configuration-panel/input-panels/email-layout-sidebar-panel.tsx
|
|
2791
2971
|
function EmailLayoutSidebarFields({ data, setData }) {
|
|
2792
2972
|
var _a, _b, _c, _d, _e;
|
|
2793
|
-
const [, setErrors] =
|
|
2973
|
+
const [, setErrors] = React72.useState(null);
|
|
2794
2974
|
const updateData = (d) => {
|
|
2795
2975
|
const res = email_layout_props_schema_default.safeParse(d);
|
|
2796
2976
|
if (res.success) {
|
|
@@ -2800,31 +2980,31 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2800
2980
|
setErrors(res.error);
|
|
2801
2981
|
}
|
|
2802
2982
|
};
|
|
2803
|
-
return /* @__PURE__ */
|
|
2983
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Global" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2804
2984
|
ColorInput2,
|
|
2805
2985
|
{
|
|
2806
2986
|
label: "Backdrop color",
|
|
2807
2987
|
defaultValue: (_a = data.backdropColor) != null ? _a : "#F5F5F5",
|
|
2808
2988
|
onChange: (backdropColor) => updateData(__spreadProps(__spreadValues({}, data), { backdropColor }))
|
|
2809
2989
|
}
|
|
2810
|
-
), /* @__PURE__ */
|
|
2990
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2811
2991
|
ColorInput2,
|
|
2812
2992
|
{
|
|
2813
2993
|
label: "Canvas color",
|
|
2814
2994
|
defaultValue: (_b = data.canvasColor) != null ? _b : "#FFFFFF",
|
|
2815
2995
|
onChange: (canvasColor) => updateData(__spreadProps(__spreadValues({}, data), { canvasColor }))
|
|
2816
2996
|
}
|
|
2817
|
-
), /* @__PURE__ */
|
|
2997
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2818
2998
|
NullableColorInput,
|
|
2819
2999
|
{
|
|
2820
3000
|
label: "Canvas border color",
|
|
2821
3001
|
defaultValue: (_c = data.borderColor) != null ? _c : null,
|
|
2822
3002
|
onChange: (borderColor) => updateData(__spreadProps(__spreadValues({}, data), { borderColor }))
|
|
2823
3003
|
}
|
|
2824
|
-
), /* @__PURE__ */
|
|
3004
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2825
3005
|
SliderInput,
|
|
2826
3006
|
{
|
|
2827
|
-
iconLabel: /* @__PURE__ */
|
|
3007
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.RoundedCornerOutlined, null),
|
|
2828
3008
|
units: "px",
|
|
2829
3009
|
step: 4,
|
|
2830
3010
|
marks: true,
|
|
@@ -2834,14 +3014,14 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2834
3014
|
defaultValue: (_d = data.borderRadius) != null ? _d : 0,
|
|
2835
3015
|
onChange: (borderRadius) => updateData(__spreadProps(__spreadValues({}, data), { borderRadius }))
|
|
2836
3016
|
}
|
|
2837
|
-
), /* @__PURE__ */
|
|
3017
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2838
3018
|
NullableFontFamily,
|
|
2839
3019
|
{
|
|
2840
3020
|
label: "Font family",
|
|
2841
3021
|
defaultValue: "MODERN_SANS",
|
|
2842
3022
|
onChange: (fontFamily) => updateData(__spreadProps(__spreadValues({}, data), { fontFamily }))
|
|
2843
3023
|
}
|
|
2844
|
-
), /* @__PURE__ */
|
|
3024
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2845
3025
|
ColorInput2,
|
|
2846
3026
|
{
|
|
2847
3027
|
label: "Text color",
|
|
@@ -2852,7 +3032,7 @@ function EmailLayoutSidebarFields({ data, setData }) {
|
|
|
2852
3032
|
}
|
|
2853
3033
|
function HeadingSidebarPanel({ data, setData }) {
|
|
2854
3034
|
var _a, _b, _c, _d;
|
|
2855
|
-
const [, setErrors] =
|
|
3035
|
+
const [, setErrors] = React72.useState(null);
|
|
2856
3036
|
const updateData = (d) => {
|
|
2857
3037
|
const res = HeadingPropsSchema.safeParse(d);
|
|
2858
3038
|
if (res.success) {
|
|
@@ -2862,7 +3042,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2862
3042
|
setErrors(res.error);
|
|
2863
3043
|
}
|
|
2864
3044
|
};
|
|
2865
|
-
return /* @__PURE__ */
|
|
3045
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Heading block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2866
3046
|
TextInput,
|
|
2867
3047
|
{
|
|
2868
3048
|
label: "Content",
|
|
@@ -2872,7 +3052,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2872
3052
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }));
|
|
2873
3053
|
}
|
|
2874
3054
|
}
|
|
2875
|
-
), /* @__PURE__ */
|
|
3055
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2876
3056
|
RadioGroupInput,
|
|
2877
3057
|
{
|
|
2878
3058
|
label: "Level",
|
|
@@ -2881,10 +3061,10 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2881
3061
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { level }) }));
|
|
2882
3062
|
}
|
|
2883
3063
|
},
|
|
2884
|
-
/* @__PURE__ */
|
|
2885
|
-
/* @__PURE__ */
|
|
2886
|
-
/* @__PURE__ */
|
|
2887
|
-
), /* @__PURE__ */
|
|
3064
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h1" }, "H1"),
|
|
3065
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h2" }, "H2"),
|
|
3066
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "h3" }, "H3")
|
|
3067
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2888
3068
|
MultiStylePropertyPanel,
|
|
2889
3069
|
{
|
|
2890
3070
|
names: ["color", "backgroundColor", "fontFamily", "fontWeight", "textAlign", "padding"],
|
|
@@ -2895,7 +3075,7 @@ function HeadingSidebarPanel({ data, setData }) {
|
|
|
2895
3075
|
}
|
|
2896
3076
|
function HtmlSidebarPanel({ data, setData }) {
|
|
2897
3077
|
var _a, _b;
|
|
2898
|
-
const [, setErrors] =
|
|
3078
|
+
const [, setErrors] = React72.useState(null);
|
|
2899
3079
|
const updateData = (d) => {
|
|
2900
3080
|
const res = HtmlPropsSchema.safeParse(d);
|
|
2901
3081
|
if (res.success) {
|
|
@@ -2905,7 +3085,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2905
3085
|
setErrors(res.error);
|
|
2906
3086
|
}
|
|
2907
3087
|
};
|
|
2908
|
-
return /* @__PURE__ */
|
|
3088
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Html block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2909
3089
|
TextInput,
|
|
2910
3090
|
{
|
|
2911
3091
|
label: "Content",
|
|
@@ -2913,7 +3093,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2913
3093
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.contents) != null ? _b : "",
|
|
2914
3094
|
onChange: (contents) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contents }) }))
|
|
2915
3095
|
}
|
|
2916
|
-
), /* @__PURE__ */
|
|
3096
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2917
3097
|
MultiStylePropertyPanel,
|
|
2918
3098
|
{
|
|
2919
3099
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "textAlign", "padding"],
|
|
@@ -2924,7 +3104,7 @@ function HtmlSidebarPanel({ data, setData }) {
|
|
|
2924
3104
|
}
|
|
2925
3105
|
function ImageSidebarPanel({ data, setData }) {
|
|
2926
3106
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
|
|
2927
|
-
const [, setErrors] =
|
|
3107
|
+
const [, setErrors] = React72.useState(null);
|
|
2928
3108
|
const updateData = (d) => {
|
|
2929
3109
|
const res = ImagePropsSchema.safeParse(d);
|
|
2930
3110
|
if (res.success) {
|
|
@@ -2934,7 +3114,7 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2934
3114
|
setErrors(res.error);
|
|
2935
3115
|
}
|
|
2936
3116
|
};
|
|
2937
|
-
return /* @__PURE__ */
|
|
3117
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Image block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2938
3118
|
TextInput,
|
|
2939
3119
|
{
|
|
2940
3120
|
label: "Source URL",
|
|
@@ -2944,14 +3124,14 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2944
3124
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { url }) }));
|
|
2945
3125
|
}
|
|
2946
3126
|
}
|
|
2947
|
-
), /* @__PURE__ */
|
|
3127
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2948
3128
|
TextInput,
|
|
2949
3129
|
{
|
|
2950
3130
|
label: "Alt text",
|
|
2951
3131
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.alt) != null ? _d : "",
|
|
2952
3132
|
onChange: (alt) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { alt }) }))
|
|
2953
3133
|
}
|
|
2954
|
-
), /* @__PURE__ */
|
|
3134
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2955
3135
|
TextInput,
|
|
2956
3136
|
{
|
|
2957
3137
|
label: "Click through URL",
|
|
@@ -2961,31 +3141,31 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2961
3141
|
updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkHref }) }));
|
|
2962
3142
|
}
|
|
2963
3143
|
}
|
|
2964
|
-
), /* @__PURE__ */
|
|
3144
|
+
), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(
|
|
2965
3145
|
TextDimensionInput,
|
|
2966
3146
|
{
|
|
2967
3147
|
label: "Width",
|
|
2968
3148
|
defaultValue: (_g = data.props) == null ? void 0 : _g.width,
|
|
2969
3149
|
onChange: (width) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { width }) }))
|
|
2970
3150
|
}
|
|
2971
|
-
), /* @__PURE__ */
|
|
3151
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2972
3152
|
TextDimensionInput,
|
|
2973
3153
|
{
|
|
2974
3154
|
label: "Height",
|
|
2975
3155
|
defaultValue: (_h = data.props) == null ? void 0 : _h.height,
|
|
2976
3156
|
onChange: (height) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { height }) }))
|
|
2977
3157
|
}
|
|
2978
|
-
)), /* @__PURE__ */
|
|
3158
|
+
)), /* @__PURE__ */ React72__default.default.createElement(
|
|
2979
3159
|
RadioGroupInput,
|
|
2980
3160
|
{
|
|
2981
3161
|
label: "Alignment",
|
|
2982
3162
|
defaultValue: (_j = (_i = data.props) == null ? void 0 : _i.contentAlignment) != null ? _j : "middle",
|
|
2983
3163
|
onChange: (contentAlignment) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { contentAlignment }) }))
|
|
2984
3164
|
},
|
|
2985
|
-
/* @__PURE__ */
|
|
2986
|
-
/* @__PURE__ */
|
|
2987
|
-
/* @__PURE__ */
|
|
2988
|
-
), /* @__PURE__ */
|
|
3165
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "top" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignTopOutlined, { fontSize: "small" })),
|
|
3166
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "middle" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignCenterOutlined, { fontSize: "small" })),
|
|
3167
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "bottom" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.VerticalAlignBottomOutlined, { fontSize: "small" }))
|
|
3168
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
2989
3169
|
MultiStylePropertyPanel,
|
|
2990
3170
|
{
|
|
2991
3171
|
names: ["backgroundColor", "textAlign", "padding"],
|
|
@@ -2994,9 +3174,160 @@ function ImageSidebarPanel({ data, setData }) {
|
|
|
2994
3174
|
}
|
|
2995
3175
|
));
|
|
2996
3176
|
}
|
|
3177
|
+
function SignatureSidebarPanel({ data, setData }) {
|
|
3178
|
+
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;
|
|
3179
|
+
const [, setErrors] = React72.useState(null);
|
|
3180
|
+
const updateData = (d) => {
|
|
3181
|
+
const res = SignaturePropsSchema.safeParse(d);
|
|
3182
|
+
if (res.success) {
|
|
3183
|
+
setData(res.data);
|
|
3184
|
+
setErrors(null);
|
|
3185
|
+
} else {
|
|
3186
|
+
setErrors(res.error);
|
|
3187
|
+
}
|
|
3188
|
+
};
|
|
3189
|
+
const greeting = (_b = (_a = data.props) == null ? void 0 : _a.greeting) != null ? _b : SignaturePropsDefaults.greeting;
|
|
3190
|
+
const name = (_d = (_c = data.props) == null ? void 0 : _c.name) != null ? _d : SignaturePropsDefaults.name;
|
|
3191
|
+
const title = (_f = (_e = data.props) == null ? void 0 : _e.title) != null ? _f : SignaturePropsDefaults.title;
|
|
3192
|
+
const company = (_h = (_g = data.props) == null ? void 0 : _g.company) != null ? _h : SignaturePropsDefaults.company;
|
|
3193
|
+
const address = (_j = (_i = data.props) == null ? void 0 : _i.address) != null ? _j : SignaturePropsDefaults.address;
|
|
3194
|
+
const email = (_l = (_k = data.props) == null ? void 0 : _k.email) != null ? _l : SignaturePropsDefaults.email;
|
|
3195
|
+
const phone = (_n = (_m = data.props) == null ? void 0 : _m.phone) != null ? _n : SignaturePropsDefaults.phone;
|
|
3196
|
+
const website = (_p = (_o = data.props) == null ? void 0 : _o.website) != null ? _p : SignaturePropsDefaults.website;
|
|
3197
|
+
const imageUrl = (_r = (_q = data.props) == null ? void 0 : _q.imageUrl) != null ? _r : SignaturePropsDefaults.imageUrl;
|
|
3198
|
+
const imageSize = (_t = (_s = data.props) == null ? void 0 : _s.imageSize) != null ? _t : SignaturePropsDefaults.imageSize;
|
|
3199
|
+
const imageShape = (_v = (_u = data.props) == null ? void 0 : _u.imageShape) != null ? _v : SignaturePropsDefaults.imageShape;
|
|
3200
|
+
const layout = (_x = (_w = data.props) == null ? void 0 : _w.layout) != null ? _x : SignaturePropsDefaults.layout;
|
|
3201
|
+
const nameColor = (_z = (_y = data.props) == null ? void 0 : _y.nameColor) != null ? _z : SignaturePropsDefaults.nameColor;
|
|
3202
|
+
const textColor = (_B = (_A = data.props) == null ? void 0 : _A.textColor) != null ? _B : SignaturePropsDefaults.textColor;
|
|
3203
|
+
const linkColor = (_D = (_C = data.props) == null ? void 0 : _C.linkColor) != null ? _D : SignaturePropsDefaults.linkColor;
|
|
3204
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Signature block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3205
|
+
TextInput,
|
|
3206
|
+
{
|
|
3207
|
+
label: "Greeting",
|
|
3208
|
+
defaultValue: greeting,
|
|
3209
|
+
onChange: (greeting2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { greeting: greeting2 }) }))
|
|
3210
|
+
}
|
|
3211
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3212
|
+
TextInput,
|
|
3213
|
+
{
|
|
3214
|
+
label: "Name",
|
|
3215
|
+
defaultValue: name,
|
|
3216
|
+
onChange: (name2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { name: name2 }) }))
|
|
3217
|
+
}
|
|
3218
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3219
|
+
TextInput,
|
|
3220
|
+
{
|
|
3221
|
+
label: "Title",
|
|
3222
|
+
defaultValue: title,
|
|
3223
|
+
onChange: (title2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { title: title2 }) }))
|
|
3224
|
+
}
|
|
3225
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3226
|
+
TextInput,
|
|
3227
|
+
{
|
|
3228
|
+
label: "Company",
|
|
3229
|
+
defaultValue: company,
|
|
3230
|
+
onChange: (company2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { company: company2 }) }))
|
|
3231
|
+
}
|
|
3232
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3233
|
+
TextInput,
|
|
3234
|
+
{
|
|
3235
|
+
label: "Address",
|
|
3236
|
+
defaultValue: address,
|
|
3237
|
+
onChange: (address2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { address: address2 }) }))
|
|
3238
|
+
}
|
|
3239
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3240
|
+
TextInput,
|
|
3241
|
+
{
|
|
3242
|
+
label: "Email",
|
|
3243
|
+
defaultValue: email,
|
|
3244
|
+
onChange: (email2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { email: email2 }) }))
|
|
3245
|
+
}
|
|
3246
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3247
|
+
TextInput,
|
|
3248
|
+
{
|
|
3249
|
+
label: "Phone",
|
|
3250
|
+
defaultValue: phone,
|
|
3251
|
+
onChange: (phone2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { phone: phone2 }) }))
|
|
3252
|
+
}
|
|
3253
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3254
|
+
TextInput,
|
|
3255
|
+
{
|
|
3256
|
+
label: "Website",
|
|
3257
|
+
defaultValue: website,
|
|
3258
|
+
onChange: (website2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { website: website2 }) }))
|
|
3259
|
+
}
|
|
3260
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3261
|
+
TextInput,
|
|
3262
|
+
{
|
|
3263
|
+
label: "Image URL",
|
|
3264
|
+
defaultValue: imageUrl,
|
|
3265
|
+
onChange: (imageUrl2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageUrl: imageUrl2 }) }))
|
|
3266
|
+
}
|
|
3267
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3268
|
+
SliderInput,
|
|
3269
|
+
{
|
|
3270
|
+
label: "Image size",
|
|
3271
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AspectRatioOutlined, { sx: { color: "text.secondary" } }),
|
|
3272
|
+
units: "px",
|
|
3273
|
+
step: 4,
|
|
3274
|
+
min: 32,
|
|
3275
|
+
max: 128,
|
|
3276
|
+
defaultValue: imageSize,
|
|
3277
|
+
onChange: (imageSize2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageSize: imageSize2 }) }))
|
|
3278
|
+
}
|
|
3279
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3280
|
+
RadioGroupInput,
|
|
3281
|
+
{
|
|
3282
|
+
label: "Image shape",
|
|
3283
|
+
defaultValue: imageShape,
|
|
3284
|
+
onChange: (imageShape2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { imageShape: imageShape2 }) }))
|
|
3285
|
+
},
|
|
3286
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "circle" }, "Circle"),
|
|
3287
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "square" }, "Square"),
|
|
3288
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "rounded" }, "Rounded")
|
|
3289
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3290
|
+
RadioGroupInput,
|
|
3291
|
+
{
|
|
3292
|
+
label: "Layout",
|
|
3293
|
+
defaultValue: layout,
|
|
3294
|
+
onChange: (layout2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { layout: layout2 }) }))
|
|
3295
|
+
},
|
|
3296
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "horizontal" }, "Horizontal"),
|
|
3297
|
+
/* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "vertical" }, "Vertical")
|
|
3298
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3299
|
+
ColorInput2,
|
|
3300
|
+
{
|
|
3301
|
+
label: "Name color",
|
|
3302
|
+
defaultValue: nameColor,
|
|
3303
|
+
onChange: (nameColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { nameColor: nameColor2 }) }))
|
|
3304
|
+
}
|
|
3305
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3306
|
+
ColorInput2,
|
|
3307
|
+
{
|
|
3308
|
+
label: "Text color",
|
|
3309
|
+
defaultValue: textColor,
|
|
3310
|
+
onChange: (textColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { textColor: textColor2 }) }))
|
|
3311
|
+
}
|
|
3312
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3313
|
+
ColorInput2,
|
|
3314
|
+
{
|
|
3315
|
+
label: "Link color",
|
|
3316
|
+
defaultValue: linkColor,
|
|
3317
|
+
onChange: (linkColor2) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { linkColor: linkColor2 }) }))
|
|
3318
|
+
}
|
|
3319
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3320
|
+
MultiStylePropertyPanel,
|
|
3321
|
+
{
|
|
3322
|
+
names: ["backgroundColor", "fontFamily", "padding"],
|
|
3323
|
+
value: data.style,
|
|
3324
|
+
onChange: (style) => updateData(__spreadProps(__spreadValues({}, data), { style }))
|
|
3325
|
+
}
|
|
3326
|
+
));
|
|
3327
|
+
}
|
|
2997
3328
|
function SpacerSidebarPanel({ data, setData }) {
|
|
2998
3329
|
var _a, _b;
|
|
2999
|
-
const [, setErrors] =
|
|
3330
|
+
const [, setErrors] = React72.useState(null);
|
|
3000
3331
|
const updateData = (d) => {
|
|
3001
3332
|
const res = SpacerPropsSchema.safeParse(d);
|
|
3002
3333
|
if (res.success) {
|
|
@@ -3006,11 +3337,11 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3006
3337
|
setErrors(res.error);
|
|
3007
3338
|
}
|
|
3008
3339
|
};
|
|
3009
|
-
return /* @__PURE__ */
|
|
3340
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Spacer block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3010
3341
|
SliderInput,
|
|
3011
3342
|
{
|
|
3012
3343
|
label: "Height",
|
|
3013
|
-
iconLabel: /* @__PURE__ */
|
|
3344
|
+
iconLabel: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HeightOutlined, { sx: { color: "text.secondary" } }),
|
|
3014
3345
|
units: "px",
|
|
3015
3346
|
step: 4,
|
|
3016
3347
|
min: 4,
|
|
@@ -3021,15 +3352,15 @@ function SpacerSidebarPanel({ data, setData }) {
|
|
|
3021
3352
|
));
|
|
3022
3353
|
}
|
|
3023
3354
|
function BooleanInput({ label, defaultValue, onChange }) {
|
|
3024
|
-
const [value, setValue] =
|
|
3025
|
-
|
|
3355
|
+
const [value, setValue] = React72.useState(defaultValue);
|
|
3356
|
+
React72.useEffect(() => {
|
|
3026
3357
|
setValue(defaultValue);
|
|
3027
3358
|
}, [defaultValue]);
|
|
3028
|
-
return /* @__PURE__ */
|
|
3359
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3029
3360
|
material.FormControlLabel,
|
|
3030
3361
|
{
|
|
3031
3362
|
label,
|
|
3032
|
-
control: /* @__PURE__ */
|
|
3363
|
+
control: /* @__PURE__ */ React72__default.default.createElement(
|
|
3033
3364
|
material.Switch,
|
|
3034
3365
|
{
|
|
3035
3366
|
checked: value,
|
|
@@ -3046,7 +3377,7 @@ function BooleanInput({ label, defaultValue, onChange }) {
|
|
|
3046
3377
|
// src/app/inspector-drawer/configuration-panel/input-panels/text-sidebar-panel.tsx
|
|
3047
3378
|
function TextSidebarPanel({ data, setData }) {
|
|
3048
3379
|
var _a, _b, _c, _d;
|
|
3049
|
-
const [, setErrors] =
|
|
3380
|
+
const [, setErrors] = React72.useState(null);
|
|
3050
3381
|
const updateData = (d) => {
|
|
3051
3382
|
const res = TextPropsSchema.safeParse(d);
|
|
3052
3383
|
if (res.success) {
|
|
@@ -3056,7 +3387,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3056
3387
|
setErrors(res.error);
|
|
3057
3388
|
}
|
|
3058
3389
|
};
|
|
3059
|
-
return /* @__PURE__ */
|
|
3390
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Text block" }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3060
3391
|
TextInput,
|
|
3061
3392
|
{
|
|
3062
3393
|
label: "Content",
|
|
@@ -3064,14 +3395,14 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3064
3395
|
defaultValue: (_b = (_a = data.props) == null ? void 0 : _a.text) != null ? _b : "",
|
|
3065
3396
|
onChange: (text) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { text }) }))
|
|
3066
3397
|
}
|
|
3067
|
-
), /* @__PURE__ */
|
|
3398
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3068
3399
|
BooleanInput,
|
|
3069
3400
|
{
|
|
3070
3401
|
label: "Markdown",
|
|
3071
3402
|
defaultValue: (_d = (_c = data.props) == null ? void 0 : _c.markdown) != null ? _d : false,
|
|
3072
3403
|
onChange: (markdown) => updateData(__spreadProps(__spreadValues({}, data), { props: __spreadProps(__spreadValues({}, data.props), { markdown }) }))
|
|
3073
3404
|
}
|
|
3074
|
-
), /* @__PURE__ */
|
|
3405
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3075
3406
|
MultiStylePropertyPanel,
|
|
3076
3407
|
{
|
|
3077
3408
|
names: ["color", "backgroundColor", "fontFamily", "fontSize", "fontWeight", "textAlign", "padding"],
|
|
@@ -3083,7 +3414,7 @@ function TextSidebarPanel({ data, setData }) {
|
|
|
3083
3414
|
|
|
3084
3415
|
// src/app/inspector-drawer/configuration-panel/index.tsx
|
|
3085
3416
|
function renderMessage(val) {
|
|
3086
|
-
return /* @__PURE__ */
|
|
3417
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { m: 3, p: 1, border: "1px dashed", borderColor: "divider" } }, /* @__PURE__ */ React72__default.default.createElement(material.Typography, { color: "text.secondary" }, val));
|
|
3087
3418
|
}
|
|
3088
3419
|
function ConfigurationPanel() {
|
|
3089
3420
|
const document2 = useDocument();
|
|
@@ -3099,53 +3430,55 @@ function ConfigurationPanel() {
|
|
|
3099
3430
|
const { data, type } = block;
|
|
3100
3431
|
switch (type) {
|
|
3101
3432
|
case "Avatar":
|
|
3102
|
-
return /* @__PURE__ */
|
|
3433
|
+
return /* @__PURE__ */ React72__default.default.createElement(AvatarSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3103
3434
|
case "Button":
|
|
3104
|
-
return /* @__PURE__ */
|
|
3435
|
+
return /* @__PURE__ */ React72__default.default.createElement(ButtonSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3105
3436
|
case "ColumnsContainer":
|
|
3106
|
-
return /* @__PURE__ */
|
|
3437
|
+
return /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3107
3438
|
case "Container":
|
|
3108
|
-
return /* @__PURE__ */
|
|
3439
|
+
return /* @__PURE__ */ React72__default.default.createElement(ContainerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3109
3440
|
case "Divider":
|
|
3110
|
-
return /* @__PURE__ */
|
|
3441
|
+
return /* @__PURE__ */ React72__default.default.createElement(DividerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3111
3442
|
case "Heading":
|
|
3112
|
-
return /* @__PURE__ */
|
|
3443
|
+
return /* @__PURE__ */ React72__default.default.createElement(HeadingSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3113
3444
|
case "Html":
|
|
3114
|
-
return /* @__PURE__ */
|
|
3445
|
+
return /* @__PURE__ */ React72__default.default.createElement(HtmlSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3115
3446
|
case "Image":
|
|
3116
|
-
return /* @__PURE__ */
|
|
3447
|
+
return /* @__PURE__ */ React72__default.default.createElement(ImageSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3117
3448
|
case "EmailLayout":
|
|
3118
|
-
return /* @__PURE__ */
|
|
3449
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailLayoutSidebarFields, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3119
3450
|
case "Spacer":
|
|
3120
|
-
return /* @__PURE__ */
|
|
3451
|
+
return /* @__PURE__ */ React72__default.default.createElement(SpacerSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3452
|
+
case "Signature":
|
|
3453
|
+
return /* @__PURE__ */ React72__default.default.createElement(SignatureSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3121
3454
|
case "Text":
|
|
3122
|
-
return /* @__PURE__ */
|
|
3455
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextSidebarPanel, { key: selectedBlockId, data, setData: (data2) => setBlock({ type, data: data2 }) });
|
|
3123
3456
|
default:
|
|
3124
|
-
return /* @__PURE__ */
|
|
3457
|
+
return /* @__PURE__ */ React72__default.default.createElement("pre", null, JSON.stringify(block, null, " "));
|
|
3125
3458
|
}
|
|
3126
3459
|
}
|
|
3127
3460
|
function StylesPanel() {
|
|
3128
3461
|
const block = useDocument().root;
|
|
3129
3462
|
if (!block) {
|
|
3130
|
-
return /* @__PURE__ */
|
|
3463
|
+
return /* @__PURE__ */ React72__default.default.createElement("p", null, "Block not found");
|
|
3131
3464
|
}
|
|
3132
3465
|
const { data, type } = block;
|
|
3133
3466
|
if (type !== "EmailLayout") {
|
|
3134
3467
|
throw new Error('Expected "root" element to be of type EmailLayout');
|
|
3135
3468
|
}
|
|
3136
|
-
return /* @__PURE__ */
|
|
3469
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailLayoutSidebarFields, { key: "root", data, setData: (data2) => setDocument({ root: { type, data: data2 } }) });
|
|
3137
3470
|
}
|
|
3138
3471
|
function TemplateDownloadButton() {
|
|
3139
3472
|
const doc = useDocument();
|
|
3140
|
-
const href =
|
|
3473
|
+
const href = React72.useMemo(() => {
|
|
3141
3474
|
return `data:text/plain,${encodeURIComponent(JSON.stringify(doc, null, " "))}`;
|
|
3142
3475
|
}, [doc]);
|
|
3143
|
-
return /* @__PURE__ */
|
|
3476
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3144
3477
|
material.Button,
|
|
3145
3478
|
{
|
|
3146
3479
|
variant: "outlined",
|
|
3147
3480
|
color: "primary",
|
|
3148
|
-
startIcon: /* @__PURE__ */
|
|
3481
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FileDownloadOutlined, null),
|
|
3149
3482
|
href,
|
|
3150
3483
|
download: "emailTemplate.json",
|
|
3151
3484
|
fullWidth: true
|
|
@@ -3177,9 +3510,9 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3177
3510
|
}
|
|
3178
3511
|
};
|
|
3179
3512
|
if (!currentTemplateId) {
|
|
3180
|
-
return /* @__PURE__ */
|
|
3513
|
+
return /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Template" }, "No template selected");
|
|
3181
3514
|
}
|
|
3182
|
-
return /* @__PURE__ */
|
|
3515
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Template" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2 }, !persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(
|
|
3183
3516
|
material.Typography,
|
|
3184
3517
|
{
|
|
3185
3518
|
variant: "body2",
|
|
@@ -3192,29 +3525,29 @@ function TemplatePanel({ deleteTemplate, copyTemplate }) {
|
|
|
3192
3525
|
}
|
|
3193
3526
|
},
|
|
3194
3527
|
"Save functionality is disabled. To enable saving, provide the necessary callback functions."
|
|
3195
|
-
), persistenceEnabled && /* @__PURE__ */
|
|
3528
|
+
), persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3196
3529
|
material.Button,
|
|
3197
3530
|
{
|
|
3198
3531
|
variant: "outlined",
|
|
3199
3532
|
color: "primary",
|
|
3200
|
-
startIcon: /* @__PURE__ */
|
|
3533
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContentCopyOutlined, null),
|
|
3201
3534
|
onClick: handleCopyToSamples,
|
|
3202
3535
|
fullWidth: true,
|
|
3203
3536
|
disabled: !copyTemplate
|
|
3204
3537
|
},
|
|
3205
3538
|
"Save as Sample Template"
|
|
3206
|
-
), /* @__PURE__ */
|
|
3539
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
3207
3540
|
material.Button,
|
|
3208
3541
|
{
|
|
3209
3542
|
variant: "outlined",
|
|
3210
3543
|
color: "error",
|
|
3211
|
-
startIcon: /* @__PURE__ */
|
|
3544
|
+
startIcon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DeleteOutlined, null),
|
|
3212
3545
|
onClick: handleDelete,
|
|
3213
3546
|
fullWidth: true,
|
|
3214
3547
|
disabled: !deleteTemplate
|
|
3215
3548
|
},
|
|
3216
3549
|
"Delete Template"
|
|
3217
|
-
)))), persistenceEnabled && /* @__PURE__ */
|
|
3550
|
+
)))), persistenceEnabled && /* @__PURE__ */ React72__default.default.createElement(BaseSidebarPanel, { title: "Export" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(TemplateDownloadButton, null))));
|
|
3218
3551
|
}
|
|
3219
3552
|
|
|
3220
3553
|
// src/app/inspector-drawer/index.tsx
|
|
@@ -3231,11 +3564,11 @@ function InspectorDrawer({
|
|
|
3231
3564
|
const renderCurrentSidebarPanel = () => {
|
|
3232
3565
|
switch (selectedSidebarTab) {
|
|
3233
3566
|
case "block-configuration":
|
|
3234
|
-
return /* @__PURE__ */
|
|
3567
|
+
return /* @__PURE__ */ React72__default.default.createElement(ConfigurationPanel, null);
|
|
3235
3568
|
case "styles":
|
|
3236
|
-
return /* @__PURE__ */
|
|
3569
|
+
return /* @__PURE__ */ React72__default.default.createElement(StylesPanel, null);
|
|
3237
3570
|
case "template-settings":
|
|
3238
|
-
return /* @__PURE__ */
|
|
3571
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3239
3572
|
TemplatePanel,
|
|
3240
3573
|
{
|
|
3241
3574
|
deleteTemplate,
|
|
@@ -3244,7 +3577,7 @@ function InspectorDrawer({
|
|
|
3244
3577
|
);
|
|
3245
3578
|
}
|
|
3246
3579
|
};
|
|
3247
|
-
return /* @__PURE__ */
|
|
3580
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3248
3581
|
material.Drawer,
|
|
3249
3582
|
{
|
|
3250
3583
|
variant: "persistent",
|
|
@@ -3266,8 +3599,8 @@ function InspectorDrawer({
|
|
|
3266
3599
|
width: inspectorDrawerOpen ? INSPECTOR_DRAWER_WIDTH : 0
|
|
3267
3600
|
}
|
|
3268
3601
|
},
|
|
3269
|
-
/* @__PURE__ */
|
|
3270
|
-
/* @__PURE__ */
|
|
3602
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: 49, borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React72__default.default.createElement(material.Box, { px: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.Tabs, { value: selectedSidebarTab, onChange: (_, v) => setSidebarTab(v) }, /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "styles", label: "Styles" }), /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "block-configuration", label: "Inspect" }), /* @__PURE__ */ React72__default.default.createElement(material.Tab, { value: "template-settings", label: "Settings" })))),
|
|
3603
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { width: INSPECTOR_DRAWER_WIDTH, height: "calc(100% - 49px)", overflow: "auto" } }, renderCurrentSidebarPanel())
|
|
3271
3604
|
);
|
|
3272
3605
|
}
|
|
3273
3606
|
function SidebarButton({
|
|
@@ -3289,7 +3622,7 @@ function SidebarButton({
|
|
|
3289
3622
|
console.error("Error loading template:", error);
|
|
3290
3623
|
}
|
|
3291
3624
|
});
|
|
3292
|
-
return /* @__PURE__ */
|
|
3625
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Button, { size: "small", onClick: handleClick, sx: sx2 }, children);
|
|
3293
3626
|
}
|
|
3294
3627
|
|
|
3295
3628
|
// sample-templates/empty-email-message.ts
|
|
@@ -3325,10 +3658,10 @@ function SamplesDrawer({
|
|
|
3325
3658
|
deleteTemplate
|
|
3326
3659
|
}) {
|
|
3327
3660
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
3328
|
-
const [samples, setSamples] =
|
|
3329
|
-
const [templates, setTemplates] =
|
|
3330
|
-
const [loadingSamples, setLoadingSamples] =
|
|
3331
|
-
const [loadingTemplates, setLoadingTemplates] =
|
|
3661
|
+
const [samples, setSamples] = React72.useState([EMPTY_TEMPLATE]);
|
|
3662
|
+
const [templates, setTemplates] = React72.useState([]);
|
|
3663
|
+
const [loadingSamples, setLoadingSamples] = React72.useState(false);
|
|
3664
|
+
const [loadingTemplates, setLoadingTemplates] = React72.useState(false);
|
|
3332
3665
|
const handleLoadTemplate = (templateId) => __async(null, null, function* () {
|
|
3333
3666
|
if (templateId === "empty-email") {
|
|
3334
3667
|
return empty_email_message_default;
|
|
@@ -3338,7 +3671,7 @@ function SamplesDrawer({
|
|
|
3338
3671
|
}
|
|
3339
3672
|
return null;
|
|
3340
3673
|
});
|
|
3341
|
-
|
|
3674
|
+
React72.useEffect(() => {
|
|
3342
3675
|
if (enabled && samplesDrawerOpen && loadSamples) {
|
|
3343
3676
|
setLoadingSamples(true);
|
|
3344
3677
|
loadSamples().then((results) => {
|
|
@@ -3356,7 +3689,7 @@ function SamplesDrawer({
|
|
|
3356
3689
|
});
|
|
3357
3690
|
}
|
|
3358
3691
|
}, [enabled, samplesDrawerOpen, loadSamples]);
|
|
3359
|
-
|
|
3692
|
+
React72.useEffect(() => {
|
|
3360
3693
|
if (enabled && loadTemplates) {
|
|
3361
3694
|
setLoadingTemplates(true);
|
|
3362
3695
|
loadTemplates().then((results) => {
|
|
@@ -3368,7 +3701,7 @@ function SamplesDrawer({
|
|
|
3368
3701
|
});
|
|
3369
3702
|
}
|
|
3370
3703
|
}, [enabled, loadTemplates]);
|
|
3371
|
-
|
|
3704
|
+
React72.useEffect(() => {
|
|
3372
3705
|
const handleTemplateListUpdate = (e) => {
|
|
3373
3706
|
setTemplates(e.detail);
|
|
3374
3707
|
};
|
|
@@ -3378,7 +3711,7 @@ function SamplesDrawer({
|
|
|
3378
3711
|
if (!enabled) {
|
|
3379
3712
|
return null;
|
|
3380
3713
|
}
|
|
3381
|
-
return /* @__PURE__ */
|
|
3714
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3382
3715
|
material.Drawer,
|
|
3383
3716
|
{
|
|
3384
3717
|
variant: "persistent",
|
|
@@ -3400,7 +3733,7 @@ function SamplesDrawer({
|
|
|
3400
3733
|
width: samplesDrawerOpen ? SAMPLES_DRAWER_WIDTH : 0
|
|
3401
3734
|
}
|
|
3402
3735
|
},
|
|
3403
|
-
/* @__PURE__ */
|
|
3736
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3404
3737
|
material.Stack,
|
|
3405
3738
|
{
|
|
3406
3739
|
spacing: 3,
|
|
@@ -3410,7 +3743,7 @@ function SamplesDrawer({
|
|
|
3410
3743
|
justifyContent: "space-between",
|
|
3411
3744
|
height: "100%"
|
|
3412
3745
|
},
|
|
3413
|
-
/* @__PURE__ */
|
|
3746
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3414
3747
|
material.Stack,
|
|
3415
3748
|
{
|
|
3416
3749
|
spacing: 2,
|
|
@@ -3421,8 +3754,8 @@ function SamplesDrawer({
|
|
|
3421
3754
|
}
|
|
3422
3755
|
}
|
|
3423
3756
|
},
|
|
3424
|
-
/* @__PURE__ */
|
|
3425
|
-
loadTemplates && /* @__PURE__ */
|
|
3757
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "h6", component: "h1", sx: { p: 2 } }, "Templates"),
|
|
3758
|
+
loadTemplates && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3426
3759
|
material.Typography,
|
|
3427
3760
|
{
|
|
3428
3761
|
variant: "subtitle2",
|
|
@@ -3430,7 +3763,7 @@ function SamplesDrawer({
|
|
|
3430
3763
|
sx: { fontWeight: "bold", mt: 2 }
|
|
3431
3764
|
},
|
|
3432
3765
|
"Your Templates"
|
|
3433
|
-
), loadingTemplates ? /* @__PURE__ */
|
|
3766
|
+
), loadingTemplates ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.CircularProgress, { size: 24 })) : templates.length > 0 ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start", width: "100%" }, templates.map((template) => /* @__PURE__ */ React72__default.default.createElement(
|
|
3434
3767
|
material.Box,
|
|
3435
3768
|
{
|
|
3436
3769
|
key: template.id,
|
|
@@ -3445,7 +3778,7 @@ function SamplesDrawer({
|
|
|
3445
3778
|
}
|
|
3446
3779
|
}
|
|
3447
3780
|
},
|
|
3448
|
-
/* @__PURE__ */
|
|
3781
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3449
3782
|
SidebarButton,
|
|
3450
3783
|
{
|
|
3451
3784
|
templateId: template.id,
|
|
@@ -3454,15 +3787,15 @@ function SamplesDrawer({
|
|
|
3454
3787
|
},
|
|
3455
3788
|
template.name
|
|
3456
3789
|
)
|
|
3457
|
-
))) : /* @__PURE__ */
|
|
3790
|
+
))) : /* @__PURE__ */ React72__default.default.createElement(
|
|
3458
3791
|
material.Typography,
|
|
3459
3792
|
{
|
|
3460
3793
|
variant: "body2",
|
|
3461
3794
|
sx: { color: "text.secondary", py: 1 }
|
|
3462
3795
|
},
|
|
3463
3796
|
"No saved templates"
|
|
3464
|
-
), /* @__PURE__ */
|
|
3465
|
-
/* @__PURE__ */
|
|
3797
|
+
), /* @__PURE__ */ React72__default.default.createElement(material.Divider, null)),
|
|
3798
|
+
/* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3466
3799
|
material.Typography,
|
|
3467
3800
|
{
|
|
3468
3801
|
variant: "subtitle2",
|
|
@@ -3470,7 +3803,7 @@ function SamplesDrawer({
|
|
|
3470
3803
|
sx: { fontWeight: "bold", mt: 1 }
|
|
3471
3804
|
},
|
|
3472
3805
|
"Sample Templates"
|
|
3473
|
-
), loadingSamples ? /* @__PURE__ */
|
|
3806
|
+
), loadingSamples ? /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "center", width: "100%", py: 1 }, /* @__PURE__ */ React72__default.default.createElement(material.CircularProgress, { size: 24 })) : /* @__PURE__ */ React72__default.default.createElement(material.Stack, { alignItems: "flex-start" }, samples.map((sample) => /* @__PURE__ */ React72__default.default.createElement(
|
|
3474
3807
|
SidebarButton,
|
|
3475
3808
|
{
|
|
3476
3809
|
key: sample.id,
|
|
@@ -3495,7 +3828,7 @@ var ICON_SX = {
|
|
|
3495
3828
|
borderColor: "cadet.300"
|
|
3496
3829
|
};
|
|
3497
3830
|
function BlockTypeButton({ label, icon, onClick }) {
|
|
3498
|
-
return /* @__PURE__ */
|
|
3831
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3499
3832
|
material.Button,
|
|
3500
3833
|
{
|
|
3501
3834
|
sx: BUTTON_SX2,
|
|
@@ -3504,14 +3837,14 @@ function BlockTypeButton({ label, icon, onClick }) {
|
|
|
3504
3837
|
onClick();
|
|
3505
3838
|
}
|
|
3506
3839
|
},
|
|
3507
|
-
/* @__PURE__ */
|
|
3508
|
-
/* @__PURE__ */
|
|
3840
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: ICON_SX }, icon),
|
|
3841
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Typography, { variant: "body2" }, label)
|
|
3509
3842
|
);
|
|
3510
3843
|
}
|
|
3511
3844
|
var BUTTONS = [
|
|
3512
3845
|
{
|
|
3513
3846
|
label: "Heading",
|
|
3514
|
-
icon: /* @__PURE__ */
|
|
3847
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HMobiledataOutlined, null),
|
|
3515
3848
|
block: () => ({
|
|
3516
3849
|
type: "Heading",
|
|
3517
3850
|
data: {
|
|
@@ -3524,7 +3857,7 @@ var BUTTONS = [
|
|
|
3524
3857
|
},
|
|
3525
3858
|
{
|
|
3526
3859
|
label: "Text",
|
|
3527
|
-
icon: /* @__PURE__ */
|
|
3860
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.NotesOutlined, null),
|
|
3528
3861
|
block: () => ({
|
|
3529
3862
|
type: "Text",
|
|
3530
3863
|
data: {
|
|
@@ -3538,7 +3871,7 @@ var BUTTONS = [
|
|
|
3538
3871
|
},
|
|
3539
3872
|
{
|
|
3540
3873
|
label: "Button",
|
|
3541
|
-
icon: /* @__PURE__ */
|
|
3874
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SmartButtonOutlined, null),
|
|
3542
3875
|
block: () => ({
|
|
3543
3876
|
type: "Button",
|
|
3544
3877
|
data: {
|
|
@@ -3552,7 +3885,7 @@ var BUTTONS = [
|
|
|
3552
3885
|
},
|
|
3553
3886
|
{
|
|
3554
3887
|
label: "Image",
|
|
3555
|
-
icon: /* @__PURE__ */
|
|
3888
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ImageOutlined, null),
|
|
3556
3889
|
block: () => ({
|
|
3557
3890
|
type: "Image",
|
|
3558
3891
|
data: {
|
|
@@ -3568,7 +3901,7 @@ var BUTTONS = [
|
|
|
3568
3901
|
},
|
|
3569
3902
|
{
|
|
3570
3903
|
label: "Avatar",
|
|
3571
|
-
icon: /* @__PURE__ */
|
|
3904
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AccountCircleOutlined, null),
|
|
3572
3905
|
block: () => ({
|
|
3573
3906
|
type: "Avatar",
|
|
3574
3907
|
data: {
|
|
@@ -3580,9 +3913,51 @@ var BUTTONS = [
|
|
|
3580
3913
|
}
|
|
3581
3914
|
})
|
|
3582
3915
|
},
|
|
3916
|
+
{
|
|
3917
|
+
label: "Personal Signature",
|
|
3918
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContactMailOutlined, null),
|
|
3919
|
+
block: () => ({
|
|
3920
|
+
type: "Signature",
|
|
3921
|
+
data: {
|
|
3922
|
+
props: {
|
|
3923
|
+
greeting: "Best regards,",
|
|
3924
|
+
name: "John Doe",
|
|
3925
|
+
title: "Software Engineer",
|
|
3926
|
+
company: "Acme Inc.",
|
|
3927
|
+
email: "john@example.com",
|
|
3928
|
+
phone: "+1 234 567 890",
|
|
3929
|
+
imageUrl: "https://ui-avatars.com/api/?name=John+Doe&size=128",
|
|
3930
|
+
imageSize: 64,
|
|
3931
|
+
imageShape: "circle",
|
|
3932
|
+
layout: "horizontal"
|
|
3933
|
+
},
|
|
3934
|
+
style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
|
|
3935
|
+
}
|
|
3936
|
+
})
|
|
3937
|
+
},
|
|
3938
|
+
{
|
|
3939
|
+
label: "Company Signature",
|
|
3940
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.BusinessOutlined, null),
|
|
3941
|
+
block: () => ({
|
|
3942
|
+
type: "Signature",
|
|
3943
|
+
data: {
|
|
3944
|
+
props: {
|
|
3945
|
+
company: "Acme Inc.",
|
|
3946
|
+
address: "123 Main Street, City, Country",
|
|
3947
|
+
email: "support@example.com",
|
|
3948
|
+
website: "www.example.com",
|
|
3949
|
+
imageUrl: "https://placehold.co/128x128/EEE/999?text=Logo",
|
|
3950
|
+
imageSize: 48,
|
|
3951
|
+
imageShape: "rounded",
|
|
3952
|
+
layout: "horizontal"
|
|
3953
|
+
},
|
|
3954
|
+
style: { padding: { top: 16, bottom: 16, left: 24, right: 24 } }
|
|
3955
|
+
}
|
|
3956
|
+
})
|
|
3957
|
+
},
|
|
3583
3958
|
{
|
|
3584
3959
|
label: "Divider",
|
|
3585
|
-
icon: /* @__PURE__ */
|
|
3960
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HorizontalRuleOutlined, null),
|
|
3586
3961
|
block: () => ({
|
|
3587
3962
|
type: "Divider",
|
|
3588
3963
|
data: {
|
|
@@ -3595,7 +3970,7 @@ var BUTTONS = [
|
|
|
3595
3970
|
},
|
|
3596
3971
|
{
|
|
3597
3972
|
label: "Spacer",
|
|
3598
|
-
icon: /* @__PURE__ */
|
|
3973
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.Crop32Outlined, null),
|
|
3599
3974
|
block: () => ({
|
|
3600
3975
|
type: "Spacer",
|
|
3601
3976
|
data: {}
|
|
@@ -3603,7 +3978,7 @@ var BUTTONS = [
|
|
|
3603
3978
|
},
|
|
3604
3979
|
{
|
|
3605
3980
|
label: "Html",
|
|
3606
|
-
icon: /* @__PURE__ */
|
|
3981
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.HtmlOutlined, null),
|
|
3607
3982
|
block: () => ({
|
|
3608
3983
|
type: "Html",
|
|
3609
3984
|
data: {
|
|
@@ -3618,7 +3993,7 @@ var BUTTONS = [
|
|
|
3618
3993
|
},
|
|
3619
3994
|
{
|
|
3620
3995
|
label: "Columns",
|
|
3621
|
-
icon: /* @__PURE__ */
|
|
3996
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ViewColumnOutlined, null),
|
|
3622
3997
|
block: () => ({
|
|
3623
3998
|
type: "ColumnsContainer",
|
|
3624
3999
|
data: {
|
|
@@ -3633,7 +4008,7 @@ var BUTTONS = [
|
|
|
3633
4008
|
},
|
|
3634
4009
|
{
|
|
3635
4010
|
label: "Container",
|
|
3636
|
-
icon: /* @__PURE__ */
|
|
4011
|
+
icon: /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LibraryAddOutlined, null),
|
|
3637
4012
|
block: () => ({
|
|
3638
4013
|
type: "Container",
|
|
3639
4014
|
data: {
|
|
@@ -3657,7 +4032,7 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3657
4032
|
if (anchorEl === null) {
|
|
3658
4033
|
return null;
|
|
3659
4034
|
}
|
|
3660
|
-
return /* @__PURE__ */
|
|
4035
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3661
4036
|
material.Menu,
|
|
3662
4037
|
{
|
|
3663
4038
|
open: true,
|
|
@@ -3666,12 +4041,12 @@ function BlocksMenu({ anchorEl, setAnchorEl, onSelect }) {
|
|
|
3666
4041
|
anchorOrigin: { vertical: "bottom", horizontal: "center" },
|
|
3667
4042
|
transformOrigin: { vertical: "top", horizontal: "center" }
|
|
3668
4043
|
},
|
|
3669
|
-
/* @__PURE__ */
|
|
4044
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { p: 1, display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr" } }, BUTTONS.map((k, i) => /* @__PURE__ */ React72__default.default.createElement(BlockTypeButton, { key: i, label: k.label, icon: k.icon, onClick: () => onClick(k.block()) })))
|
|
3670
4045
|
);
|
|
3671
4046
|
}
|
|
3672
4047
|
function DividerButton({ buttonElement, onClick }) {
|
|
3673
|
-
const [visible, setVisible] =
|
|
3674
|
-
|
|
4048
|
+
const [visible, setVisible] = React72.useState(false);
|
|
4049
|
+
React72.useEffect(() => {
|
|
3675
4050
|
function listener({ clientX, clientY }) {
|
|
3676
4051
|
if (!buttonElement) {
|
|
3677
4052
|
return;
|
|
@@ -3693,7 +4068,7 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3693
4068
|
window.removeEventListener("mousemove", listener);
|
|
3694
4069
|
};
|
|
3695
4070
|
}, [buttonElement, setVisible]);
|
|
3696
|
-
return /* @__PURE__ */
|
|
4071
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Fade, { in: visible }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3697
4072
|
material.IconButton,
|
|
3698
4073
|
{
|
|
3699
4074
|
size: "small",
|
|
@@ -3716,11 +4091,11 @@ function DividerButton({ buttonElement, onClick }) {
|
|
|
3716
4091
|
onClick();
|
|
3717
4092
|
}
|
|
3718
4093
|
},
|
|
3719
|
-
/* @__PURE__ */
|
|
4094
|
+
/* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AddOutlined, { fontSize: "small" })
|
|
3720
4095
|
));
|
|
3721
4096
|
}
|
|
3722
4097
|
function PlaceholderButton({ onClick }) {
|
|
3723
|
-
return /* @__PURE__ */
|
|
4098
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3724
4099
|
material.ButtonBase,
|
|
3725
4100
|
{
|
|
3726
4101
|
onClick: (ev) => {
|
|
@@ -3736,7 +4111,7 @@ function PlaceholderButton({ onClick }) {
|
|
|
3736
4111
|
bgcolor: "rgba(0,0,0, 0.05)"
|
|
3737
4112
|
}
|
|
3738
4113
|
},
|
|
3739
|
-
/* @__PURE__ */
|
|
4114
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3740
4115
|
iconsMaterial.AddOutlined,
|
|
3741
4116
|
{
|
|
3742
4117
|
sx: {
|
|
@@ -3753,19 +4128,19 @@ function PlaceholderButton({ onClick }) {
|
|
|
3753
4128
|
|
|
3754
4129
|
// src/editor/blocks/helpers/editor-children-ids/add-block-menu/index.tsx
|
|
3755
4130
|
function AddBlockButton({ onSelect, placeholder }) {
|
|
3756
|
-
const [menuAnchorEl, setMenuAnchorEl] =
|
|
3757
|
-
const [buttonElement, setButtonElement] =
|
|
4131
|
+
const [menuAnchorEl, setMenuAnchorEl] = React72.useState(null);
|
|
4132
|
+
const [buttonElement, setButtonElement] = React72.useState(null);
|
|
3758
4133
|
const handleButtonClick = () => {
|
|
3759
4134
|
setMenuAnchorEl(buttonElement);
|
|
3760
4135
|
};
|
|
3761
4136
|
const renderButton2 = () => {
|
|
3762
4137
|
if (placeholder) {
|
|
3763
|
-
return /* @__PURE__ */
|
|
4138
|
+
return /* @__PURE__ */ React72__default.default.createElement(PlaceholderButton, { onClick: handleButtonClick });
|
|
3764
4139
|
} else {
|
|
3765
|
-
return /* @__PURE__ */
|
|
4140
|
+
return /* @__PURE__ */ React72__default.default.createElement(DividerButton, { buttonElement, onClick: handleButtonClick });
|
|
3766
4141
|
}
|
|
3767
4142
|
};
|
|
3768
|
-
return /* @__PURE__ */
|
|
4143
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement("div", { ref: setButtonElement, style: { position: "relative" } }, renderButton2()), /* @__PURE__ */ React72__default.default.createElement(BlocksMenu, { anchorEl: menuAnchorEl, setAnchorEl: setMenuAnchorEl, onSelect }));
|
|
3769
4144
|
}
|
|
3770
4145
|
|
|
3771
4146
|
// src/editor/blocks/helpers/editor-children-ids/index.tsx
|
|
@@ -3792,9 +4167,9 @@ function EditorChildrenIds({ childrenIds, onChange }) {
|
|
|
3792
4167
|
});
|
|
3793
4168
|
};
|
|
3794
4169
|
if (!childrenIds || childrenIds.length === 0) {
|
|
3795
|
-
return /* @__PURE__ */
|
|
4170
|
+
return /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { placeholder: true, onSelect: appendBlock });
|
|
3796
4171
|
}
|
|
3797
|
-
return /* @__PURE__ */
|
|
4172
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, childrenIds.map((childId, i) => /* @__PURE__ */ React72__default.default.createElement(React72.Fragment, { key: childId }, /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { onSelect: (block) => insertBlock(block, i) }), /* @__PURE__ */ React72__default.default.createElement(EditorBlock, { id: childId }))), /* @__PURE__ */ React72__default.default.createElement(AddBlockButton, { onSelect: appendBlock }));
|
|
3798
4173
|
}
|
|
3799
4174
|
|
|
3800
4175
|
// src/editor/blocks/columns-container/columns-container-editor.tsx
|
|
@@ -3821,15 +4196,15 @@ function ColumnsContainerEditor({ style, props }) {
|
|
|
3821
4196
|
});
|
|
3822
4197
|
setSelectedBlockId(blockId);
|
|
3823
4198
|
};
|
|
3824
|
-
return /* @__PURE__ */
|
|
4199
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3825
4200
|
columns_container_default,
|
|
3826
4201
|
{
|
|
3827
4202
|
props: restProps,
|
|
3828
4203
|
style,
|
|
3829
4204
|
columns: [
|
|
3830
|
-
/* @__PURE__ */
|
|
3831
|
-
/* @__PURE__ */
|
|
3832
|
-
/* @__PURE__ */
|
|
4205
|
+
/* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_b = columns == null ? void 0 : columns[0]) == null ? void 0 : _b.childrenIds, onChange: (change) => updateColumn(0, change) }),
|
|
4206
|
+
/* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_c = columns == null ? void 0 : columns[1]) == null ? void 0 : _c.childrenIds, onChange: (change) => updateColumn(1, change) }),
|
|
4207
|
+
/* @__PURE__ */ React72__default.default.createElement(EditorChildrenIds, { childrenIds: (_d = columns == null ? void 0 : columns[2]) == null ? void 0 : _d.childrenIds, onChange: (change) => updateColumn(2, change) })
|
|
3833
4208
|
]
|
|
3834
4209
|
}
|
|
3835
4210
|
);
|
|
@@ -3839,7 +4214,7 @@ function ContainerEditor({ style, props }) {
|
|
|
3839
4214
|
const childrenIds = (_a = props == null ? void 0 : props.childrenIds) != null ? _a : [];
|
|
3840
4215
|
const document2 = useDocument();
|
|
3841
4216
|
const currentBlockId = useCurrentBlockId();
|
|
3842
|
-
return /* @__PURE__ */
|
|
4217
|
+
return /* @__PURE__ */ React72__default.default.createElement(container_default, { style }, /* @__PURE__ */ React72__default.default.createElement(
|
|
3843
4218
|
EditorChildrenIds,
|
|
3844
4219
|
{
|
|
3845
4220
|
childrenIds,
|
|
@@ -3858,7 +4233,65 @@ function ContainerEditor({ style, props }) {
|
|
|
3858
4233
|
}
|
|
3859
4234
|
));
|
|
3860
4235
|
}
|
|
3861
|
-
function
|
|
4236
|
+
function generateId2() {
|
|
4237
|
+
return `block-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`;
|
|
4238
|
+
}
|
|
4239
|
+
function rekeyBlocks(blocks, rootBlockId) {
|
|
4240
|
+
var _a, _b, _c;
|
|
4241
|
+
const idMap = {};
|
|
4242
|
+
for (const oldId of Object.keys(blocks)) {
|
|
4243
|
+
idMap[oldId] = generateId2();
|
|
4244
|
+
}
|
|
4245
|
+
const remapIds = (ids) => ids == null ? void 0 : ids.map((id) => {
|
|
4246
|
+
var _a2;
|
|
4247
|
+
return (_a2 = idMap[id]) != null ? _a2 : id;
|
|
4248
|
+
});
|
|
4249
|
+
const newBlocks = {};
|
|
4250
|
+
for (const [oldId, block] of Object.entries(blocks)) {
|
|
4251
|
+
const b = block;
|
|
4252
|
+
const newId = idMap[oldId];
|
|
4253
|
+
if (b.type === "Container") {
|
|
4254
|
+
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
4255
|
+
data: __spreadProps(__spreadValues({}, b.data), {
|
|
4256
|
+
props: __spreadProps(__spreadValues({}, b.data.props), { childrenIds: remapIds((_a = b.data.props) == null ? void 0 : _a.childrenIds) })
|
|
4257
|
+
})
|
|
4258
|
+
});
|
|
4259
|
+
} else if (b.type === "ColumnsContainer") {
|
|
4260
|
+
newBlocks[newId] = __spreadProps(__spreadValues({}, b), {
|
|
4261
|
+
data: __spreadProps(__spreadValues({}, b.data), {
|
|
4262
|
+
props: __spreadProps(__spreadValues({}, b.data.props), {
|
|
4263
|
+
columns: (_c = (_b = b.data.props) == null ? void 0 : _b.columns) == null ? void 0 : _c.map((c) => __spreadProps(__spreadValues({}, c), {
|
|
4264
|
+
childrenIds: remapIds(c.childrenIds)
|
|
4265
|
+
}))
|
|
4266
|
+
})
|
|
4267
|
+
})
|
|
4268
|
+
});
|
|
4269
|
+
} else {
|
|
4270
|
+
newBlocks[newId] = b;
|
|
4271
|
+
}
|
|
4272
|
+
}
|
|
4273
|
+
return { blocks: newBlocks, newRootId: idMap[rootBlockId] };
|
|
4274
|
+
}
|
|
4275
|
+
function collectBlock(blockId, document2) {
|
|
4276
|
+
var _a, _b, _c, _d, _e;
|
|
4277
|
+
const block = document2[blockId];
|
|
4278
|
+
if (!block) return {};
|
|
4279
|
+
const result = { [blockId]: block };
|
|
4280
|
+
if (block.type === "Container") {
|
|
4281
|
+
for (const childId of (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : []) {
|
|
4282
|
+
Object.assign(result, collectBlock(childId, document2));
|
|
4283
|
+
}
|
|
4284
|
+
}
|
|
4285
|
+
if (block.type === "ColumnsContainer") {
|
|
4286
|
+
for (const col of (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : []) {
|
|
4287
|
+
for (const childId of (_e = col.childrenIds) != null ? _e : []) {
|
|
4288
|
+
Object.assign(result, collectBlock(childId, document2));
|
|
4289
|
+
}
|
|
4290
|
+
}
|
|
4291
|
+
}
|
|
4292
|
+
return result;
|
|
4293
|
+
}
|
|
4294
|
+
function getFontFamily7(fontFamily) {
|
|
3862
4295
|
const f = fontFamily != null ? fontFamily : "MODERN_SANS";
|
|
3863
4296
|
switch (f) {
|
|
3864
4297
|
case "MODERN_SANS":
|
|
@@ -3886,7 +4319,93 @@ function EmailLayoutEditor(props) {
|
|
|
3886
4319
|
const childrenIds = (_a = props.childrenIds) != null ? _a : [];
|
|
3887
4320
|
const document2 = useDocument();
|
|
3888
4321
|
const currentBlockId = useCurrentBlockId();
|
|
3889
|
-
|
|
4322
|
+
const selectedBlockId = useSelectedBlockId();
|
|
4323
|
+
const handleDelete = React72.useCallback((e) => {
|
|
4324
|
+
var _a2, _b2, _c2;
|
|
4325
|
+
if (e.key !== "Delete" && e.key !== "Backspace") return;
|
|
4326
|
+
if (!selectedBlockId) return;
|
|
4327
|
+
const target = e.target;
|
|
4328
|
+
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
4329
|
+
return;
|
|
4330
|
+
}
|
|
4331
|
+
e.preventDefault();
|
|
4332
|
+
const filterChildrenIds = (ids) => ids == null ? void 0 : ids.filter((id) => id !== selectedBlockId);
|
|
4333
|
+
const nDocument = __spreadValues({}, document2);
|
|
4334
|
+
for (const [id, b] of Object.entries(nDocument)) {
|
|
4335
|
+
const block = b;
|
|
4336
|
+
if (id === selectedBlockId) continue;
|
|
4337
|
+
switch (block.type) {
|
|
4338
|
+
case "EmailLayout":
|
|
4339
|
+
nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { childrenIds: filterChildrenIds(block.data.childrenIds) }) });
|
|
4340
|
+
break;
|
|
4341
|
+
case "Container":
|
|
4342
|
+
nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { childrenIds: filterChildrenIds((_a2 = block.data.props) == null ? void 0 : _a2.childrenIds) }) }) });
|
|
4343
|
+
break;
|
|
4344
|
+
case "ColumnsContainer":
|
|
4345
|
+
nDocument[id] = __spreadProps(__spreadValues({}, block), { data: __spreadProps(__spreadValues({}, block.data), { props: __spreadProps(__spreadValues({}, block.data.props), { columns: (_c2 = (_b2 = block.data.props) == null ? void 0 : _b2.columns) == null ? void 0 : _c2.map((c) => __spreadProps(__spreadValues({}, c), { childrenIds: filterChildrenIds(c.childrenIds) })) }) }) });
|
|
4346
|
+
break;
|
|
4347
|
+
default:
|
|
4348
|
+
nDocument[id] = block;
|
|
4349
|
+
}
|
|
4350
|
+
}
|
|
4351
|
+
delete nDocument[selectedBlockId];
|
|
4352
|
+
resetDocument(nDocument);
|
|
4353
|
+
}, [selectedBlockId, document2]);
|
|
4354
|
+
const handleCopy = React72.useCallback((e) => {
|
|
4355
|
+
if (!(e.metaKey || e.ctrlKey) || e.key !== "c") return;
|
|
4356
|
+
if (!selectedBlockId) return;
|
|
4357
|
+
const target = e.target;
|
|
4358
|
+
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
4359
|
+
return;
|
|
4360
|
+
}
|
|
4361
|
+
const blocks = collectBlock(selectedBlockId, document2);
|
|
4362
|
+
if (Object.keys(blocks).length === 0) return;
|
|
4363
|
+
e.preventDefault();
|
|
4364
|
+
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: selectedBlockId, blocks });
|
|
4365
|
+
navigator.clipboard.writeText(payload);
|
|
4366
|
+
}, [selectedBlockId, document2]);
|
|
4367
|
+
const handlePaste = React72.useCallback((e) => __async(null, null, function* () {
|
|
4368
|
+
var _a2;
|
|
4369
|
+
const target = e.target;
|
|
4370
|
+
if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable) {
|
|
4371
|
+
return;
|
|
4372
|
+
}
|
|
4373
|
+
const text = (_a2 = e.clipboardData) == null ? void 0 : _a2.getData("text/plain");
|
|
4374
|
+
if (!text) return;
|
|
4375
|
+
let parsed;
|
|
4376
|
+
try {
|
|
4377
|
+
parsed = JSON.parse(text);
|
|
4378
|
+
} catch (e2) {
|
|
4379
|
+
return;
|
|
4380
|
+
}
|
|
4381
|
+
if (!(parsed == null ? void 0 : parsed.__emailEditorBlocks) || !parsed.rootBlockId || !parsed.blocks) return;
|
|
4382
|
+
e.preventDefault();
|
|
4383
|
+
const { blocks: newBlocks, newRootId } = rekeyBlocks(parsed.blocks, parsed.rootBlockId);
|
|
4384
|
+
const doc = __spreadValues({}, document2);
|
|
4385
|
+
Object.assign(doc, newBlocks);
|
|
4386
|
+
const currentChildrenIds = [...childrenIds || []];
|
|
4387
|
+
const insertIndex = selectedBlockId ? currentChildrenIds.indexOf(selectedBlockId) + 1 : currentChildrenIds.length;
|
|
4388
|
+
currentChildrenIds.splice(insertIndex, 0, newRootId);
|
|
4389
|
+
doc[currentBlockId] = {
|
|
4390
|
+
type: "EmailLayout",
|
|
4391
|
+
data: __spreadProps(__spreadValues({}, document2[currentBlockId].data), {
|
|
4392
|
+
childrenIds: currentChildrenIds
|
|
4393
|
+
})
|
|
4394
|
+
};
|
|
4395
|
+
resetDocument(doc);
|
|
4396
|
+
setSelectedBlockId(newRootId);
|
|
4397
|
+
}), [document2, childrenIds, selectedBlockId, currentBlockId]);
|
|
4398
|
+
React72.useEffect(() => {
|
|
4399
|
+
window.addEventListener("keydown", handleDelete);
|
|
4400
|
+
window.addEventListener("keydown", handleCopy);
|
|
4401
|
+
window.addEventListener("paste", handlePaste);
|
|
4402
|
+
return () => {
|
|
4403
|
+
window.removeEventListener("keydown", handleDelete);
|
|
4404
|
+
window.removeEventListener("keydown", handleCopy);
|
|
4405
|
+
window.removeEventListener("paste", handlePaste);
|
|
4406
|
+
};
|
|
4407
|
+
}, [handleDelete, handleCopy, handlePaste]);
|
|
4408
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
3890
4409
|
"div",
|
|
3891
4410
|
{
|
|
3892
4411
|
onClick: () => {
|
|
@@ -3895,7 +4414,7 @@ function EmailLayoutEditor(props) {
|
|
|
3895
4414
|
style: {
|
|
3896
4415
|
backgroundColor: (_b = props.backdropColor) != null ? _b : "#F5F5F5",
|
|
3897
4416
|
color: (_c = props.textColor) != null ? _c : "#262626",
|
|
3898
|
-
fontFamily:
|
|
4417
|
+
fontFamily: getFontFamily7(props.fontFamily),
|
|
3899
4418
|
fontSize: "16px",
|
|
3900
4419
|
fontWeight: "400",
|
|
3901
4420
|
letterSpacing: "0.15008px",
|
|
@@ -3906,7 +4425,7 @@ function EmailLayoutEditor(props) {
|
|
|
3906
4425
|
minHeight: "100%"
|
|
3907
4426
|
}
|
|
3908
4427
|
},
|
|
3909
|
-
/* @__PURE__ */
|
|
4428
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
3910
4429
|
"table",
|
|
3911
4430
|
{
|
|
3912
4431
|
align: "center",
|
|
@@ -3929,7 +4448,7 @@ function EmailLayoutEditor(props) {
|
|
|
3929
4448
|
cellPadding: "0",
|
|
3930
4449
|
border: 0
|
|
3931
4450
|
},
|
|
3932
|
-
/* @__PURE__ */
|
|
4451
|
+
/* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", { style: { width: "100%" } }, /* @__PURE__ */ React72__default.default.createElement("td", null, /* @__PURE__ */ React72__default.default.createElement(
|
|
3933
4452
|
EditorChildrenIds,
|
|
3934
4453
|
{
|
|
3935
4454
|
childrenIds,
|
|
@@ -3959,6 +4478,33 @@ var sx = {
|
|
|
3959
4478
|
paddingY: 1,
|
|
3960
4479
|
zIndex: "fab"
|
|
3961
4480
|
};
|
|
4481
|
+
function collectBlock2(blockId, document2) {
|
|
4482
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4483
|
+
const block = document2[blockId];
|
|
4484
|
+
if (!block) return {};
|
|
4485
|
+
const result = { [blockId]: block };
|
|
4486
|
+
if (block.type === "Container") {
|
|
4487
|
+
const childrenIds = (_b = (_a = block.data.props) == null ? void 0 : _a.childrenIds) != null ? _b : [];
|
|
4488
|
+
for (const childId of childrenIds) {
|
|
4489
|
+
Object.assign(result, collectBlock2(childId, document2));
|
|
4490
|
+
}
|
|
4491
|
+
}
|
|
4492
|
+
if (block.type === "ColumnsContainer") {
|
|
4493
|
+
const columns = (_d = (_c = block.data.props) == null ? void 0 : _c.columns) != null ? _d : [];
|
|
4494
|
+
for (const col of columns) {
|
|
4495
|
+
for (const childId of (_e = col.childrenIds) != null ? _e : []) {
|
|
4496
|
+
Object.assign(result, collectBlock2(childId, document2));
|
|
4497
|
+
}
|
|
4498
|
+
}
|
|
4499
|
+
}
|
|
4500
|
+
if (block.type === "EmailLayout") {
|
|
4501
|
+
const childrenIds = (_f = block.data.childrenIds) != null ? _f : [];
|
|
4502
|
+
for (const childId of childrenIds) {
|
|
4503
|
+
Object.assign(result, collectBlock2(childId, document2));
|
|
4504
|
+
}
|
|
4505
|
+
}
|
|
4506
|
+
return result;
|
|
4507
|
+
}
|
|
3962
4508
|
function TuneMenu({ blockId }) {
|
|
3963
4509
|
const document2 = useDocument();
|
|
3964
4510
|
const handleDeleteClick = () => {
|
|
@@ -4012,6 +4558,11 @@ function TuneMenu({ blockId }) {
|
|
|
4012
4558
|
delete nDocument[blockId];
|
|
4013
4559
|
resetDocument(nDocument);
|
|
4014
4560
|
};
|
|
4561
|
+
const handleCopyClick = () => {
|
|
4562
|
+
const blocks = collectBlock2(blockId, document2);
|
|
4563
|
+
const payload = JSON.stringify({ __emailEditorBlocks: true, rootBlockId: blockId, blocks });
|
|
4564
|
+
navigator.clipboard.writeText(payload);
|
|
4565
|
+
};
|
|
4015
4566
|
const handleMoveClick = (direction) => {
|
|
4016
4567
|
var _a, _b, _c;
|
|
4017
4568
|
const moveChildrenIds = (ids) => {
|
|
@@ -4073,13 +4624,13 @@ function TuneMenu({ blockId }) {
|
|
|
4073
4624
|
resetDocument(nDocument);
|
|
4074
4625
|
setSelectedBlockId(blockId);
|
|
4075
4626
|
};
|
|
4076
|
-
return /* @__PURE__ */
|
|
4627
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Paper, { sx, onClick: (ev) => ev.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, null, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Move up", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("up"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ArrowUpwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Move down", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: () => handleMoveClick("down"), sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ArrowDownwardOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Copy block", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleCopyClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.ContentCopyOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Delete", placement: "left-start" }, /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleDeleteClick, sx: { color: "text.primary" } }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DeleteOutlined, { fontSize: "small" })))));
|
|
4077
4628
|
}
|
|
4078
4629
|
|
|
4079
4630
|
// src/editor/blocks/helpers/block-wrappers/editor-block-wrapper.tsx
|
|
4080
4631
|
function EditorBlockWrapper({ children }) {
|
|
4081
4632
|
const selectedBlockId = useSelectedBlockId();
|
|
4082
|
-
const [mouseInside, setMouseInside] =
|
|
4633
|
+
const [mouseInside, setMouseInside] = React72.useState(false);
|
|
4083
4634
|
const blockId = useCurrentBlockId();
|
|
4084
4635
|
let outline;
|
|
4085
4636
|
if (selectedBlockId === blockId) {
|
|
@@ -4091,9 +4642,9 @@ function EditorBlockWrapper({ children }) {
|
|
|
4091
4642
|
if (selectedBlockId !== blockId) {
|
|
4092
4643
|
return null;
|
|
4093
4644
|
}
|
|
4094
|
-
return /* @__PURE__ */
|
|
4645
|
+
return /* @__PURE__ */ React72__default.default.createElement(TuneMenu, { blockId });
|
|
4095
4646
|
};
|
|
4096
|
-
return /* @__PURE__ */
|
|
4647
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4097
4648
|
material.Box,
|
|
4098
4649
|
{
|
|
4099
4650
|
sx: {
|
|
@@ -4112,14 +4663,131 @@ function EditorBlockWrapper({ children }) {
|
|
|
4112
4663
|
onClick: (ev) => {
|
|
4113
4664
|
setSelectedBlockId(blockId);
|
|
4114
4665
|
ev.stopPropagation();
|
|
4115
|
-
ev.preventDefault();
|
|
4116
4666
|
}
|
|
4117
4667
|
},
|
|
4118
4668
|
renderMenu(),
|
|
4119
4669
|
children
|
|
4120
4670
|
);
|
|
4121
4671
|
}
|
|
4122
|
-
function
|
|
4672
|
+
function getFontFamily8(fontFamily) {
|
|
4673
|
+
switch (fontFamily) {
|
|
4674
|
+
case "MODERN_SANS":
|
|
4675
|
+
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
4676
|
+
case "BOOK_SANS":
|
|
4677
|
+
return 'Optima, Candara, "Noto Sans", source-sans-pro, sans-serif';
|
|
4678
|
+
case "ORGANIC_SANS":
|
|
4679
|
+
return 'Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif';
|
|
4680
|
+
case "GEOMETRIC_SANS":
|
|
4681
|
+
return 'Avenir, "Avenir Next LT Pro", Montserrat, Corbel, "URW Gothic", source-sans-pro, sans-serif';
|
|
4682
|
+
case "HEAVY_SANS":
|
|
4683
|
+
return 'Bahnschrift, "DIN Alternate", "Franklin Gothic Medium", "Nimbus Sans Narrow", sans-serif-condensed, sans-serif';
|
|
4684
|
+
case "ROUNDED_SANS":
|
|
4685
|
+
return 'ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa, Manjari, "Arial Rounded MT Bold", Calibri, source-sans-pro, sans-serif';
|
|
4686
|
+
case "MODERN_SERIF":
|
|
4687
|
+
return 'Charter, "Bitstream Charter", "Sitka Text", Cambria, serif';
|
|
4688
|
+
case "BOOK_SERIF":
|
|
4689
|
+
return '"Iowan Old Style", "Palatino Linotype", "URW Palladio L", P052, serif';
|
|
4690
|
+
case "MONOSPACE":
|
|
4691
|
+
return '"Nimbus Mono PS", "Courier New", "Cutive Mono", monospace';
|
|
4692
|
+
}
|
|
4693
|
+
return void 0;
|
|
4694
|
+
}
|
|
4695
|
+
var getPadding11 = (padding) => padding ? `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px` : void 0;
|
|
4696
|
+
function getRoundedCorners2(props) {
|
|
4697
|
+
var _a;
|
|
4698
|
+
const buttonStyle = (_a = props == null ? void 0 : props.buttonStyle) != null ? _a : ButtonPropsDefaults.buttonStyle;
|
|
4699
|
+
switch (buttonStyle) {
|
|
4700
|
+
case "rectangle":
|
|
4701
|
+
return void 0;
|
|
4702
|
+
case "pill":
|
|
4703
|
+
return 64;
|
|
4704
|
+
case "rounded":
|
|
4705
|
+
default:
|
|
4706
|
+
return 4;
|
|
4707
|
+
}
|
|
4708
|
+
}
|
|
4709
|
+
function getButtonSizePadding2(props) {
|
|
4710
|
+
var _a;
|
|
4711
|
+
const size = (_a = props == null ? void 0 : props.size) != null ? _a : ButtonPropsDefaults.size;
|
|
4712
|
+
switch (size) {
|
|
4713
|
+
case "x-small":
|
|
4714
|
+
return [4, 8];
|
|
4715
|
+
case "small":
|
|
4716
|
+
return [8, 12];
|
|
4717
|
+
case "large":
|
|
4718
|
+
return [16, 32];
|
|
4719
|
+
case "medium":
|
|
4720
|
+
default:
|
|
4721
|
+
return [12, 20];
|
|
4722
|
+
}
|
|
4723
|
+
}
|
|
4724
|
+
function ButtonEditor({ style, props }) {
|
|
4725
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
4726
|
+
const blockId = useCurrentBlockId();
|
|
4727
|
+
const selectedBlockId = useSelectedBlockId();
|
|
4728
|
+
const isSelected = selectedBlockId === blockId;
|
|
4729
|
+
const text = (_a = props == null ? void 0 : props.text) != null ? _a : ButtonPropsDefaults.text;
|
|
4730
|
+
const fullWidth = (_b = props == null ? void 0 : props.fullWidth) != null ? _b : ButtonPropsDefaults.fullWidth;
|
|
4731
|
+
const buttonTextColor = (_c = props == null ? void 0 : props.buttonTextColor) != null ? _c : ButtonPropsDefaults.buttonTextColor;
|
|
4732
|
+
const buttonBackgroundColor = (_d = props == null ? void 0 : props.buttonBackgroundColor) != null ? _d : ButtonPropsDefaults.buttonBackgroundColor;
|
|
4733
|
+
const [localText, setLocalText] = React72.useState(text);
|
|
4734
|
+
React72.useEffect(() => {
|
|
4735
|
+
setLocalText(text);
|
|
4736
|
+
}, [text]);
|
|
4737
|
+
const padding = getButtonSizePadding2(props);
|
|
4738
|
+
const wrapperStyle = {
|
|
4739
|
+
backgroundColor: (_e = style == null ? void 0 : style.backgroundColor) != null ? _e : void 0,
|
|
4740
|
+
textAlign: (_f = style == null ? void 0 : style.textAlign) != null ? _f : void 0,
|
|
4741
|
+
padding: getPadding11(style == null ? void 0 : style.padding)
|
|
4742
|
+
};
|
|
4743
|
+
const linkStyle = {
|
|
4744
|
+
color: buttonTextColor,
|
|
4745
|
+
fontSize: (_g = style == null ? void 0 : style.fontSize) != null ? _g : 16,
|
|
4746
|
+
fontFamily: getFontFamily8(style == null ? void 0 : style.fontFamily),
|
|
4747
|
+
fontWeight: (_h = style == null ? void 0 : style.fontWeight) != null ? _h : "bold",
|
|
4748
|
+
backgroundColor: buttonBackgroundColor,
|
|
4749
|
+
borderRadius: getRoundedCorners2(props),
|
|
4750
|
+
display: fullWidth ? "block" : "inline-block",
|
|
4751
|
+
padding: `${padding[0]}px ${padding[1]}px`,
|
|
4752
|
+
textDecoration: "none"
|
|
4753
|
+
};
|
|
4754
|
+
const handleTextChange = (e) => {
|
|
4755
|
+
const newText = e.target.value;
|
|
4756
|
+
setLocalText(newText);
|
|
4757
|
+
setDocument({
|
|
4758
|
+
[blockId]: {
|
|
4759
|
+
type: "Button",
|
|
4760
|
+
data: {
|
|
4761
|
+
style,
|
|
4762
|
+
props: __spreadProps(__spreadValues({}, props), {
|
|
4763
|
+
text: newText
|
|
4764
|
+
})
|
|
4765
|
+
}
|
|
4766
|
+
}
|
|
4767
|
+
});
|
|
4768
|
+
};
|
|
4769
|
+
if (isSelected) {
|
|
4770
|
+
const inputStyle = __spreadProps(__spreadValues({}, linkStyle), {
|
|
4771
|
+
border: "none",
|
|
4772
|
+
outline: "none",
|
|
4773
|
+
cursor: "text",
|
|
4774
|
+
width: fullWidth ? "100%" : void 0,
|
|
4775
|
+
textAlign: "center"
|
|
4776
|
+
});
|
|
4777
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4778
|
+
"input",
|
|
4779
|
+
{
|
|
4780
|
+
type: "text",
|
|
4781
|
+
value: localText,
|
|
4782
|
+
onChange: handleTextChange,
|
|
4783
|
+
style: inputStyle,
|
|
4784
|
+
onClick: (e) => e.stopPropagation()
|
|
4785
|
+
}
|
|
4786
|
+
));
|
|
4787
|
+
}
|
|
4788
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, /* @__PURE__ */ React72__default.default.createElement("span", null, text)));
|
|
4789
|
+
}
|
|
4790
|
+
function getFontFamily9(fontFamily) {
|
|
4123
4791
|
switch (fontFamily) {
|
|
4124
4792
|
case "MODERN_SANS":
|
|
4125
4793
|
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
@@ -4146,7 +4814,7 @@ function getFontFamily7(fontFamily) {
|
|
|
4146
4814
|
}
|
|
4147
4815
|
return void 0;
|
|
4148
4816
|
}
|
|
4149
|
-
function
|
|
4817
|
+
function getPadding12(padding) {
|
|
4150
4818
|
if (!padding) return void 0;
|
|
4151
4819
|
if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
|
|
4152
4820
|
return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
|
|
@@ -4188,13 +4856,13 @@ function HeadingEditor({ style, props }) {
|
|
|
4188
4856
|
const isSelected = selectedBlockId === blockId;
|
|
4189
4857
|
const level = (_a = props == null ? void 0 : props.level) != null ? _a : HeadingPropsDefaults.level;
|
|
4190
4858
|
const textContent = (_b = props == null ? void 0 : props.text) != null ? _b : HeadingPropsDefaults.text;
|
|
4191
|
-
const [localText, setLocalText] =
|
|
4859
|
+
const [localText, setLocalText] = React72.useState(textContent);
|
|
4192
4860
|
const rootBlock = document2.root;
|
|
4193
|
-
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ?
|
|
4194
|
-
|
|
4861
|
+
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily9(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
4862
|
+
React72.useEffect(() => {
|
|
4195
4863
|
setLocalText(textContent);
|
|
4196
4864
|
}, [textContent]);
|
|
4197
|
-
const fontFamily =
|
|
4865
|
+
const fontFamily = getFontFamily9(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
4198
4866
|
const hStyle = {
|
|
4199
4867
|
color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
|
|
4200
4868
|
backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
|
|
@@ -4203,7 +4871,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4203
4871
|
margin: 0,
|
|
4204
4872
|
fontFamily,
|
|
4205
4873
|
fontSize: getFontSize2(level),
|
|
4206
|
-
padding:
|
|
4874
|
+
padding: getPadding12(style == null ? void 0 : style.padding),
|
|
4207
4875
|
width: "100%",
|
|
4208
4876
|
minHeight: "1em"
|
|
4209
4877
|
};
|
|
@@ -4240,7 +4908,7 @@ function HeadingEditor({ style, props }) {
|
|
|
4240
4908
|
}
|
|
4241
4909
|
};
|
|
4242
4910
|
if (isSelected) {
|
|
4243
|
-
return /* @__PURE__ */
|
|
4911
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4244
4912
|
"textarea",
|
|
4245
4913
|
{
|
|
4246
4914
|
value: localText,
|
|
@@ -4255,14 +4923,310 @@ function HeadingEditor({ style, props }) {
|
|
|
4255
4923
|
}
|
|
4256
4924
|
switch (level) {
|
|
4257
4925
|
case "h1":
|
|
4258
|
-
return /* @__PURE__ */
|
|
4926
|
+
return /* @__PURE__ */ React72__default.default.createElement("h1", { style: hStyle }, textContent);
|
|
4259
4927
|
case "h2":
|
|
4260
|
-
return /* @__PURE__ */
|
|
4928
|
+
return /* @__PURE__ */ React72__default.default.createElement("h2", { style: hStyle }, textContent);
|
|
4261
4929
|
case "h3":
|
|
4262
|
-
return /* @__PURE__ */
|
|
4930
|
+
return /* @__PURE__ */ React72__default.default.createElement("h3", { style: hStyle }, textContent);
|
|
4263
4931
|
}
|
|
4264
4932
|
}
|
|
4265
|
-
function
|
|
4933
|
+
function HtmlEditor({ style, props }) {
|
|
4934
|
+
var _a, _b, _c, _d, _e, _f;
|
|
4935
|
+
const blockId = useCurrentBlockId();
|
|
4936
|
+
const selectedBlockId = useSelectedBlockId();
|
|
4937
|
+
const isSelected = selectedBlockId === blockId;
|
|
4938
|
+
const contents = (_a = props == null ? void 0 : props.contents) != null ? _a : "";
|
|
4939
|
+
const [localContents, setLocalContents] = React72.useState(contents);
|
|
4940
|
+
React72.useEffect(() => {
|
|
4941
|
+
setLocalContents(contents);
|
|
4942
|
+
}, [contents]);
|
|
4943
|
+
const cssStyle = {
|
|
4944
|
+
color: (_b = style == null ? void 0 : style.color) != null ? _b : void 0,
|
|
4945
|
+
backgroundColor: (_c = style == null ? void 0 : style.backgroundColor) != null ? _c : void 0,
|
|
4946
|
+
fontSize: (_d = style == null ? void 0 : style.fontSize) != null ? _d : void 0,
|
|
4947
|
+
textAlign: (_e = style == null ? void 0 : style.textAlign) != null ? _e : void 0,
|
|
4948
|
+
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
|
|
4949
|
+
};
|
|
4950
|
+
const handleChange = (e) => {
|
|
4951
|
+
const newContents = e.target.value;
|
|
4952
|
+
setLocalContents(newContents);
|
|
4953
|
+
setDocument({
|
|
4954
|
+
[blockId]: {
|
|
4955
|
+
type: "Html",
|
|
4956
|
+
data: {
|
|
4957
|
+
style,
|
|
4958
|
+
props: __spreadProps(__spreadValues({}, props), {
|
|
4959
|
+
contents: newContents
|
|
4960
|
+
})
|
|
4961
|
+
}
|
|
4962
|
+
}
|
|
4963
|
+
});
|
|
4964
|
+
};
|
|
4965
|
+
const adjustTextareaHeight = (element) => {
|
|
4966
|
+
if (element) {
|
|
4967
|
+
element.style.height = "auto";
|
|
4968
|
+
element.style.height = `${element.scrollHeight}px`;
|
|
4969
|
+
}
|
|
4970
|
+
};
|
|
4971
|
+
if (isSelected) {
|
|
4972
|
+
const textareaStyle = __spreadProps(__spreadValues({}, cssStyle), {
|
|
4973
|
+
fontFamily: '"Nimbus Mono PS", "Courier New", monospace',
|
|
4974
|
+
fontSize: 13,
|
|
4975
|
+
color: (_f = cssStyle.color) != null ? _f : "#333",
|
|
4976
|
+
border: "none",
|
|
4977
|
+
outline: "none",
|
|
4978
|
+
resize: "none",
|
|
4979
|
+
overflow: "hidden",
|
|
4980
|
+
width: "100%",
|
|
4981
|
+
display: "block",
|
|
4982
|
+
margin: 0,
|
|
4983
|
+
backgroundColor: "transparent"
|
|
4984
|
+
});
|
|
4985
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4986
|
+
"textarea",
|
|
4987
|
+
{
|
|
4988
|
+
value: localContents,
|
|
4989
|
+
onChange: handleChange,
|
|
4990
|
+
style: textareaStyle,
|
|
4991
|
+
rows: 3,
|
|
4992
|
+
onInput: (e) => adjustTextareaHeight(e.target),
|
|
4993
|
+
ref: (el) => el && adjustTextareaHeight(el),
|
|
4994
|
+
onClick: (e) => e.stopPropagation()
|
|
4995
|
+
}
|
|
4996
|
+
));
|
|
4997
|
+
}
|
|
4998
|
+
if (!contents) {
|
|
4999
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle });
|
|
5000
|
+
}
|
|
5001
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: cssStyle, dangerouslySetInnerHTML: { __html: contents } });
|
|
5002
|
+
}
|
|
5003
|
+
function getImageBorderRadius2(shape, size) {
|
|
5004
|
+
switch (shape) {
|
|
5005
|
+
case "circle":
|
|
5006
|
+
return size;
|
|
5007
|
+
case "rounded":
|
|
5008
|
+
return size * 0.125;
|
|
5009
|
+
case "square":
|
|
5010
|
+
default:
|
|
5011
|
+
return void 0;
|
|
5012
|
+
}
|
|
5013
|
+
}
|
|
5014
|
+
function SignatureEditor({ style, props }) {
|
|
5015
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
|
|
5016
|
+
const blockId = useCurrentBlockId();
|
|
5017
|
+
const selectedBlockId = useSelectedBlockId();
|
|
5018
|
+
const isSelected = selectedBlockId === blockId;
|
|
5019
|
+
const greeting = (_a = props == null ? void 0 : props.greeting) != null ? _a : SignaturePropsDefaults.greeting;
|
|
5020
|
+
const name = (_b = props == null ? void 0 : props.name) != null ? _b : SignaturePropsDefaults.name;
|
|
5021
|
+
const title = (_c = props == null ? void 0 : props.title) != null ? _c : SignaturePropsDefaults.title;
|
|
5022
|
+
const company = (_d = props == null ? void 0 : props.company) != null ? _d : SignaturePropsDefaults.company;
|
|
5023
|
+
const address = (_e = props == null ? void 0 : props.address) != null ? _e : SignaturePropsDefaults.address;
|
|
5024
|
+
const email = (_f = props == null ? void 0 : props.email) != null ? _f : SignaturePropsDefaults.email;
|
|
5025
|
+
const phone = (_g = props == null ? void 0 : props.phone) != null ? _g : SignaturePropsDefaults.phone;
|
|
5026
|
+
const website = (_h = props == null ? void 0 : props.website) != null ? _h : SignaturePropsDefaults.website;
|
|
5027
|
+
const imageUrl = (_i = props == null ? void 0 : props.imageUrl) != null ? _i : SignaturePropsDefaults.imageUrl;
|
|
5028
|
+
const imageSize = (_j = props == null ? void 0 : props.imageSize) != null ? _j : SignaturePropsDefaults.imageSize;
|
|
5029
|
+
const imageShape = (_k = props == null ? void 0 : props.imageShape) != null ? _k : SignaturePropsDefaults.imageShape;
|
|
5030
|
+
const layout = (_l = props == null ? void 0 : props.layout) != null ? _l : SignaturePropsDefaults.layout;
|
|
5031
|
+
const nameColor = (_m = props == null ? void 0 : props.nameColor) != null ? _m : SignaturePropsDefaults.nameColor;
|
|
5032
|
+
const textColor = (_n = props == null ? void 0 : props.textColor) != null ? _n : SignaturePropsDefaults.textColor;
|
|
5033
|
+
const linkColor = (_o = props == null ? void 0 : props.linkColor) != null ? _o : SignaturePropsDefaults.linkColor;
|
|
5034
|
+
const [localGreeting, setLocalGreeting] = React72.useState(greeting);
|
|
5035
|
+
const [localName, setLocalName] = React72.useState(name);
|
|
5036
|
+
const [localTitle, setLocalTitle] = React72.useState(title);
|
|
5037
|
+
const [localCompany, setLocalCompany] = React72.useState(company);
|
|
5038
|
+
const [localAddress, setLocalAddress] = React72.useState(address);
|
|
5039
|
+
const [localEmail, setLocalEmail] = React72.useState(email);
|
|
5040
|
+
const [localPhone, setLocalPhone] = React72.useState(phone);
|
|
5041
|
+
const [localWebsite, setLocalWebsite] = React72.useState(website);
|
|
5042
|
+
React72.useEffect(() => {
|
|
5043
|
+
setLocalGreeting(greeting);
|
|
5044
|
+
}, [greeting]);
|
|
5045
|
+
React72.useEffect(() => {
|
|
5046
|
+
setLocalName(name);
|
|
5047
|
+
}, [name]);
|
|
5048
|
+
React72.useEffect(() => {
|
|
5049
|
+
setLocalTitle(title);
|
|
5050
|
+
}, [title]);
|
|
5051
|
+
React72.useEffect(() => {
|
|
5052
|
+
setLocalCompany(company);
|
|
5053
|
+
}, [company]);
|
|
5054
|
+
React72.useEffect(() => {
|
|
5055
|
+
setLocalAddress(address);
|
|
5056
|
+
}, [address]);
|
|
5057
|
+
React72.useEffect(() => {
|
|
5058
|
+
setLocalEmail(email);
|
|
5059
|
+
}, [email]);
|
|
5060
|
+
React72.useEffect(() => {
|
|
5061
|
+
setLocalPhone(phone);
|
|
5062
|
+
}, [phone]);
|
|
5063
|
+
React72.useEffect(() => {
|
|
5064
|
+
setLocalWebsite(website);
|
|
5065
|
+
}, [website]);
|
|
5066
|
+
const updateProps = (updates) => {
|
|
5067
|
+
setDocument({
|
|
5068
|
+
[blockId]: {
|
|
5069
|
+
type: "Signature",
|
|
5070
|
+
data: {
|
|
5071
|
+
style,
|
|
5072
|
+
props: __spreadValues(__spreadValues({}, props), updates)
|
|
5073
|
+
}
|
|
5074
|
+
}
|
|
5075
|
+
});
|
|
5076
|
+
};
|
|
5077
|
+
const greetingStyle = {
|
|
5078
|
+
fontSize: 14,
|
|
5079
|
+
color: textColor,
|
|
5080
|
+
margin: 0,
|
|
5081
|
+
marginBottom: 8,
|
|
5082
|
+
lineHeight: "1.4",
|
|
5083
|
+
fontStyle: "italic"
|
|
5084
|
+
};
|
|
5085
|
+
const nameStyle = {
|
|
5086
|
+
fontSize: 16,
|
|
5087
|
+
fontWeight: "bold",
|
|
5088
|
+
color: nameColor,
|
|
5089
|
+
margin: 0,
|
|
5090
|
+
lineHeight: "1.4"
|
|
5091
|
+
};
|
|
5092
|
+
const detailStyle = {
|
|
5093
|
+
fontSize: 14,
|
|
5094
|
+
color: textColor,
|
|
5095
|
+
margin: 0,
|
|
5096
|
+
lineHeight: "1.4"
|
|
5097
|
+
};
|
|
5098
|
+
const linkStyle = {
|
|
5099
|
+
fontSize: 14,
|
|
5100
|
+
color: linkColor,
|
|
5101
|
+
textDecoration: "none"
|
|
5102
|
+
};
|
|
5103
|
+
const inputBase = {
|
|
5104
|
+
border: "none",
|
|
5105
|
+
outline: "none",
|
|
5106
|
+
backgroundColor: "transparent",
|
|
5107
|
+
width: "100%",
|
|
5108
|
+
padding: 0,
|
|
5109
|
+
margin: 0,
|
|
5110
|
+
fontFamily: "inherit"
|
|
5111
|
+
};
|
|
5112
|
+
const wrapperStyle = {
|
|
5113
|
+
backgroundColor: (_p = style == null ? void 0 : style.backgroundColor) != null ? _p : void 0,
|
|
5114
|
+
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
|
|
5115
|
+
};
|
|
5116
|
+
const imageElement = imageUrl ? /* @__PURE__ */ React72__default.default.createElement(
|
|
5117
|
+
"img",
|
|
5118
|
+
{
|
|
5119
|
+
src: imageUrl,
|
|
5120
|
+
alt: name || company,
|
|
5121
|
+
width: imageSize,
|
|
5122
|
+
height: imageSize,
|
|
5123
|
+
style: {
|
|
5124
|
+
width: imageSize,
|
|
5125
|
+
height: imageSize,
|
|
5126
|
+
objectFit: "cover",
|
|
5127
|
+
borderRadius: getImageBorderRadius2(imageShape, imageSize),
|
|
5128
|
+
display: "block",
|
|
5129
|
+
outline: "none",
|
|
5130
|
+
border: "none"
|
|
5131
|
+
}
|
|
5132
|
+
}
|
|
5133
|
+
) : null;
|
|
5134
|
+
const greetingElement = isSelected ? /* @__PURE__ */ React72__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(
|
|
5135
|
+
"input",
|
|
5136
|
+
{
|
|
5137
|
+
value: localGreeting,
|
|
5138
|
+
onChange: (e) => {
|
|
5139
|
+
setLocalGreeting(e.target.value);
|
|
5140
|
+
updateProps({ greeting: e.target.value });
|
|
5141
|
+
},
|
|
5142
|
+
placeholder: "Greeting (e.g. Best regards,)",
|
|
5143
|
+
style: __spreadValues(__spreadValues({}, inputBase), greetingStyle)
|
|
5144
|
+
}
|
|
5145
|
+
)) : greeting ? /* @__PURE__ */ React72__default.default.createElement("p", { style: greetingStyle }, greeting) : null;
|
|
5146
|
+
const textContent = isSelected ? /* @__PURE__ */ React72__default.default.createElement("div", { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React72__default.default.createElement(
|
|
5147
|
+
"input",
|
|
5148
|
+
{
|
|
5149
|
+
value: localName,
|
|
5150
|
+
onChange: (e) => {
|
|
5151
|
+
setLocalName(e.target.value);
|
|
5152
|
+
updateProps({ name: e.target.value });
|
|
5153
|
+
},
|
|
5154
|
+
placeholder: "Name",
|
|
5155
|
+
style: __spreadValues(__spreadValues({}, inputBase), nameStyle)
|
|
5156
|
+
}
|
|
5157
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5158
|
+
"input",
|
|
5159
|
+
{
|
|
5160
|
+
value: localTitle,
|
|
5161
|
+
onChange: (e) => {
|
|
5162
|
+
setLocalTitle(e.target.value);
|
|
5163
|
+
updateProps({ title: e.target.value });
|
|
5164
|
+
},
|
|
5165
|
+
placeholder: "Title",
|
|
5166
|
+
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5167
|
+
}
|
|
5168
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5169
|
+
"input",
|
|
5170
|
+
{
|
|
5171
|
+
value: localCompany,
|
|
5172
|
+
onChange: (e) => {
|
|
5173
|
+
setLocalCompany(e.target.value);
|
|
5174
|
+
updateProps({ company: e.target.value });
|
|
5175
|
+
},
|
|
5176
|
+
placeholder: "Company",
|
|
5177
|
+
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5178
|
+
}
|
|
5179
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5180
|
+
"input",
|
|
5181
|
+
{
|
|
5182
|
+
value: localAddress,
|
|
5183
|
+
onChange: (e) => {
|
|
5184
|
+
setLocalAddress(e.target.value);
|
|
5185
|
+
updateProps({ address: e.target.value });
|
|
5186
|
+
},
|
|
5187
|
+
placeholder: "Address",
|
|
5188
|
+
style: __spreadValues(__spreadValues({}, inputBase), detailStyle)
|
|
5189
|
+
}
|
|
5190
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5191
|
+
"input",
|
|
5192
|
+
{
|
|
5193
|
+
value: localEmail,
|
|
5194
|
+
onChange: (e) => {
|
|
5195
|
+
setLocalEmail(e.target.value);
|
|
5196
|
+
updateProps({ email: e.target.value });
|
|
5197
|
+
},
|
|
5198
|
+
placeholder: "Email",
|
|
5199
|
+
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { marginTop: 4, display: "block" })
|
|
5200
|
+
}
|
|
5201
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5202
|
+
"input",
|
|
5203
|
+
{
|
|
5204
|
+
value: localPhone,
|
|
5205
|
+
onChange: (e) => {
|
|
5206
|
+
setLocalPhone(e.target.value);
|
|
5207
|
+
updateProps({ phone: e.target.value });
|
|
5208
|
+
},
|
|
5209
|
+
placeholder: "Phone",
|
|
5210
|
+
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
5211
|
+
}
|
|
5212
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5213
|
+
"input",
|
|
5214
|
+
{
|
|
5215
|
+
value: localWebsite,
|
|
5216
|
+
onChange: (e) => {
|
|
5217
|
+
setLocalWebsite(e.target.value);
|
|
5218
|
+
updateProps({ website: e.target.value });
|
|
5219
|
+
},
|
|
5220
|
+
placeholder: "Website",
|
|
5221
|
+
style: __spreadProps(__spreadValues(__spreadValues({}, inputBase), linkStyle), { display: "block" })
|
|
5222
|
+
}
|
|
5223
|
+
)) : /* @__PURE__ */ React72__default.default.createElement("div", null, name && /* @__PURE__ */ React72__default.default.createElement("p", { style: nameStyle }, name), title && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, title), company && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, company), address && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, address), (email || phone || website) && /* @__PURE__ */ React72__default.default.createElement("p", { style: __spreadProps(__spreadValues({}, detailStyle), { marginTop: 4 }) }, email && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, email), email && (phone || website) && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), phone && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, phone), phone && website && /* @__PURE__ */ React72__default.default.createElement("span", { style: detailStyle }, " \xB7 "), website && /* @__PURE__ */ React72__default.default.createElement("span", { style: linkStyle }, website)), !name && !title && !company && !email && !phone && !website && /* @__PURE__ */ React72__default.default.createElement("p", { style: detailStyle }, "Click to edit signature"));
|
|
5224
|
+
if (layout === "vertical") {
|
|
5225
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, imageElement && /* @__PURE__ */ React72__default.default.createElement("div", { style: { marginBottom: 12 } }, imageElement), textContent);
|
|
5226
|
+
}
|
|
5227
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wrapperStyle }, greetingElement, /* @__PURE__ */ React72__default.default.createElement("table", { cellPadding: "0", cellSpacing: "0", border: 0, role: "presentation" }, /* @__PURE__ */ React72__default.default.createElement("tbody", null, /* @__PURE__ */ React72__default.default.createElement("tr", null, imageElement && /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle", paddingRight: 16 } }, imageElement), /* @__PURE__ */ React72__default.default.createElement("td", { style: { verticalAlign: "middle" } }, textContent)))));
|
|
5228
|
+
}
|
|
5229
|
+
function getFontFamily10(fontFamily) {
|
|
4266
5230
|
switch (fontFamily) {
|
|
4267
5231
|
case "MODERN_SANS":
|
|
4268
5232
|
return '"Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif';
|
|
@@ -4289,7 +5253,7 @@ function getFontFamily8(fontFamily) {
|
|
|
4289
5253
|
}
|
|
4290
5254
|
return void 0;
|
|
4291
5255
|
}
|
|
4292
|
-
function
|
|
5256
|
+
function getPadding13(padding) {
|
|
4293
5257
|
if (!padding) return void 0;
|
|
4294
5258
|
if (typeof padding === "object" && !Array.isArray(padding) && "top" in padding && "right" in padding && "bottom" in padding && "left" in padding) {
|
|
4295
5259
|
return `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`;
|
|
@@ -4320,14 +5284,14 @@ function TextEditor({ style, props }) {
|
|
|
4320
5284
|
const document2 = useDocument();
|
|
4321
5285
|
const isSelected = selectedBlockId === blockId;
|
|
4322
5286
|
const textContent = (_a = props == null ? void 0 : props.text) != null ? _a : TextPropsDefaults.text;
|
|
4323
|
-
const [localText, setLocalText] =
|
|
5287
|
+
const [localText, setLocalText] = React72.useState(textContent);
|
|
4324
5288
|
const isMarkdown = (_b = props == null ? void 0 : props.markdown) != null ? _b : false;
|
|
4325
5289
|
const rootBlock = document2.root;
|
|
4326
|
-
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ?
|
|
4327
|
-
|
|
5290
|
+
const rootFontFamily = rootBlock && rootBlock.type === "EmailLayout" ? getFontFamily10(rootBlock.data.fontFamily) : '"Helvetica Neue", Arial, sans-serif';
|
|
5291
|
+
React72.useEffect(() => {
|
|
4328
5292
|
setLocalText(textContent);
|
|
4329
5293
|
}, [textContent]);
|
|
4330
|
-
const fontFamily =
|
|
5294
|
+
const fontFamily = getFontFamily10(style == null ? void 0 : style.fontFamily) || rootFontFamily;
|
|
4331
5295
|
const wStyle = {
|
|
4332
5296
|
color: (_c = style == null ? void 0 : style.color) != null ? _c : void 0,
|
|
4333
5297
|
backgroundColor: (_d = style == null ? void 0 : style.backgroundColor) != null ? _d : void 0,
|
|
@@ -4335,7 +5299,7 @@ function TextEditor({ style, props }) {
|
|
|
4335
5299
|
fontFamily,
|
|
4336
5300
|
fontWeight: (_f = style == null ? void 0 : style.fontWeight) != null ? _f : void 0,
|
|
4337
5301
|
textAlign: (_g = style == null ? void 0 : style.textAlign) != null ? _g : void 0,
|
|
4338
|
-
padding:
|
|
5302
|
+
padding: getPadding13(style == null ? void 0 : style.padding),
|
|
4339
5303
|
width: "100%",
|
|
4340
5304
|
minHeight: "1em"
|
|
4341
5305
|
};
|
|
@@ -4375,7 +5339,7 @@ function TextEditor({ style, props }) {
|
|
|
4375
5339
|
}
|
|
4376
5340
|
};
|
|
4377
5341
|
if (isSelected && !isMarkdown) {
|
|
4378
|
-
return /* @__PURE__ */
|
|
5342
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4379
5343
|
"textarea",
|
|
4380
5344
|
{
|
|
4381
5345
|
value: localText,
|
|
@@ -4389,36 +5353,36 @@ function TextEditor({ style, props }) {
|
|
|
4389
5353
|
);
|
|
4390
5354
|
}
|
|
4391
5355
|
if (isMarkdown) {
|
|
4392
|
-
return /* @__PURE__ */
|
|
5356
|
+
return /* @__PURE__ */ React72__default.default.createElement(EmailMarkdown, { style: wStyle, markdown: textContent });
|
|
4393
5357
|
}
|
|
4394
|
-
return /* @__PURE__ */
|
|
5358
|
+
return /* @__PURE__ */ React72__default.default.createElement("div", { style: wStyle }, textContent);
|
|
4395
5359
|
}
|
|
4396
5360
|
|
|
4397
5361
|
// src/editor/core.tsx
|
|
4398
5362
|
var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
4399
5363
|
Avatar: {
|
|
4400
5364
|
schema: AvatarPropsSchema,
|
|
4401
|
-
Component: (props) => /* @__PURE__ */
|
|
5365
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(avatar_default, __spreadValues({}, props)))
|
|
4402
5366
|
},
|
|
4403
5367
|
Button: {
|
|
4404
5368
|
schema: ButtonPropsSchema,
|
|
4405
|
-
Component: (props) => /* @__PURE__ */
|
|
5369
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ButtonEditor, __spreadValues({}, props)))
|
|
4406
5370
|
},
|
|
4407
5371
|
Container: {
|
|
4408
5372
|
schema: container_props_schema_default,
|
|
4409
|
-
Component: (props) => /* @__PURE__ */
|
|
5373
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ContainerEditor, __spreadValues({}, props)))
|
|
4410
5374
|
},
|
|
4411
5375
|
ColumnsContainer: {
|
|
4412
5376
|
schema: columns_container_props_schema_default2,
|
|
4413
|
-
Component: (props) => /* @__PURE__ */
|
|
5377
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(ColumnsContainerEditor, __spreadValues({}, props)))
|
|
4414
5378
|
},
|
|
4415
5379
|
Heading: {
|
|
4416
5380
|
schema: HeadingPropsSchema,
|
|
4417
|
-
Component: (props) => /* @__PURE__ */
|
|
5381
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HeadingEditor, __spreadValues({}, props)))
|
|
4418
5382
|
},
|
|
4419
5383
|
Html: {
|
|
4420
5384
|
schema: HtmlPropsSchema,
|
|
4421
|
-
Component: (props) => /* @__PURE__ */
|
|
5385
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(HtmlEditor, __spreadValues({}, props)))
|
|
4422
5386
|
},
|
|
4423
5387
|
Image: {
|
|
4424
5388
|
schema: ImagePropsSchema,
|
|
@@ -4426,27 +5390,32 @@ var EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
|
|
|
4426
5390
|
var _a, _b;
|
|
4427
5391
|
const props = __spreadProps(__spreadValues({}, data), {
|
|
4428
5392
|
props: __spreadProps(__spreadValues({}, data.props), {
|
|
4429
|
-
url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image"
|
|
5393
|
+
url: (_b = (_a = data.props) == null ? void 0 : _a.url) != null ? _b : "https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image",
|
|
5394
|
+
linkHref: null
|
|
4430
5395
|
})
|
|
4431
5396
|
});
|
|
4432
|
-
return /* @__PURE__ */
|
|
5397
|
+
return /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(image_default, __spreadValues({}, props)));
|
|
4433
5398
|
}
|
|
4434
5399
|
},
|
|
4435
5400
|
Text: {
|
|
4436
5401
|
schema: TextPropsSchema,
|
|
4437
|
-
Component: (props) => /* @__PURE__ */
|
|
5402
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(TextEditor, __spreadValues({}, props)))
|
|
4438
5403
|
},
|
|
4439
5404
|
EmailLayout: {
|
|
4440
5405
|
schema: email_layout_props_schema_default,
|
|
4441
|
-
Component: (p) => /* @__PURE__ */
|
|
5406
|
+
Component: (p) => /* @__PURE__ */ React72__default.default.createElement(EmailLayoutEditor, __spreadValues({}, p))
|
|
4442
5407
|
},
|
|
4443
5408
|
Spacer: {
|
|
4444
5409
|
schema: SpacerPropsSchema,
|
|
4445
|
-
Component: (props) => /* @__PURE__ */
|
|
5410
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(spacer_default, __spreadValues({}, props)))
|
|
4446
5411
|
},
|
|
4447
5412
|
Divider: {
|
|
4448
5413
|
schema: DividerPropsSchema,
|
|
4449
|
-
Component: (props) => /* @__PURE__ */
|
|
5414
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(divider_default, __spreadValues({}, props)))
|
|
5415
|
+
},
|
|
5416
|
+
Signature: {
|
|
5417
|
+
schema: SignaturePropsSchema,
|
|
5418
|
+
Component: (props) => /* @__PURE__ */ React72__default.default.createElement(EditorBlockWrapper, null, /* @__PURE__ */ React72__default.default.createElement(SignatureEditor, __spreadValues({}, props)))
|
|
4450
5419
|
}
|
|
4451
5420
|
});
|
|
4452
5421
|
var EditorBlock2 = buildBlockComponent(EDITOR_DICTIONARY);
|
|
@@ -4454,15 +5423,15 @@ var EditorBlockSchema = buildBlockConfigurationSchema(EDITOR_DICTIONARY);
|
|
|
4454
5423
|
zod.z.record(zod.z.string(), EditorBlockSchema);
|
|
4455
5424
|
|
|
4456
5425
|
// src/editor/editor-block.tsx
|
|
4457
|
-
var EditorBlockContext =
|
|
4458
|
-
var useCurrentBlockId = () =>
|
|
5426
|
+
var EditorBlockContext = React72.createContext(null);
|
|
5427
|
+
var useCurrentBlockId = () => React72.useContext(EditorBlockContext);
|
|
4459
5428
|
function EditorBlock({ id }) {
|
|
4460
5429
|
const document2 = useDocument();
|
|
4461
5430
|
const block = document2[id];
|
|
4462
5431
|
if (!block) {
|
|
4463
5432
|
throw new Error("Could not find block");
|
|
4464
5433
|
}
|
|
4465
|
-
return /* @__PURE__ */
|
|
5434
|
+
return /* @__PURE__ */ React72__default.default.createElement(EditorBlockContext.Provider, { value: id }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock2, __spreadValues({}, block)));
|
|
4466
5435
|
}
|
|
4467
5436
|
function ToggleInspectorPanelButton() {
|
|
4468
5437
|
const inspectorDrawerOpen = useInspectorDrawerOpen();
|
|
@@ -4470,20 +5439,20 @@ function ToggleInspectorPanelButton() {
|
|
|
4470
5439
|
toggleInspectorDrawerOpen();
|
|
4471
5440
|
};
|
|
4472
5441
|
if (inspectorDrawerOpen) {
|
|
4473
|
-
return /* @__PURE__ */
|
|
5442
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.LastPageOutlined, { fontSize: "small" }));
|
|
4474
5443
|
}
|
|
4475
|
-
return /* @__PURE__ */
|
|
5444
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: handleClick }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.AppRegistrationOutlined, { fontSize: "small" }));
|
|
4476
5445
|
}
|
|
4477
5446
|
function useIcon() {
|
|
4478
5447
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
4479
5448
|
if (samplesDrawerOpen) {
|
|
4480
|
-
return /* @__PURE__ */
|
|
5449
|
+
return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.FirstPageOutlined, { fontSize: "small" });
|
|
4481
5450
|
}
|
|
4482
|
-
return /* @__PURE__ */
|
|
5451
|
+
return /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.MenuOutlined, { fontSize: "small" });
|
|
4483
5452
|
}
|
|
4484
5453
|
function ToggleSamplesPanelButton() {
|
|
4485
5454
|
const icon = useIcon();
|
|
4486
|
-
return /* @__PURE__ */
|
|
5455
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.IconButton, { onClick: toggleSamplesDrawerOpen }, icon);
|
|
4487
5456
|
}
|
|
4488
5457
|
function formatHtml(html2, spaces = 2) {
|
|
4489
5458
|
try {
|
|
@@ -4531,8 +5500,8 @@ function json(value) {
|
|
|
4531
5500
|
|
|
4532
5501
|
// src/app/email-canvas/helper/highlighted-code-panel.tsx
|
|
4533
5502
|
function HighlightedCodePanel({ type, value }) {
|
|
4534
|
-
const [code, setCode] =
|
|
4535
|
-
|
|
5503
|
+
const [code, setCode] = React72.useState(null);
|
|
5504
|
+
React72.useEffect(() => {
|
|
4536
5505
|
switch (type) {
|
|
4537
5506
|
case "html":
|
|
4538
5507
|
html(value).then(setCode);
|
|
@@ -4545,7 +5514,7 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4545
5514
|
if (code === null) {
|
|
4546
5515
|
return null;
|
|
4547
5516
|
}
|
|
4548
|
-
return /* @__PURE__ */
|
|
5517
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4549
5518
|
"pre",
|
|
4550
5519
|
{
|
|
4551
5520
|
style: {
|
|
@@ -4570,18 +5539,18 @@ function HighlightedCodePanel({ type, value }) {
|
|
|
4570
5539
|
// src/app/email-canvas/html-panel.tsx
|
|
4571
5540
|
function HtmlPanel() {
|
|
4572
5541
|
const document2 = useDocument();
|
|
4573
|
-
const code =
|
|
4574
|
-
return /* @__PURE__ */
|
|
5542
|
+
const code = React72.useMemo(() => renderToStaticMarkup(document2, { rootBlockId: "root" }), [document2]);
|
|
5543
|
+
return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "html", value: code });
|
|
4575
5544
|
}
|
|
4576
5545
|
function JsonPanel() {
|
|
4577
5546
|
const document2 = useDocument();
|
|
4578
|
-
const code =
|
|
4579
|
-
return /* @__PURE__ */
|
|
5547
|
+
const code = React72.useMemo(() => JSON.stringify(document2, null, " "), [document2]);
|
|
5548
|
+
return /* @__PURE__ */ React72__default.default.createElement(HighlightedCodePanel, { type: "json", value: code });
|
|
4580
5549
|
}
|
|
4581
5550
|
function TextPanel() {
|
|
4582
5551
|
const document2 = useDocument();
|
|
4583
|
-
const text =
|
|
4584
|
-
return /* @__PURE__ */
|
|
5552
|
+
const text = React72.useMemo(() => renderToText(document2, { rootBlockId: "root" }), [document2]);
|
|
5553
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4585
5554
|
"pre",
|
|
4586
5555
|
{
|
|
4587
5556
|
style: {
|
|
@@ -4617,49 +5586,49 @@ function MainTabsGroup() {
|
|
|
4617
5586
|
setSelectedMainTab("editor");
|
|
4618
5587
|
}
|
|
4619
5588
|
};
|
|
4620
|
-
return /* @__PURE__ */
|
|
5589
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Tabs, { value: selectedMainTab, onChange: handleChange }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4621
5590
|
material.Tab,
|
|
4622
5591
|
{
|
|
4623
5592
|
value: "editor",
|
|
4624
|
-
label: /* @__PURE__ */
|
|
5593
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Edit" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.EditOutlined, { fontSize: "small" }))
|
|
4625
5594
|
}
|
|
4626
|
-
), /* @__PURE__ */
|
|
5595
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4627
5596
|
material.Tab,
|
|
4628
5597
|
{
|
|
4629
5598
|
value: "preview",
|
|
4630
|
-
label: /* @__PURE__ */
|
|
5599
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Preview" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.PreviewOutlined, { fontSize: "small" }))
|
|
4631
5600
|
}
|
|
4632
|
-
), /* @__PURE__ */
|
|
5601
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4633
5602
|
material.Tab,
|
|
4634
5603
|
{
|
|
4635
5604
|
value: "html",
|
|
4636
|
-
label: /* @__PURE__ */
|
|
5605
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "HTML output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.CodeOutlined, { fontSize: "small" }))
|
|
4637
5606
|
}
|
|
4638
|
-
), /* @__PURE__ */
|
|
5607
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4639
5608
|
material.Tab,
|
|
4640
5609
|
{
|
|
4641
5610
|
value: "text",
|
|
4642
|
-
label: /* @__PURE__ */
|
|
5611
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Plain text output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SubjectOutlined, { fontSize: "small" }))
|
|
4643
5612
|
}
|
|
4644
|
-
), /* @__PURE__ */
|
|
5613
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4645
5614
|
material.Tab,
|
|
4646
5615
|
{
|
|
4647
5616
|
value: "json",
|
|
4648
|
-
label: /* @__PURE__ */
|
|
5617
|
+
label: /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "JSON output" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.DataObjectOutlined, { fontSize: "small" }))
|
|
4649
5618
|
}
|
|
4650
5619
|
));
|
|
4651
5620
|
}
|
|
4652
|
-
var SnackbarContext =
|
|
5621
|
+
var SnackbarContext = React72.createContext(null);
|
|
4653
5622
|
function useSnackbar() {
|
|
4654
|
-
const context =
|
|
5623
|
+
const context = React72.useContext(SnackbarContext);
|
|
4655
5624
|
if (!context) {
|
|
4656
5625
|
throw new Error("useSnackbar must be used within a SnackbarProvider");
|
|
4657
5626
|
}
|
|
4658
5627
|
return context;
|
|
4659
5628
|
}
|
|
4660
5629
|
function SnackbarProvider({ children }) {
|
|
4661
|
-
const [message, setMessage] =
|
|
4662
|
-
const [duration, setDuration] =
|
|
5630
|
+
const [message, setMessage] = React72.useState(null);
|
|
5631
|
+
const [duration, setDuration] = React72.useState(3e3);
|
|
4663
5632
|
const showMessage = (text, customDuration = 3e3) => {
|
|
4664
5633
|
setMessage(text);
|
|
4665
5634
|
setDuration(customDuration);
|
|
@@ -4667,7 +5636,7 @@ function SnackbarProvider({ children }) {
|
|
|
4667
5636
|
const handleClose = () => {
|
|
4668
5637
|
setMessage(null);
|
|
4669
5638
|
};
|
|
4670
|
-
return /* @__PURE__ */
|
|
5639
|
+
return /* @__PURE__ */ React72__default.default.createElement(SnackbarContext.Provider, { value: { showMessage } }, children, /* @__PURE__ */ React72__default.default.createElement(
|
|
4671
5640
|
material.Snackbar,
|
|
4672
5641
|
{
|
|
4673
5642
|
anchorOrigin: { vertical: "top", horizontal: "center" },
|
|
@@ -4692,10 +5661,10 @@ function SaveTemplateDialog({
|
|
|
4692
5661
|
defaultName = "",
|
|
4693
5662
|
error: externalError = null
|
|
4694
5663
|
}) {
|
|
4695
|
-
const [templateName, setTemplateName] =
|
|
4696
|
-
const [internalError, setInternalError] =
|
|
4697
|
-
const [isSubmitting, setIsSubmitting] =
|
|
4698
|
-
|
|
5664
|
+
const [templateName, setTemplateName] = React72.useState(defaultName);
|
|
5665
|
+
const [internalError, setInternalError] = React72.useState("");
|
|
5666
|
+
const [isSubmitting, setIsSubmitting] = React72.useState(false);
|
|
5667
|
+
React72.useEffect(() => {
|
|
4699
5668
|
if (open) {
|
|
4700
5669
|
setTemplateName(defaultName);
|
|
4701
5670
|
setInternalError("");
|
|
@@ -4743,7 +5712,7 @@ function SaveTemplateDialog({
|
|
|
4743
5712
|
setInternalError("");
|
|
4744
5713
|
onClose();
|
|
4745
5714
|
};
|
|
4746
|
-
return /* @__PURE__ */
|
|
5715
|
+
return /* @__PURE__ */ React72__default.default.createElement(
|
|
4747
5716
|
material.Dialog,
|
|
4748
5717
|
{
|
|
4749
5718
|
open,
|
|
@@ -4751,8 +5720,8 @@ function SaveTemplateDialog({
|
|
|
4751
5720
|
maxWidth: "sm",
|
|
4752
5721
|
fullWidth: true
|
|
4753
5722
|
},
|
|
4754
|
-
/* @__PURE__ */
|
|
4755
|
-
/* @__PURE__ */
|
|
5723
|
+
/* @__PURE__ */ React72__default.default.createElement(material.DialogTitle, null, "Save Email Template"),
|
|
5724
|
+
/* @__PURE__ */ React72__default.default.createElement(material.DialogContent, null, /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: { pt: 1 } }, /* @__PURE__ */ React72__default.default.createElement(
|
|
4756
5725
|
material.TextField,
|
|
4757
5726
|
{
|
|
4758
5727
|
autoFocus: true,
|
|
@@ -4774,7 +5743,7 @@ function SaveTemplateDialog({
|
|
|
4774
5743
|
disabled: isSubmitting
|
|
4775
5744
|
}
|
|
4776
5745
|
))),
|
|
4777
|
-
/* @__PURE__ */
|
|
5746
|
+
/* @__PURE__ */ React72__default.default.createElement(material.DialogActions, null, /* @__PURE__ */ React72__default.default.createElement(material.Button, { onClick: handleCancel, disabled: isSubmitting }, "Cancel"), /* @__PURE__ */ React72__default.default.createElement(
|
|
4778
5747
|
material.Button,
|
|
4779
5748
|
{
|
|
4780
5749
|
onClick: handleSave,
|
|
@@ -4791,7 +5760,7 @@ function SaveTemplateDialog({
|
|
|
4791
5760
|
function SaveButton({ loadTemplates, saveAs }) {
|
|
4792
5761
|
const { saveTemplate, currentTemplateId, setCurrentTemplate } = useEmailEditor();
|
|
4793
5762
|
const { showMessage } = useSnackbar();
|
|
4794
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
5763
|
+
const [saveDialogOpen, setSaveDialogOpen] = React72.useState(false);
|
|
4795
5764
|
const document2 = useDocument();
|
|
4796
5765
|
const handleSave = () => __async(null, null, function* () {
|
|
4797
5766
|
try {
|
|
@@ -4829,7 +5798,7 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4829
5798
|
return false;
|
|
4830
5799
|
}
|
|
4831
5800
|
});
|
|
4832
|
-
return /* @__PURE__ */
|
|
5801
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4833
5802
|
material.IconButton,
|
|
4834
5803
|
{
|
|
4835
5804
|
onClick: handleSave,
|
|
@@ -4840,8 +5809,8 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4840
5809
|
}
|
|
4841
5810
|
}
|
|
4842
5811
|
},
|
|
4843
|
-
/* @__PURE__ */
|
|
4844
|
-
), /* @__PURE__ */
|
|
5812
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Save template" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.SaveOutlined, { fontSize: "small" }))
|
|
5813
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4845
5814
|
SaveTemplateDialog,
|
|
4846
5815
|
{
|
|
4847
5816
|
open: saveDialogOpen,
|
|
@@ -4854,9 +5823,9 @@ function SaveButton({ loadTemplates, saveAs }) {
|
|
|
4854
5823
|
function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
4855
5824
|
const { setCurrentTemplate, loadTemplate } = useEmailEditor();
|
|
4856
5825
|
const { showMessage } = useSnackbar();
|
|
4857
|
-
const [saveDialogOpen, setSaveDialogOpen] =
|
|
4858
|
-
const [templates, setTemplates] =
|
|
4859
|
-
const [nameError, setNameError] =
|
|
5826
|
+
const [saveDialogOpen, setSaveDialogOpen] = React72.useState(false);
|
|
5827
|
+
const [templates, setTemplates] = React72.useState([]);
|
|
5828
|
+
const [nameError, setNameError] = React72.useState(null);
|
|
4860
5829
|
const fetchTemplates = () => __async(null, null, function* () {
|
|
4861
5830
|
if (loadTemplates) {
|
|
4862
5831
|
try {
|
|
@@ -4911,7 +5880,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4911
5880
|
}
|
|
4912
5881
|
return false;
|
|
4913
5882
|
});
|
|
4914
|
-
return /* @__PURE__ */
|
|
5883
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4915
5884
|
material.IconButton,
|
|
4916
5885
|
{
|
|
4917
5886
|
onClick: handleNewTemplate,
|
|
@@ -4922,8 +5891,8 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4922
5891
|
}
|
|
4923
5892
|
}
|
|
4924
5893
|
},
|
|
4925
|
-
/* @__PURE__ */
|
|
4926
|
-
), /* @__PURE__ */
|
|
5894
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "New template" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.Add, { fontSize: "small" }))
|
|
5895
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
4927
5896
|
SaveTemplateDialog,
|
|
4928
5897
|
{
|
|
4929
5898
|
open: saveDialogOpen,
|
|
@@ -4940,7 +5909,7 @@ function NewTemplateButton({ loadTemplates, saveAs }) {
|
|
|
4940
5909
|
}
|
|
4941
5910
|
|
|
4942
5911
|
// src/app/email-canvas/index.tsx
|
|
4943
|
-
function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
5912
|
+
function TemplatePanel2({ loadTemplates, saveAs, samplesDrawerEnabled = true }) {
|
|
4944
5913
|
const document2 = useDocument();
|
|
4945
5914
|
const selectedMainTab = useSelectedMainTab();
|
|
4946
5915
|
const selectedScreenSize = useSelectedScreenSize();
|
|
@@ -4970,19 +5939,19 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4970
5939
|
const renderMainPanel = () => {
|
|
4971
5940
|
switch (selectedMainTab) {
|
|
4972
5941
|
case "editor":
|
|
4973
|
-
return /* @__PURE__ */
|
|
5942
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(EditorBlock, { id: "root" }));
|
|
4974
5943
|
case "preview":
|
|
4975
|
-
return /* @__PURE__ */
|
|
5944
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: mainBoxSx }, /* @__PURE__ */ React72__default.default.createElement(Reader, { document: document2, rootBlockId: "root" }));
|
|
4976
5945
|
case "html":
|
|
4977
|
-
return /* @__PURE__ */
|
|
5946
|
+
return /* @__PURE__ */ React72__default.default.createElement(HtmlPanel, null);
|
|
4978
5947
|
case "text":
|
|
4979
|
-
return /* @__PURE__ */
|
|
5948
|
+
return /* @__PURE__ */ React72__default.default.createElement(TextPanel, null);
|
|
4980
5949
|
case "json":
|
|
4981
|
-
return /* @__PURE__ */
|
|
5950
|
+
return /* @__PURE__ */ React72__default.default.createElement(JsonPanel, null);
|
|
4982
5951
|
}
|
|
4983
5952
|
};
|
|
4984
5953
|
const showSaveButtons = persistenceEnabled;
|
|
4985
|
-
return /* @__PURE__ */
|
|
5954
|
+
return /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
4986
5955
|
material.Stack,
|
|
4987
5956
|
{
|
|
4988
5957
|
sx: {
|
|
@@ -4999,10 +5968,10 @@ function TemplatePanel2({ loadTemplates, saveAs }) {
|
|
|
4999
5968
|
justifyContent: "space-between",
|
|
5000
5969
|
alignItems: "center"
|
|
5001
5970
|
},
|
|
5002
|
-
/* @__PURE__ */
|
|
5003
|
-
/* @__PURE__ */
|
|
5004
|
-
/* @__PURE__ */
|
|
5005
|
-
), /* @__PURE__ */
|
|
5971
|
+
samplesDrawerEnabled && /* @__PURE__ */ React72__default.default.createElement(ToggleSamplesPanelButton, null),
|
|
5972
|
+
/* @__PURE__ */ React72__default.default.createElement(material.Stack, { px: 2, direction: "row", gap: 2, width: "100%", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(MainTabsGroup, null)), /* @__PURE__ */ React72__default.default.createElement(material.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ React72__default.default.createElement(material.ToggleButtonGroup, { value: selectedScreenSize, exclusive: true, size: "small", onChange: handleScreenSizeChange }, /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "desktop" }, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Desktop view" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.MonitorOutlined, { fontSize: "small" }))), /* @__PURE__ */ React72__default.default.createElement(material.ToggleButton, { value: "mobile" }, /* @__PURE__ */ React72__default.default.createElement(material.Tooltip, { title: "Mobile view" }, /* @__PURE__ */ React72__default.default.createElement(iconsMaterial.PhoneIphoneOutlined, { fontSize: "small" })))), showSaveButtons && /* @__PURE__ */ React72__default.default.createElement(React72__default.default.Fragment, null, /* @__PURE__ */ React72__default.default.createElement(NewTemplateButton, { loadTemplates, saveAs }), /* @__PURE__ */ React72__default.default.createElement(SaveButton, { loadTemplates, saveAs })))),
|
|
5973
|
+
/* @__PURE__ */ React72__default.default.createElement(ToggleInspectorPanelButton, null)
|
|
5974
|
+
), /* @__PURE__ */ React72__default.default.createElement(material.Box, { sx: {
|
|
5006
5975
|
paddingBottom: "50px",
|
|
5007
5976
|
minWidth: 370
|
|
5008
5977
|
} }, renderMainPanel()));
|
|
@@ -5041,7 +6010,7 @@ function useDrawerTransition(cssProperty, open) {
|
|
|
5041
6010
|
duration: !open ? transitions.duration.leavingScreen : transitions.duration.enteringScreen
|
|
5042
6011
|
});
|
|
5043
6012
|
}
|
|
5044
|
-
var EmailEditorInternal =
|
|
6013
|
+
var EmailEditorInternal = React72.forwardRef((props, ref) => {
|
|
5045
6014
|
const {
|
|
5046
6015
|
drawerEnterDuration = 225,
|
|
5047
6016
|
drawerExitDuration = 225,
|
|
@@ -5061,10 +6030,10 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5061
6030
|
const samplesDrawerOpen = useSamplesDrawerOpen();
|
|
5062
6031
|
const marginLeftTransition = useDrawerTransition("margin-left", samplesDrawerOpen);
|
|
5063
6032
|
const marginRightTransition = useDrawerTransition("margin-right", inspectorDrawerOpen);
|
|
5064
|
-
const onChangeRef =
|
|
6033
|
+
const onChangeRef = React72.useRef(onChange);
|
|
5065
6034
|
onChangeRef.current = onChange;
|
|
5066
|
-
const prevDocJsonRef =
|
|
5067
|
-
|
|
6035
|
+
const prevDocJsonRef = React72.useRef("");
|
|
6036
|
+
React72.useEffect(() => {
|
|
5068
6037
|
var _a;
|
|
5069
6038
|
const docJson = JSON.stringify(currentDocument);
|
|
5070
6039
|
if (docJson !== prevDocJsonRef.current) {
|
|
@@ -5072,7 +6041,7 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5072
6041
|
(_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, currentDocument);
|
|
5073
6042
|
}
|
|
5074
6043
|
}, [currentDocument]);
|
|
5075
|
-
|
|
6044
|
+
React72.useImperativeHandle(ref, () => ({
|
|
5076
6045
|
saveTemplate: () => {
|
|
5077
6046
|
return saveTemplate();
|
|
5078
6047
|
},
|
|
@@ -5084,7 +6053,7 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5084
6053
|
return getDocument();
|
|
5085
6054
|
}
|
|
5086
6055
|
}));
|
|
5087
|
-
return /* @__PURE__ */
|
|
6056
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.Stack, { position: "relative", id: "drawer-container", sx: { minHeight } }, /* @__PURE__ */ React72__default.default.createElement(
|
|
5088
6057
|
InspectorDrawer,
|
|
5089
6058
|
{
|
|
5090
6059
|
enterDuration: drawerEnterDuration,
|
|
@@ -5092,7 +6061,7 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5092
6061
|
deleteTemplate,
|
|
5093
6062
|
copyTemplate
|
|
5094
6063
|
}
|
|
5095
|
-
), /* @__PURE__ */
|
|
6064
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5096
6065
|
SamplesDrawer,
|
|
5097
6066
|
{
|
|
5098
6067
|
enterDuration: drawerEnterDuration,
|
|
@@ -5104,7 +6073,7 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5104
6073
|
currentTemplateId,
|
|
5105
6074
|
deleteTemplate
|
|
5106
6075
|
}
|
|
5107
|
-
), /* @__PURE__ */
|
|
6076
|
+
), /* @__PURE__ */ React72__default.default.createElement(
|
|
5108
6077
|
material.Stack,
|
|
5109
6078
|
{
|
|
5110
6079
|
sx: {
|
|
@@ -5113,10 +6082,10 @@ var EmailEditorInternal = React82.forwardRef((props, ref) => {
|
|
|
5113
6082
|
transition: [marginLeftTransition, marginRightTransition].join(", ")
|
|
5114
6083
|
}
|
|
5115
6084
|
},
|
|
5116
|
-
/* @__PURE__ */
|
|
6085
|
+
/* @__PURE__ */ React72__default.default.createElement(TemplatePanel2, { loadTemplates, saveAs, samplesDrawerEnabled })
|
|
5117
6086
|
));
|
|
5118
6087
|
});
|
|
5119
|
-
var EmailEditor =
|
|
6088
|
+
var EmailEditor = React72.forwardRef((props, ref) => {
|
|
5120
6089
|
const {
|
|
5121
6090
|
initialTemplate: initialTemplateProp,
|
|
5122
6091
|
initialTemplateId,
|
|
@@ -5136,19 +6105,19 @@ var EmailEditor = React82.forwardRef((props, ref) => {
|
|
|
5136
6105
|
saveAs,
|
|
5137
6106
|
theme
|
|
5138
6107
|
} = props;
|
|
5139
|
-
const resolvedTemplate =
|
|
6108
|
+
const resolvedTemplate = React72.useMemo(
|
|
5140
6109
|
() => typeof initialTemplateProp === "string" ? htmlToEditorConfig(initialTemplateProp) : initialTemplateProp,
|
|
5141
6110
|
[initialTemplateProp]
|
|
5142
6111
|
);
|
|
5143
|
-
const prevTemplateRef =
|
|
6112
|
+
const prevTemplateRef = React72.useRef(void 0);
|
|
5144
6113
|
if (resolvedTemplate && resolvedTemplate !== prevTemplateRef.current) {
|
|
5145
6114
|
prevTemplateRef.current = resolvedTemplate;
|
|
5146
6115
|
resetDocument(resolvedTemplate);
|
|
5147
6116
|
}
|
|
5148
|
-
|
|
6117
|
+
React72.useEffect(() => {
|
|
5149
6118
|
setPersistenceEnabled(persistenceEnabled);
|
|
5150
6119
|
}, [persistenceEnabled]);
|
|
5151
|
-
return /* @__PURE__ */
|
|
6120
|
+
return /* @__PURE__ */ React72__default.default.createElement(material.ThemeProvider, { theme: theme || theme_default }, /* @__PURE__ */ React72__default.default.createElement(material.CssBaseline, null), /* @__PURE__ */ React72__default.default.createElement("div", { style: { height: "100%", overflow: "auto" } }, /* @__PURE__ */ React72__default.default.createElement(SnackbarProvider, null, /* @__PURE__ */ React72__default.default.createElement(
|
|
5152
6121
|
EmailEditorProvider,
|
|
5153
6122
|
{
|
|
5154
6123
|
initialTemplate: resolvedTemplate,
|
|
@@ -5157,7 +6126,7 @@ var EmailEditor = React82.forwardRef((props, ref) => {
|
|
|
5157
6126
|
onSave,
|
|
5158
6127
|
onChange
|
|
5159
6128
|
},
|
|
5160
|
-
/* @__PURE__ */
|
|
6129
|
+
/* @__PURE__ */ React72__default.default.createElement(
|
|
5161
6130
|
EmailEditorInternal,
|
|
5162
6131
|
{
|
|
5163
6132
|
ref,
|
|
@@ -5220,6 +6189,10 @@ exports.Reader = Reader;
|
|
|
5220
6189
|
exports.ReaderBlock = ReaderBlock;
|
|
5221
6190
|
exports.ReaderBlockSchema = ReaderBlockSchema;
|
|
5222
6191
|
exports.ReaderDocumentSchema = ReaderDocumentSchema;
|
|
6192
|
+
exports.Signature = signature_default;
|
|
6193
|
+
exports.SignatureProps = SignatureProps;
|
|
6194
|
+
exports.SignaturePropsDefaults = SignaturePropsDefaults;
|
|
6195
|
+
exports.SignaturePropsSchema = SignaturePropsSchema;
|
|
5223
6196
|
exports.Spacer = spacer_default;
|
|
5224
6197
|
exports.SpacerProps = SpacerProps;
|
|
5225
6198
|
exports.SpacerPropsDefaults = SpacerPropsDefaults;
|